Unit5 회고

YEN J·2022년 11월 8일
Code StatesSection3TILsemanticseo웹 접근성웹표준
0

code states

목록 보기
31/43

웹 표준 & 웹 접근성

🔆 웹 표준

웹 표준의 개념

Web이란❓
Web이란 인터넷에 연결된 컴퓨터를 통해 사용자들이 정보를 공유할 수 있는 하나의 '공간'을 말한다. 즉, 문서나 이미지, 영상 등의 다양한 정보를 여러 사람들과 공유할 수 있는 공간이다.
World Wide Web

  • web과 internet의 비교
    • web과 internet을 혼동하여 사용하는 경우가 빈번하게 발생
    • internet은 전 세계적으로 연결되어 있는 컴퓨터 네트워크 통신망을 의미하는 포괄적인 개념
      • 웹 뿐만이 아니라 네트워크를 사용하는 다양한 서비스들을 모두 포함
    • 통신망을 통해 연결된 컴퓨터로 정보를 공유할 수 있는 공간을 의미하는 web과 구분할 것

웹 표준🧐
웹 표준이란 W3C에서 권고하는 웹에서 표준적으로 사용되는 기술이나 규칙으로 브라우저나 운영체제의 종류와는 상관없이 사용자에게 웹 페이지가 동일하게 보이고 작동할 수 있도록 하는 웹 페이지 제작 기법을 의미한다.

  • 웹 표준의 장점
    • 유지 보수의 용이성
      • 영역의 분리로 인한 유지 보수 용이
      • 코드의 경량화로 인한 트래픽 비용 감소 효과 발생
    • 웹 호환성 확보
      • 브라우저의 종류나 버전, 운영체제나 사용 기기 종류에 상관없이 동일한 결과 확보
    • 검색 효율성 증대
      • 웹 표준에 따른 웹 사이트 작성으로 인해 검색 엔진 상에서 높은 우선 순위로 노출될 가능성 증가
    • 웹 접근성 향상
      • 다양한 환경과 다양한 사용자들에게 맞춘 웹 페이지 개발 가능

Semantic HTML

웹 표준에서 강조하는 Semantic HTML의 중요성

Semantic Element와 Semantic HTML😎
시맨틱 요소(Semantic Element)란 담게 될 내용이나 수행하게 될 기능과 같이 확실한 의미를 가지는 요소를 말한다. 예를 들어 <div>, <span>과 같은 요소들은 이 요소들이 무슨 내용을 담을지 무슨 역할을 수행하게 될 지 직접 내용을 들여다보지 않고서는 파악하기 어렵다. 하지만 <header>, <nav>와 같은 요소들은 요소 자체만 보더라도 이미 내용과 역할을 어느 정도 짐작할 수 있다. 이와 같은 시맨틱 요소를 적절하게 사용하여 구성한 HTML을 시맨틱 HTML이라고 한다.

  • 시맨틱 HTML의 필요성

    • 개발자 간 소통 용이
    • 검색 효율성 증대
    • 웹 접근성 향상

  • 시맨틱 요소의 종류

    요소 종류설명
    <header>페이지나 요소 최상단에 위치하는 머릿말 역할의 요소
    <nav>메뉴, 목차 등의 사용되는 요소
    <aside>문서와 간접적인 연관이 있는 내용을 담는 요소
    <main>문서의 메인이 되는 주요 콘텐츠를 담는 요소
    <article>독립적으로 구분해 재사용할 수 있는 부분을 의미하는 요소
    <section>문서의 독립적인 구획을 나타내는 요소
    <hgroup>제목을 표시할 때 사용하는 요소
    <footer>페이지나 요소의 최하단에 위치하는 꼬릿말 역할의 요소

자주 틀리는 마크업

자주 틀리는 마크업 작성 상황

  1. 인라인 요소 안에 블록 요소 넣기
    • 인라인 요소와 블록 요소를 잘 구분하여 블록 요소 안에 인라인 요소를 작성할 것
  2. <b>, <i> 요소 사용하기
    • <b>는 글씨를 굵게 만들 때, <i>는 글씨를 기울일 때 사용하는 요소로 시맨틱 요소가 아님
    • <b>, <i> 대신 <strong>, <em> 과 같이 똑같은 스타일을 적용하지만 콘텐츠에 의미를 부여하는 시맨틱 요소를 사용할 것
  3. <hgroup> 남용하기
    • <hgroup>를 사용하는 목적은 콘텐츠의 상하 관계를 표시하기 위함이므로 단지 시각적 효과만을 위해 사용하지 말 것
  4. <br /> 연속으로 사용하기
    • <br />은 텍스트 흐름에 줄 바꿈을 해주기 위해 사용하는 요소로 단지 간격을 만들기 위한 목적으로 남발해서 사용하지 말 것
    • 간격이 필요한 경우 <p> 요소를 통해 별도의 단락으로 구분하거나 CSS 속성으로 여백을 조정해주는 것이 적합
  5. 인라인 스타일링 사용하기
    • 인라인 스타일링을 사용하는 것은 웹 표준으로 분리된 HTML, CSS, JavaScript 영역을 다시 합치는 것과 같음
    • 웹 표준을 지키기 위해 HTML과 CSS 코드를 분리하여 작성할 것
      • style 요소를 사용하거나 CSS 파일을 따로 작성

크로스 브라우징

크로스 브라우징(Cross Browsing)🤔
크로스 브라우징이란 웹 사이트에 접근하는 브라우저의 종류에 상관없이 동등한 화면과 기능을 제공할 수 있도록 만드를 작업을 의미한다. 즉, 크로스 브라우징은 모든 브라우저에서 동일한 화면이 제공되도록 하는 작업이 아닌 동등한 수준의 정보와 기능을 제공하도록 만드는 작업이라고 할 수 있다.

  • 크로스 브라우징 워크 플로우
    1. 초기 기획
      • 개발할 웹 사이트의 콘텐츠와 기능, 디자인 사항 결정
      • 타겟(고객) 설정
      • 고객의 브라우저나 기기 파악 후 이에 맞는 기술을 사용한 개발 필요
    2. 개발
      • 코드 작성 시 각 브라우저에서의 호환성 파악 후 사용
    3. 테스트 / 발견
      • 기능 구현 후 기능에 대한 테스트 필요
      • 직접 테스트 수행 가능하지만, 자동으로 테스트를 진행해주는 TestComplete, LambdaTest, BitBar 등의 크로스 브라우징 테스트 툴을 이용하는 것도 하나의 방법
    4. 수정 / 반복
      • 테스트 단계에서 발견된 버그 수정, 수정 시 버그 발생 위치를 최대한 좁혀서 특정 후 특정 브라우저에서의 해결 방법 모색

🔆 SEO

SEO 개념

SEO란❓
SEO(Search Engine Optimization, 검색 엔진 최적화)란 검색 엔진의 작동 방식에 맞게 웹 페이지를 최적화해주는 작업을 말하는데 쉽게 말해 검색엔진에서 찾기 쉽도록 사이트를 개선하는 프로세스를 의미한다. 이러한 SEO를 통해 검색 엔진에서 웹 페이지를 보다 더 상위에 노출될 수 있도록 만들 수 있다.

  • SEO의 종류
    • On-Page SEO: 페이지 내부에서 진행할 수 있는 SEO
      • 제목과 콘텐츠, 핵심 키워드 배치 효율적인 HTML 요소 사용법 등을 이용하는 방법
    • Off-Page SEO: 웹 사이트 외부에서 이루어지는 SEO
      • 소셜 미디어 홍보, 백링크 등을 이용하는 방법
      • 웹 페이지의 내용이나 구조와는 무관

SEO에 영향을 미치는 요소

On-Page에서 통제할 수 있는 요소

  1. <title> 요소

    • 검색 결과창에서 제목에 해당하는 요소로 <head> 요소의 자식 요소로 작성
      • 적당한 길이의 <title> 요소의 내용을 작성할 것
      • 핵심 키워드를 포함하되 같은 키워드를 반복하지 말 것

  2. <meta> 요소

    • 해당 웹 사이트에서 다루고 있는 데이터를 설명하는 데이터인 메타 데이터를 담는 요소로 <head> 요소의 자식 요소로 작성

    • <meta> 요소 안에 검색 결과창에서 확인할 수 있는 내용이 들어있는 경우와 링크 공유 시 미리보기에서 확인할 수 있는 내용이 들어있는 경우로 나뉘어짐

      • name 속성 사용: SEO를 위해 사용하는 것이 목적
      • property 속성 사용: 다른 사람에게 공유하기 위한 것이 목적
      • property 속성을 사용하는 경우를 오픈 그래프(Open Graph)라고 하며 각 속성값 앞에 오픈 그래프를 뜻하는 "og"가 붙음

    • SEO를 위한 meta 요소
      <meta name="속성값" content="내용" />
      주요 속성값

      name
      속성값      		설명
      description콘텐츠에 대한 간략한 설명
      keywords웹 페이지의 관련 키워드들을 나열할 때 사용
      author콘텐츠의 제작자 표시

    • 오픈 그래프(Open Gragh)
      <meta property="속성값" content="내용" />
      주요 속성값

      property
      속성값      		설명
      og:url페이지의 표준 URL
      og:site_name사이트의 이름
      og:title콘텐츠의 제목
      og:description콘텐츠에 대한 간략한 설명
      og:image미리보기로 표시될 이미지
      og:type콘텐츠 미디어의 유형
      og:locale리소스의 언어

    • <title>, <meta> 요소 작성 실습 리뷰(링크 공유 시 보이는 UI 기준)

      • title: <head> 요소 안에 <meta> 요소 중 title 관련 오픈 그래프 요소가 없을 경우 <title> 요소의 내용이 미리보기 화면의 제목이 되지만 오픈 그래프 요소가 있을 경우 그 요소가 우선시 됨
      • title의 길이: 오픈 그래프 요소의 title이 10자 내외와 같이 간략할 경우 화면에 description 요소가 같이 포함되어 나타나지만 30자 이상 길어질 경우 description은 생략되어 화면에 나타나지 않음
      • img: <head> 요소 안에 <meta> 요소 중 image 관련 오픈 그래프 요소가 없을 경우 <body> 요소 안의 <img> 요소가 링크 공유 시 미리보기 화면에 보이는 이미지로 사용되지만 오프 그래프 요소가 있을 경우 그 요소가 우선시 됨

    • 페이지 방문자 수가 많다면 검색 시 상위에 노출될 확률이 높아지기 때문에 오픈 그래프는 SEO와 간접적인 연관성을 가짐

      • 따라서 SEO가 목적인 경우 name 속성을 사용하는 <mata> 요소에 중점을 두고 아울러 오픈 그래프 역시 잘 작성할 필요가 있음

  3. <hgroup> 요소

    • <hgroup> 요소는 콘텐츠의 제목을 표시하는 요소로 핵심 키워드를 포함할 가능성이 높아 검색엔진 역시 이 요소의 내용을 중요하게 취급
      • 핵심 키워드를 의식해서 요소 안에 넣어 줄 것
      • 단, 같은 키워드를 반복하는 것이 아닌 관련 키워드를 포함시키는 것이 적합

  4. 콘텐츠

    • 개성있는 브랜딩
    • 복사+붙여넣기 금지
    • 간결한 제목과 설명글
    • 최대한 글자로 작성

🔆 웹 접근성

웹 접근성의 개념

웹 접근성❓
웹 접근성이란 장애인, 고령자 등의 정보 소외 계층이 웹 사이트에서 제공하는 정보에 비장애인과 동등하게 접근하고 이해할 수 있도록 보장하는 것을 말한다. 하지만 비장애인 역시 정보 접근에 제한되는 상황은 언제든 발생할 수 있기 때문에 웹 접근성이 정보 소외 계층만을 위한 개념이 아닌 정보 접근에 제한을 받는 모든 사람들을 위한 개념이라고 볼 수 있다.

  • 웹 접근성 확보 시 효과
    • 사용자층 확대
    • 다양한 환경 지원
    • 사회적 이미지 향상

웹 콘텐트 접근성 지침

한국형 웹 콘텐츠 접근성 지침 2.1

✔️ 인식의 용이성
: 모든 콘텐츠는 사용자가 인식할 수 있어야 한다

  1. 적절한 대체 텍스트
    • 필요 시 alt 속성 사용
  2. 자막 제공
    • track 요소 사용
    • WebVTT 또는 TTML 형식 사용
  3. 색에 무관한 콘텐츠 인식
    • 테두리 설정, 레이블 달기
  4. 명확한 지시사항 제공
  5. 텍스트 콘텐츠 명도 대비
    • 텍스트 콘텐츠와 배경 간 명도 대비는 기본적으로 4.5 대 1 이상
  6. 자동 재생 금지
  7. 콘텐츠 간 구분

✔️ 운용의 용이성
: 사용자 인터페이스의 구성요소는 조작 가능하고 내비게이션 할 수 있어야 한다

  1. 키보드 사용 보장
  2. 초점 이동
  3. 조작 가능
  4. 응답 시간 조절
  5. 정지 기능 제공
  6. 깜빡임과 번쩍임 사용 제한
  7. 반복 영역 건너뛰기
  8. 제목 제공
  9. 적절한 링크 테스트

✔️ 이해의 용이성
: 콘텐츠는 이해할 수 있어야 한다

  1. 기본 언어 표시
    • HTML 요소에 lang 속성을 사용하여 제공
  2. 사용자 요구에 따른 실행
    • 새 창 공지 상황
      • 링크 요소 안에 보이지 않는 요소 삽입
      • 링크 요소에 title 속성 사용
      • 링크 요소에 target="_blank" 속성 사용
  3. 콘텐츠 선형 구조
    • 논리적 순서로 콘텐츠 제공
  4. 표의 구성
    • 테이블 요소 안 제목을 제공하는 caption 요소 사용
    • 제목 셀은 <th>, 데이터 셀은 <td> 사용
    • 복잡한 표의 구조일 경우 간소화하거나 scope 혹은 id와 headers 속성 사용
  5. 레이블 제공
    • 사용자 입력에 대응하는 레이블 제공
    • <input> 요소에 id를 설정, <label> 요소의 for 속성으로 연결
    • title 속성을 사용
    • WAI-ARIA의 aria-label 속성을 사용
  6. 오류 정정
    • 입력 오류를 정정할 방법 제공

✔️ 견고성
: 웹 콘텐츠는 미래의 기술로도 접근할 수 있도록 견고하게 만들어야 한다

  1. 마크업 오류 방지
  2. 웹 애플리케이션 접근성 준수

WAI-ARIA

WAI-ARIA🤔
WAI-ARIA란 WAI에서 발표한 RIA 환경에서의 웹 접근성 기술 규격을 말한다.

  • WAI: 웹 표준을 정하는 W3C에서 웹 접근성을 담당하는 기관
  • ARIA: 장애가 있는 사람들이 웹 콘텐츠와 웹 응용 프로그램에 더 쉽게 접근할 수 있도록 하는 기술
    • RIA: 웹 브라우저를 통해 사용할 수 있는 편리성과 빠른 반응의 사용자 인터페이스를 동시에 가지는 웹 애플리케이션
  • WAI-ARIA의 필요성
    • 시맨틱 요소만으로 의미를 충분히 부여할 수 없는 상황에서 HTML 요소에 추가적인 의미를 부여
    • SPA와 같이 AJAX를 사용하는 상황에서도 변경된 영역에 대한 정보를 전달 가능하므로 동적인 콘텐츠에서도 웹 접근성 향상 가능
  • WAI-ARIA 사용법: WAI-ARIA 속성의 세 가지 분류
    • 역할(role): HTML 요소의 역할을 정의하는 속성
    • 상태(state): 요소의 현재 상태를 나타내는 속성
    • 속성(property): 요소의 특징을 정의하는 속성(attribute)
    1. 역할(Role)
      • HTML 요소 종류에 역할이 명시되어 있지 않은 경우 사용
    2. 상태(State)
      • aria-selected: 여러 개의 요소 중 현재 선택 상태인 요소 표시
      • aria-expanded: 아코디언 UI가 펼쳐진 상태인지 표시
      • aria-hidden: 요소가 숨김 상태인지 표시
    3. 속성(Property)
      • aria-label: 요소에 라벨을 붙여주는 기능
      • aria-live: 해당 요소가 실시간으로 내용을 갱신하는 영역인지 표시
        • 속성 값으로 polite, assertive, off(default) 가 있음
profile
YEN J
이전 포스트

웹 표준 & 웹 접근성

다음 포스트

Unit6 회고

0개의 댓글