지난주에 우리는 길을 닦았다.
/me로 내 프로필을 고정하고, 로그인 후 랜딩을 /posts로 통일하고,
PathConfiguration로 “어떤 화면을 탭으로, 어떤 화면을 모달로” 규칙을 만들었다.
그때부터 조비엣은 그냥 웹앱이 아니었다.
앱의 문법을 갖기 시작했다.
그리고 이번 주, 그 문법이 가장 먼저 부딪히는 질문이 하나 있었다.
이미지는 어디로 가야 하지?
웹에서는 이미지 클릭하면 그냥 확대하면 된다.
하지만 Turbo Native로 가면 그 순간은 “화면 전환”이 된다.
즉, 이미지 확대 하나가 앱의 신뢰를 바꾼다.
이번 주는 그래서
“이미지 확대”를 기능으로 보지 않고 네비게이션 규칙으로 봤다.
1) 같은 ‘확대’인데, 웹과 네이티브는 다르다
웹에서 이미지 확대는 보통 이렇게 끝난다.
- 라이트박스(overlay)
- 모달 팝업
- 혹은 새 탭
근데 Turbo Native는 다르다.
URL 이동이 곧 화면 이동이고,
화면 이동은 “뒤로가기 / 캐시 / 탭 상태”까지 영향을 준다.
이미지 확대를 어설프게 처리하면 이런 일이 생긴다.
- 뒤로가기를 눌렀는데 “이상한 페이지”로 돌아감
- 이미지가 모달로 떴는데 탭 네비게이션이 꼬임
- 캐시가 남아서 이전 상태가 섞임
그래서 이번 주의 결론은 단순하다.
이미지 확대는 ‘연출’이 아니라 ‘라우팅’이다.
2) 선택지 3개: Lightbox / Modal / Native Screen
이미지 확대를 구현할 수 있는 길은 크게 세 가지였다.
A. Lightbox (현재 shared/lightbox)
- 장점: 웹에서 제일 자연스럽고 빠름
- 단점: Turbo Native에서 “이게 화면인가? overlay인가?”가 애매해질 수 있음
- 위험: 네이티브에서 overlay가 남거나, 뒤로가기가 꼬이는 경우
B. Modal (PathConfiguration context: modal)
- 장점: 이미 PR A에서 “서버가 닫는 모달” 패턴을 확립함
- 단점: 이미지 확대는 폼처럼 서버 제출이 아니라 “보기”라서, 모달이 과할 수 있음
- 포인트: URL이 있다면 관리가 쉬워짐 (딥링크도 됨)
C. Native Screen (default context로 화면 전환)
- 장점: Turbo Native에서 가장 자연스러운 UX
- 단점: URL/라우팅을 별도로 설계해야 하고, 웹에서도 페이지가 생김
- 포인트: ‘이미지 상세’가 진짜 하나의 화면이 된다
이번 주는 여기서 “정답 하나”를 바로 고르지 않았다.
대신, 조비엣의 태도에 맞게 질문을 바꿨다.
“뭐가 멋있지?”가 아니라
“뭐가 흔들리지 않지?”
3) 원칙: “이미지는 URL을 가져야 한다”
결국 Turbo Native에서 신뢰를 지키는 쪽은 하나로 수렴한다.
이미지는 URL을 가져야 한다.
왜냐면 URL이 있어야:
- 딥링크가 되고
- 공유가 되고
- 네이티브/웹이 같은 규칙으로 움직이고
- PathConfiguration로 “이건 모달, 이건 화면”을 깔끔하게 분기할 수 있다
라이트박스는 예쁘다.
근데 라이트박스는 URL이 없다.
URL이 없으면, 네이티브에서 ‘화면’이 아니라 ‘상태’가 된다.
상태는 잘 새고, 잘 꼬인다.
특히 “아빠 개발자”가 제일 싫어하는 종류의 꼬임이다.
(이거 한 번 꼬이면, 밤에 애들 재우고도 디버깅하다가 새벽에 멘탈 털림 ㅋㅋ)
4) 이번 주 목표: “미디어 라우팅 PR C”의 설계
이번 주는 실제로 PR C로 이렇게 정리될 예정이다.
(1) 이미지 상세 페이지(또는 엔드포인트) 만들기
- /media/:id
- 또는 /posts/:post_id/images/:id
(2) PathConfiguration에 규칙 추가
- 이미지 상세는 기본 화면(컨텍스트 default)로 둘지
- 아니면 modal로 띄울지 결정
내 감각으로는 이렇게 간다:
- “확대만”이면 modal도 가능
- “정보/신고/저장”까지 붙으면 screen이 낫다
조비엣은 중고거래 + 커뮤니티 성격이라,
이미지에 “신뢰”가 달라붙는다.
그래서 그냥 확대가 아니라,
“이 이미지가 무엇인지” 맥락이 중요해질 가능성이 높다.
5) 이번 주의 결론: “시선이 흔들리면 제품도 흔들린다”
지난주가 길을 닦는 주였다면,
이번 주는 그 길 위에 시선을 얹는 주다.
사람은 글보다 이미지를 먼저 믿는다.
특히 중고거래는 더 그렇다.
사진이 흐리면, 마음도 흐려진다.
그래서 이미지 확대 하나라도
나는 그냥 ‘UI’로 처리하고 싶지 않다.
시선이 안정되면, 신뢰가 쌓인다.
조비엣이 만들고 싶은 건 그 신뢰다.
다음 주 예고 (4주차)
4주차는 아마 이렇게 간다.
- PR C 실제 구현: 이미지 상세/확대 라우팅 확정
- Turbo Native 템플릿 붙일 준비(최소 iOS 먼저)
- 탭 3개(홈/채팅/프로필) + 모달(신고/리뷰) + 미디어(이미지)
→ 이 조합이 “앱의 골격”으로 완성된다