웹 표준을 케이크처럼 어렵게 먹는 법

🐕 웹 표준

웹표준이란 W3C(World Wide Web Consortium)에서 권고하는 웹에서 표준적으로 사용되는 기술이나 규칙입니다.

사용자가 어떠한 운영체제나 브라우저를 사용하더라도 웹페이지가 동일한 view와

정상적인 작동을 보장할 수 있게하는 웹페이지 제작 기법을 담고 있습니다.

 

크롬, 엣지 , 사파리, 오페라 , 파이어폭스 등 최신 웹 브라우저들은 모두 웹 표준을 지원합니다.

웹 표준은 다음과 같은 장점을 지닙니다.

 

1. 유지보수의 용이성

웹 표준으로 HTML , CSS , Javscript등의 사용 방법을 정리하는 것을 통해

각 영역이 분리되면서 유지보수가 용이해졌고 코드가 경량화 되었습니다.

2. 웹 호환성 확보

웹 사이트가 특정 운영체제 , 브라우저에 종속된다면

그 외 환경에서는 정상적으로 사용이 불가능한 문제점이 발생합니다.

3. 검색 효율성 증대

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

4. 웹접근성 향상

브라우저 종류 , 운영체제 종류, 기기 종류 등 웹에 접근할 수 있는 환경은 다양합니다.

따라서 모든 환경에 맞추어 웹을 개발하는 건 매우 어려울 것이빈다.

하지만 웹표준에 맞춰 개발하면 이러한 문제를 해결 할 수 있습니다.

---

👻semantice HTML

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

시맨틱 태그는 예전부터 중요성을 주입식 교육으로 받아왔지만

왜 필요한거냐 하면.. 음.. 검색엔진최적화..?

정도만 생각이 나네요

 

1. 개발자간 소통

개발자 간에 소통을 할 때

시맨틱한 태그를 사용하는 것만으로도 해당 태그가 어떤 의도를 가지고 있는지 파악할 수 있으니 소통이 빨라집니다.

2. 검색 효율성 

시맨틱하게 잘 짜여진 웹페이지는 검색 엔진에게 높은 점수를 획득할 수 있습니다.

3. 웹 접근성

웹 접근성은 나이, 성별, 장애여부, 사용환경을 떠나서 항상 동일한 수준의 정보를 제공할 수 있음을 뜻합니다.

시각 장애인의 경우에는 스크린리더 기능을 지원해주는 것도 웹 접근성의 일부로 볼 수 있겠네요!

---

🥶 자주 틀리는 마크업

 

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

예컨대 span같은 인라인 요소에 div같은 블록 요소를 집어넣는 경우를 들 수 있습니다

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

위 요소는 각각 글씨를 굵게 만들 때 , 글씨를 기울일 때 사용하는 요소입니다.

하지만 웹표준을 준수하고자 할 때는 저런 요소를 사용하지 않는 것이 좋습니다.

대신 대체재로서 <strong> , <em> 요소가 존재하니 이쪽을 사용하는 편이 더 좋습니다.

이 요소들은 글씨에 효과를 줌과 동시에 각 콘텐츠를 강조하는 의미를 부여합니다.

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

h1~h6으로 이루어진 h그룹은 콘텐츠의 상하관계와 목차의 역할을 수행합니다.

이를 시각적으로 나타내기 위해서 글씨 크기가 다른데 이 특성 때문에

이를 디자인의 목적으로 사용하면 잘못된 화면 구조를 형성하게됩니다.

4. <br/> 연속 사용

br 요소는 텍스트 흐름에 줄 바꿈을 해주기 위해 사용하는 요소입니다 그런데

이러한 목적이 아니라 요소 사이에 간격을 만들기 위한 목적으로 남발해서는 안됩니다.

만약 간격을 만들고 싶다면 CSS 속성을 통해 여백을 조정하는 것이 바람직합니다.

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

웹 표준으로 각 영역이 분리되어 여러 이점을 얻었음에도 불구하고

HTML 요소 안에 인라인으로 CSS 속성을 설정하면 분리한 영역을 다시 합치는 행위가 됩니다.

---

🌞크로스 브라우징

크로스브라우징이란 웹 사이트에 접근하는 브라우저의 종류에 상관 없이

동등한 화면과 기능을 제공할 수 있도록 만드는 작업을 의미합니다.

크로스 브라우징은 모든 브라우저에서 완전히 똑같은 화면이 보이도록 만드는 것이 아니며

브라우저마다 사용하는 렌더링 엔진이 다르기 때문에

화면을 완전히 동일하게 만드는 것은 불가능합니다.

 

따라서 크로스 브라우징의 목표는

모든 브라우저에서 동등한 수준의 정보와 기능을 제공하는 것이라고 할 수 있습니다.

 

크로스 브라우징의 워크 플로우는 다음과 같습니다.

 

1. 초기 기획

초기 기획 단계에서 어떤 웹 사이트를 만들 것인지 결정해야 합니다.

어떤 콘텐츠와 기능이 있어야 하는지 , 디자인은 어떻게 할지 등의 사항을 결정하고

이 사이트의 고객이 누구일지 생각하며 브라우저, 기기에 대한 고민도 합니다.

 

2. 개발

코드를 작성할 때 MDN, Can i Use와 같은 사이트에서 코드의 호환성을 확인하며 작성합니다.

 

3. 테스트 / 발견 

각 기능을 구현한 후에는 그 기능에 대한 테스트가 필요합니다.

데스크톱 브라우저, 태블릿, 휴대폰 등에서 테스트를 진행하며

다양한 운영체제에서도 테스트를 진행합니다.

이 테스트를 도와주는 도구또한 존재합니다.

TestComplete, LambdaTest, Bitbar 등의 테스트 툴이 있습니다.

 

4. 수정 / 반복

테스트 단계에서 버그가 발견되면 당연히 수정을 해주어야 합니다만

버그가 발생하는 특정 브라우저에서의 해결방법을 정해야합니다.

섣불리 코드를 건드렸다가 돌아가던 코드가 안돌아가는 문제가 생길 수 있기 때문입니다.

따라서 조건문을 작성해 분기를 다르게 처리해주는 식으로 고치는 것이 좋습니다.

 

---

😋SEO(Search Engine Optimization)

SEO는 검색 엔진의 작동 방식에 맞게 웹페이지를 최적화 해주는 작업을 말합니다.

SEO를 통해 검색 엔진에서 웹 페이지를 보다 더 상위에 노출될 수 있게 만들어 줄 수 있어요

SEO에는 크게 두가지 방식이 있습니다.

 

1. On-Page SEO

페이지 내부에서 진행할 수 있는 SEO로 제목과 콘텐츠 핵심 키워드 배치 효율적인 HTML 요소 사용

등으로 최적화를 하는 방법입니다.

2.Off-Page SEO

웹 사이트 외부에서 이루어지는 SEO로 소셜 미디어 홍보, 백링크 등을 이용

하는 등의 방법으로 웹 페이지의 내용이나 구조와는 관계가 없습니다.

 

On-Page SEO에서 통제할  수 있는 요소로는

title과 meta요소가 있습니다.

meta 요소의 property 속성을 사용하는 경우는 오픈그래프라고 부르며

페이스북에서 게시물을 공유하기 위한 목적으로 만들었고

각 속성값 앞에는 오픈 그래프를 뜻하는 og가 붙는다네요

https://developers.google.com/search/docs/fundamentals/seo-starter-guide?hl=ko 

SEO 기본 가이드: 기본사항 | Google 검색 센터  |  문서  |  Google Developers

https://searchadvisor.naver.com/guide

웹마스터 가이드 - 네이버 서치어드바이저

각 검색 사이트에서는 이런식으로

SEO에 관련한 기본 사항들을 안내해주는 것을 확인할 수 있습니다

---

🤢웹 접근성

웹 접근성은 모든 상황에서 항상 동등한 수준의 정보를 제공받을 수 있도록 하는 것입니다.

웹 접근성을 갖추면

1. 사용자층 확대

2. 다양한 환경 지원

3. 사회적 이미지 향상

등의 이점을 가질 수 있습니다.

---

🤮WCAG(Web Content Accessibility Guidelines)

W3C에서 만든 웹접근성 권고안이라고 합니다.

 

1. 인식의 용이성(Perceivable)

모든 콘텐츠는 사용자가 인식할 수 있어야 한다.

따라서 이를 위해 img 태그에 적절한 대체 텍스트를 넣거나

정보를 인식할 필요가 없는 배경 이미지의 경우엔 alt값을 빈문자열로 주는 등

스크린리더 환경 또한 고려하여 웹을 구성하도록 합니다.

 

2. 색에 무관한 콘텐츠 인식

콘텐츠는 색에 관계 없이 인식될 수 있어야합니다.

색맹,색약 등 색을 인지하는 데 어려움이 있는 사용자의 경우도 고려해야합니다.

따라서 이를 해결하기 위해 콘텐츠에 테두리를 설정해주는 것이나 레이블을 다는 방법 등을 고려할 수 있습니다.

 

3. 자막 제공

멀티미디어 콘텐츠에는 자막, 원고, 수화를 제공합니다.

비디오 요소 안쪽에 track 요소를 사용하여 자막 파일을 불러올 수 있습니다.

<video ... >
	<track src="자막.vtt" kind="captions" />
</video>

 

4. 명확한 지시사항 제공

지시사항은 모양 크기 위치 방향 색 소리 에 관계없이 인식될 수 있어야 합니다.

 

5. 텍스트 콘텐츠 명도 대비

텍스트 콘텐츠의 배경 간의 명도 대비는 4.5 대 1 이상이어야합니다.

명도대비가 충분히 확보되지 않으면 텍스트를 읽기 어려워요..

다만 텍스트가 18pt 굵은 14pt이상인 경우 / 확대가능한페이지인경우 / 비활성화된 콘텐츠인 경우 /

장식목적의 콘텐츠인 경우에는 대비가 3대 1까지 허용된다네요

 

6.자동재생 금지

자동으로 소리가 재생되지 않아야 합니다.

 

7.콘텐츠 간 구분

이웃한 콘텐츠는 구별될 수 있어야 합니다.

 

운용의 용이성(operable)

사용자 인터페이스 구성요소는 조작가능하고 내비게이션 할 수 있어야한다.

 

8.키보드 사용보장

모든 기능은 키보드 만으로도 사용 가능해야한다.

 

9. 초점 이동

키보드에 의한 초점은 논리적으로 이동해야하고 시각적으로 확인 가능해야 한다.

 

10. 조작 가능

사용자 입력 및 컨트롤은 조작 가능하도록 제공되어야 한다.

 

11. 응답 시간 조절

시간제한이 있는 콘텐츠는 응답시간을 조절할 수 있어야 합니다.

가능하면 없는게 좋지만 꼭 넣어야하는 경우 충분한 시간 , 종료 안내, 조절 수단을 제공해야합니다.

 

12. 정지 기능 제공

자동으로 변경되는 콘텐츠는 움직임을 제어할 수 있어야 합니다.

 

13. 깜빡임과 번쩍임 사용 제한

초당 3~50회 주기로 깜빡이거나 번쩍이는 콘텐츠를 제공하지 않아야합니다.

 

14. 반복 영역 건너 뛰기

콘텐츠의 반복되는 영역은 건너뛸 수 있어야 합니다.

 

15. 제목 제공

페이지 프레임 콘텐츠 블록에는 적절한 제목을 제공해야 합니다.

 

16. 적절한 링크 텍스트

링크텍스트는 용도나 목적을 이해할 수 있도록 제공해야 합니다.

 

이해의 용이성(Understandable)

콘텐츠는 이해할 수 있어야 한다.

 

17.기본 언어 표시

주로 사용하는 언어를 명시해야 합니다.

 

18. 사용자 요구에 따른 실행

사용자가 의도하지 않은 기능은 실행되지 않아야 합니다.

 

19. 콘텐츠 선형구조

콘텐츠는 논리적인 순서로 제공해야 합니다.

글은 제목, 내용 순서로 제공되는 것이 논리적으로 맞듯이요!

 

20. 표의 구성

표는 이해하기 쉽게 구성해야 합니다.

 

21.레이블 제공

사용자 입력에는 대응하는 레이블을 제공해야합니다.

인풋요소의 플레이스홀더나 밸류를 설정하는것만 수행하는 건 적합하지 않습니다.

인풋요소의 id를 설정하고 label 요소의 for 속성으로 연결해줍니다.

혹은 title 속성을 사용하거나 WAI-ARIA의 aria-label 속성을 사용합니다.

다만 WAI-ARIA의 경우엔 다른 요소로 대체가능한 경우에는 대체요소를 우선적으로 사용하는게 좋습니다.

 

22. 오류 정정

입력 오류를 정정할 수 있는 방법을 제공해야합니다.

 

견고성(Robust)

웹 콘텐츠는 미래의 기술로도 접근할 수 있도록 견고하게 만들어야 합니다.

 

23. 마크업오류 방지

마크업 언어의 요소는 열고 닫음, 중첩 관계, 속성선언에 오류가 없어야합니다.

 

24.웹애플리케이션 접근성 준수

콘텐츠에 포함된 웹 애플리케이션은 접근성이 있어야합니다.

 

---

🐶WAI-ARIA

WAI-ARIA는 WAI와 ARIA의 합성어입니다.

WAI는 Web Accessibillity Initiative 웹 표준을 정하는 W3C에서 웹접근성을 담당하는 기관

ARIA(Accessible Rich Internet Applications) 장애가 있는 사람들이 더 쉽게 웹 콘텐츠를 사용할 수 있게 하는 기술

RIA(Rich Internet Applications) 따로 프로그램을 설치하지 않아도 편리하고 빠른 웹 애플리케이션

RIA는 SPA를 의미하는 경우가 많습니다.

 

즉 WAI-ARIA는 WAI에서 발표한 RIA 환경에서의 웹접근성 기술 규격으로

웹 접근성을 향상시킬 수 있는 방법 중 하나입니다.

 

WAI-ARIA는 HTML 요소에 추가적인 의미를 부여할 수 있게 해줍니다.

따라서 보조적으로 사용하면 웹 접근성을 향상시킬 수 있습니다.

 

WAI-ARIA에는 세가지 분류가 있습니다.

1. 역할(Role) : HTML 요소의 역할을 정의해줍니다.

이 속성은 HTML의 요소 종류와 역할이 서로 맞지 않을 때 명시해주는 속성입니다.

예컨대 요소는 div이지만 버튼의 역할을하고있다면 Role="button"과같이 역할을 명시해줄 수 있습니다.

 

2. 상태(State) : 요소의 현재 상태를 나타내는 속성

aria-selected

어떤탭이 선택되어있는지 알수 있게 명시해주는 속성입니다.

aria-selected="true" 같은 형식으로 사용합니다.

이외에도 aria-hidden , aria-expanded 등이 있습니다.

aria-hidden은 몇번 써본 기억이 나네요

 

3. 속성(Property) : 요소의 특징을 정의하는 속성(attribute)

aria-label

가끔 요소에 대한 정보를 전혀 얻을 수 없는 경우가 발생할 수 있습니다.

이럴때 label 속성을 통해 설명하는 내용을 추가해줄 수 있습니다.

---

이해했다고 생각할 때가 가장 무서울 때다.