인터넷과 웹

이번 강좌에서는 인터넷의 개념과 프론트엔드 프로그래밍의 근간이 되는 월드와이드웹을 살펴보고 월드와이드웹 콘텐츠 제작을 위해 필수적인 HTML, CSS, JavaScript의 관계와 역할에 대해 알아 본다.

개요

인터넷(Internet)은 전세계 컴퓨터들이 하나로 연결된 거대한 네트워크를 말한다. 웹프로그래밍을 위해서는 기본적으로 인터넷과 네트워크의 기본 개념과 동작 원리를 먼저 이해해야 한다.

네트워크

네트워크, 좀 더 구체적으로 컴퓨터 네트워크 는 컴퓨터와 컴퓨터가 연결되어 서로 정보를 주고 받을 수 있는 물리적인 인프라를 말한다. 이러한 컴퓨터 네트워크는 하드웨어와 운영체제 그리고 응용 소프트웨어의 결합으로 동작 하며 표준화된 규격을 통해 정의되어 있다.

네트워크와 인터넷

OSI 7 Layer

네트워크 구성요소를 계층 형태로 정리한 규격 이다. 전통적으로 네트워크의 가장 기본적인 구조로 하드웨어에서 소프트웨어 영역 까지를 계층으로 분리해 각각의 계층이 서로 독립적으로 운영될 수 있도록 설계된 모델이다.

독립된 계층구조로 인해 모든 계층에 대한 구현을 한곳에서 담당할 필요가 없으며 계층별 규격(프로토콜)에 따라 각 계층은 하위 계층의 기능을 이용하는 형태이고 상위 계층에는 기능을 제공하는 구조로 되어 있다. 일반적으로 하위계층들은 하드웨어이고 상위계층은 소프트웨어로 구현된다.

TCP/IP(Transmission Control Protocol/Internet Protocol)는 데이터전송 계층의 TCP와 인터넷 계층의 IP를 함께 부르는 용어 이다. OSI 7 Layer 와 유사한 구조로 5계층을 정의하고 있다. 현재 모든 컴퓨터 네트워크는 TCP/IP라고 봐도 무방하며 인터넷도 TCP/IP 기반으로 동작한다.

TCP/IP 구조

• 네트워크 인터페이스 계층: 물리계층으로 LAN, wifi 등 하드웨어적으로 네트워크 연결 담당.
• 인터넷 계층: 인터넷 연결 컴퓨터의 주소지정과 패킷 분할 및 조립등의 담당
• 전송 계층: 송신자와 수신자의 연결을 담당. TCP 가 대표적임.
• 응용 계층: 서비스 영역의 프로토콜로 표준으로 소프트웨어 영역. 표준, 비표준 규격 모두 가능.

프로토콜(Protocol)

프로토콜은 데이터 통신을 위해 만들어진 규격으로 설명 할 수 있다. 쉽게 생각하면 어떤일을 하기위한 일련의 절차와 같다.

고객센터에 전화를 걸었을 때 상담사는 먼저 고객의 이름을 묻고 확인한 다음 무엇을 도와드릴까요? 라는 질문에 고객이 문제를 이야기 하고 하는 일련의 과정도 일련의 프로토콜이라고 볼 수 있다.

네트워크에서 프로토콜은 컴퓨터와 컴퓨터간에 데이터를 주고 받기 위한 일련의 규격을 말하는 것으로 대표적인 프로토콜은 다음과 같다.

주요 응용 프로토콜

• TCP/IP: 오늘날 컴퓨터 네트워크의 기본 프로토콜. 인터넷도 TCP/IP 기반.
• HTTP: 월드와이드웹의 기본 프로토콜.
• SMTP: email 을 주고받기 위한 기본 프로토콜.(pop3, IMAP도 있음)
• FTP: 파일전송 프로토콜.

프로토콜 사용 예

카카오톡과 같은 채팅프로그램의 경우에도 메시지를 주고받기 위한 프로토콜이 정의 되어 있으며 프로토콜 규격이 공개 되어 있다면 카카오톡과 호환되는 별도의 채팅 프로그램 개발도 가능하다.

기타 용어

다음 용어들은 인터넷과 웹 프로그래밍을 위해 알아두면 좋으니 참고하도록 한다.

랜(LAN)

랜은 Local Area Network 의 줄임말로 말 그대로 근거리의 컴퓨터들을 연결한 네트워크를 말한다. 여러 방식의 랜이 사용 되었지만 지금은 TCP/IP 프로토콜을 사용하는 이더넷(Ethernet) 방식을 보통 랜이라고 한다. 유선의 경우 UTP 케이블로 연결되며 무선의 경우 Wi-Fi 통신 규격에 따라 네트워크에 연결된다.

랜 구성을 위해서는 허브, 스위치 등의 장비가 필요하며 원거리 네트워크 연결을 위해서는 라우터 장비가 추가적으로 필요하다

허브(Hub)

여러 컴퓨터를 LAN에 접속할 수 있도록 해주는 장치로 보통 컴퓨터에 연결된 랜선(UTP Cable)들이 1차적으로 모이는 곳이 허브 장비 이다. 허브를 통해 네트워크 전송거리도 길어지고 허브와 허브가 연결되어 더 큰 네트워크 구성이 가능해 진다.

스위치(Switch)

허브보다 고급 장비로 여러 장치를 연결해 LAN을 확장하고 데이터 패킷을 목적지 MAC주소로만 전송해 트래픽을 줄여준다. 또한 특정 포트 기반 제어 및 Virtual LAN(VLAN)등의 기능을 통해 보안을 강화할 수 있다.

라우터(Router)

라우터는 IP주소를 기반으로 패킷을 전달하며 라우팅 테이블을 통해 패킷의 목적지를 찾아 전달한다. 멀리 떨어진 복잡한 네트워크를 서로 연결해 주는 장비로 우체국에 국제우편를 보내면 배송 경로를 따라 미국이나 유럽까지 배달해 주는것과 같은 역할을 한다.

인터넷

인터넷은 TCP/IP로 이루어진 네트워크들이 전세계적으로 연결된 네트워크 이다. 초기에는 군사 및 연구 목적으로 네트워크들을 서로 연결하기 시작한 것이 배경이 되었으며 1990년대 들어 점차 일반인들에게도 개방되기 시작했고 지금은 인터넷이 없어서는 안되는 세상이 되었다.

가정집, 회사등의 컴퓨터들은 KT, SK브로드밴드, LG U+와 같은 통신 사업자와 연결이 되고 국내의 네트워트는 해저 광케이블을 통해 미국과 연결되어 전세계로 확대되는 구조 이다.

이러한 인터넷 이라는 네트워크 인프라를 이용한 다양한 서비스들이 존재하는데 예를 들어 네이버, 구글과 같은 월드와이드웹(www) 서비스가 대표적이다.

IP주소

IP 주소는 인터넷에 연결된 컴퓨터에 부여되는 고유 주소 이다. 총 12자리로 0~255 까지의 십진수로 각각 .으로 구분한 4영역(IPv4)으로 표현된다. 인터넷 주소 확장을 위해 6자리를 사용하는 IPv6도 있지만 일반적으로는 IPv4 주소 체계를 사용하고 있다고 보면 된다.

공인 IP와 사설 IP 차이는?

• 공인 IP: 인터넷에 직접 연결되어 있는 IP 주소로 전세계적으로 유일한 주소.
• 사설 IP: 공인 IP와 연결되어 있는 라우터를 통해 내부 네트워크에 부여되는 IP 주소.
• 인터넷에 연결하는 클라이언트 PC나 모바일 디바이스는 사설IP여도 상관 없으나 정보 제공을 위한 서버(네이버 등)를 운영하는 경우 공인 IP가 필요하다.
• 포트포워딩 기법등을 사용해 사설IP에서도 외부에서 접속이 가능하도록 할 수 있다.
• 내 컴퓨터의 ip가 10.x.x.x, 192.168.x.x, 172.16.x.x~172.31.x.x 인 경우 사설 IP로 볼 수 있다.

내 컴퓨터에 할당된 IP주소를 확인해 보려면 다음과 같이 ipconfig(윈도우) 혹은 ifconfig(맥,리눅스) 명령어를 사용하면 된다.

윈도우맥, 리눅스

C:\> ipconfig

이더넷 어댑터 이더넷:
연결별 DNS 접미사. . . . :
IPv4 주소 . . . . . . . . . : 10.0.1.20
서브넷 마스크 . . . . . . . : 255.255.255.0
기본 게이트웨이 . . . . . . : 10.0.1.1

$ ifconfig

en0: flags=8863<UP,BROADCAST,SMART,RUNNING,SIMPLEX,MULTICAST> mtu 1500
    ether f4:0f:24:06:c2:db 
    inet6 fe80::825:85b8:18b0:2abd%en0 prefixlen 64 secured scopeid 0x5 
    inet 172.30.1.1 netmask 0xffffff00 broadcast 172.30.1.255
    nd6 options=201<PERFORMNUD,DAD>
    media: autoselect
    status: active

DNS(Domain Name System)

DNS는 IP주소를 알기쉬운 이름으로 관리해주는 서비스를 말한다. 인터넷에 연결된 컴퓨터는 IP주소를 통해 서로 통신을 하지만 IP주소는 기억하기 어렵기 때문에 www.naver.com과 같은 도메인 이름을 사용한다.

도메인 이름은 공공재로 분류되기 때문에 전세계적인 관리 체계가 있고 무분별하게 개인이 사유 재산화 할 수 없다. 도메인 이름은 ICANN(국제 인터넷 주소 관리 기구)에 의해 관리되며 국내의 경우에는 KISA(한국 인터넷 진흥원)이 관리하고 있다.

도메인 구조

• 형식: 호스트명.도메인.최상위레벨도메인
• 최상위 도메인: 국가(.kr, .jp, .cn), 기업(.com, .co.kr) 기관(.net, .org), 대학(.edu, .ac.kr) 등
• 예: www.naver.com, cafe.naver.com, www.google.com, gmail.com, www.mit.edu

월드와이드웹

월드와이드웹(www, World Wide Web)은 인터넷을 대표하는 서비스중 하나로 인터넷 = WWW 로 인식될 정도이다.

1989년 유럽물리입자연구소(CERN)의 팀 버너스-리에 의해 처음 개발되었으며 많은 사람들이 정보를 쉬운 방법으로 공유하고 접근할 수 있도록 하는 것이 목적이었다.

인터넷과 웹

www 이름의 유래

정보의 연결을 가능하게 하는 하이퍼텍스트를 통해 연관된 정보가 계속 이어지는 구조로 마치 거미줄(Web) 같다고 해서 붙여진 이름이다. 초기 웹은 대표적으로 위키피디아 형태였다고 생각하면 된다.

웹은 정보를 제공하는 웹 서버(Web Server)와 정보를 요청하는 클라이언트(Client)인 웹 브라우저(Web Browser)로 구성된다. 웹 서버는 클라이언트의 요청에 따라 정보를 제공하고 클라이언트는 웹 서버에서 제공하는 정보를 보여주는 역할을 한다.

이때 웹 서버에서 제공하는 정보는 HTML, CSS, JavaScript 등의 웹 문서로 구성되어 있으며 웹 브라우저는 이러한 웹 문서를 해석하여 사용자에게 시각적인 형태(크고 작은 텍스트, 테이블, 목록, 이미지, 버튼 등)로 보여준다.

HTTP(Hyper Text Transfer Protocol)

웹 서버와 클라이언트 간의 통신을 위한 응용 계층 프로토콜로 다음과 같은 구조와 특징을 가진다.

HTTP 메시지 구조 - 출처: https://developer.mozilla.org

• 클라이언트가 서버로 보내는 요청은 request, 서버의 응답은 response 라고 한다.
• Stateless: 클라이언트와의 연결을 유지 하지 않고(Connectionless) 요청과 응답을 처리한다.
• HTTP Request는 Start line, Header, Body로 구성.
• Start line은 요청 방식(GET, POST), 요청 URL, HTTP 버전(1.0,1.1,2.0)으로 구성.
• HTTP Response도 Request와 구조는 동일하며 상태 코드(200, 404, 500)를 포함한다.

http와 https

• https는 http에 보안 기능을 추가한 프로토콜로 SSL(Secure Socket Layer)을 통해 암호화된 통신을 제공.
• 현재 모든 웹 서비스는 https를 기본으로 사용하고 있다.
• https를 사용하는 경우 중간에 데이터를 가로채도 암호화되어 있기 때문에 데이터를 읽을 수 없다.

URL(Uniform Resource Locator)

URL은 웹에서 특정 자원의 위치를 나타내는 문자열로 웹 브라우저가 서버에 요청을 보낼 때 사용된다. 보통 브라우저 창 상단 주소란에 표시되는 것이 URL 이다. URL은 다음과 같은 구조를 가진다.

프로토콜://도메인:포트/경로/파일명

https://www.naver.com:80/news/2024101101.html
http://cdn.com:8080/img/hello.jpg
http://search.server.com/search?keyword=iphone
ftp://ftp.fileserver.com:8080/img/world.jpg

URI(Uniform Resource Identifier)는 URL을 포함하는 개념으로 URL은 URI의 일종이다. URI는 URL, URN(Uniform Resource Name)으로 구분되며 URL은 자원의 위치를 나타내고 URN은 자원의 이름을 나타낸다.

URI 예시

- https://example.com => https://example.com 라는 서버를 나타내기 때문에 URL이면서 URI.
- https://example.com/img/1.png => 서버의 img 디렉터리 아래의 1.png를 가리키므로 URL이면서 URI.
- https://example.com/menu/123 => URL은 https://example.com/menu 까지고 원하는 정보에 도달하기 위한 식별자 123을 포함하면 URI.
- https://example.com/menu?id=11 도 마찬가지.

웹 주요 기술

웹 개발은 크게 프론트엔드(Frontend)와 백엔드(Backend)로 나눌 수 있다. 프론트엔드는 사용자가 보는 화면을 구성하고 사용자와 상호작용을 하는 부분이며 백엔드는 서버와 데이터베이스와 같은 서버측 기술을 담당하는 영역이다.

프론트엔드와 백엔드 관계

본 교재에서는 프론트엔드 기술에 대해 중점적으로 다루며 백엔드 기술은 최소한으로만 다루도록 한다.

HTML

HTML(Hyper Text Markup Language)은 용어 그대로 하이퍼텍스트를 구현하기 위한 마크업 언어이다. 마크업은 태그라는 표기법을 이용해 정보의 표현을 정의하는 방식으로 대표적으로 XML, HTML 등이 있다.

HTML 예시

<h2>Hello World</h2>
<a href="http://www.naver.com">네이버로 이동</a>

• <h2>는 제목을 나타내는 태그로 크기가 큰 글자로 표시된다.
• <a>는 링크를 나타내는 태그로 href 속성에 링크 주소를 지정하면 클릭시 해당 주소로 이동된다.

XML은 extensible Markup Language의 약자로 HTML을 포함해 문서의 구조를 정의하는 언어로 XML을 통해 HTML을 정의하는 것도 가능하다.

XML 예시

<user>
    <name>홍길동</name>
    <tel>010-1234-1234</tel>
    ...
</user>

• <user>는 사용자 정보를 나타내는 태그로 <name>, <tel> 등의 하위 태그를 가질 수 있다.
• 태그 구조를 정의해 원하는 정보를 체계적으로 표현할 수 있다.
• 참고로 XML 문서에 대한 구조는 XML Schema로 정의 한다.

마크다운(Markdown)

마크다운은 간단한 표기법으로 웹 문서를 쉽게 작성할 수 있도록 하는 언어이다. 마크다운은 HTML로 변환되어 웹 브라우저에서 보여지며 README.md 파일과 같이 사용된다. #, *, -, > 등의 간단한 기호를 사용해 문서를 작성할 수 있다.

CSS

CSS(Cascading Style Sheets)는 HTML로 작성된 문서의 스타일을 정의하는 언어이다. HTML은 문서의 구조를 정의하고 CSS는 문서의 스타일을 정의한다. 즉, HTML이 내용을 작성하기 위해 사용된다면 CSS는 내용이 보여지는 글자의 크기, 배경, 모양 등을 정의하기 위해 사용한다.

CSS 예시

h2 {
    color: red;
    font-size: 24px;
}

• h2는 HTML에서 제목을 나타내는 태그로 이 태그에 대한 스타일을 정의한다.
• color는 글자색을 지정하고 font-size는 글자 크기를 지정한다.

다음은 HTML로만 구성된 결과와 CSS를 적용한 결과를 비교한 것이다.

CSS 적용 전과 후

JavaScript

앞에서 HTTP의 특성을 설명할 때 Stateless, Connectionless 특성을 언급했는데 이러한 특성을 보완하기 위해 JavaScript가 등장했다. 클라이언트 요청으로 서버로 부터 전달된 HTML, CSS는 기본적으로 변경이 불가능한 정적인 요소들이다. 예를 들어 네이버 메인 페이지를 요청해 화면에 보여주는 정보는 요청시점의 정보이며 이후에 변경되는 정보는 서버에 새로운 정보를 요청하기 전 까지는 실시간으로 반영되지 않는다.

자바스크립트는 프로그래밍 언어로 HTML, CSS와 함께 웹 페이지를 동적으로 제어할 수 있도록 해준다. 사용자의 클릭이나 입력에 반응해 화면을 변경하거나 실시간으로 서버와 통신해 데이터를 가져와 업데이트 하는 등의 기능을 수행할 수 있다. 같은 원리로 디자인의 실시간 변경, 애니메이션 효과, 사용자와의 상호작용 등을 구현하는데도 사용된다.

JavaScript 예시

<script>
    function login() {
        if(document.getElementById('id').value == "") {
            alert('아이디는 반드시 입력해야 합니다.');
        }
    }
</script>

• function login() { ... }은 login이라는 함수를 정의한다.
• document.getElementById('id').value는 HTML의 id가 'id'인 요소의 값을 가져온다.
• 입력값이 없는 경우 아이디를 입력하라는 메시지 창을 띄운다.

웹에서 새로운 뉴스, 날씨, 검색순위, 상품정보등이 접속할때 마다 변하는 것은 일반적으로 서버에서 데이터베이스 연동등 백엔드 프로그램을 통해 구현되는 정보로 이러한 정보를 실시간으로 반영하기 위해 자바스크립트를 사용한다. 또한 버튼 클릭으로 이전, 다음 페이지나 팝업창을 띄우는 등의 기능도 자바스크립트를 통해 구현된다.

SSR과 CSR

신문기사나 강의자료와 같이 변하지 않는 정보들은 단순 HTML로도 충분히 제공할 수 있지만 로그인을 하거나 게시판에 글을 쓰거나 쇼핑몰에서 상품을 구매하는 등의 기능은 서버와 데이터베이스와 같은 백엔드 기술이 필요하다.

백엔드는 다양한 언어와 프레임워크로 구현할 수 있으며 대표적인 언어로는 PHP, Java, Python, Node.js 등이 있고 프레임워크로는 Django, Flask, Spring, Express 등이 있다.

기본적인 구현 방법은 HTML 페이지에 데이터를 표현하기 위한 별도의 표현법을 정의해 템플릿엔진에 의해 데이터를 결합하는 방법이다. 사용하는 프레임워크에 따라 표현법은 다르지만 기본적인 원리는 동일하다.

템플릿 엔진으로 대표적인 것은 SSR(Server Side Rendering)방식으로 JSP(Java Server Page), Thymeleaf등이 있으며 CSR(Client Side Rendering) 방식에는 자바스크립트 프레임워크인 React, Vue, Angular등에서 지정한 템플릿 엔진을 사용한다.

다음은 간략한 템플릿 엔진 사용 예이다.

Thymeleaf 예시Vue 예시

<h2 th:text="${name}">홍길동</h2>

<h2>{{ name }}</h2>

SSR(Server Side Rendering)

클라이언트는 웹서버에 요청을 보내고 서버는 요청에 따라 데이터베이스에서 정보를 가져와 이를 HTML문서로 만들어 클라이언트에게 전달한다. 이때 HTML 문서와 데이터베이스로부터 가져온 정보를 결합해야 하는데 이를 서버에서 처리하는 것을 서버 사이드 렌더링(SSR, Server Side Rendering)이라고 한다.

SSR 기반 개발

CSR(Client Side Rendering)

CSR은 HTML과 데이터의 결합을 클라이언트에서 처리하는 것으로 서버는 JSON형태의 데이터를 전달하고 클라이언트는 이를 받아 기본 HTML에 데이터를 바인딩해 동적으로 화면을 생성한다. CSR은 사용자 경험을 향상시키고 서버의 부하를 줄일 수 있으나 검색엔진 최적화(SEO)에 문제가 있을 수 있다.

CSR 기반 개발

생각해 봅시다

1. 인터넷과 웹의 차이점은 무엇인가요?
2. 프로토콜이란 무엇인지 웹의 기본 프로토콜을 포함해 설명해 보세요.
3. HTML, CSS, JavaScript 각각의 역할과 차이점을 설명해 보세요.
4. SSR과 CSR의 차이점을 설명해 보세요.