2021-12-20 17:13 작성

2021-12-29 15:09 수정

웹과 웹표준에 대한 배경

Table of contents
  1. 웹의 간단한 역사
  2. 웹 표준(Web standards)
    1. “개방형” 표준
    2. 웹을 부수지 마라
  3. 현대 웹 기술의 개요
    1. Browsers
    2. HTTP
    3. HTML, CSS 그리고 JavaScript
  4. 웹에 있어 고려할 사항
    1. 교차 브라우저 호환성(cross-browser compatibility)
    2. 반응형 웹 디자인(Responsive web design)
    3. 퍼포먼스(Performance)
    4. 접근성(Accessibility)
    5. 국제화(Internalization)
    6. 프라이버시 & 보안(Privacy & Security)
  5. 저작권

웹의 간단한 역사

1989년 Tim Berners-Lee(축약: BL)는 CERN에서 Information Management: A Proposal과 HyperText를 작성했고 이 두 개의 발표는 web이 작동하는 배경을 제공했다. 이 발표는 TimBL의 상급자들에게 충분한 확신과 흥미를 제공했고 그로 하여금 세계적 하이퍼텍스트 시스템을 창조하게 했다.

1990년 후반, TimBL은 web의 첫번째 버전을 구동시키는데 필요한 모든 것을 창조해낸다.(HTTP, HTML, 첫 웹 브라우저로 불리는 WorldWideWeb, HTTP 서버, 살펴볼 수 있는 웹 페이지)

몇 년 후에 web은 폭발적으로 성장해서 복수의 브라우저가 출시되었고, 수천여개의 웹 서버가 구성되었으며 몇 백만개의 웹 페이지가 창조되었다.

1994년, TimBL은 World Wide Web Consortium(W3C)을 설립했고 웹 기술 명세서를 만들기 위해 많은 다른 기술 기업들의 대표와 합작했다. 그 후에 CSS와 JavaScript와 같은 기술이 뒤따라왔고, 웹은 더욱 오늘날의 웹과 유사한 형태가 되었다.


웹 표준(Web standards)

웹 표준은 웹 사이트를 빌드하는데 사용하는 기술들을 말한다. 이 표준은 기술 명세서라고 불리는 긴 기술 문서로서 존재하는데, 이 문서에는 기술이 어떻게 작동해야하는지 자세하고 정확하게 적혀 있다. 이 문서들은 학습 용도로서는 부적합하지만, 대신에 소프트웨어 엔지니어들이 기술을 시행하는데 사용된다. (대개 웹 브라우저에서 그러함)

예를 들어, HTML Living Standard는 HTML(모든 HTML 요소와 연관된 API 그리고 다른 연관 기술들)이 정확히 어떻게 실행되어야하는지 기술한다.

웹 표준은 각 계의 기술 회사들이 만나 각자의 영역에서 기술들이 어떤식으로 활용되어야 하는지 협의해 만들어졌다. W3C는 가장 잘 알려진 웹 표준화 기구(web standards body)이며 그 외에도 WHATWG(HTML 언어에 대한 living standards를 유지하는 기구), ECMA(ECMAScript의 표준을 발표하는 기구), Khronos(웹 GL과 같은 3D 그래픽에 관한 기술을 발표하는 기구) 등이 있다.

“개방형” 표준

TimBL과 W3C가 초기부터 중요하게 생각해온 웹 표준의 중요한 측면 중 하나는 웹은 기여와 사용에 있어 자유로워야 하고 독점권이나/라이센싱에 의해 지장받아서는 안된다는 것이다. 따라서 누구든 웹사이트를 자유롭게 빌드할 수 있어야 하고 누구든 기술 명세에 따라 기여할 수 있어야 한다. 즉, 웹 기술은 개방형으로 만들어졌고 많은 기업들의 협업으로 탄생한 결과물이기에 누구도 통제할 수 없다.

웹을 부수지 마라

웹 기술은 이전에 사용했던 기술 버전과도 호환되어야 하고 미래 기술과도 호환되어야 한다.


현대 웹 기술의 개요

Browsers

웹 브라우저는 사용자가 웹을 이용하기 위해 사용하는 소프트웨어 프로그램으로 파이어폭스, 크롬, 오페라, 사파리 그리고 엣지 등으로 구성된다.

HTTP

하이퍼텍스트 트랜스퍼 프로토콜이라고 불리는 HTTP는 웹 브라우저가 웹 서버(웹 사이트가 저장된)와 통신하게 하는 메시징 프로토콜을 말한다. 일반적으로 다음과 같은 식이다.

"안녕, 웹 서버. 나한테 bbc 뉴스 사이트 이용할 수 있는 파일들 좀 줄래?"
"그럼, 웹 브라우저! 여기 있어."
[파일을 다운로드하고 페이지를 렌더링 중...]

기본적인 아이디어는 위와 같다.

HTML, CSS 그리고 JavaScript

  • 하이퍼텍스트 마크업 언어(HTML)는 의미와 구조를 새기기 위해 각자 감싸진(마크업) 서로 다른 컨텐츠 요소들로 구성된다.
<h1>This is a top-level heading</h1>

<p>This is a paragraph of text.</p>

<img src="cat.jpg" alt="A picture of my cat">

건물 건축에 빗대자면 HTML은 집의 토대와 벽 역할을 한다. (구조화와 붙들기)

  • Cacading Style Sheets(CSS)는 규칙에 기반한 언어로 HTML에 스타일을 더한다. 예를 들어, text, background colors, borders, animating things 혹은 laying out a page 등을 설정한다.
p  {
  color: red;
}

마찬가지로 건물 건축에 빗대면, 페인트, 벽지, 카펫 등 집을 더 예쁘게 보이게 하는 역할을 한다.

  • JavaScript는 웹 사이트에서 상호작용 기능을 더하는 것부터 시작해서 역동적 스타일링, 서버에서 업데이트 불러오기, 3D 그래픽 그리기 등을 할 수 있게하는 프로그래밍 언어다. 다음의 간단한 JavaScript는 메모리에 있는 paragraph를 참조해 그 안에 있는 텍스트를 조작한다.
let pElem = document.querySelector('p');
pElem.textContent =  'We changed the text!';

건물 건축에서 JavaScript는 요리기구, TV, 전자레인지, 헤어드라이어 등 집에서 유용한 기능을 하는 제품에 비유할 수 있다.


웹에 있어 고려할 사항

교차 브라우저 호환성(cross-browser compatibility)

가능한한 많은 기기에서 웹페이지가 작동하도록 한다. 이것은 모든 브라우저가 지원하는 기술을 사용하여 사용자가 더 나은 경험을 할 수 있도록 하는 것을 뜻한다. 또한, 특정 브라우저에서 어느 하나라도 제대로 작동하지 않는 것이 있는지 테스트하고 작동하지 않는 것들을 고쳐나가는 작업을 해나가는 것을 포함한다.

반응형 웹 디자인(Responsive web design)

기능과 레이아웃이 유연하며 다른 브라우저에 자동으로 맞춘다. 브라우저의 넓이의 변화에 따라 컨텐츠가 반응적으로 적용되어 사용자 경험을 향상시키고 다양한 기기에서 디자인이 깨지지 않고 적용된다.

퍼포먼스(Performance)

퍼포먼스는 웹 사이트를 가능하면 빨리 로드하는 것을 의미한다. 또한 직관적이어서 사용하기 쉽고 사용자가 좌절하지 않게 만드는 것을 의미하기도 한다.

접근성(Accessibility)

가능한한 많은 유형의 사람들이 웹사이트를 사용할 수 있도록 만드는 것을 의미한다. 예를 들어, 청각장애, 시각장애, 인식 장애, 신체적 장애를 가진 사람들이 웹사이트를 이용할 수 있도록 만드는 것을 말한다. 뿐만 아니라 나이, 문화, 네트워크 속도 등 다양한 웹 사이트의 이용에 제약이 있는 요소들을 고려하여 웹사이트를 만든다.

국제화(Internalization)

다른 문화와 다른 언어를 사용하는 많은 사람들이 웹사이트를 이용할 수 있도록 만드는 것을 의미한다. 여기서 간단하고 속어가 아닌 언어를 사용하며 레이아웃을 변경하는 등의 기술적 고려를 해야 한다.

프라이버시 & 보안(Privacy & Security)

프라이버시는 사적으로 비즈니스를 수행하게 할 수 있게 하며 개인을 지켜보거나 필요 이상의 정보를 수집하지 않는 것을 의미한다. 보안은 악성 유저들이 사용자의 정보를 갈취하지 못하게 막고 웹사이트를 안전하게 이용할 수 있도록 만드는 것을 말한다.


저작권

Mozilla 기여자가 작성한 MDN에 대해는 CC-BY-SA 2.5 라이선스에 따라 사용할 수 있습니다.

크리에이티브 커먼즈 라이선스
이 저작물은 크리에이티브 커먼즈 저작자표시-동일조건변경허락 4.0 국제 라이선스에 따라 이용할 수 있습니다.