SaaS 랜딩 페이지 템플릿.
SaaS 제품을 위한 완성된 웹사이트입니다. Fjordly라는 팀 계획 도구를 예시로 한 반응형 페이지 8개로, 홈과 가격부터 고객 사례, 변경 내역, 블로그 글, 가입, 영업 문의까지 담았습니다. 문구는 실제 제품처럼 읽히고 가격과 숫자는 페이지마다 일치합니다. 모든 페이지가 평범한 HTML과 Tailwind라서 Codex나 Claude Code가 복제해 여러분의 사이트로 바꿀 수 있습니다.
2026년 11월 7일 업데이트
웹사이트 · 8 페이지 · 무료 오픈 소스
01홈 
02기능 
03가격 
04고객 사례 
05변경 내역 
06블로그 글 
07가입 
08영업 문의
복제하기
npx degit ummydev/ui-templates/sites/saas my-app
저장소의 나머지 부분 없이 이 템플릿만 새 폴더에 복사합니다.
내 것으로 만들기
codexdesign.io의 SaaS 랜딩 페이지 템플릿입니다. 이름을 [내 제품]으로 바꾸고, 예시 데이터를 [내 기능]으로 바꾸되, 모든 화면이 DESIGN.md의 디자인 시스템을 따르도록 해 주세요.
새 폴더에서 이 내용을 Codex나 Claude Code에 붙여 넣으세요.
- 사용 기술
- HTML · Tailwind CSS v4 · Lucide icons
템플릿에 담긴 내용
| 페이지 | 담긴 내용 |
|---|---|
| 홈 | 제품을 한 줄로 설명하는 문구, HTML로 그린 제품 화면, 주요 기능, 고객, 가격 |
| 기능 | 계획, 실행, 일정, 보고, 소통의 다섯 섹션과 각각의 제품 화면 |
| 가격 | Free, Team, Enterprise 세 요금제, 월간·연간 전환, 비교표, 자주 묻는 질문 |
| 고객 사례 | 도입 전후 숫자가 담긴 사례 하나와 다른 사례 목록 |
| 변경 내역 | 날짜별 릴리스, 새 기능·개선·수정 태그 |
| 블로그 글 | 작성자, 목차, 목록, 인용, 코드, 관련 글 |
| 가입 | Google 또는 이메일 가입과, 얻을 수 있는 것 및 고객 후기 |
| 영업 문의 | 팀 규모와 필요 사항을 적는 데모 신청 양식과, 신청 전에 읽을 질문 |
내용은 페이지마다 일치합니다. 가격은 10명까지 무료, Team 요금제는 연간 결제 시 1인당 월 8달러(월간 결제는 10달러), Enterprise는 별도 견적입니다. 홈의 고객 후기와 고객 사례는 같은 물류 회사로, 월요일 회의가 90분에서 25분으로, 주간 보고서 작성이 3시간에서 20분으로 줄었습니다. 변경 내역의 최신 항목은 홈에서 'New'로 표시한 기능입니다. 고객 이름은 가상이며, 임시 인물 이름이나 lorem ipsum은 없습니다.
각 페이지는 HTML 파일 하나이며, Tailwind CSS v4와 공용 tokens.css로 스타일을 입혔습니다. 모든 페이지가 너비 390픽셀 휴대폰부터 넓은 데스크톱 화면까지 대응하고, 휴대폰 메뉴에는 JavaScript가 필요 없습니다. 제품 화면은 이미지를 붙인 것이 아니라 HTML로 그렸기 때문에, 에이전트가 사이트의 나머지 부분과 함께 스타일을 바꿀 수 있습니다. 어떤 파일이든 브라우저에서 열기만 하면 되고, 설치나 빌드는 필요 없습니다.
Codex나 Claude Code와 함께 쓰기
ui-templates 저장소에서 이 템플릿만 복사하세요.
npx degit ummydev/ui-templates/sites/saas my-saas-site
그런 다음 에이전트에게 여러분의 사이트로 바꿔 달라고 요청하세요.
이 폴더는 SaaS 웹사이트 템플릿입니다. [내 제품]의 사이트로 바꿔 주세요. 이 제품은 [대상 사용자]를 위해 [하는 일]을 합니다. DESIGN.md와 tokens.css는 디자인 시스템으로 그대로 두고, 제품 화면, 기능, 가격, 고객 사례, 변경 내역을 [내 콘텐츠]로 바꾸되 가격과 숫자가 페이지마다 일치하도록 해 주세요. 그런 다음 [Next.js / Astro / 내 기술 스택]으로 구현해 주세요.
디자인 시스템이 DESIGN.md에 적혀 있으므로, 에이전트가 나중에 추가하는 페이지(문서, 회사 소개, 비교 페이지 등)도 기존 페이지 8개와 어울립니다.
Nordic 디자인 시스템 기반
이 템플릿은 생산성 도구를 위한 차분한 디자인 시스템 Nordic을 사용합니다. Manrope, 차분한 피오르 블루, 12px 모서리, 부드러운 그림자가 특징입니다. 페이지에서 실시간 미리보기, 전체 DESIGN.md, shadcn 테마를 볼 수 있습니다.
자주 묻는 질문
이 SaaS 랜딩 페이지 템플릿은 무료인가요?
네. MIT 라이선스의 오픈 소스이며, 개인 프로젝트와 상업 프로젝트 모두에 쓸 수 있습니다.
Next.js, Astro, React에서도 쓸 수 있나요?
네. 페이지가 Tailwind 클래스를 쓴 평범한 HTML이라서, 에이전트가 어떤 프레임워크의 컴포넌트로든 옮길 수 있습니다. tokens.css와 DESIGN.md는 그대로 두라고 요청하면 옮긴 뒤에도 디자인이 유지됩니다.
다크 테마가 있나요?
있습니다. 어떤 페이지든 <html> 태그에 class="dark"를 추가하면 Nordic의 다크 테마로 바뀝니다.