러닝 앱 UI 템플릿.
러닝·피트니스 기록 앱을 위한 완성된 UI 디자인입니다. 주간 목표부터 실시간 러닝, 훈련 계획까지, 실제 같은 데이터를 담은 휴대폰 화면 8개로 이루어져 있습니다. 모든 화면이 순수 HTML과 Tailwind라서 Codex나 Claude Code가 복제해 내 앱으로 바꿀 수 있습니다.
2026년 11월 6일 업데이트
Mobile app · 8 screens · Free and open source
01오늘 
02러닝 시작 
03러닝 중 
04러닝 요약 
05기록 
06러닝 상세 
07훈련 계획 
08프로필
Clone it
npx degit ummydev/ui-templates/apps/running 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
템플릿에 담긴 내용
| 화면 | 담긴 내용 |
|---|---|
| 오늘 | 주간 거리 링, 시작 버튼, 마지막 러닝, 오늘 예정된 운동 |
| 러닝 시작 | GPS 상태, 목표 유형(자유 러닝, 거리, 시간, 페이스), 음성 안내 |
| 러닝 중 | 실시간 거리, 페이스, 시간, 심박수와 엄지가 닿는 위치의 일시정지·종료 버튼 |
| 러닝 요약 | 경로, 개인 최고 기록, 주요 수치, 킬로미터별 구간 기록, 공유 |
| 기록 | 주간 거리 차트와 최근 러닝 목록 |
| 러닝 상세 | 페이스 차트, 심박수 구간, 날씨, 신발 |
| 훈련 계획 | 하프 마라톤 계획의 진행 상황과 이번 주 훈련 |
| 프로필 | 누적 기록, 개인 최고 기록, 업적, 설정 |
각 화면은 390×844 크기의 HTML 파일 하나이며, Tailwind CSS v4와 공통 tokens.css로 스타일링했습니다. 파일을 브라우저에서 열기만 하면 되고, 설치나 빌드는 필요 없습니다. 화면은 기본이 다크 모드이고, 라이트 테마도 내장되어 있습니다.
Codex나 Claude Code와 함께 쓰기
ui-templates 저장소에서 이 템플릿만 복사하세요.
npx degit ummydev/ui-templates/apps/running my-running-app
그다음 에이전트에게 내 앱으로 바꿔 달라고 요청하세요.
이 폴더는 러닝 앱 UI 템플릿이야. 이걸 [내 앱 이름]으로 바꿔 줘. [내 앱이 하는 일]을 하는 앱이야. DESIGN.md와 tokens.css는 디자인 시스템으로 그대로 두고, 샘플 데이터는 [내 데이터]로 바꾸고, 탭 이름도 앱에 맞게 고쳐 줘. 그런 다음 이 화면들을 [Expo / SwiftUI / 내 스택]으로 만들어 줘.
디자인 시스템이 DESIGN.md에 적혀 있기 때문에, 에이전트가 새로 추가하는 화면도 이미 있는 8개 화면과 어울립니다.
Stride 디자인 시스템 기반
이 템플릿은 움직이는 앱을 위한 디자인 시스템 Stride를 씁니다. 고정폭 숫자를 쓴 큼직한 콘덴스드 숫자, 행동과 진행 상황에 쓰는 에너지 넘치는 주황 하나, 16px 모서리, 48px 터치 영역, 하단 탭 바가 특징입니다. Stride 페이지에서 라이브 프리뷰, DESIGN.md 전체, shadcn 테마를 볼 수 있습니다.
자주 묻는 질문
이 러닝 앱 템플릿은 무료인가요?
네. MIT 라이선스 오픈 소스라서 개인 프로젝트와 상업 프로젝트 모두에 쓸 수 있습니다.
어떤 스택으로 만들었나요?
HTML과 Tailwind CSS v4라서 어떤 AI 에이전트든 읽고 수정할 수 있습니다. 준비가 되면 에이전트에게 React Native, Expo, SwiftUI, Flutter 또는 쓰고 있는 웹 프레임워크로 화면을 다시 만들어 달라고 하세요.
라이트 테마를 쓸 수 있나요?
네. 어느 화면이든 <html> 태그에서 class="dark"를 지우면 Stride의 라이트 테마로 바뀝니다.