의료·병원
치과 홈페이지 '여문치과' — 증상별 진료 찾기
증상을 고르면 어떤 진료로 이어지는지 먼저 보여 주는 치과 홈페이지입니다. 진료 6종마다 치료 시간·마취·내원 횟수·기간·유지관리를 표로 정리하고, 하단 고정 상담바에서 어느 화면에서든 문의할 수 있습니다.
비공개·데모 — AI 가상 데이터로 재구성한 예시입니다
문제
치과 사이트는 시술 정보가 많은데 방문자는 '내 증상이 어느 진료인지'를 모른다. 레퍼런스 3곳 모두 진료 목록을 나열할 뿐이라, 증상에서 진료로 건너가는 다리가 없었다. 여기에 의료광고 규제상 효과 보장·수치 클레임을 쓸 수 없어 신뢰를 다른 방식으로 만들어야 했다. 이가 아프다, 잇몸이 붓는다처럼 방문자가 쓰는 말과 신경치료·잇몸치료라는 진료명 사이의 간극이 문제의 핵심이었다. 임플란트부터 소아치과까지 여섯 개 진료는 각각 세부 시술과 장비, 재료 정보까지 딸려 있어 정보 위계를 잘못 잡으면 나열식 사이트로 돌아가 버린다. 진료마다 다섯 개 필드를 표로 붙이는 구조라 좁은 모바일 화면에서 표가 깨지지 않게 만드는 일도 처음부터 제약으로 안고 갔다.
해결
첫 화면에 증상 셀렉터를 놓아 칩 하나를 고르면 해당 진료 카드가 하이라이트되고 확인 순서가 그 자리에서 열린다. 신뢰는 과장 대신 계측으로 만들었다 — 진료마다 5개 필드 스펙바(치료 시간·마취·내원 횟수·치료 기간·유지관리)에 '통상·개인차' 고지를 붙이고, 장비와 재료는 도판(FIG.) 캡션으로 노출한다. 가격·할인 표기는 전면 배제하고 건강보험 적용 여부만 안내형 표로 정리했다. 증상 안내에는 진단이 아니라 방향 안내라는 고지를 붙여 진찰을 대신하지 않는다는 선을 분명히 그었다. 장비 소개도 화려한 시술의 근거가 아니라 안 해도 될 치료를 걸러 내는 도구라는 관점으로 서술했다. 후기 섹션은 연출 예시 표기를 달았고 치료 계획과 비용은 검사 뒤 서면으로 안내한다는 원칙을 FAQ와 본문에 반복해 뒀다.
- 8
- 페이지
- 0
- 가로 오버플로(4뷰포트 전수)
- 5
- 진료별 스펙 필드
제작 노트
증상에서 진료로 잇는 다리
첫 화면의 증상 파인더에는 이가 아파요, 잇몸이 붓고 피나요, 사랑니가 아파요 같은 여덟 개 증상 칩이 있습니다. 하나를 고르면 증상 확인, 검사로 원인 구분, 치료 계획 상담의 세 단계와 함께 추천 진료 카드가 그 자리에 열립니다. 같은 증상이라도 원인은 사람마다 달라 화면 안내는 진찰을 대신하지 않는다는 문구를 바로 아래 붙였습니다. 헤더 메가메뉴와 하단 고정 상담바는 어느 화면에서든 진료 안내와 문의로 이어지는 보조 동선이라 증상 입구를 놓친 방문자도 길을 잃지 않습니다.
여섯 진료를 묶는 공통 규격
임플란트·치아교정·심미치료·일반진료·사랑니·소아치과 여섯 분야가 같은 문서 규격을 씁니다. 진료마다 치료 시간·마취·내원 횟수·치료 기간·유지관리 다섯 필드를 스펙바로 정리하고 통상 기준이며 개인차가 있다는 고지를 함께 둡니다. 3D CT와 구강 스캐너, CAD/CAM 밀링 같은 장비와 티타늄·지르코니아·E-MAX 재료는 도판 캡션 형식으로 붙였습니다. 가격 표기는 전면 배제하고 만 65세 이상 임플란트처럼 건강보험이 닿는 항목만 안내형 표로 남겼습니다.
정적 스택과 뷰포트 전수 검사
빌드한 Tailwind CSS와 바닐라 JS, nginx 정적 서빙으로 여덟 페이지를 구성해 프레임워크 없이 돌아갑니다. 증상 파인더의 칩 전환과 하이라이트도 바닐라 JS로 처리했습니다. 스펙바처럼 표가 많은 구조라 모바일부터 데스크탑까지 네 개 뷰포트에서 전 페이지를 훑는 전수 검사를 돌렸고 가로 오버플로 0을 확인한 뒤 마감했습니다. 첫 방문부터 정기점검까지 다섯 단계 진료 흐름과 첫 내원 준비물 체크리스트가 본문을 받치는 실용 정보로 들어가 있습니다.
화면
