위키원
웹페이지
웹페이지(web page)란 인터넷 웹사이트를 구성하는 개별 페이지를 말한다. HTML 문서로 작성하여 웹서버에 올려두면 사용자가 해당 URL에 접속하여 PC나 스마트폰 등의 단말기로 정보를 가져온 뒤, 웹브라우저를 통해 내용을 읽을 수 있다.
 .jpg) |
상세
웹페이지는 월드 와이드 웹(WWW) 상에 있는 개개의 문서를 가리킨다. 이 문서도 역시 엄연한 웹페이지이며, 따라서 현재 이 문서를 읽고 있다면 '웹페이지를 보고 있다'고도 할 수 있다. 책에서의 페이지와는 달리, 두 개 이상의 웹페이지들을 서로 하이퍼링크로 연결시킬 수 있다는 점이 특징이다. 대부분의 웹페이지는 웹서버에 저장되며 HTML(또는 XHTML), CSS, 자바스크립트, 그림, 플래시와 같은 동영상으로 구성되어 있다. 이러한 웹페이지들은 HTTP를 통해 전송하거나 받아온다. 일반적으로 대부분의 인터넷 사용자들은 컴퓨터의 웹브라우저를 통해 웹페이지들을 읽는다. 또한 의미가 같은 웹페이지들의 모임을 웹사이트라고 한다. W3C 및 WAI에서는 웹 페이지를 구성할 때 모든 웹브라우저와 시각 장애인이 사용하는 스크린 리더에서 동일하게 읽어들일 수 있도록 권장하고 있다.[1]
역사
세계 최초의 웹페이지는 월드 와이드 웹(WWW)의 창시자로 꼽히는 영국 출신의 물리학자 팀 버너스-리(Timothy Berners-Lee, 1955~ )가 만들었다. 그는 1990년 유럽입자물리연구소(CERN)에 재직하고 있을 때 혼자서 CERN 관련 정보를 담은 웹페이지를 만들었다. 상부의 승인을 받지 않고 한 작업이었으나 버너스 리의 상급자는 소문을 내지 않는 조건으로 이를 눈감아줬다. 그의 웹페이지는 단순한 디자인을 가지고 있고 일반 텍스트로 구성되어 있었지만 획기적인 발명이었다. 최초의 웹페이지는 WWW 프로젝트의 개요, 하이퍼텍스트에 대한 설명, 그리고 웹페이지를 만드는 방법에 대한 설명을 제공했다. 그것은 또한 사용자들이 텍스트와 이미지를 클릭함으로써 웹페이지들 사이를 이동할 수 있도록 하는 하이퍼링크를 소개했다.[2]
최초의 웹페이지를 만들었던 기관인 CERN은 당시 원본을 발견해 복원 중이다. 지금까지 복원에 성공한 가장 이른 것은 1991년의 것이다. 이 버전은 버너스 리가 학회 참석차 미국을 방문했을 때 채플힐 노스캐롤라이나 대학교의 폴 존스(Paul Johnson) 교수에게 전달했던 것으로 그 후 한 서버에서 다른 서버로 복사에 복사를 거듭해 지금까지 남아 있다. 존스 교수가 운영하는 디지털 문서 기록 사이트(www.ibiblio.org)에도 이 버전이 저장돼 있다. 1991년 버전은 화려한 그래픽이나 영상은 없고 하얀 바탕에 텍스트가 있고 19개의 하이퍼링크가 있다. 이 링크들 중 CERN 관련 정보에 관한 것으로 아직 작동하고 있지만 CERN 임직원 전화번호로 연결됐던 링크는 더 이상 작동하지 않고 있다. 존스 교수는 당시 사용하던 넥스트(NeXT) 컴퓨터를 아직도 보관하고 있으나 암호를 잊어버린 상태다. 이 컴퓨터에는 웹 역사에 관한 사료들이 많이 남아 있을 가능성이 크기 때문에 증거분석 전문가들이 복원 작업을 하고 있으나 아직 별다른 성과는 없다.[3]
종류
인터넷을 이용하면서 접속하게 되는 웹페이지는 크게 두 가지로 나뉜다. 저장된 파일을 그대로 보는 정적 웹페이지(Static Web Page)와 다른 변수들에 의해 변경되어 보이는 동적 웹페이지(Dynamic Web Page)다. 정적인 웹페이지보다는 동적인 웹페이지가 서비스가 다양하고 관리가 쉽기 때문에 많은 웹페이지가 동적인 웹페이지를 제공하고 있다. 그렇다고 모두 동적 웹페이지를 구성하고 정적 웹페이지를 전혀 사용하지 않는 것은 아니다. 자주 변경되지 않는 메뉴나 회사소개 같은 경유는 굳이 동적 웹페이지로 만들 필요는 없으며, 정적 웹페이지 생성기를 통해서 정적 웹페이지로 만들 수 있다. 개인 블로그나 제출용 포트폴리오 사이트 또한 구축 비용이 적게 드는 정적인 웹사이트가 더 적합하다.[4]
정적 웹페이지
정적 웹페이지는 웹서버에 이미 저장된 파일(HTML 파일, 이미지 자바스크립트 파일 등)을 클라이언트에게 전송하는 웹페이지다. 사용자는 서버에 저장된 데이터가 변경되지 않는 한 고정된 웹페이지를 계속 보게된다. 따라서 모든 사용자는 같은 결과의 웹페이지를 서버에 요청하고 응답받게 된다.[5] 정적 웹페이지의 장점은 다른 처리 없이 요청에 대한 파일만 전송하기 때문에 빠르다는 것이다. 단순한 웹서버를 구축하므로 호스팅 서버에 연결하는 비용도 적다. 반면 저장된 정보만 보여주기 때문에 서비스가 한정적이고 추가, 삭제, 수정 등의 작업이 모두 코드를 직접 건드려야 하기 때문에 관리가 힘들다는 단점이 있다.[6]
동적 웹페이지
동적 웹페이지는 서버에 저장된 HTML 파일이 그대로 브라우저에 나오는 것이 아닌, 동적으로 만들어지는 웹페이지다. 요청에 관하여 사용자는 조건에 따라 다른 결과를 받게 되며 사용자는 상황, 시간, 요청 등에 따라 달라지는 웹페이지를 보게 된다.
- CSR(Client Side Rendering) : 데이터가 없는 HTML 문서나 Static 파일만을 처음에 받아와 로드하고, 이후에 데이터를 요청하여 받아오는 방식이다. 자바스크립트를 사용하여 브라우저에서 페이지를 직접 렌더링을 진행한다. 모든 로직, 데이터 가져오기, 템플릿 및 라우팅 등은 서버가 아닌 클라이언트 측에서 처리한다.
- SSR(Server Side Rendering) : CSR과 상반되게 서버에서 동적으로 데이터까지 전부 삽입하여 완성된 HTML을 넘겨준다. 서버 렌더링은 브라우저에서 응답을 받기 전에 처리되므로 클라이언트에서 데이터를 가져오거나 템플릿 작성에 대한 추가 왕복이 발생하지 않는다. 웹서버에서 모든 요청이 처리된다.
- MPA(Multi Page Application) : 새로운 페이지를 요청할 때마다 정적 리소스가 다운로드 되고, 그에 맞춰 전체 페이지를 다시 렌더링하는 방식이다. 즉, SSR 방식으로 렌더링한다. 인터넷 주소창에 주소를 입력하거나 링크를 클릭하는 등의 사용자가 어떠한 요청을 하게 되면, 그에 맞는 완전한 페이지를 받아오고 다시 렌더링된다. 장점은 검색엔진 최적화(SEO, Search Engine Optimization) 관점에서는 유리하지만, 단점으로는 새로운 페이지를 이동할 때마다 완전히 새로 렌더링 되므로 깜빡거리고 프론트엔드와 백엔드가 밀접하게 연결되어 개발이 복잡할 수 있다.[7]
- SPA(Single Page Application) : 웹 애플리케이션에 필요한 모든 정적 리소스를 최초 한 번만 다운로드를 한다. 그 이후, 새로운 페이지에 대한 요청이 있을 때마다 페이지 갱신에 필요한 데이터만 전달 받고 그 정보를 기준으로 페이지를 갱신한다. 즉, CSR 방식으로 렌더링한다. SPA를 만드는데 사용되는 프레임워크로 리액트(React), 뷰(Vue), 앵귤러(Angular)가 있다. 장점으로는 최초 접속 시 맨 첫 페이지 로딩 시간을 길어도 이후 페이지부터는 속도가 빠르다. 또한 앞선 MPA와 달리 깜빡거림이 없고 반응 속도가 좋다. 또한 로컬 데이터를 효과적으로 캐싱할 수도 있다. 단점으로는 초기 구동 속도가 느리고 SEO에 불리하다는 것이다.[8]
비교
홈페이지와 웹사이트, 웹페이지는 혼용되어 사용되긴 한다. 이 셋은 모두 다른 개념이다. 이 셋은 책에 비유할 수 있는데, 어떤 정보를 얻기 위한 수단으로 책 한 권을 선택한다고 가정했을 때 수많은 책 중에 한 권의 책을 선택한다. 그리고 목차 및 개요 파트에서 전체적으로 어떤 내용을 담고 있는지 개괄적인 내용을 이해하고, 어떤 페이지로 향해야 할지 파악할 수 있다. 마지막으로 특정 페이지로 이동하여 필요한 정보를 얻을 수 있다. 웹사이트도 마찬가지다. 웹주소를 입력해 액세스할 수 있는 웹사이트는 하나의 플랫폼이다. 그리고 사용자가 가장 먼저 접하게 되는 메인 페이지가 바로 홈페이지이며, 여기서 개괄적인 정보를 얻을 수 있다. 웹사이트는 홈페이지를 포함하여 책과 같이 여러 페이지로 이루어져 있으며, 이 웹페이지들 전체의 집합이 바로 웹사이트다.
구체적으로 웹사이트는 여러 웹페이지를 모아 놓은 꾸러미다. 컴퓨터나 스마트폰의 브라우저에 URL을 입력하여 액세스할 수 있다. 일반적으로 웹사이트는 여러 웹페이지로 구성되어 있으며, 페이지마다 서로 다른 정보를 정보를 담고 있다. 마치 책과 같은 것이다. 홈페이지는 흔히 떠올리는 집 모양의 아이콘으로 생각할 수 있다. 웹사이트의 최상위 페이지를 뜻하며, 일반적으로 웹사이트에 도착한 방문자가 가장 먼저 보게 되는 페이지이다. 홈페이지에는 일반적으로 웹사이트의 개요와 웹사이트 내의 다른 페이지들에 대한 링크가 포함되어 있다. 반면 웹페이지는 웹사이트의 일부인 단일 페이지를 뜻한다. 홈페이지는 웹페이지에 포함된다. 블로그 포스트 페이지도 웹페이지로, 해당 페이지에서 홈페이지로 이동하게 되면 다른 웹페이지로 넘어가는 것이지만, 여전히 동일한 웹사이트 내에 있는 것이다.[9]
각주
- ↑ 〈웹 페이지〉, 《위키백과》
- ↑ June Moon, 〈인터넷의 역사〉, 《NordVPN》, 2023-11-20
- ↑ 손봉석 기자, 〈‘세계 최초 웹페이지’ 원본 어디에 있나〉, 《경향신문》, 2013-06-12
- ↑ 인사커뮤니케이션, 〈정적 웹페이지, 동적 웹페이지 특징과 장단점〉, 《네이버 블로그》, 2019-09-17
- ↑ DyungE_100, 〈(WEB) 정적 웹 페이지와 동적 웹 페이지〉, 《브이로그》, 2022-03-31
- ↑ 〈정적 웹페이지와 동적 웹 페이지〉, 《티스토리》, 2023-10-08
- ↑ 〈3) 동적/정적 웹 페이지〉, 《위키독스》
- ↑ dev_genie, 〈정적/동적 웹페이지 특징 및 장단점〉, 《티스토리》, 2023-11-28
- ↑ 〈홈페이지, 웹 사이트, 웹 페이지의 차이점 이해하기 - IT 비즈니스의 모든 것〉, 《이랜서 블로그》, 2022-11-16
참고자료
- 〈웹 페이지〉, 《위키백과》
- 〈3) 동적/정적 웹 페이지〉, 《위키독스》
- 손봉석 기자, 〈‘세계 최초 웹페이지’ 원본 어디에 있나〉, 《경향신문》, 2013-06-12
- 인사커뮤니케이션, 〈정적 웹페이지, 동적 웹페이지 특징과 장단점〉, 《네이버 블로그》, 2019-09-17
- DyungE_100, 〈(WEB) 정적 웹 페이지와 동적 웹 페이지〉, 《브이로그》, 2022-03-31
- 〈홈페이지, 웹 사이트, 웹 페이지의 차이점 이해하기 - IT 비즈니스의 모든 것〉, 《이랜서 블로그》, 2022-11-16
- 〈정적 웹페이지와 동적 웹 페이지〉, 《티스토리》, 2023-10-08
- June Moon, 〈인터넷의 역사〉, 《NordVPN》, 2023-11-20
- dev_genie, 〈정적/동적 웹페이지 특징 및 장단점〉, 《티스토리》, 2023-11-28
같이 보기
