웹 표준, 시맨틱 태그, 크로스 브라우징

익스플로러는.. 말을 말자..

 

웹표준이란?

웹표준은 웹에서 사용되는 기술이나 규칙의 일관성과 호환성을 보장하기 위한 규격과 지침을 의미한다. 웹표준을 준수하는 것은 웹사이트가 다양한 브라우저와 기기에서 일관되게 작동하도록 보장하며, 웹페이지의 접근성과 검색엔진 최적화(SEO) 등에도 영향을 준다.

웹표준은 World Wide Web Consortium (W3C)와 같은 국제기구나 단체에서 제정되며, HTML, CSS, JavaScript 등과 같은 웹 기술에 대한 규격이 포함됩니다. 웹표준을 준수하는 것은 웹개발자와 디자이너, 웹브라우저 제작사 등 모든 웹 생태계 참여자들의 공동 책임이며, 이를 통해 웹의 품질과 안정성을 향상시킬 수 있다.

크롬, 엣지, 사파리, 오페라, 파이어폭스 등 최신 웹 브라우저들은 모두 웹 표준을 지원하고있다. 따라서 웹 표준에 맞추어 웹 페이지를 작성하면 어떤 브라우저를 사용하든 동일한 결과물을 얻을 수 있다.

Microsoft사는 2022년 6월 15일을 기준으로 인터넷 익스플로러(IE) 브라우저를 비롯한 윈도우 10에서 제공하는 인터넷 서비스의 지원을 중단했다. 따라서 이제는 IE를 사용하는 것은 매우 권장되지 않으며, 대신에 Edge나 Chrome과 같은 다른 최신 브라우저를 사용하는 것이 좋다.

---

웹 표준의 장점은?

1. 호환성: 웹사이트가 다양한 브라우저와 기기에서 일관되게 작동하도록 보장한다. 특정 환경에만 적합하게 만들어졌다면 다른 사용환경에서는 문제가 발생하겠지만 웹표준을 준수한 사이트를 제작함으로써 항상 동일한 결과가 나오게 되고 사용자 경험을 개선하고, 개발자들이 다양한 환경에서 테스트를 간소화할 수 있도록 합니다.
2. 유지보수 용이성: 웹표준을 준수하면 웹사이트의 유지보수가 쉬워진다. 웹표준이 정착되기 전에는 HTML, CSS, JavaScript 등의 사용 방법을 정리하기 이전에는 구조, 표현, 동작이 뒤섞인 코드도 많았다. 그러다보니 한곳을 손보면 다른 곳에서 문제가 생기는 경우가 생겼지만 각 영역을 분리하며 웹표준을 지켜 작성하면 코드가 깔끔하고 일관성이 있으며, 재사용성이 높아져 개발자들이 빠르고 쉽게 수정 및 업데이트할 수 있게 된다.
3. 검색엔진 최적화(SEO): 검색엔진에서 웹사이트를 더 잘 인식할 수 있도록 도와준다. 검색엔진은 웹표준을 준수하는 웹사이트를 우선적으로 색인하고, 검색결과에 더 높은 순위를 부여합니다.
4. 보안성: 웹표준을 준수하면 보안성이 향상됩니다. 보안상의 취약점이나 버그를 발견하고 수정하는 데 더욱 쉬워지며, 개발자들은 보다 안전한 코드를 작성할 수 있게 됩니다.

---

Semantic(시맨틱) HTML

시맨틱 HTML(semantic HTML)이란 HTML 요소를 의미 있는 의미론적 태그로 구성하는 방법을 말한다. 이는 웹 사이트의 구조와 내용을 명확하게 전달하여 검색 엔진 최적화와 웹 접근성을 향상시키는 데 도움된다. 예를 들어, <header>, <nav>, <section>, <article>, <aside>, <footer> 등의 시맨틱 태그를 사용하여 웹 페이지의 구조를 명확하게 구분할 수 있다. 이는 웹사이트 개발자들에게 가독성, 유지보수성, 접근성, 검색 엔진 최적화 등의 장점이 있다.

• 웹 사이트의 구조와 내용이 명확하게 전달되어 검색 엔진 최적화와 웹 접근성을 향상시킴.
• 의미 있는 태그를 사용하여 유지보수와 가독성을 높여줌.
• 스크린 리더 등의 보조기기 사용자에게 웹 사이트를 보다 쉽게 이해할 수 있도록 도와줌.

기존 div를 사용한 마크업과 차이는?

div 태그는 가장 기본적인 컨테이너 역할을 하는 태그로, 아무런 의미를 갖지 않는 빈 태그다. 따라서 div 태그를 사용하면 웹 사이트의 구조가 명확하게 전달되지 않아 검색 엔진 최적화나 웹 접근성 측면에서 불리할 수 있다.

반면, 시맨틱 마크업은 의미 있는 태그를 사용하여 웹 페이지의 구조와 내용을 명확하게 전달해준다.
예를 들어, <header>, <nav>, <section>, <article>, <aside>, <footer> 등의 태그를 사용하여 웹 페이지를 구조화할 수 있다. 이런 시맨틱 마크업을 사용하면 웹 사이트의 구조가 명확해지기 때문에 검색 엔진 최적화와 웹 접근성을 향상시킬 수 있다. 즉, 사용자들이 더 쉽게 내가만든 사이트를 찾을 수 있고 더 많은 유저가 사용할 수 있게되는 샘이다.

<header>	웹 페이지의 상단에 위치하는 머리말을 나타내는 태그
<nav>	메뉴, 목차 등에 사용되는 요소. 메뉴를 나타내는 태그
<aside>	본문과 연관성이 있는, 그러나 필수적이지는 않은 정보를 담는 태그
<main>	웹 페이지의 중심 내용을 담는 태그, 콘텐츠를 담는 요소
<article>	독립적인 콘텐츠를 담는 태그
<section>	문서의 일부분을 나타내는 태그. 보통 타이틀(<h1>-<h6>)과 함께 사용
<hgroup>	제목을 표시할 때 사용하는 요소로, <h1> ~ <h6> 요소가 <hgroup>
<footer>	웹 페이지의 하단에 위치하는 바닥글을 나타내는 태그

---

크로스 브라우징(Cross Browsing)

크로스브라우징은 웹 페이지나 웹 어플리케이션을 여러 가지 브라우저에서 동등하게 표시되도록 하는 작업을 의미한다.(중요한 포인트는 ‘동일한’이 아니라 ’동등한’이라는 표현을 쓴다는 것. 애초에 브라우저마다 렌더링 엔진이 다르기에 완전 동일하게 만드는게 불가능함.) 

웹 페이지나 어플리케이션이 여러 브라우저에서 일관된 결과를 보이지 않는 것은 브라우저들이 각각 다른 HTML, CSS, 자바스크립트, DOM 등 웹 기술의 표준을 지원하기 때문인데 크로스브라우징은 모든 사용자가 웹 사이트를 이용할 수 있도록 웹 개발자는 HTML, CSS, 자바스크립트, DOM 등 웹 기술의 표준을 준수하고, 모든 브라우저에서 동일하게 작동하는 코드를 작성해야 한다.

크로스브라우징은 모든 사용자에게 더 나은 웹 경험을 제공하며, 웹 개발자들은 이를 위해 지속적으로 브라우저 트렌드를 추적하고, 표준 준수와 호환성을 고려하여 웹 사이트나 웹 어플리케이션을 개발해야 한다.

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

크로스브라우징 워크플로우는 웹 페이지나 어플리케이션을 여러 브라우저에서 테스트하고 호환성 문제를 해결가는 작업이다.

1. 브라우저 트렌드 분석: 가장 많이 사용되는 브라우저와 그 버전을 파악
2. 표준 준수: 웹 페이지나 어플리케이션을 표준 준수하도록 작성
3. 브라우저별 테스트: 대표적인 브라우저(Chrome, Firefox, Safari, Edge, IE 등)에서 페이지나 어플리케이션을 테스트하고, 호환성 문제를 파악
4. 호환성 문제 해결: 호환성 문제를 해결하기 위해 CSS 특성을 구분하거나, 브라우저별 자바스크립트 처리를 구분하는 등의 작업을 수행
5. 브라우저별 코드 분리: 호환성 문제가 발생하는 부분을 브라우저별로 코드를 분리하거나, 브라우저별 스타일시트를 만들어 사용
6. 테스트 반복: 모든 브라우저에서 페이지나 어플리케이션을 테스트하고, 호환성 문제가 없을 때까지 작업을 반복

크로스브라우징은 번거로운 작업이지만, 모든 사용자가 페이지나 어플리케이션을 이용할 수 있도록 보장하는 중요한 작업이다. 웹 개발자들은 이를 염두에 두고 웹 페이지나 어플리케이션을 개발해야 한다

---

읽어보면 좋을거리

조각화 테스트 : 브라우저, OS 및 디바이스 조각화 이해

Understanding Browser and Device Fragmentation

조각화 테스트 : 호환성을 위해 교차 브라우저 테스트가 필요한 이유

Why do you need cross-browser testing for compatibility?

크로스 브라우저 테스트 – 실행 방법, 사례, 도구 및 일반적인 문제

Cross Browser Testing - How To Run, Cases, Tools & Common Issues - GeeksforGeeks