피그마 피디아
home
피그마 실무Q&A
home

배리어프리 디자인, 디자이너가 고려할 수 있는 것은?

글 작성일
2025/06/07
링크
질문 카테고리
데일리콘텐츠
1 more property

개념

물리적, 제도적, 심리적 장벽(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에서 시간 제한을 둘 경우,
시간 연장 기능 또는 경고 제공 필수
사용자가 준비할 수 있는 여유 필요