웹표준과 시맨틱 태그에 대해
웹 퍼블리셔로 취직을 준비 하고 있는데 가장 기본적인 것을 놓친 것 같아 다시 공부하고자 이렇게 정리해서 작성해본다!
먼저 웹 퍼블리싱이란?
ㅡ> 디자이너가 구상한 웹 디자인을 구조화하여 웹상에서도 볼 수 있도록 코딩하고 관리하는 것을 말하는데,
구조화할 때는 페이지 구조부터 디자인 표현, 사용자 경험까지 고려하며 작업해야하며
HTML, CSS, 웹 표준, 웹 접근성에 대한 이해도도 있어야 한다.
그렇다면 HTML, CSS 는 알겠는데 웹 표준, 웹 접근성은 뭘까?
사실 학원을 다니면서 HTML 과 CSS 는 주구장창 다뤄봐서 알겠는데 웹 표준과 웹 접근성에 대해서는 수업 완전 초기에 슬쩍 발가락만 담구고 나온 정도였기 때문에 웹 표준, 웹 접근성에 대해 이해도가 낮다.
그래서 이 웹 표준과 웹 접근성에 대해 알아보고자 한다.
웹 표준 (Web Standards) 이란 무엇일까?
- W3C (World Wide Web Consortium) 에서 권고하는 웹에서 표준적으로 사용되는 기술이나 규칙
- 사용자들이 각기 다른 운영체제나 브라우저를 사용하더라도 웹 페이지가 동일하게 보이고 정상적으로 작동할 수 있도록 하는 것
쉽게 말하면 모든 브라우저 환경에서 동일하게 화면이 보여질 수 있도록 제작하는 기법이며
누군가는 Chrome을 쓰고 누군가는 Safari를 쓰고 누군가는 Microsoft Edge를 쓰고 누군가는 Firefox 를 사용 하는 등 개인의 취향에 따라 혹은 특정 환경에 따라 각자 다른 웹 브라우저를 사용하게 되는데 간혹 동일한 웹 페이지가 브라우저마다
다르게 보이는 경우가 있다.
우리가 사용하는 웹 브라우저는 각각 다른 기업에서 만들어졌기 때문에
작성된 코드도 다를거고 마크업 언어로 작성된 html 파일을 해석하는 방법도 다 다를 것이다.
이러한 이유로 같은 HTML 파일이라고 할지라도 각각의 브라우저 해석 방식에 따르게 되면서 서로 다르게 보이는 부분이 존재하게 되는데 이런 문제를 해결하고 모든 웹 브라우저에서 동일하게 같은 정보를 나타낼 수 있도록 제작 하는 기법이 웹 표준이다.
그렇다면 웹 표준의 장점은 무엇일까?
1. 웹 페이지 호환성
ㄴ 웹 표준을 준수하여 제작하면 웹 페이지가 모든 브라우저에서 항상 동일한 결과가 나온다.
2. 웹 접근성 향상
ㄴ 웹 표준을 준수하여 제작하면 모든 사용자가 웹 페이지에 쉽게 접근할 수 있도록 웹 접근성이 향상된다.
3. 검색 엔진 최적화 (SEO - Search Engine Optimization)
ㄴ 웹 표준을 준수하여 제작하면 검색 엔진에서 웹 페이지를 잘 인식할 수 있고
이를 통해 검색 엔진에서 상위에 노출될 수 있도록 최적화할 수 있다.
4. 유지 보수의 용이
ㄴ 웹 표준을 준수하면 HTML, CSS, JavaScript 등 각 영역이 분리 되면서 유지 보수가 용이해진다.
또한, 코드가 경량화 되면서 트래픽 비용 즉 서버 부담의 감소로 이어지게 된다.
웹 표준에서는 HTML을 시맨틱(semantic) 하게 작성 하는 것이 중요하다.
왜냐? 웹 호환성과 웹 접근성을 위해서 반드시 준수하는게 좋다.
그렇다면 시맨틱하게 작성 하는 것은 무엇인지 알아보자.
먼저 시맨틱 태그가 있는데 이 시맨틱 태그는 HTML5에 처음 등장 했으며,
시맨틱(semantic) = 의미의, 의미론적인 라는 뜻의 영어단어에서 보여지듯이 의미있는 태그 라는 뜻이다.
그렇다면 시맨틱하게 작성 하는 것은 ? 말 그대로 의미있는 태그로 작성 하는 것이다.
HTML( Hypertext Markup Language )은 화면의 구조를 만드는 마크업 언어인데 단순히 구조를 만드는 언어의 영역을 넘어 구조를 만들면서 의미를 갖도록 만드는 것이다.
단순히 div 와 span과 같이 의미가 없는 태그로만 화면을 구성하는 것도 가능하지만 의미를 담고 있지 않다보니 이런 태그가 어떤 기능을 하는지 알 수 없다.
어떤 기능을 하는지 알 수 없다면 시맨틱 태그 설명이 끝나면 추가로 포스팅하여 설명하겠지만
웹 접근성에서 문제가 생길 수 있기 때문에 시맨틱 태그를 사용하여 구성하도록 권고하고 있다.
그렇다면 시맨틱 태그는 어떤 것이 있을까?
시맨틱 요소들로 위 사진과 같이 직관적으로 웹 사이트를 구성할 수 있는데,
시맨틱 태그 종류는 <header>, <main> , <section> , <article> , <aside> , <footer> , <nav> , <hgroup> 이 있다.
위 시맨틱 태그에 대해 자세히 설명해 보자면,
<header>
<header> 태그는 통상적으로 사이트의 도입부, 머릿 부분에 사용되며 사이트의 로고나 제목 등을 기술할 때 사용한다.
또한, <header>는 하나의 구역이기 때문에 부수적인 태그들이 안에 들어갈 수 있으며 주로 <nav>를 사용해 사이트 메뉴를 만들어 넣거나 <form> 태그로 검색창을 만들어 놓는 등 페이지 머릿 부분에 필요한 요소들을 만들 수 있다.
추가적으로 HTML 문서 내에 여러개의 <header>태그를 넣는 것도 가능하다.
<main>
<main> 태그는 페이지의 메인 콘텐츠를 나타낼 때 사용하며 반드시 한 번만 사용 되어야 한다.
또한, <main> 태그 내의 콘텐츠는 해당 문서의 중심이 되는 주제나 확장되는 콘텐츠로 구성되어야 하며, 문서 전반에 걸쳐 반복되는 내용을 포함해서는 안된다.
그렇기에 하나의 문서에는 단 하나의 <main> 요소만이 존재해야 하며,
<main> 요소는 <article>, <aside>, <footer>, <header>, <nav> 요소의 자손 요소가 되어서는 안된다.
<section>
<section> 태그는 HTML 문서에 포함된 독립적인 섹션(section)을 정의할 때 사용하며 콘텐츠의 영역이라 볼 수 있다.
즉, 여러가지 콘텐츠들을 그룹으로 묶어주는 역할을 하며 보통 제목 요소 <h1> ~ <h6>를 자식 요소로 포함 하고 있는 경우가 많다.
또한, <article> 태그와는 달리 <section> 태그는 재배포할 수 없는 콘텐츠로 인식하는 점 참고!
<article>
<article> 태그는 <section> 태그와 마찬가지로 특정한 영역을 그룹화할 때 사용한다.
하지만 article과 section은 엄연히 다른 태그이고 용도도 다르며,
article은 section과는 다르게 독립적으로 존재할 수 있으며, 재사용할 수 있다.
또한, 문서, 페이지, 애플리케이션, 또는 사이트에서
독립적으로 배포 가능하거나 재사용할 수 있는 콘텐츠를 묶는 영역으로 사용되며
예를 들어, 게시판 글, 뉴스 기사, 블로그 글, 댓글 등이 있다.
쉽게 설명하자면 태그를 적용한 부분의 일부분을 독립적으로 배포하거나 재사용하더라도 완전히
하나의 콘텐츠가 된다면, <article> 태그를 사용하면 된다.
추가로 검색엔진의 검색로봇에서는 <article> 태그가 사용된 콘텐츠를 배포할 수 있는 콘텐츠로 인식한다.
<aside>
<aside> 태그는 페이지 내 주요 콘텐츠와 직접적인 연관을 가지고 있지만 않지만 간접적으로 연관된 내용으로
구성된 별도의 부분을 나타내는 태그로 주로 사이드바 혹은 문서의 내용과 관련된 추가 정보를 제공하는 작은 영역으로 표현된다.
특히 블로그나 웹 사이트에서 왼쪽 또는 오른쪽에 사이드바가 있는 것을 종종 볼 수 있는데
그런 sidebar 를 <aside> 태그로 사용하면 좋다.
< footer >
<footer> 태그는 주로 웹 문서 하단에 들어가는 태그로 보통 저작권 정보나 저작권 표기와 같은 내용이 들어가는 부분이다.
<footer> 태그 안에 <section>, <article> 등 다른 레이아웃 태그들을 모두 사용할 수 있으며
주로 저자(author) 정보, 저작권 정보, 연락처, 사이트맵등을 기재한다.
< nav>
<nav> 태그는 네비게이션을 표현하기 위한 태그로써 동일한 사이트 안의 다른 문서나
다른 사이트의 문서로 연결하는 링크들의 모음이다.
이 태그를 사용하면 어느 부분이 네비게이션인지 쉽게 알 수 있고, 본문 위치에 영향을 받지 않는다.
즉, header / footer / aside 태그를 안에 포함 시킬 수도 있고 독립적으로 사용할 수도 있다.
추가로 <nav> 요소를 사용하는 일반적인 예로는 메뉴, 목차, 인덱스 등이 있으며,
글을 읽지 못하는 사용자를 위한 스크린 리더기와 같은 브라우저는 <nav> 요소를 사용하여
해당 콘텐츠의 초기 렌더링을 생략할지 여부를 결정한다.
< hgroup >
<hgroup> 태그는 제목과 부제목을 묶어서 나타내 주는 요소로 즉 <h1>, <h2>... 이렇게 연속해서 나올 때 묶어주기 위한 태그이며,
페이지 전체 구조에 대한 개념으로 쉽게 눈에 들어오게 하는 역할을 담당한다.
(사실 이 태그는 지금까지 한 번도 써본 적이 없다...)
이렇게 시맨틱 태그들에 대해서 알아보았는데 시맨틱 태그 사용의 경우 필수는 아니지만 적극 권고하고 있는 부분인데,
그렇다면 대체 왜 시맨틱 태그를 사용 해야 하는 걸까?
1. HTML 문서의 가독성과 유지보수가 쉬워지기 때문입니다.
만약 모든 태그들이 div 로만 만들고 문서의 내용이 길어졌을 때 어디가 어느 부분인지, 이 부분은 어떤 영역인지
한 눈에 파악하기가 힘든데 시맨틱 태그를 활용하면 유지보수 등을 할 때 다른 작업자가 내 코드를 보고
코드를 파악하기가 보다 쉬워지기 때문이다.
2. 웹 브라우저가 HTML만 보고도 상단(header), 본문(main), 하단(footer), 사이드(aside) 등 어느 영역인지 쉽게 알 수 있다.
이는 웹 접근성면에서도 중요하게 여겨지는데 왜냐하면 시각 장애인들이 사이트를 이용할 때 사용하는 화면의 텍스트를 읽어주는
스크린 리더기 등을 통해 활용될 수 있기 때문이다.
3. 검색엔진이 검색을 수행할 때 HTML내의 태그를 분석할 수 있다.
예를 들어 검색엔진의 검색로봇에서는 <article> 태그가 사용된 콘텐츠를 재배포할 수 있는 콘텐츠로 인식하는데
반대로 <section> 태그로 묶은 콘텐츠는 재 배포를 금지하는 콘텐츠로 인식하기 때문이다.
4. 검색 엔진 최적화(SEO)
검색 엔진 최적화는 검색 랭킹과 관련된 개념으로 검색 엔진은 시맨택 태그를 통한 마크업을 분석하여
검색 랭킹에 영향을 줄 수 있는 키워드로 판단하게 된다.
결국, 검색 엔진은 태그를 기반으로 검색 키워드의 우선순위를 판단하기 때문에 의미 있는 태그를 사용하는 것이 좋다.