HTML/CSS 웹 접근성 또는 반응형 웹

JY.L·2021년 10월 12일

반응형 웹 디자인

하나의 웹 사이트에서 PC, 스마트폰, 태블릿, PC 등 사용자 환경에 상관없이 사용자에게 최적의 환경을 제공하기 위한 웹사이트 디자인 프로세스
반응형 웹의 핵심 기술은 뷰포트(viewport) ,유연한 그리드(fluid grid), 유연한 이미지(flexible images), 유연한 미디어(Responsive Media), 미디어 쿼리(media query)이다. 반대말은 디바이스별로 별도의 웹사이트를 제작하는 적응형 웹(adaptive web)이다.

반응형 웹 디자인 기본 요소

뷰포트

보통 웹 브라우저는 PC 화면을 기준으로 만들어져, 모바일 태블릿에 적용이 안되어 뷰포트를 메타 요소를 통해 기기 화면에 최적화 할 수 있습니다.

<meta name="viewport" content="width=device-width; initial-scale=1">

유연한 그리드

사용자 기기 화면 크기에 따라 최적환 되어 만들기
ex) Kenzo

유연한 이미지

사용자 기기 화면크기에 적합한 이미지를 불러 보여줌

<img srcset="elva-fairy-320w.jpg 320w,
             elva-fairy-480w.jpg 480w,
             elva-fairy-800w.jpg 800w"
     sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px"
     src="elva-fairy-800w.jpg" alt="요정 옷을 입은 엘바">

유연한 미디어

미디어는 이미지, 비디오를 합한 개념이며, 다양한 미디어를 사용시 사용자 기기 화면 크기에 최적화되어 제공해야함

미디어 쿼리

미디어 쿼리는 각 미디어 매체에 따라 다른 스타일을 적용할 수 있게 함

@media screen and (max-width : 767px) {
         body { background: black;}
     }
@media screen and (min-width : 768px) and (max-width : 1024px) {
         body { background: red;}
     }

좋은 사례

1.이디야

2.대한항공

반응형 웹의 현재

검색엔진 최적화(SEO) : 웹 사이트나 웹페이지에 대한 트래픽의 품질과 양을 개선, 웹 페이지 검색엔진이 자료를 수집하고 순위를 매기는 방식에 맞게 웹 페이지를 구성해서 검색 결과의 상위에 나타나게 함 이를 통해 방문 트래픽이 늘어나 효과적인 인터넷 마켓팅이 될 수 있음
모바일 사용자 수 증가 : 전 세계 웹 트래픽의 절반 이상이 모바일에서 나오고 있는 현재에서는 웹 사이트 제작시 당연히 모바일 기기 사용자에게 아무런 제약 없는 환경을 제공 해야 함

반응형 웹 시작시 고려할 점

모바일 퍼스트 : 반응형 웹 제작시 모바일 버전을 먼저 디자인 하여 작은 화면에서 어떻게 나오는지 확인 후 큰 화면을 작업하면 편함
모바일 화면 터시 범위 늘리기 : 모바일 화면으로 웹 서비스를 이용시 터지가 잘 안되는 느낌을 받은 적은 누구나 경험 해봤을 것임, 이러한 문제를 해결하기 위하여 버튼 클릭 가능 영역 늘리기, 주변과 구별되는 색상 등으로 명확하게 구분지어 주어야 함
이미지 최적화 : 이미지의 크기를 줄여 사이트 속도 향상해 주어야 함
한 눈에 의미를 알 수 있는 아이콘 : 작은 화면을 구성하기 위해서 아이콘 등을 사용하는 경우가 많은데 그 의미를 모르면 사용자에게 혼란을 줄 수 있으므로 잘 써야함
프레임워크 : Bootstrap, bulma, semantic UI 등 프레임 워크를 통한 프로토 타입 설계
호환성 : 사용자들은 크롬, 파이어폭스, 인터넷 익스플로어, edge, 사파리, 오페라 등 다양한 브라우저를 사용하고 있으므로 반응형 웹 제작시 호환성은 당연히 중요한 사항임 (특히나 인터넷 익스플로어의 옛날 버전은 미디어 쿼리 뿐 만아니라 다양한 코드가 지원되지 않을 가능성이 있어 항상 확인해야함)
성능향상 :
JS/CSS 파일 병합(HTTP 요청 줄이기)
이미지 파일 병합(HTTP 요청 줄이기)
JS파일 지연 로딩(체감 성능 향상)
웹 폰트 요청 분기(모바일 성능 향상)
익스텐션 이용 : 모바일 친화성 테스트, lighthouse, http://koreawebdesign.com(다양한 디자인)

적응형 웹 디자인과의 차이점

그림 및 참고

적응형(Adaptive Web), 반응형(Responsive Web)

기기감지
적응형 : 서버 또는 브라우저에서 기기감지
반응형 : 미디어쿼리로 기기 감지
콘텐츠 최적화
적응형 : 필요 콘텐츠만 다운로드
반응형 : 모든 콘텐츠 다운로드
기기 특성별 처리 방법
적응형 : 기기 마다 다른 템플릿
반응형 : 하나의 템플릿
로드 속도
적응형 : 빠름
반응형 : 느림
개발 / 배포
적응형 : 기존 사이트 변경없이 개발가능
반응형 : 기존 사이트를 전면 리뉴얼하여 개발
개인적인 생각
개인적으로 반응형 웹과 적응형 웹을 공부 해보면서 둘 중 어떠한 웹이 더 좋다 이러한 느낌 보다는 만드는 웹 페이지(쇼핑몰, 검색, 정보 전달, 예약 등)의 특성에 맞추어서 반응형 웹, 적응형 웹을 만드는 것이 중요하다고 생각했습니다.

웹 접근성

WCAG 2.1 대원칙 4가지

인식의 용이성

모든 사용자가 웹에서 제공되는 정보와 인터페이스를 인식할 수 있도록 함

대체 텍스트
시간기반 미디어
적응 가능
식별 가능

운용의 용이성

사용자가 장애 유무등에 관계없이 웹사이트에서 제공하는 모든 기능을 운용할 수 있도록 제공하는 것을 의미

키보드 접근성
충분한 시간
신체적 반응
네비게이션 가능
입력 방식

이해의 용이성

사용자가 장애 유무등에 관계없이 웹사이트에서 제공하는 콘텐츠를 이해할 수 있도록 제공하는 것을 의미

가독성
예측 가능성
입력 지원

견고성

현재 및 미래의 어떠한 기술과도 호환성을 최대한 지원해야 한다는 의미

파싱
이름, 역활, 값
상태 메시지

좋은 사례

대체 텍스트 : 눈으로 화면을 볼 수 없는 경우, 이미지에 대한 설명을 대체 텍스트로 입력하여 스크린 리더를 통해 정보를 인식하게 도움을 줍니다.

lang="ko"
lang="en"
lang="zh"
lang="ja"

이처럼 웹문서에 관련 언어를 지정하여 페이지 가독성에 도움을 줍니다.

안좋은 사례

보시는 바와 같이 위 홈페이지는 웹사이틀 제작 해주는 홈페이지입니다. 하지만 alt(대체 텍스트)를 작성하는 의미를 오로지 SEO 관점으로만 바라보고 있습니다. 웹 제작 사이트에서 이러한 관점으로 만들면 위 사이트를 통해 제작된 많은 웹이 좋지 않은 접근성을 갖고 태어나게 될 것 같아서 우려가 됩니다.