병원 홈페이지 사진을 바꿀 때 설명문까지 함께 고쳐야 할까요?
병원 홈페이지를 개편할 때 사진은 새로 촬영했지만 설명문은 예전 문구를 그대로 두는 경우가 있습니다. 반대로 배너 문구는 바꿨는데 이미지 안의 글자나 대체 텍스트는 남아 있을 수도 있습니다. 이 글은 피부과·치과 홈페이지에서 의료진, 장비, 진료실, 배너, 오시는 길 이미지를 점검해야 하는 담당자를 기준으로 정리했습니다. 접근성·검색 문서의 일반 원칙을 병원 콘텐츠 작업에 적용하는 방법이며, 특정 병원의 상담 전환이나 검색 성과를 보장하는 기준은 아닙니다.
사진 교체 여부보다 먼저 사진의 역할을 정합니다
답은 ‘사진마다 다릅니다’. 의료진 프로필, 장비, 진료실처럼 정보를 전달하는 사진은 설명문과 대체 텍스트까지 함께 점검해야 합니다. 반면 분위기용 배경 이미지라면 화면 문구를 길게 붙이기보다 장식 이미지인지부터 판단하는 편이 맞습니다.
W3C WAI는 이미지의 목적에 따라 설명 방식이 달라진다고 안내합니다. 피스박스 기준으로는 병원 사진을 정보 사진, 장식 사진, 기능 사진, 텍스트 포함 이미지, 복잡한 이미지로 먼저 분류합니다. 이 분류가 없으면 모든 사진에 비슷한 설명을 붙이게 됩니다.
예를 들어 ‘상담실 사진’은 실제 상담 공간을 안내하려는 정보 사진일 수 있습니다. 하지만 메인 화면의 흐릿한 로비 배경이라면 장식 사진일 수 있습니다. 같은 병원 사진이라도 페이지 목적에 따라 점검 깊이가 달라집니다.
근거 자료: Images Tutorial | Web Accessibility Initiative (WAI) | W3C
장비·공간 사진 점검표 구성 예시
구성 예시입니다. 실제 병원명, 장비명, 의료진 정보, 진료 가능 여부는 내부 자료로 확인한 뒤 입력해야 합니다.
현재 사진·문구 | 수정할 설명 기준 | 연결할 텍스트 위치 |
|---|---|---|
장비 사진 아래 ‘정밀 진단 가능’ | 장비의 실제 용도와 검사 필요성은 진료 후 결정된다는 조건을 함께 표기 | 장비 소개 본문 |
상담실 사진 아래 ‘1:1 프라이빗 상담’ | 실제 공간이 상담실인지 확인하고, 운영 방식이 항상 1:1인지 내부 확인 후 작성 | 병원 둘러보기 |
휴진 안내 이미지에만 ‘10월 3일 휴진’ | 날짜, 사유, 예약 확인 방법을 본문 텍스트로 반복 제공 | 공지사항 |
전화 아이콘 이미지 버튼 alt ‘전화 그림’ | 이미지 모양이 아니라 기능 중심으로 ‘전화하기’로 수정 | 상단 고정 버튼 |
의료진 사진 alt ‘원장님’ | 성명과 프로필 사진임을 짧게 표기하고 담당 진료는 화면 설명문에서 별도 안내 | 의료진 소개 |
사진만, 설명문만, 함께 보기로 불일치를 찾습니다
첫 번째로 사진만 봅니다. 실제 병원 사진인지, 스톡 이미지인지, 사진 속 인물·공간·장비가 무엇인지 기록합니다. 환자가 사진만 보고 특정 검사나 시술이 항상 가능한 것처럼 이해할 여지가 있다면 주변 문구로 조건을 분명히 해야 합니다.
두 번째로 설명문만 읽습니다. 사진 없이도 의미가 통하는지, ‘통증 없음’, ‘완벽’, ‘최고’처럼 근거 확인이 필요한 단정 표현이 들어갔는지 봅니다. 의료 효과, 안전성, 만족도를 문장으로 약속하는 구조라면 내부 검토가 필요합니다.
세 번째로 사진과 설명문을 함께 봅니다. 장비 사진은 A인데 설명은 B 검사처럼 읽히는지, ‘1인 상담실’이라고 쓰였지만 사진은 대기 공간인지 확인합니다. Google 개발자 문서는 이미지 설명을 주변 맥락과 함께 보라고 안내하며, 병원에서는 이 원칙을 불일치 점검에 활용할 수 있습니다.
대체 텍스트와 화면 설명문을 같은 문장으로 쓰지 않습니다
대체 텍스트는 이미지를 볼 수 없는 상황에서 이미지의 목적을 전달하는 짧은 설명입니다. 화면 설명문은 방문자가 사진 아래나 옆에서 읽는 문장입니다. 두 항목을 같은 문장으로 복사하면 한쪽은 길고, 다른 한쪽은 부족해질 수 있습니다.
의료진 사진의 대체 텍스트는 ‘홍길동 원장 프로필 사진’처럼 맥락을 짧게 전달할 수 있습니다. 화면 설명문은 ‘홍길동 원장은 보존 치료 상담을 담당합니다’처럼 실제 담당 영역을 내부 자료로 확인한 뒤 써야 합니다. 자격, 전문분야, 경력은 추정하지 않습니다.
이미지 버튼은 모양보다 기능을 설명해야 합니다. 전화 아이콘이라면 ‘전화하기’, 예약 이미지 버튼이라면 ‘예약하기’처럼 연결 동작이 드러나야 합니다. 장식용 선, 배경 패턴, 의미 없는 아이콘은 빈 대체 텍스트 처리 대상인지 개발 담당자와 확인합니다.
근거 자료: Images Tutorial | Web Accessibility Initiative (WAI) | W3C · Diagrams, figures, and other images | Google developer documentation style guide | Google for Developers
이미지 안의 글자는 본문 텍스트로도 제공해야 합니다
진료시간, 휴진일, 비급여 안내, 이벤트 배너, 찾아오시는 길이 이미지에만 들어가 있으면 일부 사용자는 내용을 읽기 어렵고 검색 시스템도 문맥을 충분히 파악하기 어렵습니다. W3C와 Google 문서는 중요한 텍스트를 이미지로만 제공하지 않는 방향을 권합니다.
병원 홈페이지에서는 ‘10월 3일 휴진’ 배너를 올렸다면 본문이나 공지 영역에도 같은 핵심 정보를 텍스트로 적어야 합니다. 예를 들어 ‘2026년 10월 3일은 공휴일로 휴진합니다. 예약 일정 확인 시 참고해 주세요’처럼 날짜와 행동 정보를 분리해 씁니다.
단, 본문으로 옮긴다고 해서 홍보 문구를 늘릴 필요는 없습니다. 이벤트나 비용 정보는 의료광고, 내부 정책, 최신 고지와 맞아야 하므로 담당자가 원문 기준일과 적용 조건을 확인해야 합니다. 접근성 원칙은 형식을 돕지만 내용의 적법성까지 판단해 주지는 않습니다.
근거 자료: H37: Using alt attributes on img elements | WAI | W3C
모바일에서 사진과 문구의 거리를 다시 확인합니다
데스크톱에서는 사진 옆에 설명문이 붙어 있어도 모바일에서는 사진, 버튼, 문구 순서가 바뀔 수 있습니다. 장비 사진 아래에 다른 시술 설명이 먼저 나오거나, 휴진 배너와 예약 버튼이 붙어 오해를 만들 수 있는지 실제 화면에서 확인합니다.
Google Search Central은 이미지 주변 텍스트가 이미지와 페이지 맥락을 이해하는 데 도움이 된다고 설명합니다. 병원 적용에서는 ‘사진 근처에 이 사진을 왜 보여주는지’가 읽히는지 보는 기준으로 활용할 수 있습니다. 이는 검색 성과 보장이 아니라 문맥 정리의 기준입니다.
최종 점검은 페이지 단위로 남기는 것이 좋습니다. 메인, 의료진 소개, 진료과목, 장비 소개, 병원 둘러보기, 오시는 길, 공지사항 순으로 사진 목록을 만들고 역할, 대체 텍스트, 화면 설명문, 본문 반영 여부를 한 줄씩 기록합니다.
근거 자료: SEO Starter Guide: The Basics | Google Search Central | Documentation | Google for Developers
실무 점검 체크리스트
각 사진을 정보·장식·기능·텍스트 포함·복잡한 이미지 중 하나로 분류했는지 확인합니다.
사진 속 인물, 공간, 장비와 화면 설명문이 서로 다른 정보를 말하지 않는지 확인합니다.
대체 텍스트가 ‘사진’, ‘이미지1’이 아니라 해당 페이지에서의 목적을 짧게 설명하는지 확인합니다.
진료시간, 휴진, 비용, 이벤트, 위치 정보가 이미지뿐 아니라 본문 텍스트로도 제공되는지 확인합니다.
모바일 화면에서 사진과 설명문이 떨어지거나 순서가 바뀌어 오해가 생기지 않는지 확인합니다.
효과, 안전성, 순위, 만족도, 통증 여부를 근거 없이 단정한 표현이 없는지 확인합니다.
Q1.스톡 이미지를 쓰면 반드시 표시해야 하나요?
법적으로 반드시 표시해야 하는지 여부는 별도 검토가 필요합니다. 다만 실제 병원 공간이나 장비처럼 보이게 사용하면 오해가 생길 수 있으므로, 정보 사진으로 쓰기보다 분위기 보조 이미지로 제한하는 편이 안전합니다.
Q2.대체 텍스트에 병원명과 지역명을 넣어도 되나요?
이미지의 목적과 관련이 있으면 넣을 수 있지만, 모든 사진에 반복적으로 넣는 방식은 설명 품질을 떨어뜨릴 수 있습니다. 의료진, 건물 외관, 오시는 길처럼 맥락이 있는 경우에만 짧게 검토합니다.
Q3.이 점검은 블로그 이미지에도 적용해야 하나요?
적용할 수 있습니다. 특히 치료 과정 그림, 전후 설명 이미지, 비용·이벤트 배너처럼 이미지가 정보를 담고 있다면 본문 텍스트와 대체 설명을 함께 확인해야 합니다. 단순 썸네일은 목적에 따라 간소화할 수 있습니다.
참고 자료와 적용 범위
Images Tutorial | Web Accessibility Initiative (WAI) | W3C — 이미지는 목적에 따라 정보, 장식, 기능 등으로 나누어 설명 방식이 달라져야 함을 확인했습니다.
Diagrams, figures, and other images | Google developer documentation style guide | Google for Developers — 이미지 설명은 주변 맥락과 함께 고려하고 복잡한 이미지는 짧은 설명과 별도 본문 설명을 함께 제공해야 함을 확인했습니다.
H37: Using alt attributes on img elements | WAI | W3C — 콘텐츠 이해에 필요한 이미지 정보는 alt 속성으로 전달해야 하며 중요한 이미지 속 텍스트도 대체 정보가 필요함을 확인했습니다.
SEO Starter Guide: The Basics | Google Search Central | Documentation | Google for Developers — 이미지 주변 텍스트가 이미지와 페이지의 맥락 이해에 도움이 된다는 원칙을 확인했습니다.
위 자료의 일반 원칙을 병원 홈페이지 운영에 적용한 피스박스의 제안입니다. 구성 예시는 실제 고객 사례나 성과를 뜻하지 않으며, 홈페이지의 검색 노출이나 상담 결과를 보장하지 않습니다.