웹 표준(Web Standards)과 시맨틱 태그(Semantic Tag)
⌨️ 웹 표준에 대하여(Web Standards)
우리는 어떤 정보를 얻기 위해 혹은 특정 서비스를 경험하기 위해 다양한 플랫폼 및 페이지에 접속을 하고 이러한 페이지는 웹 브라우저 위에서 동작하게 된다.
이때 중요한 점은, 웹 브라우저의 종류가 하나가 아니기 때문에 사람마다 혹은 컴퓨터마다 다른 웹 브라우저를 사용할 수 있다는 점이다.
쉬운 예로, 누군가는 Chrome을 사용하거나 누군가는 Safari를, 누군가는 Internet Explorer를 사용할 수 있다.
이렇듯, 개인의 취향에 따라 혹은 특정 환경에 따라 각자 다른 웹 브라우저를 사용하게 되는데 간혹 동일한 웹 페이지가 브라우저마다 다르게 보이는 경우가 있다.
우리가 사용하는 웹 브라우저는 그 종류별로 사로 다른 기업에서 만들어졌기 때문에 작성된 코드도 다를 것이고 이에 따라 마크업 언어로 작성된 html 파일을 해석하는 방법도 다 다를 것이다.
이러한 이유로 같은 html 파일이라고 할지라도 각각의 브라우저 해석 방식에 따르게 되면 서로 다르게 보이는 부분이 분명 존재하게 되는 것이다.
그렇다면, 모든 웹 브라우저가 동일하게 같은 정보를 나타낼 수 있도록 하기 위해서는 어떻게 해야 할까?
이때 등장하는 개념이 바로 웹 표준이다.
웹 표준?
웹 표준이란 브라우저 종류 및 버전에 따른 기능 차이에 대하여 호환이 가능하도록 제시된 표준으로, 다른 기종 혹은 플랫폼에 따라 달리 구현되는 기술을 동일하게 구현함과 동시에 어느 한쪽에 최적화되어 치우치지 않도록 공통 요소를 사용하여 웹 페이지를 제작하는 기법을 의미한다.
[ 웹발전연구소 ]
👉🏻 위의 사전적 정의를 쉽게 풀어서 설명하자면,
브라우저별로 동일한 웹 페이지가 나타날 수 있도록 웹 페이지 제작 시 지켜야 하는 규칙 및 약속을 문서로서 표현한 것이라고 할 수 있다.
( = 웹 사이트를 작성할 때 사용되는 HTML, CSS, JavaScript에 대한 표준 규칙 및 규정 )
그렇다면 웹 표준을 지켜야 하는 이유는 무엇일까?
- 앞서 말했던 것과 같이 서로 다른 웹 브라우저라 할지라도 개발자가 의도한 대로 모든 웹 브라우저에서 동일한 웹 페이지가 보여야 하기 때문에 반드시 웹 표준을 지켜야 한다.
- 더불어, 웹 접근성의 이유도 있다.
웹 접근성이란 어떤 사용자가 어떠한 상황에서도 큰 어려움 없이 웹 사이트를 이용하고 사용할 수 있는 것을 말하는데, 신체적 어려움이 있는 사용자라 할지라도 그렇지 않은 사용자들과 동일하게 웹 사이트를 이용할 수 있도록 해야 한다는 의미로 해석할 수 있다.
웹 접근성의 대표적인 예시가 바로 스크린 리더 소프트웨어다. 시각장애가 있는 사용자의 경우에는 직접적으로 화면을 볼 수 없기 때문에 스크린 리더라는 소프트웨어를 별도로 사용하게 된다. 스크린 리더가 원활하게 웹 사이트를 판독하기 위해서는 웹 표준을 준수하는 것이 필수적이기 때문에 개발자는 반드시 웹 표준을 준수하여 사이트를 제작할 수 있도록 해야 한다.
웹 표준은 웹 호환성과 웹 접근성을 위해서 반드시 준수해야 한다.
더 알아보기 → Standards-W3C
🖱️ 시맨틱 태그에 대하여(Semantic Tag)
시맨틱 태그?
Semantic은 '의미의', '의미론적인'의 뜻을 가진 용어로 Semantic Tag는 의미가 있는 태그를 말한다.
시맨틱 태그를 통해 요소의 의미를 고려하고 구조를 설계하여 웹 사이트 코드를 작성하는 것을 시맨틱 웹이라고 한다.
대표적인 시맨틱 태그에는 <header></header> <section></section> <main></main> 등이 있다.
이러한 시맨틱 태그는 특정 의미를 담고 있어, 웹 사이트 구조를 설계하는데 유용하게 사용된다.
시맨틱 태그의 사용 역시 웹 표준과 같이 필수는 아니지만 적극 권고하고 있는 부분인데
왜 시맨틱 태그를 사용해야 하는 걸까?
- 웹 표준에서 언급한 웹 접근성의 이유
- 검색 엔진 최적화(SEO) 이유 → 검색 엔진 최적화는 검색 랭킹과 관련된 개념으로, 검색 엔진은 시맨택 태그를 통한 마크업을 분석하여 검색 랭킹에 영향을 줄 수 있는 키워드로 판단하게 된다. 결국,
검색 엔진은 태그를 기반으로 검색 키워드의 우선순위를 판단하기 때문에의미 있는 태그를 사용하는 것이 좋다. - 코드의 유지 및 보수 이유 → 대부분의 코드들은 리팩토링을 통해 구조가 변경되거나 혹은 재사용 될 수 있다. 이미 작성된 코드들을 다시 살펴보고 쉽게 이해하기 위해서는 의미가 없는 태그들을 사용하는 것보다는
의미가 담겨 있는 시맨틱 태그를 사용하여 코드의 구조를 한 번에 알아볼 수 있도록 하는 것이 중요하다. 더불어, 다른 개발자들과의 커뮤니케이션을 위해서라도 의미가 담겨 있는 코드로 직관적인 구조를 짜는 것이 좋다.
