🔗 Chapter 06

포토북으로 연결하려다
벽에 부딪히다

스토리 화면이 완성됐으니 포토북 제작으로 이어지는 버튼을 만들었어요.
그런데 버튼을 눌러도 아무 일도 일어나지 않았습니다.

📱 새 화면 추가

스토리 상세 화면을 만들었어요

스토리 목록에서 항목을 탭하면 그 스토리의 사진들을 볼 수 있는 화면이 필요했어요. 사진들을 격자(그리드) 형태로 보여주고, 하단에 "포토북 만들기" 버튼을 배치했습니다.

📸 구현 완료
선택한 스토리의 사진들을 3열 격자로 표시하는 화면 완성. 스크롤 시 상단 타이틀이 자연스럽게 축소되는 효과 포함. 하단에 크고 눈에 잘 띄는 "포토북 만들기" 버튼 배치 완료.
🐛 문제 발생

버튼을 눌렀는데 아무 일도 안 일어났어요

빌드는 성공했어요. 화면도 잘 열렸어요. 사진도 잘 보였어요. 그런데 "포토북 만들기" 버튼을 탭하면... 아무 반응이 없었어요.

😱 증상
버튼을 누르면 → 앱 홈 화면으로 이동 → 포토북 제작은 시작되지 않음.
코드 자체에 문제는 없었어요. 그렇다면 뭐가 문제였을까요?

AI와 함께 코드를 하나씩 따라가며 분석했더니 근본적인 이유가 드러났습니다.

🔍 원인 파악
기존 포토북 제작은 이런 흐름이에요:
웹사이트에서 포토북 종류 선택 → 상품코드 발급 → 앱에서 사진 선택 → 편집 시작

나의스토리에서 직접 진입하면 상품코드를 받아오는 과정이 없어요. 포토북 편집기는 이 코드 없이는 시작을 못 합니다. 두 흐름의 출발점이 서로 반대 방향이었던 거예요.
💡 해결책 결정

두 가지 선택지를 분석하고 결정했어요

AI가 선택지별 구현 방법과 장단점을 분석해줬고, 결정은 사람이 내렸어요.

옵션 A — 선택
웹팀이 전용 페이지를 만들어주는 방식
포토북 종류만 선택하는 별도 웹페이지를 만들고, 나의스토리에서 그 페이지로 연결해요. 사용자가 종류를 선택하면 상품코드가 발급되고 기존 편집 흐름으로 연결됩니다.
옵션 B — 탈락
기존 홈 화면 전체를 여는 방식
기존 홈 화면을 그대로 열어서 사용자가 다시 포토북을 선택하게 해요. 구현이 쉽지만, 이미 스토리를 선택했는데 다시 고르라니 사용자 경험이 어색해요.
⭐ 결정 이유
"앱이 이미 사진을 분류해놨는데, 사용자가 다시 골라야 한다면 의미가 없잖아요."
옵션 A로 결정. 웹팀과 협업해서 포토북 종류 선택 전용 URL을 만들기로 했습니다.
🗺️ 최종 흐름

나의스토리 → 포토북 편집기까지의 전체 흐름

1
앱 홈 화면 — 나의스토리 아이콘 탭
홈 화면(웹 페이지)에 끼워넣은 아이콘을 탭하면 나의스토리 화면이 열려요
2
스토리 목록
사진들이 이벤트별로 자동 분류된 스토리 목록 표시
3
스토리 상세 화면
선택한 스토리의 사진들을 3열 격자로 확인. 하단에 "포토북 만들기" 버튼
4
포토북 종류 선택 (웹팀 협업 예정)
버튼 탭 시 전용 웹페이지가 열리고, 포토북 사이즈/종류를 선택하면 상품코드 발급
5
포토북 편집기 시작
상품코드 + 스토리 사진들을 받아서 기존 AI 추천 포토북 편집 화면으로 진입
📄 이 챕터에서 얻은 것
상세 화면 완성 + 연결 방식 결정
스토리 상세 화면 구현, 포토북 만들기 버튼 미동작 원인 파악(상품코드 없음), 웹팀 협업으로 전용 URL 방식으로 해결하기로 결정했습니다. 다음은 웹팀과 전용 페이지 연동 작업입니다.
← 이전: 화면이 작동하다
06 / 07
다음: 앱 구조가 복잡했다 →