병원 홈페이지 이미지 대체 설명, 사진 묘사로 쓸까요 페이지 역할부터 나눌까요?

병원 홈페이지를 개편하거나 게시글을 등록할 때 이미지 alt 값을 한꺼번에 입력하는 경우가 많습니다. 이때 ‘깨끗한 병원 로비 사진’, ‘의사 사진’, ‘전화 아이콘’처럼 보이는 대로 쓰면 접근성 점검에서는 부족할 수 있습니다. 같은 의료진 사진이라도 프로필 카드에서는 식별 정보가 필요하고, 분위기용 배경에서는 빈 대체 텍스트가 맞을 수 있습니다. 핵심은 이미지의 모양이 아니라 그 이미지가 없을 때 사용자가 놓치는 정보와 기능을 확인하는 것입니다.

먼저 사진 묘사가 아니라 이미지의 역할을 분류합니다

답은 역할 분류부터 하는 것입니다. 병원 홈페이지의 모든 이미지에 자세한 묘사를 붙이기보다, 정보 이미지·장식 이미지·기능 이미지·복잡한 이미지로 나누고 각 유형에 맞게 대체 설명을 정해야 합니다.

W3C WAI는 이미지 대체 텍스트를 이미지의 목적에 따라 결정하라고 안내합니다. 피스박스가 병원 사이트에 적용할 때는 ‘이 이미지가 사라져도 예약, 위치, 의료진 식별, 절차 이해에 문제가 없는가’를 첫 질문으로 삼는 편이 실무적입니다.

예를 들어 진료과 상단의 미소 짓는 인물 사진이 분위기용이라면 빈 대체 텍스트를 검토할 수 있습니다. 반대로 의료진 카드의 얼굴 사진이 이름, 진료 분야, 직함과 함께 식별 역할을 한다면 ‘피부과 김○○ 원장’처럼 사용자에게 필요한 정보를 담아야 합니다.

근거 자료: Images Tutorial | Web Accessibility Initiative (WAI) | W3C · Informative Images | Web Accessibility Initiative (WAI) | W3C

병원 홈페이지 이미지 alt 구성 예시

구성 예시입니다. 실제 병원 성과나 고객 사례가 아니라, 홈페이지 검수표에 넣을 수 있는 대체 설명 정리 방식입니다.

링크와 버튼 이미지는 생김새보다 실행 결과를 씁니다

전화기 모양, 말풍선 모양, 지도 핀 모양을 설명하는 것은 기능 이미지에는 충분하지 않습니다. 사용자가 이미지를 선택했을 때 무엇이 실행되는지가 대체 설명의 핵심입니다.

W3C WAI는 기능 이미지는 링크나 버튼의 기능을 설명해야 한다고 봅니다. 병원 홈페이지에서는 ‘대표전화 연결’, ‘카카오 상담 열기’, ‘진료 예약하기’, ‘오시는 길 보기’처럼 이동 목적이나 실행 결과를 쓰는 방식이 이 원칙에 가깝습니다.

단, 같은 전화 아이콘이라도 실제 전화 연결 버튼인지, 전화번호가 적힌 안내 영역의 장식인지에 따라 처리가 달라집니다. 개발 화면에서 링크가 걸린 이미지인지, 텍스트 링크가 별도로 있는지 확인한 뒤 중복 읽힘을 줄여야 합니다.

근거 자료: Images Tutorial | Web Accessibility Initiative (WAI) | W3C

배너와 이미지 속 문자는 alt만으로 해결하지 않습니다

이벤트 배너, 휴진 안내, 건강검진 안내처럼 이미지 안에 중요한 문자가 들어가면 그 내용은 대체 설명이나 본문 텍스트로 제공해야 합니다. W3C의 H37 기법은 이미지 속 단어가 같은 기능을 하려면 대체 텍스트에 포함되어야 한다고 설명합니다.

다만 기간, 대상, 문의처, 유의사항이 많은 배너를 alt에 모두 넣으면 길고 불편한 문장이 됩니다. 이 경우 alt에는 ‘설 연휴 휴진 안내’처럼 핵심을 짧게 쓰고, 상세 날짜와 예약 안내는 HTML 본문이나 표로 따로 제공하는 편이 점검하기 쉽습니다.

병원 마케팅 담당자는 배너 디자인 요청서에 ‘이미지로만 들어가는 필수 정보’를 따로 표시해 두면 좋습니다. 원고 단계에서 텍스트 영역으로 남길 정보와 이미지에만 들어가도 되는 장식 문구를 구분해야 수정 비용을 줄일 수 있습니다.

근거 자료: H37: Using alt attributes on img elements | WAI | W3C

지도, 절차도, 인포그래픽은 짧은 alt와 상세 텍스트를 분리합니다

오시는 길 지도, 진료 절차도, 검사 전 준비사항 인포그래픽은 정보량이 많습니다. 이런 이미지는 alt에 모든 경로와 절차를 길게 넣기보다, 짧은 대체 설명과 별도 상세 설명을 함께 두는 구성이 적합합니다.

W3C WAI의 점검 자료도 복잡한 이미지에는 짧은 대체 텍스트와 상세 설명을 페이지 안이나 별도 위치에 제공하는 방식을 안내합니다. 병원 사이트에서는 ‘○○병원 위치 안내도’라고 쓰고, 주소·주차장 입구·대중교통·건물명은 본문에 텍스트로 정리하는 식입니다.

진료 절차도도 마찬가지입니다. ‘초진 접수부터 수납까지의 진료 절차’라는 alt만으로는 각 단계의 준비물이 전달되지 않습니다. 접수, 문진표, 진료, 검사, 수납, 다음 예약을 목록으로 풀어야 화면낭독기 사용자와 모바일 사용자가 같은 정보를 확인할 수 있습니다.

근거 자료: [Draft] Image Alternative Text - Easy Checks | Web Accessibility Initiative (WAI) | W3C

검수는 ‘빈 alt가 있는가’보다 ‘틀린 정보가 없는가’까지 봅니다

alt가 비어 있다는 사실만으로 오류라고 단정하면 안 됩니다. 장식 이미지라면 빈 대체 텍스트가 적절할 수 있습니다. 반대로 alt가 입력되어 있어도 ‘의사 사진’, ‘이미지’, ‘좋은 장비’처럼 목적을 대신하지 못하면 수정 대상입니다.

병원에서는 이미지 교체가 잦기 때문에 파일명, 캡션, alt, 본문 정보가 서로 달라지는 문제가 생길 수 있습니다. 장비명이나 의료진 직함이 바뀌었을 때 보이는 문구만 고치고 대체 설명을 남겨 두면 접근성뿐 아니라 콘텐츠 품질 관리에서도 혼선이 생깁니다.

검수 시에는 화면에 보이는 이미지 없이 페이지를 읽는다고 가정해 보십시오. 예약으로 이동할 수 있는지, 의료진을 구분할 수 있는지, 배너의 핵심 일정을 알 수 있는지, 지도 정보가 텍스트로 남아 있는지를 항목별로 확인하면 실무 판단이 쉬워집니다.

실무 점검 체크리스트

• 이미지를 정보·장식·기능·복잡한 이미지 중 하나로 분류했는지 확인합니다.

• 전화, 예약, 상담, 지도 아이콘은 모양이 아니라 실행 결과를 alt에 썼는지 확인합니다.

• 이미지 안에만 있는 기간, 대상, 문의처, 휴진일이 본문 텍스트로도 제공되는지 확인합니다.

• 지도와 절차도는 짧은 alt 외에 주소, 교통편, 단계별 설명을 별도로 두었는지 확인합니다.

• 의료진 직함, 장비명, 진료과명이 본문·캡션·alt에서 서로 다르지 않은지 확인합니다.

참고 자료와 적용 범위

Images Tutorial | Web Accessibility Initiative (WAI) | W3C — 이미지는 정보, 장식, 기능, 복잡한 이미지 등 목적에 따라 대체 텍스트 판단이 달라진다는 원칙을 확인했습니다.

Informative Images | Web Accessibility Initiative (WAI) | W3C — 정보 이미지는 보이는 모양보다 사용자가 알아야 할 의미와 내용을 전달해야 한다는 기준을 확인했습니다.

H37: Using alt attributes on img elements | WAI | W3C — 이미지 속 중요한 단어가 콘텐츠 이해에 필요할 때 대체 텍스트에 포함해야 한다는 원칙을 확인했습니다.

[Draft] Image Alternative Text - Easy Checks | Web Accessibility Initiative (WAI) | W3C — 복잡한 이미지는 짧은 대체 텍스트와 별도 상세 설명을 함께 제공해야 한다는 점검 방향을 확인했습니다.

위 자료의 일반 원칙을 병원 홈페이지 운영에 적용한 피스박스의 제안입니다. 구성 예시는 실제 고객 사례나 성과를 뜻하지 않으며, 홈페이지의 검색 노출이나 상담 결과를 보장하지 않습니다.