🎉 Chapter 05

화면이 처음 작동하다

기초 코드를 쌓고, 사진 분류 로직을 완성하고,
드디어 실기기에서 "나의스토리" 화면이 처음으로 열렸어요!

🏗️ 기능 구현

사진 자동 분류 기능을 만들었어요

폰에 있는 사진들을 날짜/위치 기준으로 이벤트별로 묶는 기능을 구현했어요. 여행 사진, 생일파티 사진, 일상 사진이 자동으로 각각의 "스토리"로 분류됩니다.

📂

사진 정보 읽기 (Data 층)

폰의 사진 저장소에서 모든 사진의 날짜, 위치 정보를 읽어오는 코드 완성. 사진 파일 자체가 아닌 정보만 읽으니 매우 빠르게 동작해요.

🧩

이벤트 자동 묶기 (클러스터링)

사진을 시간 순서로 줄 세우고, 시간 간격이 크게 벌어지면 다른 이벤트로 분류. 서버 알고리즘 분석을 바탕으로 폰에서도 동일하게 구현했어요.

📺

화면 구현 (Presentation 층)

분류된 스토리 목록을 카드 형태로 보여주는 화면. 각 카드에는 대표 사진, 날짜, 장소, 사진 수가 표시됩니다.

🔌

홈 화면에 진입점 추가

앱 홈 화면(웹뷰)에 "나의스토리" 버튼을 삽입. 홈 화면이 웹페이지라서, JavaScript 코드를 주입해서 버튼을 끼워넣는 방식을 사용했어요.

🎊

드디어 첫 동작!

실기기에서 "나의스토리"를 탭했더니
사진들이 이벤트별로 묶인 스토리 목록이 화면에 나타났어요.
날짜, 장소, 사진 개수까지 잘 표시됐습니다.
계획부터 이 순간까지, 약 2~3주가 걸렸어요.

🐛 버그 발견 & 수정

뭔가 작동하는 걸 보니 너무 신나서 여러 상황을 테스트했는데, 두 가지 버그를 발견했고 AI와 함께 고쳤습니다.

🐛 버그 1

사진 권한 허용 후 자동 새로고침 안 됨

처음엔 사진 접근 권한을 요청하는데, 허용 버튼을 눌러도 목록이 자동으로 불러오지 않았어요.

✅ 해결

권한 허용 시 자동 로드 추가

권한을 허용하면 자동으로 사진 목록을 불러오도록 코드 수정. AI가 권한 처리 코드 패턴을 분석해서 어디에 추가할지 정확히 알려줬어요.

🐛 버그 2

빈 스토리가 목록에 나타남

사진이 없는 스토리가 빈 카드로 목록에 표시되는 문제. 보기에 좋지 않고 탭하면 아무것도 안 보임.

✅ 해결

사진 없는 스토리 자동 제거

목록을 만들 때 사진이 1장 이상 있는 것만 포함하도록 필터링 추가. 깔끔하게 해결됐어요.

🎉 이 챕터에서 얻은 것

나의스토리 기능 첫 동작 완성!

사진 자동 분류 → 스토리 목록 화면 → 홈 화면 진입점까지 모두 작동하는 상태가 됐어요. 실기기에서 테스트하고 버그 2개를 수정해서 안정적인 상태로 만들었습니다. 다음은 스토리에서 실제 포토북 제작으로 이어지는 흐름을 연결할 차례입니다.

05 / 07