[CS BASIC] 웹(Web)과 웹 애플리케이션(Web Application)

개요

오늘은 현대 사회에서 가장 많이 사용하는 웹(Web)과 웹 어플리케이션(Web Application)에 대해서 알아보도록 하겠습니다.

이번 포스팅은 크게 웹의 등장 배경과 정의를 소개하고, 언제 어디서나 웹 사이트를 사용할 수 있게 해주는 웹과 관련된 다양한 서버 등에 대해 소개하도록 하겠습니다.

 

웹(web)이란 무엇인가?

우리가 통상적으로 사용하는 단어인 웹(Web)은  월드 와이드 웹(World Wide Web)의 약자로 인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할수 있는 정보의 공간을 일컫는 말입니다.

 

즉, 웹은 정보의 ‘공간’이며 이러한 공간을 연결하기 위해 인터넷(Internet)이라는 기술이 사용 되는 것입니다.

 

*인터넷(Internet)이란? : 개인, 학교, 기업, 정부 네트워크 등을 한정적 지역에서 전체 영역으로 유선, 무선, 광케이블 기술 등을 통해 연결하여 구성한 네트워크들의 네트워크

 

가령 평소 궁금했던 지식을 검색하기 위해 구글이나 네이버 검색 창을 사용할 때에도,

각종 이커머스 플랫폼의 쇼핑 사이트에 방문하여 찾고자 하는 상품을 검색할 때에도,

대학원에 진학하여 논문 게시를 위해 참고 문헌을 찾기 위해 검색할 때에도

 

우리는 모두 웹(Web)이라는 정보의 공간에서 필요로 하는 ‘정보’를 찾아내는 일을 하는 것입니다.

이렇게 웹이라는 정보의 공간에서 필요로하는 정보를 찾아내는 작업을 일컬어 웹 서핑(web surfing) 혹은웹브라우징이라고 합니다.

 

지금까지 소개드린 이야기는 너무나도 보편적인 이야기라 추가 설명이 없더라도 누구나 한 번에 이해하실 수 있을 것입니다.

 

하지만, 개인적으로 이러한 웹이 우리에게 가져다주는 효용성의 크기는 형용하기 어렵다고 생각합니다.

 

만일 웹이 존재하지 않았더라면, 우리는 1900년대 군용 시스템 등을 만들기 위해 개발된 검은색 바탕의 흰색 글씨의 명령어 입력창, 커맨드 라인 인터페이스(CLI, Command Line Interface)만으로 모든 일을 해결해야 했을지도 모릅니다.

이와 비교한다면 웹의 등장과 다채로운 웹 사이트 및 웹 서비스의 등장은 우리에게 큰 이점을 가져다 주는 것 같습니다.

 

다양한 웹 사이트에서 사용할 수 있는 버튼, 텍스트 입력창, 체크박스, 라디오 버튼, 선택 상자 등

이제는 우리에게 너무나 익숙해진 웹 기술들은 대부분 그래픽 사용자 인터페이스(GUI, Graphical User Inreface)이고

이는 사람에게 더욱 편안함을 제공하는 직관성과 사용성을 제공합니다.

 

또한, 웹은 인터넷에 존재하는 데이터를 하이퍼 텍스트 방식으로 전송하여 효율성 측면에서도 이점을 확보하고

더불어 검색 엔진이라는 정보의 검색 ‘도구’를 위해 효과적으로 검색하는 시스템을 구축할 수 있도록 기술적인 지원도 가능하게 하였습니다.

---

웹(Web)은 누가 만들었나요?

웹 기술은 유럽 입자 물리 연구소(CERN)의 컴퓨터 과학자 팀 버너스-리(Tim Berners-Lee, 영국 옥스퍼드대학 교수)에 의해 만들어졌습니다.

웹은 세계의 여러 대학과 연구기관에서 일하는 물리학자들의 신속한 상호 정보 교환 및 공동 연구를 위해 개발된 프로그램입니다.

웹 기술이 등장하지 않았다면, 아마도 우리는 컴퓨터에 존재하는 다양한 정보의 교환을 아래와 같은 화면 안에서 명령어를 외워가며 사용해야했을 것입니다.

 

fig 1.0 MySQL의 커멘드 라인 명령창(CLI)

 

이미지 출처 : https://offbyone.tistory.com/54

 

웹은 기존에 컴퓨터가 저장한 정보 즉, 데이터베이스 그 자체를 ‘웹 사이트(Web Site)’라는 잘 시각화된(Well Visualized) 열람용 소프트웨어로 공유합니다.

 

궁극적으로 웹 사이트라 함은 웹 브라우저(Web browser)라고 하는 도구를 사용하여 다른 컴퓨터에 저장된 문자나, 사진, 동영상, 음성과 같은 멀티미디어 데이터를 효율적이고 직관적으로 교환하는데 최적화되어 있습니다.

 

이에 추가적으로 설명을 더하자면, 우리가 네이버나 구글, 다음이나 카카오와 같은 다양한 웹 서비스 회사들의 웹 사이트(Web Site)를 방문, 즉 웹 서핑을 하는 것은 이러한 회사들이 소유한 컴퓨터 자원을 요청(Request)하여 응답(Response)받은 문서를 보는 것입니다.

---

웹(Web)은 무엇이고 웹 브라우저(Web Browser)는 뭔가요?

위에서 설명한 바와 같이 일반적인 사용자는 다른 컴퓨터에 있는 정보의 집합, 즉 데이터베이스 그 자체를 요청하는 행위만을 하면 됩니다.

쉽게 말해서 정보가 있는 컴퓨터로부터 나에게 정보를 달라고 요청(Request)를 하면 된다는 의미입니다.

그리고 이렇게 사용자가 필요로 하는 정보를 찾기 위해 웹(Web)이라는 공간(Space)을 통해 방문(Browsing)할 수 있도록 도와주는 도구가 ‘웹 브라우저(Web Browser)’인 것입니다.

 

따라서 일반 사용자는 웹이라는 공간에서 각자 필요로 하는 정보를 찾기 위해 웹 브라우저(Web Browser)를 통해 자유롭게 여행할 수 있습니다.

---

웹(Web)을 관리하는 주체가 있나요?

월드 와이드 웹 컨소시엄(W3C, World Wide Web Consortium)

 

• 웹(Web)은 월드 와이드 웹 컨소시엄(W3C)이라는 관리 주체에 의해서 웹에서 필수적인 HTML, HTTP 등의 다양한 규격에 대하여 표준을 정하고 있습니다.
• 이러한 작업을 통해 궁극적으로는 더 편안하고 일관된 사용자 경험을 제공하기 위해 표준을 정하고 프로토콜 및 가이드라인을 제공하고 있습니다.
• 최근에는 시맨틱 웹(Semantic Web)과 관련된 표준도 제정하고 있습니다.

 

*시맨틱 웹(Semantic Web)이란? 

• ‘의미론적인 웹'이라는 뜻으로,현재의 인터넷과 같은 분산환경에서 리소스(웹 문서, 각종 파일, 서비스 등)에 대한 정보와 자원사이의 관계-의미 정보(Semanteme)를 기계(컴퓨터)가 처리할 수 있는 온톨로지 형태로 표현하고, 이를 자동화된 기계(컴퓨터)가 처리하도록 하는 프레임워크이자 기술
• 웹의 창시자인 팀 버너스리가 1998년 제안했고, 현재 W3C에 의해 표준화 작업이 진행 중이다.
• 예컨데, 시멘틱 웹 전에는 헤더라는 정보를 표현하기 위해 ‘<div id=“header”/>’ 의 양식으로 작성해야 했으나, 시멘틱 웹 이후에는 ‘<header/>’라는 축약된 형태로 표현이 가능해 짐

---

웹 사이트(Web Site)와 웹 어플리케이션(Web Application)이 무엇인가요?

웹 사이트와 웹 어플리케이션에 대한 설명을 드리기 전 각각의 정의에 대해서 먼저 살펴 보도록 하겠습니다.

 

웹 사이트(Web Site)란?

- 웹사이트는 인터넷 프로토콜 기반의 네트워크에서 도메인 이름이나 IP 주소, 루트 경로만으로 이루어진 일반 URL을 통하여 보이는 웹 페이지들의 의미 있는 묶음.
- 대한민국에서 흔히 말하는 홈페이지는 엄밀히 말해 웹사이트를 지칭하는 것.

 

웹 어플리케이션(Web Application)이란?

웹 애플리케이션, 줄여서 웹 앱은 인터넷이나 인트라넷을 통해 웹 브라우저에서 이용할 수 있는 응용 프로그램

 

웹 사이트와 웹 어플리케이션의 정의를 살펴 보았을 때,

각각은 사실 웹에서 엄밀히 구분되어야만 하는 ‘개념’은 아니라고 생각합니다.

 

왜냐하면 많은 경우에서 웹 사이트는 웹 어플리케이션의 구성 요소로서

궁극적으로는 웹(Web)을 통해 사용자에게 다양한 서비스를 제공하기 위한 도구로 사용 되기 때문이죠.

 

그렇기 때문에 각각의 개념은 인지할 필요가 있지만, 서로 ‘구분’지을 필요까지는 없는 것 같습니다.

 

오늘날의 다양한 웹 어플리케이션, 가령 네이버와 같은 웹 서비스 업체의 웹 사이트를 방문한다면

가장 먼저 네이버의 시그니처 검색 창과 함께 다양한 멀티미디어 콘텐츠들이 사용자의 눈을 다채롭게 할 것입니다.

 

웹 애플리케이션(Web Application)은 사용자가 조작 또는 감상할 수 있는 다양한 컨텐츠와 인터페이스를 통해 고객을 만족시킬 다양한 서비스를 제공할

것입니다.

 

그리고 그러한 서비스의 궁극적인 형태는 웹 사이트(Web Site)라고 하는 데이터의 묶음인 것이죠.

---

웹 서비스를 제공하기 위한 다양한 서버 프로그램

Server Program for Web Services

 

사용자에게 웹 서비스를 제공하기 위해서는 다양한 종류의 서버 프로그램(Server Program)이 필요합니다.

왜냐하면, 사용자의 요청(Request)에 적절한 응답(Response)을 하기 위해서는 이러한 서버 프로그램들의 상호 협력이 필수적이기 때문입니다.

 

다양한 웹 서버 프로그램

1. 웹 서버(Web Server)

• HTTP를 이용한 요청/응답을 처리 웹상의 정적 콘텐츠(CSS, Javascript, Image)를 처리
• 궁극적으로는 HTML을 골격으로한 정적 컨텐츠를 제공하기 위해 사용자에게 제공할 HTML 문서를 전송하는 서버 프로그램
• 주요 제품으로는 Apache 웹서버, IIS 웹서버, Google Web Server, Nginx 등이 존재

 

2. 웹 어플리케이션 서버(WAS, Web Application Server)

• 사용자의 요청에 따른 응답을 제공하기 위해 스레드를 처리하고 데이터베이스에 접속 및 적절한 데이터 처리를 통해 사용자에게 전달할 결과값을 반환하는 서버 프로그램
• 웹 어플리케이션에서 중추적인 역할을 담당하며, ⓵ 웹서버(Web Server), ② 웹 어플리케이션 서버(WAS), ③ 데이터 베이스(DB)의 세 단계의 계층 구조로 구성됨.
• 주로 자바(Java)등의 프로그래밍 언어로 개발되며, 스프링(Spring)이나 스프링 부트(Spring Boot)와 같은 프레임 워크를 통해 개발됨.
• 주요 제품으로 Tomcat, Weblogic, Jeus, Resin 등이 존재

 

3. 데이터 베이스(DB, Database)

• 데이터의 수집, 저장을 위한 용도로 사용
• 연계되는 주요 DBMS로 MySQL, Oracle, MS-SQL, DB2이 존재

 

4. 파일 서버(File Server)

• 파일 저장 하드웨어로 물리 저장장치를 활용한 서버
• 대용량 HDD, SSD 등의 장치가 존재

 

지금까지는 웹 애플리케이션에서 사용자에게 정적 컨텐츠,  즉 이미 만들어진 정보를 전달하기 위한 기술들을 살펴보았습니다.

 

하지만, 지금의 웹에서는 항상 정적 콘텐츠만이 존재하진 않죠?

사용자의 입력에 따라 서로 상호 작용하고 그에 알맞는 결과를 제공하기 위해

웹 애플리케이션에서는 동적 컨텐츠를 제공하기 위한 기술도 등장하게 되었습니다.

 

다음으로는 이러한 동적 컨텐츠 제공에 기여하는 몇 가지 기술에 대해 알아보도록 하겠습니다.

---

JSON(JavaScript Object Notation)이란?

• 비동기 브라우저 서버-통신(AJAX)을 위해 ‘속성-값 쌍’, ‘키-값 쌍’으로 이루어진 데이터 오브젝트를 전달하기 위해 인간이 읽을 수 있는 텍스트를 사용하는 개방형 표준 포맷
• AJAX(Asynchronous JavaScript and XML)에서 많이 사용 되고 XML(eXtensible Markup Language)을 대체하는 주요 데이터 포맷
• 언어 독립형 포맷으로 다양한 데이터 프로그래밍 언어에서 사용 가능

JSON은 그 형태가 자료구조 중 맵(Map)이나, 딕셔너리(Dictionary)와 유사한 특징을 가지고 있는 데이터 포멧입니다.

JSON은 웹 애플리케이션을 비롯한 다양한 프로그램으로 하여금 다양한 정보를 손쉽게 변환, 파싱하는 작업을 용이하게 해주는 큰 이점을 가지고 있습니다.

 

비동기 통신 기법(AJAX, Asynchronous JavaScript and XML)

• 브라우저가 가지고 있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지 일부분만 데이터를 로드하는 기법
• 하이퍼텍스트 표기 언어(HTML)만으로 어려운 다양한 작업을 웹 페이지에서 구현해 이용자가 웹 페이지와 자유롭게 상호작용할 수 있도록 하는 기술

 

앞선 웹 서버 프로그램에서 서버 프로그램에서 웹 서버는 정적인 콘텐츠,

즉 사전에 미리 구성된 정보의 묶음을 사용자에게 전달한다고 설명드렸습니다.

 

하지만, 모던 웹 서비스에서 이러한 정적인 컨텐츠만으로는 다채로운 정보를 사용자에게 제공하는 데 한계가 있을 수 밖에 없고,

따라서, 사용자의 입력에 따라 동적으로 정적인 콘텐츠의 부분만을 업데이트 하는 등의 동적인 데이터 송수신 기술을 위해 AJAX가 등장하게 되었습니다.

 

AJAX는 브라우저가 보유한 XMLHttpRequest 객체를 기반으로 하여 웹 사이트(Web Site)를 구성하는 다양한 인터페이스 및 멀티미디어 컨텐츠에 대하여 동적으로 변경할 수 있도록 해주었습니다.

 

---

참고자료

https://ko.wikipedia.org/wiki/%EC%9B%94%EB%93%9C_%EC%99%80%EC%9D%B4%EB%93%9C_%EC%9B%B9

월드 와이드 웹 - 위키백과, 우리 모두의 백과사전

https://ko.wikipedia.org/wiki/%EC%9B%94%EB%93%9C_%EC%99%80%EC%9D%B4%EB%93%9C_%EC%9B%B9_%EC%BB%A8%EC%86%8C%EC%8B%9C%EC%97%84

월드 와이드 웹 컨소시엄 - 위키백과, 우리 모두의 백과사전

https://ko.wikipedia.org/wiki/%EC%9D%B8%ED%84%B0%EB%84%B7

인터넷 - 위키백과, 우리 모두의 백과사전

https://ko.wikipedia.org/wiki/%EC%9B%B9_%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80

웹 브라우저 - 위키백과, 우리 모두의 백과사전