[Episode.3] 토끼굴 마일스톤 UX: 32단계 성장 설계 스토리 | 감정 레시피 아카이빙을 게임처럼

지난 이야기

지난 에피소드에는 하루 만에 MVP를 완성한 이야기를 담았다. 사진을 찍으면 AI가 분석해 초안을 채워주고, 감정 메모를 붙이면 바로 저장되는 흐름을 확보했다. 에피소드 1에서 잡아둔 빈티지 톤과 감정 구조, 블로그 URL 스크래퍼, 단계별 프로그레스 메시지가 실제 화면에서 자연스럽게 동작하는 걸 확인한 날이었다. 다음 과제는 사용자가 계속 요리를 기록하고 싶어지도록 동기를 설계하는 일이었다.

이 글에서 다루는 내용

• 기록을 계속하게 만드는 장치를 찾게 된 배경
• 토끼굴 마일스톤 아이디어, 최종 UI로 이어지는 과정
• 32단계 성장 여정 + 16개 특별한 공간 설계, 이름 붙이기
• 언락 로직 이슈와 QA를 통한 재정비

문제 정의: 지속 기록을 위한 Gamification 설계 목표

MVP 작업을 마무리하고 나니 이제 "사용자가 왜 계속 기록해야 할까?"라는 질문이 떠올랐다. 감정 기반 아카이빙이라는 컨셉은 분명했지만 동기부여가 약하다는 생각이 들었다. 물론 실질적인 보상을 제공하면 베스트겠지만 지금 시점에서는 복잡하지 않으며 비용과 리소스가 덜 들고, 앱 톤앤매너에 어울리는 방향을 찾아야했다. 고민 끝에 "레시피가 쌓일 때마다 새로운 방이 열리는 토끼굴"이라는 컨셉으로 정하고 아이디에이션 작업과 마일스톤 시스템 설계를 본격적으로 시작했다.

  토끼굴 구조 초기 구조

  지상 (0개)
      │
      ├─── 아늑한 토끼굴
      │     "첫 레시피와 함께 아늑한 토끼굴을 만들었어요"
      │
      ├─── 작은 토끼굴
      │     "조금씩 넓어지는 나만의 공간"
      │
      ├─── 따스한 토끼굴
      │     "이제 제법 요리 공간이 갖춰졌어요!"
      │
      ├─── 서재 토끼굴
      │     "지식과 추억이 쌓인 서재 토끼굴이 완성되었어요"
      │
      ├─── 오순도순 토끼굴
      │     "모든 감정이 어우러진 오순도순 토끼굴의 완성"
      │
      └─── ...
            "점점 더 깊어지는 요리 여정"

기획 스케치 단계에서는 동물의 숲이나 심즈처럼 공간을 확장해 나가는 게임 메커닉을 고민했다. 레시피 저장이 단순한 '완료'로 끝나지 않고 "레시피가 쌓이며 토끼굴을 한 층 더 깊이 파 내려가는 경험"으로 남게 하고 싶었다. 사용자가 레시피를 작성하면 잠겨 있던 새로운 이미지를 볼 수 있게 아트워크의 unlock을 보상으로 하여 이야기 자체가 다음 마일스톤으로 안내하는 지도가 된다면 어떨까.

프로토타입: 토끼굴 UI/UX

클로드에 토끼굴 컨셉으로 UI를 그려달라고 요청하고, 레퍼런스 이미지도 제공하며 여러 버전을 만들어봤지만 정확히 내가 원하는 화면 구현은 잘 되지 않았다. UI 홈화면을 아래 레퍼런스처럼 그려서 하나씩 오픈되게 하고 싶었으나.. 현재 수준으로는 어렵겠다 싶어서 더이상 시간을 쓰지 않고 심플하게 가기로 결정했다.

토끼굴 화면의 카드 내용도 정의했다. “다음 방까지: 3개”처럼 숫자로 진행률을 보여주고, 세로 스크롤로 깊이감을 표현해 실제 구현 시에는 레이아웃 갈등이 거의 없었다. 머릿속에서만 그리던 감자줄기 형태의 지도 대신 한 줄로 내려가는 구조를 선택하면서 반응형 처리와 애니메이션 부담도 크게 줄였다.

성장 여정 전략: 32단계 레벨링과 네이밍 시스템

처음에는 100개 레시피를 목표로 잡았다가 최소한의 보람과 달성 가능성 사이에서 타협점을 찾았다. 최종적으로 70개 레시피(32단계)로 축소했다.

레벨 간 간격을 세 구간으로 나눴다. 1~5단계는 +1씩만 늘려서 '기록 시작이 어렵지 않게' 설계했고 6~21단계는 +2로 설정했다. 22~32단계는 +3씩 올렸다. 초반에는 빠르게 보상이 주어져서 몰입을 돕고, 후반으로 갈수록 '나 꽤 오래 해왔네'라는 성취감을 느끼게 하고 싶었다. 성장 구간을 다섯 단계(입문→발전→숙련→마스터→완성)로 나누고, 각 레벨에 이름을 붙였다.

예를 들어 Leve 1 <아늑한 토끼굴>에서 시작해 '견습 요리사'가 되고 시간이 지남에 따라 직접 식재료를 재배하고 수확하기도 한다. Level 24에서는 요리경연 대회를 나가고, 견문을 넓히기 위해 여행을 떠날 때도 있다. 마지막으로 자기만의 시그니처 메뉴를 만들고 Level 32에서 <꿈의 레스토랑>을 여는 여정으로 완성되는 이야기. 토끼굴마다 이름을 붙여 숫자 대신 서사로 기억하게 했다.

이 흐름을 코드로 옮길 땐 레벨 번호만 넣으면 이미지·설명·필요 레시피 수가 한꺼번에 채워지는 함수를 만들어 뒀다. 토끼굴 일러스트는 Assets에 미리 저장해 둔 파일을 불러오고 색감은 앱 전체의 빈티지 팔레트를 그대로 따라가게 했다. 이미지는 기존에 모아둔 레퍼런스 이미지들을 넣어서 프롬프트화해서 AI로 생성했다. 무료로 사용하다보니 가끔 에러도 발생했고 요청수 리밋에 걸릴 때도 있었지만 대량 생산을 하는 것이 아니었기에 짜투리 시간을 활용해 제작했다.

특별 공간 설계: 감정 데이터 기반 Unlock 조건

32단계 성장 트랙을 구성하면서 '감정 기반 아카이빙'이라는 기획 의도도 담겨야 한다고 느꼈기에 특별한 공간을 추가로 만들었다. SpecialRoom enum 16개를 만들고 Ballroom, Hot Spring, Orchestra처럼 컨셉이 뚜렷한 방을 만들고 각 방마다 고유한 언락 조건을 부여했다. 이 단계에서는 각 공간마다 언락 조건의 조합 패턴이 모두 달랐기에 로직이 제대로 작동하게 하는데까지 꽤 걸렸다. 많은 테스트와 단순화 및 타협을 거쳐 결국 완료했지만.

언락 조건은 레시피 데이터를 기반으로 한다. 성장 여정은 단순히 레시피 수량을 기준으로 했지만 특별 공간은 다르다. 예를 들어 Ballroom은 감정 스토리에서 3명 이상 사람을 언급한 레시피 3개를 모으면 열리고, Hot Spring은 슬픔·피로·그리움 같은 감정을 각각 한 번씩 기록해야 한다. 이외에 재료 및 계절 키워드, 평점 등을 조합해 다양하게 unlock 정책을 만들었다. 이 조건들은 의도적으로 화면에 명시하지 않았는데, 레시피를 작성하다 보면 우연히 공간이 열리게 하고 싶었기 때문. 감정·태그·키워드 등을 조합해 '내가 어떤 요리를 어떻게 해왔는지'를 느슨하게 확인할 수 있게 유도했다.

키워드는 리스트는 여행, 계절, 휴식 등 테마를 다양화했다. 조건을 만족하면 UnlockProgress 객체에 카운트를 저장한다. 중복을 막기 위해 processedRecipeIds를 따로 관리하고 재료 기반 조건은 ingredient 리스트를 순회하며 찾게 했다. 덕분에 다양한 표현으로 공간을 열어주는 프로세스가 구현되었다.

Unlock 로직 재작성과 디버깅 기록

토끼굴 UI를 다듬고 테스트하다가 특별 공간 카운트가 0/0으로 멈춰 있는 걸 발견했다. 언락 로직을 처음부터 다시 살펴보니 마일스톤을 두 단계만 만들고 멈춰 버리는 코드가 원인이었다. 이대로 두면 사용자가 아무리 레시피를 쌓아도 새로운 방을 만날 수 없었다. 그래서 앱이 켜질 때 32개 성장 단계와 16개 특별 공간을 한 번에 모두 만들어 저장하는 초기화 방식으로 바꿨다. 시작 목록 리셋 이후 '몇 단계가 열렸는지' 계산할 때 오류가 더는 발생하지 않았다.

기본 구조를 잡은 뒤 '언제든 조건이 추가되거나 실패하더라도 흐름이 멈추지 않아야 한다'는 원칙을 세웠다. 성장 트랙과 특별 공간을 각각 검사할 수 있게 로직을 분리하고, 한쪽이 실패해도 다른 쪽이 계속 실행되도록 예외 처리를 나눴다. 새로 열린 마일스톤은 큐에 순서대로 넣어 팝업이 겹치지 않게 했고, 이미 처리한 레시피 ID는 따로 저장해 중복 unlock이나 데이터 꼬임을 피했다. Provider에 재검사 루틴을 넣어 앱을 다시 열 때마다 기존 레시피를 훑고, 조건을 충족하면 바로 반영하게 했다.

마지막으로 초기화 타이밍을 놓치는 이슈가 있었다. 레시피를 저장했음에도 팝업이 뜨지 않는 케이스가 발견되었는데 이는 Provider 사이 콜백을 '조금 뒤에 실행'하는 것으로 예약해 둔 탓이었다. 준비가 끝나기 전에 레시피가 추가되면 언락 검사가 스킵되고 있었다. 콜백을 즉시 연결하고 초기화가 끝났는지 짧게 확인한 뒤 실행하게 바꾸자 같은 문제가 재현되지 않았다.

실시간 피드백: 달성 다이얼로그와 감정 힌트 UX

토끼굴이 열렸다는 사실도 사용자에게 알려야 하니 레시피 저장 직후 BurrowUnlockCoordinator가 조건을 만족하면 즉시 다이얼로그를 띄우도록 했다. 팝업에는 토끼굴 이미지를 크게 보여주며 메시지를 띄웠다.

잠긴 공간에 힌트는 주어야겠다 싶어서 SpecialRoom 카드의 디스크립션 카피를 다듬었다. "누군가를 위한 요리를 만들어보세요..."처럼 테마를 은근히 암시하는 방향으로 바꿨다.

브랜드 일관성은 스플래시·타이포그래피로 부여

토끼굴 테마는 스플래시 화면에도 그대로 녹였다. 앱이 켜지는 동안 백그라운드에서는 필수 리소스 로딩 및 초기 데이터 동기화 등의 준비 작업이 이루어진다. 그 사이 빈 화면 대신 스플래시 이미지를 노출하면 아이덴티티를 효과적으로 전달할 수 있어서 조금 공을 들였다.

앱 테마에 어울리는 느낌의 폰트를 직접 찾아 <Recipesoup> 타이틀과 "감정을 담은 레시피 아카이빙" 각기 다른 폰트를 적용했다. 이미지의 중심에는 요리하는 토끼를 배치하고, 토끼의 성장 여정을 담은 주요 장면들을 냄비에서 피어나는 꿈처럼 구성하여 연결했다. 토끼 일러스트가 흐릿해지지 않게 오버레이를 투명하게 바꿨다. 이제 앱의 시작부터 전체 경험이 하나의 톤으로 연결된 느낌이 들었다.

마무리하며

성장 마일스톤을 32단계로 쪼개 두니 토끼굴을 "한 층씩 파 내려가는" 감각이 살아났다. 레벨마다 이름을 붙여 둔 것도 스토리텔링에 도움이 되는듯하다. 특별 공간을 감정·키워드 조건과 연결해 두니 자연스럽게 감정 스토리를 되돌아보게 되었고, 초기화·재검사 로직을 다시 짜서 언락 로직이 더 견고해졌다. Achievement Dialog와 진행 위젯이 방금 달성한 마일스톤을 바로 안내해 주는 덕분에 사용자가 이를 놓치지 않는 흐름도 유지할 수 있다. 스플래시 화면까지 같은 톤으로 맞추니 앱을 켜는 순간부터 토끼굴 경험이 이어진다. 홈 화면에 토끼굴로 이동하는 CTA 카드를 하나 넣으려다가 뺐는데 레시피 작성을 유도하는 용도로 추후 추가를 고민해야 할 것 같다.

핵심 요약

토끼굴 핵심 성과

• 32단계 성장 여정을 정의해 레벨·이미지·설명을 한 번에 관리
• 감정·태그·키워드 기반으로 언락되는 16개 공간을 설계해 감정 기록 흐름 확보
• 초기화 및 재검사 로직으로 누락·중복·타이밍 오류 정비

UX 강화 포인트

• 마일스톤 달성 시 실시간 팝업과 진행 위젯으로 게이미피케이션 보상 경험 전달
• 특별 공간 언락 조건 힌트, 홈 화면 진행률 위젯으로 다음 목표 느슨하게 제안
• 스플래시·타이포그래피 통해 앱 진입부터 브랜드 톤을 일관되게 유지

다음 이야기, Episode 4 예고

토끼굴 정비도 마무리되었고, 이제 앱 사용 경험이 자연스레 이어지도록 숨을 고를 차례. UI 개선 주간이 다가왔다.

• 빈티지 아이보리 팔레트를 기반으로 화면 톤을 재정리한 과정
• Bottom Navigation과 SafeArea 구조를 손보며 이동 흐름을 매만진 기록
• 감정 메모와 진행 메시지 마이크로카피를 학습자 톤으로 다듬은 방법

다음 편에 계속...