웹 표준

웹 표준

과거에는 웹을 정상적으로 구동시키기 위해 개발자들이 각 브라우저마다 따로 개발을 했다. 지금은 웹 표준을 만들어 웹 개발의 형식을 통일 시켜 이제는 그러한 수고에서 벗어나게 되었다.

웹표준은 W3C(World Wide Web Consortium)에서 권고하는 “웹에서 표준적으로 사용되는 기술이나 규칙" 을 말한다. 사용자들이 어떠한 운영체제, 브라우저를 사용하더라도 웹 페이지가 동일하게 보이고 정상적으로 작동할 수 있도록 하는 웹 페이지 제작 기법을 담고 있다.

크롬, 엣지, 사파리, 오페라, 파이어폭스 등 최신 웹 브라우저들은 모두 웹 표준을 지원한다. 이제 우리는 브라우저 호환 때문에 화면이 제대로 표시되지 않거나 기능이 작동하지 않는 등의 문제 상황은 피할 수 있다.

웹 표준의 장점

1. 유지 보수의 용이성

   과거에는 구조, 표현, 동작이 뒤섞인 코드가 많아 어느 한 부분을 수정하려면 전부 다 수정해야 될 때도 있었다. 하지만 이제는 웹 표준으로 HTML, CSS, JavaScript 영역이 분리되면서 유지 보수가 용이해졌고, 코드가 경량화되면서 트래픽 비용이 감소하는 효과도 생겼다.

2. 웹 호환성 확보

   웹 표준을 준수하여 웹 사이트를 제작하면 웹 사이트가 특정 운영체제나 브라우저에 종속적이지 않고 운영체제, 사용 기기, 웹 브라우저의 종류나 버전에 상관없이 항상 동일한 결과가 나오도록 할 수 있다.

3. 검색 효율성 증대

   웹 표준에 맞춰 웹 사이트를 작성하는 것만으로도 검색 엔진에서 더 높은 우선 순위로 노출될 수 있다. 적절한 HTML 요소의 사용, 웹 페이지에 대한 정확한 정보 작성 등 검색 효율성과 관련된 내용도 웹 표준에서 다루고 있다.

4. 웹 접근성 향상

   웹에 접근할 수 있는 환경은 브라우저의 종류, 운영 체제의 종류, 기기의 종류 등 아주 다양하다. 웹을 사용하는 사람들 또한 아주 다양하다. 다양한 환경과 다양한 사용자에 맞춰 웹 페이지를 개발하는 건 쉽지 않다. 그러나 웹 표준에 맞춰 개발하는 것만으로도 이러한 문제를 해결할 수 있다.

Semantic HTML

웹 표준에서는 HTML을 시맨틱(Semantic)하게 작성하는 것의 중요성을 강조한다.

• semantic : 의미의, 의미가 있는 이라는 뜻의 영단어
• HTML : 화면의 구조를 만드는 마크업 언어

1. <div> 와 span 으로 화면 구성하기
   

   HTML 구조만 보고 각 요소들이 어떤 역할을 하는지 알아낼 수 없다.

2. Semantic 요소 로 화면 구성하기

   

   각 요소의 이름만 보고 화면에서 어떤 역할을 하게 될지, 어떤 내용을 담게 될지 한 눈에 보인다.

   이처럼 요소가 어떤 내용을 담게 될지, 어떤 기능을 하게 될지 확실하게 의미를 가지고 있는 요소를 Semantic 요소 라고 한다.

   Semantic 요소를 적절하게 사용하여 구성한 HTML은 Semantic HTML이라고 한다.

Semantic HTML의 필요성

1. 개발자간 소통

   여러 명의 개발자가 웹 페이지를 개발할 때 각 요소가 어떤 기능을 하는지 주석을 달아놓는다던가 id 나 class 명으로 설명한다던지 이러한 귀찮은 과정을 시맨틱한 요소를 사용하는 것만으로도 없앨 수 있다.

2. 검색 효율성

   시맨틱 요소를 사용하면 검색엔진은 어떤 요소에 더 중요한 내용이 들어있을지 우선 순위를 정할 수 있고, 우선 순위가 높다고 파악된 페이지를 검색 결과 상단에 표시한다.

3. 웹 접근성

   나이, 성별, 장애 여부, 사용 환경에 상관없이 항상 동일한 수준의 정보를 제공할 수 있어야 한다.

   ex) HTML이 시맨틱 요소로 구성되어 있다면 스크린 리더를 이용하는 시각장애인들에게 화면의 구조에 대한 정보까지 전달해줄 수 있게 된다.

Semantic 요소의 종류

요소 종류	설명
<header>	페이지나 요소의 최상단에 위치하는 머릿말 역할의 요소입니다.
<nav>	메뉴, 목차 등에 사용되는 요소입니다.
<aside>	문서와 연관은 있지만, 직접적인 연관은 없는 내용을 담는 요소입니다.
<main>	이름 그대로 문서의 메인이 되는 주요 콘텐츠를 담는 요소입니다.
<article>	게시글, 뉴스 기사 등 독립적으로 구분해 재사용할 수 있는 부분을 의미하는 요소입니다. 각각의 <article>을 구분하기 위한 수단이 필요하며, 보통 제목(<hgroup>)을 포함하는 방법을 사용합니다.
<section>	문서의 독립적인 구획을 나타내며, 딱히 적합한 의미의 요소가 없을 때 사용합니다. 제목(<hgroup>)을 포함하는 경우가 많습니다.
<hgroup>	제목을 표시할 때 사용하는 요소로, <h1> ~ <h6> 요소가 <hgroup>입니다.
<footer>	페이지나 요소의 최하단에 위치하는 꼬릿말 역할의 요소입니다.

자주 틀리는 마크업

웹 표준을 저해하는 마크업 사용법, 이런 방법으로 마크업을 하지 않도록 주의하자!

1. 인라인 요소 안에 블록 요소 넣기

   블록 요소 안에 인라인 요소를 넣어야 한다. ex) <span> 태그 안에 <div> 태그 넣기 ❌

2. <b> , <i> 요소 사용하기

   <b> , <i> 는 시맨틱하지 않은 표현으로 이름이 지어진 요소이다.

   1. 글씨를 굵게 만들 때는 <strong>
   2. 글씨 기울일 때는 <em>

3. <hgroup> 마구잡이로 사용하기

   스타일 속성을 적용하기 위해 사용하기 보다 화면 구조에 맞게 사용해야 한다.

4. <br /> 연속으로 사용하기

   요소 사이에 간격을 만들기 위한 목적으로 사용하면 안 된다. 요소 사이에 간격이 필요한 경우 CSS 속성을 주거나 별도의 단락으로 구별하여 여백을 조정해주는 것이 바람직하다.

5. 인라인 스타일링 사용하기

   웹 표준으로 HTML, CSS, JavaScript 등의 사용 방법을 정리하면서 각 영역이 분리되었다. 그런데 HTML 요소 안에 인라인으로 스타일링 속성을 설정하는 것은 영역을 합치는 것과 같다.

크로스 브라우징

웹 사이트에 접근하는 브라우저의 종류에 상관 없이 동등한(동일한❌) 화면과 기능을 제공할 수 있도록 만드는 작업을 의미한다. 모든 브라우저에서 완전히 똑같은 화면이 보이도록 만드는 것은 아니다. 브라우저마다 사용하는 렌더링 엔진이 다르기 때문에 화면을 완전히 동일하게 만드는 것은 불가능하다. 따라서 크로스 브라우징의 목표는 모든 브라우저에서 동등한 수준의 정보와 기능을 제공하는 것이다.

ex) 최신 스펙의 CSS와 JavaScript를 지원하지 못한 인터넷 익스플로러 때문에 크로스 브라우징을 위해 인터넷 익스플로러만을 위한 코드를 작성해야 했다.

크로스 브라우징 워크 플로우

1. 초기 기획

   • 어떤 웹 사이트를 만들 것인지 정확하게 결정
   • 어떤 콘텐츠와 기능이 있어야 하는지
   • 디자인은 어떻게 할지
   • 고객이 사용하는 브라우저는 무엇일지
   • 고객이 사용하는 기기는 무엇일지

   여기에 맞는 기술을 사용해서 개발할 수 있도록 기획해야 한다.

2. 개발

   • 코드가 각 브라우저에서의 호환성이 어떤지 파악 후 사용
   • 크로스 브라우징이 힘든 상황이 생기면 대체 수단을 마련해야 한다.

3. 테스트 / 발견

   • 안정적인 데스크톱 브라우저 테스트 진행 (롬, 엣지, 파이어폭스, 오페라, 사파리 등)
   • 휴대폰 및 태블릿 브라우저 테스트 진행 (삼성 인터넷, 사파리, 안드로이드 기기의 크롭 등)
   • 그 외에도 초기 기획 단계에서 목표했던 브라우저가 있다면 해당 브라우저에서 테스트 진행
   • Window, Linux, Mac 등 다양한 운영 체제에서도 테스트 진행

4. 수정 / 반복

   • 버그가 발생하는 특정 브라우저에서의 해결 방법 정하기
     • 섣불리 코드를 수정했다가 다른 브라우저에서 버그가 발생할 수도 있으므로 조건문을 통해 다른 코드를 실행하게 하는 방식으로 고쳐나가는 것이 좋다.