의료·병원
동물병원 홈페이지 '온담' — 24시 응급 판단 도우미
새벽에 아이 상태가 이상할 때, 지금 데려와야 하는지부터 알려 주는 24시 동물병원 홈페이지입니다. 진료과 6종과 고양이 전용 동선을 나누고, 진료비는 수의사법 게시 의무에 맞춰 금액 없이 안내형으로 정리했습니다.
비공개·데모 — AI 가상 데이터로 재구성한 예시입니다
문제
동물병원 방문의 절반은 '이게 응급인가'를 모르는 새벽에 시작된다. 레퍼런스 3곳은 24시 진료를 배지로만 알릴 뿐, 보호자가 판단할 근거를 주지 않았다. 게다가 수의사법상 진료비 사전 게시 의무가 있어 3곳 다 '진료비 안내' 메뉴를 두는데, 데모는 금액을 쓸 수 없다. 응급 안내는 쓰는 방식부터 조심스러웠다. 증상마다 병명을 붙이면 화면이 진단처럼 읽히고 기준 없이 내원만 권하면 새벽의 보호자에게 아무 도움이 안 된다. 안내와 진단 사이 어디에 선을 긋느냐가 관건이었다. 개 위주로 짜인 병원 사이트에서 고양이 보호자가 자기 정보를 찾아 헤매는 문제도 함께 풀어야 했다.
해결
첫 화면에 응급 판단 도우미를 놓아 상태 칩을 고르면 지금 와야 하는지·집에서 확인할 것·올 때 챙길 것이 3단계 응급도로 갈려 렌더된다. 경련이나 호흡곤란처럼 바로 와야 하는 상태부터 하루 이틀 지켜봐도 되는 상태까지 여덟 가지 상황을 담았고, 결과 끝에는 해당 진료과로 넘어가는 링크를 붙여 판단이 다음 행동으로 이어지게 했다. 진단으로 오인되지 않도록 '안내이며 진단이 아닙니다' 고지를 컴포넌트 안에 상시 노출했다. 진료비는 금액 대신 게시 항목·게시 방식·안내 시점을 표로 만들어 법정 의무를 데모에서도 지키는 형태로 풀었다. 응급 레드는 사이트에서 24시 블록에만 써서 위계를 지켰다. 고양이 진료는 전용 페이지로 갈라 개와 다른 동선을 따로 냈다.
- 8
- 페이지
- 0
- 가로 오버플로(5뷰포트 전수)
- 3
- 응급도 분기
제작 노트
보호자의 말로 고른다
증상 칩에는 병명 대신 구토를 반복해요, 숨이 가빠요 같은 보호자의 말을 그대로 썼습니다. 하나를 고르면 지금 바로 오세요, 오늘 안에 진료받으세요, 하루 이틀 안에 살펴보세요 세 단계 중 하나로 갈리고 집에서 확인할 것과 병원에 올 때 챙길 것이 목록으로 함께 나타납니다. 경련을 고르면 발작 시각과 지속 시간을 재 두라는 확인 항목에 발작 영상과 먹이던 약 같은 준비물이 이어지는 식입니다. 결과 아래에는 응급실이나 내과 등 해당 진료과 페이지로 가는 링크를 붙여 읽고 끝나지 않게 했습니다.
무거운 번들 없이 빠르게
여덟 페이지 모두 정적 HTML과 빌드한 Tailwind CSS로 만들었고 응급 판단 도우미도 바닐라 JS 한 파일이 전부입니다. 증상별 데이터는 스크립트 안에 두고 화면 교체만 DOM으로 처리해 서버도 프레임워크도 쓰지 않았습니다. 새벽에 급히 검색해 들어오는 장면을 기준으로 삼으면 무엇보다 빨리 떠야 하는 화면이라 무거운 번들 대신 이 구성이 맞다고 봤습니다. 의존성이 없으니 시간이 지나 문구 하나를 고칠 때도 빌드 환경을 되살릴 필요 없이 파일만 고치면 됩니다.
급한 동선과 느린 동선
첫 화면 상단에서 급한 보호자는 응급 판단 도우미로, 그렇지 않은 보호자는 내과·외과·치과·영상진단·응급·고양이 진료 여섯 과 안내로 갈라집니다. 고양이 보호자를 위해서는 내비게이션에 전용 항목을 따로 두어 어느 페이지에서든 한 번에 닿게 했습니다. 야간 진료 여부나 마취, 중성화, 예방접종처럼 자주 묻는 질문은 첫 화면 FAQ로 끌어올렸고, 진료비 안내는 게시 항목과 게시 방식, 안내 시점을 표로 정리해 실제 운영이라면 금액이 채워질 자리라는 것을 밝혀 두었습니다.
화면
