피부과 홈페이지 1차 메뉴, 고민을 먼저 보여줄까요 시술명을 먼저 보여줄까요?
피부과 홈페이지 개편 때 자주 막히는 지점은 상단 메뉴입니다. ‘기미·여드름·모공’처럼 환자의 고민을 먼저 보여줄지, ‘울쎄라·피코토닝·리쥬란’처럼 시술명을 먼저 보여줄지 결정해야 하기 때문입니다. 이 선택은 단순 취향이 아니라 방문자가 어떤 언어로 병원을 찾는지에 따라 달라집니다. 다만 일반 UX 원칙이 특정 병원의 전환 개선을 보장하지는 않으므로, 원칙을 기준으로 구조를 만들고 실제 유입어와 탐색 데이터를 확인하는 방식으로 판단해야 합니다.
결정 기준은 ‘무엇을 팔고 싶은가’보다 ‘무엇을 알고 들어왔는가’입니다
상단 메뉴는 병원이 보유한 시술 목록을 정리하는 공간이기도 하지만, 방문자에게는 다음 클릭을 고르는 안내판입니다. NN/g는 내비게이션 항목이 사용자의 주제나 과업과 맞아야 탐색 단서가 생긴다고 설명합니다. 피부과에서는 이 원칙을 ‘방문자가 고민을 들고 왔는지, 시술명을 들고 왔는지’로 나눠 적용할 수 있습니다.
예를 들어 ‘기미가 심해졌다’는 방문자는 피코토닝, IPL, 미백 관리의 차이를 아직 모를 수 있습니다. 반대로 ‘울쎄라 가격’을 검색하고 들어온 방문자는 ‘탄력·리프팅’ 메뉴만 보이면 원하는 시술 페이지를 한 번 더 찾아야 합니다. 두 출발점이 섞여 있다면 한쪽 언어만 1차 메뉴로 고정하는 것은 위험합니다.
피스박스의 실무 제안은 신규 상담 유입을 넓게 받아야 하는 홈페이지에서는 ‘고민별 진료’를 먼저 보이고, 시술명은 상단 보조 메뉴나 첫 화면 카드로 별도 제공하는 방식입니다. 이미 특정 장비명으로 유입되는 랜딩페이지라면 반대로 시술명 노출을 더 앞당기되, 고민별 경로는 남겨두는 편이 판단하기 쉽습니다.
근거 자료: Avoid Format-Based Primary Navigation - NN/G
피부과 상단 메뉴 재구성 예시
구성 예시입니다. 실제 고객 사례나 성과가 아니라, 고민 중심 1차 메뉴와 시술명 바로가기를 함께 쓰는 화면 설계 예시입니다.
수정 전 메뉴명 | 수정 후 메뉴명 | 연결할 페이지 |
|---|---|---|
레이저센터 | 기미·잡티 | 색소 고민 허브와 피코토닝·IPL 상세 |
리프팅센터 | 탄력·처짐 | 리프팅 고민 허브와 울쎄라·써마지 상세 |
스킨부스터 | 피부결·건조 | 피부결 고민 허브와 리쥬란·쥬베룩 상세 |
장비소개 | 대표 시술 바로가기 | 울쎄라·피코토닝·브이빔 개별 페이지 |
이벤트 | 비용·예약 안내 | 진료 과목별 비용 안내와 상담 예약 |
1차 메뉴는 고민 중심이 유리한 조건이 있습니다
고민 중심 메뉴가 맞는 경우는 방문자가 진료 범주를 아직 정하지 못한 상황입니다. ‘여드름 흉터’, ‘모공’, ‘홍조’, ‘기미·잡티’처럼 증상이나 목적 단어로 검색광고, 블로그, 지역 검색 유입이 들어온다면 1차 메뉴에서도 같은 언어를 유지하는 편이 연결이 자연스럽습니다. 여기서 자연스럽다는 말은 미감이 아니라 방문자가 사용한 표현과 메뉴 라벨의 일치도를 뜻합니다.
시술 종류가 많을수록 고민 중심 메뉴의 필요성은 커집니다. ‘레이저’, ‘스킨부스터’, ‘리프팅’ 같은 분류는 병원 내부에서는 관리하기 쉽지만, 처음 방문한 사람에게는 자기 문제가 어느 묶음에 속하는지 불명확할 수 있습니다. 이때 ‘기미·잡티’ 페이지 안에서 가능한 시술을 비교해 주면 탐색의 첫 단계를 줄일 수 있습니다.
다만 고민 메뉴가 모든 병원에 자동 정답은 아닙니다. 병원의 유입어 대부분이 장비명·시술명이고, 광고 소재도 ‘써마지’, ‘리쥬란’처럼 구체적인 이름으로 운영된다면 1차 메뉴나 첫 화면에서 해당 시술명을 바로 보여줘야 합니다. 이 경우에도 ‘고민별’ 메뉴를 없애기보다, 비교 검토 전 단계의 방문자를 위한 보조 경로로 두는 것을 권합니다.
근거 자료: Avoid Format-Based Primary Navigation - NN/G · Menu Structure | Web Accessibility Initiative (WAI) | W3C
시술명은 숨기지 말고 같은 페이지로 가는 두 번째 길을 만듭니다
W3C WCAG의 ‘Multiple Ways’ 원칙은 사이트 안의 페이지를 찾는 방법을 하나로 제한하지 말고 둘 이상의 경로를 제공하는 방향을 설명합니다. 이를 피부과 홈페이지에 적용하면 ‘기미·잡티’ 메뉴와 ‘피코토닝’ 바로가기가 같은 상세 콘텐츠 또는 서로 연결된 콘텐츠로 이어지게 설계할 수 있습니다.
예를 들어 ‘기미·잡티’ 고민 페이지에는 고민 설명, 감별이 필요한 경우, 관련 시술 목록, 상담 전 확인사항을 배치합니다. 동시에 ‘피코토닝’ 시술 페이지에는 적용 가능한 고민, 시술 절차와 유의사항 안내, 함께 비교할 시술을 연결합니다. 이렇게 하면 고민으로 들어온 방문자와 시술명으로 들어온 방문자가 서로의 정보로 이동할 수 있습니다.
실무에서는 상단 1차 메뉴를 ‘고민별 진료, 시술별 보기, 의료진, 비용·이벤트, 오시는 길’처럼 단순한 묶음으로 정리하고, 메인 첫 화면 또는 고정 영역에 대표 시술명 바로가기를 둘 수 있습니다. 단, 바로가기 개수는 병원이 지속적으로 관리할 수 있는 범위로 제한해야 합니다. 너무 많은 이름을 나열하면 빠른 탐색이 아니라 또 다른 목록 부담이 됩니다.
근거 자료: Understanding Success Criterion 2.4.5: Multiple Ways | WAI | W3C
메뉴 라벨은 짧되, 내부자 분류만으로 끝내지 않습니다
W3C의 메뉴 구조 가이드는 메뉴 라벨이 짧고 구분 가능하며 설명적이어야 한다고 봅니다. 피부과에서 ‘레이저’만 단독으로 쓰면 넓은 범주의 장비인지, 색소 치료인지, 제모인지 알기 어렵습니다. ‘색소·기미 레이저’, ‘홍조·혈관 레이저’처럼 사용자가 구분할 단서를 주는 편이 메뉴 선택에 도움이 됩니다.
라벨을 정할 때는 병원 내부 카테고리와 방문자 언어를 따로 표로 나눠 보는 것이 좋습니다. 내부 분류가 ‘스킨부스터’라면 방문자 언어는 ‘피부결·건조’, ‘잔주름’, ‘광채’일 수 있습니다. 다만 이런 연결은 의학적 적합성을 단정하는 문구가 아니라, 관련 상담 주제로 연결하는 수준으로 표현해야 합니다.
좋은 라벨인지 확인하는 간단한 방법은 비전문가에게 메뉴만 보여주고 원하는 페이지를 고르게 하는 것입니다. ‘모공이 고민이면 어디를 누를지’, ‘울쎄라를 찾으면 어디로 갈지’를 물어보면 혼동되는 항목이 드러납니다. 이 확인은 정량 테스트가 아니어도 개편 전 오류를 줄이는 데 쓸 수 있습니다.
근거 자료: Menu Structure | Web Accessibility Initiative (WAI) | W3C
메뉴만 바꾸지 말고 예약 전 필수 정보와 연결합니다
Google의 로컬 비즈니스 구조화 데이터 문서는 주소, 영업시간, 연락처처럼 이용자가 방문 전 확인하는 정보를 구조화 데이터로 표시할 수 있음을 설명합니다. 이 자료가 메뉴 우선순위를 정해 주는 것은 아니지만, 병원 홈페이지가 홍보 문구만이 아니라 실제 이용 정보의 출발점이어야 한다는 점을 점검하는 데 참고할 수 있습니다.
따라서 고민 페이지든 시술명 페이지든 마지막 경로는 상담 예약, 위치, 진료시간, 비용 안내 범위, 주의사항으로 이어져야 합니다. ‘기미·잡티’ 메뉴에서 콘텐츠를 읽은 뒤 예약 버튼을 찾기 어렵거나, ‘울쎄라’ 페이지에서 지점·시간 정보를 다시 찾아야 한다면 메뉴 구조의 장점이 약해집니다.
개편 후에는 유입 검색어, 상단 메뉴 클릭, 사이트 내 검색어, 예약 버튼 도달 페이지를 함께 봐야 합니다. 고민 메뉴 클릭은 많은데 예약 도달이 낮다면 페이지 안의 시술 연결이나 CTA가 약할 수 있습니다. 반대로 시술명 바로가기 클릭이 많다면 상단 메뉴에도 해당 시술 묶음을 더 명확히 노출할 근거가 됩니다.
실무 점검 체크리스트
분석 대상 기간을 정해 유입 검색어를 고민 키워드와 시술명 키워드로 나눠 비중을 확인했습니다.
상단 1차 메뉴에 고민별 경로와 시술별 경로가 모두 존재하는지 확인했습니다.
대표 고민 페이지에서 관련 시술명 페이지로 이동하는 내부 링크를 배치했습니다.
대표 시술명 페이지에서 적용 가능한 고민과 비교할 시술로 이동할 수 있게 연결했습니다.
비전문가에게 메뉴명만 보여주고 원하는 페이지를 고르게 해 혼동 항목을 기록했습니다.
예약, 진료시간, 오시는 길 같은 이용 정보가 고민·시술 페이지에서 쉽게 확인되는지 점검했습니다.
Q1.치과 홈페이지에도 같은 원칙을 적용할 수 있나요?
적용할 수 있습니다. 예를 들어 ‘임플란트’처럼 시술명을 아는 방문자와 ‘이가 흔들림’, ‘앞니 깨짐’처럼 문제를 먼저 인식한 방문자가 섞입니다. 다만 진료 과목별 법적 표현과 의료광고 기준은 별도로 확인해야 합니다.
Q2.시술명이 너무 많으면 바로가기를 몇 개까지 보여줘야 하나요?
출처에서 정한 고정 숫자는 없습니다. 광고 중인 시술, 검색 유입이 있는 시술, 병원이 실제로 상담을 강화하려는 시술을 우선 선정하고 나머지는 ‘시술별 보기’ 목록에서 찾게 하는 편이 정리하기 쉽습니다.
Q3.고민 페이지와 시술 페이지의 내용이 겹치면 중복으로 봐야 하나요?
역할을 나누면 중복 부담을 줄일 수 있습니다. 고민 페이지는 증상, 가능한 선택지, 상담 전 확인사항을 다루고, 시술 페이지는 절차, 대상, 주의사항, 관련 고민으로 연결하는 방식이 적합합니다.
참고 자료와 적용 범위
Avoid Format-Based Primary Navigation - NN/G — 상위 내비게이션은 사용자의 과업과 맞는 단서를 제공해야 탐색이 쉬워진다는 원칙을 확인했습니다.
Understanding Success Criterion 2.4.5: Multiple Ways | WAI | W3C — 같은 콘텐츠에 도달하는 방법을 하나로 제한하지 않고 여러 경로를 제공하는 접근성 원칙을 확인했습니다.
Menu Structure | Web Accessibility Initiative (WAI) | W3C — 메뉴 라벨은 짧으면서도 구분 가능하고 설명적이어야 한다는 원칙을 확인했습니다.
Local Business (LocalBusiness) Structured Data | Google Search Central | Documentation | Google for Developers — 로컬 비즈니스가 주소, 영업시간, 연락처 등 이용 정보를 구조화 데이터로 표시할 수 있다는 점을 확인했습니다.
위 자료의 일반 원칙을 병원 홈페이지 운영에 적용한 피스박스의 제안입니다. 구성 예시는 실제 고객 사례나 성과를 뜻하지 않으며, 홈페이지의 검색 노출이나 상담 결과를 보장하지 않습니다.