한의원 홈페이지 제작 사례 · 민성한의원

베이스: 웜 크림(#faf7ef) + 올리브 그린(#5f6d43). 병원 특유의 차가운 순백을 피하고, “한방=따뜻하고 자연스러움”을 배경색부터 깔았음. 섹션 교대는 #f3eee1, 진료철학 밴드만 #efe8d8로 한 단계 더 눌러 리듬을 줌.
포인트: 올리브 그린 한 계열로 제목·아이콘·버튼·구분선·테두리까지 통일. 요소가 늘어도 화면이 안 흩어짐. 그린은 크림 위 AA 대비를 만족하는 톤(#5f6d43)으로 고름 — 예쁜 연두가 아니라 읽히는 초록.
예외 구역: 사상체질 4색만 색을 늘림(태양 #c9a227, 태음 #b5744a, 소양 #dd8a3c, 소음 #5b8aa6). 여기선 색이 장식이 아니라 정보 자체라, 체질을 색으로 인코딩해 카드를 구분. 나머지 전 화면은 단색 원칙을 지키고 이 구역만 의도적으로 품.
피한 것: 순검정 텍스트. 본문은 #3b3c34, 보조는 #63635a로 분리해 크림 배경에서 눈이 덜 피로하게. 그림자도 검정이 아니라 그린 틴트(rgba(74,85,57,.08))라 요소가 배경에서 붕 안 뜸.

기본 Pretendard 대신 Noto Sans KR(고딕) — 안내·진료시간표·FAQ처럼 정확히 읽혀야 하는 곳 전부.
진료철학의 인용/핵심 문장만 Nanum Myeongjo(명조). 철학 글은 사실 전달이 아니라 태도를 전하는 글이라, 섹션 단위로 폰트를 바꿔 격식과 호흡을 줌. 나머지 본문까지 명조로 가면 정보 페이지가 무거워져서 인용 블록에만 제한.
히어로 제목은 그린 accent 스팬으로 강조 + <br> 줄바꿈 제어. 명조가 같은 px에서 작아 보이는 문제는 행간과 색 보정으로 상쇄.

정보 구조를 분위기 → 신뢰 → 정보 → 행동 순으로 배치:
① 실사 히어로(첫인상) → ② 대표 한약·프로그램 → ③ 사상체질 맞춤(진단 철학) → ④ 진료철학(왜 이렇게 진료하나) → ⑤ 건강정보 블로그 → ⑥ FAQ → ⑦ 오시는 길.

진료시간·회차 정보는 이미지가 아니라 진짜 <table>. 워드프레스 블록표가 모든 셀에 넣는 테두리를 border:0로 걷어내고, thead 하단선·첫 열만 그린으로 강조한 “미니멀 라인” 표. 화면 낭독기가 읽고 모바일에서 안 깨짐.
히어로 배경은 실사 + 밝은 그라데이션 오버레이. 데스크톱은 우측 중심(글자 자리 왼쪽 확보), 모바일은 상단 중심 + 세로 그라데이션으로 전환해 사진 위 글자 가독성을 확보. 별도 모바일 이미지 없이 한 장으로 대응.
블로그 카드는 1:1 정사각 썸네일, 제목 2줄·본문 3줄 클램프로 길이가 제각각인 글도 격자가 안 흐트러짐. 목록은 4열, 홈은 슬라이드형으로 분리.
모바일 메뉴는 전체화면 오버레이(햄버거→X). 좁은 화면에서 드롭다운이 접히는 답답함 제거.

온라인 결제·폼이 목적이 아닌 상담 전환이 목표라, 과한 입력을 만들지 않는 쪽으로 설계:

예약을 두 갈래로 명확히 안내: 한약 처방 상담은 “네이버 예약 신청 → 전화 확정”, 침·약침·통증 등 일반 진료는 “예약 없이 진료시간 내 내원”. 하나로 뭉뚱그리면 전화가 늘어 원무 부담이 커져서, 성격이 다른 두 흐름을 분리.
모든 히어로에 전화(tel:)·오시는 길 CTA를 고정 배치. 어느 페이지에 떨어져도 다음 행동이 한 번의 탭 안에 있음.
팝업 자동 오픈 없음. 들어오자마자 뭔가 들이닥치면 콘텐츠를 볼 기회가 사라지므로, 정보를 먼저 보여주고 행동은 버튼으로만.

의료광고 규정을 카피에 내장: “완치·보장·최고” 표현을 전 페이지에서 배제하고 “도움을 줄 수 있습니다” 톤으로 통일. FAQ·프로그램 설명까지 이 기준으로 작성.
자가 셋업(프로비저닝): 테마를 업로드·활성화만 하면 페이지·메뉴·카테고리·기본 설정이 자동 구성. 담당자가 수작업으로 페이지를 안 만들어도 되고, 재적용해도 기존 콘텐츠를 안 덮어씀(중복 방지 가드). 사람의 실수를 설계에서 배제.
AI·검색 최적화: 구조화 데이터(JSON-LD로 병원·FAQ·위치·진료시간·좌표) + llms.txt로 생성형 AI 검색까지 대응. SEO 플러그인(Rank Math)을 켜면 테마가 자기 메타·스키마 출력을 자동으로 끔 — 태그가 두 번 나가는 중복을 코드 레벨에서 차단해 단일 소스를 보장.
운영 디테일: 네이버 지도 URL의 인코딩 문자가 커스터마이저를 죽이던 문제를 기본값 분리로 회피하는 등, “관리자가 값을 바꾸다 사이트가 깨지는” 경로를 하나씩 막음.