본문으로 건너뛰기
모찌: 마음 비우기 미니앱 화면
PROTOTYPE토스 미니앱용 프로토타입, 미배포
2026.05.21 – 05.23

모찌: 마음 비우기 미니앱

걱정을 털어놓을수록 도자기 모찌가 작아지는 마음 비우기 앱 프로토타입입니다. 처음엔 걱정을 먹고 커지는 구조였는데, 비우는 앱의 목적과 반대라서 3일째에 메커니즘을 뒤집었습니다. 스트릭·통계 같은 게임 요소도 걷어냈습니다.

ROLE
1인 기획·개발
PERIOD
2026.05.21 – 05.23
STACK
Next.js · TDS · PWA
OUTPUT
59 커밋 · 3일
  1. 05.21

    v0 성장형 모찌

  2. 05.22

    TDS 적용, 스트릭·통계 삭제

  3. 05.23 (전환점)

    커지기 → 작아지기로 전환

  4. 05.23

    밤하늘 회고·이름 개인화·접근성

요약

걱정을 털어놓을수록 도자기 모찌가 조금씩 작아지다가, 다 가벼워지면 날아가는 마음 비우기 앱입니다. 토스 미니앱으로 만들 생각으로 5월 21일부터 23일까지 3일 동안 커밋 59개로 프로토타입을 완성했습니다(Claude Code와 페어).

배포는 하지 않았습니다. 아래 화면은 로컬에서 지금 버전을 실행해 캡처한 것입니다.

모찌 화면: 홈, 털어놓기, 보내고 난 뒤

3일째에 메커니즘을 뒤집었다

첫 버전은 "걱정을 먹고 모찌가 커지는" 구조였습니다. 마음을 비우는 앱인데, 털어놓을수록 눈앞의 모찌가 커지는 건 목적과 반대 방향의 그림이었습니다. 첫 화면의 모찌가 작아서 첫인상이 약하다는 문제도 있었습니다.

단계내용
문제성장 메커니즘이 "비우기"라는 앱의 목적과 반대 방향이었고, 첫 화면의 작은 모찌는 인상이 약했습니다
결정크게 시작해서 털어놓을 때마다 눈에 보이게 줄어들고, 작고 가벼워지면 풍선처럼 날아가는 구조로 바꿨습니다
효과첫 화면부터 큰 모찌가 보이고, 입력할 때마다 줄어드는 게 보여서 "비웠다"는 감각이 화면에 드러나도록 했습니다
후속뒤집은 직후 호흡 가이드가 반대로 움직이는 버그가 나와 바로 고쳤습니다

게임 요소를 걷어내다

처음에는 리텐션을 위해 연속 기록, 통계, 업적, 주간 히트맵, 공유 카드를 넣었습니다. 마음을 비우는 앱에 숫자와 목표가 있으면 그것 자체가 압박이 된다고 판단해 전부 삭제했고, 뽀모도로 모드는 1~10분을 고르는 명상 시간으로 바꿨습니다. 실행 전에 비평 리뷰를 따로 돌려 계획의 결함 여러 개를 먼저 잡았습니다.

대신 남긴 것은 압박 없는 장치들입니다.

  • 언제든 "가볍게 보내주기"를 할 수 있지만, 이걸로 보상을 모을 수는 없습니다. 횟수만 초기화되고 꾸미기·일기 기록은 건드리지 않습니다
  • 보내준 마음은 "마음의 밤하늘"에 별로 남아 돌아볼 수 있습니다
  • 모찌에게 이름을 붙이면 화면 문구에 반영되지만, 저장된 원문은 바꾸지 않고 표시할 때만 치환합니다
  • 털어놓은 텍스트는 저장하지 않는다고 입력창 아래에 밝혀 두었습니다

화면 품질

토스 디자인 시스템(TDS)을 적용하면서 무거운 모달 컴포넌트는 지연 로딩해 첫 화면 번들을 작게 유지했습니다. TDS 텍스트 필드가 제어 컴포넌트로 동작하지 않아 이름 입력창은 네이티브로 되돌렸습니다. 모찌를 누르는 핵심 동작에는 역할·레이블·키보드 조작을 붙였습니다.

지금 상태

  • 로컬에서 동작하는 프로토타입, 배포와 토스 미니앱 번들은 하지 않았습니다
  • 자동 테스트는 없고 타입 검사·린트와 브라우저 수동 확인으로 검증했습니다

배운 점

리텐션 장치는 앱이 해결하려는 감정과 같은 방향일 때만 의미가 있습니다. 3일짜리 프로토타입이었지만, 기능을 하나씩 지울 때마다 앱이 무엇을 위한 것인지 더 분명해졌습니다.