피부과 홈페이지 제작 — 레퍼런스 30곳 조사하고 놀란 5가지

피부과 홈페이지 제작, 자료조사하다가 놀란 이야기

피부과 홈페이지 제작을 준비하면서 레퍼런스 사이트를 조사했습니다. 잘 만든 피부과 홈페이지가 어떤 건지 기준을 잡으려고요. 수십 곳을 열어봤습니다.

그런데 보면 볼수록 이상했습니다.

화려한 건 맞습니다. 그런데 제가 찾으려는 정보가 안 보입니다. “보톡스 시술 후기”를 보려면 어디를 눌러야 하는지 모르겠습니다. “시술 안내” 메뉴를 열었더니 레이저, 필러, 보톡스, 리프팅, 여드름, 색소, 모공, 흉터가 같은 줄에 나열되어 있습니다. 분류가 없습니다. 구조가 없습니다.

이게 2천만 원짜리라고?

제가 보는 눈이 없는 건가 싶었습니다. 그래서 하나하나 뜯어봤습니다. 그리고 확신하게 됐습니다. 문제는 디자인이 아니라 정보 설계(IA, Information Architecture)의 부재라는 것을.

피부과 홈페이지 제작의 핵심은 “정보 설계”다

제가 수십 개 사이트를 분석하면서 깨달은 게 있습니다. 피부과 홈페이지 제작에서 가장 중요한 건 색감도, 애니메이션도, 폰트도 아닙니다. 카테고리 구조와 정보 깊이(depth) 설계입니다.

정보 아키텍처(IA)란 쉽게 말하면 이겁니다. 환자가 사이트에 들어왔을 때, 원하는 정보까지 몇 번의 클릭으로, 어떤 경로로 도달하는가를 설계하는 작업입니다.

카테고리와 depth가 왜 핵심인가

예를 들어 피부과 시술이 20개 있다고 합시다. 이걸 전부 같은 레벨에 나열하면 환자는 20개 중에서 골라야 합니다. 밀러의 법칙(Miller’s Law)에 따르면 인간이 한 번에 처리할 수 있는 정보 단위는 7±2개입니다. 20개는 인지 과부하를 일으킵니다.

제대로 된 설계는 이걸 계층으로 나눕니다.

대분류(depth 1): 피부 시술 / 체형 시술 / 안티에이징 — 3개.
중분류(depth 2): 피부 시술 → 여드름 / 색소 / 모공 — 3~4개.
소분류(depth 3): 여드름 → 압출 치료 / 레이저 치료 / 약물 치료 — 2~3개.

환자는 매 단계에서 3~4개 중 하나만 고르면 됩니다. 3번의 클릭으로 정확한 정보에 도착합니다. 이게 depth 설계입니다.

depth가 없는 사이트에서 벌어지는 일

depth가 없으면 모든 시술이 같은 층에 뒤섞입니다. 보톡스와 여드름 치료가 같은 메뉴 안에 있습니다. 레이저 토닝과 울쎄라가 같은 목록에 나열됩니다. 환자 입장에서는 이런 겁니다. 마트에 갔는데 과일, 생선, 세제, 문구류가 전부 같은 선반에 놓여 있는 상황.

아무리 매장이 예뻐도, 물건을 못 찾으면 나갑니다.

지금 피부과 홈페이지 제작 업체들이 만드는 사이트 대부분이 이 상태입니다. 화려함에 돈을 쓰고, 정작 구조 설계에는 돈을 쓰지 않는 겁니다.

실제로 확인한 5가지 구조 설계 부재

피부과 홈페이지를 10곳 이상 직접 분석해봤습니다. 물론 실명은 밝히지 않겠습니다. 그런데 놀라운 건, 거의 모든 사이트에서 동일한 IA 설계 실패가 반복된다는 점이었습니다.

1. 상단 메뉴 과잉 — depth 1이 10개 이상

정보 아키텍처에서 상단 네비게이션은 depth 1(대분류)입니다. 여기에 들어갈 항목은 3~5개가 적정합니다. 그런데 분석한 사이트 대부분이 상단에 10~20개를 넣고 있었습니다. 이건 대분류가 아니라 전체 목록을 1층에 펼쳐놓은 겁니다. depth 자체가 존재하지 않는 구조입니다.

2. 분류 체계 없는 시술 나열

“시술 소개” 메뉴 하나 아래에 레이저, 필러, 보톡스, 리프팅, 여드름, 색소, 모공, 흉터가 전부 같은 레벨에 있습니다. 대분류-중분류-소분류 구조가 없습니다. 이건 환자에게 “20개 시술 중에서 알아서 찾으세요”라고 말하는 것과 같습니다. 정보 아키텍처(IA)라는 개념 자체가 적용되지 않은 겁니다.

3. 사용자 플로우 설계 부재

IA 설계에는 카테고리뿐 아니라 사용자 플로우(user flow)가 포함됩니다. 환자가 첫 방문에서 예약까지 어떤 경로를 거치는가. “증상 인식 → 시술 탐색 → 의사 신뢰 확인 → 예약”이라는 자연스러운 흐름이 설계되어야 합니다. 분석한 사이트 중 이 플로우를 의도적으로 설계한 곳은 한 곳도 없었습니다. 환자가 어디서 들어오든 같은 메인 페이지만 보여줍니다.

4. 화려한 애니메이션, 느린 로딩

스크롤할 때마다 요소가 페이드인 되고, 슬라이드되고, 회전합니다. 시각적으로는 화려하지만 페이지 로딩 속도가 3초를 넘어갑니다. Google의 Core Web Vitals 기준으로 보면 이건 SEO 페널티를 자처하는 설계입니다. 그리고 이 애니메이션은 IA 설계와 무관합니다. 구조가 잘 잡힌 사이트는 애니메이션 없이도 환자가 원하는 정보를 찾습니다.

5. IA를 설계할 수 있는 인력의 부재

결국 근본적인 문제가 여기에 있었습니다. 카테고리 설계, 사용자 플로우, depth 레이아웃 — 이건 현직 UX 디자이너 또는 정보 설계(IA) 전문가만 할 수 있는 일입니다. 그런데 병의원 홈페이지 업체에는 이런 인력이 없습니다. 디자이너라 불리는 사람이 실제로는 시각 디자인이나 퍼블리싱만 하는 경우가 대부분입니다. 카테고리 구조표를 만들 줄 아는 사람과 예쁜 화면을 만들 줄 아는 사람은 전혀 다른 직종입니다.

원장님이 직접 확인하는 자가 진단법

전문 지식 없이도 5분이면 됩니다. 지금 원장님 병원 홈페이지를 열고 아래 항목을 체크해보세요.

5단계 IA 자가 진단 체크리스트

상단 메뉴 수 세기(depth 1 진단) — 메인 네비게이션에 보이는 메뉴가 6개 이상이면 대분류 설계가 안 된 겁니다. 5개 이하가 정상입니다.
시술 분류 체계 확인(depth 2~3 진단) — “시술 소개”를 눌렀을 때 하위 항목이 한 단계로 끝나면서 시술 10개가 같은 레벨에 나열되어 있으면, 중분류-소분류 설계가 없는 겁니다. “피부 시술 > 여드름 > 레이저 치료”처럼 계층이 잡혀 있어야 합니다.
3클릭 테스트 — 특정 시술 정보에 도달하기까지 클릭 3번 이내에 가능한지 확인하세요. 3번 안에 안 되면 depth 설계에 문제가 있습니다. 반대로 클릭 1번에 모든 시술이 다 보이면 그것도 분류가 없다는 뜻입니다.
모바일 3초 테스트 — 스마트폰으로 홈페이지를 열어보세요. 3초 안에 “이 병원이 뭘 잘하는지” 파악이 되지 않으면 정보 구조가 실패한 겁니다.
PageSpeed Insights 테스트 — PageSpeed Insights에 병원 홈페이지 URL을 넣어보세요. 모바일 점수가 50점 이하라면 구조 설계 없이 애니메이션으로 채운 사이트일 가능성이 높습니다.

원장님, 위 5가지 중 3개 이상 해당된다면, 지금 쓰고 계신 홈페이지는 환자를 위한 사이트가 아니라 업체의 포트폴리오입니다. 정보 구조(IA)부터 다시 짚어야 합니다.

왜 피부과 홈페이지 제작 업계가 이렇게 됐을까

특정 업체를 비난하고 싶은 게 아닙니다. 이건 구조적인 문제입니다.

정보 비대칭 — IA라는 개념 자체를 모른다

원장님은 의료 전문가이지, 웹 전문가가 아닙니다. 카테고리 설계가 뭔지, depth가 왜 중요한지, 사용자 플로우가 뭔지 알 방법이 없습니다. 업체 입장에서는 이 정보 비대칭을 이용합니다. IA 설계는 눈에 안 보이는 작업입니다. 그래서 “안 해도 표시가 안 납니다.” 대신 애니메이션을 화려하게 넣으면 납품 시점에 “와, 잘 만들었다”는 반응을 끌어낼 수 있습니다.

인센티브 구조의 왜곡

업체의 인센티브는 “원장님을 감동시키는 것”이지, “환자를 전환시키는 것”이 아닙니다. IA 설계는 시간이 오래 걸리고, 결과물이 스프레드시트 한 장입니다. 반면 화려한 애니메이션은 짧은 시간에 “비싼 느낌”을 만들어냅니다. 어느 쪽이 업체에 유리한지 명확합니다.

IA 전문 인력의 부재

대분류-중분류-소분류를 설계하고, 사용자 플로우를 그리고, 각 depth의 콘텐츠 전략을 짜는 일. 이건 에이전시나 스타트업에서 훈련받은 UX/IA 전문가만 할 수 있습니다. 그런데 병의원 홈페이지 업체에 이런 인력이 있는 곳이 거의 없습니다. 디자이너라 불리는 사람이 실제로는 그래픽 작업만 하는 경우가 대부분이고, 카테고리 구조표를 작성해본 경험 자체가 없습니다.

IA가 없는 홈페이지가 만드는 실질적 피해

정보 설계가 빠진 홈페이지를 방치하면 원장님이 잃는 것은 명확합니다.

SEO 피해 — 검색엔진도 구조를 읽는다

구글과 네이버의 크롤러는 사이트의 카테고리 구조를 읽고 콘텐츠의 관계를 파악합니다. depth 설계가 없으면 크롤러 입장에서 “이 사이트는 20개 시술이 어떤 관계인지 알 수 없다”는 판단을 내립니다. 사이트맵이 flat하면 SEO도 flat합니다. 상위 노출은 불가능합니다. 거기에 과도한 애니메이션으로 인한 느린 로딩 속도는 Core Web Vitals 점수를 깎아먹고, 그건 곧 검색 순위 하락입니다.

환자 이탈 — 못 찾으면 떠난다

depth 설계가 없는 사이트에서 환자는 3초 안에 원하는 정보를 찾지 못합니다. 밀러의 법칙을 다시 떠올려보세요. 메뉴가 10개 이상이면 인지 과부하가 일어납니다. 환자는 선택을 포기합니다. 뒤로 가기를 누릅니다. 경쟁 병원 사이트로 갑니다. 그게 전부입니다.

비용 손실

피부과 홈페이지 제작에 1,000만 원에서 2,000만 원을 쓰는 원장님이 많습니다. 그런데 그 비용의 대부분이 애니메이션과 시각 효과에 들어가고, 정작 IA 설계에는 0원이 투입됩니다. 그 비용이 환자 전환으로 이어지지 않는다면, 그건 마케팅 비용이 아니라 매몰 비용입니다.

환자 관점의 피해

환자 입장에서도 피해입니다. 시술 정보를 찾으러 들어왔는데 분류 체계 없이 나열된 메뉴와 화려한 효과만 보입니다. “여드름 치료”를 찾으려면 “피부 시술” 아래에 있는지, “레이저” 아래에 있는지, 아니면 독립 메뉴인지 알 수 없습니다. 결국 신뢰를 형성하지 못한 채 이탈하고, 원장님은 실력이 있는데도 환자를 놓치는 겁니다.

지금 당장 해야 할 3가지

제가 문제 삼고 싶은 건 특정 업체가 아닙니다. 이런 관행 자체입니다. 그리고 이 관행은 원장님이 IA라는 기준을 가지면 바뀝니다.

1단계 — IA 관점으로 자가 진단부터 하세요

위에서 알려드린 5단계 체크리스트를 지금 바로 실행하세요. 5분이면 됩니다. “예쁜가?”가 아니라 “구조가 있는가?”를 기준으로 현재 사이트를 봐야 합니다.

2단계 — 업체에 카테고리 구조표를 요구하세요

홈페이지 제작을 의뢰할 때, 디자인 시안 전에 카테고리 구조표(IA 문서)를 먼저 요청하세요. 대분류-중분류-소분류가 정리된 트리 구조, 각 depth별 콘텐츠 전략, 사용자 플로우 다이어그램. 이 세 가지를 제출하지 못하는 업체는 IA 설계 능력이 없다는 뜻입니다.

3단계 — “3클릭 안에 찾을 수 있는가”를 기준으로 판단하세요

납품받은 사이트를 볼 때, 첫 번째 질문은 “예쁜가?”가 아닙니다. “환자가 3번의 클릭으로 원하는 시술 정보에 도달할 수 있는가?”입니다. 이게 depth 설계가 잘 되었는지 판단하는 가장 간단한 기준입니다.

피부과 홈페이지 제작의 핵심은 화려함이 아닙니다. 환자가 “이 병원이 내 피부 문제를 해결해줄 수 있겠다”고 확신하게 만드는 정보 구조입니다. 그 구조는 카테고리 설계, depth 설계, 사용자 플로우 설계에서 시작됩니다.

홈페이지 구조 설계와 정보 아키텍처에 대해 더 궁금하시다면 Nielsen Norman Group의 정보 아키텍처 가이드가 좋은 출발점입니다.