11강 풀스택은 식당 개업 완성이다 — 인터랙티브 시연 도구

① 전체 지도 — 따로 놀던 조각이 식당 한 채로

지금까지 배운 5조각. 카드를 눌러 역할을 확인하고, 마지막에 한 채로 합쳐보세요.

🎬 0:00 조각 복습

화면(홀)·자물쇠(보안)·주방(처리)·창고(저장)·개업(배포) — 따로 있으면 아직 식당이 아니에요. 합쳐야 풀스택.

🖥️

화면

손님이 보는 홀
(프론트)

🔒

자물쇠

신분 확인
(보안)

👨‍🍳

주방

일을 처리
(백엔드)

📦

창고

데이터 저장
(DB)

🚪

개업

문 열기
(배포)

👆 위 5장의 카드를 하나씩 눌러보세요. 각 조각이 식당에서 무슨 역할인지 알려드려요.

🍽️

풀스택 = 식당 한 채 완성!

풀(full)은 가득, 스택(stack)은 쌓인 층. 손님이 보는 홀부터 안 보이는 주방·창고까지 앞~뒤 전체를 다 갖춘 거예요.
이제 이 식당에 손님 한 명이 들어오면 어떻게 도는지, ② 탭에서 따라가 봅시다.

② 버튼 한 번의 여정 — 주문 한 바퀴

손님이 버튼을 누르면, 주문이 어떻게 한 바퀴 돌아 손님에게 돌아오는지 한 단계씩 봅니다.

🎬 1:18 한 바퀴

단계 0 / 6

🙋

손님

버튼 클릭

→

🖥️

홀

주문 접수
(프론트)

→

🔒

자물쇠

신분 확인
(인증)

→

👨‍🍳

주방

요리 처리
(백엔드)

→

📦

창고

재료 꺼냄
(DB)

→

🍽️

손님

요리 받음
(응답)

▶ 다음 단계 버튼을 눌러 손님 주문이 한 바퀴 도는 걸 따라가 보세요.

③ 고장 진단 게임 — "안 돼요" 말고 "여기가 막혔어"

증상을 읽고, 홀·주방·창고 셋 중 어디가 막혔는지 짚어보세요. 사장은 손가락으로 가리킵니다.

🎬 진단 연습

🏥 병원 비유 — "그냥 아파요"라고 하면 의사가 머리부터 발끝까지 다 검사해요. "명치 아래가 콕콕" 짚어주면 거기부터 봅니다.

😵 증상

증상을 불러오는 중…

문제 1 / 3 · 맞춘 개수 0

🎉

진단 완료! 이제 "안 돼요" 대신 한 단어로 짚을 수 있어요

홀에서 막혔나, 주방에서 막혔나, 창고에서 막혔나. 이 한 단어가 당신을 손님에서 사장으로 바꿉니다.

④ 메모 앱 한 바퀴 — 껐다 켜도 안 사라진다

진짜 작동하는 미니 메모 앱. 저장하고, 껐다 켜고(새로고침), 뒷방(창고)에 진짜 들어갔는지 봅니다.

🎬 2:30 화면 데모

🖥️ 메모 앱 (손님이 보는 홀 = 프론트)

📦 뒷방 들여다보기 (창고 = 데이터베이스)

평소엔 안 보이는 저장소예요. 코드 짜는 거 아니고, 진짜로 들어갔나 구경만 하는 거예요.

🗄 저장된 데이터 (memos)

손님(화면) → 주방(처리) → 창고(저장)까지 한 바퀴 돌면, 껐다 켜도 메모가 그대로 남아요. 콜드오픈에서 저장 안 되던 앱? 그건 이 창고가 빠진 거였어요.

🖥️

프론트엔드 개발자

화면(홀)만 만드는 사람

👨‍🍳

백엔드 개발자

주방·창고만 만드는 사람

🍽️

풀스택 개발자

앞~뒤 한 바퀴를 다 만드는 사람

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

한 바퀴를 짚어서 시키면 진짜 앱이 나오고(정방향), AI 말을 알아들으면 되받아친다(역방향).

🎬 4:56 AI 지시법

정방향 내가 AI한테 시킨다 — 같은 "메모 앱", 다른 지시, 다른 결과

✗ 나쁜 지시

결과가 여기에 나타납니다

✓ 좋은 지시

결과가 여기에 나타납니다

AI = 천재 주방장 · 나 = 식당 사장 사장이 직접 요리는 안 해도, 홀·주방·창고가 뭔지는 알아야 "한 바퀴 다 돌게" 시킨다.

역방향 AI가 나한테 말한다 — 모르면 멍, 알면 되받아치기 (3가지 상황)

화면 ↔ 뒤쪽 구분

🤖 AI 화면 쪽은 다 만들었는데, 뒤에서 데이터 주고받는 연결에서 에러가 나네요.

🙄 나 (멍하니) "어… 네… 그럼 그냥 다시 해주세요." → 또 '안 돼요'의 무한 반복

창고(저장) 짚기

🤖 AI 저장 버튼은 눌리는데, 데이터베이스에 값이 안 들어가는 것 같아요.

🙄 나 (또) "음… 그러시구나… 알아서 잘 좀…"

자물쇠(인증) 짚기

🤖 AI 로그인 안 한 사람도 이 기능을 쓸 수 있게 열어둘까요?

🙄 나 (잘 모르고) "네 뭐… 편한 대로 해주세요."

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

이 기능을, 화면에 보이는 부분(홀)부터 뒤에서 처리하는 부분(주방), 데이터를 저장하는 부분(창고)까지 한 바퀴 다 도는 작은 앱으로 통째로 만들어줘. 껐다 켜도 데이터가 남아 있어야 하고, 만약 막히면 셋 중에 어디서 막혔는지 콕 집어서 알려줘.

오늘 끝나고 이 지시법을 그대로 AI에게 붙여넣어 시켜보세요. "안 돼요"가 "여기가 막혔어"로 바뀝니다.