왜 사이트 주소는 항상 www로 시작하는거지?(웹과 웹 표준에 대하여)
1989년, 유럽 입자 물리 연구소(CERN)의 영국 물리학자 팀 버너스 리(Tim Berners Lee)가 연구원 간에 아이디어를 주고받을 때 항상 전자 우편이나 파일을 통해 주고받는 것이 비효율적이라고 생각하여 제안한 웹은 공통된 공간에 각자의 정보를 올리고 관리할 수 있는 일종의 정보 관리 시스템에서 시작되었습니다. 버너스 리는 최초의 웹 브라우저인 "WWW(World Wide Web)"을 개발했습니다. 이 브라우저는 웹 페이지를 볼 수 있는 것뿐만 아니라, 웹 페이지를 작성할 수 있는 편집 기능도 제공했습니다.
1991년, World Wide Web이 CERN 외부의 전 세계 사용자들에게 공개되면서 웹은 빠르게 확산되었고 1994년, 팀 버너스 리가 World Wide Web 컨소시엄(W3C)을 설립하여 웹의 표준을 관리하고 발전시키기면서 웹은 전 세계적으로 통일된 규칙 아래에서 발전할 수 있게 되었습니다.
웹 표준을 알아보기에 앞서 웹이 무엇인지부터 먼저 알아보겠습니다.
* 웹 구성 요소
* 웹 작동 원리
* 웹의 특징
* 웹 표준
World Wide Web이란 인터넷에 연결된 사용자들이 서로의 정보를 공유할 수 있는 공간을 의미합니다.
간단히 줄여서 WWW나 W3라고도 부르며, 간단하게 웹(Web)이라고 가장 많이 불립니다.
인터넷과 같은 의미로 많이 사용되고 있지만, 정확히 말해 웹은 인터넷상의 인기 있는 하나의 서비스일 뿐입니다. 하지만 현재에는 인터넷과 웹이라는 단어가 서로 혼용되어 사용될 만큼 인터넷의 가장 큰 부분을 차지하고 있습니다.
# 웹 구성 요소
1. 웹 브라우저
: 사용자가 웹 페이지를 탐색하고 보는 데 사용되는 소프트웨어입니다.
ex) Google Chrome, Mozilla Firefox, Safari
2. 웹 서버
: 웹 페이지와 파일을 저장하고, 클라이언트의 요청을 받아 처리하여 해당 페이지를 전송하는 컴퓨터 시스템입니다.
ex) Apache, Nginx
3. HTTP/HTTPS
: 웹 브라우저와 웹 서버 간의 통신 규약으로, HTTP는 기본적인 통신 프로토콜이고 HTTPS는 보안 통신이 추가된 프로토콜입니다.
4. HTML
: 웹 페이지의 구조를 정의하는 마크업 언어로, 웹 문서를 작성하는 데 사용됩니다.
**HTML에 대한 자세한 내용은 '세트로 다니는 HTML, CSS, Javascript'에서 다루겠습니다.
5. URL
: 웹 페이지의 주소를 나타내는 고유 식별자로, 사용자가 특정 웹 페이지에 접근할 수 있게 합니다.
# 웹 작동 원리
1. 사용자 요청
: 사용자가 웹 브라우저를 통해 URL을 입력하거나 링크를 클릭하여 웹 페이지를 요청합니다.
2. DNS 조회
: 브라우저는 입력된 URL의 도메인 네임을 IP 주소로 변환하기 위해 DNS 서버에 요청합니다.
3. 서버 요청
: 브라우저는 해당 IP 주소를 통해 웹 서버에 HTTP/HTTPS 요청을 보냅니다.
4. 응답
: 웹 서버는 요청된 웹 페이지를 찾아 HTTP/HTTPS 응답으로 웹 브라우저에 전송합니다.
5. 렌더링
: 웹 브라우저는 수신한 HTML, CSS, JavaScript 등을 해석하여 사용자에게 웹 페이지를 보여줍니다.
**4-5번의 자세한 과정은 '웹 브라우저에서 Enter를 누른 후 일어나는 모든 일들 낱낱이 파헤치기'에서 다루겠습니다.
아래는 클라이언트가 서버에 데이터를 요청하고, 서버가 JSON 형식으로 응답하는 예시입니다.
// 클라이언트가 서버에 프로필 정보를 요청하는 HTTP GET 요청
GET /api/user/profile?userId=12345 HTTP/1.1
Host: example.com
Accept: application/json
// 서버는 요청을 처리하고, 해당 사용자의 프로필 정보를 JSON 형식으로 응답
HTTP/1.1 200 OK
Content-Type: application/json
{
"userId": 12345,
"name": "John Doe",
"email": "johndoe@example.com",
"age": 30,
"location": "New York, USA"
}
# 웹의 특징
장점
1. 인터넷 연결만 있으면 언제 어디서나 접근할 수 있다.
2. 설치용량이 가볍고, 사용방식이 편리하며, 배포가 간편하다.
단점
1. 인터넷 연결만 되있으면 사용자의 신원을 확인하지 않고 접근이 가능하며 조작이 쉽기 때문에 보안에 취약하다. 해결 방법은 '웹 요청을 처리하는 4가지 기술 : Filter, AOP, Interceptor, Dispatcher Servlet' 이 글을 참고해주세요.
2. stateless하다. connection을 맺은 상태에서 통신하는게 아니기 때문에 이전 요청의 상태를 기억하지 않는다. 이벤트가 발생할 때마다 사용자의 상태를 알기 어렵기 때문에 데이터를 어딘가에(ex) 쿠키, 세션) 기록해 놔야한다.
# 웹 표준
웹 표준이란 웹 기술이 모든 브라우저와 장치에서 일관되게 작동하도록 보장하기 위해 국제적으로 합의된 규칙, 가이드라인, 기술 사양을 의미합니다. 표준화 단체인 W3C(World Wide Consortium)가 권고한 표준안에 따라 웹사이트를 작성할 때 이용하는 HTML, CSS, JavaScript 등에 대한 규정을 담고 있으며 웹 표준의 궁극적인 목적은 웹사이트에 접속한 사용자가 어떠한 운영체제나 브라우저를 사용하더라도 동일한 결과를 보이게 하는 것입니다.
// 웹 표준을 지킨 HTML 예시
<!DOCTYPE html> // DOCTYPE 선언, HTML 문서가 HTML5 표준을 따르고 있음을 명시함
<html lang="en"> // 문서의 기본 언어가 영어임을 명시함
<head>
<meta charset="UTF-8">
// 문서의 문자 인코딩을 UTF-8로 설정하여 다양한 언어와 문자를 올바르게 표시함
<meta name="viewport" content="width=device-width, initial-scale=1.0">
// 반응형 웹 디자인을 위해 뷰포트의 크기를 설정, 다양한 기기에서 올바른 화면 비율을 유지함
<title>Web Standards Example</title>
<meta name="description" content="An example of web standards compliant HTML.">
// 검색 엔진 최적화(SEO)에 도움을 주며, 웹 페이지의 내용을 설명하는 중요한 정보를 제공함
<link rel="stylesheet" href="styles.css">
// CSS와 HTML의 분리하여 코드의 유지 보수성과 재사용성을 높이며, HTML 문서의 가독성을 향상시킴
</head>
<body>
<header> // 구조적 시맨틱 HTML5 태그를 사용하여 문서의 구조를 명확하게 정의함
<h1>Welcome to My Website</h1> // 제목의 계층 구조를 명확하게 정의함
<nav> // 구조적 시맨틱 HTML5 태그를 사용하여 문서의 구조를 명확하게 정의함
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main> // 구조적 시맨틱 HTML5 태그를 사용하여 문서의 구조를 명확하게 정의함
<section id="home"> // 구조적 시맨틱 HTML5 태그를 사용하여 문서의 구조를 명확하게 정의함
<h2>Home</h2>
<p>This is the homepage of my website. Here you can find information about various topics.</p> </section>
<section id="about">
<h2>About</h2> <p>This section contains information about the purpose of this website.</p>
</section>
<section id="contact">
<h2>Contact</h2>
<form action="/submit-form" method="post">
// 'method="post"를 사용하여 데이터를 안전하게 전송함
<label for="name">Name:</label>
// 각각의 입력 필드와 연결되어 있어 이 폼을 쉽게 해석할 수 있도록 접근성을 향상시킴
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="message">Message:</label>
<textarea id="message" name="message" required></textarea>
<button type="submit">Submit</button>
</form>
</section>
</main>
<footer> // 구조적 시맨틱 HTML5 태그를 사용하여 문서의 구조를 명확하게 정의함
<p>© 2024 My Website. All rights reserved.</p> // 웹사이트의 저작권을 명확히 표시함
</footer>
</body>
</html>
웹 표준의 중요성 및 장점은 다음과 같습니다.
1. 수정 및 운영관리 용이
: 콘텐츠의 올바른 구조화와 CSS로 시각표현을 통일하여 제어하게 되어 페이지 제작의 부담 감소 및 관리가 용이합니다.
2. 접근성 향상
: 웹 표준을 이용해 작성한 문서는 다양한 브라우저 환경 및 휴대폰에서도 정상적인 동작이 가능하므로 사용자나 접속 장치의 접근성이 용이합니다.
3. 검색 엔진 최적화
: 검색 엔진은 웹 페이지의 콘텐츠를 크롤링하고 색인화해야 사용자에게 적절한 검색 결과를 제공할 수 있습니다. 웹 표준을 준수하면, HTML 구조가 명확하고 간결하여 검색 엔진의 크롤러가 페이지를 쉽게 이해하고 처리할 수 있기 때문에 결과적으로 웹 페이지가 검색 엔진에 올바르게 색인화되고, 검색 결과를 최적화할 확률이 높아집니다.
4. 파일 사이즈 축소 및 서버 저장 공간 절약
: 웹 표준을 준수하면 HTML, CSS, JavaScript 코드를 더 효율적으로 작성할 수 있습니다. 중복되는 코드나 불필요한 태그, 속성을 최소화하여 전체 파일 크기를 줄일 수 있습니다. 예를 들어, CSS에서는 같은 스타일을 적용하는 여러 요소를 한 번에 지정할 수 있어 코드가 간결해지고, 파일 크기가 줄어듭니다. 또한 웹 표준을 준수한 웹 페이지는 브라우저나 서버에서 쉽게 압축할 수 있습니다. GZIP과 같은 압축 기술을 사용하면 전송되는 파일 크기를 줄일 수 있으며, 이는 서버의 대역폭 사용량과 저장 공간을 절약하는데 기여합니다. 또한, 잘 구조화된 코드와 일관된 파일 사용은 캐싱 효율성을 높여 서버 리소스 사용을 줄입니다. 결과적으로 웹 표준을 준수하여 파일 사이즈와 서버 공간을 절약하면 화면 표시에 소요되는 시간을 단축할 수 있습니다.
5. 호환성 기능
: 기존 IE 브라우저에서만 작동이 가능했던 요소들이 웹 표준을 준수함으로써 다양한 브라우저(Chrome, Firefox, Safari 등)에서도 작동이 가능합니다.
여기까지 알아보고 나니 모든 사용자에게 일관된 경험을 제공하고, 웹의 접근성, 호환성, 유지보수성을 보장하기 위해 웹 표준이 얼마나 중요한 역할을 하는지 알게 됐습니다. 웹 개발을 단순한 페이지 제작이 아닌, 사용자들에게 더 나은 서비스를 제공하기 위해 전 세계적으로 통용되는 규칙과 원칙을 이해하고 이를 준수해야겠습니다.