1.1 웹 서비스는 어떻게 작동할까?

안녕하세요! 여러분은 매일 스마트폰으로 카카오톡을 하고, 유튜브를 보고, 쿠팡에서 쇼핑을 하시죠? 그런데 이런 앱들이 어떻게 작동하는지 궁금하지 않으세요?

오늘은 우리가 당연하게 사용하는 웹 서비스의 비밀을 파헤쳐볼 거예요!

웹 서비스는 3층 집 같아요

웹 서비스를 3층집에 비유해볼게요. 각 층마다 다른 일을 하는 사람들이 살고 있어요.
emoji_enhanced_3tier_diagram_standard_1766232711965.png

1층: 프론트엔드 - 우리가 보는 예쁜 화면

1층은 **프론트엔드(Frontend)**예요. 여기는 우리가 직접 보고 만질 수 있는 곳이에요.

스마트폰 앱 화면: 버튼, 이미지, 텍스트 등
웹사이트 화면: 네이버 메인페이지, 유튜브 동영상 화면
디자인: 예쁜 색깔, 폰트, 애니메이션

집으로 치면 현관문과 거실이에요. 손님(사용자)이 가장 먼저 보는 공간이죠!

2층: 백엔드 - 보이지 않는 일꾼들

2층은 **백엔드(Backend)**예요. 여기서는 진짜 일이 일어나는데, 우리 눈에는 보이지 않아요.

계산과 처리: 로그인 확인, 상품 검색, 결제 처리
비즈니스 로직: "이 사용자가 이 상품을 살 수 있나?", "할인을 적용해야 하나?"
교통정리: 수많은 사용자의 요청을 순서대로 처리

집으로 치면 부엌이에요. 맛있는 요리(데이터 처리)를 하는 곳이지만, 손님은 직접 들어올 수 없죠!

3층: 데이터베이스 - 모든 것을 기억하는 창고

3층은 **데이터베이스(Database)**예요. 여기는 모든 정보가 정리정돈되어 저장되어 있어요.

회원 정보: 이름, 이메일, 비밀번호, 주소
상품 정보: 가격, 재고, 설명, 이미지
기록들: 주문 내역, 결제 정보, 배송 상태

집으로 치면 창고와 서재예요. 모든 중요한 물건과 기록이 체계적으로 보관되어 있어요!

실제 예시: 쿠팡에서 "무선 이어폰" 주문하기

자, 이제 여러분이 쿠팡에서 무선 이어폰을 주문하는 과정을 따라가보면서 각 층에서 어떤 일이 일어나는지 살펴볼게요!

데이터의 여행: "무선 이어폰" 검색 과정

1단계: 검색창에 "무선 이어폰" 입력!

프론트엔드(1층)에서:

여러분이 검색창을 터치해요
"무선 이어폰"을 입력해요
검색 버튼을 눌러요
"잠깐, 검색 결과를 찾고 있어요..." 라고 로딩 화면이 나와요

2단계: 백엔드가 열심히 일해요! ‍

백엔드(2층)에서:

백엔드: "오, 누군가 무선 이어폰을 찾는구나!"
백엔드: "데이터베이스야, 무선 이어폰 상품들 좀 찾아줄래?"
백엔드: "아, 그리고 이 사용자가 좋아할 만한 상품들로 골라줘!"
백엔드: "가격도 낮은 순으로 정렬해주고!"

3단계: 데이터베이스가 답변해요!

데이터베이스(3층)에서:

데이터베이스: "잠깐, 찾아볼게..."
SELECT 상품명, 가격, 이미지, 평점, 재고수량
FROM 상품목록 
WHERE 상품명 LIKE '%무선 이어폰%' 
  AND 재고수량 > 0
ORDER BY 가격 ASC;

데이터베이스: "찾았어! 총 347개 상품이 있어!"

4단계: 백엔드가 결과를 예쁘게 포장해요!

백엔드(2층)에서:

백엔드: "347개는 너무 많아. 인기 있는 상품 20개만 골라서"
백엔드: "할인 정보도 계산하고, 배송비도 확인하고..."
백엔드: "사용자 위치 기반으로 배송 예상일도 계산해야지!"
백엔드: "자, 이제 1층으로 보내자!"

5단계: 예쁜 화면으로 보여줘요!

프론트엔드(1층)에서:

상품 목록이 예쁘게 정렬되어 나타나요
각 상품의 사진, 가격, 평점이 보여요
"로켓배송", "무료배송" 같은 태그도 붙어있어요
스크롤하면 더 많은 상품이 나와요

6단계: 상품을 클릭해서 장바구니에!

이 과정도 똑같이 1층→2층→3층→2층→1층 순서로 일어나요!

1층: "에어팟 프로를 장바구니에 넣기" 버튼 클릭
2층: "이 사용자가 이 상품을 살 수 있나? 재고는 있나?"
3층: "재고 1개 차감하고, 장바구니 테이블에 추가!"
2층: "할인 쿠폰 있나 확인하고, 총 금액 계산해!"
1층: "장바구니에 추가되었습니다! "

왜 이렇게 복잡하게 나누어놨을까요?

"그냥 하나의 프로그램으로 만들면 안 되나요?" 라고 생각하실 수도 있어요. 하지만 이렇게 나누는 데는 다 이유가 있어요!

1. 역할 분담으로 효율성 UP! ‍‍‍

디자이너: 1층(프론트엔드)에서 예쁜 화면 만들기
백엔드 개발자: 2층에서 비즈니스 로직 구현하기
데이터베이스 전문가: 3층에서 데이터 구조 설계하기

각자 전문 분야에 집중하니까 더 좋은 결과가 나와요!

2. 문제가 생겨도 빠른 해결!

만약 화면이 느려진다면?

1층(프론트엔드) 문제인지
2층(백엔드) 문제인지
3층(데이터베이스) 문제인지

쉽게 찾아서 고칠 수 있어요!

3. 확장이 쉬워요!

사용자가 늘어나면?

2층(백엔드) 서버를 더 많이 준비하거나
3층(데이터베이스)을 더 빠른 걸로 교체하거나
1층(프론트엔드)은 그대로 두고!

필요한 부분만 업그레이드하면 돼요.

4. 보안이 튼튼해져요!

중요한 정보(비밀번호, 결제 정보)는 2층과 3층에만 보관
1층에서는 필요한 정보만 보여줘요
해킹을 당해도 피해를 최소화할 수 있어요

백엔드 개발자는 뭘 하나요?

그렇다면 백엔드 개발자는 구체적으로 어떤 일을 할까요?

1. API 만들기

프론트엔드와 소통하는 규칙을 만들어요.

"사용자 정보를 달라" → GET /user/123
"상품을 검색해줘" → GET /products?search=무선이어폰  
"주문을 해줘" → POST /orders

2. 비즈니스 로직 구현하기

if (사용자가_VIP고객) {
    할인율 = 20%;
} else if (첫구매고객) {
    할인율 = 10%;
} else {
    할인율 = 0%;
}

3. 데이터베이스와 대화하기

-- 주문 생성
INSERT INTO 주문 (고객ID, 상품ID, 수량, 총금액) 
VALUES (123, 456, 1, 89000);

-- 재고 차감
UPDATE 상품 SET 재고수량 = 재고수량 - 1 WHERE 상품ID = 456;

4. 성능 최적화하기

느린 부분 찾아서 빠르게 만들기
많은 사용자가 동시에 접속해도 버틸 수 있게 하기
서버 비용 절약하기

5. 보안 관리하기

로그인한 사용자만 접근할 수 있게 하기
해킹 시도 막기
개인정보 암호화하기

정리하자면...

웹 서비스는 3층 집 같아요:

1층 프론트엔드: 우리가 보는 예쁜 화면
2층 백엔드: 실제 일이 일어나는 곳 (우리는 안 보여요)
3층 데이터베이스: 모든 정보가 저장되는 창고

이 세 층이 서로 대화하면서 우리가 사용하는 멋진 앱과 웹사이트가 만들어져요!

그리고 여러분이 이 책을 읽고 있다는 건... 곧 이 멋진 세계의 일원이 될 준비를 하고 있다는 뜻이에요!

다음 절에서는 이 중에서도 특히 데이터베이스가 왜 이렇게 중요한지, 왜 꼭 필요한지 알아볼 거예요. 준비되셨나요?

웹 서비스는 어떻게 작동할까?