의료·병원
피부과 클리닉 홈페이지 '온결 피부과'
먹빛 콜라주 히어로와 크림슨 레드 액센트로 톤을 잡은 피부과 홈페이지입니다. 첫 화면의 고민 진단 칩을 누르면 맞는 진료 카테고리를 찾아 주고, 카테고리마다 회차·주기 기준과 시술 후 관리까지 표로 안내합니다.
비공개·데모 — AI 가상 데이터로 재구성한 예시입니다
문제
피부과 시술은 종류가 많아 방문자가 자기 고민에 맞는 진료를 찾기 어렵다는 문제에서 출발했습니다. 레이저토닝이나 프락셔널 같은 시술명은 병원에는 익숙해도 방문자에게는 낯선 말입니다. 방문자는 기미가 늘었다거나 얼굴이 자주 붉어진다는 고민의 언어로 사이트에 들어오는데 메뉴는 시술명으로 짜여 있으니 어디를 눌러야 할지 막막해집니다. 여덟 개 진료 카테고리와 스물네 개 세부 시술 정보를 담으면서도 이 간극을 메우는 입구가 필요했습니다. 의료광고 규제상 효과를 단정하는 표현을 쓸 수 없고 실존하지 않는 가상 의료기관 데모라는 사실도 화면에 계속 남겨야 하는 조건이었습니다.
해결
다크 콜라주 히어로와 붓글씨 타이포로 첫인상을 잡되, 고민 진단 칩으로 카테고리를 찾아 주는 흐름은 그대로 뒀습니다. 전후 사진은 블러 처리한 연출 프레임과 진료실 열람 안내로 대체해, 과장 없이 안내하는 톤을 지켰습니다. 첫 화면 바로 아래에 어떤 고민으로 오셨냐고 묻는 진단 칩 여덟 개를 놓아 기미·홍조·여드름·모공 같은 고민 언어를 진료 카테고리로 번역해 줍니다. 카테고리마다 시술 시간·다운타임·권장 회차와 시술 후 관리를 표로 정리했고 진료 과정은 피부 측정, 원인 진단, 회차 설계, 경과 비교 네 단계로 소개합니다. 정품·정량 확인과 측정 우선, 과잉 없음이라는 세 가지 원칙 명판과 야간 진료 안내가 병원의 태도를 대신 말합니다. 진료 연차 같은 숫자에는 가상 데이터 각주를 붙였습니다.
- 8종
- 고민 진단 칩
- 8종
- 진료 카테고리
- 0
- 외부 JS 의존성
제작 노트
고민에서 진료로 가는 칩
첫 화면의 진단 칩은 기미·잡티가 늘었다, 얼굴이 자주 붉어진다, 턱선이 흐려지고 처졌다처럼 여덟 가지 고민 문장으로 되어 있습니다. 칩을 누르면 맞는 진료 카테고리를 안내해 시술명을 몰라도 입구를 찾습니다. 진료는 리프팅·탄력부터 보톡스·필러까지 여덟 카테고리이고 카테고리마다 세 개씩 스물네 개 세부 시술로 이어집니다. 가장 자주 진행하는 레이저 토닝·HIFU·프락셔널·히알루론산 부스터 네 가지는 시그니처 캐러셀로 따로 모아 첫 방문자가 병원의 주력을 바로 읽게 했습니다.
빌드 CSS와 바닐라 JS
정적 HTML과 Tailwind 빌드 CSS, 바닐라 JS만 쓰고 Nginx로 서빙합니다. 진단 칩 인터랙션과 시그니처 캐러셀, 흐르는 마르퀴 배너까지 외부 JS 라이브러리 없이 구현해 의존성이 0입니다. 먹빛 콜라주 히어로와 붓글씨 타이포, 크림슨 레드 액센트라는 무거워 보이는 아트 디렉션도 이미지와 CSS만으로 처리해 화면이 가볍습니다. 카테고리마다 붙는 회차·주기 표가 많은 구조라 모바일 화면에서 표와 카드 레이아웃이 깨지지 않는지부터 확인하며 만들었습니다.
먹빛 톤과 절제된 신뢰 장치
전후 비교 자리는 블러 처리한 연출용 프레임으로 채우고 실제 증례 사진이 아니라는 문구와 진료실 열람 안내를 함께 붙였습니다. 진료 원칙은 정품·정량 확인, 측정이 먼저, 과잉 없이 세 가지를 명판처럼 세웠고 첫 진료는 시술 없이 진단만 받아도 된다는 안내가 FAQ와 예약 섹션에 반복됩니다. 진료 연차와 누적 시술 같은 숫자 섹션에는 포트폴리오 데모용 가상 데이터라는 각주를 달았습니다. 야간 진료와 7월 케어 캘린더 같은 공지 카드가 운영 중인 병원 특유의 생활감을 만듭니다.
화면
