1. 웹표준
웹표준이란?
웹과 인터넷용어를 혼용해서 사용하는 경우가 많다. 사실 나또한 스터디를 하기전에는 둘의 차이를 정확히 알지 못하고 있었다.
인터넷은 '전 세계적으로 연결되어있는 컴퓨터 네트워크 통신망'이란 의미이며 포괄적인 개념으로 웹 뿐만아니라 온라인 게임, 모바일 앱등 네트워크를 사용하는 서비스들을 모두 포함한다.
웹은 문서, 이미지, 영상등 다양한 정보를 다른 사람들과 공유할수 있는 '공간'을 의미한다. 이 공간에서 사람들은 댓글을 달고 소통할 수 있다.
과거에는 서로 다른 브라우저끼리 호환이 안되어서 댓글 기능은 물론 화면조차 표시되지 않은 일이 잦았다. 웹을 정상적으로 구동시키기 위해서 개발자들이 브라우저마다 따로 개발을 해줘야 했었는데 이러한 수고를 없애기 위해서 웹 개발의 형식을 통일 시킨것이 바로 웹 표준이다.
따라서 웹표준이란 W3C에서 권고하는 '웹에서 표준적으로 사용되는 기술이나 규칙'으로 사용자가 어떤 운영체제나 브라우저를 사용하더라도 동일한 웹페이지를 볼 수 있고 정상적으로 작동할 수 있도록 하는 웹 페이지 제작 기법을 담고 있다.
여기에서는 웹 개발에 사용되는 HTML, CSS, JavaScript등의 기술을 다룬다.
웹 표준의 장점
1. 유지 보수의 용이성
웹표준으로 언어의 사용방법을 정리하기 전에는 구조,표현,동작이 뒤섞인 코드가 많았다. 하지만 각 영역이 분리되면서 유지보수가 용이해졌다.
2. 웹 호환성 확보
웹 표준을 따른 웹사이트는 브라우저나 운영체제의 종류에 상관없이 동등한 결과를 얻을 수 있다.
3. 검색 효율성 증대
적절한 HTML요소의 사용 등 검색 효율성과 관련된 내용도 웹표준에 포함되어있기 때문에 검색의 효율성을 높일 수 있다.
4. 웹 접근성 향상
모든 사용자와 환경에 맞춰서 따로 개발하는건 쉽지 않으나 웹 표준에 따르면 모든 환경에 맞출 수 있다.
Semantic HTML
html을 공부할때 가장 헷갈렸던 부분이다. <div>와 <span>으로도 충분히 웹페이지의 구조를 나눌 수 있지만 코드만 보았을때는 각 태그가 무슨 역할을 하는지 한눈에 알아보기 어렵다.
웹페이지 상단은 <haeder> 네비게이션 바는 <nav>로 메인컨텐츠는 <main>태그를 사용한다면 어떤 기능을 하게될지 확실하게 의미를 가질 수 있다.
그렇다면 이러한 시멘틱한 태그는 왜 필요할까?
1. 개발자간의 소통
시멘틱 태그를 사용하지 않는다면 개발자끼리 소통하기 위해 id와 class로 혹은 주석을 다는 등 비효율적인 방법으로 각 요소의 기능을 정의 해야한다.
2. 검색 효율성
검색엔진은 html 코드 문서를 보고 문서의 구조를 파악하기 때문에 비슷한 중요도를 가진 div, span 태그보다 시멘틱한 요소를 사용하면 각 요소에 더 더 중요한 내용이 들어있을지 우선순위를 정할 수 있어서 우선순위가 높다고 파악된 페이지를 검색 상단에 표시한다.
3. 웹 접근성
사용자의 다양한 환경에 따라 동일한 수준의 정보를 제공해야한다. 사용자가 시각장애인인경우 웹페이지에 접근할 때 음성으로 스크린리더를 사용하게 되는데 이때 웹페이지가 시멘틱하게 작성되어있다면 화면 구조에 대한 정보까지 추가로 전달해 줄 수있다.
자주틀리는 마크업체크
1. 인라인 요소 안에 블록요소 넣기
블록요소인 <div>를 인라인요소인 <span>안에 넣기
2. <b>,<i> 요소 사용하기
글씨를 두껍게 만들고 기울일때 사용하는 태그들은 표현만 할뿐 태그 자체의 의미는 없다. 이때 <strong>, <em> 를 사용하는것이 더 좋다.
3. <hgroup> 마구잡이로 사용하기
글씨 크기에 집중하지 않고 목차의 관계를 생각하면서 사용해야한다.
4. <br/> 연속사용하기
CSS 속성으로 여백을 조정해주는것이 더 좋다.
5. 인라인 스타일링 사용하기
html 태그안에 CSS코드를 작성하는것을 말한다. 각 역할을 웹표준으로 각 영역을 기껏 분리해놨는데 인라인으로 스타일을 주면 다시 합치는것과 같다.
크로스 브라우징이란?
크로스 브라우징이란 웹 사이트에 접근 하는 브라우저 종류에 상관없이 동등한 화면과 기능을 제공할 수 있도록 만드는 작업이다.
브라우저마다 사용하는 렌더링 엔진이 다르기 때문에 화면을 완전히 동일하게 만드는것은 불가능하다. 크로스 브라우징의 목표는 모든 브라우저에서 동등한 수준의 정보와 기능을 제공하는것이다.
한국인이라면 크로스 브라우징이 되지않아 불편한 일을 겪은적이 분명 있을 것이다. 바로 인터넷 익스플로러의 activeX사용 때문이다. 이 악명높은 activeX가 무엇이냐하면 인터넷 익스플로러용 플러그인으로, 웹 브라우저와 웹 문서만으로는 이용할 수 없는 추가기능을 사용할 수 있게 해주는 브라우저 외부 프로그램이다.
따라서 웹브라우저의 기능을 확장하려면 Active X를 설치해야했고 그렇지 않다면 기능이 제대로 작동되지 않았다. 즉 크로스 브라우징이 불가능했고 최신 스팩의 CSS와 JavaScript 또한 제대로 지원하지 못해 크로스 브라우징을 위한 웹 표준을 저해하는 코드를 따로 작성해야 했다.
크로스 브라우징 워크 플로우
1. 초기 기획
어떤 웹사이트를 만들지 정확하게 결정하고 타깃 고객층이 주로 사용하게될 브라우저와 기기를 파악해서 맞는 기술을 사용해서 개발할 수 있도록 기획
2. 개발
각 코드가 브라우저에서의 호환성이 어떤지 파악하고 사용해야한다
🔗MDN
3. 테스트/발견
- 데스크톱 브라우저(크롬, 엣지, 파이어폭스, 오페라, 사파리 등)
- 휴대폰 및 태블릿 브라우저(삼성 인터넷, 사파리, 안드로이드 등)
- 운영체제(Window, Linux, Mac 등)
4. 수정/반복
섣불리 코드를 수정했다가는 다른 브라우저에서 버그가 발생할 수 있으므로, 조건문으로 다른 코드를 실행하게 하는 방식으로 고쳐나가는 것이 좋다. 수정이 완료되면 3번과정부터 반복한다.
2. SEO
SEO란?
Search Engine Optimization의 약자로 검색 엔진 최적화라는 뜻이다. 검색 엔진의 작동 방식에 맞게 웹페이지를 최적화 해주는 작업으로 SEO를 통해 검색 엔진에서 웹페이지를 더 상위에 노출 될 수 있게끔 만들 수 있다.
SEO에는 두가지 종류가 있다.
- On-Page SEO : 페이지 내부에서 진행할 수 있으며 제목과 콘텐츠, 핵심 키워드의 배치, 효율적인 HTML 요소 사용법등을 이용하는 방법
- Off-Page SEO : 페이지 외부에서 진행되고 소셜 미디어 홍보, 타사이트에서 연결되는 링크인 백링크 등을 이용하는 방법
SEO에 영향을 미치는 요소에는 무엇이 있을까?
1. <title>
- 적당한 길이의 핵심 키워드를 한번만 넣어서 작성하면 상위에 노출될 확률이 높아진다.
2. <meta>
- 해당 웹사이트에서 다루고있는 데이터가 무엇인지에 대한 데이터라는 뜻의 메타 데이터를 담는 요소
- SEO가 목적이라면 name 속성을 사용, 공유하기 위한 목적이라면 property 속성(Open Graph)을 사용한다.
//SEO를 위한 meta 요소
<meta name="속성값" content="내용" />
//오픈 그래프 (open graph)
<meta property="속성값" content="내용" />
3. <hgroup>
- 검색엔진은 콘텐츠의 제목을 표시하는 용도인 만큼 핵심 키워드를 포함하고 있을 가능성이 높으므로 중요하게 취급한다.
4. 콘텐츠
- 개성있는 브랜딩
- 복붙금지
- 간결한 제목과 설명글
- 최대한 글자로 작성하기(불필요한 이미지 사용지양)
3. 웹 접근성
웹 접근성이란?
화면을 볼 수 없거나 소리를 들을수 없는 등 정보 접근에 제한 상황이 생겼을때 동등한 정보를 제공받도록 보장하는 것
즉 어떤 상황이든 어떤 사람이든 정보를 제공받지 못하는 경우가 없도록 하는 것
웹 접근성을 갖추면 좋은 이유?
1. 사용자층 확대
2. 다양한 환경 지원(운전중 등)
3. 사회적 이미지 향상
웬 콘텐츠 접근성 지침
✅ 인식의 용이성(Perceivable) : 모든 콘텐츠는 사용자가 인식할 수 있어야한다.
1. 적절한 대체 텍스트 : 텍스트가 아닌 콘텐츠는 그 의미나 용도를 이해할 수 있도록 대체 텍스트를 제공해야한다.
2. 자막제공 : 멀티미디어 콘텐츠에는 자막, 원고 또는 수화를 제공해야한다.
3. 색에 무관한 콘텐츠 인식 : 콘텐츠는 색에 관계없이 인식될 수 있어야한다.
4. 명확한 지시사항 제공 : 지시사항은 모양, 위치, 크기, 소리 등에 관계 없이 인식될 수 있어야 한다.
5. 텍스트 콘텐츠 명도 대비 : 텍스트 콘텐츠와 배경 간의 명도 대비는 4.5대 1 이상이어야 한다.
6. 자동 재생 금지 : 자동으로 소리가 재생되지 않아야 한다.
7. 콘텐츠간 구분 : 이웃한 콘텐츠는 구별될 수 있어야 한다.
✅ 운용의 용이성(Operable) : 사용자 인터페이스 구성요소는 조작 가능하고 내비게이션 할 수 있어야한다.
8. 키보드 사용 권장 : 모든 기능은 키보드 만으로 사용할 수 있어야 한다.
9. 초점 이동 : 키보드에 의한 초점은 논리적으로 이동해야 하며 시각적으로 구별할 수 있어야한다.
10. 조작 가능 : 사용자입력 및 컨트롤은 조작 가능하도록 제공되어야 한다.
11. 응답 시간 조절 : 시간제한이 있는 콘텐츠는 응답 시간을 조절할 수 있어야 한다.
12. 정지 기능 제공 : 자동으로 변경되는 콘텐츠는 움직임을 제어할 수 있어야 한다.
13. 깜빡임과 번쩍임 사용 제한 : 초당 3~50회 주기로 깜빡이거나 번쩍이는 콘텐츠를 제공하지 않아야 한다.
14. 반복 영역 건너뛰기 : 콘텐츠의 반복되는 영역은 건너뛸 수 있어야 한다.
15. 제목 제공 : 페이지, 프레임, 콘텐츠 블록에는 적절한 제목을 제공해야한다.
16. 적절한 링크 텍스트 : 링크 텍스트는 용도나 목적을 이해할 수 있도록 제공해야한다.
✅ 이해의 용이성(Understandable) : 콘텐츠는 이해할 수 있어야 한다.
17. 기본 언어 표시 : 주로 사용하는 언어를 명시해야 한다.
18. 사용자 요구에 따른 실행 : 사용자가 의도하지 않은 기능(새 창, 초점에 의한 맥락 변화)은 실행되지 않아야 한다.
19. 콘텐츠 선형 구조 : 콘텐츠는 논리적인 순서로 제공해야한다.
20. 표의 구성 : 표는 이해하기 쉽게 구성해야한다.
21. 레이블 제공 : 사용자 입력에는 대응하는 레이블을 제공해야한다.
22. 오류 정정 : 입력 오류를 정정할 수 있는 방법을 제공해야한다.
✅ 견고성(Robust) : 웹 콘텐츠는 미래의 기술로도 접근할 수 있도록 견고하게 만들어져야 한다.
23. 마크업 오류 방지 : 마크업 언어의 요소는 열고 닫음, 중첩 관계 및 속성 선언에 오류가 없어야 한다.
24. 웹 어플리케이션 접근성 준수 : 콘텐츠에 포함된 웹 어플리케이션은 접근성이 있어야 한다.
WAI-ARIA ?
웹 접근성을 향상시할 수 있는 방법 중의 하나
필요성?
1. 시멘틱한 HTML를 작성하는것을 최우선으로 하되 불가피할 경우 WAI-ARIA를 이용해서 추가적인 의미를 부여해서 원활한 페이지 탐색
2. SPA처럼 AJAX를 사용하는 상황(새로고침 없이 페이지 내용이 바뀌는 상황)에서도 변경된 영역에 대한 정보를 전달해 줄 수 있어 동적인 컨텐츠에서도 웹 접근성 향상
사용법?
HTML태그 내부에 속성 추가
1. 역할 : html의 요소와 종류의 역할이 서로 맞지 않을 때 명시해주는 role 속성
<div role="button">div이지만 button으로 사용되는 요소</div>2. 상태 : 여러 개의 선택 가능한 요소 중에서 선택 가능인 상태 요소를 표시할 수 있는 aria-selected 속성
<div role="tabList">
<li role="tab" aria-selected="true">Tab1</li>
<li role="tab" aria-selected="false">Tab2</li>
<li role="tab" aria-selected="false">Tab3</li>
</div>3. 속성 :
- aria-label 요소에 라벨을 붙여주는 기능
- aria-live : 해당 요소가 실시간으로 내용을 변경하는 영역인지 표시(alert,modal 같은 역할) polite, assertive 속성값이 있다.
'네트워크' 카테고리의 다른 글
| [인증/보안]OAuth (0) | 2023.05.04 |
|---|---|
| [인증/보안] Token (2) | 2023.05.03 |
| [인증/보안] cookie/session (2) | 2023.05.02 |
| [ngrok] 3004오류 (2) | 2023.05.01 |
| [네트워크/HTTP] HTTP (0) | 2023.04.29 |
