0. 짧은 개요

흐르듯 들어온 웹 개발의 길이지만 나름의 책임감과 즐거움으로 정착했다. 그런데도 업무 시간 외의 공부엔 전혀 진전이 없었으며 코앞에 닥친 개발에 집중하느라 웹 개발자의 기초와도 같은 지식 습득에는 미진했단 사실을 깨닫고(‘직면’이 더 적합할지도 모르겠다.) 초심으로 돌아가 공부를 시작하려 한다. (맘 잡고 하려는데 다른 분들은 모르겠지만 내 github blog 게시 방식 너무 불편해서 웹 개발자로서 참을 수 없다…)

도파민 중독에서 벗어나 퇴근 후 노트북 앞에 앉는 시간이 일주일에 한 두 번이라도 있다면 큰 발전이라 생각한다. 화이팅!(to me…)

1. 웹 접근성 (Web Accessibility)

장애인, 고령자 등 모든 사용자가 어떠한 기술이나 환경에서도 전문적인 능력 없이 웹사이트에서 제공하는 모든 정보를 동등하게 접근하고 이해할 수 있는 권리.

사담이지만 맘스터치 키오스크는 웹이라고 할 수 있나? 접근성이 매우 떨어지는 듯…

웹 접근성을 준수한 웹의 특성

주변 환경(주변소음, 밝은 태양광, 작은 화면 등)이나, 단말기 종류(스마트폰, PC/노트북, 패드)에 상관 없이 사용 가능한 웹을 제공
웹 페이지 구성이 논리적으로 최적화되어, 디자인 및 설계의 효율성 제고는 물론 개발/유지보수/개편 비용 절감 효과
기업의 사회적 책임(CSR, Corporate Social Responsibility)이 중요하게 부각되고 있는 시점에서 홈페이지를 운영하고 있는 기관 및 단체에 대한 긍정적 이미지 형성

👀 살펴보기

1) 요구사항 정의서에서 자주 보던 ‘반응형 웹’. 말그대로 웹을 화면 크기에 유동적으로 구현한다면 단말기 종류에 상관 없이 사용 가능할 것이다. (편리하게!)

주변 환경에 대한 요구사항은 어떻게 해결할 수 있을까… 정답은 아니겠지만 나이트 모드를 제공하면 어느정도 해소되지 않을까? 하지만 섣불러선 안 된다. 간혹 나이트 모드가 되는 블로그에 접속했는데 글자도 검정색이라 꿍시렁하며 데이모드로 바꾼 경험이 다수 있다.

2) 이 부분에 크게 공감한다. 구역이 잘 나누어지고 디자인 통일성이 있는 웹은 유지보수도 편할 것이고 개발도 쉬울 것이다. 여기에 확장성도 있으면 아주 좋을 것이다!

3) 기업의 이미지 증진에도 도움이 된다니.. 잘 만든 예시가 궁금하다.

‘Tech-Verse 2022’ 웹 접근성 향상을 위한 노력 예시까진 아니지만 꽤나 섬세하다. Line 호감도 +1. 정독하고 나면 좋은 웹을 보는 지식이 추가될 것이다.

내가 생각한 다크모드가 포함되어 있어서 조금 뿌듯…

2. 웹 표준

웹 표준이란 브라우저 종류 및 버전에 따른 기능 차이에 대하여 호환이 가능하도록 제시된 표준. 표준화 단체인 W3C(World Wide Consortium)가 권고한 표준안에 따라 웹사이트를 작성할 때 이용하는 HTML, CSS, JavaScript 등에 대한 규정을 담고 있으며 웹 표준의 궁극적인 목적은 웹사이트에 접속한 사용자가 어떠한 운영체제나 브라우저를 사용하더라도 동일한 결과를 보이게 하는 것.

웹 표준을 따라가면 웹 접근성에 가까워지는 것이다.

웹 표준 준수 이유

검색엔진 최적화(SEO) 구조화된 웹페이지는 검색 로봇 수집을 통해 검색엔진에 효율적으로 노출 될 수 있도록 검색엔진의 검색결과를 최적화
효율적인 마크업 CSS와 HTML문서를 분리하여 제작할 경우 불필요한 마크업이 최소화되어 페이지 로딩속도 향상
호환성 가능 기존 IE 브라우저에서만 작동이 가능했던 요소들이 웹 표준을 준수함으로써 다양한 브라우저(크롬, 파이어폭스, 사파리, 오페라 등)에서도 작동

지금은 IE의 지원이 종료되어 거의 준수되지 않지만 한 때 공공기관 웹 개발 당시, 잘 (아예) 쓰지 않던 IE에서도 동일한 화면이 보여야 해서 JS 소스를 수정하던 것이 기억난다. (function paramenter default 값 주던 부분…)

3. 웹 호환성(Cross Browsing)

표준 웹 기술을 사용하여 운영체제, 브라우저 등 어느 한쪽으로 최적화되거나 종속되지 않도록 공통 요소를 사용하여 웹 페이지를 제작하는 기법. 웹 사이트 사용 시 운영체제 및 브라우저 간 동일한 결과가 나오도록 의미하는 웹 상호운용성의 개념에 웹 표준의 준수를 포함하는 개념.

슬슬 다 비슷해 보이기 시작…

한 표로 정리!

구분	목적	준수 내용	차이
웹 표준	(Web Standards) 웹의 사용성 및 접근성 보장	HTML, CSS 등에 대한 WC3규격(문법) 준수 등 - HTML, CSS, Javascript 등 구조와 표현, 동작 분리 권고	웹의 내용, 표현, 행동에 관련된 기술표준
웹 호환성 (Cross Browsing)	웹 브라우저 버전, 종류와 관계없는 웹사이트 접근	웹 표준 준수를 통한 브라우저 호환성 확보 - HTML, CSS 문법 준수 - 동작, 레이아웃, 플러그인 호환성	웹 표준을 공통으로 포함
웹 접근성 (Web Accessibility)	인적, 환경적 요인에 제약없는 웹 정보 접근	W3C 웹 접근성 이니셔티브(WAI) 한국형 웹 콘텐츠 접근성 지침2.0 - 인식의 용이성, 운용의 용이성, 이해의 용이성, 견고성	웹 표준을 공통으로 포함

끝

공공기관의 경우 반응형이 다수이다. 보건복지부 산하의 공공기관 사이트를 확인해본 결과, 반응형 웹은 필수적이진 않지만 언어 변경, 글자 크기 변경 등 편이를 위한 시스템이 대체로 포함되어 있다.

사기업에선 웹보단 모바일 접근성 위주로 서비스 하는 것 같다. (네이버 PC로 들어가 창을 줄여보면 스크롤만 생기고 전혀 반응형이 아니다.) 아무래도 사기업이다 보니 웹 접근성 향상이 선택적이고, 타겟층이 스마트폰에 더 익숙한 연령층인 경우 그런 것 같다.

그렇다 하더라도 웹 접근성에 대해 공부하고 적용 방법을 익혀, 개발자 선에서 디지털 소외를 극복할 수 있는 최선을 다 하고 싶다! 따라가지 못한다고 배척하는게 당연히 되는 것은 너무 삭막하다.

참고

웹발전연구소

감사합니다.

Text by Chaelin. Photographs by Chaelin, Unsplash.

← Previous Post END