웹사이트는 사실 '식당'입니다 — 프론트엔드·백엔드·서버·DB 한 방 정리
버튼 하나 눌렀을 뿐인데 치킨이 날아온다 — 그 사이 무슨 일이?
AI에게 "쇼핑몰 하나 만들어 줘"라고 하면 정말 뚝딱 만들어집니다. 그런데 막상 만들어 놓고 나면 "이걸 어떻게 고쳐 달라고 하지?", "뭐가 빠진 거지?"에서 딱 막히죠. 개발자와 비개발자의 차이는 바로 여기입니다. 오늘은 그 벽을 넘는 가장 쉬운 열쇠 하나를 드립니다 — 웹사이트를 '식당'이라고 생각하는 것. 이 그림 한 장이면 프론트엔드·백엔드·서버·데이터베이스가 머릿속에 그려지기 시작합니다.
▶ 먼저 6분 영상을 보고 오시면 아래 글이 복습이자 심화가 됩니다.
왜 '구조'를 알아야 안 끌려다니나
동네에서 장사 잘 되는 맛집 사장님들을 보면, 직접 주방에 들어가지 않아도 안에서 무슨 일이 벌어지는지 다 압니다. 음식 맛이 이상하면 "오늘 누가 뭘 빠뜨렸군" 하고, 창고에 어떤 재료가 얼마나 남았는지도 꿰고 있죠. 그래서 직원들에게 정확히 지시하고, 휘둘리지 않습니다.
김지백 강사에 따르면, 에이전트 코딩도 똑같습니다. 여러분이 사장님이고, AI는 주방장이자 직원입니다. 사장이 구조를 정확히 알면 평생 끌려다니지 않지만, 구조를 모르면 "어렵네, 나랑 안 맞나 봐" 하고 내려놓게 됩니다. 앞으로 중요한 건 코드를 직접 '짜는' 능력이 아니라, AI에게 무엇을 어떻게 시키느냐는 능력입니다.
① 홀 = 프론트엔드 (눈에 보이고 손으로 만지는 곳)
식당에 들어가면 가장 먼저 깔끔한 홀, 앉을 테이블, 메뉴판이 보입니다. 웹에서도 똑같아요. 앱을 켰을 때 보이는 화면, 누르고 싶게 생긴 버튼, 음식 사진, 메뉴 목록 — 이렇게 손님이 눈으로 보고 직접 만지는 모든 부분을 '프론트엔드'라고 부릅니다.
유튜브로 치면 영상 목록, 빨간 구독 버튼, 좋아요 하트가 전부 프론트엔드입니다. 색깔·글씨·크기·버튼 위치·부드러운 애니메이션까지 손님이 마주하는 모든 것이죠. 식당으로 치면 홀과 인테리어를 책임지는 사람이 만드는 영역입니다.
② 주방 = 백엔드 (안 보이지만 진짜 일하는 곳)
식당에서 손님이 함부로 못 들어가는 곳이 있죠. 바로 주방입니다. 주문을 받으면 요리를 하고, 계산을 하고, 재료가 떨어졌는지 확인합니다. 웹에서 이 주방 역할을 하는 것이 '백엔드'입니다.
내가 주문 버튼을 누르는 순간, 화면 너머 보이지 않는 곳에서 백엔드가 정신없이 바빠집니다. 이 사람이 진짜 회원이 맞는지 확인하고, 결제가 됐는지 따지고, 주문을 주방으로 넘기죠. 화면은 평화로워 보여도 그 뒤 주방은 난리인 겁니다.
③ 주문서 = 요청과 응답 (홀과 주방을 잇는 다리)
손님이 주방에 직접 들어가 요리하진 않죠. 둘 사이엔 다리가 필요한데, 그게 바로 '주문서'입니다. 손님이 메뉴를 고르면 홀에서 주방으로 주문서가 넘어가고("치킨 하나, 콜라 하나"), 주방은 요리를 만들어 다시 홀로 내보냅니다.
이 주고받음을 개발에서는 '요청'과 '응답'이라고 합니다. 내가 화면에서 무언가 누르는 것이 요청, 그 결과가 화면에 짠 하고 나타나는 것이 응답입니다. 유튜브 검색창에 검색어를 치고 엔터를 누르면 그게 요청, 잠시 뒤 관련 영상들이 쭉 뜨면 그게 응답이죠. 우리가 인터넷에서 하는 거의 모든 행동이 사실은 이 요청과 응답의 끝없는 반복입니다.
④ 창고 = 데이터베이스 (기억을 쌓아두는 곳)
식당에 꼭 필요한 곳이 하나 더 있습니다. 재료를 쌓아두는 창고죠. 창고가 비면 요리를 못 합니다. 웹에서 이 창고 역할을 하는 것이 '데이터베이스'입니다.
나의 주문 내역, 회원 정보, 올린 사진, 좋아요 누른 영상 — 이 모든 데이터가 데이터베이스라는 창고에 차곡차곡 쌓입니다. 그래서 어제 주문한 치킨집을 오늘 다시 찾을 수 있고, 작년에 본 영상이 기록에 그대로 남아 있는 거예요. 데이터베이스는 그 모든 기억을 보관하는 창고인 셈입니다.
⑤ 사장님처럼 AI에게 시키는 법 — 한 문장 차이
이제 진짜 중요한 부분입니다. 많은 분이 AI에게 그냥 "쇼핑몰 만들어 줘"라고 합니다. 만들어지긴 합니다. 그런데 어떻게 통제할지를 모르죠. 오늘 구조를 잡았다면, 사장님처럼 부위별로 짚어 지시할 수 있습니다.
| 식당 | 웹 용어 | 하는 일 |
|---|---|---|
| 홀 · 메뉴판 · 인테리어 | 프론트엔드 | 손님이 보고 만지는 화면 · 버튼 · 디자인 |
| 주방 | 백엔드 | 주문 처리 · 회원 확인 · 결제 등 보이지 않는 일 |
| 주방이 돌아가는 건물 | 서버 | 백엔드가 실제로 돌아가는 컴퓨터 |
| 주문서 | 요청 · 응답 | 누르면(요청) → 화면에 결과가 뜸(응답) |
| 창고 | 데이터베이스 | 주문내역 · 회원 · 사진 등 정보를 저장 |
✅ "상품을 보여주는 화면(프론트엔드)은 이렇게, 주문을 처리하는 부분(백엔드)은 이렇게 만들고, 회원 아이디와 주문 내역은 데이터베이스에 저장해 줘."
똑같은 AI를 쓰는데, 결과를 통제하는 사람과 끌려다니는 사람의 차이는 바로 이 한 문장에서 갈립니다.
오늘 핵심 3가지를 점검합니다. 답을 고르고 [정답 확인]을 누르면 즉시 채점됩니다.
Q1. 다음 중 프론트엔드(홀)가 아닌 것은?
Q2. '서버'를 식당으로 가장 정확히 비유한 것은?
Q3. 유튜브 검색창에 검색어를 치고 엔터 → 잠시 뒤 영상들이 뜸. 이때 '응답'에 해당하는 것은?
🎯 사장님 구조 이해 점수
해당되는 항목을 모두 클릭해 체크하세요. 마지막에 [내 점수 보기]를 누르면 등급이 나옵니다.
- 프론트엔드·백엔드·서버·데이터베이스를 '식당'으로 설명할 수 있다
- 화면에 보이는 부분(프론트)과 뒤에서 처리하는 부분(백엔드)을 구분할 수 있다
- '서버'가 백엔드가 돌아가는 컴퓨터(건물)임을 안다
- '요청과 응답'이 무엇인지 예를 들어 설명할 수 있다
- 회원·주문내역 같은 정보가 데이터베이스(창고)에 저장됨을 안다
- 내가 매일 쓰는 앱(배민·쿠팡·유튜브)이 같은 식당 구조임을 이해했다
- "쇼핑몰 만들어 줘" 대신 부위별로 짚어 지시할 수 있다
- AI에게 끌려다니지 않고 사장처럼 시킬 자신이 생겼다
보이는 화면 = 홀 = 프론트엔드 · 안 보이는 주방 = 백엔드 · 주방이 돌아가는 컴퓨터 = 서버 · 홀↔주방 주문서 = 요청과 응답 · 재료·기억 창고 = 데이터베이스. 이 그림 한 장이면 개발자들의 대화가 외계어가 아니라 친근한 이야기로 들리기 시작합니다.
「비개발자 사고법」은 한 편씩 쌓일수록 AI에게 시키는 힘이 붙는 시리즈입니다. 유튜브 채널 구독으로 새 영상을 가장 먼저 받아보시고, AI아카데미 자료실에서 다른 무료 자료도 함께 보세요.
혼자 막힐 때 옆에서 잡아주는 사람이 있으면 속도가 다릅니다. 온라인 강의로 체계적으로 익히거나, 1:1 컨설팅·강의 문의로 우리 회사·내 업무에 맞춘 적용을 받아보세요. 외부강사 김지백이 직접 안내합니다.
자주 묻는 질문
주간 AI 실무 레터
이 글이 도움이 됐다면, 매주 현장에서 검증한 AI 활용법·새 자료를 이메일로 받아보세요. 광고 없이, 바로 쓰는 것만.
우리 조직에 맞는 AI 교육을
설계해드립니다.
위 자료의 내용을 기반으로 맞춤형 강의 커리큘럼을 구성해드립니다. 기업·공공기관·임원 대상 프로그램 모두 가능합니다.
조회수·다운로드 카운트 등 인터랙티브 기능은 자료실 인터랙티브 페이지에서 이용하실 수 있습니다.