※ 해당 포스팅은 한동대학교 김근오 교수님의 HTML에서 웹앱까지+라는 강의를 수강하고 강의내용 및 실습내용들을 참고 하여 작성되었음을 알려드립니다.
1. 인터넷(Internet)
International (국제적인)+ Network(망)의 합성어로 1973년 TCP/IP를 정립한 빈튼 서프와 밥 간이 '네트워크의 네트워크'를 구현하여 모든 컴퓨터들을 단일 통신망으로 연결하고자 하는 목적으로 명명하며 만들어진 단어이다. 인터넷의 역사는 아래와 같이 군사적인 목적으로 개발되어 학술적 목적을 지나 상업적 용도로 확장되며 일상생활에 밀접하게 발전하고 있다.
냉전이 한창이던 1969년 미국 국방성(Departmet of Defence)과 랜드코퍼레이션이 합작하여 미국의 4개 대학 (UCLA, UCSB, 스탠퍼드 연구소 SRI, 유타 대학교)을 연결한 알파넷(ARPAnet)이라는 최초의 네트워크를 만들었다. 이듬해인 1970년에 알파넷을 제어하기 위해 AHHP(ARPANET Host-to-Host Protocol)와 ICP(Initial Connection Protocol) 두 가지 프로토콜로 구성된 네트워크 제어 시스템 NCP(Network Control Protocol)가 개발되었으며 이는 TCP/IP의 전신으로 볼 수 있다.
ARPAnet에 사용된 프로토콜은 와 가 있었으며 이들로 구성된 제어 프로그램이 NCP(Network Control Protocol)였다. 오늘날 TCP/IP의 전신인 셈.
패킷교환 방식의 TCP/IP 프로토콜이 개발되었다. 이후, 1986년 NSFnet 미국 국립재단 슈퍼컴퓨터가 인근 대학과 도서관, 연구소 등을 연결하며 학술적 목적으로 확장되었다. 1990년에 이르러서는 INTERnet 이라는 상업적 목적의 네트워크가 연결되며 일상속에 네트워크가 친숙하게 자리잡게 되었다. 오늘날에는 컴퓨터 시대의 이메일, 게임을 넘어 스마트폰의 SNS, OTT 서비스 그리고 자율주행차 까지 무궁무진하게 네트워크가 확장되고 있다.
2. 프로토콜(Protocol)
컴퓨터나 통신장비 사이에서 메시지를 주고 받는 양식과 규칙 체계. 서로 다른 컴퓨터들이 요청과 반응할 때에도 상호간 올바른 소통을 위한 규칙이 필요하다. 사람으로 예를 들면, 고객이 카페에 방문하여 직원에게 아이스 아메리카노 1잔을 주문하였을 때, "네 손님, 화장실은 나가서 왼쪽에 있습니다."와 같은 대답을 듣는 경우를 떠올릴 수 있다. 일반적으로는 주문시 직원에게 매장 메뉴얼에 입각한 매장과 포장중 어떤 형태로 이용하냐는 반응이나 가격은 얼마이고 계산을 도와주겠다는 등의 반응 등을 기대할 것이다. 이와 같이 컴퓨터와 컴퓨터 사이에서도 요청에 대한 올바른 반응을 위해 존재하는 메뉴얼이 프로토콜이라고 할 수 있다.
3. 패킷교환(Packet Switching)
패킷은 큰 정보 및 데이터를 효율적으로 전송하기 위해 작게 분할하고, 나누어진 조각에 헤더를 붙여 캡슐화된 데이터를 의미한다. 라우터가 패킷을 라우팅을 통해 송신 호스트에서 수신 호스트까지 전송하는데 이를 패킷전송방식이라고 부른다. 이러한 패킷교환은 현재 가장 광범위하게 채택된 데이터 통신 방식이다.
4. TCP/IP 프로토콜(TCP/IP Protocol)
TCP(Transmission Control Protocol)은 송신자와 수신자 사이의 전송단계에서 패킷의 주소와 내용을 담당하는 프로토콜이다.
IP(Internet protocol)는 패킷을 목적지까지 보내는 규칙을 정의한 프로토콜이며, 255.255.123.120과 같이 숫자와 점(.)으로 구성된 12자리의 주소를 IP주소라고 명명한다. (절대 주소라고 부르기도 한다.)
송신자와 수신자 사이에는 7계층(Layer)로 구성되어 있으나, TCP와 IP두 계층만을 가지고 설명하면 아래와 같이 4단계로 나눌 수 있다. 이러한 방법으로 송신자와 수신자 사이에 통신이 이루워진다.
①송신자 TCP계층 (패킷의 주소와 내용을 전달) →
②송신자 IP 계층 (패킷을 목적지 까지 전달) →
③수신자 IP계층 (패킷을 수신한 후 TCP 계층으로 전달) →
④수신자 TCP 계층 (나누어져 있던 패킷을 다시 재정렬하여 정보를 사용자에게 전달)
5. 웹(Web)
웹(Web)은 World Wide Web의 약자로 인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 전 세계적인 정보 공간을 의미한다. 메일, 검색 교육 등 다양한 목적으로 사용되며 이때 URL 앞에 붙여진 HTTP 프로토콜을 따른다. ex)https://www.naver.com 에서 https는 웹 상의 통신규약인 프로토콜을 의미하고, www.naver.com은 URL이다.
6. 웹(Web)의 접속과정
사용자가 웹에 접속하기 위해서는 DNS 서버(Domin Name System Server)의 역할이 필요하다. IP주소는 컴퓨터가 이해하기 쉽도록 숫자와 점(.)의 조합으로 이루어져 있다. 따라서 인간이 직관적으로 어떤 내용인지 이해하고 외워 사용하기에는 매우 어렵다. 따라서 사용자의 편의성을 위해 IP주소를 대체할 도메인(Domain)이란 개념을 도입하였는데, 도메인은 www.naver.com과 같이 문자로 구성되어 있는 것이 특징이다. DNS 서버는 위와 같은 도메인을 IP주소로 변환하거나, 역으로 IP주소를 도메인으로 변환하는 역할을 수행한다.
아래와 같은 과정을 거쳐 클라이언트(사용자)가 요청한 정보는 서버에 접속한 후 요청한 정보를 획들하여 사용자가 볼 수 있도록 웹 브라우저에 출력된다.
①클라이언트 : 웹브라우저 → 운영체제 → 하드웨어를 통해 접속요청을 보낸다.
②DNS 서버 : 클라이언트가 원하는 서버의 IP주소를 반환하여 클라이언트에게 제공한다.
③클라이언트 : DNS서버에서 제공받은 IP주소로 하드웨어, 운영체제, 웹 서버에 접속한다.
④서버 : 서버에 존재하는 index.html 파일을 찾아서 다시 하드웨어 → 운영체제 → 웹 서버 과정을 거처 클라이언트에 제공
7. 웹(Web)의 동작과정
사용자가 웹 브라우저를 통해 웹에 접속하면 웹 서버에서 정보를 얻고 브라우저가 얻은 정보를 사용자 입장에서 보기 편한 상태로 결과를 출력한다. 이때, 역할에 따라 프론트엔드(FrontEnd, FE), 백엔드(BackEnd, BE) 두 가지로 구분한다.
프론트엔드는 사용자 입장에서 시각적으로 접하는 부분 즉, 웹의 외관에 해당하는 부분을 의미한다. 이때, 웹 페이지의 기본 구조를 담당하는 마크업 언어인 HTML과, HTML을 통해 구현된 기본적인 구조에 스타일을 적용하여 보기 좋게 만드는 마크업 언어인 CSS가 사용된다.
백엔드는 사용자 입장에서 직접적으로 접하지 못하는 데이터베이스(DB), 서버연동 등의 웹의 내부에 해당하는 부분을 의미한다고 볼 수 있다. 벡엔드는 Python(Django), Java(Spring) Javascript(Node.js) 등 다양안 언어가 사용되며, HTML과 CSS로 구현된 웹의 외관적인 구조에 웹페이지에서 실현하고자 하는 기능과 동작을 구현한다.
8. 웹 앱(Web App)
웹 앱은 웹 브라우저에서 실행되는 응용 프로그램을 총칭하며 모바일 기기 뿐 아니라 PC환경 등 인터넷에서 접속이 이루어지는 응용 프로그램들을 아우르는 말이다. 웹 표준에 따라 개발되며 카메라, GPS등 디바이스 기능을 사용할 수 없는 단점이 있다.
호스티드 앱(HostedApp)은 온라인에서 URL 접속으로 실행되는 웹 앱으로 실행시 필요한 웹 문서, 이미지 등 모든 요소들이 웹 서버에 존재하여, 웹 서비스가 가능해야 실행이 가능한 특징이 있다. 이때, 호스티드 앱의의 경우 유지보수시 웹 서버에 저장되어 있는 내용만을 수정하면 되기 때문에 유지보수가 상대적으로 용이하다는 장점이 있다.
※ 기타 앱
패키지드 앱(Pakaged App)은 웹 마켓에서 다운로드 받아 모바일 기기에 인증을 받아 설치되는 앱으로, 온라인 상태의 웹 서버를 운영할 필요가 없는 특징이 있다. 이때, 로컬에서 실행되므로 상대적으로 많은 API 사용이 가능한 장점이 있으나, 유지보수 및 업데이트로 인한 수정사항 발생 시 다시 앱 마켓에 버전업을 하여 재등록을 해야 하는 번거로움이 있다는 단점 또한 존재한다.
네이티브 앱(Native App)각 스마트폰의 OS환경에서 별도로 제공되는 프로그래밍 언어와 SDI(Software Developement Kit)을 이용해 제작되는 앱으로 Object-C, 자바, C# 등의 프로그래밍 언어를 통해 반드시 해당 OS환경에서 제작되어야 하는 특징이 있다. 해당 OS의 앱 스토어에 등록가능하고 스마트폰에 탑재된 모든 하드웨어에 접속 가능한 장점이 있으나, 앱스토어에 개발자로 등록하여 연회비를 지불해야하고 웹 앱에 비해 업데이트가 복잡한 특징이 있다.
ex) 카카오톡, 인스타그램, 페이스북 등
9. 모바일 웹(Mobile Web)
일반적인 PC환경 브라우저에서 실행되는 웹 어플리케이션을 모바일 스크린 사이즈로 줄여놓은 것을 의미하며, 모바일 웹 사이트라고도 부른다. 모바일 웹은 일반적인 웹 기술로 개발되고 모바일 브라우저에서 실행되며 풀 브라우징 방식으로 페이지를 이동하기 때문에 속도가 상대적으로 느린 단점이 있다. 또한, 모바일 기기의 특성상 이동 중에 서버 접속 장애가 발생할 수 있는 불안정성이 있다. 현재 모바일 브라우저에서 볼 수 있는 대부분의 앱은 모바일 웹이다.
ex)m.naver.com
모바일 웹은 하나의 템플릿으로 PC, 스마트폰, 태블릿 등 다양한 기기에서 접속 가능한 반응형 웹과 각 기기에 맞게 개별 템플릿을 제작하여 브랜딩하는 적응형 웹 두 가지로 구분할 수 있다.
반응형 웹은 단일 템플릿을 활용하므로 상대적으로 개발이 용이하지만, 한 기종의 기기에서 접속하더라도 모든 템플릿 및 CSS를 다운받아야 하기 때문에 데이터 용량 및 로딩 속도 측면에서 다소 불리하다. 반대로, 적응형 웹은 각 기기별 템플릿을 별도 제작하기 때문에 상대적으로 개발이 복잡하지만, 해당하는 사용자의 기기에 맞는 템플릿 및 CSS만을 다운로드하기 때문에 데이터 용량 및 로딩 속도 측면에서 유리한 장점이 있다.
ex) 반응형 웹 : www.youtube.com, 적응형 웹www.naver.com/ www.m.naver.com)
10. 모바일 웹(Mobile WebApp)
모바일 웹에 비해 더 모바일에 최적화되고 네이브트 웹에 가까운 앱으로, 웹 기술에 기반하여 개발되고 모바일 브라우저에 의에 실행되는 앱이다. 단일 페이지 모델을 사용하여 화면을 전환하기 때문에 모바일 웹에 비해 데이터 및 속도 측면에서 유리한 장점이 있다.
11. 하이브리드 앱(Hybrid App)
외부 형태는 네이티브 앱으로 구성되었지만 내부는 웹 앱으로 실행하는 앱으로 네이티브 앱과 웹 앱의 장점을 합친 앱이다. 웹 기술과 APP모두 사용가능하기 때문에 네이티브 앱과 달리 개발 후 유지보수시 패키징 변경 등으로 편리한 이점이 있으며, 디바이스의 카메라, GPS 등의 하드웨어 사용이 불가했던 웹 앱과 달리 디바이스 기능을 접근할 수 있는 장점이 존재한다.
- 참고 -
HTML에서 웹앱까지 (2023 1학기), 한동대학교 김근오 교수, K-Moock
알파넷 : https://namu.wiki/w/%EC%95%84%ED%8C%8C%EB%84%B7
패킷교환 : https://ko.wikipedia.org/wiki/%ED%8C%A8%ED%82%B7_%EA%B5%90%ED%99%98
반응형 웹/적응형 웹 : https://brunch.co.kr/@047f36f4a620451/32
앱의 종류 : https://blog.codef.io/app_kinds/