# [기획서] Tripping Puffin 서비스 기획 및 UX 설계서 > **Version:** 2.0 (Service Planning) > **Date:** 2026-01-28 > **Status:** Service Design Phase --- ## 1. 서비스 구조 (Service Architecture) ### 1.1. Core Concept * **Catchphrase:** "Follow the Puffin, Collect the World." * **Service Loop:** 1. **Explore (탐색):** 지도 위에서 '살아있는' 퀘스트 발견. 2. **Play (수행):** 게임하듯 미션(사진/영상/액션) 수행. 3. **Earn (보상):** 즉시 사용 가능한 로컬 리워드 획득. ### 1.2. Information Architecture (IA) - Main Tabs 사용자의 행동 패턴에 맞춘 4-Tab 구조를 제안합니다. 1. **[Map] (Home):** 서비스의 메인. 내 주변 퀘스트 탐색 및 네비게이션. 2. **[Feed] (Discovery):** 인기 크리에이터의 루트나 핫한 퀘스트를 '콘텐츠'로 소비. 3. **[Camera] (Action):** 문맥(위치/상황)을 인지하는 AI 카메라 실행. 4. **[My Puffin] (Profile):** 나의 여권(Passport), 수집한 배지, 포인트 지갑. --- ## 2. 주요 화면 구성 및 UX 상세 (Key Screen UX) ### 2.1. [TAB 1] Map Home (메인 화면) > "여행은 지도 위에서 시작된다." * **화면 구성:** * **Full Screen Map:** 앱 실행 즉시 내 위치 중심의 3D 지도 노출. * **Puffin Footprints (Pins):** 일반적인 핀 대신 '퍼핀 발자국' 아이콘 사용. * *Golden Footprint:* 포인트가 높은 '잭팟' 퀘스트. * *Blue Footprint:* 일반 퀘스트. * **Needle Radar:** 나침반처럼 가장 가까운 퀘스트 방향을 가리키는 UI (Garmification). * **Floating Banner:** "현재 성수동 접속자 1,204명! 🔥" (실시간성 강조). * **핵심 기능:** * **Preview:** 발자국 탭 시, 해당 장소의 'Vibe Log(5초 영상)'가 썸네일로 자동 재생. * **Route Mode:** 개별 스팟이 아닌 '성수동 카페 완정정복 루트' 선택 시, 5개의 발자국이 선으로 연결됨. ### 2.2. [TAB 3] AI Camera (Action 화면) > "셔터를 누르는 순간, 검증은 끝난다." * **진입 시나리오:** 퀘스트 장소 도착 -> '도전하기' 버튼 클릭 또는 하단 탭 [Camera] 클릭. * **화면 구성:** * **Smart Overlay (Ghost View):** * (Ghost Shot 미션 시) 원본 사진이 반투명하게 카메라 위에 겹쳐짐. * 화면 중앙에 "일치율 45%..." 실시간 게이지 바 표시. * **Mission Guide:** 상단에 "벤치 왼쪽 끝에 앉아서 다리를 꼬아보세요" 텍스트 가이드 (AI가 원본 분석 후 제공). * **Shutter Button:** * 일치율 80% 미만: 버튼이 회색 (Disabled) 또는 "더 맞춰보세요". * 일치율 80% 이상: 버튼이 황금색으로 빛나며 "Shoot!" 활성화. * **성공 연출 (Success Effect):** * 촬영 즉시 화면이 '도장(Stamp)' 찍히는 애니메이션과 함께 퀘스트 카드가 여권에 수집됨. * 보상 팝업: "+100 PP 획득! (현재 4,500 PP)" ### 2.3. [TAB 4] My Puffin (여권/지갑) > "나의 여행이 자산이 된다." * **화면 구성:** * **Digital Passport:** 실제 여권 디자인. 스탬프 찍힌 페이지를 넘겨보는 UX (Skeuomorphism). * **Stamp Gallery:** 내가 깬 퀘스트들의 베스트 컷이 우표처럼 모여있음. * **Wallet:** * 보유 포인트 (PP) 및 등급 (예: Lv.5 탐험가). * **Exchange Store:** 포인트로 구매 가능한 상품 목록 (스타벅스 기프티콘, 지역 카페 할인권). --- ## 3. 핵심 유저 플로우 (Core User Flow) ### Scenario A: 수동적인 여행자가 능동적 탐험가로 (The Discovery Loop) 1. **[Push]** 성수동 진입 시 알림: *"띵동! 🚩 근처 50m 앞에 '전설의 소금빵' 퀘스트가 있어요!"* 2. **[Map]** 알림을 누르면 지도가 켜지고, 내 앞 건물에 **'황금 발자국'**이 둥둥 떠 있음 (AR View). 3. **[Preview]** 발자국을 누르니, 갓 구운 빵의 김이 모락모락 나는 **5초 영상**이 재생됨. => **"가보자!" (의사결정)** 4. **[Walking]** 지도에 표시된 점선을 따라 이동. 도착 시 **"도착! 카메라를 켜세요"** 버튼 활성화. 5. **[Play]** 카메라를 켜니 **"빵을 손으로 찢는 장면을 담으세요"** 미션가이드 뜸. 6. **[Reward]** 촬영 성공 시 **'소금빵 1+1 쿠폰'** 즉시 발급. 매장 직원에게 보여주고 바로 사용. ### Scenario B: 나だけの 루트 만들기 (The Creator Loop) 1. **[Upload]** 내가 찍은 '숨겨진 골목' 사진 3장을 선택. 2. **[AI Suggestion]** *"이 사진들은 '성수동 빈티지 산책'이라는 제목이 어때요?"* AI가 제안. 3. **[Publish]** '생성하기' 버튼 한 번으로 퀘스트 발행 완료. 4. **[Earnings]** 다음 날 아침, *"어제 12명이 님의 루트를 다녀왔어요! +120 PP 적립"* 알림 도착. --- ## 4. 차별화 기능 (Killer Features) ### 4.1. Vibe Check (실시간 분위기 확인) * **Problem:** "지금 가면 사람 많을까? 비 오는데 괜찮을까?" * **Feature:** 최근 1시간 이내에 다른 유저가 올린 인증샷이 있다면, 지도 위에 **"Live"** 배지를 띄워줌. 가장 최신의 현장 정보를 확인 가능. ### 4.2. Time Attack (한정판 퀘스트) * **Problem:** 밋밋한 여행. * **Feature:** "오후 5시~6시 사이에만 열리는 '노을 사냥' 퀘스트". 해당 시간에 접속하지 않으면 지도에서 자물쇠 아이콘으로 잠겨 있음. 접속 유도 및 희소성 부여. --- ## 5. 결론 및 제언 Tripping Puffin의 UX 핵심은 **"직관성(Intuitive)"**과 **"보상감(Rewarding)"**입니다. 복잡한 설명 없이도 지도 위의 발자국을 따라가면 놀이가 되고, 카메라를 켜면 게임이 시작되어야 합니다. 초기 MVP에서는 **[Map] - [Camera] - [Passport]** 세 가지 핵심 경험의 연결을 매끄럽게 하는 것에 집중해야 합니다.