뒤로 갈수록 한 단원을 며칠동안 공부하게 된다. 아무래도 난이도가 올라가고 배워야 할 내용도 많아지다보니 그런듯 하다.
목차
1. 웹 표준이란?
우선 '웹'이 뭔지부터 알아보자. 주소창의 맨 앞에 붙어있는 'www(World Wide Web)'을 간단히 부르는 말이며, '인터넷에 연결된 사용자들이 서로의 정보를 공유할 수 있는 공간'을 의미한다.
웹과 인터넷을 헷갈릴 수 있는데, 인터넷은 ‘전 세계적으로 연결되어 있는 컴퓨터 네트워크 통신망’을 의미하며, 웹뿐만 아니라 온라인 게임, 모바일 앱, 이메일 등 네트워크를 사용하는 다양한 서비스들을 모두 포함한다.
따라서 인터넷은 포괄적인 개념이고, 웹은 인터넷의 수많은 서비스중 하나일 뿐이다.
여튼, 웹은 '브라우저'를 통해 클라이언트에게 화면을 보여준다. 그런데, 같은 웹 페이지를 받아오더라도 브라우저에 따라 제대로 표현이 되지 않는 경우가 생길 수 있다. 바로 브라우저간 '호환'이 되지 않아서인데, 과거에는 이런 현상이 심해서 크롬에서 정상적으로 출력되는 페이지가 익스플로러나 사파리 등의 다른 브라우저에서는 제대로 출력되지 않는 경우가 비일비재했다.
이는 특정 브라우저의 개발 환경에만 맞추어 웹 페이지를 만들었을 때 생기는 현상으로, 이러한 문제를 해결하기 위해서는 각 브라우저의 개발환경에 맞춰 따로 개발을 해주어야 했다. 쉽게 말해 익스플로러용 페이지 따로, 크롬용 페이지 따로, 사파리용 페이지 따로,,..,.,,,,
상상만 해도 머리가 아프기 때문에, 이런 수고를 덜고자 웹 개발의 형식을 통일시킨 것이 바로 웹 표준이다.
웹 표준이란 W3C에서 권고하는 ‘웹에서 표준적으로 사용되는 기술이나 규칙’으로, 사용자가 어떠한 운영체제나 브라우저를 사용하더라도 웹페이지가 동일하게 보이고 정상적으로 작동할 수 있도록 하는 웹 페이지 제작 기법을 담고 있다.
크롬, 엣지, 사파리, 오페라, 파이어폭스 등 최신 웹 브라우저들은 모두 웹 표준을 지원하므로, 웹 표준에 맞추어 제작된 페이지라면 어떤 브라우저를 사용하든 동일한 결과물을 얻을 수 있다. 브라우저 호환 때문에 화면이 제대로 표시되지 않거나 기능이 작동하지 않는 등의 문제 상황을 방지할 수 있는 것이다.
따라서, 웹 페이지를 제작할 때에는 웹 표준을 최대한 준수하는 것이 좋다.
웹 표준에 맞춰서 웹 페이지를 작성하면 다음과 같은 장점이 있다.
- 유지 보수의 용이성
- 웹 호환성 확보
- 검색 효율성 증대
- 웹 접근성 향상
2. Sementic HTML
웹 표준에서는 시멘틱 HTML을 강조한다. 시멘틱 HTML은 학습 초기 HTML을 배울 때 잠깐 등장했던 개념으로, 요소 자체에 어떤 기능을 하는지 담겨있는 요소들을 말한다.
우리는 그동안 HTML 문서를 만들 때 보통 <div> 태그나 <span> 태그, <p> 태그를 이용했다.
화면을 나눌때는 <div> 태그, 문단을 만들때는 <p> 태그나 <span> 태그를 이용하는 것만으로 충분히 페이지 구성이 가능하긴 하다.
하지만, 이런 와이어 프레임 없이 코드만 주어졌다고 생각해보자.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="container">
<div class="top"></div>
<div class="content">
<div class="div1">
</div>
<div class="div2">
<div class="innetContent">
<span class="content1"></span>
<span class="content2"></span>
</div>
</div>
<div class="div3">
</div>
</div>
</div>
</body>
</html>
구체적인 클래스나 id를 명시하지 않으면 이 div나 span이 어떤 역할을 하는지 직관적으로 알기가 힘들다.
또한 div들의 위치도 상위, 하위 div나 기타 요소들을 하나하나 찾아가며 확인해야 한다는 불편함도 있다.
반면, 시멘틱 태그를 사용하면 각 요소의 이름만 보고도 화면에서 어떤 역할을 하게 될지, 어떤 내용을 담게 될지 보다 더 명확하게 알 수 있다.
코드도 훨씬 직관적이고 쉽게 파악 가능하다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="container">
<header></header>
<nav></nav>
<main>
<article>
<section></section>
<section></section>
</article>
</main>
<aside></aside>
</div>
</body>
</html>시멘틱 요소의 종류
| 요소 | 역할 |
| <header> | 페이지나 요소의 최상단에 위치하는 머리말 |
| <nav> | 메뉴, 목차 등에 사용 |
| <aside> | 문서와 연관은 있지만, 직접적인 연관은 없는 내용을 담음 |
| <main> | 이름 그대로 문서의 메인이 되는 주요 콘텐츠를 담음 |
| <article> | 게시글, 뉴스 기사 등 독립적으로 구분해 재사용할 수 있는 부분을 의미. 각각의 <article>을 구분하기 위한 수단이 필요하며, 보통 제목(<hgroup>)을 포함하는 방법을 사용. |
| <section> | 문서의 독립적인 구획. 제목(<hgroup>)을 포함하는 경우가 많습니다. |
| <hgroup> | 제목 표시. <h1> ~ <h6>까지를 <hgroup>이라 함 |
| <footer> | 페이지나 요소의 최하단에 위치하는 꼬리말 |
그렇다면 시멘틱한 HTML은 왜 필요할까?
1. 개발자 간 소통
<div>와 <span>만으로 페이지를 구성하다보면 요소의 이름만 보고서는 각 요소가 어떤 기능을 하는지 전혀 파악할 수 없기 때문에 주석을 작성해서 설명하거나 id나 class를 사용해서 일일이 표기해야 하는 불편함이 있다.
만약 id와 class를 사용할 경우에는 이름을 붙이거나, 이 요소가 어떤 역할을 하는지 일일히 설명해줘야 할 수도 있다.
하지만 시멘틱 요소를 사용한다면 이런 불편함을 쉽게 해소할 수 있다.
2. 검색 효율성
검색 엔진은 HTML 코드를 보고 문서의 구조를 파악하는데, <div>와 <span>의 중요도를 비슷하게 보기 때문에 각 요소에 어떤 내용이 들어있건 똑같은 기준으로 판단한다. 하지만 시멘틱 요소를 사용하면, 어떤 요소에 더 중요한 내용이 들어있을지 우선순위를 정할 수 있고, 우선순위가 높다고 파악된 페이지를 검색 결과 상단에 표시해 준다.
웹 페이지를 검색 엔진에 더 자주 뜨게 만들고 싶을 때, 광고비 등의 추가 지출을 하지 않고 시멘틱 HTML을 잘 짜는 것만으로도 어느 정도 효과를 볼 수 있다는 것이다.
3. 웹 접근성
웹 접근성은 나이, 성별, 장애 여부, 사용 환경을 떠나서 항상 동일한 수준의 정보를 제공할 수 있어야 함을 말한다.
HTML이 시멘틱 요소로 구성되어 있다면 텍스트 뿐만 아니라 화면의 구조에 대한 정보까지 추가로 전달해 줄 수 있어 콘텐츠를 좀 더 정확하게 전달할 수 있게 된다.
3. 크로스 브라우징
크로스 브라우징(Cross Browsing)이란 웹 사이트에 접근하는 브라우저의 종류에 상관없이 동등한 화면과 기능을 제공할 수 있도록 만드는 작업을 의미한다.
브라우저마다 사용하는 렌더링 엔진이 다르기 때문에 화면을 완전히 동일하게 만드는 것은 불가능하다. 따라서, 크로스 브라우징의 목표는 모든 브라우저에서 완전히 동일하지 않아도 어느정도 동등한 수준의 정보와 기능을 제공하는 것이다.
상기했던 '브라우저간 호환'이 되지 않는 것도 크로스 브라우징이 제대로 되지 않았다는 것을 의미한다.
크로스 브라우징은 각종 메서드로도 쉽게 알아볼 수 있다.
MDN의 메서드 설명 페이지에 들어가면, 맨 아래쪽에 Browser compatibility라는 항목이 있다.
여기서 No라고 쓰여진 브라우저는 해당 메서드들을 지원하지 않는다는 것이다.
Array.toSpliced()라는 메서드를 통해 크로스 브라우징을 실험해 보자.
위 사진은 toSpliced 메서드의 Browser compatibility로, 파이어폭스와 삼성 인터넷에서 지원이 안되는 것을 볼 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
let arr = ['one', 'two', 'three', 'four']
document.write(`기존 배열 : <h1>${arr}</h1><br>`)
let newArr = arr.toSpliced(1, 0, 'five')
document.write(`새 배열 : <h1>${newArr}</h1><br>`)
</script>
</body>
</html>
다음과 같은 코드를 HTML 페이지를 만들고, 이를 크롬과 삼성 인터넷에서 각각 실행시켜 보았다.
크롬에서는 toSpliced 메서드를 이용해 만든 배열 newArr가 출력되지만, 삼성 인터넷에서는 출력이 되지 않는 모습을 볼 수 있다. 만약 toSpliced 메서드만을 이용해 배열을 다루는 페이지를 삼성 인터넷으로 연다면, 거의 빈 화면만이 출력될 확률이 높다.
따라서, 크로스 브라우징을 확실히 하기 위해선 정밀한 테스트 과정을 거쳐야 한다.
- 안정적인 데스크톱 브라우저(크롬, 엣지, 파이어폭스, 오페라, 사파리 등)에서 테스트를 진행
- 휴대폰 및 태블릿 브라우저(삼성 인터넷, 사파리, 안드로이드 기기의 크롬 등)에서 테스트를 진행
- 그 외에도 초기 기획 단계에서 목표했던 브라우저가 있다면 해당 브라우저에서 테스트를 진행
- Window, Linux, Mac 등 다양한 운영 체제에서도 테스트를 진행
4. SEO
기타 앰프를 사기 위해 구글에 앰프를 검색해 보았다.
그랬더니, 기타 앰프가 무엇인지에 대한 페이지보다 기타 앰프 판매 페이지가 더 상단에 노출되어 있었다.
저 페이지들은 어떻게 상단에 위치할 수 있는 것일까?
이러한 검색 결과에 영향을 주는 것이 바로 SEO이다.
SEO는 Search Engine Optimization의 준말로, '검색 엔진 최적화'를 뜻하며, SEO를 통해 검색 엔진에서 웹 페이지를 보다 더 상위에 노출될 수 있게끔 만들 수 있다.
SEO는 크게 두가지로 나뉜다.
- On-Page SEO : 페이지 내부에서 진행할 수 있는 SEO로, 제목과 콘텐츠, 핵심 키워드의 배치, 효율적인 HTML 요소 사용법 등을 이용하는 방법.
- Off-Page SEO : 웹 사이트 외부에서 이루어지는 SEO로, 웹 페이지의 구성이나 요소와는 관련 없는 소셜 미디어 홍보, 백링크 등을 이용하는 방법
맨 위 앰프 판매 페이지들은 전부 'Off-Page SEO'를 통해 광고비를 지불하고 검색 결과의 상단에 위치하고 있는 것이다.
자세히 보면 '스폰서'라는 문구가 붙어있는 것을 볼 수 있다.
그렇다면 광고를 하지 않은 페이지들은 어떻게 검색 결과의 상단에 노출될 수 있을까?
수많은 페이지 중 한 페이지에 들어가 보았다.
각종 <meta> 태그와 <title> 태그에 핵심 키워드인 '앰프'가 담겨있는 것을 볼 수 있다.
이는 On-Page SEO의 예시로, 웹 페이지에서 사용하는 HTML 요소의 종류와 요소에 들어가는 내용도 검색 결과에 영향을 주는 것을 알 수 있다.
그렇다면, SEO에 영향을 주는 요소들은 어떤 것들이 있는지 알아보자.
A. <title>
<title> 요소는 검색 결과창에서 제목에 해당하는 요소로, <head> 요소의 자식 요소로 작성한다.
제목은 검색 결과에서 상당히 중요한 역할을 하므로, 핵심 키워드를 포함해서 간결하게 작성하는 것이 좋다.
2. <meta>
<meta> 요소는 메타 데이터를 담는 요소이다. 메타 데이터란 해당 웹 사이트에서 다루고 있는 데이터가 무엇인지에 대한 데이터로, 쉽게 말해 '페이지 요약 데이터'라고 할 수 있다.
<meta> 요소도 <head> 요소의 자식 요소로 적는다.
위 이미지처럼 검색 결과창에서 제목 밑에 따라오는 설명글이 <meta> 요소 안에 들어있는 내용이다.
소셜 미디어나 채팅 애플리케이션에서 링크를 공유했을 때 뜨는 링크 미리보기와 관련 정보도 이 <meta> 요소에 들어가 있는 내용중 하나이다.
이 두 가지의 경우 모두 <meta> 요소를 사용하지만, 각각의 목적이 다르다.
첫 번째 경우는 name 속성을 사용하며, SEO를 위해서 사용하는 것이 목적이다. 즉, meta 요소에도 핵심 키워드를 넣음으로써 검색 엔진에 좀더 잘 걸리도록 만드는 것이다.
<meta name="속성값" content="내용" />
| 속성값 | 설명 |
| description | 콘텐츠에 대한 간략한 설명 |
| keywords | 웹 페이지의 관련 키워드들을 나열 |
| author | 콘텐츠의 제작자를 표시 |
반면 두 번째 경우는 property 속성을 사용하며, 다른 사람에게 공유하기 위한 것이 목적이다. 특히 property 속성을 사용하는 경우는 오픈 그래프(Open Graph)라고 하며, 각 속성값 앞에는 오픈 그래프를 뜻하는 “og”가 붙는다.
<meta property="속성값" content="내용" />
| 속성값 | 설명 |
| og:url | 페이지의 표준 URL |
| og:site_name | 사이트의 이름 |
| og:title | 콘텐츠의 제목 |
| og:description | 콘텐츠에 대한 간략할 설명 |
| og:image | 미리보기로 표시될 이미지 |
| og:type | 콘텐츠 미디어의 유형. 기본 값은 website로, video, music 등의 유형을 표시 가능 |
| og:locale | 리소스의 언어 |
3. <hgroup>
<hgroup> 요소는 콘텐츠의 제목을 표시하는 용도인만큼 핵심 키워드를 포함하고 있을 가능성이 높다. 따라서 검색 엔진도 <hgroup> 요소의 내용을 중요하게 취급한다. 그렇기 때문에 콘텐츠를 작성할 때 핵심 키워드를 의식해서 <hgroup> 요소에 넣어주는 것도 SEO에 도움이 된다.
하지만 똑같은 키워드만 반복해서 넣는 것은 역효과를 불러올 수도 있으므로, 이미 사용한 핵심 키워드를 그대로 사용하지 않고 비슷한 키워드로 대체해서 사용하거나, 핵심 키워드의 관련 키워드들을 쭉 포함시키는 것이 좋다.
4. 콘텐츠
- 개성 있는 브랜딩
- 복사 + 붙여넣기 금지
- 간결한 제목과 설명글
- 최대한 글자로 작성하기
'Frontend Study' 카테고리의 다른 글
| [FE_Bootcamp] 55일차_네트워크 (0) | 2023.05.01 |
|---|---|
| [FE_Bootcamp] 53일차_Web 접근성 (0) | 2023.04.28 |
| [FE_Bootcamp] 50일차_Redux 상태관리 (0) | 2023.04.26 |
| [FE_Bootcamp] 31일차_클라이언트-서버 통신 (0) | 2023.04.24 |
| [FE_Bootcamp] 46일차_Component Driven Development (0) | 2023.04.20 |
