SEB FE 42_TIL

웹 표준 및 웹 접근성

김피치 2023. 1. 3. 17:00

웹 표준

  • 웹 표준이란 W3C(World Wide Web Consortium)에서 권고하는 ‘웹에서 표준적으로 사용되는 기술이나 규칙’
  • 사용자가 어떠한 운영체제나 브라우저를 사용하더라도 웹페이지가 동일하게 보이고 정상적으로 작동할 수 있도록 하는 웹 페이지 제작 기법
  • 웹 개발에 사용되는 언어인 HTML(화면의 구조), CSS(표현), JavaScript(동작) 등의 기술

 

 

웹 표준 준수 시의 이점

  1. 유지 보수의 용이성
    웹 표준으로 HTML, CSS, JavaScript 로 화면의 구조, 표현, 동작 영역이 분리되면서
    유지 보수가 용이 / 코드의 경량화 / 트래픽 비용 감소
  2. 웹 호환성 확보
  3. 검색 효율성 증대
  4. 웹 접근성 향상

 

시맨틱 HTML (Semantic HTML)

  • 시맨틱 요소*를 적절하게 사용하여 구성한 HTML
    • 시맨틱 요소: 요소가 어떤 내용을 담게 될지, 어떤 기능을 하게 될지 확실하게 의미를 가지고 있는 요소

 

 

 

 

웹 접근성

 

웹 접근성 준수 시의 이점

  1. 개발자간 소통
    다인원 개발 시 타 개발자가 작성한 비시맨틱 요소의 기능을 파악하고 정의하는 데에 드는 시간 절약
  2. 검색 효율성
    시맨틱 요소를 사용하면, 어떤 요소에 더 중요한 내용이 들어있을지 우선 순위를 정할 수 있고, 우선 순위가 높다고 파악된 페이지를 SEO가 검색 결과 상단에 표시
  3. 웹 접근성
    시맨틱 요소가 화면의 구조에 대한 정보까지 추가로 전달해줄 수 있어 콘텐츠를 좀 더 정확하게 전달하여 웹 접근성 향상

 

 

 

자주 사용되는 시맨틱 요소

 

 

 

자주 틀리는 마크업

  1.  인라인 요소 안에 블록 요소 넣기
    👉 블록 요소(<div>) 안에 인라인 요소(<span>, <a>)를 넣을 것
  2.  <b>, <i> 요소 사용하기
    👉 <strong>, <em> 으로 대체
  3. <hgroup> 마구잡이로 사용하기
    👉 목차 작성 시 콘텐츠의 상하 관계를 제대로 생각하여 작성
    (h1~h6, 숫자가 작을 수록 글자 크기가 크고, 숫자가 커질 수록 크기가 작아진다)
  4. <br /> 연속으로 사용하기
    👉 <br /> 은 줄바꿈 용도로만 사용
    요소 사이에 간격 필요한 경우 별도의 단락으로 구분(<p>)하거나 css 속성에서 여백을 조정할 것
  5. 인라인 스타일링 사용하기
    👉 HTML과 CSS 코드 분리하여 작성

 

 

 

SEO(검색 엔진 최적화, Search Engine Optimization)

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

 

On-page 내 통제 요소

1. <title> 요소

<title> 요소는 검색 결과창에서 제목에 해당하는 요소로, <head> 요소의 자식 요소로 작성

올바른 <title> 요소 작성으로 검색 후 유입까지 유도 및 상위에 노출될 확률이 상승

 

2. <meta> 요소

<meta> 요소는 메타 데이터*를 담는 요소

메타 데이터: 해당 웹 사이트에서 다루고 있는 데이터가 무엇인지에 대한 데이터

<meta> 요소도 <head> 요소의 자식 요소로 작성

검색 결과창, 링크를 공유했을 때 뜨는 링크 미리보기와 관련 정보도 <meta> 요소에 들어감

 

2-1. <meta> 요소 사용 목적

  1. name 속성을 사용하며, SEO를 위해서 사용
  2. property 속성을 사용하며, 다른 사람에게 공유하기 위해 => 오픈 그래프(Open Graph) 라고 하며, 페이스북(현 Meta)에서 게시물을 공유하기 위한 목적으로 만들었으며, 각 속성값 앞에는 오픈 그래프를 뜻하는 “og”가 붙음

 

SEO를 위한 meta 요소

<meta name="속성값" content="내용" />

 

오픈 그래프 (open graph)

<meta property="속성값" content="내용" />

 

3. <hgroup> 요소

<hgroup> 요소는 콘텐츠의 제목을 표시하는 용도인만큼 핵심 키워드를 포함하고 있을 가능성이 높음

이미 사용한 핵심 키워드를 그대로 사용하지 않고 비슷한 키워드로 대체하거나, 핵심 키워드의 관련 키워드들을 포함하는 것이 좋음

 

4. 콘텐츠

  • 개성있는 브랜딩
  • 복사 + 붙여넣기 금지
    타 사이트의 글을 그대로 복사해서 사용하면 검색 엔진은 중복 문서로 판정하여 아예 검색 결과에서 생략하는 경우도 있음
  • 간결한 제목과 설명글
  • 최대한 글자로 작성하기
    검색엔진이 읽을 수 없는 이미지로만 내용을 작성하는 것은 지양
    꼭 이미지를 넣어야 한다면 alt 속성을 사용하여 해당 이미지에 대한 설명을 텍스트로 추가하는 것이 좋음