왜 이비인후과 홈페이지는 ‘정확성’에서 출발하는가
이비인후과를 찾는 환자는 증상 자체보다 "이게 뭔지 정확히 알고 싶다"는 마음이 더 큽니다. 코막힘·이명·어지럼증·코골이처럼 눈에 보이지 않는 증상은 "별일 아닐까, 큰 병일까"라는 불확실함이 불안의 핵심입니다. 그래서 이 사이트는 화려한 시술 자랑 대신 "우리는 추측하지 않고 검사로 확인한다"를 0.3초에 전하는 것을 1번 목표로 잡았습니다. 실제 히어로 카피도 '귀·코·목의 불편함, 하나씩 정확하게 확인합니다' — 안심이 아니라 정확성을 먼저 약속합니다. 이비인후과 홈페이지의 첫인상은 친근함이 아니라, 근거를 우선하는 신뢰여야 한다고 봤습니다.
색: 과장 없는 클리니컬 블루
실제 사이트의 바탕은 흰색에 가까운 밝은 톤이고, 핵심 색은 채도를 낮춘 스카이블루(#2f6fed·딥 #1c4fc0) 한 가지입니다. 병원 쇼케이스가 블루+민트 두 가지 색으로 '청결과 회복'을 동시에 말했다면, 이비인후과는 색 하나로 좁혀 '정밀함'만 남깁니다. 배경은 순백과 아주 옅은 스카이 틴트(#f4f9ff·#eef4fc)를 번갈아 깔아 임상적이면서도 차갑지 않게, 예약 섹션 한 곳에서만 딥블루 그라데이션으로 톤을 낮춰 무게감을 실었습니다. 붉은색·주황색 같은 경고색은 아예 배제해, 이미 불안한 환자를 화면에서부터 자극하지 않도록 절제했습니다.
타이포: 울트라라이트가 만드는 여백의 신뢰
이 사이트는 헤드라인과 본문 모두 Pretendard를 쓰되, 굵기를 200~300의 울트라라이트로 눌러 씁니다. 병원·소아과 쇼케이스가 굵고 또렷한 볼드로 '안심'을 말했다면, 여기서는 반대로 얇은 획과 넓은 자간으로 '군더더기 없이 정밀한 클리닉'이라는 인상을 만듭니다. 제목은 얇지만 자간을 넉넉히 벌려 저시력 환자도 읽기 어렵지 않게 하고, 진료 단계별 설명문은 행간 1.75로 여유 있게 띄워 정보량이 많아도 압박감이 없게 했습니다. 한글은 word-break: keep-all로 어절 단위 줄바꿈만 허용해 '진료 과정' 같은 핵심 단어가 중간에 끊기지 않게 했고, 폰트는 서브셋을 자가 호스팅(font-display: swap)해 깜빡임 없이 빠르게 떴습니다.
구조와 전환: 세로 타임라인이 곧 설명서
이 이비인후과 사이트의 핵심 구조는 세로 타임라인입니다. 히어로 바로 아래, '상담 → 정밀검사 → 진단 → 맞춤치료' 네 단계를 노드와 연결선으로 이어 붙여, 환자가 스크롤을 내릴 때마다 "지금 내가 어느 단계에 와 있는지"를 눈으로 따라가게 했습니다. 노드는 화면에 들어올 때 opacity만으로 은은하게 채워지는데, 바운스나 3D 틸트 같은 화려한 효과를 일부러 넣지 않았습니다 — 진료 과정을 설명하는 자리에서 튀는 움직임은 오히려 신뢰를 깎는다고 판단했기 때문입니다. 타임라인 다음에는 이 페이지의 시그니처인 체크박스 증상 체커가 옵니다. 코막힘·귀 통증·어지럼증·코골이·목소리 변화 등을 체크하면 오른쪽 결과 패널에 참고할 만한 진료 분야가 즉시 나타나는 클라이언트 로직 위젯으로, "내 증상이 어느 진료 분야에 해당하는지" 미리 가늠하게 해 예약 전 불확실함을 줄여 줍니다.
신뢰와 정직(의료광고법 · GEO)
의료는 「의료법」상 의료광고 사전심의 대상이 될 수 있어, 치료 효과·완치를 단정하거나 과장하는 표현을 쓰지 않았습니다. 특히 증상 체커는 결과 패널 하단에 "이 결과는 방문 전 참고를 돕기 위한 안내이며 의학적 진단이 아니다"라는 문구를 항상 함께 노출해, 재미있는 위젯이 의료광고법 리스크로 번지지 않도록 설계했습니다. 원장 소개 영역도 '학회 활동'·'임상 경력'처럼 사실에 기반한 신뢰 요소로만 구성하고 결과를 보장하는 문구는 배제했습니다. 그 위에 '코골이 병원', '이명 원인', '이석증 어지럼증'처럼 환자가 실제로 검색하는 질문을 FAQ와 구조화 데이터(MedicalClinic·FAQPage 스키마)로 담아, 검색엔진과 AI 답변 양쪽에서 이비인후과 홈페이지 제작 사례로 발견되게 했습니다. 과장 없이도 찾아지고, 정확한 예약으로 이어지는 사이트 — 그것이 이 작업의 목표였습니다.