사진 공유 앱 프로토타입
휴대폰에서 앱처럼 조작할 수 있는 HTML 워킹 프로토타입입니다. 앱은 phou/index.html, 받는 사람용 웹은 web/index.html 에 들어 있습니다.
서비스 소개
정해 둔 시간 동안, 초대된 사람들이 찍은 사진이 하나의 공유 앨범에 자동으로 모이는 사진 공유 서비스입니다.
- 앱(공유하는 사람): 앨범을 만들고 친구를 초대합니다. 모인 사진에서 AI가 고른 BEST컷을 보고 정리합니다.
- 웹(받는 사람): 설치나 가입 없이 초대 링크로 들어삽니다. 사진을 보고, 저장하고, 내 사진을 올릴 수 있습니다.
핵심 가치: AI BEST컷 추천으로 받는 사람이 "뭘 저장할지" 고민하는 시간을 줄이는 것
바로 열기 (GitHub Pages, 어디서나 열림)
1차 UT 후 수정된 시안
휴대폰에서 열기 (로컬 서버)
Mac에서 서버를 켜요 (macOS 기본 Ruby 사용).
ruby -run -e httpd phou -b 0.0.0.0 -p 8123
휴대폰을 같은 Wi-Fi에 연결하고 http://<Mac의 IP>:8123 으로 들어가요. Mac의 IP는 ipconfig getifaddr en0 으로 확인할 수 있습니다.
Safari/Chrome의 공유 → 홈 화면에 추가 로 열면 주소창 없이 전체 화면으로 뜹니다.
프로토타입 조작
- 상태 전환 패널(로딩·비어 있음·오류 등): 휴대폰에서 두 손가락으로 탭, 또는 주소 끝에
?dev
- 컴퓨터 브라우저에서는 원래의 폰 프레임 + 상태 전환 바로 보입니다.
프로토타입 구성
| 구분 | 화면 |
|---|
| 앱 | 홈, 전체사진(캘린더·필터: 전체 / AI 추천만 / 폴더별 / 사람별 / 장소별), 공유앨범(전체·AI 추천·내 사진 탭), 사진 상세, 선택 모드, 공유폴더 만들기(2단계), 폴더 설정, 친구 초대(QR·링크), 알림, 프로필·프로필 수정, 메뉴(친구 목록, 업로드·알림·권한 설정) |
| 웹 | 초대 링크 입장(기본 / 승인 대기 / 링크 만료), 앨범 보기(전체·AI 추천·내 사진), 사진 업로드(업로드 중 / 실패) |
- 화면 위쪽의 상태 전환 버튼으로 빈 상태, 실패 상태 같은 예외 화면을 바로 볼 수 있습니다.
- 웹에서는 iOS / Android 전환으로 기기별 저장 안내 문구를 확인할 수 있습니다.
사용한 툴
- Claude (Anthropic): PRD 정리, 화면별 프롬프트 작성, HTML 프로토타입 생성과 수정
- Claude Code: 레포 폴더 구성(phou/, web/), 앱/웹을 고르는 첫 화면(index.html) 제작, 프로토타입 수정
- GitHub Pages: 배포
작업 과정
- PRD 정리: 팀 PRD와 4주차 Lo-Fi를 넣고 핵심 기능, 사용자, 화면 목록을 정리했습니다.
- 정책 검토: "일정 시간 동안 찍은 사진만 자동 업로드"가 iOS / Android 보안 정책에 걸리는지 확인했습니다. 사진 접근 권한과 백그라운드 동작에 제약이 있다는 점을 설계에 반영했습니다.
- 화면별 프롬프트 작성: 예시 형식(목적, 구성 요소, 상태, 제약)에 맞춰 홈, 전체사진, 공유앨범 프롬프트를 썼습니다.
- 앱 프로토타입 생성: 프롬프트를 실행해 홈 화면부터 만들고, 전체사진과 공유앨범을 하나씩 붙였습니다.
- 구조 다듬기: 하단 탭, 메뉴 구성, 폴더 설정, 선택 모드, 알림, 프로필, 친구 목록을 하나씩 추가하고 고쳤습니다.
- Lo-Fi와 대조: Lo-Fi에 그렸는데 빠진 화면을 찾아 보완했어요. AI 분류 상세, 사람별·장소별 목록이 여기에 해당합니다.
- 받는 사람 웹 생성: 초대 입장, 앨범 보기, 업로드 흐름을 따로 만들었습니다.
- 배포: GitHub Pages로 올렸습니다. 첫 화면에서 앱과 웹 중 하나를 골라 들어갈 수 있습니다.
효과가 있었던 핵심 프롬프트
1. 서비스 핵심을 먼저 한 문장으로 고정하기
(프롬프트) 우리 서비스는 정해놓은 시간동안 앨범에 초대된 사람들이 찍는 사진들이 전부 앨범으로 들어가는 게 핵심 기능입니다.
→ 이후 모든 화면이 이 핵심에서 벗어나지 않게 기준이 됐습니다.
2. 예시 형식을 주고 화면 프롬프트 쓰게 하기
(프롬프트) 아까 보낸 PRD를 바탕으로 다음 이미지 예시와 같은 프롬프트를 작성.
→ 화면마다 목적, 구성, 상태가 같은 틀로 정리돼서 결과물이 일관됐습니다.
3. 하지 말아야 할 것을 같이 말하기
(프롬프트) 여기서 전체 다운로드 버튼을 만들고, AI 분석중 상태화면은 만들지 말아줘.
4. 위치와 동작을 구체적으로 지시하기
사진 선택화면으로 진입시 하단에는 [삭제 버튼 / 저장 버튼]만, 상단 [앨범명 자리에 '전체 선택' 텍스트, 뒤로가기 버튼이 전체선택 버튼으로, 우측 상단에는 '취소' 텍스트]
5. 만든 것과 기획을 대조시키기
prd문서 속 직접그린 로우파이 화면 중에 안 만든 화면이 있는지 검토
→ 빠진 화면을 AI가 목록으로 찾아줬습니다.
실패한 시도와 바꾼 결정
| 처음 시도 | 문제 | 바꾼 방향 |
|---|
| 하단 탭에 캘린더 / 친구들 / 새 폴더 등 여러 메뉴 | 탭이 많고 역할이 겹침 | 하단 탭은 홈 · 전체사진 · 메뉴로 줄이고, 새 앨범 만들기는 + 플로팅 버튼으로 분리 |
| 전체사진 상단에 "선택" 버튼 | 날짜로 사진 찾기가 더 자주 필요함 | 선택 버튼 대신 캘린더 아이콘으로 바꾸고, 선택은 사진을 길게 눌러서 진입 |
| BEST컷 묶음을 "펼치기/접기" 텍스트로 열기 | 누를 곳이 작고 단계가 많음 | 썸네일을 한 번 누르면 펼치기, 한 번 더 누르면 상세 보기 |
| 화면마다 "AI 분석 중" 상태 화면 | 사용자에게 필요 없는 대기 화면 | 만들지 않음 |
| 알림을 오늘 / 이번 주 / 이전으로 나누고 AI 추천 알림도 넣음 | 알림이 너무 많고 복잡함 | 하나의 목록으로 합치고 AI 추천 알림은 제거 |
| 웹 입장에 비밀번호 상태 | 받는 사람의 진입 장벽이 됨 | 비밀번호 없이 링크 + 닉네임만으로 입장, 필요하면 앨범 주인이 승인 |
| AI 추천 탭에 여러 분류 카드 | 정보가 너무 많음 | AI가 고른 BEST컷과 "내 얼굴이 나왔어요"(나 혼자 / 함께) 묶음만 남김 |
구현 중 생긴 버그
- 사진을 길게 눌러 선택 모드에 들어가면 손을 뗄 때 클릭이 한 번 더 인식됐습니다. 길게 누른 직후의 클릭은 무시하도록 고쳤습니다.
- 토스트 메시지가 + 버튼, 하단 시트, 사진 뷰어와 겹쳤어요. 위치를 화면마다 다르게 조정했습니다.
- 업로드 취소 확인 창이 떠 있는 동안에도 업로드가 계속 진행돼서 장수가 맞지 않았어요. 확인 창이 떠 있는 동안 업로드를 멈추게 했습니다.
최신 앱 수정 사항
최신 앱은 ut-1/app/index.html입니다. /phou/와 웹 버전은 이전 버전을 유지합니다.
- 앨범 생성·정보 수정에서 기간 설정을 제거했습니다. 사진 추가 단계의 사진을 불러올 기간만 유지하며 기본값은 오늘 00:00부터 현재 시각입니다.
- 전체·베스트컷 탭과 가로 필터(전체, 좋아요한 사진, 사람, 장소, 시간, 음식·풍경, 올린 사람)를 제공합니다.
- 올린 사람은 나/참여자 1/참여자 2/참여자 3으로 구분합니다.
- 사진별 댓글을 같은 브라우저에 저장합니다. 정보 버튼은 사진 상단, 저장/공유/댓글/삭제는 하단 한 줄입니다.
- 저장 옵션에서 대표 사진/모든 사진과 내 사진 제외 체크박스를 선택하며 장수와 대상이 함께 바뀝니다. 실제 파일 다운로드는 기존처럼 시연합니다.
- 초대 링크 기본 유효기간은 3일입니다. QR/링크와 공유 버튼·친구 추가를 정리했습니다. 실제 초대 전송과 업로드는 시연입니다.
- 하단 내비게이션·원본 삭제 질문·용량 경고·앨범 검색창을 제거했습니다.
drafts/에는 검토용 시안과 작업 중간 화면 기록이 있습니다. 각 검증 결과·캡처는 해당 실행 시점의 기록이며, 최신 배포 대상의 재현 검증은 tests/smoke_app.py를 사용합니다.
이번 수정과 브라우저 검증에는 OpenAI Codex를 사용했습니다. 사진은 기존 자리표시자를 유지하며 더미 사진을 추가하지 않았습니다.
화면 문구 기준
최신 앱은 공유앨범/사진을 불러올 기간/사진 공유 기준을 사용합니다. 홈의 안내도 앨범 만들기 → 친구 초대 → 사진을 불러올 기간 정하기 순서로 맞췄습니다. 앨범에는 기간을 설정하지 않으며, 사진 추가 시 불러올 기간을 설정합니다.
