Skin Care · Franchise & Partnership · Mockup v1
이 사업의 전제는 “가맹점을 무조건 모으지 않는다”입니다. 우리 브랜드로 여셔도 되고, 간판은 그대로 두고 마케팅·컨설팅만 맡기셔도 됩니다. 그래서 모든 화면이 가맹형(Type A)과 제휴형(Type B) 두 갈래를 대등하게 다루도록 설계되어 있습니다. 총 4개 세트 · 22개 화면이며, 각 화면 위에 설계 의도와 화면 간 이동 규칙을 적어두었습니다.
각 카드를 눌러 해당 세트의 전체 화면과 설계 의도를 확인하실 수 있습니다.
공개 홈페이지
가맹·제휴 모집 · 모바일 390×844 · 9화면
방문자가 스스로 “가맹형 / 제휴형” 중 어느 쪽인지 판단하게 만드는 것이 목표입니다. 가격·성과 데이터를 상담 전에 공개해 문의 품질을 올립니다.
가맹점주 대시보드
매장 원장용 · 데스크탑 1440×900 · 4화면
원장님이 하루 5분만 보는 화면입니다. 첫 블록은 지표가 아니라 오늘 처리할 것이며, AI가 만든 콘텐츠는 여기서 승인해야만 발행됩니다.
본사 어드민
본사 운영팀용 · 데스크탑 1440×900 · 5화면
들어오는 문의(파이프라인)와 이미 계약한 매장의 이탈(건강도) 두 가지를 관리합니다. 각 지점의 대시보드를 지점주와 같은 화면으로 열람할 수 있고, 가맹형·제휴형은 계약 구조가 달라 모든 목록에서 구분해 표시합니다.
AI 에이전트 콘솔
에이전트 운영팀용 · 데스크탑 1440×900 · 4화면
85개 매장의 에이전트를 돌리는 공장입니다. 이 세트가 사업의 원가 구조를 결정합니다 — 매장이 늘어도 사람이 같은 비율로 늘면 사업이 성립하지 않습니다.
화면은 따로 존재하지 않습니다. 공개 홈페이지에서 접수된 상담은 본사 파이프라인의 카드가 되고, 계약이 되면 에이전트 콘솔에 매장이 등록되며, 그 산출물이 원장님 승인 큐로 올라갑니다.
모든 이미지 자리가 채워져 있습니다. 점선 플레이스홀더로 남은 곳은 없습니다. 폰트도 CDN을 끊고 무료 라이선스 폰트를 로컬에 내려받아 쓰므로, 인터넷 없는 회의실에서 열어도 동일하게 보입니다.
네이버 레퍼런스 → AI 생성 / 실제 HTML 렌더링
| 구분 | 만든 방법 | 파일 |
|---|---|---|
| 매장 사진 12장 | Playwright로 네이버 피부관리샵 인테리어 · 에스테틱 관리실 검색 결과를 캡처해
국내 매장의 실제 톤(웜 베이지 · 아치형 · 간접조명)만 파악하고, 그 방향으로 힉스필드에서 새로 생성 |
hero-shop case-01~03 ig-1~3 staff-01 draft-cover ig-plan-1~3 |
| 홈페이지 사례 5장 | AI로 웹사이트를 그리면 한글이 깨집니다. 가상의 피부관리샵 5곳 홈페이지를 실제로 만들어 브라우저로 캡처했습니다 — 확대해도 글자가 깨지지 않습니다 | site-sample site-thumb-1~4 |
타인의 매장 사진은 한 장도 쓰지 않았습니다. 네이버 캡처는 톤 파악용 참고 자료로만 쓰고 버렸습니다.
교체하실 때는 assets/img/ 에 같은 파일명으로 덮어쓰기만 하면 됩니다. HTML은 건드릴 필요가 없습니다.
전부 상업적 사용 무료 · 로컬 호스팅
| 서체 | 용도 | 라이선스 | 용량 |
|---|---|---|---|
| Pretendard Variable | 본문 · 한글 전체 | SIL OFL 1.1 | 2.0 MB |
| Cormorant Garamond | 장식용 세리프 (eyebrow · 로고) | SIL OFL 1.1 | 37 KB |
| Material Symbols Rounded | UI 아이콘 | Apache 2.0 | 161 KB |
아이콘은 실제로 쓰는 108개만 잘라 넣었습니다 (전체 4MB → 161KB). 아이콘을 추가하면 서브셋을 다시 만들어야 하며,
방법은 _shared/fonts/LICENSES.md 에 명령어로 적어두었습니다.
틀과 재료는 갖춰졌습니다. 확정이 필요한 것과 다음에 만들 것을 정리했습니다.
현재 “글로우랩 / GLOW LAB / G”가 가칭으로 들어가 있습니다. 확정 시 이 세 문자열만 일괄 치환하면 전 화면에 반영됩니다. 로고는 문자 마크(G)로 대체되어 있고, brand.css의 .logo__mk 하나만 이미지로 바꾸면 됩니다.
가맹비·로열티·구독료·계약 기간이 모두 임시값입니다. 특히 가맹형 초기비용 항목 구성은 정보공개서와 일치해야 합니다.
지금 이미지는 생성물이라 “예쁜 남의 매장” 느낌입니다. 특히 담당 컨설턴트 사진과 성과 사례 매장 사진은 실제 사진이어야 신뢰가 생깁니다. 촬영 시 톤 가이드는 assets/img/README.md 참고.
원장님은 대부분 휴대폰으로 봅니다. Set 02를 모바일 390px 기준으로 축약한 버전이 별도로 필요합니다.
2호점 이상을 운영하는 원장이 자기 지점들을 전환해가며 보는 화면이 필요합니다. 본사가 지점을 여는 화면(Set 03 화면 5)과는 권한이 다릅니다 — 원장은 자기 지점만, 수정 권한까지 갖습니다. 지점 간 비교(어느 지점이 왜 잘 되는지) 뷰도 여기에 붙습니다.
계약 직후 2주가 이탈률을 가릅니다. 계정 연결 · 사진 수집 · 톤 학습까지의 단계별 화면이 아직 없습니다.
헤드스파 · 학원은 _shared의 토큰·프레임·UI를 그대로 쓰고, 액센트 색과 업종 고유 화면만 새로 만들면 됩니다.