웹 표준 & 웹 접근성 & SEO

December 23, 2024

웹 표준이 등장한 배경

넷스케이프 vs 인터넷 익스플로러 경쟁
과거에,
Netscape와 Internet Explorer가 서로 웹을 장악하기 위한 경정이 치열했고
개발자들은 Netscape와 Internet Explorer 두가지 버전의 페이지를 모두 개발했어야 했다.

Internet Explorer 독점
windows가 대중화되고 Internet Explorer가 기본 탑재가 되면서 넷스케이프는 하락세를 탔고
Internet Explorer가 독점하기 시작하면서 호환성을 고려하지 않은 대표적으로 ActiveX와 같은 자사에 유리한 플러그인을 대거 채용하게 된다.
당시에 Javascript는 웹 페이지에 제한적인 동적 기능을 추가하는 보조적인 역할만 수행했고
멀티미디어 콘텐츠는 거의 Flash를 통해서 구현되었다.

Javascript의 재평가
Flash는 멀티미디어 콘텐츠를 구현하는 데 강력했지만,
보안과 호환성 문제가 존재했다.
이런 상황에서 구글은
Flash 대신 자바스크립트를 통해 멀티미디어 콘텐츠를 구현하는 방법을 모색하여
Javascript 를 통해 비동기로 화면을 동적으로 구성하는 방법으로 Google maps 라는 서비스를 만들었고
이로 인해 자바스크립트의 가능성이 널리 알려지게 되었다.

웹 표준의 등장
스마트폰 시대가 도래하면서 웹은 다양한 기기와 운영체제에서 접근할 수 있게 되면서
웹 접근성 및 호환성 문제를 더욱 심화시켰다.
특정 OS나 브라우저에서만 동작하는 웹 페이지는 사용자 경험을 저해하고 웹의 개방성을 해치는 문제점을 야기했다.
Window, Internet Explorer, ActiveX등이 독점적 지위로 인해 자체 표준이 되어버린 상황에서
여러가지 브라우저 제작사를 포함 웹 종사자들이 다 같이 웹을 쓸 수 있도록 하는 웹 표준을 만들게 된다.
웹은 모두의 것이고 특정 제작사에 의해 관리되지 않아야 하고 웹의 발전을 위해서는 최적의 것들을 표준으로 만들어야 한다는 취지로 만들어진 것이다.

웹 개발의 새로운 기준
이를 기점으로 ActiveX나 Flash와 같은 비표준 기능 사용을 최소화하면서
웹 표준을 지켜서 html, css, javascript를 만들어 브라우저와 관계없이 동작할 수 있도록 했다.
이때부터 표준은 아니지만 표준이 되어버린 Internet Explorer에 맞춰주는
크로스 브라우징을 통해 개발하는 직군이 확장되기 시작하고,
웹 디자이너, 웹 개발자들에게는 웹 표준에 맞게 작성을 해야하고 Flash 대신 javascript나 css등을 이용해서 동적으로 화면을 만드는 능력을 요구받게 된다.
또한 이때 웹표준과 시맨틱 이라는 요소가 함께 강조되면서 검색에 유리한 구조와 의미를 부여하는 식으로 HTML과 CSS를 작성하고 시각장애인들과 같은 경우에도 웹을 사용할 수 있도록 하는 접근성에 대해서 강조가 되게 되었다.

크롬브라우저의 등장
구글은 웹을 하나의 OS로 만들고 싶어 했고,
Internet Explorer 보다 더 나은 브라우저를 필요로했다.
또한 Internet Explorer에서 디버깅 환경은 끔찍한 수준이었기 때문에
웹 개발에 용이한 디버그 기능도 필요로 했다.
그리하여 javascript 성능을 올리기 위해 자체적인 만든 V8 자바스크립트 엔진과
apple의 safari 오픈소스 웹브라우저 엔진인 webkit을 기반으로 한 크롬 브라우저가 탄생하게 되면서
빠른 속도를 제공하고 풍부한 디버깅 환경을 제공하게 되었다.

웹 표준 (Web Standards) 이란?

사용자가 어떠한 운영체제나 브라우저를 사용하더라도 웹페이지가 동일하게 보이고 정상적으로 작동할 수 있도록하는 웹에서 표준적으로 사용하는 기술이나 규칙이다.

→ 완벽히 동일한 화면을 의미하는 것이 아니라 모든 플랫폼에서 동등한 수준의 정보에 접근가능하다는 것을 의미한다.
웹 표준은 다양한 기관과 단체에서 제정한 여러 기술적 규범과 규칙을 포괄하고 있는데
대표적으로 표준화 단체인 W3C(World Wide Web Consortium)가 있다.

→ W3C가 권고한 표준안 에따라 웹사이트를 작성할 때 사용하는 HTML, CSS, Javascript 등에 대한 규정이 담겨 있다.
현재는 크롬, 엣지, 사파리 등 최신 웹 브라우저들은 모두 웹표준을 준수한다.

💡 웹 표준이 포괄하고있는 주체들

◾ W3C (World Wide Web Consortium): 웹 기술 표준을 개발하고 관리하는 핵심 기구입니다. HTML, CSS 등 주요 웹 기술 표준을 제정
◾ WHATWG (Web Hypertext Application Technology Working Group): HTML과 웹 API 표준을 개발하는 단체로 HTML5 표준 개발에 주도적인 역할
◾ IETF (Internet Engineering Task Force): 인터넷 프로토콜 및 관련 표준을 개발하는 기구이다. 웹의 기반 기술인 TCP/IP 등의 표준을 제정
◾ ISO (International Organization for Standardization): 다양한 분야의 국제 표준을 제정하는 기로 웹 관련 표준도 일부 제정
◾ Ecma International: JavaScript 표준 (ECMAScript)을 제정하는 기구
◾ 유니코드 컨소시엄: 유니코드 표준을 제정하는 기구입니다. UTF◾8 등 문자 인코딩 표준을 담당
◾ IANA (Internet Assigned Numbers Authority): 인터넷 도메인 이름, IP 주소 등 인터넷 자원을 관리하는 기관

웹 표준의 장점

웹 접근성 향상
- 브라우저의 종류, 운영 체제의 종류, 기기의 종류 등 웹에 접근할 수 있는 환경은 매우 다양하지만
  웹 표준에 맞춰 개발하면 어떤 브라우저를 사용하든 동일한 결과물을 얻을 수 있다.
- 특정 운영체제나 플랫폼에 종속되지 않고 다양한 브라우저, 휴대폰에서 접근이 가능해서 모든 사용자가 쉽게 이용할 수 있다.
- 스크린 리더, 키보드 내비게이션 등 보조 기술과의 호환성을 높여 장애인, 고령자 등을 포함한 사용자층도 확대 가능하다.
검색 효율성 증대
- 적절한 HTML 요소를 사용해서 콘텐츠의 의미를 명확하게 표현함으로써 검색 엔진이 웹 페이지의 주제와 내용을 더 잘 이해할 수 있도록 한다.
- 웹 표준에 맞춰 웹 사이트를 작성하는 것만으로도 검색 엔진에서 더 높은 우선순위로 노출될 수 있다.
유지 보수의 용이성
- 웹 표준으로 HTML, CSS, JavaScript 각 영역이 분리 되면서 코드의 가독성이 늘어나고 유지 보수가 용이해질 수 있다.
- 논리적이고 효율적으로 작성된 웹 문서는 코드의 양이 줄어 파일 크기가 줄고 서버부담의 감소되는 효과가 있다.

웹 접근성 (Web Accessibility) 이란?

웹 접근성은 모든 사용자가 신체적, 환경적 조건에 관계없이 받아들이고 이해하고 상호작용할 수 있도록 애플리케이션을 설계하고 구현하는 과정으로
즉, 어떠한 사용자(일반인, 장애인, 고령자 등)가
어떠한 환경(브라우저, 운영체제, 디바이스의 환경이나 사양 등)에서도
어려움 없이 접근, 이용할 수 있는 것을 웹 접근성이라고 한다.

웹 접근성 확보 기준 (WCAG)

웹 접근성이 확보되었는지 판단하는 기준은
WCAG (Web Content Accessibility Guidelines) 라는 국제 표준을 통해 알 수 있다.
WCAG 는 웹 사이트/애플리케이션에서 충족해야 하는 기준을 정의해서
장애가 있는 사용자가 보다 쉽게 이용할 수 있도록 준수해야 하는 지침으로,
웹 서비스를 제작하는 사람들이 기획/디자인/개발 과정에서 고려해야 할 요구사항이라고 할 수 있다.

WCAG의 4가지 원칙

WCAG는 각 지침을 4가지 원칙의 범주로 분류하여 제공한다.

인식 가능하고,
조작 가능하며,
이해 할 수 있고,
견고 해야 한다.

1) 운용 가능성 (Operable): 모든 사용자가 사용자 인터페이스를 조작할 수 있어야 한다.
◾ 키보드 접근성: 마우스 없이 키보드만으로도 웹 페이지를 탐색하고 기능을 사용할 수 있도록 해야 한다.
◾ 충분한 시간 제공: 사용자가 콘텐츠를 읽고 이해하는 데 충분한 시간을 제공해야 한다.
◾ 깜빡임 제한: 깜빡이는 콘텐츠는 시각적 불편을 초래할 수 있으므로 사용을 제한해야 한다.

1) 이해 가능성 (Understandable): 모든 사용자가 콘텐츠와 인터페이스를 이해할 수 있어야 한다.
◾ 명확한 텍스트: 텍스트는 명확하고 이해하기 쉬운 언어로 작성해야 한다.
◾ 예측 가능한 작동: 웹 페이지의 작동 방식은 예측 가능해야 한다.
◾ 오류 방지: 사용자가 실수를 하지 않도록 오류를 방지하는 기능을 제공해야 한다.

1) 견고성 (Robust): 다양한 사용자 에이전트에서 콘텐츠가 안정적으로 해석될 수 있어야 한다.
◾ 웹 표준 준수: 웹 표준 (HTML, CSS 등)을 준수하여 웹 페이지를 제작해야 한다.
◾ 접근성 있는 기술 활용: 접근성을 고려한 기술을 사용하여 웹 페이지를 제작해야 한다.

WCAG 레벨

WCAG에는 3개의 인증 레벨이 있다.
WCAG 레벨은 접근성 기준을 충족하는 정도에 따라 A, AA, AAA의 세 가지 레벨로 분류된다

level A (최소 기준): 최소한의 접근성 기준을 충족하는 수준으로
레벨 A의 성공 기준을 충족하지 못하면 특정 사용자 그룹이 웹 콘텐츠에 접근할 수 없게 될 수 있으므로
반드시 준수해야 하는 필수적인 기준이다.
level AA (중간 기준): 대부분의 사용자가 접근 가능한 수준으로,
레벨 AA는 일반적으로 웹사이트의 접근성을 개선하기 위한 평균 수준으로 많은 웹사이트가 이 레벨을 목표로 한다.
level AAA (최고 기준): 최고 수준의 접근성을 충족하는 수준으로,
레벨 AAA의 기준을 모두 충족하는 것은 매우 어렵다.

웹 접근성 자가 점검

웹 페이지와 WCAG 규정 준수를 분석할 수 있는 여러 도구가 있다.

WAVE (Web Accessibility Evaluation Tool)
- 웹사이트: https://wave.webaim.org/
- 특징: WCAG 2.1 기준을 기반으로 웹페이지의 접근성을 평가하고, 색 대비 비율을 포함한 다양한 접근성 문제를 식별한다.
Contrast Checker by WebAIM
- 웹사이트: https://webaim.org/resources/contrastchecker/
- 특징: WCAG 2.0 및 2.1 기준에 따라 텍스트와 배경 색상의 대비 비율을 계산하고 평가한다.
axe Accessibility Checker
- 웹사이트: https://www.deque.com/axe/
- 특징: WCAG 기준을 기반으로 웹 접근성 문제를 식별하며, 브라우저 확장 프로그램으로 사용이 간편하다.
Tota11y (종합도구)
- 웹사이트: https://khan.github.io/tota11y/
- 특징: Khan Academy에서 개발한 오픈 소스 웹 접근성 시각화 도구로, WCAG 기준에 따른 색 대비 평가를 포함한 다양한 접근성 문제를 확인할 수 있다.
Lighthouse (종합도구)
- 웹사이트: https://developers.google.com/web/tools/lighthouse
- 특징: Google Chrome DevTools에 내장된 도구로, 웹 페이지의 접근성, 성능, SEO 등을 종합적으로 평가합니다. WCAG 기준에 따른 색 대비 비율도 제공한다.

💡 현재 웹의 평균 WCAG 레벨은?

비영리 단체 WebAIM 리포트 에서 분석한 결과에 따르면
웹상의 홈페이지 중 대부분이 WCAG2 AA 기준에 부합하지 못한다고한다.
웹 접근성 확보를 위해서는 WCAG의 4가지 원칙 참고해서 웹 페이지를 제작하고,
웹 접근성 평가 도구를 사용해서 자가 점검을 통해 보완하자.

내가 구현한 사이트의 경우 WCAG2 AA 기준에는 부합하고
전경색과 배경색의 대비가 충분하지않고 버튼에 식별 가능한 텍스트가 없는 몇몇 요소가 있다고 결과가 나왔다.

💡 WCAG의 발전

◾ WCAG 2.0 (2008년 발표): 4가지 원칙(인식 가능, 운용 가능, 이해 가능, 견고함) 기반으로 12개의 지침과 61개의 성공 기준으로 구성되며, 기술 중립적이고 검증 가능성을 강조한다.
◾ WCAG 2.1 (2018년 발표): WCAG 2.0을 기반으로 모바일 기기와 저시력, 인지 장애 사용자를 위한 추가 지침을 포함하며, 모바일 접근성, 저시력 사용자에 대한 기준, 인지 장애 사용자 지원을 강화한다.
◾ WCAG 3.0: 현재 개발 중인 차세대 가이드라인으로, 다양한 사용자 요구를 반영하고 유연한 평가 방법을 포함하며, 최신 웹 기술과 트렌드를 반영한 새로운 지침과 기준을 제시할 예정이다.

접근성을 높이는 방법

웹 접근성을 높일 때 고려해야 개인별 특성이 있는데
각 특성별로 어떤식으로 접근성을 높일 수 있는지 알아보자.

운동 조절 장애
시각 장애
청각 장애
인지 기능 장애

운동 조절 장애를 위한 방법

1. 키보드 내비게이션 지원

일부 사용들은 마우스를 사용할 수 없기 때문에, 모든 기능이 키보드로 접근 가능하도록 하여 마우스를 사용하지 못하는 사용자도 웹 페이지를 탐색할 수 있도록 한다.
요소 사이를 탐색하기 위해 tab 키 사용할 수 있도록,
버튼을 누르거나, 체크 박스를 선택하거나, 드롭다운을 확장하기 위해 enter 또는 space를 사용할 수 있도록 구현한다.

2. 활성화된 요소가 표시 되도록한다.

운동 조절 장애가 있는 사용자는 손이나 팔의 움직임을 조절하는 데 어려움을 겪을 수 있기 때문에
활성화된 요소가 명확하게 표시되면 사용자는 실수로 잘못된 요소를 선택하는 것을 줄일 수 있다.
기본적으로 브라우저는 활성화되어있는 버튼에 빨간색 테두리를 표시한다.

3. 탭 순서는 논리적이어야 한다.

키보드 사용자들에게 HTML이 논리적으로 구성되어 있는 것은 중요하다.
tab 키를 이용하여 페이지를 탐색할 때, 요소들이 적절한 순서로 하이라이트 되어야 한다.
이를 위한 방법은 웹 사이트의 HTML을 합리적인 방식으로 구조화하는 것이다.

4. 좁은 터치 범위를 피해야 한다.

모바일 기기에서 버튼이나 상호작용 요소에 대해 터치 범위가 너무 좁지 않도록 주의해야 한다.
WCAG 규칙에서는 최소 44 CSS 픽셀 이상을 규정하고 있다.

5. 모바일의 모든 기능은 간단한 제스처로 작동할 수 있어야한다.

운동 조절 장애가 있는 사용자들을 위해 고려해야 하는 또 다른 사항은 복잡한 제스처를 피하는 것이다.
간단한 제스처는 한 개의 손가락만을 사용하고, 스와이프 길이에 의존적이지 않은 것이 좋다.

시각 장애를 위한 방법

1. 색상 대비

시각 장애의 관점에서 가장 첫 번째로 고려해야 할 사항은 색의 대비이다.
색상 대비는 요소의 색상과 배경색의 비율로 계산된다.
WCAG에는 요소와 텍스트에 대한 색상 대비의 기준이 있는데
CCA (Color Contrast Analyser) 라는 도구를 사용하면 색상 대비를 쉽게 계산해서
색상 대비가 WCAG AA 나 AAA 기준을 만족했는지 여부도 알 수 있다.

2. 색맹인 사용자들을 위한 구현

녹색맹은 적색과 녹색이 거의 구분이 어렵기 때문에 이를 염두하고 UI를 구현하는 것이 중요하다.
색맹인 사용자들을 위해 UI를 구현하는 방법으로는 색상 뿐만아니라 심볼을 이용하는 방법이 있다.

에러가 표시된 영역에 빨간 테두리와 에러 심볼이 모두 표시해서 확실한 에러 상태임을 인지시킬 수 있다.

3. 확대 비율과 글꼴 크기

시각 장애 사용자들을 위해 한 가지 더 고려해야 할 사항은
사용자가 확대 비율 과 글꼴 크기 를 늘릴 때도 웹 페이지가 깨지지 않아야 한다는 것이다.
브라우저의 확대 기능은 시각 장애가 있는 사용자들이 많이 사용하는 기능이기 때문에
200% 확대했을 때 깨지는 것이 없도록 200% 테스트를 진행하는 것이 좋다.

청각 장애를 위한 방법

청각 장애를 위해 수용해야 할 주요 사항은 바로
중요한 정보가 오디오만을 통해 전달되어서는 안 된다 는 것이다.

중요한 정보가 아니라면 웹 페이지 상의 오디오를 통해 전달되어도 괜찮지만,
그렇지 않다면 영상의 경우에는 자막이 있는 것이 좋다.

인지 기능 장애를 위한 방법

1. 소요 시간 기반의 작업 피하기

사이트에서 사용자가 작업에 소요할 시간을 가정해서는 안 된다.
예를 들어, 에러 메시지나 팝업이 몇 초 뒤에 자동으로 사라지게 해서는 안 된다.
사용자들에게 콘텐츠를 읽을 충분한 시간을 제공해야 하기 때문입니다.
이와 유사하게 입력 폼에는 제한 시간을 둬서는 안 된다.
우리는 사용자가 읽거나 작업을 마무리하는 데 걸리는 시간을 가정해서는 안된다.
광고 또는 팝업과 같은 부수적인 콘텐츠를 최소화한다.

2. 간단한 폼과 자동 입력

폼은 간단히 채울 수 있고, 쉽게 이해할 수 있어야 하고, 명료한 에러 메시지를 보여줘야한다.

자동 입력 (Autofill)은 사용자들이 신용 카드 넘버나 주소를 외울 필요 없도록 도와주는 도구로
HTML autofill 속성을 이용하여 쉽게 적용할 수 있다.

  autofill="off"
  autofill="name"
  autofill="email"
  autofill="organization"
  autofill="street-address"
  autofill="country"
  autofill="postal-code"
  autofill="cc-number"
  autofill="bday"
  autofill="tel"
    
  <form>
    <label for="card-number">카드 번호:</label>
    <input type="text" id="card-number" name="card-number" autocomplete="cc-number" required><br><br>
  </form>

스크린 리더를 위한 방법

1. 올바른 HTML 태그 사용

웹 개발자들은 종종 기본 HTML 요소를 사용하는 대신 자체적으로 HTML 요소를 생성하는 경우가 있는데
흔한 예시는 <button> 대신 <div> 를 사용하는 것이다.
<button> 요소는 기본적으로 키보드와 스크린 리더와 같은 보조 기술에 최적화되어 있다.
반면 <div>는 기본적으로 이러한 기능을 제공하지 않기 때문에,
접근성이 떨어져 장애인을 포함한 모든 사용자가 웹 콘텐츠를 이용하는 데 어려움을 겪을 수 있다.

// button처럼 동작하기 위해 스타일링을 적용한 커스텀 <div>
<div style={...} onClick={fn}/>// 기본 HTML 버튼
<button onClick={fn}/>

<input type="checkbox" id="subscribe" name="subscribe" checked>
<a href="https://www.example.com">예시 웹사이트 방문하기</a>

하지만 기본 HTML 요소는 스크린 리더가 의존하는 많은 의미 체계를 담고 있습니다. 예를 들어

input 의 checkbox 에는 box가 checked 되었는지를 나타내는 속성이 있고, 이는 스크린 리더가 읽을 수 있다.
<a> 의 link 에는 링크가 visited 되었는지를 나타내는 속성이 있고, 이 또한 스크린 리더가 읽을 수 있다.

스크린 리더의 접근성을 높이는 가장 쉬운 방법은 새로운 요소를 만드는 대신 기본 HTML 요소를 사용하는 것이다.

2. aria-labels 사용하기

ARIA(Accessible Rich Internet Applications)는 마크업에 추가할 수 있는 속성 모음이다.
ARIA 속성들은 웹 페이지에 접근성 도구(접근성 평가 도구, 스크린리더)와 소통할 수 있는 정보를 추가해주지만,
웹 페이지의 모습이나 동작에는 영향을 미치지 않는다.

aria-label은 스크린 리더가 읽을 수 있도록 요소에 라벨을 더해주는 속성으로
예를 들어, 스크린 리더 사용자가 아이콘 하나만을 가지는 버튼에 접근할 때 유용하게 사용될 수 있다.

<button aria-label="Copy"><CopyIcon/></button>

3. ARIA 랜드마크 role 사용하기

ARIA 랜드마크 role은 웹 페이지의 구조를 명확하게 정의해서
스크린 리더 사용자들이 페이지를 더 쉽게 탐색할 수 있도록 도와주는 것이다.
요소에 role="..." 을 추가하면 스크린 리더 사용자들은 쉽게 랜드마크를 탐색할 수 있다.
ARIA 랜드마크 role에는 8가지가 다.

role="banner"
role="navigation" (ex. 메뉴)
role="main" (페이지 상의 메인 콘텐츠)
role="complementary" (ex. 사이드 바)
role="contentinfo"
role="search"
role="form"
role="application"

<header role="banner">
    <h1>사이트 제목</h1>
</header>

<nav role="navigation">
    <ul>
        <li><a href="#home">홈</a></li>
        <li><a href="#about">소개</a></li>
    </ul>
</nav>

<aside role="complementary">
    <h3>관련 정보</h3>
    <p>여기에 보조 정보가 들어갑니다.</p>
</aside>

4. 장식 콘텐츠 숨기기

스크린 리더를 위한 마지막 팁은 장식 콘텐츠를 숨기는 것이다.
스크린 리더에 정보를 제공하는 것이 아닌 장식을 위한 용도(ex.이미지)로 웹 페이지에 사용된 것이 있다면,
이를 완전히 숨기는 것이 스크린 리더에 좋다.
aria-hidden 속성을 요소에 추가함으로써 장식 콘텐츠를 숨길 수 있다.

<img aria-hidden="true"/>

SEO (Search Engine Optimization) 란?

SEO는 웹사이트가 검색엔진의 검색 결과에서 더 높은 순위를 차지할 수 있도록 최적화하는 과정으로
웹사이트의 트래픽을 증가시키고, 더 많은 사용자에게 노출되도록 유도할 수 있다.
예를 들어, 적절한 태그를 활용한 키워드 강조, 메타 태그 활용, img의 alt 속성 기재 등 다양한 방법을 통해 최적화를 진행할 수 있다.

앞서 웹 표준에 맞춰 웹 사이트를 작성하는 것만으로도 검색 엔진에서 더 높은 우선순위로 노출될 수 있다고 했다.
웹표준을 준수한다는 것은 웹 접근성과 시맨틱 마크업과 긴밀하게 연결이 되어있고
웹 접근성과 시맨틱 마크업과 같은 기술은
검색 엔진이 웹 사이트의 콘텐츠를 더 잘 이해하고 색인화하는 데 도움을 주기 때문이다.
하지만 웹 표준을 준수와 검색엔진최적화가 동일하다고 할 수는 없다.
웹표준은 검색엔진최적화의 여러 요소 중 한부분이다.

검색엔진의 종류

구글, 네이버, 다음 등 각 플랫폼마다 검색엔진이 모두 다르고 정책도 다르기 때문에
각 플랫폼이 제공하는 검색엔진 최적화 가이드를 보면 최적화를 하는데 큰 도움이 될 수 있다.

네이버 가이드 → https://searchadvisor.naver.com/guide/
다음 가이드 → https://cs.daum.net/faq/15/15649.html#31070
구글 가이드 → https://developers.google.com/search/docs/beginner/seo-starter-guide?hl=ko

구글 검색 작동 방식

구글에서는 다음 세 가지 기본 단계에 따라 검색어를 분석하여 검색 결과를 사용자에게 제공한다.

1. 웹 크롤링

가장 처음에 검색 엔진은 웹에 어떤 페이지가 존재하는지 파악해야 한다.
구글은 막대한 수의 컴퓨터를 사용하여 수십억 개의 웹 페이지를 가져온다.
이 작업을 크롤링이라고 한다.
그리고 이때 크롤링을 실행하기 위해 웹페이지를 가지고 오는 프로그램을 사용하게 되는데
이러한 프로그램들을 보통 구글봇 혹은 로봇, 크롤러, 스파이더라고 부르기도 한다. (네이버의 경우 yeti, 다음의 경우 daum)
검색엔진은 계속해서 새 페이지를 검색하여 페이지 목록을 갱신하고, 추가해야 한다.
새로운 페이지는 이미 알려진 페이지에서 새 페이지로 연결되는 링크를 따라가며 발견된다.

2. 색인 생성(Indexing)

페이지가 발견되면 검색 엔진은 페이지가 어떤 내용을 담고 있는지 분석하기 시작한다.
이 과정을 색인 생성 이라고 한다.
검색 엔진은 텍스트 콘텐츠, 주요 콘텐츠 태그, 속성값 (title, alt 등등)을 통해
페이지의 콘텐츠를 분석하고 삽입된 이미지와 동영상 파일의 목록을 작성하며 페이지를 파악하려고 한다.
그리고 이 정보는 최종적으로 DB에 저장되어 사용된다.

<!-- 검색로봇의 색인 생성 작업을 막는 메타태그 -->
<meta name="robots" content="noindex,nofollow">

<!--
noindex: 검색결과에 이 페이지, 미디어 또는 리소스를 표시하지 않습니다.
이 지시어를 지정하지 않으면 페이지, 미디어 또는 리소스가 색인 생성되어 검색결과에 표시될 수 있습니다.

nofollow: 이 페이지의 링크를 따라가지 않습니다.
이 지시어를 지정하지 않으면 Google에서는 페이지의 링크를 사용하여 링크된 페이지를 검색할 수 있습니다.
-->

3. 순위가 반영된 검색 결과 제공

사용자가 검색어를 입력하면 검색 엔진은 내부적인 알고리즘을 이용해 가장 관련성 있는 답변을 찾고 이와 더불어 사용자의 위치, 사용자의 모국어, 사용자가 이용중인 데스크톱 또는 휴대전화 등의 기기 환경 등을 고려해서 가장 적절한 순위의 답안을 제시한다. 이때 검색 결과를 빠르게 전달하고자 하기 때문에 웹 페이지가 빠르게 로드 되고 모바일 친화적이 될수록 더 높은 순위에 지정될 수 있다.

SEO 기본 가이드

1.<title> 태그를 통해 정확한 페이지 제목 정하기

<html>
<head>
	<title>에어비앤비: 휴가용 임대 숙소, 통나무집, 비치 하우스, 독특한 숙소 및 체험</title>
</head>
<body>
...

<title> 태그는 검색 엔진에 페이지의 주제가 무엇인지 알려준다.
한 가지 사이트에 소속되어 있다고 해서 단일한 내용으로 페이지 제목을 통일하는 것이 아니라
페이지 마다 고유한 제목을 사용하면 검색 엔진은 각각의 페이지가 서로 어떻게 쓰임이 다른지 파악 할 수 있다.
제목이 너무 길거나 관련성이 낮은 것으로 판단되면 검색엔진
은 검색 결과에 제목의 일부만 표시하거나 자동으로 생성된 다른 제목을 표시할 수도 있기 때문에 짧고 간결한 제목을 사용한다.

2. description 메타 태그 사용하기

<html>
  <head>
       
    <meta
      name="description"
      content="에어비앤비에서 세계 곳곳의 휴가용 임대 숙소, 통나무집, 비치 하우스, 독특한 숙소 및 체험을 찾아보세요. 호스트 분들이 있기에 가능합니다."
    />
  </head>
  <body>
    ...
  </body>
</html>

description 메타 태그에 쓰여진 내용은 페이지가 담고 있는 내용을 요약하여 서술하는 스니펫으로 사용될 수 있다.
구글에서 페이지에 표시되는 텍스트 중에 사용자의 검색어와 잘 어울리는 텍스트가 있는 경우 이를 스니펫으로 선택할 수도 있지만
스니펫을 찾지 못하는 경우도 있기 때문에 description 메타 태그를 각 페이지에 추가하는 것은 항상 권장된다.
웹 페이지의 제목 아래에 제공되는 설명이기 때문에
사용자가 자신에게 관련된 정보가 있는지 판단하는 데 필요한 텍스트를 담고 있는 것이 좋다.
<title> 태그와 마찬가지로 각 페이지에 서로 다른 description 메타 태그가 있으면
site: 연산자를 사용한 검색했을 때 특정 사이트 안에서 여러 개의 페이지를 가져오는데 도움이 된다.

site: 연산자를 통해 검색된 화면 예시

3. 제목 태그(h1 ~ h6) 사용하기

h1 ~ h6 태그는 페이지의 구조를 정의하고, 검색 엔진이 페이지의 주요 내용을 이해하는 데 도움을 준다.
의미 있는 제목을 사용해서 중요한 주제를 표시하고 콘텐츠의 계층 구조를 만들어
사용자가 쉽게 문서를 탐색할 수 있도록 하는 것이 좋다.
중요도를 생각하지 않고 무질서하게 섞어 쓰는 경우는 지양해야 하고 구획의 제목을 나타내야하는 경우에만 제목 태그를 사용하는 것이 좋다.

4. 의미있는 링크 텍스트 작성하기

<a href="https://www.example.com/about">seo에 대해 알아보기</a>

링크 텍스트는 <a> 태그 내부의 콘텐츠 영역에 위치한 텍스트로
사용자와 Google에 지금 들어가려는 페이지가 어떤 페이지인지에 대한 설명을 제공한다.
적절한 앵커 텍스트를 사용하면 사용자와 검색엔진이 연결된 페이지의 내용을 쉽게 이해할 수 있다.

“웹사이트”, “쇼핑몰”, “여기를 클릭하세요” 등 그 의미를 짐작하기 어려운 텍스트나
연결된 페이지와 아무런 관련이 없는 텍스트를 사용하는 경우,
텍스트의 내용이 연결된 url 주소 그 자체일 경우는 피하도록 작성하는 것이 좋다.

5. <img> 태그 활용하기

<a href="https://www.example.com">
    <img src="https://www.example.com/link-image.jpg" alt="웹사이트 로고 이미지" width="300" height="200">
</a>

<img> 태그을 사용하면 크롤러가 이미지를 찾고 처리할 수 있다.
alt 속성 값을 사용할 때, 이미지와 관련된 설명을 제공해야 한다.
alt 속성을 사용하면 어떤 이유로 이미지를 표시할 수 없을 때 대신 표시할 텍스트를 지정할 수 있다.
또한 alt 속성의 내용은 사용자가 스크린 리더와 같은 보조 기술을 사용하여 사이트를 보고 있을 때 그림에 관한 정보를 제공한다.
이미지를 링크로 사용하는 경우,
해당 이미지의 대체 텍스트가 텍스트 링크의 앵커 텍스트와 비슷하게 취급되는데
이 경우, alt 속성이 적절한 설명을 제공한다면 앵커 텍스트는 생략해도 좋다.
이를 통해 구글에서는 링크하려는 페이지에 대해 더 잘 이해할 수 있다.

시맨틱 태그 (semantic) 란?

HTML5에서 도입된 의미를 부여한 태그로,
웹 페이지의 구조와 콘텐츠를 설명하는 역할을 한다
시맨틱 태그는 요소의 역할과 의미를 더 잘 나타내므로
이러한 태그를 사용하면 웹 페이지의 내용을 더 명확하게 정의할 수 있고
검색 엔진은 의미론적 마크업을 분석해서
페이지의 검색 노출 순위에 영향을 줄 수 있는 중요한 키워드로 간주한다.
또한 스크린리더로 페이지를 탐색할 때 의미론적 마크업을 푯말로 사용할 수 있다.

코드 가독성 향상
- HTML 코드가 더 의미적이고 읽기 쉬워지므로, 코드의 가독성이 향상되어 협업과 유지보수가 더 쉬워진다.
SEO 개선
- 검색 엔진 최적화를 위해 웹 페이지 구조와 콘텐츠를 명확하게 정의할 수 있으므로 검색 엔진은 웹 페이지를 더 잘 이해하고 색인화할 수 있게되어 검색 엔진 순위가 향상된다.
웹 접근성 향상
- 스크린 리더는 의미적인 태그를 해석해서 사용자에게 콘텐츠를 읽어주므로스크린 리더와 같은 보조 기술을 활용하는 사용자들이 웹 페이지를 더 쉽게 이해하고 활용할 수 있다이로 인해 웹 접근성이 향상된다.
유지보수 용이성
- 의미적인 마크업을 사용하면 특정 부분을 찾고 수정하기가 더 쉽기때문에레이아웃을 변경하거나 스타일을 업데이트할 때 수월하다즉, 웹 사이트의 유지보수 비용을 절감하는 데 도움이 된다.

💡 시맨틱 태그가 나오기 이전

시맨틱 태그가 나오기 이전에는
<div> 태그로 일일히 위치 범위를 지정하고
각 태그의 class 명으로 이 요소의 역할을 명시해야 했다.

시맨틱 태그 구성 요소

태그	의미
`<header>`	HTML 문서나 섹션(section) 부분에 대한 헤더(header)를 정의함.제목, 로고, 검색 폼 등을 포함할 수 있음.
`<nav>`	HTML 문서 사이를 탐색할 수 있는 링크(link)의 집합을 정의함.주로 메뉴, 목차, 색인 등을 나타냄.
`<main>`	HTML 문서의 주요 콘텐츠(content)를 정의함.독립적인 구획을 나타내며, 더 적합한 의미를 가진 요소가 없을 때 사용.
`<section>`	HTML 문서에서 섹션(section) 부분을 정의함.
`<article>`	HTML 문서에서 독립적으로 구분해 배포하거나 재사용할 수 있는 구획을 나타냄.ex) 게시판과 블로그 글, 매거진이나 뉴스 기사
`<aside>`	HTML 문서에서 페이지 부분 이외의 콘텐츠(content)를 정의함.문서의 주요 내용과 간접적으로 연관된 부분을 나타내며, 주로 사이드바 혹은 콜아웃 박스로 표현함.
`<figure>`	HTML 문서에서 그래픽과 비디오 등의 독립적인 콘텐츠(content)를 정의함.<figcaption> 요소를 사용해 설명을 붙일 수 있으며 피규어, 설명, 콘텐츠는 하나의 단위로 참조됨.
`<figcaption>`	부모 요소가 포함하는 다른 콘텐츠에 대한 설명 혹은 범례를 나타냄.
`<footer>`	HTML 문서나 섹션(section) 부분에 대한 푸터(footer)를 정의함.일반적으로 구획의 작성자, 저작권 정보, 관련 문서 등의 내용을 담음.

reference

DongSup Ahn