//프로젝트
v2.1.0Beta2026-08-01 ~ PRESENT
음칫

충동적인 음식 주문 전에 잠깐 멈춰 선택을 다시 바라보게 돕는 몰입형 PWA

// Product & UX Designer · Full-stack Developer
Solo
음칫 icon
01 / 08
01
온보딩

식사를 막지 않고 충동과 선택 사이에 90초의 틈을 만든다는 제품 원칙과 안전 고지를 전달합니다.

02 / 08
02
오늘 대시보드

몰입형 세션, 월 식비 기록, 페이크잇츠와 커뮤니티를 한 화면에서 연결하는 메인 허브입니다.

03 / 08
03
음식 해체

완성된 음식 이미지를 움직이는 3×3 조각과 개별 재료로 다시 보여주는 몰입형 장면입니다.

04 / 08
04
영양 X-ray

대표 1인분의 지방·당류·나트륨 추정치를 단계별 게임형 스캔으로 시각화합니다.

05 / 08
05
페이크잇츠 카탈로그

100개 가상 매장을 검색하고 필터링하며 실제 결제 없이 배달 앱 탐색 행동을 체험합니다.

06 / 08
06
가상 주문 추적

시간 기반 상태 머신과 자체 제작 지도로 조리부터 도착까지의 가상 배달 진행 상황을 표현합니다.

07 / 08
07
억까 리뷰 커뮤니티

익명 리뷰와 주간 랭킹에 신고·차단·중복 반응 방지 기능을 함께 적용한 UGC 공간입니다.

08 / 08
08
기록과 패턴

음식·시간·요일별 반복 패턴을 성공과 실패로 평가하지 않고 비판단적인 언어로 보여줍니다.

한눈에 보기
충동적인 음식 주문 전에 잠깐 멈춰 선택을 다시 바라보게 돕는 몰입형 PWA
역할
Product & UX Designer · Full-stack Developer
범위
20개
//핵심 포인트
7
01
성장 버전 2.1.0: 바이브 코딩을 기획·UX·구현·검증 전반에 활용해 아이디어를 빠르게 제품화
02
최대 7개 몰입형 장면을 무작위 순서로 구성한 음식 충동 개입 플로우
03
56개 음식과 100개 가상 매장을 데이터 기반 UI로 구현
04
익명 인증, 로컬 우선 저장, Supabase RLS 기반 동기화
05
반응·신고 중복 방지와 콘텐츠 필터를 포함한 UGC 안전 설계
06
5,016줄 UI 모놀리스를 Feature-Sliced Design으로 리팩터링
07
PWA를 Bubblewrap TWA로 패키징해 Android 배포 구조까지 확장
//기술 스택
20
//FRONTEND(6)

탭을 바꿔가며 역할과 설명을 한 범주씩 확인할 수 있습니다.

Next.js 16
도구(Utility)
Next.js 16을(를) 프로젝트의 안정성과 구현 속도를 위해 활용했다.
React 19
도구(Utility)
React 19을(를) 프로젝트의 안정성과 구현 속도를 위해 활용했다.
TypeScript 5.7
도구(Utility)
TypeScript 5.7을(를) 프로젝트의 안정성과 구현 속도를 위해 활용했다.
Tailwind CSS 4
도구(Utility)
Tailwind CSS 4을(를) 프로젝트의 안정성과 구현 속도를 위해 활용했다.
Framer Motion
도구(Utility)
Framer Motion을(를) 프로젝트의 안정성과 구현 속도를 위해 활용했다.
Zustand 5
도구(Utility)
Zustand 5을(를) 프로젝트의 안정성과 구현 속도를 위해 활용했다.