이번 주 목표
응답하라 추억시대 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을 치면 어떤일이 일어나나요?
- 웹 브라우저에 www.naver.com 입력.
- 사용자가 입력한 URL 주소 중 도메인 네임 부분을 DNS 서버에 검색하고, DNS서버에서 해당 도메인 네임에 해당하는 IP주소를 찾아온다.
- HTTP 프로토콜을 사용하여 페이지 URL정보와 찾아온 IP주소를 포함하는 HTTP 요청 메세지를 생성하고, 생성된 HTTP 요청 메세지는 TCP/IP 프로토콜을 사용하여 인터넷 망을 통해 해당 IP주소의 컴퓨터로 전송된다.
- HTTP 요청 메세지를 받은 컴퓨터(서버)는 웹 페이지 URL 정보 중 PATH(경로) 와 HTTP Method(동작)에 맞는 액션을 취한다. (여기서는 naver 페이지를 띄우기 위해 필요한 html 등의 리소스를 찾을 것이다.)
- 생성된 응답 데이터는 또 다시 HTTP 프로토콜을 사용하여 HTTP 응답 메세지로 만들어지고 TCP/IP 프로토콜을 사용하여 인터넷 망을 통해 요청했던 컴퓨터(클라이언트)로 전송된다.
- 도착한 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 내부 서버 오류
스파르타 코딩클럼 Computer Science 자료
정리
웹 접근성
장애인, 고령자 등 모든 사용자가 어떠한 기술이나 환경에서도 전문적인 능력 없이
웹사이트에서 제공하는 모든 정보를 동등하게 접근하고 이해할 수 있는 권리
웹 표준
브라우저 종류 및 버전에 따른 기능 차이에 대하여 호환이 가능하도록 제시된 표준
웹 호환성 (Cross Browsing)
웹 브라우저 버전, 종류와 관계없는 웹사이트 접근
HTTP
데이터를 주고 받는 양식을 정의한 통신 규약
KPT
Keep
열심히 노력한 것
Problem
응답하라 추억시대와 기업노트에 소홀한 것
Try
언제나 성실한 자세
소감
오늘은 드디어 그동안 묵혀왔던 이력서 보완과 면접 준비를 하였다.
오후에 동기들을 만나는데 기대된다.
'verdantjuly > Today I Learned' 카테고리의 다른 글
TIL 20231016 (0) | 2023.10.16 |
---|---|
TIL 20231014 (0) | 2023.10.14 |
TIL 20231007 (0) | 2023.10.07 |
TIL 20231004 (0) | 2023.10.04 |
TIL 20230929 (0) | 2023.09.29 |