웹 = 인터넷?
웹 표준을 알아보기 앞서, ‘웹’의 개념을 먼저 정리해봅시다. ‘웹’은 흔히 ‘인터넷’이라는 용어와 혼동되어 사용되곤 하지만, 서로 다른 개념입니다. 정확히 말하면 인터넷 안에 웹이 포함되어 있지요.
- 인터넷
전 세계적으로 연결되어 있는 컴퓨터 네트워크 통신망입니다. 이메일, 모바일 앱, 온라인 게임, 웹 등 네트워크를 사용하는 다양한 서비스를 모두 포함한 말입니다. - 웹(World Wide Web)
인터넷에 연결된 컴퓨터를 통해 사람들이 문서, 이미지, 영상 등의 정보를 공유할 수 있는 전 세계적인 ‘공간’입니다.
웹에 접속해 블로그에 게시물을 쓰거나, 유튜브에 댓글을 다는 등, 인터넷이 연결되어 있으면 여러 정보를 공유할 수 있습니다. 그런데 만약 게시글 수정 버튼이 없다던가, 댓글을 작성하는 UI가 엄청 작다는 등의 문제가 있다면 어떻게 될까요?
우리가 웹을 이용할 때는 크롬, 사파리, 엣지 등의 ‘웹 브라우저’를 이용합니다. 2000년대 초에는 이런 브라우저간 호환이 잘 되지 않아 크롬에서 잘 보이던 화면이 다른 브라우저에는 보이지 않는 경우도 있었습니다. 이런 문제점 때문에 개발자들은 브라우저마다 따로 개발을 해줘야 했습니다. 이런 수고를 없애고 웹 개발의 형식을 통일시킨 것이 바로 ‘웹 표준’입니다.
웹 표준(Web Standards)
‘웹 표준’은 웹에서 표준적으로 사용되는 기술이나 규칙을 의미합니다. 이 규칙에 맞게 HTML(구조), CSS(표현), JavaScript(동작)을 분리 작성하도록 권고합니다. 사용자가 어떤 운영체제나 브라우저를 사용하더라도 동일한 화면이 정상적으로 작동되는 걸 목표로 하고 있습니다.
최신 웹 브라우저들은 모두 웹 표준을 지원합니다. 따라서 웹 표준에 맞춰 웹 페이지를 작성하면 화면이 제대로 표시되지 않거나, 기능이 작동하지 않는 문제 상황을 방지할 수 있습니다. 또한 화면에 잘 나타나는 것 뿐만 아니라 다른 유용한 점도 있습니다.
1. 각 영역이 분리되어 유지 보수가 용이합니다.
2. 코드 경량화로 트래픽 비용을 절감할 수 있습니다.
3. 사용자의 브라우저나 기기에 관계없이 동일한 결과를 보여줍니다.
4. 검색 효율성이 높아집니다.
5. 다양한 사용자가 보다 쉽게 웹에 접근할 수 있습니다.
크로스 브라우징(Cross Browsing)
'크로스 브라우징'은 '웹 호환성'이라고도 합니다. 웹 사이트에 접근하는 브라우저 종류에 상관없이 동등한 화면과 기능을 제공하는 작업입니다.
여기서 포인트는 ‘동일한’이 아닌 ‘동등한’입니다. 브라우저마다 사용하는 렌더링이 다르기 때문에 화면을 완전히 동일하게 보이는 것은 불가합니다. 하지만 내가 크롬 브라우저로 접속했을 때 보이는 화면이 사파이 브라우저에서 보이지 않거나, 특정 브라우저에서만 기능하는 동작이 있으면 사용자들은 동등한 정보에 접근할 수 없을 겁니다. 즉 크로스 브라우징의 목표는 동작, 레이아웃, 플러그인 호환성 등을 준수해 모든 브라우저에서 동등한 수준의 ‘정보’와 ‘기능’을 제공하는 것입니다.
웹 접근성(Web Accessibility)
시력이 좋지 않거나, 소리를 듣는 데 문제가 있는 사람은 웹을 어떻게 이용할까요? 또는 웹을 이용할 때 키보드만 사용하거나, 마우스만 사용해야 할 때, 모니터가 고장나 제대로 된 색상이 나오지 않을 때도 웹을 원활하게 이용할 수 있을까요?
접근성은 말 그대로 '접근'에 대한 내용입니다. 사용자가 특정 환경이나 신체적 특징에 상관없이, 웹 사이드에서 제공하는 정보에 동등하게 접근하고 이해할 수 있도록 보장하는 것이지요. 쉽게 말해 어떤 사람이든, 어떤 상황이든 모두 동등한 정보에 접근하는 것을 목표로 합니다. 시력이 좋지 않은 사람을 위해 글자 크기를 키우는 옵션을 두거나, 키보드만으로 메인메뉴-서브메뉴-본문 등을 이동하게 하는 것처럼요. 이처럼 장애인뿐만 아니라 고령자, 비장애인도 접근성의 대상이 됩니다.
W3C에서 권고하는 웹 접근성의 4가지 핵심 원칙은 다음과 같습니다.
1. 인식의 용이성 : 모든 콘텐츠는 모든 사람이 인식할 수 있도록 표시합니다.
2. 운용의 용이성 : 사용자 인터페이스 구성 요소를 조작하고 탐색할 수 있게 합니다.
3. 이해의 용이성 : 모든 콘텐츠와 사용자 인터페이스는 모든 사람이 이해할 수 있어야 합니다.
4. 견고성 : 기기에 상관없이, 또한 미래 기술로도 접근 가능하도록 만들어야 합니다.
참고 사이트
'♻️ 개발자로 재활용 > 🎨 UI&UX' 카테고리의 다른 글
| UI/UX 디자인 휴리스틱 원칙 (10 Usability Heuristics for User Interface Design) (0) | 2023.01.03 |
|---|---|
| 피터 모빌(Peter Morville)의 유저 경험 허니콤(User Experience Honeycomb) (0) | 2023.01.03 |
| UI와 UX, 그래서 뭐가 다를까 (0) | 2023.01.02 |