feat(ui): 캐러셀 인디케이터 규칙 정리와 이미지 확대뷰 개선

[coldbrow]

0. 링크

• NOOK-209 캐러셀 인디케이터 노출 규칙 정리 및 동적 인디케이터 구현
• NOOK-211 [QA] 이미지 확대뷰 화면 개선

1. 요약

• 이미지가 여러 장 걸쳐 보이는(peek) 캐러셀은 점을 두지 않는 규칙에 맞춰, 혼자 켜져 있던 게시물 이미지의 인디케이터를 껐습니다. 6장부터는 점이 무한정 늘어나지 않고 최대 6개로 묶입니다.
• 인디케이터는 인스타그램 방식입니다 — 풀사이즈 세 칸 안에서는 점 묶음이 멈춰 있고, 세 칸을 벗어날 때만 밀립니다. 그래서 같은 장이라도 앞에서 왔는지 뒤에서 왔는지에 따라 배치가 달라집니다.
• 이미지 확대뷰의 사진이 헤더+상태바 높이의 절반만큼 아래로 치우쳐 있던 걸 화면 전체 기준 정중앙으로 맞췄습니다(실기기 30~36px). 아래로 쓸어내려 닫는 제스처도 붙였습니다.
• PostImages 하단 여백이 28px → 12px 로 16px 줄어듭니다. 티켓이 지정한 값인데 기존 점 블록(py-3 12 + 점 4 + 12)과 높이가 다릅니다. 의도한 값이 맞는지만 봐주세요.

2. 작업 내용

인디케이터 (NOOK-209)

• 노출 규칙 — PostImages 를 indicator={false} 로 바꿨습니다. SavedPostCard·PlaceSearchResultDetail 은 이미 꺼져 있었고, 풀폭 캐러셀(PlacePhotos·PostImageViewer·PlacePhotoViewer 확대뷰·OnboardingCarousel)은 그대로 켜져 있습니다.
• 동적 인디케이터 — 현재 페이지를 7칸짜리 크기 틀에 놓고 존재하는 페이지만큼만 좌우로 잘라냅니다. 작아진 끝 점이 곧 "그쪽에 안 보이는 페이지가 남았다" 는 표시입니다. 6칸에 7칸을 다 담을 수 없어 한 칸을 버리는데, 넘어온 쪽 끝을 버려 가려는 방향에 점을 더 남깁니다 — 앞/뒤가 거울처럼 대칭입니다.
• 미확정이던 전환 지점 — 시안 4/20 프레임 기준 4번째 장부터 6개로 늘어납니다.
• 크기 체계 — 시안 캡처에서 점 면적을 재서 Default 5 / Small 4 / XSmall 3, 간격 4px, Active #1f1f1f(gray-100), 비활성 #e4e6e9(gray-20) 로 확정했습니다. 점은 기존 구현대로 원이 아니라 사각형이며 시안도 그렇습니다. 온보딩의 size="md" 를 걷어냈고 클릭·좌우 키·터치 영역은 그대로입니다.
• 상태가 생겼습니다 — 방향을 기억해야 해서 CarouselIndicator 가 더 이상 순수 함수가 아닙니다. 렌더 중 setState(React 파생상태 패턴)를 씁니다. 여기가 리뷰 포인트입니다.

이미지 확대뷰 (NOOK-211)

• 중앙 정렬 — flex-1 items-center 가 헤더 아래 남은 공간만 기준으로 삼고 있었습니다. 헤더를 자리 차지하지 않게 띄우고 사진 래퍼 높이를 이미지 비율로 묶었습니다. 캐러셀을 띄워 얹어 아래 점이 래퍼 높이를 늘리지 못하게 했습니다 — 점까지 계산에 들어가면 이번엔 사진이 위로 14px 뜹니다.
• 쓸어내려 닫기 — 끄는 동안 사진이 손가락을 따라 내려가고 배경이 옅어집니다(1 → 0.3). 100px 을 넘기고 놓으면 닫고, 못 미치면 제자리로 돌아갑니다.
• 포인터가 아니라 터치 이벤트로 판정합니다. 확대뷰 안 캐러셀이 가로 스크롤 컨테이너라, 실기기에서 손가락을 움직이면 브라우저가 제스처를 스크롤로 가져가며 pointercancel 을 보내고 pointerup 을 주지 않습니다. 처음엔 포인터로 만들었다가 실기기에서만 안 닫히는 걸 확인하고 바꿨습니다.
• 가로 스와이프 충돌 — 첫 움직임에서 축을 한 번 정하고 바꾸지 않습니다. 사진을 넘기다 손이 내려가도 캐러셀이 제 몫을 갖습니다. 손가락이 둘 이상이면 아예 보지 않습니다.
• 확대·팬 충돌 — 뷰어에 자체 확대/팬 기능이 없고 maximum-scale=1.0 으로 핀치도 막혀 있어 충돌 지점이 없습니다. 멀티터치는 위와 같이 무시합니다.
• 비율별 정렬 — 이미지가 aspect-[375/495] object-cover 고정 박스로 렌더돼 원본 비율과 무관하게 같은 자리에 옵니다. 목업(343×212 SVG)과 실데이터 사진 양쪽에서 확인했습니다.

검증

• 실기기(Galaxy S24+) 실측 — 확대뷰 사진 중앙 대비 치우침 0px. 실제 터치로: 크게 내림 → 닫힘 / 살짝 내림 → 45px 따라왔다 복귀 / 드래그 중 배경 0.90·0.64 로 전환 / 가로 스와이프 → 안 닫힘.
• 20장 캐러셀을 0~19 전 구간 훑어 시안 5프레임과 전부 일치 확인([5] 5 5 4 3 → 4 5 5 [5] 4 3 → 3 4 5 5 [5] 4 → 3 4 5 5 [5]), 뒤로 넘길 때 거울 대칭도 확인.
• 온보딩 점 크기·색·간격·클릭·좌우 키·터치 영역 확인.
• 테스트 — 인디케이터 18건(시안 프레임 표 + 방향별 배치 + 최대 개수), 제스처 훅 7건, Carousel 노출/비노출 2건. pnpm check 성공(웹 317개).
• /dev/ui 캐러셀 섹션에 20장짜리 예시를 붙여 동적 동작을 눈으로 볼 수 있게 했습니다.

확인하지 못한 것

• iOS 동작 일치 — Android 실기기로만 확인했습니다. 웹 코드가 동일해 같게 동작할 것으로 보지만 검증은 못 했습니다.
• PostImages 하단 12px — 게시물 상세를 실데이터로 띄워 재보지는 못했습니다. 위 요약의 28→12px 판단과 함께 봐주세요.

남은 것

• 인디케이터를 끈 peek 캐러셀 3종에는 현재 위치를 알리는 수단이 없습니다(티켓 제외 범위).
• onIndexChange 를 쓰는 캐러셀이 6장을 넘으면 화면 밖 페이지는 클릭으로 갈 수 없습니다. 지금 쓰는 곳은 온보딩(3장)뿐입니다.
• 가운데 구간에서 축소된 끝 점은 "숨은 페이지 수" 와 정확히 대응하지 않습니다(시안 4/20 프레임도 같은 성질). 사진 6장일 땐 점 6개가 늘 다 보여 테이퍼가 장식에 가깝습니다.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
nook-client-web	Ready	Preview	Aug 18, 2026 2:55pm