[사용자 친화 웹] 웹 표준

도현수·2022년 9월 5일

웹

웹 표준의 개념

❓웹과 웹 표준이란 무엇인가?

웹이란 "다양한 정보를 공유할 수 있는 공간"이다.

❗여기서 주의할 점은 웹 = 인터넷이 아니라는 점이다. 인터넷은 "전 세계적으로 연결된 통신망"을 의미한다. 즉, 인터넷은 웹보다 조금 더 포괄적인 공간이다.

2000년대 초반에는 표준적인 기술이 없어서 브라우저 환경에 따라 어플리케이션이 호환이 되지 않는 경우가 있었고, 이를 해결하기 위해 웹 기술에 대한 통일이 필요했다. 이런 필요에 의해 만들어진 것이 웹 표준이다.

웹 표준: 웹에서 표준적으로 사용되는 기술 혹은 규칙

웹표준의 장점

✅ 유지보수의 용이성
HTML CSS JS를 분리하고 나니 유지 보수가 용이해졌고, 코드가 경량화되면서 트래픽 비용이 감소하는 효과도 생겼다.

✅ 웹 호환성 확보
웹 표준을 준수하여 웹 사이트를 제작하면 웹 브라우저의 종류나 버전, 운영 체제나 사용 기기 종류에 상관없이 항상 동등한 결과를 얻을 수 있다.

✅ 검색 효율성 증대
웹 표준에 맞춰 웹 사이트를 작성하는 것 만으로도 검색 엔진에서 더 높은 우선 순위로 노출될 수 있다.

✅ 웹 접근성 향상
다양한 사람들이 다양한 환경에서 웹에 접근이 가능하게끔 한다.

Semantic HTML

시맨틱 태그를 적절히 사용해 의미를 가지는 HTML을 의미한다.

❗ 물론 div와 span만 가지고도 화면을 구성할 수 있다. 다만, 이 경우엔 각각의 요소가 무엇인지, 뭘 의미하는지 id와 class를 지정하거나 직접 설명해야하며 태그 자체가 의미를 가지는 것이 아니므로 지양한다.

이렇듯 시맨틱 태그로 웹을 구성할 경우 각각의 요소들이 무엇을 의미하는지, 콘텐츠로 무엇이 올지, 어디쯤 위치할지도 예상할 수 있다.

시맨틱 HTML의 필요성

✅ 개발자간 소통
여럿이 개발할 때 div와 span을 이용한다면, 각각에 대해 설명을 하고 이름을 짓느라 시간을 허비한다. 이러한 귀찮은 과정을 시맨틱한 요소를 사용하기만 해도 없앨 수 있다. 적어도 각 요소의 기능을 정의하느라 쏟아야하는 시간은 들지 않을 것이다.

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

✅ 웹 접근성
시각 장애인의 경우 웹 페이지에 접근할 때 음성으로 화면을 스크린리더를 이용하게 되는데, 이 때, HTML이 시맨틱 요소로 구성되어 있다면 화면의 구조에 대한 정보까지 추가로 전달해줄 수 있어 콘텐츠를 좀 더 정확하게 전달할 수 있다. 시맨틱 요소만 잘 사용해도 웹 접근성을 향상시킬 수 있다는 의미입니다.

자주 사용되는 시맨틱 요소들

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

예시로 보는 시맨틱 요소

페이지나 요소의 최상단. 페이지의 최상단에 위치하면 사이트 전체에서 사용 가능한 내용을 담고 있다.

nav

페이지 이동을 위한 요소로 보통 링크들을 담고 있다.

aside

문서와 연관은 있지만 직접적 연관이 없는 내용

main

페이지의 메인 콘텐츠

article

독립적으로 구분해 재사용이 가능한 요소. 보통 아티클을 식별할 수 있는 요소들이 필요한데, h요소들이 주로 사용된다.

section

문서의 독립적 구획을 나타내며, 딱히 적당한 태그가 없을 때 사용된다.
의미를 부여하기 위해 h태그를 사용하는 것이 좋다.

h group

제목을 표시하기 위한 요소.
h1~h6까지 존재하며 이 숫자만 봐도 부모자식관계의 파악이 가능하다.

페이지 마지막, 요소 마지막의 꼬릿말.
저작권 정보 등을 담고 있다.

자주 틀리는 마크업

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

<a href=""> <h1>이럼 안됩니다. 1</h1> </a>
<span> <div>이럼 안됩니다. 2</div> </span>

HTML요소는 스타일에 따라 인라인과 블록 요소로 나뉘는데, 인라인요소는 콘텐츠의 크기만큼, 블록요소는 요소가 위치한 가로줄을 전체 차지한다. 인라인 요소는 항상 블록 요소 안에 들어가야 하며, 반대의 경우는 있어서는 안된다.

b, i 요소 사용

<b>글씨를 두껍게만 할래</b>   -- 대체하기 -->  <strong>콘텐츠 (매우)강조까지 할래</strong>
<i>글씨를 기울이기만 할래</i>   -- 대체하기 -->  <em>콘텐츠 강조까지 할래</em>

b, i는 단순히 스타일만을 바꾸는, 시멘틱하지 않은 태그들이다. 따라서 내용을 강조하고 싶으면 strong과 em태그를 사용한다.

h group 남발

// 나쁜 예시
<h1>글씨 크기를 바꾸려면</h1>
    <h3>스타일을 바꾸세요</h3>
  <h2> 태그를 바꾸지말고</h2>
          <h6>이렇게 작성하면</h6>
      <h4>안됩니다.</h4>

// 좋은 예시
<h1>제목</h1>
  <h2>큰 목차1</h2>
    <h3>작은 목차1</h3>
    <h3>작은 목차2</h3>
  <h2>큰 목차2</h2>
    <h3>작은 목차1</h3>
      <h4>그 안의 더작은 목차1</h4>
      <h4>그 안의 더 작은 목차2</h4>

h group은 제목을 나타내기 위한 요소들로, 단순히 글자의 크기를 바꾸고 싶으면 글자의 스타일을 변경해야 한다.

br 연속으로 사용하기

// 나쁜 예시
<div>이렇게 하면 </div>
<br />
<div>안됩니다. </div>
<br />


// 좋은 예시 1
<p>요소 사이에 여백을 주고싶을 땐</p>
<p>아예 별도의 단락을 작성하거나</p>

// 좋은 예시 2
  //HTML 파일
<span class="margin">요소 사이에 여백을 주고싶을 땐</span>
<span class="margin">CSS 속성으로 여백을 설정해주세요.</span>

  //CSS 파일
.margin { margin: 10px }

br은 텍스트 흐름을 바꿔주기 위한 요소로, 단순히 요소들 간 간격을 주고 싶어서 사용하면 안된다. 요소들의 간격을 벌리고 싶다면 스타일에서 마진과 패딩을 조절한다.

인라인 스타일링 사용하기

웹 표준을 지키기 위해서는 HTML CSS JavaScript를 분리해서 사용한다.

//HTML 파일
<head>
  <style>
    h1 { color : "red" }
  </style>
</head>

(O) <h1>스타일링은 CSS를 이용한다.<h1>
(O) <h2>아니면 style태그를 사용하거나.<h2>
(X) <h3 style="color: blue">이런 인라인 스타일링은x.</h3>  
 
//CSS 파일
h2 { color : "yellow" }

크로스 브라우징

크로스 브라우징(Cross Browsing)이란 웹 사이트에 접근하는 브라우저의 종류에 상관 없이 동등한 화면과 기능을 제공할 수 있도록 만드는 작업을 의미한다.

❗이때, 동일한 화면이 아닌, 동등한 화면을 제공하는것을 주의한다. 브라우저는 렌더링 엔진이 달라서 완벽히 동일한 화면을 구현하는 것은 힘들다.

➡ 크로스 브라우징의 목표는 모든 브라우저에서 동등한 수준의 정보와 기능을 제공하는 것이라고 할 수 있다.

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

1. 초기 기획

초기 기획 단계에서 어떤 웹 사이트를 만들 것인지 정확하게 결정한다. 어떤 콘텐츠와 기능이 필요한지, 디자인은 어떻게 할지 등의 사항을 결정한다. 그 후 이 사이트의 고객이 누구일지를 고민해야 하고, 고객 고객이 사용하는 브라우저는 무엇일지, 기기는 무엇일지 생각한 후,맞는 기술을 사용해서 개발할 수 있도록 기획한다.

2. 개발

코드를 작성할 때 사용하는 코드가 각 브라우저에서의 호환성이 어떤지 파악하고 사용 한다. 때때로 호환이 어떻게든 안되는 경우가 발생하는데, 이럴 때는 단념하고 다른 대안을 찾아야 한다.

3. 테스트 및 발견

기능 구현 후 테스트를 거친다.

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

TestComplete, LambdaTest, BitBar 등의 크로스 브라우징 테스트 툴을 통해 자동으로 테스트를 진행하는 것도 좋은 방법 중 하나이다.

4. 수정 / 반복

테스트에서 버그가 발생했다면 이를 수정한다. 버그가 발생하는 위치를 최대한 좁혀서 특정하고, 버그가 발생하는 특정 브라우저에서의 해결 방법을 정해야 합니다. 다른 부분에서 버그가 발생하지 않게 조건문을 작성해 다른 코드를 실행하게 하는 방식으로 고쳐나간다.수정이 완료되면 3번 과정부터 반복한다.

사실 웹 표준만 잘 지켜도 크로스 브라우징이 어느정도 실현된다.

도현수

이전 포스트

너비우선탐색(BFS)

다음 포스트