음식 배달 앱 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/food-ordering 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
템플릿에 담긴 내용
| 화면 | 담긴 내용 |
|---|---|
| 홈 | 배달 주소, 검색, 음식 종류 카테고리, 할인 혜택, 내 주변 레스토랑 |
| 레스토랑 | 별점, 배달 시간과 배달비, 메뉴 탭, 담기 버튼이 있는 음식, 하단에 고정된 장바구니 바 |
| 메뉴 상세 | 설명, 사이즈, 맵기, 가격이 붙은 추가 옵션, 수량, 장바구니 담기 |
| 장바구니 | 수량 조절 버튼이 있는 항목, 레스토랑 요청 사항, 프로모션 코드, 요금 내역 |
| 결제 | 주소, 일반 배달 또는 예약 배달, 결제 수단, 라이더 팁, 주문하기 |
| 주문 추적 | 라이더가 보이는 지도, 도착 예정 시간, 주문 단계, 라이더 연락, 주문 요약 |
| 주문 내역 | 진행 중인 주문과 다시 주문할 수 있는 지난 주문 |
| 내 정보 | 프로필, 누적 기록, 친구 초대 혜택, 주소, 결제 수단, 설정 |
각 화면은 390×844 크기의 HTML 파일 하나이며, Tailwind CSS v4와 공통 tokens.css로 스타일링했습니다. 음식은 템플릿에 포함된 12개의 플랫 SVG 일러스트라서 외부 이미지가 없습니다. 파일을 브라우저에서 열기만 하면 되고, 설치나 빌드는 필요 없습니다.
Codex나 Claude Code와 함께 쓰기
ui-templates 저장소에서 이 템플릿만 복사하세요.
npx degit ummydev/ui-templates/apps/food-ordering my-food-app
그다음 에이전트에게 내 앱으로 바꿔 달라고 요청하세요.
이 폴더는 음식 배달 앱 UI 템플릿이야. 이걸 [내 앱 이름]으로 바꿔 줘. 대상은 [내 레스토랑이나 내 시장]이야. DESIGN.md와 tokens.css는 디자인 시스템으로 그대로 두고, 샘플 레스토랑, 음식, 가격은 [내 메뉴]로 바꾸고, 일러스트는 내 사진으로 바꿔 줘. 그런 다음 이 화면들을 [Expo / SwiftUI / 내 스택]으로 만들어 줘.
디자인 시스템이 DESIGN.md에 적혀 있기 때문에, 에이전트가 새로 추가하는 화면, 예를 들어 레스토랑 검색이나 포인트 적립 페이지도 이미 있는 8개 화면과 어울립니다.
Pantry 디자인 시스템 기반
이 템플릿은 음식·주문 앱을 위한 디자인 시스템 Pantry를 씁니다. 크림색 배경, 주문에 쓰는 토마토 레드, 배달과 성공에 쓰는 허브 그린, 큼직하고 둥근 음식 카드, 알약 모양 버튼, 48px 터치 영역이 특징입니다. Pantry 페이지에서 라이브 프리뷰, DESIGN.md 전체, shadcn 테마를 볼 수 있습니다.
자주 묻는 질문
이 음식 배달 앱 템플릿은 무료인가요?
네. MIT 라이선스 오픈 소스라서 음식 일러스트를 포함해 개인 프로젝트와 상업 프로젝트 모두에 쓸 수 있습니다.
Figma에서 쓸 수 있나요?
템플릿은 Figma 파일이 아니라 HTML이고, 그래서 AI 에이전트가 직접 읽고 수정할 수 있습니다. 스크린샷은 참고 자료로 쓸 수 있고, DESIGN.md의 색상과 폰트는 Figma 스타일로 설정할 수 있습니다.
다크 테마가 있나요?
네. 어느 화면이든 <html> 태그에 class="dark"를 추가하면 Pantry의 다크 테마로 바뀝니다.