2/28 일일정리 웹표준과 SEO

코드스테이츠

2/28 일일정리 웹표준과 SEO

강물둘기 2023. 2. 28. 14:18

1.웹표준

개념

웹 표준이란 브라우저 종류 및 버전에 따른 기능의 차이에 대하여 호환이 가능하도록 제시되는 표준이다. 표준화 단체인 W3C(World Wide Web Consortium)의 권고에 따라 웹사이트를 작성할 때 Html, Css, Javascript 등에 대한 규정을 담고 있다.

웹표준의 목적은 사용자가 다양한 운영체제와 브라우저에서 동일한 웹사이트를 볼 수 있도록 하는 것이다.

웹 표준의 장점

⓵ 제작 및 유지 보수 용이

콘텐츠의 올바른 구조화와 시각표현을 통일해서 제어하게 되어서 웹페이지 제작 부담이 감소하고 관리하기 편해졌다.

⓶ 웹 접근성,웹 호환성 향상

요즘에는 다양한 운영체제, 브라우저같은 소프트웨어 환경, 스마트폰, 태블릿PC, 데스크탑, 노트북등 다양한 기기로 웹사이트에 접근한다. 표준화된 웹이 있으면 다양한 환경에서 접근해도 동등하게 사용이 가능하도록 할 수 있다.

⓷ 검색 효율성 증가

웹표준에 맞추어 웹사이트를 제작하면 검색 엔진에 최적화(SEO)되어 검색 효율성을 증가시킬 수 있다.

⓸ 웹의 효율성 증가

불필요한 마크업이 없고, 효율적인 소스 작업이 가능하기 때문에 파일 사이즈와 필요한 서버 공간이 줄어들어 페이지 로딩속도가 향상된다.

Semantic HTML

웹 표준에서는 Semantic한 HTML 요소를 사용할 것을 중요시한다. Semantic 하다는 것은 각각의 HTML 태그에 의미를 부여하는 것을 의미한다.

단순히 div와 span으로만 마크업을 하는 경우에는 이 웹사이트의 구조는 파악할 수 있지만 다른 어떤내용도 파악할 수 없다. 하지만 여러가지 시멘틱 요소를 사용하여 마크업을 하는 경우 좀 더 많은 정보를 마크업으로부터 얻을 수 있다.

시멘틱 요소의 장점

시멘틱 요소를 사용하면 여러 개발자가 협업하여 웹페이지를 개발할 때 마크업만 보고도 대략적인 구성이 파악이 가능하기 때문에 좀 더 원활한 소통을 가능하게 한다.

검색 엔진(SE)은 검색을 할 때 시멘틱 요소에 따라 우선순위를 파악하여 중점적으로 검색할 요소를 판단하는것이 가능하기 때문에 중요한 정보가 있는 요소는 우선순위가 높은 시멘틱 요소를 사용하면 검색 효율을 증가시킬 수 있다.

시멘틱 요소를 사용하면 웹 접근성을 향상 시킬 수 있다. 시각 장애가 있는 사용자가 화면 판독기로 페이지를 탐색할 때 시멘틱 마크업을 푯말로 사용할 수 있다.

자주 사용하는 시멘틱 요소

시멘틱 요소	설명
<header>	페이지 최상단의 머릿말
<nav>	메뉴, 목차
<aside>	문서와 연관이 있지만 직접적인 연관은 없는 요소
<main>	메인 컨텐츠
<article>	게시글, 기사 등 독립적인 구분이 필요한 요소
<section>	문서의 독립적인 구획
<hgroup>	제목 표시 (<h1> ~ <h6>)
<footer>	페이지 최하단 꼬릿말

크로스 브라우징

크로스 브라우징(Cross Browsing)이란 여러 브라우저에서 웹사이트에 접근할 때 동등한 화면과 기능을 제공할 수 있도록 만드는 것을 말한다. 브라우저마다 렌더링 엔진이 다르기 때문에 같은 코드의 웹사이트도 다르게 작동할 수 있다.

크로스 브라우징을 구현하기 위해 먼저 기획을 하고 기획을 바탕으로 개발할 때 사용하는 코드가 여러 브라우저에서 호환이 가능한지 확인해야 한다. (많은 브라우저에서 호환이 가능한 코드를 사용하는 것이 좋을거 같다.)

개발을 완료한 후 테스트과정을 거쳐야 한다. 안정적인 데스크탑 브라우저(크롬, 사파리,엣지 등)에서 테스트하고, 모바일 및 태블릿 PC 브라우저에서도 테스트하고, 여러 운영체제에서도 테스트를 해봐야 한다.

만약 테스트 과정에서 문제를 발견한다면 문제가 발생하는 곳을 특정하고 특정 브라우저에서 해결 방법을 찾아야한다. 조건문을 사용하여 특정 브라우저에서는 다른 코드를 진행하도록 분기를 하는것이 좋다.

2. SEO

검색엔진 최적화(SEO, Search Engine Optimization)는 검색 엔진으로부터 웹사이트 트래픽의 품질과 양을 개선하는 과정이다. 검색엔진의 작동방식(자료를 수집하고 순위를 매기는 방식)에 맞게 웹페이지를 구성하여 검색 결과의 상위에 나올 수 있게 한다.