코드스테이츠_S3U5_3,4W_금월화

윤뿔소·2022년 11월 7일
seo웹접근성웹표준코드스테이츠
0

CodeStates

목록 보기
32/47

이번 시간엔 웹에 대한 시스템 탐구로 표준, SEO, 접근성 등에 대해 알아보겠다.
참고: 네이버 가이드, 구글 가이드

웹표준

W3C에서 발표한 웹에서 표준적으로 사용되는 기술이나 규칙
크롬, 엣지, 사파리, 오페라, 파이어폭스 등 최신 웹 브라우저들은 모두 웹 표준을 지원

어떠한 브라우저라도 정상적으로 작동할 수 있도록 하는 웹 페이지 제작 기법을 담고 있다!

장점

1. 유지 보수의 용이성: 웹 표준으로 HTML, CSS, JavaScript 등의 사용 방법을 정리하기 이전에는 구조, 표현, 동작이 뒤섞인 '스파게티 코드'도 많았음. 그러다보니 어느 한 부분을 수정하려면 전부 뜯어고쳐야 할 때도 있었음. 하지만 각 영역이 분리되면서 유지 보수가 용이해졌고, 코드가 경량화되면서 트래픽 비용이 감소하는 효과도 생김.

2. 웹 호환성 확보: 웹 사이트가 특정 운영체제나 브라우저에 종속적이라면 그 외 환경에서는 정상적으로 사용이 불가능한 문제점이 발생. 하지만 웹 표준을 준수하여 웹 사이트를 제작하면 웹 브라우저의 종류나 버전, 운영 체제나 사용 기기 종류에 상관없이 항상 동일한 결과가 나오도록 할 수 있음!

3. 검색 효율성 증대: 웹 표준에 맞춰 웹 사이트를 작성하는 것 만으로도 검색 엔진에서 더 높은 우선 순위로 노출될 수 있음. 적절한 HTML 요소의 사용, 웹 페이지에 대한 정확한 정보 작성 등 검색 효율성과 관련된 내용도 웹 표준에서 다루고 있기 때문. 홍보를 위한 비용을 들이지 않아도 검색의 효율성을 높일 수 있게 되는 것.

4. 웹 접근성 향상: 브라우저의 종류, 운영 체제의 종류, 기기의 종류 등 웹에 접근할 수 있는 환경은 매우 다양하고, 또한 웹을 사용하는 사람들도 다양. 이 모든 환경과 사용자에 맞춰서 웹 페이지를 개발하는 일은 쉽지 않음. 하지만 웹 표준에 맞춰 개발하는 것 만으로도 이러한 문제를 해결할 수 있음.

시멘틱 HTML

웹 표준으로서 Semantic HTML은 거의 필수로 됐다.
이것이이렇게 마크업을 진행해야된다.
즉, 아무 기능이 없고 기본적으로 div의 성질을 띄고 있지만 인간이 보는 의미 상의 마크업을 하는 것이다.

구성요소

장점

  1. 개발자간 소통: div, span 요소로만 마크업 했을 때 각 요소의 기능이 어떤 걸 정의하는지 모른다. 각각 class, id로만 해야돼서 골치 아프다. 그래서 시멘틱 요소만으로도 귀찮은 과정을 생략할 수 있다!
  2. 검색 효율성: SEO 중에서도 중요하게 생각하는 요소들이 있다. 그게 바로 시멘틱 요소들! 만약 div 같은 걸로 다 짠다면 비슷한 중요도를 보여 SEO의 최적화에 어려움을 겪을 수 있다.
  3. 웹 접근성: 어떤 사람이든 항상 동일한 수준의 정보를 제공해야한다. 예를 들어 시각장애인이 음성으로 읽어주는 스크린리더를 사용하는데 이때 HTML이 시맨틱 요소로 이루어졌다면 콘텐츠를 좀 더 정확하게 전달할 수 있다.

웹표준 상 자주 틀리는 HTML 코드

주의하자!

1. 인라인 요소 안에 블록 요소 넣기

// h1, div 요소는 블록 요소이고,
// a, span 요소는 인라인 요소
<a href=""> <h1>나쁜 예시 1</h1> </a>
<span> <div>나쁜 예시 2</div> </span>

2. <b>, <i> 요소 사용하기

시멘틱하지 않은 표현이므로 지양

<b>글씨를 두껍게</b>   -- 대체하기 -->  <strong>콘텐츠 매우 강조하기</strong>
<i>글씨 기울이기</i>   -- 대체하기 -->  <em>콘텐츠 강조하기</em>

3. <hgroup> 마구잡이로 사용하기

잘못 쓰면 접근성 측면에서 완전히 잘못된 정보를 주기 십상

// 나쁜 예시
<h1>엄청 큰 글씨</h1>
    <h3>적당히 큰 글씨</h3>
  <h2>큰 글씨</h2>
          <h6>엄청 작은 글씨</h6>
      <h4>그냥 글씨</h4>

// 좋은 예시
<h1>제목</h1>
  <h2>큰 목차</h2>
    <h3>작은 목차</h3>
    <h3>작은 목차</h3>
  <h2>큰 목차</h2>
    <h3>작은 목차</h3>
      <h4>더 작은 목차</h4>
      <h4>더 작은 목차</h4>

4. <br /> 연속으로 사용하기

간격을 만들기 위해 남발 금물, <p>나 CSS를 사용해 간격 띄우기

// 나쁜 예시
요소 사이에 여백을 주고싶을 때
<br />
<br />
이렇게 하시면 안 됩니다.

// 좋은 예시 1
<p>요소 사이에 여백을 주고싶을 땐</p>
<p>아예 별도의 단락으로 구별하세요.</p>

// 좋은 예시 2
  //HTML 파일
<p class="margin">요소 사이에 여백을 주고싶을 땐</p>
<p class="margin">CSS 속성으로 여백을 설정해주세요.</p>

  // CSS 파일
.margin { margin: 10px }

5. 인라인 스타일링 사용하기

HTML, CSS, JS를 구분하기위해 웹표준을 만들었으니 같이 코드를 쌓는 건 지양

//HTML 파일
<head>
  <style>
    h1 { color : "red" }
  </style>
</head>

(O) <h1>스타일링 속성은 CSS로 작성<h1>
(O) <h2>style 요소를 사용해도, CSS 파일을 따로 작성해도 괜찮음<h2>
(X) <h3 style="color: blue">이렇게 인라인 스타일링으로는 사용 X</h3>  
 
//CSS 파일
h2 { color : "yellow" }

SEO

검색을 했을 때 최대한 원하는 내용이 맨 앞에 나와야 검색 툴로서 기능을 다할 수 있다!

검색 엔진 최적화(Search Engine Optimization), 검색 엔진의 작동 방식에 맞게 웹 페이지를 최적화

  • On-Page SEO : 말 그대로 페이지 내부에서 진행할 수 있는 SEO로, 제목과 콘텐츠, 핵심 키워드의 배치, 효율적인 HTML 요소 사용법 등을 이용하는 방법
  • Off-Page SEO : 웹 사이트 외부에서 이루어지는 SEO로, 소셜 미디어 홍보, 백링크(타 사이트에서 연결되는 링크) 등을 이용하는 방법, 웹페이지의 구조, 내용관 관계 X

On-Page SEO

1. <title> 요소

<head>태그의 자식으로 쓴다.

  • <title> 요소에 어떤 내용을 작성하는가에 따라서 검색 후 유입까지 유도 가능
    제목이 너무 길거나 짧아서 사용자가 제목으로 사이트를 파악하기 어려워지면 유입률이 떨어짐
  • <title> 요소에 핵심 키워드가 포함되면 상위에 노출될 확률이 높아짐
    그렇다고 같은 키워드를 반복하면 검색시 불이익을 받을 수 있음. 제목에 핵심 키워드는 한 번만 포함시켜 주자!

2. <meta> 요소

속성으로 name, property를 받고 각 값에 따라 메타 데이터, 오픈 그래프 등등을 쓸 수 있다.

  1. <head>태그의 자식으로 쓰는 메타 데이터를 담는 요소

    • 예시

  2. 오픈그래프를 만들 수 있는 요소

    • 예시

3. <hgroup> 요소

  • 콘텐츠 제목을 표시하는 요소이므로 검색 엔진도 중요한 정보가 있다는 걸 인식
  • 이미 사용한 핵심 키워드를 그대로 사용하지 않고 비슷한 키워드로 대체해서 사용하거나, 핵심 키워드의 관련 키워드들을 쭉 포함시키는 것이 좋음

4. 콘텐츠

당연히 SEO에 잡히는 내용도 중요하다.
1. 개성있는 브랜딩: 서비스 종류나 이름이 겹치지 않다면 메인으로 뜰 확률 증가. 웹 사이트만의 독특한 이벤트나 콘텐츠를 만들어내는 것도 훌륭한 방법
2. 복사 + 붙여넣기 금지: 타 사이트의 내용을 그대로 갖다 쓰면 중복 문서로 판별돼 생략됨. 주의!
3. 간결한 제목과 설명글: 제목과 설명에 관련되지 않은 정보가 있다면 이미지 하락, 의도가 뒤틀려짐
4. 최대한 글자로 작성하기: 이미지는 SEO가 감지를 못함. 꼭 쓴다면 <alt> 속성에 간결하게 글 넣기. 너무 길면 스팸으로 인식함

(O) <img src="코드스테이츠_로고.png" alt="코드스테이츠 로고" />
(X) <img src="코드스테이츠_로고.png" alt="프론트엔드 백엔드 블록체인 프로덕트매니지먼트 인공지능 데브옵스 등 다양한 커리어 전환 부트캠프를 진행하는 코드스테이츠 로고" />

웹 접근성

장애인, 고령자 등이 웹 사이트에서 제공하는 정보에 비장애인과 동등하게 접근하고 이해할 수 있도록 보장하는 것

추가로 정보 소외 계층 뿐만 아니라 정보 접근에 제한을 받는 상황에 있는 비장애인들에게도 도움이 돼 사용자층 확대될 수 있어 필수요건이다.

지침

인식의 용이성(Perceivable), 운용의 용이성(Operable), 이해의 용이성(Understandable), 견고성(Robust) 등으로 이루어져 적절한 대체 데이터와 가시성 등을 지침으로 내세우고 있다.

+ 참고: <input type="text" aria-label="검색어 입력" placeholder="검색어를 입력하세요." />
<input> 요소의 placeholder 속성은 레이블로 사용하기에는 적합하지 않음. placeholder만 있는 경우에는 꼭 레이블을 추가로 제공해야함.

WAI-ARIA

WAI와 ARIA를 합친 단어로 WAI에서 발표한 RIA 환경에서의 웹 접근성 기술 규격이라 생각하면 됨

  • ARIA (Accessible Rich Internet Applications) : 장애가 있는 사람들이 웹 콘텐츠와 웹 응용 프로그램에 더 쉽게 액세스할 수 있도록 하는, 즉 웹 접근성을 갖추기 위한 기술
  • RIA (Rich Internet Applications) : 따로 프로그램을 설치하지 않아도 웹 브라우저를 통해 사용할 수 있는 편리성 + 프로그램을 직접 설치해서 사용하는 것처럼 빠른 반응의 사용자 인터페이스를 동시에 가지는 웹 애플리케이션. SPA를 의미하는 경우가 많다.

시멘틱 요소에 더불어 추가적으로 의미를 부여해 보조적으로 웹 접근성을 향상시킨다.

사용법

속성에 추가하여 의미를 부여시킨다.

  • 역할(role) : HTML 요소의 역할을 정의하는 속성
  • 상태(state) : 요소의 현재 상태를 나타내는 속성
  • 속성(property) : 요소의 특징을 정의하는 속성(attribute)

1. 역할(Role)

<div role="button">div이지만 button으로 사용되는 요소</div>

// WAI-ARIA의 잘못된 사용 예시: HTML요소로 충분히 파악되면 안써도됨
<button role="button">button인 요소</button>
// WAI-ARIA의 잘못된 사용 예시: 의도와 다른 역할 부여 X
<h1 role="button">h1인 요소</h1>

예시: 커스텀컴포넌트 만들때 '탭'을 보자

// 컴포넌트 구조를 간소화
// WAI-ARIA 없음, 각각 무엇을 뜻하는지 모름
<div>
  <li>Tab1</li>
  <li>Tab2</li>
  <li>Tab3</li>
</div>
<div>Tab menu ONE</div>
<div>Tab menu TWO</div>
<div>Tab menu THREE</div>

// WAI-ARIA 있음
<div role="tabList">
  <li role="tab">Tab1</li>
  <li role="tab">Tab2</li>
  <li role="tab">Tab3</li>
</div>
<div role="tabpanel">Tab menu ONE</div>
<div role="tabpanel">Tab menu TWO</div>
<div role="tabpanel">Tab menu THREE</div>

2. 상태(State)

위의 탭 예시에 더불어 어떤 상태인지 확인

<div role="tabList">
  // aria-selected 라는 속성, 여러 개의 선택 가능한 요소중에서 선택 상태인 요소
  <li role="tab" aria-selected="true">Tab1</li>
  <li role="tab" aria-selected="false">Tab2</li>
  <li role="tab" aria-selected="false">Tab3</li>
</div>

<div role="tabpanel">Tab menu ONE</div>
<div role="tabpanel">Tab menu TWO</div>
<div role="tabpanel">Tab menu THREE</div>

또한 아코디언 UI가 펼쳐진 상태인지 표시해주는 aria-expanded, 요소가 숨김 상태인지를 표시하는 aria-hidden 등의 속성들이 있음

3. 속성(Property)

이따금 요소에 대한 정보를 전혀 얻을 수 없는 경우가 발생하기도 한다. 텍스트 콘텐츠 없이 이미지로만 만들어진 버튼이 대표적인 예시

// WAI-ARIA 없음, 각각 무엇을 뜻하는지 모름
<button> <img src="X.png" /> </button>
<button> <img src="돋보기.png" /> </button>
// WAI-ARIA 있음, aria-label은 말 그대로 요소에 라벨을 붙여주는 기능
<button aria-label="닫기"/> <img src="X.png" /> </button>
<button aria-label="검색"/> <img src="돋보기.png" /> </button>

또한 aria-live 속성은 해당 요소가 실시간으로 내용을 갱신하는 영역인지 표시하는 요소, alert, modal, dialog 와 같은 역할을 하는 요소이거나, AJAX 기술을 사용하여 실시간으로 내용을 갱신하는 영역에 사용하는 속성
속성값으론

  • polite : 스크린 리더가 현재 읽고있는 내용을 모두 읽고나서 갱신된 내용을 사용자에게 전달합니다.
  • assertive : 스크린 리더가 현재 읽고있는 내용을 중단하고 갱신된 내용을 바로 사용자에게 전달합니다.

다양한 요소들이 더 있지만 이정도만 해도 WAI-ARIA에 충분히 만족한다!

과제

웹 표준 & 접근성 개선을 과제로 한다.

🦏

profile
윤뿔소
코뿔소처럼 저돌적으로
이전 포스트

코드스테이츠_S3U4_3W_화,수,목

다음 포스트

코드스테이츠_S3U6_3W_수

0개의 댓글