06강 백엔드는 주방이다 — 인터랙티브 시연 도구

① 홀과 주방 단면도

우리가 보는 건 화려한 홀(화면)뿐. 진짜 일은 벽 뒤 주방에서 벌어진다.

🎬 0:00 화면은 절반

🍽️ 홀 = 프론트(화면) · 🍳 주방 = 백엔드(안 보이는 곳)

벽 뒤 주방을 볼까요?

🍽️ 홀 = 프론트(우리가 보는 화면)

손님이 앉아서 보는 곳. 예쁘고 조용하다.

🪑🍽️😊

🔘 버튼·메뉴·입력칸 — 손님이 누르고 적는 곳
🖼️ 사진·글자·디자인 — 보기 좋게 꾸민 화면
📝 주문 적기 — "이거 살게요" 입력만 받음

🍳 주방 = 백엔드(안 보이는 곳)

손님은 평생 못 본다. 그런데 진짜 일은 여기서.

🔥🍳👨‍🍳

🧑‍🍳 일꾼(서버) — 주문 받아 실제로 처리하는 직원
🧊 창고·냉장고(데이터베이스) — 정보를 보관
🔒 진짜 계산·비밀번호 확인 — 중요한 일은 여기서

🧱

벽 뒤라 안 보여요
여기를 눌러 열어보세요 👆

보이는 곳 = 홀(화면·프론트) / 안 보이는 곳 = 주방(백엔드)
진짜 중요한 일은, 안 보이는 데서 처리된다.

② 요청 → 처리 → 응답

홀이 주방에 주문서를 보내고(요청), 주방이 요리해서(처리) 다시 돌려준다(응답).

🎬 1:22 요청과 응답

📝 주문서 = 요청 · 🍳 요리하기 = 처리 · 🍜 음식 나옴 = 응답

🍽️ 홀 (프론트 · 손님 자리)

손님이 주문하는 곳

🙋‍♂️🍽️

1 요청 — "비개발자 코딩책 1권 주세요" 주문서를 주방으로 보냄

4 응답 받음 — 주방이 처리한 결과(요리)를 화면에 받아 보여줌

📝

🍳 주방 (백엔드 · 안 보이는 곳)

주문서 받아 일하는 곳

👨‍🍳🔥

2 주문 받음 — 일꾼(서버)이 홀이 보낸 주문서를 받음

3 처리(요리) — 창고(DB)에서 재료 꺼내 레시피대로 계산·확인

▶ 버튼을 누르면 주문서가 홀에서 주방으로 갔다가, 요리가 되어 돌아오는 한 바퀴를 보여줍니다.

③ F12 주방 폭로

평화로워 보이는 화면. '구매'를 누르는 순간, 화면이 주방에 보내는 주문서가 우르르 뜬다.

🎬 2:50 화면 데모

🕵️ F12 네트워크 = 홀이 주방에 보내는 '주문서'를 엿보는 창

https://내연습쇼핑몰.example/shop

🛍️ 연습용 쇼핑몰

📚

비개발자 코딩 입문서

16,200원

…평화롭죠? 화면에선 아무 일도 안 일어나는 것 같죠?

✅ 주문 완료! (화면은 이렇게 멀쩡합니다)

⚙ 개발자도구 (F12)

요소네트워크콘솔

이름(주문서)종류상태받는 곳

아직 조용합니다.
왼쪽 '구매하기'를 눌러보세요 👈

👆 이게 다 화면이 주방(백엔드)에 보낸 주문서(요청)예요. 화면은 평화로운데 뒤에선 주방이 풀가동 중!

실제 브라우저에서도 F12 → 네트워크 탭 → 버튼 클릭이면 이게 진짜로 뜹니다. 겁먹지 마세요, 그냥 안을 들여다보는 창이에요.

④ 어디서 확인? 진단

중요한 계산을 '화면(홀)'에서만 믿으면 뚫린다. '주방(백엔드)'에서 다시 확인해야 안전.

🎬 3:06 처리(레시피)

🔒 결제 금액·비밀번호 같은 중요한 처리는 꼭 주방에서 다시 확인

😈 손님이 화면 숫자를 몰래 바꿔치기 한다면? — 양쪽이 어떻게 다른지 보세요.

✗ 화면(프론트)에서만 계산

"화면에 뜬 숫자가 곧 결제 금액" — 화면 숫자만 믿는 가게

상품📚 코딩 입문서

결제 금액(화면값) 원

결제하기를 눌러보세요.

✓ 주방(백엔드)에서 다시 확인

화면 숫자는 참고만. 주방 창고의 '진짜 가격'과 대조한다

상품📚 코딩 입문서

결제 금액(화면값) 원

🧊 창고의 진짜 가격16,200 원

결제하기를 눌러보세요.

화면 숫자만 믿으면 결제가 0원으로 뚫리는 사고가 납니다.
그래서 좋은 가게는 진짜 계산을 안 보이는 주방(백엔드)에서 다시 합니다.

⑤ 좋은 지시 vs 나쁜 지시 (오늘의 AI 지시법)

단어를 알면 콕 집어 시키고(정방향), AI가 흘리는 경고를 되받아친다(역방향).

🎬 4:14 AI 지시법

정방향 내가 AI한테 시킨다 — 같은 부탁, 다른 지시, 다른 결과

✗ 나쁜 지시

결과가 여기에 나타납니다

✓ 좋은 지시

결과가 여기에 나타납니다

AI = 직원 · 나 = 사장 '돈 받는 일은 안쪽 금고(주방)에서 해'라고 위치를 콕 집어 시키는 게 사장의 한마디.

역방향 AI가 나한테 말한다 — 모르면 멍, 알면 되받아치기

🤖 AI 이 부분은 프론트엔드 말고 백엔드에서 검증하셔야 안전해요. 안 그러면 사용자가 값을 조작할 수 있어요.

🙄 나 (멍하니) "어… 네, 그렇게 해주세요…" — 그러고 그냥 넘어감. 구멍은 그대로.

🤖 AI 회원 정보는 데이터베이스에 저장해 둘게요. 비밀번호는 그대로 두면 위험해서 따로 처리하겠습니다.

🙄 나 (또) "아… 그러시구나…" — 데이터베이스가 뭔지, 비번을 왜 따로 두는지 모름.

🤖 AI 이 기능은 화면에서 바로 못 하고, 서버 쪽에 요청을 보내서 처리해야 합니다.

🙄 나 (멍) "서버…요? 음… 알아서 해주세요…" — 어디서 뭐가 처리되는지 감이 없음.

📋 오늘의 AI 지시법 — 복붙해서 바로 써보기

보이는 화면은 '프론트', 뒤에서 처리하는 곳은 '백엔드'라고 부르자. 비밀번호 확인이나 결제 금액 같은 중요한 처리는 화면이 아니라 꼭 백엔드에서 다시 확인하게 만들어줘.

오늘 끝나고 이 한 문장만 메모장에 복사해 두세요. 다음 편은 7강 — API는 메뉴판이다.