1. 톤 & 컬러
- 베이스: 순백(
#FFFFFF)에 아주 옅은 블루그레이(#F5F8FA)를 섹션 교대색으로 깔았음. 이비인후과는 “검사하고 설명하는 곳”이라 따뜻함보다 정돈된 인상이 우선. 강조 밴드만#EAF1F6로 한 단계 더 눌러 리듬을 줌. - 포인트: 딥 네이비(
#173F57) 한 계열로 제목 강조·버튼·아이콘·탑바·푸터까지 통일. 흔한 병원 하늘색 대신 채도를 뺀 네이비라 신뢰감은 살리고 차갑지는 않게. - 로고 그린: 로고의 초록(
#5C8F26)은 포인트로 퍼뜨리지 않고 보조 강조에만 제한. 두 색이 같은 비중으로 싸우면 화면이 산만해짐. - 피한 것: 순검정 텍스트. 제목은
#16212B, 본문은#3D4A55로 분리. 그림자도 검정이 아니라 잉크 톤(rgba(22,33,43,.08))이라 카드가 배경에서 붕 뜨지 않음.
2. 타이포그래피
- 본문·제목 모두 Pretendard. 질환명·검사명·진료시간처럼 정확히 읽혀야 하는 정보가 대부분이라 서체로 멋을 부리지 않음.
QUICK ANSWER,MAIN CLINIC,DIZZINESS · VERTIGO · BALANCE같은 영문 섹션 라벨만 Outfit으로 분리. 한글 제목 위에 작은 영문 라벨을 얹어 섹션 진입 신호를 주고, 의학 사이트 특유의 딱딱함을 덜어냄.- 제목 크기는
clamp()로 화면 폭에 따라 연속적으로 변하게 해서, 모바일에서 줄바꿈이 어색하게 끊기는 구간을 없앰.
3. 레이아웃 & UX — 질환정보 축적형 구조
이 사이트의 핵심은 메인이 아니라 질환 페이지가 시간이 지날수록 두꺼워지는 구조:
- 질환 18개를 어지럼증 / 귀 / 코 / 목 4개 클리닉으로 분류. 질환 페이지는 소개 → 주요 증상 → 원인 → 검사 → 치료 → 재발 및 주의사항 순서를 템플릿에 고정. 원장이 내용만 채우면 구조는 항상 같음.
- 상단에 한눈에 보기 요약 카드(증상·검사·치료)와 목차 앵커. 긴 글을 다 읽지 않아도 필요한 부분으로 바로 점프.
- 건강정보 글(칼럼·FAQ·환자질문 등 8개 유형)을 질환에 연결하면 해당 질환 페이지 하단에 유형별로 자동 수집. 블로그 글을 하나 쓸 때마다 질환 페이지가 저절로 두꺼워짐.
- 클리닉 페이지는 소속 질환 전체의 질문을 모아 보여주고, 항목마다 어느 질환 얘기인지 칩으로 표시.
- 메인은 증상 → 병명 → 병원 → 행동 순: ① 3장 슬라이드 히어로 → ② 01~04 바로가기 바 → ③ 빠른 답변 → ④ 병원 개요 + 진료안내 카드 → ⑤ 주요 진료분야 4카드 → ⑥ 병명으로 찾기 → ⑦ 진료철학 → ⑧ 원장 소개 → ⑨ 병원 둘러보기 → ⑩ 건강정보 → ⑪ 진료시간·오시는 길.
- “병명을 알고 계시면 바로 찾아보세요” 구역은 클리닉별로 질환명을 버튼으로 나열. 증상으로 들어온 사람과 병명으로 검색해 들어온 사람의 동선을 분리함.
4. 전환 설계 (전화 문의형)
예약 시스템 없이 전화 한 통이 목표인 병원이라, 어디서든 전화까지의 거리를 줄이는 쪽으로 설계:
- 상단 탑바에 진료시간·전화번호 상시 노출, 헤더 우측에 전화 문의 버튼 고정.
- 데스크톱은 우측 플로팅(블로그·전화·오시는 길·TOP), 모바일은 하단 고정 바. 어느 페이지에 떨어져도 다음 행동이 한 번의 탭 안에 있음.
- 공휴일·임시휴진은 사이트에서 관리하지 않고 네이버 블로그 진료일정으로 위임. 원무과가 이미 쓰는 채널을 그대로 쓰게 해서 공지가 두 군데서 어긋나는 일을 없앰.
- 무료 주차(상가 타워주차장) 안내를 오시는 길과 푸터 양쪽에 배치. 병원 위치 질문 중 가장 많은 게 주차라서.
5. 신뢰·운영 안정성
- 의학적 검토 표기: 모든 질환 페이지에 “의학적 검토 장규호 원장 · 이비인후과 전문의”와 최종 업데이트 날짜를 자동 출력. 누가 언제 확인한 정보인지가 보여야 의료 콘텐츠로 신뢰받음.
- 의료광고 규정을 카피에 내장: “완치·보장·최고” 표현을 배제하고 “원인을 살피고 쉽게 설명하는” 진료 태도 중심으로 서술. 위급 증상(갑작스러운 한쪽 청력 저하, 가라앉지 않는 어지럼)은 “지켜보기보다 빨리 진료”로 안내.
- AI·검색 최적화: JSON-LD로 병원(MedicalClinic)·원장(Physician)·위치를 구조화하고,
llms.txt는 등록된 질환과 한 줄 요약을 자동으로 생성. 질환을 추가하면 AI 검색용 목록도 따라서 갱신됨. - 비급여 진료비 안내 페이지를 별도로 두고 푸터에 상시 링크.
