명상 앱 UI 템플릿.
명상과 수면을 위한 앱의 완성된 UI 디자인입니다. Stillpoint라는 예시 앱의 휴대폰 화면 8개로, 오늘의 추천과 7일 코스부터 플레이어, 호흡 가이드, 수면 이야기, 연습 기록까지 담았습니다. 연속 일수, 시간, 코스 진행 상황이 모든 화면에서 일치하고, 모든 화면이 평범한 HTML과 Tailwind라서 Codex나 Claude Code가 복제해 여러분의 앱으로 바꿀 수 있습니다.
2026년 11월 7일 업데이트
Mobile app · 8 screens · Free and open source
01오늘 
02둘러보기 
03코스 
04플레이어 
05호흡 
06수면 
07기록 
08프로필
Clone it
npx degit ummydev/ui-templates/apps/meditation my-app
Copies just this template into a new folder, without the rest of the repository.
Make it yours
This is the 명상 앱 template from codexdesign.io. Rename it to [your product], replace the sample data with [your features], and keep every screen on the design system in DESIGN.md.
Paste this into Codex or Claude Code in the new folder.
- Built with
- HTML · Tailwind CSS v4 · Lucide icons · SVG illustrations
템플릿에 담긴 내용
| 화면 | 담긴 내용 |
|---|---|
| 오늘 | 오늘 밤 추천, 연속 일수, 이번 주 시간, 이어서 들을 세션 |
| 둘러보기 | 수면, 집중, 불안, 호흡 주제별로 길이가 표시된 세션을 한 줄씩 |
| 코스 | 7일 코스와 강사, 모든 세션과 완료 여부 |
| 플레이어 | 진행 링, 남은 시간, 앞뒤로 건너뛰기, 배경음 |
| 호흡 | 4-4-6 호흡 가이드. 횟수와 길이를 고르고, 애니메이션은 기기 설정을 따름 |
| 수면 | 항상 다크 테마. 수면 이야기, 자연의 소리, 재생을 멈추는 타이머 |
| 기록 | 연속 일수, 총 시간과 세션 수, 이번 주 차트, 기분 기록 |
| 프로필 | 구독, 알림, 다운로드, 소리, 설정 |
예시 데이터는 한 사람의 토요일 저녁 연습 기록입니다. 12일 연속, 이번 주 75분, 누적 1,286분·142세션입니다. Steady Mind 코스는 세션 7개, 총 69분이고 3개를 마쳤습니다. 4일차는 9:00 중 3:40이 남아 있으며, 오늘·코스·플레이어 화면 모두 같은 진행 상황을 보여 줍니다. 호흡 리듬은 들이쉬기 4초, 멈추기 4초, 내쉬기 6초라서 5분이면 정확히 21회이고, 기기에서 동작 줄이기를 켜면 애니메이션이 멈춥니다.
각 화면은 390×844 크기의 HTML 파일 하나이며, Tailwind CSS v4와 공용 tokens.css로 스타일을 입혔습니다. 일러스트는 디자인 시스템 색상으로 그린 평면 SVG 도형으로, 그라데이션이나 빛 번짐 효과가 없습니다. 아이콘은 Lucide입니다. 어떤 파일이든 브라우저에서 열기만 하면 되고, 설치나 빌드는 필요 없습니다.
Codex나 Claude Code와 함께 쓰기
ui-templates 저장소에서 이 템플릿만 복사하세요.
npx degit ummydev/ui-templates/apps/meditation my-meditation-app
그런 다음 에이전트에게 여러분의 앱으로 바꿔 달라고 요청하세요.
이 폴더는 명상 앱 UI 템플릿입니다. [앱 이름]으로 바꿔 주세요. 대상은 [누구를 위한 앱인지]입니다. DESIGN.md와 tokens.css는 디자인 시스템으로 그대로 두고, 코스와 강사, 소리를 [내 콘텐츠]로 바꾸되 연속 일수, 시간, 세션 진행 상황이 모든 화면에서 일치하도록 해 주세요. 그런 다음 이 화면들을 [Expo / SwiftUI / 내 기술 스택]으로 구현해 주세요.
디자인 시스템이 DESIGN.md에 적혀 있으므로, 에이전트가 나중에 추가하는 화면(일기나 잠들기 전 루틴 등)도 기존 화면 8개와 어울립니다.
Calm 디자인 시스템 기반
이 템플릿은 웰니스 앱을 위한 디자인 시스템 Calm을 사용합니다. 부드러운 세이지색 배경, 동작에는 짙은 초록색, 제목에는 Newsreader, 본문에는 Figtree, 24px 모서리, 48px 터치 영역, 항목 3개짜리 탭 바가 특징입니다. 페이지에서 실시간 미리보기, 전체 DESIGN.md, shadcn 테마를 볼 수 있습니다. Calm은 디자인 시스템의 이름일 뿐이며, 같은 이름의 앱과는 관련이 없습니다.
자주 묻는 질문
이 명상 앱 템플릿은 무료인가요?
네. MIT 라이선스의 오픈 소스이며, 개인 프로젝트와 상업 프로젝트 모두에 쓸 수 있습니다.
다크 테마가 있나요?
있습니다. 어떤 화면이든 <html> 태그에 class="dark"를 추가하면 Calm의 다크 테마로 바뀝니다. 수면 화면은 밤에 여는 화면이라 항상 다크 테마입니다.
호흡 애니메이션은 동작 줄이기 설정을 따르나요?
네. 순수 CSS로 만들었고, 운영체제의 동작 줄이기 설정이 켜져 있으면 멈춥니다. 그때도 각 단계와 길이는 글자로 표시됩니다.