3주차에서 결론을 하나 냈다.
이미지 확대는 연출이 아니라 라우팅이다.
그 말은 멋있어서 한 말이 아니다.
Turbo Native 앞에 서면, 웹에서 “그냥” 하던 것들이 전부 질문으로 돌아온다.
- 이게 화면이야? 오버레이야?
- 뒤로가기는 어디로 가?
- 캐시는 남아? 안 남아?
- 이걸 공유하면 어디로 열려?
이미지가 URL을 가져야 하는 이유는,
예쁘게 보이기 위해서가 아니라 흔들리지 않기 위해서다.
이번 4주차는 그 흔들림을 끝내기 위해,
이미지를 “상태(state)”에서 “화면(screen)”으로 옮기는 작업에 들어간다.
1) PR A/B로 ‘뼈대’를 만들었고, 이제는 ‘시선’을 얹는다
지금까지의 흐름을 딱 한 줄로 정리하면 이렇다.
- PR A: 모달 표준화 → “서버가 닫아주는 모달” 확립
- PR B: /me + 로그인 랜딩 + 탭 규칙 → “네이티브 탭 뼈대” 확립
- PR B.5/B.6: PathConfiguration 문법 정리 → “네이티브가 이해하는 규칙” 확정
이제 PR C가 담당하는 건 하나다.
이미지가 어디로 갈지.
(그리고 그 길을 Turbo Native가 이해하게 만들기)
2) 목표: “이미지 상세 화면”이라는 주소를 만든다
라이트박스는 예쁘다.
근데 라이트박스는 URL이 없다.
URL이 없으면 네이티브에서 “화면”이 아니라 “상태”가 된다.
상태는 새고, 꼬이고, 기억이 남는다.
그게 중고거래 앱에서 제일 위험한 종류의 불안정이다.
그래서 이번 주의 목표는 단순하다.
✅ 이미지가 클릭되면, “주소”로 이동한다
예시:
- /media/:id
- 또는 /posts/:post_id/images/:id
이렇게 되면 아주 중요한 것들이 해결된다.
- 딥링크: 공유하면 같은 화면으로 열린다
- 뒤로가기: 화면 이동의 역사(history)가 정상적으로 남는다
- 캐시: 어떤 화면이 캐시되고 어떤 화면이 새로 로드되는지 통제 가능
- Native 전환: PathConfiguration로 modal/screen 구분이 명확해진다
3) Lightbox는 없애는 게 아니라, ‘격하’한다
여기서 중요한 태도 하나.
조비엣은 “한 방에 갈아엎기”를 하지 않는다.
(내 건강도 그렇고, 내 삶도 그렇고, 제품도 그렇다. 급하면 잘 부러진다.)
그래서 이번 PR C에서는 라이트박스를 이렇게 취급한다.
- 웹에서는 보조 UX로 남겨도 된다
- 하지만 Turbo Native 기준의 ‘정답’은 URL 기반 상세 화면이다
즉, 라이트박스는 “메인 네비게이션”이 아니라
폴백(fallback) 혹은 웹 전용 가벼운 연출로 내려놓는다.
4) PathConfiguration: 이미지 상세는 modal이 아니라 screen이 유력
이미지 확대를 modal로 할 수도 있다.
근데 조비엣의 이미지는 단순 확대가 끝이 아닐 가능성이 크다.
중고거래 이미지에는 맥락이 붙는다.
- 이 사진이 어떤 글의 사진인지
- 신고/차단 같은 신뢰 기능이 붙을지
- 저장(북마크)이나 신고, 유사 이미지 같은 기능이 생길지
그 순간, 이미지는 “모달로 잠깐 보는 것”이 아니라
하나의 화면으로 존재해야 하는 대상이 된다.
그래서 이번 주의 방향은 이렇게 간다.
- /media/*는 기본 context(default) → screen
- 신고/리뷰 같은 입력 폼은 context(modal) → modal
즉,
보기(view)는 screen
입력(form)은 modal
이 단순한 원칙이, 앱을 단단하게 만든다.
5) 이번 주의 체크리스트 (PR C 초안)
이번 주 작업은 보통 이런 순서로 진행된다.
- 이미지 상세 엔드포인트 확정
- 컨트롤러/뷰: “이미지 하나를 보여주는 화면” 만들기
- 클릭 이벤트: 기존 라이트박스 대신 URL 이동으로 연결
- PathConfiguration에 /media/* 규칙 추가(또는 /posts/*/images/*)
- Turbo Native에서의 뒤로가기/탭 상태가 흔들리지 않는지 확인
여기까지 가면, 조비엣은 딱 한 단계 올라간다.
“웹앱”에서
“웹과 네이티브가 같은 규칙으로 걷는 앱”으로.
6) 결론: 작은 확대가, 큰 신뢰를 만든다
사람은 이미지로 먼저 판단한다.
특히 거래는 더 그렇다.
그래서 “이미지 확대”를 대충 처리하면,
그 앱은 대충 만들어진 것처럼 보인다.
반대로,
이미지를 제대로 라우팅하면
“이 앱은 믿을 만하다”는 감각이 먼저 들어온다.
이번 주는 딱 그 감각을 설계하는 주다.
다음 주 예고 (5주차)
5주차는 PR C를 바탕으로
네이티브 쉘(iOS/Android 템플릿) 붙이기로 넘어가기 딱 좋은 타이밍이다.
- iOS 먼저(보통 iOS가 진입장벽 낮음)
- PathConfiguration 실전 적용 확인
- 탭 3개 + 모달 + 미디어 화면
→ “앱 골격”이 진짜로 네이티브 안에서 살아 움직이게 된다