Figmapedia
목록으로 돌아가기
데일리콘텐츠

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

Haley🍓2025. 6. 7.

개념

물리적, 제도적, 심리적 장벽(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 : 13.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요소 대응, 균형감PretendardSpoqa Han Sans Neo
    글로벌 서비스다국어 대응, 시각적 일관성Noto SansRoboto
    본문 콘텐츠 중심 웹사이트장시간 읽어도 피로하지 않은 가독성Gothic A1Nanum Gothic
    모바일 앱 : 안드로이드시스템 연동Roboto, Nanum Gothic
    모바일 앱 : iOSiOS 기본 폰트, 시인성Apple SD Gothic Neo
    데이터 시각화/숫자 강조 UI숫자 자폭의 균일함, 정렬 정확도Roboto MonoFreesentation

    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에서 시간 제한을 둘 경우,

    시간 연장 기능 또는 경고 제공 필수

    사용자가 준비할 수 있는 여유 필요