컴맹 부산아재의 웹 세상 탐험기: HTML, 하이퍼링크, 프로토콜... 이게 다 뭐꼬? (기초 용어 정리 01)

안녕하십니까! 'it&tech 정보창고'를 운영하며 여전히 IT 용어들과 씨름 중인 50대 컴맹 아재입니다. 😅

지난번에는 제 맥북과 아이패드 활용 계획을 말씀드렸는데요, 

본격적인 운영을 위해 아주 기본적인 HTML5에 관한 책을 보는데,

알거 같은 '인터넷과 웹이 돌아가는 기본원리' 설명도 제대로 이해를 못한다는 사실에 놀랬습니다.

오늘 '인터넷과 www 그리고 웹서버'에 관한 글들을 찾아 읽어보았는데,

솔직히 말씀드리면... 네, 여전히 어렵습니다.

책을 읽고 설명을 들어도 용어들이 낯설고 개념들이

뜬구름 잡는 것처럼 느껴질 때가 많습니다. (저만 그런가요?)

그래서 오늘은 제가 이해한 수준에서, 

그리고 앞으로 더 깊이 파고들기 위해 정리해야 할 용어들을 

제 방식대로 한번 나열해보고, 그 의미를 되새겨보는 시간을 가지려고 합니다. 

부디 저와 같은 컴맹 동지 여러분들께는 작은 도움이라도, 

고수님들께는 '껄껄, 저런 시절이 있었지' 하는 추억과 함께 

혹시 잘못된 부분이 있다면 따끔한 가르침을 주시는 계기가 되기를 바랍니다!

1. HTML, 너는 왜 '마크업(Markup)' 언어라고 불리는 거니?

우리가 처음 코딩 혹은 프로그래밍 비슷한 걸 접하면서 만나게 되는 것이

바로 HTML(HyperText Markup Language)입니다.

그런데 왜 그냥 '랭귀지(언어)'도 아니고 '마크업' 언어라고 하는 걸까요?

제가 이해하기로는, '마크업'이라는 게 마치 우리가 책이나 문서에 

"이 부분은 굵게 표시해줘!", "여기는 큰 제목으로!", 

"이건 목록으로 보여줘!" 하고 표시(Mark up)를 하는 것과 비슷하다고 합니다. 

즉, HTML은 웹페이지의 내용(텍스트, 이미지 등)이 

브라우저 화면에 어떻게 보여질지 그 구조와 의미를 정의하는 역할을 하는 거죠. 

프로그래밍 언어처럼 복잡한 계산이나 논리적인 연산을 직접 수행하기보다는, 

콘텐츠에 옷을 입히고 뼈대를 잡아주는 '표시하는' 언어라서 '마크업' 언어라고 부르는 것 같습니다.

2. 하이퍼링크(Hyperlink)와 하이퍼텍스트(Hypertext) 시스템, 

거미줄처럼 연결된 정보의 세계!

 

웹서핑을 하다 보면 파란색 밑줄 쳐진 글씨를 클릭하면 다른 페이지로 뿅! 하고 이동하잖아요? 

그게 바로 하이퍼링크라고 하더군요. 

그리고 이런 하이퍼링크들로 문서와 문서가 서로 연결되어 

마치 거미줄처럼 얽혀 있는 정보 시스템을 하이퍼텍스트 시스템이라고 부른다고 합니다.

쉽게 말해, 책을 읽다가 궁금한 내용이 나오면 각주를 찾아보거나 

다른 책을 뒤적여야 하는데, 하이퍼텍스트는 클릭 한 번으로 

관련된 정보로 바로 이동할 수 있게 해주는 마법 같은 시스템인 거죠. 

우리가 지금 사용하는 월드 와이드 웹(WWW)이 바로 

이 하이퍼텍스트 시스템의 가장 대표적인 예라고 합니다.

3. 프로토콜(Protocol) - 우리끼리의 '약속'이자 '대화 규칙'!

프로토콜이라는 말, 정말 많이 나오는데 들을 때마다 어렵습니다.

제가 이해한 바로는, 컴퓨터나 네트워크 장비들이 서로 정보를

주고받기 위해 미리 정해놓은 '규칙'이나 '약속' 같은 거라고 합니다.

예를 들어, 우리가 편지를 보낼 때 봉투에 보내는 사람 주소, 받는 사람 주소, 

우편번호를 정해진 형식에 맞춰 적어야 제대로 전달되잖아요? 

프로토콜도 마찬가지로, "데이터는 이런 형태로 보내자!", "오류가 생기면 이렇게 알리자!" 

같은 세세한 통신 규약을 정해놓은 것이라고 생각하면 될 것 같습니다. 

그래야 서로 다른 회사에서 만든 컴퓨터나 프로그램이라도 문제없이 정보를 교환할 수 있겠죠.

앞으로 알아볼 것: 대표적인 인터넷 프로토콜들 (TCP/IP 등), 각 프로토콜의 역할

4. 웹 서버(Web Server) - 여러분의 '요청'을 기다리는 24시간 식당!

우리가 인터넷 주소창에 주소를 딱 치면 멋진 웹페이지가 화면에 나타나죠?

그 웹페이지 데이터는 과연 어디에 저장되어 있다가 우리 눈앞에 나타나는 걸까요?

그 역할을 하는 것이 바로 웹 서버입니다.

웹 서버는 웹사이트의 파일(HTML 문서, 이미지, 동영상 등)을 보관하고 있다가, 

사용자의 웹 브라우저(클라이언트)가 특정 페이지를 보여달라고 요청(Request)하면 

해당 파일을 찾아서 보내주는(Response) 컴퓨터 (또는 그런 기능을 하는 소프트웨어) 라고 생각하면 쉽습니다. 

마치 24시간 대기하며 손님의 주문(요청)에 따라 음식을 내어주는(응답) 식당과 비슷하다고 할까요?

앞으로 알아볼 것: 웹 서버 소프트웨어의 종류 (Apache, Nginx 등), 웹 호스팅의 개념

5. HTTP (HyperText Transfer Protocol) - 웹 서버와 손님이 '대화'하는 방법!

위에서 프로토콜이 '약속'이나 '규칙'이라고 했죠?

HTTP는 그중에서도 웹 서버와 우리(정확히는 우리 컴퓨터의 웹 브라우저)가

하이퍼텍스트 문서를 주고받기 위해 사용하는 가장 중요한 프로토콜(약속)입니다.

웹 브라우저가 웹 서버에게 "나 이 페이지 보고 싶어!" (GET 요청) 라고 말하면, 

웹 서버는 "알겠어, 여기 있어!" (HTTP 응답 + HTML 페이지) 하고 대답하는, 

그런 대화의 형식이라고 생각하면 됩니다. 

우리가 인터넷 주소창에 http:// 또는 https:// 로 시작하는 주소를 치는 것도 

바로 "HTTP라는 약속을 사용해서 통신하겠다!"라는 의미가 담겨있는 것이죠. 

앞으로 알아볼 것: HTTP 요청/응답 메시지의 구조, HTTP 상태 코드 (404 Not Found 등)

6. 동적 웹페이지(Dynamic Web Page) - 살아 움직이는 마법 같은 페이지?

어떤 웹페이지는 언제 접속해도 똑같은 내용만 보여주는데,

어떤 페이지는 접속할 때마다 내용이 바뀌거나 (예: 뉴스 사이트 첫 화면),

내가 어떤 선택을 하느냐에 따라 다른 정보를 보여주기도 합니다 (예: 쇼핑몰 로그인 후 마이페이지).

이렇게 사용자나 상황에 따라 내용이 실시간으로 변하는 페이지를 동적 웹페이지라고 부른다고 합니다.

이런 페이지는 보통 웹 서버에서 사용자의 요청에 맞춰 

즉석에서 HTML 페이지를 새로 만들거나 가공해서 보여주기 때문에 

'동적'이라고 하는 것이죠. 마치 주문 즉시 요리해서 내어주는 식당 메뉴처럼요!

앞으로 알아볼 것: 서버 사이드 스크립트 언어 (PHP, Python, Node.js 등)의 역할

7. 클라이언트 사이드 스크립트(Client-Side Script) 

- 내 컴퓨터에서 일어나는 작은 마법들!

동적 웹페이지가 주로 서버에서 내용을 만들어 보낸다면, 

클라이언트 사이드 스크립트는 그와 반대로 

우리 컴퓨터(클라이언트, 즉 웹 브라우저)에서 직접 실행되는 코드를 말합니다.

예를 들어, 웹페이지에서 마우스를 올렸을 때 메뉴가 스르륵 나타나거나, 

입력창에 잘못된 값을 넣으면 "이메일 형식이 올바르지 않습니다!" 하고 

바로 알려주는 것 등이 클라이언트 사이드 스크립트(주로 자바스크립트(JavaScript)) 덕분입니다. 

 

모든 걸 서버에 물어보고 다시 받으려면 느리고 번거로우니, 

간단한 동작이나 확인은 우리 컴퓨터에서 바로바로 처리해서 웹페이지를 

더 빠르고 편리하게 사용할 수 있게 해주는 기술인 셈이죠.

앞으로 알아볼 것: 자바스크립트(JavaScript)의 기본 개념과 역할, DOM(Document Object Model)

휴... 정말 알아야 할 것들이 산더미네요! 😅
하지만 이렇게 하나씩 용어의 뜻을 제 나름대로 정리하고, 

앞으로 무엇을 더 알아봐야 할지 목록을 만들고 나니 조금은 두려움이 줄어드는 것 같습니다. 

마치 컴맹탈출을 위한 낯선 지도를 손에 넣은 기분이랄까요?

이 글은 저의 학습 과정의 일부이며, 분명 부족하거나 틀린 부분이 있을 수 있습니다. 

너그러이 봐주시고, 혹시 잘못된 점이나 더 좋은 설명이 있다면 

언제든 댓글로 가르침 부탁드립니다!

다음번에는 이 목록들을 바탕으로 좀 더 깊이 있는 탐험을 시작해보겠습니다. 

컴맹 아재의 IT 정복기, 함께 응원해주세요! 감사합니다! 😊