열심히 끝까지

[10분 테코톡] 미키의 웹 접근성 & 표준 본문

디바이스 융합 자바(Java)기반 풀스택 개발자 양성과정(과제)

[10분 테코톡] 미키의 웹 접근성 & 표준

노유림 2022. 7. 23. 01:46

[10분 테코톡] 
웹 접근성 & 표준 - 미키
https://www.youtube.com/watch?v=xToJhmAJYCE

1. 웹 표준
    1-1. 웹 표준이 등장한 배경
      시간 흐름 : 초기 -> 중기 -> 말기
      초기 : 
          넷스케이프 vs 인터넷 익스플로러
            - why? 웹을 장악하기 위해!
              > 이 때, 개발자 = 고래 싸움에 등 터진 새우
                  why? 넷스케이프와 인터넷 익스플로러, 두 가지 버전의 페이지를
                         모두 개발했어야 하기 때문
      중기 : 윈도우98이 인터넷 익스플로러 기본 탑재 시작(넷스케이프 하락세),
               IE가 독점, IE는 자사에 유리한 플러그인을 대거 채용
               > 호완성 고려X  
                  ex ) Active X
      말기 : 스마트폰의 등장
               > 특정 OS나 특정 브라우저에서만 동작하는 웹페이지의 자리는 사라짐,
                  웹 표준이 점점 중요하게 드러나기 시작
      
    1-2. 웹 표준이란?
       : 어떠한 운영체제나 브라우저를 사용하여도 동일한 컨텐츠를 볼 수 있도록
         웹에서 표준적으로 사용하는 기술이나 규칙
         > "동일한 컨텐츠" : 완벽히 똑같은 화면을 의미하는 것이 아님.
                                    모든 플랫폼에서 동등한 수준의 정보에 접근이 가능함을 의미.   

      > '팀 버나스 리'
         : 웹 표준은 팀 버나스 리를 중심으로 한 world wide web consortium라는
          조직의 토론에 의해 결정

        - 웹 표준이 토론을 통해 확정되는 순서(1이 넓은 피라미드 모양)
          step 4 : Recommendation - 확정 권고안
          step 3 : Candidate Recommendation - 확장될 권고안
          step 2 : Working Draft - 작업 표준
          step 1 : Draft - 제안된 표준
  
      step 1 ~ 3 => 비표준(독자 요소)
      step 4 => 오직 step 4만 표준!

    1-3. 웹 표준의 장점
       - OS에 관계없이 하나의 코드로 모든 플랫폼에 대응할 수 있어 
               개발자 입장 : 개발의 효율성을
               기업의 입장 : 서버 비용 절감과 운영의 효율성
                                                                                 을 가져다 줌
       1. 검색 엔진 최적화 
            : 웹 페이지가 검색 결과에서 좀 더 높은 순위가 나올 수 있도록 하는 작업을 의미
                > 의미를 가진 시멘틱 태그 사용 
                    => 표준을 지켜 웹페이지를 제작 시, 크롤러 봇이 이해하기 쉬워짐
                       >> 웹 페이지가 검색 결과 순위에서 더 높은 우위를 가져갈 수 있도록 함
       2. 개발자가 더 이해하기 쉬운 코드
            : 웹 크롤러 봇이 웹 구조를 쉽게 이해할 수 있을 뿐만 아니라 
             사람도 의미를 가진 태그를 통해 만들어진 구조를 더 이해하기 쉬워짐  
       3. 구조와 표현의 분리
           : 과거에는 표를 그리기 위해 table 태그를 레이아웃 용도로 사용, 
                => html에 구조와 표현이 뒤섞여 있었음
           : 현재에는 html과 같은 마크업 언어는 웹의 구조를
            CSS는 웹의 표현을 담당하게 되면서 이해하기 쉽고
            유지보수 측면에서도 굉장한 이점을 보이게 됨
            ex ) 웹 디자인 요소만 바꾸면 된다?
                    >> CSS파일만 변경
 
2. 웹 접근성
    2-1. 웹 접근성이란?
      : 장애인이나 노인분들 모두 개인의 능력에 상관없이
        웹 페이지의 정보에 접근할 수 있도록 보장하는 것을 의미

    2-2. 웹 접근성의 예시
      : 대표적으로 스크린 리더 존재(무료로 다운 받은 NVDA 프로그램 존재)
      : 시각 장애인은 스크린 리더라는 프로그램을 통해 웹페이지를 읽을 수 있음
        웹 요소 간의 이동은 Tab 키를 통해 가능
       > 대화형 요소?
            : anchor, button, input tag와 같이 
             사용자와 상호작용할 수 있도록 설계된 tag들을 의미 

    2-3. 접근성을 높이는 방법
      : 접근성을 높이기 위한 쉽고 기본적인 방법은 웹 표준을 지키는 것
      > 그럼 웹표준을 지키기만 하면 모든 접근성 문제가 해결되나?
          No!!! 
            >> 녹내장인 분들을 위해 명암 민감도를 신경써야 함
                 글꼴 크기를 확대할 수 있는 방법 제공
                   .... 
                > 접근성을 위해 해야할 일은 많음
      >> 웹 표준은 접근성 보조 도구가 웹을 좀 더 쉽게 이해할 수 있도록 해줌.
          > 접근성은 웹 표준을 지키는 것에서부터 시작
      ex ) 접근성 = 나무 | 웹 표준 = 나무 뿌리

3. 정리
   웹 표준 : 하나의 소스로 모든 브라우저나 플랫폼에서
                같은 컨텐츠를 볼 수 있도록 하는 웹 개발자들 간의 약속
   웹 접근성 : 개인의 능력에 상관없이 모든 사람에게 웹을 사용할 수 있도록
                   하는 방법