1. 기획
- 타겟 사용자 페르소나 정의: 스트레스를 자주 경험하는 20-30대 직장인
- 하루 3가지 명상 순간 도출
- 일을 시작할 때 (마음 준비)
- 스트레스가 올라오는 순간 (즉각적 진정)
- 일을 마친 후 (감정 정리)
- 기존 명상 앱(Calm, Headspace)의 진입 장벽 문제 분석 → 로그인 없는 즉시 시작 컨셉 확정- 핵심 가치 정의
- 웹을 열자마자 5초 안에 심장박동이 느려지는 경험
- 로그인 없음, 앱 설치 없음 → 즉시 시작 가능
- 5-10분, 가볍게, 언제든지
- 벤치마킹 포인트 정리
- Calm: 호흡 애니메이션 방식, 색상 팔레트
- Headspace: 세션 선택 UX, 진행 상황 표시
- Oak Meditation: 심플한 인터페이스, 즉시 시작 흐름2. IPO & IA
- **Input**: 세션 선택 (3가지 순간), 시간 선택 (5분/10분), 사운드 선택
- **Process**: 세션 타입에 맞는 가이드 텍스트 + 호흡 애니메이션 타이밍 제어
- **Output**: 단계별 안내 문구 + 시각화 + 타이머
- 필요 콘텐츠 목록 정리
- 텍스트: Hero 카피, 세션별 명상 가이드 문구, 호흡 안내 텍스트
- 시각: 호흡에 맞춰 팽창/수축하는 원형 애니메이션
- 사운드: 무음, 자연 소리, 잔잔한 음악 옵션- IA 트리 설계
```
Home (랜딩 + 세 션 선택)
├── 명상 세션 (시작 명상)
├── 명상 세션 (스트레스 명상) ← 핵심 우선순위
└── 명상 세션 (마무리 명상)
```
- Home 페이지 섹션: Hero(즉시 시작 CTA) → 세션 선택 카드 → 시간 선택
- 명상 세션 페이지 섹션: 호흡 시각화 → 가이드 텍스트 → 타이머 → 컨트롤 버튼3. UI 작업
**AI Studio 작업:**
- 홈 화면: 짧은 Hero 카피 + "지금 바로 시작하기" CTA
- 세션 선택 카드: 3가지 순간별 카드 (시작 / 스트레스 / 마무리)
- 명상 세션 화면: 호흡 원 중심 레이아웃 + 하단 컨트롤
- 디자인 스타일: 미니멀, 파스텔 톤, 부드러운 애니메이션, 모바일 우선 반응형배운점
아직까지 AI로 디자인을 하면 특유의 인공지능틱한 느낌이 싫은데 이걸 수정하려면 꽤 힘들다. 피그마까지 동원해야할 듯. 레퍼런스를 잘 찾아서 디자인 시스템 정도는 지정해줘야 세련된 AI티 덜 나는 디자인이 나오네요.
여기 레퍼런스 및 AI 학습 용으로 봤는데 디자인 깔끔해요: https://github.com/duobaseio/forui
