알리고, 가치를 설명하고, 관심을 보인 방문자를 첫날부터 모으세요.
마스터클래스
마스터클래스 템플릿은 수강 신청, 결제 확인, 운영자 화면 등 핵심 기능과 프로젝트별 1개 데이터 테이블을 갖춘 랜딩 사이트입니다.
이 템플릿 소개
마스터클래스 템플릿은 한 갈래로 모은 랜딩 여정을 줍니다 — 분명한 약속, 필요한 근거, 그리고 하나의 행동. 신청은 프로젝트 데이터에 저장됩니다. 서버에서 그려 내보내니 검색 엔진과 링크 미리보기도 그대로 읽습니다.
마스터클래스 템플릿은 수강 신청, 결제 확인, 운영자 화면 등 핵심 기능과 프로젝트별 1개 데이터 테이블을 갖춘 랜딩 사이트입니다. 복사되는 것은 고쳐 쓸 수 있는 소스입니다. 정해진 데모에 묶이지 않습니다. 디자인도 글도 데이터 구조도 동작도 다 바꾸시면 됩니다.
핵심 기능
화면을 내리기 전에 무엇을 주는지와 다음 행동을 분명히 보여 줍니다.
그 여정에 필요한 근거만 놓습니다 — 기능, 메뉴, 일정, 요금, 후기, 자주 묻는 질문. 필요 없는 섹션을 억지로 넣지 않습니다.
대기자 명단이나 가입 폼이 실제 데이터와 관리 목록에 이어져 있습니다.
서버에서 그려 내보내므로 검색과 링크 미리보기에 제대로 잡힙니다.
기능과 구성
고치고, 검사하고, 게시하고, 소스까지 가져가는 데 필요한 것이 다 들어 있습니다. 화면만 그려 둔 디자인이 아닙니다.
홈만 있는 게 아닙니다. 모든 페이지가 이어져 있고 서로 오갈 수 있습니다. 주소와 배치, 화면 상태가 이미 짜여 있습니다.
휴대폰과 PC 분기점을 잡아 두었습니다. 게시 전에 최종 내용으로 브라우저 검사를 한 번 돌려 보세요.
색과 서체, 여백이 서로 묶여 있습니다. 원하는 결을 한 문장으로 말하면 앱 전체가 다시 칠해집니다. 하나씩 찾아 고칠 필요가 없습니다.
주요 페이지가 진짜 HTML로 내려갑니다. 검색 엔진과 링크 미리보기가 빈 화면 대신 실제 내용을 읽습니다.
데이터를 쓰는 템플릿은 실제로 조회되는 표와 행 단위 권한을 씁니다. 보여 주기만 하는 템플릿은 필요 없는 데이터베이스를 만들지 않습니다.
비공개 화면에는 로그인과 역할 확인, 행 단위 권한이 들어 있습니다. 공개 템플릿은 로그인이 걸린 척하지 않고 핵심 여정을 열어 둡니다.
문의·예약·가입이 있는 템플릿은 입력 검사와 저장이 자기 데이터에 연결돼 있습니다. 게시 전에 실제 흐름을 한 번 눌러 보세요.
브랜드 색과 여백, 모서리, 배경 톤을 테마 패널에서 한꺼번에 바꿉니다. 색을 정한 뒤에는 글자가 잘 읽히는지 다시 확인해 주세요.
의미에 맞는 마크업이 기본입니다. 브라우저 검사가 아직 손봐야 할 WCAG A/AA 항목을 알려 줍니다.
Vite가 판이 박힌 자산을 만듭니다. 브라우저와 성능 검사가 더 다듬을 곳을 짚어 줍니다.
문구나 배치, 색을 말로 설명해서 바꿉니다 — "첫 화면 더 크게", "톤을 더 따뜻하게". 코드는 몰라도 됩니다.
서로 떨어진 공간에서 만들고, 보여 드리기 전에 한 번 확인합니다. 소스는 언제든 내려받으시면 됩니다. 붙잡아 두지 않습니다.
이 템플릿과 흔한 유료 시작 템플릿 비교
| 비교 항목 | mypage | 흔한 유료 템플릿 |
|---|---|---|
| 가격 | 복사해 시작하는 데 크레딧 0. AI 작업만 셉니다 | 구독료와 사용 조건은 제품마다 다릅니다 |
| 내 코드 | 따로 빌드되는 소스 내려받기 + GitHub 연동 | Git 연동과 내려받기는 제품·요금제마다 다릅니다 |
| 고치는 방법 | 채팅, 화면, 테마, 소스 편집 | 편집 방식은 제품마다 다릅니다 |
| 백엔드 | 필요한 템플릿에는 프로젝트 데이터베이스와 권한 게이트가 붙습니다 | 관리형 백엔드는 흔히 제공됩니다 |
| 검색 노출 | 서버에서 그리는 경로와 검색 정보 검사 | 렌더 방식과 검색 정보 지원은 제품마다 다릅니다 |
| 화면을 보기까지 | 설치 없이 바로 뜨는 미리보기 | 대부분의 AI 빌더도 미리보기를 제공합니다 |
누구에게 맞나
- 제품을 내놓거나 대기자를 모으는 창업자
- 개발 일정을 기다리지 않고 오늘 페이지를 띄워야 하는 마케터
- 새로 만든 것을 알리는 1인 개발자
- 느리고 손으로 만든 마케팅 페이지를 바꾸려는 팀
- 출시나 프로모션, 행사 캠페인을 진행하는 분
- 만들기 전에 메시지를 시험해 보는 제품 팀
이럴 때 좋습니다
전부 만들기 전에 수요를 확인하세요. 실제 신청이 눈에 보입니다.
행사나 프로모션, 공지를 위한 페이지 하나를 빠르게 띄우세요.
제목과 소개 문구를 대화로 바꿔 가며 무엇이 통하는지 보세요.
무엇을 만들 수 있나
첫 화면과 기능, 근거, 요금까지. 가입은 실제 데이터에 저장됩니다.
초기 관심을 모으고 신청을 하나씩 확인할 수 있는, 한 갈래로 모은 페이지.
행사나 프로모션, 공지를 위한 전환 중심 단일 페이지.
시작하는 법
- 이 템플릿으로 시작
"템플릿 사용"을 누르면 마스터클래스의 사본이 만들어집니다. 소스를 복사하고, 딸려 있는 데이터베이스를 붙이고, 크레딧 없이 미리보기를 만듭니다. 걸리는 시간은 템플릿과 서버 상황에 따라 다릅니다.
- 브랜드 입히기
테마를 고르면 색이 한꺼번에 바뀝니다. 화면에서 고치기로 글자와 스타일, 올린 이미지 경로를 바로 바꾸면 됩니다. 데이터에 묶였거나 조건에 따라 달라지는 부분은 편집이 깨질 수 있어, 채팅이나 개발자 모드로 안내해 드립니다.
- 내 콘텐츠 넣기
샘플을 내 글과 상품, 사진으로 바꾸세요. 바꿀 내용을 평소 말로 알려 주시거나, 정확히 손보려면 개발자 모드를 쓰면 됩니다. 작업이 성공할 때마다 되돌릴 지점이 남아서 언제든 그때로 갈 수 있습니다.
- 데이터 연결
데이터베이스가 들어 있는 템플릿이면 표와 행 단위 권한이 프로젝트에 그대로 적용됩니다. 게시 전에 역할과 폼, 시작 데이터를 눌러 보세요. 결제와 로그인, 알림은 따로 설정하는 커넥터를 씁니다.
- 게시하기
확인을 마친 판을 실제 주소로 내보냅니다. 호스팅과 https, 서버에서 그린 페이지는 게시 쪽이 알아서 처리합니다. 이후 수정은 후보 판으로 먼저 빌드하므로, 빌드가 실패해도 지금 열려 있는 사이트는 그대로입니다.
데이터·출시 점검
- 이 템플릿에는 내 프로젝트만 쓰는 테이블 1개가 들어 있습니다: enrollments. 게시하기 전에 실제 데이터와 누가 볼 수 있는지를 확인하세요.
- 실제로 서비스하려면 아래 연동이 필요합니다:
- payments — 서버에 Stripe 열쇠와 허용 목록에 넣은 Price 별칭, 서명된 웹훅을 걸어 두세요. 결제 대기·완료·중복·만료·환불·실패를 모두 눌러 보셔야 합니다. 브라우저가 결제창에서 돌아온 것만으로는 결제된 게 아닙니다.
- notify — 받는 사람은 서버가 정하게 두고, 고른 이메일 서비스나 국내 메시지 서비스와 그 서명된 발송 웹훅을 같이 걸어 두세요. 성공·재시도·반송·실패·예약·취소를 눌러 보시고, 받는 사람을 브라우저가 고르게 두면 안 됩니다.
- 예시 글과 사진을 내 것으로 바꾸세요. 모바일과 데스크톱에서 모든 화면을 한 번씩 보시고요. 브라우저·접근성·보안·성능 검사에서 나온 지적은 공개 전에 다 해결하세요.
정리
마스터클래스 — 멈춰 있는 화면이 아니라 고쳐 쓰는 소스 프로젝트입니다. 복사해서 시작하고, 만들어진 페이지와 권한을 살펴보고, 대화나 코드로 내 것으로 바꾸고, 브라우저 검사를 돌린 뒤, 준비되면 게시하세요. 내려받은 소스는 따로 빌드되니 코드를 가지고 나가셔도 됩니다.
내 것으로 만들어 볼까요?
마스터클래스 템플릿을 무료로 복사해 보세요. 미리보기에 크레딧은 들지 않고, 소스는 언제든 내려받을 수 있습니다.