# iOS 앱용 끌어당겨 새로고침
**URL:** https://meta.discourse.org/t/pull-to-refresh-for-ios-app/343667
**Category:** Theme component
**Tags:** discourse-hub, pwa
**Created:** [12월 20, 2024, 5:05오후 UTC](https://meta.discourse.org/t/pull-to-refresh-for-ios-app/343667 "2024-12-20T17:05:14Z")
**Posts on this page:** 14
**Page:** 1
### Author:  [@Don](https://meta.discourse.org/u/Don)
#### Post date: [12월 20, 2024, 5:05오후 UTC](https://meta.discourse.org/t/pull-to-refresh-for-ios-app/343667/1 "2024-12-20T17:05:15Z")
| | | |
| --- | --- | --- |
| ℹ | **요약** | iOS 앱에 ‘아래로 당겨 새로고침’ 기능을 추가합니다 |
| 👓 | **미리보기** | [Theme Creator](https://discourse.theme-creator.io/theme/Don/pull-to-refresh) |
| 🛠 | **저장소** | [GitHub - VaperinaDEV/pull-to-refresh-for-ios-app: This theme component is adds 'pull to refresh' function to iOS App... · GitHub](https://github.com/VaperinaDEV/pull-to-refresh-for-ios-app) |
| ❓ | **설치 가이드** | [테마 또는 테마 컴포넌트 설치 방법](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682) |
| 📖 | **디스코urs 테마를 처음 접하시나요?** | [디스코urs 테마 사용 입문가 가이드](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) |
이 테마 컴포넌트 설치
안녕하세요 👋
iOS PWA에서 누락된 기능이 있습니다. ‘아래로 당겨 새로고침’ 기능이 포함되어 있지 않아 새로고침을 하려면 PWA를 닫고 다시 열어야 합니다. 이 테마 컴포넌트는 ‘아래로 당겨 새로고침’ 기능으로 이 공백을 메우려 합니다. 채널에서 안전하지 않게 작동할 수 있으므로 채팅 페이지에서는 이 기능을 비활성화했습니다. 활성화 지점은 `#main-outlet`이며, 페이지 상단 헤더 아래에서 아래로 당기면 로더가 트리거됩니다.
아래로 당기면 로더가 지속적으로 나타나고, 준비 지점에 도달하면 하이라이트 효과와 함께 느리게 회전하기 시작합니다. 손을 놓으면 더 빠르게 회전하며, 새로고침 동안 페이지 상단에 로더를 유지합니다.
로더를 커스터마이징하기 위한 몇 가지 테마 설정이 포함되어 있습니다.
[이 주제](https://meta.discourse.org/t/ios-pwa-app-pull-to-refresh/343262?u=don)에서 새로운 기기로 테스트해 주신 모든 분께 감사드립니다 🤗
TODO:
- ~~기본 Safari 로더나 유사한 것을 재현해 보기.~~ ✅
- ~~새로고침 동안 로더를 유지하는 방법 찾기~~ ✅
- 새로고침 동안 로더를 유지하기 위해 자바스크립트 대신 CSS 애니메이션 사용
---
### Author:  [@Jagster](https://meta.discourse.org/u/Jagster)
#### Post date: [12월 20, 2024, 6:27오후 UTC](https://meta.discourse.org/t/pull-to-refresh-for-ios-app/343667/2 "2024-12-20T18:27:59Z")
DiscourseHub에서도 작동하네요 😳 정말 좋네요.
2~3초 정도 지연이 발생하는데, 약간 긴 편이에요. 하지만 이것이 i-devices 때문인지, 아니면 컴포넌트 때문인지는 잘 모르겠어요. 그래도 큰 문제는 아닙니다.
---
### Author:  [@MihirR](https://meta.discourse.org/u/MihirR)
#### Post date: [12월 20, 2024, 7:47오후 UTC](https://meta.discourse.org/t/pull-to-refresh-for-ios-app/343667/3 "2024-12-20T19:47:05Z")
빨리 당기면 바로 새로고침이 됩니다. 하지만 상대적으로 느린 속도로 당기면 먼저 화살표(chevron)가 표시되고, 그 다음에 로딩 스피너가 나타납니다. 화살표와 로딩 스피너 사이의 지연은 불필요한 트리거를 방지하고 더 나은 피드백을 제공하기 위해 의도적으로 설계된 것 같습니다. @Don, 제가 틀렸다면 알려 주세요.
---
### Author:  [@Don](https://meta.discourse.org/u/Don)
#### Post date: [12월 22, 2024, 6:16오전 UTC](https://meta.discourse.org/t/pull-to-refresh-for-ios-app/343667/4 "2024-12-22T06:16:38Z")
> [@Don](#):
>
> TODO: 기본 Safari 로더나 이와 유사한 것을 재현해 보기.
안녕하세요 👋
현재 모습은 다음과 같습니다. 기본 Safari 로더와 유사한 것을 시도해 보았습니다. 아래로 당기면 로더가 연속적으로 나타나고, 준비 지점에 도달하면 하이라이트 효과와 함께 천천히 회전하기 시작합니다. 놓으면 더 빠르게 회전하기 시작하며, 페이지 상단에 로더를 유지합니다. 실제로 페이지가 새로고침되기 전에 로더를 숨깁니다.
---
### Author:  [@Jagster](https://meta.discourse.org/u/Jagster)
#### Post date: [12월 22, 2024, 8:58오전 UTC](https://meta.discourse.org/t/pull-to-refresh-for-ios-app/343667/5 "2024-12-22T08:58:50Z")
정말 멍청한 질문인 것 같고, 어쩌면 만족해야 할지도 모르지만, 왜 로더 효과가 하나도 보이지 않나요? 심지어 Discourse의 로더조차도 보지 못합니다. PWA를 사용할 때 메타가 가끔 보일 뿐이죠. 인터넷 속도가 너무 좋은 건가요? 😂
---
### Author:  [@Don](https://meta.discourse.org/u/Don)
#### Post date: [12월 22, 2024, 9:05오전 UTC](https://meta.discourse.org/t/pull-to-refresh-for-ios-app/343667/6 "2024-12-22T09:05:50Z")
> [@Jagster](#):
>
> 왜 로더 효과가 전혀 보이지 않나요?
무슨 뜻이신가요?
[이 기능](https://meta.discourse.org/t/pull-to-refresh-for-ios-app/343667/4?u=don)은 아직 완료되지 않았습니다. 재로딩 시 사이트에 나타나는 내용을 화면 녹화해서 공유해 주실 수 있나요?
---
### Author:  [@Jagster](https://meta.discourse.org/u/Jagster)
#### Post date: [12월 22, 2024, 9:43오전 UTC](https://meta.discourse.org/t/pull-to-refresh-for-ios-app/343667/7 "2024-12-22T09:43:48Z")
네, 그렇지만 아니에요. 현재 이 컴포넌트는 아무것도 하지 않습니다. iPad는 가끔 PWA에 대해 기이한 동작을 보이기도 합니다. 재부팅하면 해결되곤 합니다. PWA는 요즘 다소 문제가 많은데, 최신 iPadOS 업데이트 이후로는 상황이 더 나빠졌습니다. 하지만 이번에는 재부팅도 도움이 되지 않았습니다.
되돌릴 수 있을까요? 가능하다면 어떻게 해야 하나요?
그리고 ‘업데이트되지 않는’ 문제는 어제 컴포넌트를 업데이트한 이후에 시작되었다고 추정합니다. 다만 직접 확인해 보지는 않았습니다. 하지만 우연일 수도 있고, 진짜 문제는 OS에 있을 수도 있습니다.
iPhone은 잘 작동합니다. 처음에… 영어 이름이 뭐였더라… 아래를 가리키는 화살표가 표시되고 나서 스피너가 나타납니다. 이런 현상은 iPad에서는 한 번도 일어나지 않았는데, 화면을 아래로 내린 뒤 놓으면 포럼이 업데이트되었습니다.
---
### Author:  [@Jagster](https://meta.discourse.org/u/Jagster)
#### Post date: [12월 22, 2024, 9:53오전 UTC](https://meta.discourse.org/t/pull-to-refresh-for-ios-app/343667/8 "2024-12-22T09:53:07Z")
테마를 변경하면 업데이트가 실행되는 걸 볼 수 있어요. 정말 짧은 깜빡임이 보이거든요. 하지만 두 번째에는 안 돼요. 다시 테마를 변경하면 한 번은 동작하지만, 두 번은 안 돼요.
정말 이상하네요.
---
### Author:  [@Don](https://meta.discourse.org/u/Don)
#### Post date: [12월 22, 2024, 9:55오전 UTC](https://meta.discourse.org/t/pull-to-refresh-for-ios-app/343667/9 "2024-12-22T09:55:27Z")
> [@Jagster](#):
>
> iPhone에서는 작동합니다. 다만 처음에… 영어 이름이 기억이 안 나는데… 아래쪽 화살표가 표시되고 나서 스피너가 뜹니다. iPad에서는 이런 일이 절대 일어나지 않았는데, 화면을 내리면 포럼이 업데이트되었습니다.
네, 스타일을 모바일 뷰에만 적용해서 그런 것 같습니다. iPad는 데스크톱 뷰를 사용하니까요. 업데이트 시 이 문제를 수정하겠습니다. 화살표와 스피너를 새 Safari 스타일의 로더로 교체할 수 있을 것 같습니다.
> [@Jagster](#):
>
> 테마를 변경하면 업데이트가 됩니다.
어떤 테마에서 해당 컴포넌트가 작동하지 않나요?
---
### Author:  [@Jagster](https://meta.discourse.org/u/Jagster)
#### Post date: [12월 22, 2024, 10:00오전 UTC](https://meta.discourse.org/t/pull-to-refresh-for-ios-app/343667/10 "2024-12-22T10:00:51Z")
그 모든 것들은 동일합니다. 그리고 아니요, 이는 컴포넌트 간의 충돌이라고 생각하지 않습니다. 왜냐하면 그것이 하는 일은 단 한 번만 의미를 가지며, 심지어 그것이 유일하게 사용되고 있는 경우에도 마찬가지이기 때문입니다.
플러그인은 별개의 문제인데, 잘 모르겠습니다.
iPad가 모바일이 아니라는 사실을 저는 한 번도 기억해 본 적이 없습니다.
---
### Author:  [@Don](https://meta.discourse.org/u/Don)
#### Post date: [12월 22, 2024, 12:18오후 UTC](https://meta.discourse.org/t/pull-to-refresh-for-ios-app/343667/11 "2024-12-22T12:18:43Z")
새로운 Safari 스타일 로더로 컴포넌트를 업데이트했습니다. 이제 iPad에서도 더 잘 작동할 것입니다. 사실, iPad에는 상단에 푸터 내비게이션이 있어서 로더를 가리고 있었습니다. 그걸 깜빡했네요. 😄
---
### Author:  [@Jagster](https://meta.discourse.org/u/Jagster)
#### Post date: [12월 22, 2024, 12:24오후 UTC](https://meta.discourse.org/t/pull-to-refresh-for-ios-app/343667/12 "2024-12-22T12:24:40Z")
역시 훌륭합니다. 잘 작동하고, 이제 언어 변경도 훨씬 쉬워졌네요. 감사합니다!
상단에 있는 푸터 내비게이션 — 그건 좀… 논리적으로 말하면 😳
---
### Author:  [@Don](https://meta.discourse.org/u/Don)
#### Post date: [12월 22, 2024, 12:31오후 UTC](https://meta.discourse.org/t/pull-to-refresh-for-ios-app/343667/13 "2024-12-22T12:31:10Z")
iPhone에서는 하단에, iPad에서는 상단에 위치하기 때문에 이렇게 이름을 붙인 것입니다. 기술적으로는 iPad에서 상단 내비게이션이지만, 습관 때문에 푸터 내비게이션이라고 부르고 있어요. 😅
---
### Author:  [@Don](https://meta.discourse.org/u/Don)
#### Post date: [12월 23, 2024, 6:49오전 UTC](https://meta.discourse.org/t/pull-to-refresh-for-ios-app/343667/14 "2024-12-23T06:49:24Z")
자동 리로드를 언제 실행할지 고민 중이에요. 아래로 당겨서 준비 위치까지 갔을 때 실행할까요, 아니면 손을 뗄 때 실행할까요? 충돌 문제가 생길 수도 있는데 아직 테스트를 안 해봐서요. 사파리 로더는 한 번 회전한 후 줄 하이라이트만 표시됩니다. 줄 하이라이트 애니메이션이 리로드 중에 멈추기 때문에 이 방식은 사용할 수 없어요. 대신 회전 애니메이션은 그 시점에도 실행할 수 있죠. 그래서 로더를 로딩 상태로 두는 것도 방법이에요. 사실 현재처럼 두는 게 더 나을 수도 있어요. 지금은 리로드 중에도 실행될 수 있는 매끄러운 CSS 애니메이션이 있고, 사파리 로더와는 정확히 같지는 않지만 꽤 비슷하거든요… 아, 그리고 원래 목표가 뭐였죠? 🤔