클라라 피부과의원 홈페이지
피부과 업종을 가정해 코드블루가 기획한 홈페이지 샘플 시안(실제 병원이 아닙니다). 시술 분야별 상세 페이지, 비용 안내, 다양한 예약 동선을 갖춘 병원 홈페이지의 기본 구조를 보여주기 위해 만들었습니다.
실제 고객사 프로젝트가 아닌 CodeBlue 자체 기획·제작물입니다.

- 고객
- 업종별 샘플 시안 (실제 고객사 아님)
- 진행 시기
- 2026년
- 제작 범위
- 약 11페이지
- 맡은 일
- 코드블루 자체 기획 샘플(실제 고객사 프로젝트 아님)
- 주요 기능
- 시술별 상세 페이지 · 상담 예약 신청서 · Before & After·이벤트 페이지 · 카카오톡·네이버 예약 퀵메뉴 · 반응형 제작
- 사용 기술
- Next.js · React · Vercel · 상담 예약 신청서
왜 샘플을 만들었나요
병원 홈페이지는 페이지 수가 많고 의료광고 기준처럼 신경 쓸 부분이 많아, 상담만으로는 완성된 모습을 떠올리기 어렵습니다. 그래서 가상의 '클라라 피부과의원'을 설정하고 실제로 운영 가능한 수준까지 만들어, 병원 원장님들이 직접 둘러보며 구성을 판단할 수 있게 했습니다. 전화번호와 이메일 등은 모두 예시 정보입니다.
구성
- 메인: 브랜드 메시지, 진료 분야, 비용 안내, 진료 원칙, Before & After, 후기, 오시는 길, 상담 유도
- 시술 안내: 리프팅, 색소·미백, 여드름·흉터, 보톡스·필러·스킨케어 4개 분야별 상세 페이지
- 병원소개, Before & After, 이벤트, 오시는길, 상담 예약 페이지
설계 포인트
1. 고민에서 시술로, 시술에서 상담으로
분야별 상세 페이지는 세부 시술 프로그램 → 그 분야의 진료 포인트 → 자주 묻는 질문 → 상담 안내 순서로 구성했습니다. 방문자가 '내 고민'에서 출발해 어떤 시술이 있는지 보고, 궁금증을 해결한 뒤 자연스럽게 상담으로 이어지도록 한 흐름입니다.
2. 숨기지 않는 비용 안내
환자가 가장 망설이는 지점이 비용이라, 메인에 비용 안내 섹션을 따로 두었습니다. 실제 병원에 적용할 때는 병원이 고지하는 비급여 진료비와 금액을 반드시 일치시켜야 합니다.
3. 예약 동선은 여러 갈래로
화면 오른쪽에 카카오 상담, 네이버 예약, 이벤트, 오시는 길을 묶은 고정 메뉴를 두고, 상담 예약 페이지에서는 이름, 연락처, 희망 시술 분야, 희망 방문일, 문의 내용과 개인정보 수집 동의를 받도록 했습니다. 첫 방문 시에는 이벤트 안내 팝업과 '하루 동안 보지 않기'를 넣었습니다.
4. 의료광고 기준을 의식한 문구
효과를 보장하거나 다른 병원과 비교하는 표현을 피하고, 하단에 시술 정보는 일반적인 안내이며 개인에 따라 결과가 다를 수 있다는 고지 문구를 넣었습니다. 실제 병원에 적용할 때는 최종 문구를 의료광고 기준에 맞춰 병원에서 확인하는 단계를 거칩니다.
