[웹 기초] UX / UI 그리고 웹접근성

 

 

안녕하세요, 김데이 입니다. 

 

UI(User Interface), UX(User Experience), 웹 접근성(Web Accessibility)은 모두 웹사이트나 앱을 설계할 때 중요한 개념입니다. 이름이 비슷하고 역할이 비슷한 개념이라 서로 헷갈리기 쉬운 개념인데요, 오늘은  각각의 정의, 특징, 예시, 그리고 차이점을 정리해 보겠습니다. 

 

[대표 사진] 웹 기초 UI / UX / 웹 접근성

 

 

---

 

 

 

1. UI (User Interface, 사용자 인터페이스)

"UI"란 "User Interface"의 줄임말로 사용자가 웹사이트, 앱, 소프트웨어를 사용할 때 직접 보고, 느끼는 화면의 디자인 및 요소를 말합니다. 깔끔한 디자인의 앱이나, 클릭 / 터치가 편한 버튼, 사용자가 보기 편하게 배색 된 배경과 폰트 색 등이 이러한 "사용자 인터페이스"의 대표적인 예시입니다. 

 

[주요 특징] 

• 버튼, 메뉴, 아이콘, 색상, 폰트, 애니메이션 등 시각적인 디자인
• 웹사이트나 앱의 외형(look)과 사용성(feel)을 결정
• 직관적인 UI는 사용자가 쉽게 이해하고 사용할 수 있음

 

웹사이트를 만들면서 버튼이 너무 작거나 알아보기 어렵고, 너무 많은 요소(광고, 팝업 등)로 인해 화면이 복잡해지거나, 텍스트와 배경색이 비슷해서 정보의 전달이 어려운 경우 UI가 좋지 않다고 말 할 수 있습니다. 

 

UI 이미지

 

 

 

 

 

2. UX (User Experience, 사용자 경험)

"UX"란 "User Experience"의 줄임말로 사용자가 웹사이트, 앱, 소프트웨어를 사용할 때 느끼는 경험 자체를 말합니다. 

 

앞서 설명 드린 "UI"의 예시 중에서 [클릭 / 터치가 편한 버튼]처럼 보여지는 것이 아닌 순수하게 사용하는 경험을 집중적으로 다루는 영역입니다. 따라서 버튼의 사용성 뿐만 아니라 간편한 회원가입(소셜 로그인 지원), 단계가 적은 결제 시스템 등이 대표적인 예가 되겠습니다. 

 

[주요 특징] 

• 사용자가 편리하고 쉽게 서비스를 이용할 수 있도록 설계
• 페이지 이동(네비게이션) 동선이 명확해야 함
• 로딩 속도, 사용자 만족도, 직관적인 인터페이스가 중요

 

사용자가 쇼핑몰에 접속하여 물건을 구매할 때 장바구니 버튼을 못 찾아서 구매 포기한다거나, 회원가입 절차가 너무 복잡해서 도중에 나가는 경우, 혹은 광고가 많아서 중요한 콘텐츠를 찾기 어려운 경우 (광고가 많아 복잡하게 "보이는것" = UI) 모두 UX가 좋지 않다고 말할 수 있습니다. 

 

UX 이미지

 

 

 

 

3. 웹 접근성 (Web Accessibility)

조금은 생소할 수 있는 "웹 접근성(Web Accessibility)"은 장애가 있는 사용자도 웹사이트를 불편 없이 사용할 수 있도록 설계하는 것으로, 세부적인 항목까지 모든 사용자가 불편함 없이 사용할 수 있도록 하는것이 주된 목표입니다. 

 

"웹 접근성"에 맞춰서 설계를 하게되면, 이미지를 볼 수 없는 시각 장애인을 위하여 스크린 리더로 읽을 수 있는 "대체 텍스트"를 추가 한다거나, 마우스를 사용하지 못하는 환경에서도 웹 사이트를 사용 할 수 있도록 키보드만을 사용하여 탐색할 수 있도록 설계 해야합니다.

 

[주요 특징]

• 시각 장애인을 위한 스크린 리더 지원 (대체 텍스트 제공)
• 키보드만으로도 웹사이트를 조작할 수 있도록 함
• 색약(색맹) 사용자를 위해 색 대비 고려
• 청각 장애인을 위한 자막 제공

 

앞서 UI에서 말했던 "배경색과 비슷한 텍스트 색으로 가독성이 떨어지는 것" 역시 웹 접근성이 좋지 않다고 볼 수 있겠습니다.

 

 

웹 접근성 이미지

 

 4. UI vs UX vs 웹 접근성 차이점

 

마지막으로 위에서 설명 드린 3가지 개념에 대해 서로 비교해 보도록 하겠습니다.

비교 항목	UI (사용자 인터페이스)	UX (사용자 경험)	웹 접근성 (Web Accessibility)
정의	사용자와 웹사이트 간의 시각적 인터페이스	사용자가 서비스를 이용할 때 느끼는 전체적인 경험	장애인, 노인 등 모든 사용자가 웹을 쉽게 이용할 수 있도록 설계
중점 요소	디자인, 버튼, 아이콘, 색상, 레이아웃	사용자의 편의성, 페이지 이동 동선, 만족도	시각/청각/운동 장애인을 위한 접근성 개선
주요 목표	보기 좋고, 사용하기 쉬운 디자인 (ex, 버튼 크기가 적절, 색상 조합이 좋음)	편리하고 직관적인 경험 제공 (ex, 회원가입이 쉬움, 원하는 정보를 쉽게 찾을 수 있음)	모든 사람이 불편 없이 사용할 수 있도록 보장 (ex, 이미지에 대체 텍스트가 있고, 키보드로 조작 가능)

 

 

1️⃣ UI는 웹사이트의 "얼굴" → 보기 좋고 조작하기 쉽게 만드는 것이 중요
2️⃣ UX는 웹사이트의 "뼈대" → 사용자가 편리하게 이용할 수 있도록 설계
3️⃣ 웹 접근성은 "배려" → 장애인도 포함하여 누구나 사용할 수 있어야 함

 

---

 

 

좋은 웹사이트를 만들려면 UI, UX, 웹 접근성 세 가지를 모두 고려해야 합니다. 물론 모든 상황을 맞추는 것이 쉽진 않겠습니다만, 앞서 설명드린 "시맨틱 태그"와 마찬가지로 오래 사용될 수 있는 웹사이트를 만들기 위해서라면 꼭 지키는 것이 좋겠습니다. 

 

다음에는 본격적으로 HTML 코딩하는 방법에 대해서 알아보도록 하겠습니다.

감사합니다 😉