개념
물리적, 제도적, 심리적 장벽(Barrier)를 제거해 사회적 약자도 자립적이고 평등하게 사회에 참여할 수 있도록 하는 환경 설계 원칙
배리어프리 디자인 적용예시
영역 | 적용 사례 |
건축·도시 | 휠체어 접근 가능한 경사로, 점자블록, 자동문, 엘리베이터 |
교통 | 저상버스, 음성안내 시스템, 장애인용 택시 |
제품디자인 | 큰 글씨의 리모컨, 촉각 표시가 있는 가전기기 |
웹/정보접근 | 스크린리더 지원 웹사이트, 색약자를 고려한 색상 사용 |
문화·관광 | 수어 통역 서비스, 자막 제공, 접근 가능한 박물관 |
관련 개념 비교
배리어프리는 유니버설 디자인의 하위 또는 보완적 개념으로 간주되기도 합니다
개념 | 설명 |
유니버설 디자인 | 처음부터 모든 사람을 위한 디자인. 예방적 접근 |
배리어프리 디자인 | 기존의 장애 요소를 제거하는 방식. 보완적 접근 |
접근성(accessibility) | 특정 집단(예: 장애인)을 위한 접근 가능성 확보 중심 |
배리어프리 디자인의 필요성
필요 요인 | 상세 설명 |
① 사용자 다양성 대응 | 시각장애, 청각장애, 인지장애, 노인 사용자 등 다양한 요구를 반영해야 함 |
② 법적 의무 강화 | 「장애인차별금지법」, 「웹접근성 지침(KWCAG 2.1)」 등으로 준수 의무 발생 |
③ UX 품질 향상 | 누구나 편하게 사용 가능하면, 전반적인 사용자 만족도 및 이탈률 개선 가능 |
④ 기업 이미지·책임성 강화 | 포용적 디자인은 브랜드 신뢰도와 사회적 책임(CSR)을 높이는 요소 |
⑤ 글로벌 표준 부합 | W3C의 WCAG(Web Content Accessibility Guidelines)는 국제적으로 사실상 표준 |
배리어프리 디자인에 기대할 수 있는 효과
•
사회적 통합 촉진: 모두가 함께 사용하는 공간을 지향
•
고령화 사회 대비: 노인 인구 증가에 따른 보편적 디자인 수요 증가
•
경제적 효과: 더 넓은 사용자층 확보, 브랜드 이미지 제고
•
법적 대응: 무장애 기준 미충족 시 인허가 거부 또는 제재 가능 [법령 기준]
결론
배리어프리 디자인은 단순한 시각적 스타일링이나 인터페이스 설계가 아닌, 디지털 격차 해소와 사용자 평등 실현을 위한 통합적 디지털 인프라 설계 철학
대한민국을 포함한 디지털 선진국에서는 고령화, 장애인의 온라인 참여 확대와 함께, 그 중요성이 지속적으로 증가하고 있다
•
법적 의무 충족
•
사용자 경험 향상
•
글로벌 경쟁력 확보
•
사회적 책임 이행
웹∙앱 디자인에서의 배리어프리 디자인
웹/앱 디자인에서의 배리어프리 디자인은 단순히 ‘소수의 사용자를 위한 기능 추가’가 아니라 모든사용자의 다양성과 능력을 수용하고, 법적·윤리적 기준을 충족하는 핵심 전략
핵심 원칙: 대한민국 웹 접근성 지침(KWCAG 2.1)의 4대 원칙
대한민국에서는 공공기관, 공공적 민간기관(학교,병원,금융사 등)에 웹접근성이 의무적으로 적용됩니다
원칙 | 의미 |
P - Perceivable(지각 가능) | 모든 사용자가 정보를 인식할 수 있어야 함 |
O - Operable(조작 가능) | 다양한 방식으로 조작이 가능해야 함 |
U - Understandable(이해 가능) | 사용자에게 이해 쉬운 방식으로 제공 |
R - Robust(견고함) | 다양한 기기에서 호환성 유지 |
사용자 유형별 적용 예시
사용자군 | 제약 특성 | 웹/앱 적용 사례 |
전맹/저시력자 | 시각 정보 인식 불가 또는 제한 | 스크린리더 대응 (ARIA), 이미지 대체 텍스트, 명도 대비 준수 |
색약 사용자 | 색상 구분 어려움 | 색상에 의존하지 않는 정보 표현 (예: 색+패턴 병행) |
청각장애인 | 음성 정보 인식 불가 | 동영상 자막, 음성 알림의 시각 대체 (토스트 메시지 등) |
지체장애인 | 마우스 사용 제한, 손떨림 등 | 키보드 내비게이션, 버튼 크기 확대, 터치 오류 허용 |
인지장애인 | 복잡한 정보 처리 어려움 | 쉬운 언어, 간단한 문장 구조, 일관된 UI 흐름 |
고령자 | 시력/청력/인지/운동 능력 저하 | 큰 글씨, 고대비, 단순화된 메뉴 구조 |
외국인/이주민 | 언어∙문화 장벽 | 다국어 UI, 쉬운 단어 사용, 시각 중심 내비게이션 |
저사양 기기 사용자 | 네트워크/기기 성능 제약 | 경량 콘텐츠, 이미지 지연 로딩, HTML 우선 구조 |
임시적 제약 사용자 | 한 손 사용, 밝은 환경 등 | 음성 조작, 한 손 터치 UI, 반응형 디자인 |
멀티태스킹 사용자 | 운전 중, 아이 돌보는 중 등 | 최소 입력, 명확한 상태 피드백, 자동완성 기능 |
분야별 적용 예시
분야 | 배리어프리 적용 내용 | |
공공행정 | 정부24, 국민신문고, 지자체 홈페이지 | 스크린리더 지원, 키보드 내비게이션, 자막 제공, 명확한 UI 흐름 |
교육 | e학습터, K-MOOC, 디지털교과서 | 대체텍스트, 자막/수어 영상, 학습 경로 단순화, 쉬운 언어 |
금융 | KB스타뱅킹, 토스, NH올원뱅크 | 고대비 모드, 음성 안내, 키보드 접근성, 큰 글씨 |
의료/복지 | 복지로, 국민건강보험공단, 병원 예약앱 | 시각 중심 내비게이션, 음성 입력, 정보 요약/단순화 |
전자상거래 | 쿠팡, 11번가, 배달의민족 | 이미지 대체텍스트, 명확한 버튼 레이블, 키보드 접근성 |
교통/지도 | 카카오T, T맵, 서울교통공사 | 실시간 정보의 시각+음성 제공, 큰 아이콘, 터치 확대 |
문화/미디어 | 국립중앙박물관, 넷플릭스, 유튜브 | 자막, 오디오 설명, 대체 텍스트, 명도 조절 옵션 |
고용/채용 | 워크넷, 잡코리아, 공공기관 채용 사이트 | 단순한 이력서 UI, 음성 지원, 입력 실수 방지 구조 |
법률/민원 | 전자소송 시스템, 민원24, 법률상담포털 | 키보드 입력 중심 구조, 읽기 쉬운 용어, 명확한 경고 메시지 |
법적 접근성 인증 의무 대상
웹∙앱 디자인에서의 배리어프리 디자인 구현하기
구현 항목별 내용
항목 | 구현 방법 |
텍스트 | - 가독성 높은 크기(기본 16px 이상)- 색상 대비비 ≥ 4.5:1- 글꼴은 고딕/명조 등 시스템폰트 우선 |
이미지 | - 의미 있는 이미지엔 alt 속성 반드시 포함- 데코 이미지에는 alt="" |
버튼/링크 | - aria-label 사용해 명확한 설명 제공- 아이콘만 있는 경우에도 대체 설명 필수 |
영상/오디오 | - 자막(track 태그) 필수- 음성해설/스크립트 제공- 자동 재생 금지 |
입력 폼 | - <label>과 input 연결- 필수항목은 aria-required="true"- 오류 시 해결방법 안내 |
모바일 대응 | - 터치영역 44px 이상- 반응형 설계- 한 손 조작 고려된 UI 배치 |
내비게이션 | - “본문 바로가기” 스킵링크 제공- Tab 순서 논리적 구성- 반복 영역 건너뛰기 기능 |
기술적 적용 요소
항목 | 적용 예시 |
HTML 구조 | <header>, <main>, <nav>, <footer> 등 시맨틱 태그 사용 |
ARIA 속성 | aria-label, aria-describedby, role, aria-live 등 |
키보드 조작 | Tab, Enter, Esc, Arrow key 등으로 전 기능 조작 가능하게 |
스크린리더 | NVDA, VoiceOver 등으로 테스트 필수 |
점검 도구 추천
도구 | 특징 |
WA Checker (NIA) | 국내 웹접근성 자동 검사 도구 |
WAVE (WebAIM) | 시각적 피드백 포함된 WCAG 검사기 |
axe DevTools | 크롬 확장, 실시간 오류 탐지 |
NVDA / VoiceOver | 스크린리더 테스트용 |
Color Oracle | 색약·색맹 사용자 시뮬레이션 |
디자이너가 고려해야 할 배리어프리 디자인 요소
1.색상 및 대비
1-1.명도대비
구분 | 일반 텍스트 | 큰 텍스트 |
크기 기준 | 14pt(약 18px) 이하 텍스트 | 18pt(24px) 이상 또는
14pt(약 18px) 이상 굵은 글꼴 |
최소 명도 대비 비율 | 4.5 : 1 | 3.0 : 1 |
설명
1-2.색상만으로 정보 전달 금지
중요한 정보를 빨간색으로 표시하고, 선택 가능한 옵션은 초록색으로 표시할게요.
이 내용은 중요해요.
이 내용은 선택이 가능해요.
중요한 내용에 아이콘과 색상, 텍스트를 같이 써줄거예요.
이 내용은 중요해요.
이 내용은 선택이 가능해요.•
색각 이상자도 정보를 인식할 수 있도록 색상 외에도 텍스트, 아이콘, 밑줄 등 보조 요소 사용 필수
•
색각 이상자, 흑백 화면 사용자, 기술적 한계가 있는 기기 사용자도 정보를 인식할 수 있어야 함
설명
2.텍스트 가독성
2-1.폰트 크기 및 단위
구분 | 본문 텍스트 | 보조 텍스트 |
크기 기준 | 최소 16px 이상 | 최소 14px 이상 권장 |
rem, em 같은 상대적 단위 사용을 권장, 확대 및 축소 시 유연한 반응성을 확보할 수 있어요
2-2.줄 간격
줄간격은 1.5배 정도를 확보해주세요. 줄간격은 너무 넓거나 좁으면 가독성이 떨어져요
구분 | 본문 | 제목 |
줄간격 | 1.5~1.8배 | 1.2~1.4배
제목이 너무 길 경우에는 본문처럼 크게 사용합니다 |
줄간격 1.5배는 필수가 아니예요영어는 한글보다 자간, 행간이 기본적으로 넓은 편이기 때문에 같은 폰트, 같은 수치여도 간격이 더 넓어보일 수 있어요
실제 디자인에서는 언어별, 폰트별로 줄간격 조정이 필요할 수 있어요
2-3.폰트 선택
가독성이 좋은 산세리프체 권장, 폰트별 대응 가능한 언어를 확인해보고 선정하면 좋아요
자주 쓰는 폰트 별 특징폰트명 | 특징 |
Pretendard | 균형있는 한/영 지원 폰트, 가독성이 우수함, 최근 가장 많이 사용된 폰트 |
Noto Sans Kr | 다국어 지원, 시각적 일관성, 글로벌 표준 폰트 |
Gothic A1 | 한글 중심, 단정하고 깔끔한 느낌 |
Spoqa Han Sans Neo | 작은 텍스트 UI에 최적화 (모바일) |
Roboto | 안드로이드 시스템 기본, 숫자와 영어 중심 사용 |
작업 유형별 폰트 추천작업 유형 | 요구 사항 | 추천폰트 (1순위) | 추천폰트 (2순위) |
웹/앱 UI 디자인 | 가독성, UI요소 대응, 균형감 | Pretendard | Spoqa Han Sans Neo |
글로벌 서비스 | 다국어 대응, 시각적 일관성 | Noto Sans | Roboto |
본문 콘텐츠 중심 웹사이트 | 장시간 읽어도 피로하지 않은 가독성 | Gothic A1 | Nanum Gothic |
모바일 앱 : 안드로이드 | 시스템 연동 | Roboto, Nanum Gothic | |
모바일 앱 : iOS | iOS 기본 폰트, 시인성 | Apple SD Gothic Neo | |
데이터 시각화/숫자 강조 UI | 숫자 자폭의 균일함, 정렬 정확도 | Roboto Mono | Freesentation |
2-4.정렬
기본 좌측 정렬 권장, 양쪽 정렬은 단어 간격이 부균등해 가독성이 저하될 수 있음
2-5.텍스트 확대 대응
최소 200% 확대 시 레이아웃 유지
확대해도 콘텐츠 잘림, 가려짐, 겹침 없어야함
3.구조 및 내용
3-1. 시멘틱 구조 태그
항목 | 설명 |
정의 | HTML5에서 제공하는 의미 기반 태그(Semantic Tags)를 사용해 콘텐츠의 논리적 구조를 명확히 표현해요
<h1>~<h6>, <nav>, <main>, <section> 등 의미 기반 태그 사용 |
목적 | 스크린 리더 사용자가 콘텐츠 구조를 파악할 수 있도록 함
검색 엔진이 콘텐츠를 정확히 색인하도록 지원
코드 유지보수성 및 일관된 접근성 향상 |
핵심 기능 | 콘텐츠 의미도 전달하고, 보조 기술도 지원함 |
배리어프리 디자인에서 시맨틱 태그가 중요한 이유는?측면 | 설명 |
스크린 리더 | 시멘틱 태그로 콘텐츠 구역 정확히 탐색
ex) 메인 콘텐츠로 이동 |
키보드 네비게이션 | 시멘틱 구조가 명확해야 Tab 키로 구간별 이동 가능 |
검색엔진 최적화(SEO) | 시멘틱 구조는 콘텐츠 분석 정확도를 높여 검색 노출을 향상 |
코드 재사용성 및 유지보수 | 구조화 된 HTML은 유지보수와 협업에 유리함 |
디자이너가 협업을 위해 고려할 점•
정보구조를 시멘틱 블록 기준으로 설계하기
•
각 영역이 무엇을 의미하는지 명확히 라벨링
3-2. 이미지 및 대체 텍스트(alt)
항목 | 설명 |
정의 | img 요소에 alt속성을 포함해 이미지가 제공하는 정보나 기능을 대체하는 설명텍스트를 제공하는것 |
목적 | 시각장애인, 텍스트 브라우저 사용자 등 이미지를 인식할 수 없는 사용자를 위한 정보 전달 수단 확보 |
적용 대상 | 웹사이트/앱 내 모든 비텍스트 콘텐츠 (이미지, 아이콘, 그래프, 버튼 등) |
alt 텍스트 필요여부이미지 유형 | alt 필요여부 | 설명 |
정보 전달 이미지 | 필요 | 콘텐츠에 대한 설명이나 의미가 포함된 이미지
차트, 인포그래픽 등 |
기능성 이미지 | 필요 | 버튼, 링크 아이콘 등 기능 수행 요소
찾아보기 버튼에 alt=”찾아보기” |
장식용 이미지 | 생략 가능 | 단순한 배경 패턴, 장식용 이미지 |
텍스트 이미지 | 필요 | 이미지에 포함된 텍스트는 alt값으로 동일하게 제공 |
3-3. 링크 및 버튼 명확화
항목 | 설명 |
정의 | 링크(a)와 버튼(button)의 역할, 목적, 상태, 위치 등을 사용자에게 명확하게 전달하도록 구성하는 것 |
목적 | 시각적 구분뿐 아니라 스크린리더/보조기기 사용자도 명확히 기능을 파악 가능하게 함
키보드 및 음성 기반 탐색 사용자를 위한 정확한 내비게이션 제공 |
적용 대상 | 모든 링크, 버튼, 터치 조작 요소 |
핵심 고려사항요소 | 설명 |
링크나 버튼의 텍스트가 구체적이어야해요 | 여기를 클릭하세요, 더보기 →
보고서 다운로드, 상품 상세 보기 → |
역할이 명확히 구분되어야 해요 | <a>는 이동 목적, <button>은 기능 수행 목적으로 구분 |
동일 텍스트를 반복하지 않아요 | 한 페이지 안에 ‘더보기’ 버튼이 여러개 →
영상 더보기, 정보 더보기 → |
스크린리더 대응 대체 텍스트를 제공 | 이미지, 아이콘, 그래픽 요소에는 의미를 담은 alt 텍스트 또는 aria-label을 제공 |
비주얼만 있는 요소는 사용 지양 | 텍스트 없는 아이콘이나 이미지 버튼은 피하고, 반드시 설명 문구나 대체 텍스트를 함께 제공해야 해요. |
3-4. 키보드 접근성
모든 기능은 탭(Tab), 방향키, Enter 등 키보드만으로 사용 가능해야함
3-5. 포커스 시각화
키보드 초점 도달 시 시각적으로 선명한 테두리, 색상 등의 포커스 효과를 제공해야해요
4. 인터랙션 및 동작
4-1. 모션 및 애니메이션 제어
빠른 깜빡임, 플래시, 움직임은 지양해요
4-2. 시간 제한 대응
로그인, 입력 시간 등 UI에서 시간 제한을 둘 경우,
시간 연장 기능 또는 경고 제공 필수
사용자가 준비할 수 있는 여유 필요