의료·병원
프리미엄 성형외과 브랜드 사이트 'ÉLUME'
바이올렛에서 마젠타로 흐르는 그라데이션과 초대형 타이포로 첫인상을 잡은 성형외과 홈페이지입니다. 시술 8개 카테고리마다 방법·마취·회복 기준을 표로 정리하고, 하단 고정 퀵상담 바에서 어느 화면에서든 상담을 신청할 수 있습니다.
비공개·데모 — AI 가상 데이터로 재구성한 예시입니다
문제
성형외과 사이트는 화려한 전후 사진에 기대는 경우가 많아, 병원의 신뢰 철학을 디자인 언어로 옮기는 것이 과제였습니다. 전후 사진과 이벤트 가격을 앞세우는 화면 문법이 업계 표준처럼 굳어 있지만 이 가상 병원의 설정은 반대였습니다. 계측과 1인 1집도 원칙을 내세우는 병원이 전후 사진 없이 무엇으로 첫인상을 만들지가 문제였습니다. 눈·코·윤곽·리프팅·가슴·바디·남자·쁘띠까지 여덟 분야의 수술 정보를 한 사이트에 담으면서도 화면이 어지러워지지 않아야 했고 의료광고 규제상 효과를 단정하는 문장은 처음부터 쓸 수 없었습니다. 실존하지 않는 가상 의료기관이라는 사실을 숨기지 않으면서 실제 병원 사이트 수준의 완성도를 보여 줘야 하는 데모 특유의 조건도 있었습니다.
해결
국내 대형 성형외과의 화면 문법을 참고해 그라데이션 히어로와 해시태그 카드, 하단 고정 퀵상담 바를 이식했습니다. 전후 사진은 올리는 대신 상담실 열람 원칙을 카드로 안내하고, 스타일은 Tailwind 빌드 CSS 하나로 통합해 외부 JS 라이브러리 없이 가볍게 유지했습니다. 신뢰는 문장이 아니라 구조로 말하게 했습니다. 1인 1집도, 3D-CT 계측 설계, 마취과 전문의 상주, 책임 사후 관리라는 네 가지 원칙 섹션이 병원 소개를 대신하고 진료 연차 같은 숫자에는 데모용 가상 데이터라는 각주를 그대로 붙였습니다. 비용도 전화로 확정 금액을 말하지 않고 계측 후 서면으로 안내한다는 FAQ로 처리했습니다. 상담 폼 아래에는 입력값을 어디에도 전송하지 않는 데모 폼이라는 사실을 적어 두었습니다.
- 8종
- 시술 카테고리
- 0
- 외부 JS 의존성
- 4종
- 반응형 검증 뷰포트
제작 노트
여덟 분야를 같은 틀로
눈성형부터 쁘띠·주사까지 여덟 개 시술 분야가 모두 같은 정보 구조를 따릅니다. 분야마다 수술 시간·마취·회복 기준을 표로 정리하고 세부 시술은 해시태그 카드로 붙였으며 자주 묻는 질문까지 한 페이지에 담았습니다. 상단 메가메뉴는 여덟 분야 아래 자연유착·콧대성형·광대축소 같은 세부 시술 단위까지 펼쳐져 원하는 항목으로 바로 이동합니다. 대표 시술은 자연유착 눈성형과 3D 계측 안면윤곽, 근막층 안면거상 세 가지를 시그니처 카드로 따로 묶어 병원의 중심 분야가 한눈에 잡히게 했습니다.
외부 라이브러리 없는 구성
정적 HTML에 Tailwind 빌드 CSS 한 장, 바닐라 JS만으로 만들었고 서빙은 Nginx가 맡습니다. 메가메뉴와 스크롤 등장 효과, 숫자 카운터, 하단 퀵상담 바까지 전부 프레임워크 없이 구현해 외부 JS 의존성이 0입니다. 무거운 번들이 없으니 바이올렛에서 마젠타로 흐르는 그라데이션 히어로와 초대형 타이포가 화면의 무게를 전부 가져갑니다. 모바일부터 데스크탑까지 네 가지 뷰포트에서 레이아웃 깨짐을 검증한 뒤 마감해 반응형 검증 뷰포트 4종이라는 지표로 남겼습니다.
과장 대신 원칙을 앞세운 화면
전후 사진 자리에는 사진 대신 원칙을 놓았습니다. 개인정보 보호를 이유로 전후 사진은 상담실에서만 보여 준다는 카드가 그 자리를 대신합니다. 상담 동선은 어느 화면에서든 끊기지 않게 하단 고정 퀵상담 바에 이름·연락처·관심 시술 입력을 붙였고 전화·카카오 버튼도 함께 뒀습니다. 화면 상단에는 가상 의료기관임을 알리는 DEMO 배지가 상시 떠 있고 푸터의 포트폴리오 데모 고지가 의료진·수치·연락처 전부 연출된 예시라는 점을 밝힙니다. 진행 순서는 상담·계측부터 회복 관리까지 네 단계로 정리했습니다.
화면
