Healthcare

한의원 홈페이지 '소헌한의원' — 부위별 통증 선택기

아픈 부위를 고르면 흔한 증상과 한의원에서 쓰는 치료를 그 자리에서 보여 주는 한의원 홈페이지입니다. 추나·약침·침구·첩약을 체계로 정리하고, 자동차보험·실비·첩약 건강보험 세 갈래를 표로 안내합니다.

비공개·데모 — AI 가상 데이터로 재구성한 예시입니다

데모 열기 ↗정적 HTML, Tailwind CSS(빌드), 바닐라 JS, SVG, nginx

문제

한의원은 시술이 아니라 '어디가 아픈가'로 나뉘는데, 레퍼런스의 인체 통증 선택기는 모바일에서 세로 텍스트(writing-mode)로 무너져 있었다. 보험이 자동차·실비·첩약 세 갈래로 갈리는 것도 방문자에겐 늘 막히는 지점이다.

해결

SVG 인체 라인 드로잉에 부위 8종을 붙여, 고르면 주묵 마커가 이동하며 증상과 추천 치료가 교체 렌더된다. 모바일은 인체도를 줄이고 칩을 2열 그리드로 재배치해 세로 텍스트를 쓰지 않고도 같은 UX를 냈다. 보험은 세 갈래를 카드로 갈라 필요 서류와 적용 여부만 안내형으로 적고 금액은 넣지 않았다. 한지 크림·딥그린·명조 세리프로 톤을 잡아 기존 의료 데모와 디자인 언어를 분리했다.

8
페이지: 0
가로 오버플로(4뷰포트 전수): 3
보험 안내 갈래

화면