지난 시간에는 웹에서 정보를 열람할 때 두 컴퓨터가 소통하는 HOW,
HTTP에 대해서 알아봤습니다.
기본적으로 웹에서 교환되는 정보들은 HTTP를 통해서 움직입니다.
이번 시간에는 웹의 WHAT에 대해서 알아봅시다.
웹에서 표현하고 교환하는 최초의 정보들, 그 정보들을 만드는 도구들을 소개합니다.
잠깐, 어째서 최초의 정보들이냐고요? 이 정보들은 웹의 초창기부터 표현하고 교환할 수 있었습니다.
물론 이 정보들은 지금도 활발히 교환되고 있습니다만, 구현하기 (비교적) 간단했기 때문에 초창기부터 웹을 돌아다닐 수 있었습니다.
이런 정보들은 주로 웹페이지의 글, 폰트, 그리고 버튼으로 나타납니다.
이 정보들을 만드는 각각의 도구가 바로 HTML, CSS, JavaScript입니다.
글_HTML
HTML을 통해서 만들 수 있는 정보는 다음과 같이 생겼습니다.
웹페이지를 메모장처럼 쓸 수 있는 기능, HTML입니다.
물론 메모장보다는 조금 더 복잡한 기능들도 쓸 수 있습니다.
글 뿐만 아니라 다른 페이지로 이어지는 링크인 Hyperlink도 삽입할 수 있습니다.
기본적으로는 '텍스트'로 표현되는 정보들을 다룬다고 생각하면 쉽습니다.
폰트_CSS
CSS는 왼쪽의 웹페이지를 오른쪽처럼 꾸며주는 도구입니다.
그렇습니다, CSS는 쉽게 말해 웹.꾸(웹꾸미기) 인 것입니다.
왼쪽과 오른쪽 화면을 비교하면 쉽게 이해하실 수 있겠지만, CSS가 꾸며주는 웹의 요소들은 정말 많습니다.
글 기울기, 폰트, 색깔, 위치, 자간, 웹페이지의 바탕색, 섹션 별 색깔과 박스들....
폰트는 CSS가 꾸밀 수 있는 수많은 요소들 중 하나에 불과합니다.
버튼_JavaScript
버튼 역시 JavaScript가 표현할 수 있는 수십가지 기능 중 하나에 불과합니다.
그러나 '버튼'은 '글자' 그리고 '폰트'와 결정적인 차이가 있습니다.
바로 사용자가 '클릭'하면 무엇인가가 변한다는 것입니다.
라이트 모드에서 다크 모드로 바뀐다든지, 빈 하트가 빨갛게 채워진다든지, 팝업 알람이 뜬다든지 하는 변화가 생깁니다.
그리고 그 변화는 사용자가 '클릭'이라는 특정한 행동을 했기 때문에 만들어집니다.
이전까지 정보들은 웹페이지에서 움직이지 않던 채로 글자와 색깔, 위치만을 가지고 있었습니다.
그러다 JavaScript 가 생기고, 정보들은 사용자들의 움직임에 맞춰 상호작용하기 시작합니다.
이제 웹에서 표현할 수 있는 3가지 기본적인 정보의 종류들과, 그것들을 표현하는 도구들이 무엇인지 말할 수 있게 되었습니다.
위에서 말했듯, 오늘 다룬 정보들과 기능들은 비교적 구현하기 간단합니다.
HTML, CSS, JavaScript로 만들고 읽어들일 수 있는 정보들은 컴퓨터가 두 대 필요합니다.
Client, 그리고 Web Server입니다.
그러나 구현해야 하는 기능들이 점점 복잡해짐에 따라서, 컴퓨터가 최소 한 대 더 필요하게 되었습니다.
그 컴퓨터의 이름은 WAS Server입니다.
다음 시간에는 WAS Server에 대해서 배워보겠습니다.
'왜 기획자가 기계 언어를 배워야 하나요?' 카테고리의 다른 글
| [Ep. 4] 프랜차이즈 빵집으로 이해하는 WAS와 동적 데이터 (0) | 2022.12.04 |
|---|---|
| [Ep. 2] HTTP, 웹에서 컴퓨터끼리 소통하는 최초의 방법 (1) | 2022.11.30 |
| [Ep .1] 왜 기획자가 Web을 알아야 하나요? (0) | 2022.11.20 |