웹브라우저와 HTML
목차
HTML은 웹디자인의 기초입니다. 우리가 인터넷 브라우저라고 하는 것에서 보는 모든 페이지에는 HTML이 들어가 있습니다. 크롬 브라우저에서 마우스 오른쪽을 클릭하면 ‘검사’라는 메뉴가 나오는데 복잡한 HTML 태그와 각종 스크립트 등을 볼 수 있습니다.
물론 사용자가 인터넷을 보는 이유는 HTML 파일을 보기위해서가 아니라 브라우저를 켜고 웹사이트에 접속하여 정리되어 있는 정보들을 보기 위해서 입니다.
사실 정말로 정보가 필요하면 그다지 정리할 필요도 없는데 지금은 UI/UX라고 고급적인 디자인 부분을 강조하는 추세다 보니까 점점 복잡해지는데요. 초창기에 웹이 개발된 이유는 주로 텍스트와 간단한 이미지를 공유하기 위해서 였습니다.
전세계를 대상으로 정보가 교환가능하다는 사실 자체가 혁명적인 아이디어였고 4차산업 혁명이란 이름으로 각종 기술이 개발되고 있는 지금도 웹은 가장 혁명적인 아이디어 중에 하나입니다. 이것이 없었다면 구글, 애플, 네이버, 카카오 같은 IT기업들은 지금과 같이 성장하지 못했을 것 입니다.
개인 PC 운영체제의 대명사 MS는 모르겠네요. 이들은 인터넷이 없던 시절부터 있었으니까… MS의 매출은 대부분 윈도우이이지만 윈도우 시스템의 모든 업데이트가 인터넷으로 이루어지기 때문에 이들도 인터넷이 없었다면 그다지 획기적인 회사가 아니었을 것 입니다. (블루스크린 때문에 진즉에 망했을 수도…)
어쨋든 인터넷은 PC의 발전과 함께 IT기술의 역사 그 자체라고도 말할 수 있을겁니다. PC로 업무나 게임같은 것을 안하는 사람도 인터넷은 합니다. 인터넷은 아이들도 하고 할아버지, 할머니도 합니다. 글을 읽을 줄 알고 키보드를 칠 수 있으면 인터넷을 하기에 충분합니다. PC의 어플리케이션(앱) 중에서도 가장 진입장벽이 낮은 것이 바로 인터넷입니다.
그래서 웹을 개발하려 한다면 인터넷이란 무엇인가? 정의를 한번 해볼 필요가 있습니다. 인터넷은 우리가 일상적으로 사용하는 용어고 월드와이드웹 (world wide web)이 더 구체적인 명칭입니다. 인터넷이란 것은 기술적으로 TCP/IP 프로토콜로 이루어진 네트워크를 의미합니다. 프로토콜은 통신을 위한 규격으로 인터넷은 누구에게나 열려있습니다. 즉 공공의 자산입니다. 국가가 다르더라도 세계에서 공유가 가능한 공공의 자산이란게 있습니다. 예를 들어 공기 같은 것, 자연 환경, 배와 비행기의 항로 같은게 있습니다. 지구에 있는 유무형의 자원 중에 공동으로 사용가능 한 것은 모두 공공의 자산입니다. (물론 그 중에 국가가 점령하는 것들도 많음) 그 중에서도 인터넷은 좀 특별합니다.
인터넷은 일단 허가제가 아닙니다. 특정 국가권력의 허가를 받지 않아도 데이터를 사용할 수 있고 또 전세계에 정보를 전송할 수 있습니다. 허가제가 아니기 때문에 통신규약만 맞추면 언제든지 내가 그 네트워크에 접속할 수 있고 또 서버를 만들거나 해서 정보를 공유할 수 있습니다. 그래서 프로토콜(Protocol)같은 딱딱한 기술용어를 사용하는 것 입니다.
만약에 미국의 인터넷 사이트를 보기 위해서 미국 정부의 허가가 필요하거나 한국 정부의 허가가 필요하다면 그것은 공공의 자산이 아닙니다. 인터넷이 처음 나오던 시절에는 이 통신 규약만 지키면 무슨 웹사이트를 만들어도 된다는 것은 상당히 파괴적인 혁신이었습니다. 20세기는 대부분의 국가가 개인에 대해 강력한 영향력을 행사하였습니다. 한국의 해외여행이 완전히 자유화 된 것은 1989년 부터 였고 일본문화 수입을 완전개방한 것은 2004년도 였습니다. 그러니까 인터넷이 없던 시절에는 해외의 정보나 문화를 접하는 일은 상당히 어려웠다는 거죠. 그래서 그때는 KBS같은 지상파 공영방송이나 공신력 있는 신문과 잡지가 정보 전달에 있어서 상당히 주요했습니다. 이들은 인터넷의 보급률이 늘어나고 사용시간이 증가하면서 점차 영향력을 뺏기게 되었죠. 결국 주류 언론과 방송사도 지금은 상당수 유튜브에 들어와 있는 것을 보면 시대의 변화를 알 수 있습니다. (방송사들은 초기에는 유튜브 같은 것에 들어오려는 생각이 없었음)
허가제가 아닌 인터넷이 어떻게 이렇게 까지 강력한 힘을 발휘하게 되었는가? 뭐 21세기 초부터 인터넷의 역사를 뒤지다 보면 와꾸가 잡힐 것 입니다. 그것까지 여기서 이야기하려는 것은 아니고 인터넷 프로토콜인 TCP/IP는 하드웨어 적인 규약 입니다. 그러니까 TCP IP가 작동하는 네트워크 장비를 사용해서 데이터를 전송하고 받아라는 것 입니다. 이러한 인터넷의 프로토콜은 수십개가 계층을 이루고 있는데 이른 OSI 7계층이라고 합니다. 그 중에서 HTML은 HTTP라는 응용계층의 프로토콜을 사용합니다.
이 HTML은 HTTP 규격에 따라 클라이언트(각 PC)가 서버에 요청하여 받습니다. 이런 요청을 하고 응답을 받아서 HTML 문서를 다시 풀어서 웹에이지로 보여주는 클라이언트 프로그램이 바로 웹브라우저입니다.
다소 설명이 길어지긴 했습니다만, 우리가 너무 당연하게 생각하기 때문에 원리적으로 까먹을 때가 많은데 인터넷과 웹브라우저 그리고 HTML의 관계를 한번쯤 리마인드 해봤습니다.
그러니까 HTML도 규칙이라고 생각하면 됩니다. HMTL은 프로그래밍 언어가 아니라 구조화된 텍스트 데이터기 때문에 어떻게 보면 문자만 빨리 도착하면 어떻게든 사용이 가능합니다. 그럼에도 국제 표준을 만드는 것은 전세계인들이 어떤 웹브라우저를 통해 HMTL 문서를 보더라도 동일하게 구조화된 양식으로 볼 수 있도록 하기 위해서입니다. 예를 들어 h1 태그를 쓰면 글자가 굵게 표시되서 제목인 줄 알 수 있습니다. 인간도 알 수 있지만 이를 해석하는 컴퓨터의 입장에서도 시멘틱(semantic – 맥락적인) 분석을 통해 아 h1의 태그가 붙은 글자가 더 중요한 검색어로 사용하는구나~ 파악을 하고 검색 엔진에서 더 정확한 결과를 보여줄 수 있습니다.
인터넷 밈에서 볼 수 있듯이 HTML은 프로그래밍 언어는 아니지만 방대한 생태계를 구성하고 있습니다. 사실 HTML 하나만 사용하는 일은 없겠죠. 프론트엔드만 해도 HTML/CSS 자바스크립트, 프레임워크(리액트, 뷰, 앵글러 등) 등 여러가지를 알아야 합니다. 어떤 언어와 환경으로 웹사이트를 구축하더라도 결국은 HTML과 CSS를 사용해서 표현해야 합니다.
HTML 난이도는?
HTML은 Hyper Text Markup Language로 어떤 로직이 있는 코드는 아닙니다. 프로그램의 로직이라함은 실행에 대한 순서가 있고 선택에 따른 분기를 하거나 입출력 장치를 제어하는 프로그래밍 적인 말하는데 HTML에는 그런게 없습니다. 오로지 문서의 구조에 대한 내용이죠. 하지만 그렇다고 HTML을 완전히 프로그래밍과 동떨어진 무언가로 보는 것은 적절하지 않습니다. 웹브라우저에서 HTML은 DOM(문서 객체 모델) 객체로 자바스크립트 코드를 사용해서 조작할 수 있습니다. 또 HTML 중에는 서버에 요청사항을 보내는 FORM 등 웹프로그래밍을 위해 꼭 필요한 내용이 들어있습니다.
HTML만 따로 공부한다면 쉽다고 느낄 수 있지만 이것들을 CSS로 스타일을 넣고 자바스크립트로 조작하기 위해서는 최소한의 훈련과 실전 프로젝트를 거쳐야 합니다. 하지만 다른 언어와 비교해봤을 때 쉬운 것은 사실이고 또 결과물을 바로바로 보면서 진행할 수 있어서 쉬운편입니다. 물론 개인간에 학습능력에 따른 차이가 날 수 있습니다.
예제
간단한 HTML 파일을 보겠습니다. 브라우저에 Hello World 를 출력합니다.
비주얼 스튜디오 코드를 사용하면 템플릿 코드로 작성해주는 것이니 외울 필요는 없습니다. html 안에 head가 있고 body가 있고 이런 식으로 구조화가 되어 있습니다. 하나의 웹페이지를 만들기 위해서 이 안에 많은 내용이 들어갑니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>개별 태그의 작성법도 간단히 보겠습니다. 기본적으로 태그는 <태그>로 시작해서 </태그>로 끝납니다. 한번만 사용하는 태그는 </태그> 와 같은 형태입니다.
<em>강조표시 텍스트!</em>
위의 HTML코드를 실행하면 아래와 같습니다.(강조태그 emphasize)
강조표시 텍스트!요약
유저는 웹브라우저를 열고 인터넷의 HTTP 프로토콜을 사용해서 데이터를 교환할 수 있습니다. HTML은 구조화된 문서입니다. CSS로 스타일을 입히고 자바스크립트 등의 프로그래밍 언어를 사용해서 웹페이지를 구현합니다.
마크업언어로 난이도는 어렵지 않습니다만, 웹개발을 하기 위해서는 HTML과 CSS 자바스크립트 등 프론트엔드와 백엔드를 다 알아야 하기 때문에 방대한 내용에 대한 공부를 하게됩니다. 속성코스같은 강의를 듣고 하루아침에 배우는 것은 불가능하고 많은 시간 실제 웹사이트의 개발을 하고 유지/보수를하는 하면서 실력을 늘릴 수 있습니다. (즉 경력이 쌓여야 한다)
MDN은 개발자들이 많이 사용하는 레퍼런스인데 한글 번역 문서를 보면 초보자는 좀 이해하기 어렵습니다. 기초는 무료 HTML 강의 등을 통해서 배우면 충분하고요. 여러가지 웹페이지를 만들어서 배포를 해보는 것을 추천합니다. 웹의 장점은 배포가 쉽다는 것이고 이는 불특정 다수를 통한 피드백을 받아서 빨리 코드를 보완할 수 있는 장점입니다. 코드보다 내용을 보완할 수 있다느 것이 더 좋죠. MDN문서가 사용자 친화적이진 않지만 그래도 가장 많은 코드의 지식이 축척되어 있기 때문에 레퍼런스가 도움이 될겁니다.