웹 서비스 구성요소

앞 장보다 더 상세한 내용을 다뤄봅시다.

웹을 구성하는 요소는 HTML, CSS, JavaScript 세 언어로 웹 페이지가 만들어진다는 것을 01-1에서 봤습니다. 이번에는 브라우저를 통해 URL을 입력하여 하나의 홈페이지가 우리 눈에 보이기까지 어떤 일을 하는지 살펴보도록 하겠습니다.

가장 먼저 브라우저는 사용자에게 주소를 받습니다. 이렇게 사용자가 주소를 입력하거나, 버튼을 누르거나 링크를 클릭하는 등의 행동을 통해 브라우저가 서버에 보내는 것을 요청(Request) 이라고 합니다.
서버는 요청을 받으면, 그에 맞는 HTML, CSS, JavaScript 파일을 묶어서 브라우저로 응답(Response) 합니다. 이미지도 있을 수 있고, 동영상이나 폰트 파일이 포함될 수도 있습니다. 앞에서 네트워크 탭에서 보았죠.
브라우저는 서버로부터 HTML, CSS, JavaScript 파일을 받습니다.
브라우저는 받은 HTML, CSS, JavaScript 파일을 해석하여 화면에 보여줍니다. 이 과정에서 HTML은 구조를 만들고, CSS는 디자인을 입히고, JavaScript는 동작과 상호작용을 만들어냅니다.

8.1-7

각각 HTML, CSS, JavaScript가 어떤 역할을 하는지 간단히 정리하면 아래와 같습니다.

1. IP 주소와 URL

방금 위에서 '주소창에 URL을 입력한다'는 말이 나왔습니다. 그럼 이 '주소'라는 게 정확히 무엇일까요?

인터넷에 연결된 모든 컴퓨터에는 고유한 번호가 붙어 있습니다. 이걸 IP 주소라고 합니다. 위니브 주소가 '제주특별자치도 제주시 아라일동 OOOO'인 것처럼, 인터넷에서는 142.250.196.110 같은 숫자가 그 역할을 합니다. 이 숫자만 알면 그 컴퓨터로 정확하게 찾아갈 수 있습니다.

문제는, 사람이 이런 숫자를 외우기는 어렵다는 점입니다. 142.250.196.110을 외울 사람은 없죠. 하지만 google.com은 누구나 외웁니다. 그래서 숫자 대신 사람이 기억하기 쉬운 이름을 쓸 수 있도록 만든 것이 도메인입니다.

브라우저는 우리가 google.com을 입력하면, 먼저 '전화번호부' 같은 시스템(DNS)에 물어봅니다. "google.com이라는 이름을 가진 컴퓨터의 IP 주소가 뭐야?" 그러면 답이 돌아오고, 브라우저는 그 IP 주소로 접속해 화면을 받아옵니다. 이 모든 과정이 1초도 안 되는 사이에 일어납니다.

1.1 도메인은 사야 한다

여기서 한 가지 중요한 점이 있습니다. 이 이름(도메인)은 공짜가 아닙니다. naver.com, coupang.com처럼 우리에게 익숙한 주소들은 모두 그 회사가 돈을 내고 사용권을 빌리고 있는 것입니다. 1년에 한 번씩 갱신해야 하고, 갱신하지 않으면 다른 사람이 그 이름을 가져갈 수 있습니다.

가격은 도메인 끝의 종류(.com, .co.kr, .kr, .net 등)에 따라 다릅니다. 보통 1년에 1만 원 ~ 2만 원 정도입니다. 인기 있는 짧은 단어 도메인은 이미 누군가가 선점하고 있어서, 새로 만든 서비스라면 적당히 비어있는 이름을 골라야 하는 경우가 많습니다.

1.2 어디서 사야 할까

도메인을 파는 회사는 여러 곳이 있습니다. 국내에서는 cafe24, 가비아 같은 곳이 대표적이고, 해외에서는 GoDaddy, Namecheap, Cloudflare 같은 곳이 유명합니다.

처음 도메인을 사는 분이라면 cafe24(hosting.cafe24.com)를 추천드립니다. 화면이 한국어로 되어 있고, 결제·갱신·서버 연결까지 모든 과정이 초급자가 따라가기 쉽게 정리되어 있습니다. 도메인뿐만 아니라 서버를 빌리는 호스팅 서비스도 한 회사 안에서 같이 해결할 수 있어서, 처음에는 여러 회사를 옮겨다니지 않아도 됩니다.

도메인 구매는 한 번에 끝나는 일이 아닙니다. 매년 갱신 비용이 나가고, 갱신을 깜빡하면 도메인을 잃어버릴 수 있습니다. 가능하면 자동 갱신을 켜두시고, 결제 카드도 만료되지 않은 카드로 등록해두세요.

도메인을 산 다음에는 그 도메인이 우리 서버의 IP 주소를 가리키도록 연결하는 작업이 필요합니다. 이 부분도 cafe24 같은 서비스에서는 화면을 따라가며 클릭만 하면 끝나도록 만들어져 있습니다. 막히는 부분이 있으면 AI에게 "cafe24에서 산 도메인을 OOOO 서버에 연결하려면 어떻게 해야 해?"처럼 물어보면 단계별로 안내를 받을 수 있습니다.

2. 클라우드

도메인을 구매했다면 이제는 웹 서비스를 실제로 운영할 서버가 필요합니다. 이 서버는 우리가 직접 컴퓨터를 사서 집에 두고 운영할 수도 있지만, 보통은 클라우드 서비스를 이용해서 빌려 쓰는 방식을 많이 사용합니다.

프론트엔드만 있다면 GitHub Pages 같은 무료 호스팅 서비스를 이용하여 연결이 가능합니다. 백엔드가 필요한 경우에는 AWS, Google Cloud, Azure 같은 대형 클라우드 서비스를 이용하는 것이 일반적이지만, 처음 하시는 분들은 Render와 같은 쉽게 배포할 수 있는 서비스를 권해드립니다. 대형 클라우드의 기술 학습 곡선은 매우 높습니다.

3. 프론트엔드

도메인도 구매하고, 서버도 구축했다면 이제 그곳에 올릴 파일을 작성해야 합니다. AI가 대부분 작성하지만, 어떤 파일이 어떻게 구성되어 있는지 살펴보도록 하겠습니다.

3.1 HTML

HTML(Hyper Text Markup Language)은 웹 페이지의 뼈대를 만드는 언어입니다. 위에 사자탈을 쓴 고양이인 라이캣이라는 캐릭터가 있습니다. 이 캐릭터의 각 구성요소를 나타내는 것이 HTML이라고 보시면 됩니다.

우리는 메모장을 활용하도록 하겠습니다.

형식은 <태그이름>콘텐츠</태그이름>의 형식을 가집니다.

<!-- 이 글자는 문서에 나타나지 않습니다. 주석이라 합니다. -->
<h1>안녕하세요.</h1>
<p>이것은 HTML 문서입니다.</p>

모두 적었다면 Ctrl + S를 눌러 저장해주세요. 파일 이름은 001.html로 하고, 확장자가 .html이 되도록 해주세요. 메모장으로 저장하실 때에는 "파일 형식"을 "모든 파일"로 바꾸고 저장하셔야 합니다. 그래야 001.html이라는 이름으로 저장이 됩니다.

저장한 폴더에서 더블클릭하여 실행시켜 주세요. 브라우저에 아래와 같은 화면이 나올 것입니다. 여기서 h1은 대제목을 뜻합니다. h1, h2, h3 등 h6까지 있습니다. p는 문단을 뜻합니다. 태그를 전부 외울 필요는 없습니다. 우리는 바이브 코딩으로 나온 결과물을 해석하거나 유추할 수 있으면 됩니다.

8.1-8

3.2 CSS

CSS(Cascading Style Sheets)는 HTML로 만든 뼈대에 옷을 입히는 언어입니다. 위 라이캣 캐릭터로 다시 설명하면, HTML이 눈, 코, 입, 사자탈 등의 콘텐츠를 넣었다면 CSS는 위치를 지정하고, 색을 칠하고, 모서리를 깎는 등의 역할을 하게 됩니다. 즉, 색상, 크기, 위치 조정 등 모든 디자인을 담당합니다.

새로 메모장을 열어 아래와 같이 적고 002.html 파일로 저장해 주세요. 그리고 더블클릭하여 열어보세요.

<style>
h1 {
    color: blue;
}
</style>
<!-- 이 글자는 문서에 나타나지 않습니다. 주석이라 합니다. -->
<h1>안녕하세요.</h1>
<p>이것은 HTML 문서입니다.</p>

아래와 같이 글자의 색이 바뀌어 있을 것입니다.

8.1-9

<style>이라는 태그를 사용하여 CSS 문서를 작성합니다. 여기 안에 있는 h1은 선택자라고 부릅니다. 아래 태그 중에 해당 선택자를 가진 것을 꾸며주겠다는 것이죠.

3.3 JavaScript

HTML이 뼈대를 만들고, CSS로 꾸몄다면, JavaScript는 움직임과 상호작용을 만들어냅니다. 라이캣 캐릭터로 비유하자면, 눈을 깜빡이게 하거나, 클릭했을 때 인사를 하게 만드는 것이 JavaScript의 역할입니다.

새로 메모장을 열어 아래와 같이 적고 003.html 파일로 저장해 주세요. 그리고 더블클릭하여 열어보세요.

<h1 id="greeting">안녕하세요!</h1>
<button onclick="changeText()">클릭해보세요</button>

<script>
function changeText() {
    document.getElementById('greeting').innerHTML = '반갑습니다!';
}
</script>

버튼을 클릭하면 '안녕하세요!'가 '반갑습니다!'로 바뀌는 것을 확인할 수 있습니다. 이러한 상호작용을 만들어내는 것이 JavaScript의 기본적인 동작입니다.

3.4 HTML의 구조

지금까지 우리는 HTML 태그를 간단하게만 사용해왔습니다. 하지만 실제 웹 페이지는 정해진 구조를 가지고 있습니다. 이제 HTML 문서의 전체적인 구조와 각 부분의 역할을 자세히 알아보겠습니다.

복사해서 004.html 파일로 저장한 후 더블클릭하여 열어보세요.

<!DOCTYPE html>
<html>
<head>
    <title>문서 제목</title>
    <style>
        h1 {
            color: blue;
        }
    </style>
</head>
<body>
    <h1>문서 제목</h1>
    <p>문서 내용</p>
    <script>
        alert("안녕하세요!!");
    </script>
</body>
</html>

HTML 문서는 크게 <head>와 <body> 두 부분으로 나뉩니다. <head> 영역은 문서의 정보를 담는 공간입니다. <body> 영역은 실제로 사용자의 화면에 표시되는 모든 콘텐츠가 들어가는 공간입니다.

3.5 바이브 코딩으로 생성해낸 파일

바이브 코딩으로 생성한 프론트엔드 구성은 2가지 형태입니다.

HTML, CSS, JavaScript가 모두 한 파일 안에 있는 형태
HTML, CSS, JavaScript가 각각 다른 파일로 분리되어 있는 형태

1번은 위에서 실습한 형태이며, 2번은 실제로 웹 서비스를 만들 때 더 많이 쓰이는 형태입니다. 2번의 폴더 안 구조는 아래와 같습니다.

8.1-13

index.html은 대문 페이지 역할을 합니다. 웹 서버는 사용자의 요청이 있을 경우 이 파일을 찾아서 보여주죠. 이 파일은 아래와 같은 구조로 되어 있어 .css와 .js 파일을 연결합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>title</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>hello world</h1>
    <script src="script.js"></script>
</body>
</html>

그리고 각 파일에는 CSS, JavaScript 코드가 아래와 같이 있는 구조입니다. 아래 파일은 style.css입니다. 위 아래로 style 태그를 삽입할 필요는 없습니다.

h1 {
    color: red;
}

아래 파일은 script.js입니다. 역시 위 아래로 script 태그를 삽입할 필요는 없습니다.

alert('hello world!');

4. 백엔드

백엔드에는 많은 언어가 있습니다. Python, Java, Node.js(JavaScript), PHP, Ruby, Go, C# 등 셀 수 없을 정도로 많죠. 많은 언어를 모두 다루는 대신 Python이라는 언어 하나만 살펴보도록 하겠습니다. Python은 문법이 간결해서 처음 접하는 분들도 어떤 일이 일어나고 있는지 눈으로 따라가기 쉽고, AI와 데이터 분야에서 가장 많이 쓰이는 언어이기도 합니다.

앞서 프론트엔드는 브라우저에서 실행되었습니다. 반면에 백엔드는 '서버'라고 불리는 컴퓨터 위에서 실행됩니다. 처음에는 이 '서버'라는 단어가 막연하게 느껴지지만, 결국 우리가 쓰는 컴퓨터와 같은 컴퓨터 한 대일 뿐입니다. 다만 24시간 켜져 있고, 다른 사람들의 요청을 받아 처리해주는 역할을 한다는 점이 다릅니다.

4.1 Python 설치와 첫 실행

Python은 python.org에서 내려받아 설치할 수 있습니다. 설치 화면에서 Add Python to PATH 항목을 꼭 체크해주세요. 이걸 빼먹으면 터미널에서 python 명령어가 동작하지 않습니다.

설치 과정에서 막히면 AI에게 "Windows에 Python 설치하는 방법 알려줘. PATH 등록도 같이"처럼 물어보세요. 운영체제와 버전을 같이 알려주면 더 정확한 답을 받을 수 있습니다.

설치가 끝났으면 BE라는 폴더를 새로 만들고 그 폴더를 열어주세요. 001.py 파일을 만들어 아래 코드를 입력합니다.

print("안녕하세요, 백엔드입니다.")

이제 이 코드를 실행하기 위해 터미널을 열어야 합니다. 터미널은 명령어를 입력해서 컴퓨터에게 일을 시키는 도구입니다. 코드를 저장한 폴더에서 Shift + 마우스 오른쪽 클릭을 하면 "여기서 PowerShell 열기" 같은 메뉴가 나옵니다. 그걸 클릭하면 터미널이 해당 폴더 위치로 열립니다.

만약 이 메뉴가 보이지 않는다면 하단 윈도우 탐색기 주소창에 powershell이라고 입력하고 엔터를 쳐보세요. 그러면 터미널이 열립니다. 그렇게 열린 터미널에서 우리가 저장한 폴더를 찾아가야 하는데요. 가장 쉬운 방법은 cd 명령어를 사용하는 것입니다. 예를 들어, cd Desktop\BE라고 입력하면 데스크톱에 있는 BE 폴더로 이동할 수 있습니다. 이 주소 명은 파일이 저장된 폴더에서 상단 주소바를 클릭하면 복사할 수 있습니다.

터미널을 열어 해당 폴더까지 오셨다면 아래 명령어로 Python 코드를 실행해보세요.

python 001.py

터미널에 안녕하세요, 백엔드입니다.라는 글자가 출력되면 성공입니다. HTML이 브라우저에서 보였다면, Python은 터미널에서 결과가 나오는 셈입니다.

4.2 웹 서버 만들기

지금까지의 Python 코드는 실행하면 한 번 결과를 출력하고 끝났습니다. 하지만 백엔드는 사용자의 요청을 계속 기다리고 있어야 합니다. 누군가 우리 사이트에 접속하면 그제서야 응답을 보내주는 식이죠.

이런 일을 해주는 도구 중 하나가 FastAPI입니다. 이름 그대로 빠르게 API를 만들 수 있고, 자동으로 문서까지 생성해주어 요즘 가장 많이 추천되는 도구 중 하나입니다. 터미널에 아래 명령어를 입력해 설치합니다.

pip install "fastapi[standard]"

002.py 파일을 만들어 아래 코드를 입력해주세요.

from fastapi import FastAPI
from fastapi.responses import HTMLResponse

app = FastAPI()

@app.get("/", response_class=HTMLResponse)
def home():
    return "<h1>안녕하세요, 첫 번째 백엔드 서버입니다.</h1>"

@app.get("/about", response_class=HTMLResponse)
def about():
    return "<p>이 페이지는 /about 주소로 요청이 들어왔을 때 응답합니다.</p>"

터미널에서 아래 명령어로 실행합니다.

fastapi dev 002.py

실행이 되면 터미널에 http://127.0.0.1:8000 같은 주소가 뜹니다. 브라우저 주소창에 그 주소를 입력해보세요. 우리가 작성한 HTML이 화면에 보일 것입니다. 주소를 http://127.0.0.1:8000/about으로 바꾸면 다른 응답이 돌아옵니다.

01-1에서 봤던 요청-응답 그림이 실제로 일어나는 순간입니다. 브라우저가 주소를 보내면(요청), 우리 Python 코드가 그에 맞는 HTML을 만들어 돌려주는(응답) 구조입니다.

여기서 한 가지 더, 주소창에 http://127.0.0.1:8000/docs를 입력해보세요. FastAPI가 우리 서버에 어떤 주소(엔드포인트)들이 있는지 자동으로 정리해 보여줍니다. 직접 만들지 않아도 API 문서가 함께 따라오는 셈입니다.

서버를 끄려면 터미널에서 Ctrl + C를 누르면 됩니다. 서버가 꺼지면 브라우저에서 더 이상 페이지가 보이지 않습니다. 백엔드가 항상 켜져 있어야 하는 이유가 여기 있습니다.

4.3 바이브 코딩 관점에서의 백엔드

코드를 한 줄도 외울 필요는 없습니다. AI에게 "FastAPI로 /와 /about 두 페이지가 있는 서버 만들어줘"라고 부탁하면 위와 비슷한 코드가 나옵니다. 우리가 알아야 할 것은 다음 정도입니다.

백엔드는 서버 위에서 항상 켜져 있어야 한다.
사용자의 요청 주소(/, /about 등)에 따라 다른 응답을 돌려준다.
Python은 그 안에서 계산, 데이터 처리, 외부 API 호출, 데이터베이스 조회 같은 일을 한다.

01-2에서 본 Django는 FastAPI보다 훨씬 큰 도구입니다. FastAPI가 API 서버를 빠르게 만드는 데 특화된 가벼운 도구라면, Django는 회원가입·관리자 페이지·DB 연결까지 같이 들어있는 풀패키지라고 보면 됩니다. AI에게 의도를 정확히 전달할 때 "가벼운 API 서버는 FastAPI로", "회원과 관리자 기능까지 포함된 서비스는 Django로" 정도로 구분해서 부탁하면 됩니다.

5. 데이터베이스

서버가 꺼지면 어떻게 될까요? 위에서 만든 FastAPI 서버에 글을 100개 작성했다고 해봅시다. 서버를 껐다 켜면 그 글들은 어디로 갈까요? 안타깝게도 모두 사라집니다. Python 변수는 메모리에 잠깐 올려두는 임시 저장소이기 때문입니다.

이 문제를 해결하는 게 데이터베이스(Database, DB) 입니다. 회원 정보, 게시글, 주문 내역, 채팅 기록처럼 오래 남아 있어야 하는 데이터는 모두 DB에 저장합니다. 서버를 껐다 켜도, 컴퓨터를 다시 시작해도 데이터는 그대로 남습니다.

DB와 대화하려면 SQL(Structured Query Language) 이라는 언어를 사용합니다. SQL은 "이런 데이터를 보여줘", "이 데이터를 저장해줘", "이 데이터를 지워줘" 같은 명령을 DB에 전달하는 약속된 형식입니다.

SQL의 종류는 여러 가지가 있습니다. MySQL, PostgreSQL, SQLite, Oracle 등 이름은 달라도 기본 문법은 거의 같습니다. 처음 배우는 입장에서는 어떤 걸 써도 큰 차이가 없으니, AI가 추천해주는 걸 그대로 쓰셔도 충분합니다.

직접 설치하지 않고 브라우저에서 바로 실습해볼 수 있는 사이트가 있습니다.

https://sql.weniv.co.kr/

접속하면 왼쪽에 SQL을 입력할 수 있는 창이 있고, 오른쪽에 결과가 나옵니다. 아래 SQL을 입력해보세요.

SELECT * FROM 상품;

상품이라는 표(테이블)에 들어있는 모든 행과 열을 보여달라는 뜻입니다. 실행하면 상품들의 목록이 표 형태로 나타납니다. 엑셀 시트와 비슷한 모양인데, DB는 결국 잘 정리된 표들의 묶음이라고 보면 됩니다.

이러한 명령어로 수정, 추가, 삭제도 할 수 있습니다. 다만 이러한 명령어를 모두 외울 필요는 없습니다. AI가 필요에 따라 이러한 SQL 명령어를 만들기 때문입니다. 대신 여러분은 DB가 필요한 상황이 어떤 상황인지, DB가 어떤 역할을 하는지, 그리고 AI에게 어떻게 요청해야 하는지를 아는 것이 중요합니다.