🌐 레슨

프론트와 백 — 보이는 것과 뒤의 것

화면은 프론트, 데이터와 규칙은 백. 내 가게 사이트를 두 층으로 나눠 봐요.

① 오늘의 미션

"이 버튼 누르면 뒤에선 무슨 일이 나죠?"

우리동네 반찬가게 사이트에 드디어 주문 버튼을 달았어요. 손님이 누르면 "주문 완료!"가 뜹니다. 그런데 — 그 한 번의 클릭 뒤에서 도대체 무슨 일이 벌어지는 걸까요?

오늘은 가게를 매장(프론트)과 주방·창고(백) 두 층으로 나눠 보고, 주문 버튼 한 번이 떠나는 여행을 끝까지 따라가 봅니다.

설명을 따라 진행하면, 여기서 직접 쳐보게 돼요 👇

~/my-shop

$ _

📚 「프론트와 백 — 보이는 것과 뒤의 것」 레슨 내용 전체 텍스트로 훑어보기

"이 버튼 누르면 뒤에선 무슨 일이 나죠?"

오늘은 가게를 매장(프론트)과 주방·창고(백) 두 층으로 나눠 보고, 주문 버튼 한 번이 떠나는 여행을 끝까지 따라가 봅니다.

반찬가게로 치면, 손님이 두 눈으로 직접 보고 만지는 공간은 어디일까요?

맞아요. 손님이 보는 건 매장이에요. 화면·버튼·메뉴판처럼 손님이 보고 누르는 모든 것을 소프트웨어에선 프론트엔드(front-end)라고 불러요. 주방과 창고는 손님 눈에 안 보이죠 — 그게 백이에요.

소프트웨어는 대부분 두 부분으로 나뉘어요. 반찬가게로 그대로 옮겨볼게요.

매장 = 프론트엔드

손님이 보고 누르는 것 — 메뉴판(화면), "주문" 버튼, 진열된 반찬 사진, "주문 완료!" 안내.

주방·창고 = 백엔드

손님 눈엔 안 보이지만 진짜 일이 벌어지는 곳 — 주문 받아 처리하기, 재고 확인(데이터), "1인분당 1만원" 같은 규칙 계산, 주문 내역 장부(DB)에 적기.

한 줄로: 프론트 = 보이는 것, 백 = 뒤에서 벌어지는 것.

같은 가게의 두 층을 항목별로 비교해봐요.

🛍️ 매장 (프론트): 손님이 본다.
· 메뉴판·진열대 = 화면
· "주문" 버튼 = 버튼
· "주문 완료!" = 응답을 화면에 표시
주로 HTML·CSS·JavaScript로 만들어요.

🍳 주방·창고 (백): 손님이 못 본다.
· 재료·재고 = 데이터
· "1만원" 가격표 = 규칙
· 주문 장부 = 데이터베이스(DB)
요청을 받아 처리·저장하는 일을 해요.

오늘 "우엉조림이 몇 인분 남았는지" 세는 일은 매장에서 할까요, 뒤에서 할까요?

맞아요. 재고·데이터·규칙은 전부 백의 일이에요. 화면은 그 결과를 '보여주기만' 하죠. "품절" 글자를 매장 진열대에 붙이더라도, 몇 개 남았는지 진짜 아는 건 창고(백)예요.

손님이 주문 버튼을 한 번 누릅니다. 그 다음 가장 먼저 일어나는 일은 뭘까요?

맞아요. 매장은 혼자 결정하지 않아요. 버튼을 누르면 프론트가 백에게 요청(request)을 보내요 — "우엉조림 1인분 주문 들어왔어요!" 그 다음 백이 일을 하고 응답(response)을 돌려주면, 그제서야 화면이 "주문 완료!"로 바뀌어요.

헷갈리면 Claude에게 직접 물어보면 돼요. 가게 폴더에서 Claude를 켜고 우리 가게를 두 층으로 갈라달라고 해봐요.

우리동네 반찬가게 사이트에서 '주문 버튼', '재고 세기', '메뉴판 화면', '가격 계산'을 프론트와 백으로 나눠줘

— 우리 가게 기능을 프론트/백으로 갈라봐요

이렇게 헷갈리는 개념은 내 가게 예시로 물으면 더 잘 와닿아요. "우리 가게에선?"이 좋은 질문 습관이에요.

손님이 주문 버튼을 누른 순간부터 "주문 완료!"가 뜨기까지, 일이 일어나는 순서대로 놓아보세요.

이 프론트 → 요청 → 백 → DB → 응답 → 화면 갱신의 왕복이 거의 모든 웹사이트가 매번 하는 일이에요. 버튼 하나 뒤엔 이 여행이 숨어 있어요.

백이 주문 내역·재고처럼 오래 보관해야 할 정보를 적어두는 '장부'를, 소프트웨어에선 뭐라고 부를까요?

정답! 데이터베이스(DB)예요. 화면을 새로고침해도, 컴퓨터를 껐다 켜도 주문 내역이 남아 있는 이유 — DB라는 장부에 적어뒀기 때문이에요. 다음 코스에서 이 장부를 직접 다뤄봐요.

이제 우리 가게 폴더가 실제로 두 층으로 나뉘어 있는지 Claude에게 살펴봐 달라고 해봐요. 보이는 파일과 뒤에서 도는 파일을 갈라줄 거예요.

지금 my-shop 폴더에서 손님이 보는 프론트 파일과, 뒤에서 도는 백 파일을 나눠서 설명해줘 — 지금 가게 폴더를 두 층으로 정리해 설명받아요

내 가게가 '보이는 층'과 '뒤의 층'으로 나뉘어 있다는 감각 — 이게 잡히면 앞으로 어떤 사이트를 봐도 두 층이 보이기 시작해요.

한 줄로

프론트 = 손님이 보는 매장(화면·버튼), 백 = 뒤의 주방·창고(데이터·규칙·DB). 주문 버튼 한 번은 프론트 → 요청 → 백 → DB → 응답 → 화면 갱신의 여행을 떠나요.

다음 레슨에서

그런데 우리 가게는 아직 내 컴퓨터 안에만 있어요. 손님이 진짜로 찾아올 수가 없죠. 다음 "Vercel 배포 — 전 세계 공개"에서, 이 가게를 인터넷에 올려 누구나 들어올 수 있게 만들어요. 가게는 계속 자랍니다. 🌱