TIL 20231012

이번 주 목표

응답하라 추억시대 API 명세서 수정

오늘 목표

기업 노트 3개 작성

웹 표준, 웹 접근성, 웹 호환성(Cross Browsing) 공부

HTTP 통신 공부

오늘 한 것

기업 노트 3개 작성

웹 표준, 웹 접근성, 웹 호환성(Cross Browsing) 공부

HTTP 통신 공부

0. 이력서 보완

1. 웹 접근성

장애인, 고령자 등 모든 사용자가 어떠한 기술이나 환경에서도 전문적인 능력 없이

웹사이트에서 제공하는 모든 정보를 동등하게 접근하고 이해할 수 있는 권리입니다.

 

되도록이면 이미지를 사용하지 말고 소스 코드에 내용을 그대로 담는 것이 권장되며,
부득이하게 이미지를 사용할 경우 반드시 이 이미지가 어떤 내용인지 설명을 추가해야 한다.

한국형 웹콘텐츠 접근성 지침 2.1 주요 내용 (24개 검사 항목)

원칙 1	인식의 용이성 (Perceivable) : 모든 콘텐츠는 사용자가 인식할 수 있어야 한다.
1.1.1	(적절한 대체 텍스트 제공) 텍스트 아닌 콘텐츠는 그 의미나 용도를 이해할 수 있도록 대체 텍스트를 제공해야 한다.
1.2.1	(자막 제공) 멀티미디어 콘텐츠에는 자막, 원고 또는 수화를 제공해야 한다.
1.3.1	(색에 무관한 콘텐츠 인식) 콘텐츠는 색에 관계없이 인식될 수 있어야 한다.
1.3.2	(명확한 지시사항 제공) 지시사항은 모양, 크기, 위치, 방향, 색, 소리 등에 관계없이 인식될 수 있어야 한다.
1.3.3	(텍스트 콘텐츠의 명도 대비) 텍스트 콘텐츠와 배경 간의 명도 대비는 4.5대 1 이상이어야 한다.
1.3.4	(자동 재생 금지) 자동으로 소리가 재생되지 않아야 한다.
1.3.5	(콘텐츠 간의 구분) 이웃한 콘텐츠는 구별될 수 있어야 한다.

원칙 2	운용의 용이성(Operable) : 사용자 인터페이스 구성요소는 조작 가능하고 내비게이션 할 수 있어야 한다.
2.1.1	(키보드 사용 보장) 모든 기능은 키보드만으로도 사용할 수 있어야 한다. (PC웹)
2.1.1	(누르기 동작 지원) 터치(touch) 기반 모바일 기기의 모든 컨트롤은 누르기 동작으로 제어할 수 있어야 한다. (모바일웹)
2.1.2	(초점 이동) 키보드에 의한 초점은 논리적으로 이동해야 하며 시각적으로 구별할 수 있어야 한다.
2.1.3	(조작 가능) 사용자 입력 및 컨트롤은 조작 가능하도록 제공되어야 한다.
2.2.1	(응답시간 조절) 시간제한이 있는 콘텐츠는 응답시간을 조절할 수 있어야 한다.
2.2.2	(정지 기능 제공) 자동으로 변경되는 콘텐츠는 움직임을 제어할 수 있어야 한다.
2.3.1	(깜빡임과 번쩍임 사용 제한) 초당 3~50회 주기로 깜빡이거나 번쩍이는 콘텐츠를 제공하지 않아야 한다.
2.4.1	(반복 영역 건너뛰기) 콘텐츠의 반복되는 영역은 건너뛸 수 있어야 한다.
2.4.2	(제목 제공) 페이지, 프레임, 콘텐츠 블록에는 적절한 제목을 제공해야 한다.
2.4.3	(적절한 링크 텍스트) 링크 텍스트는 용도나 목적을 이해할 수 있도록 제공해야 한다.

원칙 3	이해의 용이성(Understandable) : 콘텐츠는 이해할 수 있어야 한다.
3.1.1	(기본 언어 표시) 주로 사용하는 언어를 명시해야 한다.
3.2.1	(사용자 요구에 따른 실행) 사용자가 의도하지 않은 기능 (새 창, 초점 변화 등)은 실행되지 않아야 한다.
3.3.1	(콘텐츠의 선형화) 콘텐츠는 논리적인 순서로 제공해야 한다.
3.3.2	(표의 구성) 표는 이해하기 쉽게 구성해야 한다.
3.4.1	(레이블 제공) 사용자 입력에는 대응하는 레이블을 제공해야 한다.
3.4.2	(오류 정정) 입력 오류를 정정할 수 있는 방법을 제공해야 한다.

원칙 4	견고성(Robust) : 웹 콘텐츠는 미래의 기술로도 접근할 수 있도록 견고하게 만들어야 한다.
4.1.1	(마크업 오류 방지) 마크업 언어의 요소는 열고 닫음, 중첩 관계 및 속성 선언에 오류가 없어야 한다.
4.2.1	(웹 애플리케이션 접근성 준수) 콘텐츠에 포함된 웹 애플리케이션은 접근성이 있어야 한다.

참고 자료 : 

http://www.smartebiz.kr/new/subpage02_02.html

http://www.websoul.co.kr/accessibility/WA_guide.asp

 

2. 웹표준

웹 표준이란 브라우저 종류 및 버전에 따른 기능 차이에 대하여 호환이 가능하도록 제시된 표준이다.

 다른 기종 혹은 플랫폼에 따라 달리 구현되는 기술을 동일하게 구현함과 동시에 어느 한쪽에 최적화되어 치우치지 않도록 공통요소를 사용하여 웹 페이지를 제작하는 기법을 의미한다. 표준화 단체인 W3C(World Wide Consortium)가 권고한 표준안에 따라 웹사이트를 작성할 때 이용하는 HTML, CSS, JavaScript 등에 대한 규정을 담고 있다.

 

웹 표준의 목적

웹사이트에 접속한 사용자가 어떠한 운영체제나 브라우저를 사용하더라도 동일한 결과를 보이게 하는 것이다.

(웹의 사용성 및 접근성 보장)

웹 표준 준수 이유

국내 웹의 현실은 특정 브라우저와 사용자 등의 이용환경과 비표준 페이지 및 과도한 플러그인 사용으로 장애인, 노약자를 포함한 모든 사용자들에게 운영체제 및 웹 브라우저 등의 정보 접근 제약이 있다. 따라서 브라우저의 종류나 버전에 상관없이 모든 사용자들이 동일한 웹사이트를 볼 수 있도록 웹 표준기술 작업이 필요하며 웹 표준 준수는 웹 접근성 준수를 위한 핵심이다.

 

웹 표준 준수 내용

HTML, CSS 등에 대한 WC3규격(문법) 준수 등
- HTML, CSS, Javascript 등 구조와 표현, 동작 분리 권고

웹 표준의 장점

• 1. 수정 및 운영관리 용이
  콘텐츠의 올바른 구조화와 CSS로 시각표현을 통일하여 제어하게 되어 페이지 제작의 부담 감소 및 관리용이
• 2. 접근성 향상
  웹 표준을 이용해 작성한 문서는 다양한 브라우징 환경에 대응이 가능하며 휴대폰, PDA에서도 정상적인 작동 및
  장애인 지원용 프로그램에도 도움이 되므로 사용자나 접속 장치의 접근성이 용이
• 3. 검색엔진 최적화(SEO)
  구조화된 웹페이지는 검색 로봇 수집을 통해 검색엔진에 효율적으로 노출 될 수 있도록 검색엔진의
  검색결과를 최적화
• 4. File Size 축소, 서버 저장 공간 절약
  효율적인 소스 작성은 파일 사이즈와 서버공간을 절약할 수 있으며 동시에 화면표시에 소요되는 시간을 단축
• 5. 효율적인 마크업
  CSS와 HTML문서를 분리하여 제작할 경우 불필요한 마크업이 최소화되어 페이지 로딩속도 향상
• 6. 호환성 가능
  기존 IE브라우저에서만 작동이 가능했던 요소들이 웹 표준을 준수함으로써 다양한 브라우저
  (크롬, 파이어폭스, 사파리, 오페라 등)에서도 작동

 

참고자료 : http://www.smartebiz.kr/new/subpage02_02.html

 

3. 웹 호환성 (크로스 브라우징)

웹 브라우저 버전, 종류와 관계없는 웹사이트 접근 

웹 호환성은 표준 웹 기술을 사용하여 운영체제, 브라우저 등 어느 한쪽으로 최적화되거나 종속되지 않도록 공통 요소를 사용하여 웹 페이지를 제작하는 기법으로 웹 사이트 사용 시 운영체제 및 브라우저 간 동일한 결과가 나오도록 의미하는 웹 상호운용성의 개념에 웹 표준의 준수를 포함하는 개념이다.
※ 출처
윤석찬, IE, 넷스케이프, 오페라, 사파리와 함게 하는 Cross Browsing 가이드, 2005, 한국소프트웨어진흥원
이영재, 특징: 공개소프트웨어 자치단체 홈페이지 엡 호환성 확보방안, 자치정보조합, Vol.44, 2007

 

웹 호환성 준수 내용

웹 표준 준수를 통한 브라우저 호환성 확보
- HTML, CSS 문법 준수
- 동작, 레이아웃, 플러그인 호환성

 

웹 호환성 준수 이유

웹 표준을 준수하지 않고 특정 운영체제와 브라우저에 종속되어 있다면 다양한 운영체제 환경 및 브라우저에서의 사용이 불가능한 문제점이 발생하게 된다.
국내는 Internet Explorer 웹 브라우저에 최적화된 비표준 기술이 널리 사용되고 있다. 개방형 통합 플랫폼인 ActiveX가 그 대표적인 예로, ActiveX는 웹사이트에서 정적인 웹문서를 멀티미디어 기술로 동작 가능하게 하는 플러그인(Plug-in) 기술이나 보안에 취약한 문제점이 있으며 또한 IE에서만 사용되는 기술로 다른 웹 브라우저에서는 구동이 불가능하여 외국에서 국내 웹 사이트에 접근할 때 표준화되지 않은 웹사이트로 인해 웹 호환성이 현격히 떨어지는 문제가 발생할 수 있다. 따라서 제공하는 서비스를 모든 웹 브라우저 환경에서 동일하게 이용하기 위해서는 웹 호환성을 준수한 웹사이트의 구축이 필요하다.

 

4. HTTP 통신

HTTP란?

데이터를 주고 받는 양식을 정의한  통신 규약

 

브라우저는 서버에게 자신이 원하는 페이지 (URL 등의 정보) 를 요구(Request)합니다. 

서버는 브라우저가 원하는 페이지가 있는지 확인하고 있다면 해당 페이지에 대한 데이터를 반환(Response)해줍니다.

없다면 없는 페이지에 대한 데이터를 반환합니다. 

 

개발자 도구의 Network 탭에서 HTTP status 및 기타 정보 확인 가능

 

Method

GET : 리소스를 얻을 때

POST : 웹 서버에 데이터를 게시할 때 

 

Header : 추가 데이터, 메타 데이터

브라우저가 어떤 페이지를 원하는지

요청 받은 페이지를 찾았는지

성공적으로 찾았는지

 

Payload : 실질적인 데이터

GET 메서드를 제외하고는 모두 Payload를 보낼 수 있다

 

HTTP 특징

• 단방향성
  • 서버가 먼저 응답을 보낼 수 없고 클라이언트가 요청을 보내야만 응답할 수 있다. (2버전 이전)
• 비연결성(connectionless)
  • 클라이언트의 요청으로 서버와 연결된 후, 요청에 대한 응답의 데이터를 전송하면 연결을 종료한다.
• 따라서, 실시간 통신을 할 수 없다. > 웹소켓 이용

• 문제점
  • HTTP는 평문 통신이기 때문에 도청이 가능하다.
  • 통신 상대가 검증된 상대인지 확인하지 않기 때문에 위장이 가능하다.
  • 완전성을 증명할 수 없기 때문에 변조가 가능하다.
• 이러한 문제점을 해결하기 위해 HTTPS가 등장한다.

 

HTTP 통신 흐름

📌 브라우저에 www.naver.com을 치면 어떤일이 일어나나요?

1. 웹 브라우저에 www.naver.com 입력.
2. 사용자가 입력한 URL 주소 중 도메인 네임 부분을 DNS 서버에 검색하고, DNS서버에서 해당 도메인 네임에 해당하는 IP주소를 찾아온다.
3. HTTP 프로토콜을 사용하여 페이지 URL정보와 찾아온 IP주소를 포함하는 HTTP 요청 메세지를 생성하고, 생성된 HTTP 요청 메세지는 TCP/IP 프로토콜을 사용하여 인터넷 망을 통해 해당 IP주소의 컴퓨터로 전송된다.
4. HTTP 요청 메세지를 받은 컴퓨터(서버)는 웹 페이지 URL 정보 중 PATH(경로) 와 HTTP Method(동작)에 맞는 액션을 취한다. (여기서는 naver 페이지를 띄우기 위해 필요한 html 등의 리소스를 찾을 것이다.)
5. 생성된 응답 데이터는 또 다시 HTTP 프로토콜을 사용하여 HTTP 응답 메세지로 만들어지고 TCP/IP 프로토콜을 사용하여 인터넷 망을 통해 요청했던 컴퓨터(클라이언트)로 전송된다.
6. 도착한 HTTP 응답 메세지는 웹 브라우저에 의해 브라우저 렌더링 과정을 거쳐 화면에 출력되어 사용자가 볼 수 있게 된다. 

 

 

HTTP CODE

 

100 - 199

정보 제공용 상태 코드

 

200 - 299

성공 코드

200 OK 

201 Created

202 승인됨

204 콘텐츠 없음 (삭제 완료) - 메시지를 포함하지 않는다! 빈 라인으로 반환

참고자료 : https://restfulapi.net/http-status-204-no-content/

 

400 - 499

클라이언트 오류 코드

404 Not Found 찾을 수 없음 : 클라이언트 URL이 잘못된 경우

500 - 599

서버 오류 코드

500 내부 서버 오류

 

참고 자료 : https://www.moesif.com/blog/technical/api-design/Which-HTTP-Status-Code-To-Use-For-Every-CRUD-App/#200---299

스파르타 코딩클럼 Computer Science 자료

---

정리 

웹 접근성

장애인, 고령자 등 모든 사용자가 어떠한 기술이나 환경에서도 전문적인 능력 없이

웹사이트에서 제공하는 모든 정보를 동등하게 접근하고 이해할 수 있는 권리

 

웹 표준

브라우저 종류 및 버전에 따른 기능 차이에 대하여 호환이 가능하도록 제시된 표준

 

웹 호환성 (Cross Browsing)

웹 브라우저 버전, 종류와 관계없는 웹사이트 접근 

 

HTTP

데이터를 주고 받는 양식을 정의한  통신 규약

 

KPT

Keep

열심히 노력한 것

 

Problem

응답하라 추억시대와 기업노트에 소홀한 것

 

Try

언제나 성실한 자세

 

소감

오늘은 드디어 그동안 묵혀왔던 이력서 보완과 면접 준비를 하였다. 

오후에 동기들을 만나는데 기대된다.