웹페이지, 그 속을 자세히 들여다보자

웹페이지, 그 속을 자세히 들여다보자: 박윤아 / 기사승인 : 2021-02-14 16:34:08

웹 페이지란, 링크로 개별 문서를 연결한 전 세계적 규모의 시스템인 월드 와이드 웹 상에 있는 문서를 총칭한 말로 HTML, CSS, 자바스크립트(JS), 그림, 동영상 등으로 구성되어 있다.

웹 페이지는 정적 웹과 동적 웹으로 나눌 수 있다.

정적 웹은 관리자가 웹 페이지를 수동으로 업데이트하지 않는 한 서버에 미리 저장된 파일을 그대로 사용자에게 보여주는 웹 페이지를 말한다. 즉, 언제 어디서 웹 페이지에 접속해도 같은 데이터를 건네 주는 웹 사이트이다.

정적 웹은 서버만 구축하면 되기 때문에 비용이 적게 들고 저장된 정보만 보여주면 돼서 추가적인 작업이 필요 없어 빠르다는 장점이 있다. 그러나 저장된 정보만 제공하기 때문에 서비스가 한정적이고 추가, 수정, 생성, 삭제 작업을 모두 코드로 수작업을 해야 하기 때문에 관리가 힘들다는 단점이 있다.

동적 웹은 사용자의 상황, 시간, 요청 등에 따라 데이터를 가공한 후 생성되는 웹 페이지를 말한다. 다양한 정보를 조합하여 웹 페이지를 제공하기 때문에 서비스가 다양하고, 웹 사이트 구조에 따라 추가, 수정, 삭제, 생성이 가능하여 관리가 쉽다는 장점이 있다.

그러나 웹 페이지를 전달하기 전에 정보를 처리해야 해서 상대적으로 느리고 웹 서버의 추가적인 처리를 위한 추가 비용이 든다는 단점이 있다.

정리하자면, 정적 웹은 비용이 적게 들고 빠르다는 장점이 있으나 제한된 서비스 제공과 관리가 힘들다는 단점이 있다. 동적 웹은 비용이 많이 들고 느리다는 단점이 있으나 다양한 서비스를 제공할 수 있고 관리에 용이하다는 장점이 있다.

웹 페이지는 크게 HTML, CSS, JS로 구성된다.

HTML은 문서의 글자 크기, 글자 모양, 글자 색, 하이퍼링크(문서 이동), 그래픽 등을 정의하는 웹 언어의 한 종류이며, 웹 페이지의 구조를 설계할 때 사용된다.

CSS는 기존의 HTML로 웹 페이지를 작성했을 때 따르는 많은 제약을 보완하기 위해 만들어진 스타일 시트이다. 예를 들어, HTML로 웹 페이지를 제작하면 세세한 글꼴 하나하나를 일일이 지정해 주어야 하고 글꼴을 바꾸고 싶으면 또다시 일일이 수정해야 하기 때문에 해당 스타일을 찾기도 어렵고 작업 시간도 길어진다.

하지만, CSS로 웹 페이지의 스타일을 미리 저장해 두면 스타일 시트의 한 가지 요소만 변경해도 관련된 전체 페이지의 스타일이 한꺼번에 변경되기 때문에 유지 및 보수를 간편하게 할 수 있고 작업 시간도 단축된다.

JS는 웹 페이지에서 사용자로부터 특정 이벤트나 입력 값을 받아 동적인 처리를 목적으로 만들어진 객체 기반의 프로그래밍 언어이다. 예를 들어 자바스크립트를 이용하면 “웹 사이트 내에서 버튼을 클릭하면 메시지를 발송해 줘”라는 동작을 실행시킬 수 있다.

정리하자면, HTML은 웹 페이지의 큰 뼈대를 제공하고 CSS는 색깔이나 글꼴과 같은 디자인 요소를 설정하고, JS는 웹 페이지의 동작을 담당한다.

여기서 마크업 언어와 프로그래밍 언어의 차이점을 알아야 한다. JS는 컴퓨터에게 명령을 내릴 수 있도록 도와주는 프로그래밍 언어이다. 반면, HTML과 CSS가 포함된 마크업 언어는 데이터를 기술하고 문서의 구조를 표현하는 역할을 하기 때문에 프로그래밍 언어와는 구별된다. 웹 페이지는 마크업 언어만으로 구현할 수 없기 때문에 프로그래밍 언어를 조합해서 만들어야 한다.

현재 우리가 매일 접속하는 네이버, 구글 등과 같은 웹 페이지는 HTML과 CSS로 정적 화면을 구성하고 JS로 동적 화면을 구성하는 방식이다.

처음 월드 와이드 웹은 이용자 모두에게 똑같은 파일을 내보내는 HTML과 CSS로 만든 정적 웹으로 구성되었다. 하지만, 이러한 단순한 메커니즘은 시간이 흐르면서 인기를 점차 잃어갔다. 이를 해결하기 위해 기존의 정적 웹 페이지 폴더에 JS로 동적 콘텐츠 관리 시스템을 더하여 지금의 웹 페이지가 탄생하게 되었다.