방은수

리스트 / 지도 / 상세 등 다수의 hooks와 API 호출이 누적되는 무거운 화면에서, 진입 시점에 위젯이 동시 마운트되며 네비게이션 애니메이션이 끊기고 skeleton 노출이 지연되는 문제 발생

진입점과 본문을 두 단계로 분리하여, 네비게이션 전환 직후에는 skeleton만 즉시 노출하고 transition 종료 시점을 setImmediate로 감지하여 본문이 애니메이션 종료 이후에만 마운트되도록 처리. 첫 페인트 비용을 최소화하여 체감 진입 속도를 단축

콜드 스타트 상태에서 푸시 클릭 시 네비게이션 스택이 준비되지 않아, 라우팅이 누락되는 케이스 발생

전역 store에 pending payload를 적재하고, 네비게이션 ready 시점에 큐를 소비하여 라우팅하도록 비동기 큐 패턴 적용

푸시 딥링크 목적지가 웹뷰 화면인 경우, 콜드 스타트로 진입하면 네비게이션 스택이 해당 웹뷰 단일 화면만 갖게 되어 뒤로가기 시 앱 내부 화면으로 복귀하지 않고 앱 자체가 종료되는 문제 발생

단순 navigate 호출 대신 navigation state를 직접 구성하여, BottomTabs를 베이스 라우트로 두고 그 위에 Stack(연관 underlay 화면 + 웹뷰)을 쌓는 형태로 reset. 뒤로가기 시 웹뷰 → 연관 화면 → BottomTabs 순서로 자연스럽게 이탈하도록 흐름을 보장

북마크 / 좋아요 등 토글성 mutation에서 서버 응답 전까지 UI 반영이 지연되어, 사용자가 동일 버튼을 반복 누르는 현상이 다수 화면에서 발생

cancel → snapshot → cache update → rollback 표준 흐름을 적용하여 서버 응답 전 즉시 UI에 반영. 실패 시 onError 단계에서 snapshot 기반 롤백과 toast 안내로 일관된 흐름으로 통일

영역 필터 선택, 초기 카메라 세팅 등 코드에 의한 카메라 이동까지 사용자 조작과 동일하게 인식되어 결과 리스트 API가 중복 호출되는 문제발생

코드 기반 카메라 이동 여부를 별도 ref로 추적하여 사용자 직접 조작과 분리하고, 재검색 활성화 플래그를 토글하여 의미 있는 사용자 조작 시점에만 재검색이 트리거되도록 처리

메인 화면은 상단 배너 위에 BottomSheet가 부분 노출되는 복합 레이아웃이며, BottomSheet의 snapPoint를 배너 하단 위치에 맞춰 배너가 항상 노출되도록 고정한 구조. 이 환경에서 표준 RefreshControl을 BottomSheet 내부 리스트에 바인딩하면 배너 영역에서의 pull 동작이 감지되지 않아, iOS / Android 모두 당겨서 새로고침이 동작하지 않는 문제 발생

화면 전체를 GestureDetector로 감싸 Pan Gesture로 pull 동작을 직접 감지하고, Reanimated worklet으로 pull 거리에 따라 인디케이터의 위치 / 회전 / opacity를 동기화하는 커스텀 새로고침 흐름을 구현. 임계치 초과 시 새로고침을 트리거하고, 응답 완료 시점까지 인디케이터를 유지하는 상태 흐름을 직접 설계

고주사율·고밀도 Android 기기에서 가상 리스트를 빠르게 튕겨 넘길 때(fling) 항목이 잠깐 빈 칸으로 보이며 스크롤이 끊겨 보이는 현상 발생

공통 LegendList 래퍼에 Android 전용 분기를 추가. 사전 렌더 영역을 정의하는 drawDistance를 250 → 400으로 상향해 미리 그려둘 범위를 확보하고, 스크롤 감속 정도를 결정하는 decelerationRate를 iOS fast / Android normal로 분기해 플랫폼별 관성 차이 보정. 화면 밖 뷰를 잠시 떼어내는 removeClippedSubviews 경로는 필요 시점에만 켜는 옵션으로 제공하여 Android의 중복 그리기(overdraw) 부하 감소

이미지 피커 라이브러리가 Android에서 시스템 하단 네비게이션 바에 가려져 액션 버튼 영역이 잘리는 문제 발생

라이브러리 자체에 patch를 적용하여 SafeArea inset을 반영하도록 수정하고, pnpm patch 워크플로우로 의존성 업그레이드 시에도 패치가 유지되도록 관리

Reanimated Spring + Pan Gesture 기반 커스텀 가로 스와이퍼가 Android에서 오버슈트가 과하게 발생하고 빠른 스와이프가 인식되지 않으며, 동일한 손 동작에서 iOS 대비 둔하게 동작하는 문제 발생

Spring 설정과 제스처 임계값을 플랫폼별로 분기. Android는 damping을 25(iOS 22)로 상향해 오버슈트 억제, Pan Gesture의 activeOffsetX를 ±10 → ±8로 좁혀 스와이프 인식 감도 향상, Android에서 velocity가 낮게 보고되는 특성을 반영해 swipe 트리거 velocity threshold를 150으로 낮춰 iOS와 유사한 체감을 갖도록 보정

보기 순서를 변경할 때, API 요청 시 각 보기의 ID가 필요했지만, 보기를 추가·수정·삭제하는 과정에서 새로운 보기와 기존 보기를 구분하기 어려운 문제에 직면

보기의 추가·수정·삭제 직후 문제 데이터를 최신 상태로 유지하기 위해 Tanstack Query의 invalidateQueries 기능을 활용하여 데이터를 자동으로 갱신. 이후, 최신 상태의 보기 데이터를 기반으로 정렬 후 보기 순서 변경 API를 요청하여 정확성을 보장

실습, VOD 등에 따라 요구되는 설정 값이 달라 일관된 폼을 제공하기 어려웠고, UI 복잡성이 증가하는 문제가 발생

각 콘텐츠 유형별로 독립적인 폼을 구성하고, 선택된 유형에 따라 동적으로 렌더링하도록 개선하여 UI 복잡성을 완화하고 사용성을 개선