자체 시안
[병원 · 건강] 치과 홈페이지 「서울온담치과」
고객 의뢰 없이 직접 기획하고 만든 예시 작업입니다
- PC
- Mobile
치과 홈페이지 「서울온담치과」
상담 뒤 받는 「내 치료 계획서」를 첫 화면에 둔, 의료광고 규정을 지킨 치과 홈페이지 시안
- 제작 방식
- HTML · CSS · JavaScript (디자인 시안)
- 작업 기간
- 2026년 10월
- 타입
- 치과 홈페이지 · 상담 신청 · 치료 계획서 · 비급여 진료비 안내
- 메인 컬러
- #14213d#8fa9d1#ffffff
- 폰트
- Pretendard
시안을 직접 띄워 둔 주소입니다. 눌러 보며 움직임까지 확인하실 수 있습니다.
작업 리포트
치과가 홈페이지를 새로 만든다면 어떤 모습이 좋을지 가정하고 직접 기획한 시안입니다. 「서울온담치과」와 의료진 · 약력 · 금액은 모두 가상이며, 진료실 · 장비 · 모형 이미지는 AI(Gemini)로 만든 시안용 이미지입니다. 사람이 나오는 컷은 얼굴이 보이지 않게 잘랐습니다. 아래 「사이트 보러가기」에서 실제로 눌러 볼 수 있습니다.
무엇을 중심에 두었나
치과에 처음 오는 분의 가장 큰 걱정은 아픔보다 「무슨 치료를 얼마나, 얼마에 할지 모르겠다」입니다. 그래서 첫 화면 오른쪽에 「내 치료 계획서」 카드를 두고, 아래에서 임플란트 · 수면진정 사랑니 발치 · 투명교정 예시 계획서를 넘겨 보게 했습니다. 단계마다 기간을, 옆에는 예상 기간 · 내원 횟수 · 비용 범위 · 생길 수 있는 부작용을 적었습니다.
- 히어로 바로 아래 빠른 상담 바(이름 · 연락처 · 진료 선택 · 동의) — 스크롤 없이 상담 신청
- 「설명이 먼저 · 필요한 만큼만 · 통증을 줄이는 준비 · 기구는 한 분께 한 번」 네 가지 약속
- 진료 안내는 카드마다 「⚠ 부작용 · 주의사항」을 열어 볼 수 있게, 수면진정은 진정 전 확인할 것과 부작용을 따로
휴대폰에서
한 페이지가 화면 폭에 맞춰 바뀝니다. 휴대폰에서는 사진을 위로, 글을 아래로 두고, 화면 아래에 전화 · 계획서 · 진료비 · 상담 예약 바를 고정했습니다. 계획서는 단계가 세로로 이어지고, 비급여 표는 항목과 금액만 남겨 한눈에 들어오게 했습니다.
실제로 만든다면
의료법의 광고 규정에 맞춰 만듭니다. 환자 치료경험담 · 전후 사진(요건을 갖추지 않은 경우) · 수술 장면 · 상장과 인증 · 「무통 · 최고」 같은 과장 · 다른 치과와의 비교는 싣지 않고, 진료마다 부작용을 눈에 띄게 적습니다. 비급여 진료비용은 병원이 정한 금액으로 게시하고, 상담 폼은 개인정보 · 건강정보 수집 동의와 보유 기간을 함께 받습니다. 블로그 · SNS 등 일정 규모 이상의 매체에 광고할 때는 치과의료광고심의를 거칩니다.
상담 뒤 받는 「내 치료 계획서」
임플란트 · 수면진정 발치 · 투명교정 예시로 단계 · 기간 · 내원 횟수 · 비용 범위 · 부작용을 한 장에 보여 줍니다. 「무엇을 얼마나 할지 모르겠다」는 첫 걱정에 답합니다.
의료광고 규정을 지킨 구성
치료 후기 · 전후 사진 · 수상 배너 · 시술 장면을 싣지 않고, 진료마다 부작용 · 주의사항을, 비급여 진료비용은 표로 먼저 공개했습니다.
휴대폰 하단 상담 바
전화 · 계획서 · 진료비 · 상담 예약을 화면 아래에 고정하고, 상담 폼에는 건강정보 수집 동의와 보관 기간을 함께 두었습니다.
제공 서비스
- 홈페이지 기획
- 웹디자인
- 반응형 웹
- 모바일 최적화
- 의료광고 규정 검토