웹
문서, 이미지, 영상 등 다양한 정보를 여러 사람들과 공유할 수 있는 공간
웹 표준
웹 표준이란, W3C에서 권고하는 웹에서 표준적으로 사용되는 기술이나 규칙으로, 사용자가 어떠한 운영체제나 브라우저를 사용하더라도 웹페이지가 동일하게 보이고 정상적으로 작동할 수 있도록 하는 웹 페이지 제작 기법을 담고있다. 웹 표준은 웹 개발에 사용되는 언어인 HTML, CSS, JavaScript 등의 기술을 다루며 이 세 기술은 화면의 구조, 표현, 동작을 각각 담당한다.
웹 표준의 장점
- 유지 보수의 용이성
- 웹 호환성 확보
- 검색 효율성 증대
- 웹 접근성 향상
Semantic HTML
웹 표준에서는 HTML을 시맨틱하게 만드는것이 중요하다.
HTML의 구조에 의미를 갖게 만드는것이 중요하다는 의미이다.
예를 들어, 단순한 <DIV> 태그를 사용해서도 <header>와 같은 형태를 만들 수 있지만, <header>를 사용했을 때, 이 부분이 어떤 역할을 하게 되는지, 명확한 의미를 담게 된다.
Semantic HTML의 필요성
이 시맨틱 HTML 이 왜 필요한가,
- 개발자간 소통
- 검색 효율성
- 웹 접근성
첫째로, 여러 개발자가 협업으로 페이지를 개발하며 시맨틱하지 않은 요소로만 HTML 코드를 작성한다면, 요소의 이름만 보고서는 각 요소가 어떤 기능을 하는지 파악할 수 없기 때문에, 주석을 달거나 id, class를 이용해 일일히 표기해야한다. 이 경우, 이름을 어떻게 지을것인지도 협의해야하고 이름이 어떤 의미인지 설명하는 시간까지 필요하게 된다. 이런 부분이 시맨틱 요소를 사용한다면 전부 생략되게 된다.
둘째로, 검색 엔진은 HTML 코드를 보고 문서의 구조를 파악하는데, 시맨틱 요소를 사용하지 않은 문서에서는 모든 요소가 비슷한 중요도의 내용을 담고 있다고 판단한다. 하지만 시맨틱 요소를 사용하면, 어떤 요소에 더 중요한 내용이 들어있을지 우선 순위를 정할 수 있고, 우선 순위가 높다고 파악된 페이지를 검색 결과 상단에 표시하게 되므로 검색 효율성 측에서도 이득을 볼 수 있다.
셋째로, 웹 접근성에서도 이득을 볼 수 있는데, 이는 추후 다루도록 하겠다.
크로스 브라우징
웹 사이트에 접근하는 브라우저의 종류에 상관 없이 동등한 화면과 기능을 제공할 수 있도록 만드는 작업.
여기에서 중요한 포인트는 '동일한' 이 아니라 '동등한' 이라는것. 브라우저마다 사용하는 렌더링 엔진이 다르기 때문에, 화면을 완전히 동일하게 만드는 것은 불가능에 가깝다.
따라서, 크로스 브라우징의 목표는 모든 브라우저에서 동등한 수준의 정보와 기능을 제공하는것이다.
크로스 브라우징의 워크플로우
- 초기 기획 첫째로, 어떤 웹 사이트를 만들 것인지 정확하게 결정한다. 어떤 콘텐츠, 기능이 있어야하는지, 디자인은 어떻게 할지, 고객층은 누구인지, 사용할 브라우저는 무엇일지, 기기는 무엇일지들을 파악하여 여기에 맞는 기술을 사용하여 개발할 수 있도록 기획한다.
- 개발 코드를 작성할 때 사용하는 코드가 각 브라우저에서의 호환성이 어떤지 파악하고 사용해야 한다. MDN, Can I Use등의 사이트에서 코드의 호환성을 확인할 수 있다.
- 테스트/발견 각 기능을 구현한 이후에는 당연히도 테스트가 필요하다. 직접 테스트를 수행할수도 있지만, TestComplete, LambdaTest, BitBar 등의 크로스브라우징 테스트 툴을 이용할 수도 있다.
- 수정/반복 테스트 단계에서 버그가 발견되었다면 버그의 위치를 최대한 좁혀 특정하고, 버그가 발생하는 특정 브라우저에서의 해결방법을 정해야한다. 섣불리 코드를 수정했다가는 다른 브라우저에서 버그가 발생할 수 있으므로, 조건문을 작성해 다른 코드를 실행하게 하는 방식으로 고쳐나가는 것이 좋다. 이런식으로 계속 고쳐나가며 테스트 => 수정 => 테스트 = > 수정을 반복해나가며 웹을 완성해 나가는것이다.
코드를 작성하다 보면, 어쩔 수 없이 크로스 브라우징이 힘든 상황에 맞닥뜨릴 수 있는데, 이런 경우 이를 인정하고 대체 수단을 마련하여야한다.
SEO
검색 엔진의 작동 방식에 맞게 웹 페이지를 최적화해주는 작업 SEO(Search Engine Optimization, 검색 엔진 최적화)
SEO의 목적은 검색 엔진에서 웹 페이지를 보다 상위에 노출시키는 것이다. SEO는 크게 On-page SEO와 Off-page SEO 두가지로 나뉘어진다.
Off-page SEO는 웹 사이트 외부에서 이루어지는 SEO로, 소셜미디어 홍보, 백링크 등을 이용하는 방법으로 웹 페이지 내용이나 구조와는 관계가 없다.
On-page SEO
페이지 내부에서 진행할 수 있는 SEO로, 제목과 콘텐츠, 핵심키워드의 배치, 효율적인 HTML요소 사용법 등을 이용
On-page에서 통제할 수 있는 요소들에 대해서 알아보자.
- title 요소
- meta 요소
- hgrop요소
- 콘텐츠
Title 요소
타이틀 요소는 검색 결과창에서 제목에 해당하는 요소로, Head요소의 자식 요소로 작성한다. 검색엔진에서 검색 후 바로 보이는 부분인만큼, 검색 결과에서 상당히 중요한 역할을 한다.
- Title 요소에 어떤 내용을 작성하는가에 따라서 검색 후 유입까지 유도할 수 있다. 제목이 너무 길거나 짧아서 제목으로 사이트를 파악하기 어려워지면, 유입률이 떨어지게 된다.
- Title 요소에 핵심 키워드가 포함되면 상위에 노출될 확률이 높아진다. 하지만 같은 키워드를 반복하면 검색에서 불이익을 받을 수 있으니 제목에 핵심 키워드는 한번만 포함시키는 것으로!
Meta 요소
메타 요소는 메타 데이터를 담는 요소이다.
메타 데이터란, 해당 웹 사이트에서 다루고 있는 데이터가 무엇인지에 대한 데이터로, Meta 요소 또한 Head 요소의 자식 요소로 작성해 주는 것이 일반적이다.
Google 검색시, 제목 밑에 따라오는 설명글이 Meta 요소 안에 들어있는 내용으로, 해당 웹 페이지가 어떤 데이터를 다루고 있는지를 설명하는 메타 데이터가 들어가있다.
hgroup 요소
콘텐츠
