돌아가는 첫 판을 사용자 앞에 먼저 놓고, 대화로 다듬어 가세요.
소스 카탈로그: mypage게시 전 검사 안내
장학금 선발
장학금 선발 템플릿은 상세 현황, 운영자 화면 등 핵심 기능과 프로젝트별 2개 데이터 테이블을 갖춘 애플리케이션입니다.
g-app-bursary.preview.mypage.dev
데모를 불러오는 중…
실제로 돌아가는 앱입니다. 눌러 보세요.
이 템플릿 소개
장학금 선발 템플릿은 시안이 아니라 이미 돌아가는 앱입니다. 구조와 데이터, 마감은 되어 있으니 내용과 고객에만 집중하시면 됩니다.
장학금 선발 템플릿은 상세 현황, 운영자 화면 등 핵심 기능과 프로젝트별 2개 데이터 테이블을 갖춘 애플리케이션입니다. 복사되는 것은 고쳐 쓸 수 있는 소스입니다. 정해진 데모에 묶이지 않습니다. 디자인도 글도 데이터 구조도 동작도 다 바꾸시면 됩니다.
핵심 기능
이미 돌아가는 출발점
화면 캡처나 시안이 아닙니다. 페이지가 실제로 열리고, 그대로 고쳐 쓰면 됩니다.
진짜로 도는 기능
페이지와 데이터, 필요한 곳에는 관리 화면까지. 실제로 굴리는 데 필요한 것이 들어 있습니다.
어느 화면에서나
휴대폰과 PC를 둘 다 다듬었습니다. 화면 크기에 맞춰 배치가 바뀝니다.
가볍고 빠릅니다
최신 기술로 만들어 화면이 금방 뜨고, 페이지를 오갈 때 끊기지 않습니다.
기능과 구성
고치고, 검사하고, 게시하고, 소스까지 가져가는 데 필요한 것이 다 들어 있습니다. 화면만 그려 둔 디자인이 아닙니다.
페이지 구조 전체
홈만 있는 게 아닙니다. 모든 페이지가 이어져 있고 서로 오갈 수 있습니다. 주소와 배치, 화면 상태가 이미 짜여 있습니다.
반응형 기본기
휴대폰과 PC 분기점을 잡아 두었습니다. 게시 전에 최종 내용으로 브라우저 검사를 한 번 돌려 보세요.
한 문장으로 전체 스타일 변경
색과 서체, 여백이 서로 묶여 있습니다. 원하는 결을 한 문장으로 말하면 앱 전체가 다시 칠해집니다. 하나씩 찾아 고칠 필요가 없습니다.
검색에 잡히는 페이지
주요 페이지가 진짜 HTML로 내려갑니다. 검색 엔진과 링크 미리보기가 빈 화면 대신 실제 내용을 읽습니다.
흐름에 맞춘 데이터 구조
데이터를 쓰는 템플릿은 실제로 조회되는 표와 행 단위 권한을 씁니다. 보여 주기만 하는 템플릿은 필요 없는 데이터베이스를 만들지 않습니다.
분명한 접근 경계
비공개 화면에는 로그인과 역할 확인, 행 단위 권한이 들어 있습니다. 공개 템플릿은 로그인이 걸린 척하지 않고 핵심 여정을 열어 둡니다.
실제로 도는 폼
문의·예약·가입이 있는 템플릿은 입력 검사와 저장이 자기 데이터에 연결돼 있습니다. 게시 전에 실제 흐름을 한 번 눌러 보세요.
테마용 디자인 토큰
브랜드 색과 여백, 모서리, 배경 톤을 테마 패널에서 한꺼번에 바꿉니다. 색을 정한 뒤에는 글자가 잘 읽히는지 다시 확인해 주세요.
접근성 검사 포함
의미에 맞는 마크업이 기본입니다. 브라우저 검사가 아직 손봐야 할 WCAG A/AA 항목을 알려 줍니다.
빠르게 뜨도록 만든 빌드
Vite가 판이 박힌 자산을 만듭니다. 브라우저와 성능 검사가 더 다듬을 곳을 짚어 줍니다.
말로 고치기
문구나 배치, 색을 말로 설명해서 바꿉니다 — "첫 화면 더 크게", "톤을 더 따뜻하게". 코드는 몰라도 됩니다.
내 코드, 내려받기
서로 떨어진 공간에서 만들고, 보여 드리기 전에 한 번 확인합니다. 소스는 언제든 내려받으시면 됩니다. 붙잡아 두지 않습니다.
이 템플릿과 흔한 유료 시작 템플릿 비교
| 비교 항목 | mypage | 흔한 유료 템플릿 |
|---|---|---|
| 가격 | 복사해 시작하는 데 크레딧 0. AI 작업만 셉니다 | 구독료와 사용 조건은 제품마다 다릅니다 |
| 내 코드 | 따로 빌드되는 소스 내려받기 + GitHub 연동 | Git 연동과 내려받기는 제품·요금제마다 다릅니다 |
| 고치는 방법 | 채팅, 화면, 테마, 소스 편집 | 편집 방식은 제품마다 다릅니다 |
| 백엔드 | 필요한 템플릿에는 프로젝트 데이터베이스와 권한 게이트가 붙습니다 | 관리형 백엔드는 흔히 제공됩니다 |
| 검색 노출 | 서버에서 그리는 경로와 검색 정보 검사 | 렌더 방식과 검색 정보 지원은 제품마다 다릅니다 |
| 화면을 보기까지 | 설치 없이 바로 뜨는 미리보기 | 대부분의 AI 빌더도 미리보기를 제공합니다 |
누구에게 맞나
- 개발자를 뽑기 전에 아이디어부터 확인하고 싶은 창업자
- 다음 분기 말고 이번 주에 쓸 도구가 필요한 소규모 팀
- 빈 화면 말고 돌아가는 것부터 시작하고 싶은 메이커
- 엑셀과 노코드 짜깁기를 이제 그만하고 싶은 분
- 돌아가는 시제품을 놓고 이야기하고 싶은 기획자
- 고객사 앱을 빠르게 띄워야 하는 에이전시와 프리랜서
이럴 때 좋습니다
손으로 하던 일을 데이터와 관리 화면이 붙은 앱으로 옮기세요.
구독료 없이, 한 가지 일을 제대로 하는 도구를 팀에 주세요.
제안서 대신, 브랜드를 입혀 돌아가는 앱을 건네세요.
무엇을 만들 수 있나
핵심 흐름부터 가볍게 시작하고, 알게 된 만큼 기능을 붙이세요.
팀만 쓰는 앱 — 기록과 상태, 관리 화면까지. 구독료가 없습니다.
브랜드를 입힌 채 돌아가는 앱입니다. 그대로 넘기셔도, 직접 운영하셔도 됩니다. 소스도 내려받습니다.
시작하는 법
- 이 템플릿으로 시작
"템플릿 사용"을 누르면 장학금 선발의 사본이 만들어집니다. 소스를 복사하고, 딸려 있는 데이터베이스를 붙이고, 크레딧 없이 미리보기를 만듭니다. 걸리는 시간은 템플릿과 서버 상황에 따라 다릅니다.
- 브랜드 입히기
테마를 고르면 색이 한꺼번에 바뀝니다. 화면에서 고치기로 글자와 스타일, 올린 이미지 경로를 바로 바꾸면 됩니다. 데이터에 묶였거나 조건에 따라 달라지는 부분은 편집이 깨질 수 있어, 채팅이나 개발자 모드로 안내해 드립니다.
- 내 콘텐츠 넣기
샘플을 내 글과 상품, 사진으로 바꾸세요. 바꿀 내용을 평소 말로 알려 주시거나, 정확히 손보려면 개발자 모드를 쓰면 됩니다. 작업이 성공할 때마다 되돌릴 지점이 남아서 언제든 그때로 갈 수 있습니다.
- 데이터 연결
데이터베이스가 들어 있는 템플릿이면 표와 행 단위 권한이 프로젝트에 그대로 적용됩니다. 게시 전에 역할과 폼, 시작 데이터를 눌러 보세요. 결제와 로그인, 알림은 따로 설정하는 커넥터를 씁니다.
- 게시하기
확인을 마친 판을 실제 주소로 내보냅니다. 호스팅과 https, 서버에서 그린 페이지는 게시 쪽이 알아서 처리합니다. 이후 수정은 후보 판으로 먼저 빌드하므로, 빌드가 실패해도 지금 열려 있는 사이트는 그대로입니다.
데이터·출시 점검
- 이 템플릿에는 내 프로젝트만 쓰는 테이블 2개가 들어 있습니다: funds, awards. 게시하기 전에 실제 데이터와 누가 볼 수 있는지를 확인하세요.
- 실제로 서비스하려면 아래 연동이 필요합니다:
- auth — 이메일·비밀번호 로그인은 이미 연결돼 있습니다. 시험 계정을 하나 만들고, 꼭 필요한 만큼만 역할을 주세요. 게시 전에 비로그인·회원·직원·관리자로 각각 들어가 보세요. 소셜 로그인은 원하시면 따로 붙이면 됩니다.
- 예시 글과 사진을 내 것으로 바꾸세요. 모바일과 데스크톱에서 모든 화면을 한 번씩 보시고요. 브라우저·접근성·보안·성능 검사에서 나온 지적은 공개 전에 다 해결하세요.
정리
장학금 선발 — 멈춰 있는 화면이 아니라 고쳐 쓰는 소스 프로젝트입니다. 복사해서 시작하고, 만들어진 페이지와 권한을 살펴보고, 대화나 코드로 내 것으로 바꾸고, 브라우저 검사를 돌린 뒤, 준비되면 게시하세요. 내려받은 소스는 따로 빌드되니 코드를 가지고 나가셔도 됩니다.
비슷한 템플릿
내 것으로 만들어 볼까요?
장학금 선발 템플릿을 무료로 복사해 보세요. 미리보기에 크레딧은 들지 않고, 소스는 언제든 내려받을 수 있습니다.