의료·병원
한의원 홈페이지 '소헌한의원' — 부위별 통증 선택기
아픈 부위를 고르면 흔한 증상과 한의원에서 쓰는 치료를 그 자리에서 보여 주는 한의원 홈페이지입니다. 추나·약침·침구·첩약을 체계로 정리하고, 자동차보험·실비·첩약 건강보험 세 갈래를 표로 안내합니다.
비공개·데모 — AI 가상 데이터로 재구성한 예시입니다
문제
한의원은 시술이 아니라 '어디가 아픈가'로 나뉘는데, 레퍼런스의 인체 통증 선택기는 모바일에서 세로 텍스트(writing-mode)로 무너져 있었다. 보험이 자동차·실비·첩약 세 갈래로 갈리는 것도 방문자에겐 늘 막히는 지점이다. 사람은 추나요법이라는 시술명이 아니라 허리가 아프다는 상태를 들고 한의원을 찾는다. 메뉴를 시술 기준으로 짜 두면 증상을 시술명으로 번역하는 일이 방문자 몫으로 남는다. 부위에서 출발해 증상과 치료로 이어지는 입구가 필요했고 그 입구는 좁은 화면에서도 형태를 지켜야 했다. 보험 안내 역시 접수처에서 처음 들으면 챙길 서류를 몰라 걸음을 두 번 하기 쉬운 문제라, 진료 전에 미리 읽고 오는 화면으로 풀어야 했다.
해결
SVG 인체 라인 드로잉에 부위 8종을 붙여, 고르면 주묵 마커가 이동하며 증상과 추천 치료가 교체 렌더된다. 첫 진입엔 허리·요추가 미리 선택돼 있어 빈 패널로 시작하지 않고, 패널 안에는 치료 구성이 진찰 뒤 달라진다는 문구를 상시로 두어 안내가 진단처럼 읽히는 것을 막았다. 모바일은 인체도를 줄이고 칩을 2열 그리드로 재배치해 세로 텍스트를 쓰지 않고도 같은 UX를 냈다. 보험은 세 갈래를 카드로 갈라 필요 서류와 적용 여부만 안내형으로 적고 금액은 넣지 않았다. 추나·약침·첩약 등 치료법별 적용 여부와 준비 서류는 표 하나로 다시 모아 접수 전에 훑고 오게 했다. 한지 크림·딥그린·명조 세리프로 톤을 잡아 기존 의료 데모와 디자인 언어를 분리했다.
- 8
- 페이지
- 0
- 가로 오버플로(4뷰포트 전수)
- 3
- 보험 안내 갈래
제작 노트
부위에서 치료로 잇는 흐름
인체 라인 드로잉 옆에 두통·머리부터 발목·발까지 부위 버튼 여덟 개를 놓았습니다. 하나를 누르면 그림 위 주묵 마커가 그 부위로 옮겨 가고 아래 패널에는 흔한 증상 목록과 그 부위에 자주 쓰는 치료가 태그로 다시 그려집니다. 무릎처럼 붓기와 열감에 따라 치료 순서가 달라지는 부위에는 별도 메모를 달았습니다. 어디까지나 안내라는 것, 실제 치료 구성은 진찰 뒤에 정해진다는 것을 패널 안 문구로 계속 보여 주어 선택기가 진단 도구처럼 읽히지 않게 했습니다.
정적 HTML을 고른 이유
여덟 페이지 전부 정적 HTML과 빌드한 Tailwind CSS, 바닐라 JS 한 파일로 만들었습니다. 부위별 증상과 치료 데이터도 서버 없이 스크립트 안에 들어 있습니다. 프레임워크를 걷어 내면 첫 화면이 HTML 도착과 함께 그려지고 배포도 파일을 올리는 것으로 끝납니다. 개원 뒤 홈페이지에서 손댈 곳은 대개 진료시간이나 안내 문구 정도라 이런 구조가 관리하기에도 낫습니다. 인체도까지 SVG로 그려 무거운 이미지 요청을 줄였고 덕분에 느린 모바일 회선에서도 가볍게 열립니다.
접수 전에 끝나는 준비
첫 화면에서 아픈 부위를 고른 방문자는 허리·목, 교통사고, 소화·수면, 여성, 성장 등 증상별 페이지로 내려가며 자세한 안내를 읽게 됩니다. 어느 페이지에 있든 하단 바에서 진료 예약과 카톡 상담, 진료 시간, 오시는 길로 곧장 이동합니다. 보험 구간은 자동차·실비·첩약 카드 아래에 치료법별 표를 붙여 접수 전에 챙길 서류를 한 화면에서 확인하도록 짰습니다. 표는 좁은 화면에서 항목별 카드로 다시 쌓이는 구조라 어떤 폭에서도 가로로 밀리지 않습니다.
화면
