핵심 비유
앱은 '식당'과 같다. 손님이 보는 홀이 화면(프런트엔드), 안 보이는 주방이 일을 처리하는 서버(백엔드), 재료를 쌓아 둔 창고가 데이터베이스다. 우리가 화면에서 버튼을 누르는 것은 '주문서를 주방에 넣는' 일이고, 결과가 화면에 뜨는 것은 '요리가 나오는' 것이다. 보이는 화면 뒤에서 이렇게 여러 부분이 협력해 앱이 굴러간다.
핵심 포인트
- 프런트엔드는 '눈에 보이는 화면'이다 — 버튼·글씨·이미지 등 사용자가 만지는 모든 것(식당의 홀).
- 백엔드는 '안 보이는 곳에서 일을 처리하는' 부분이다 — 계산·검사·저장을 담당하는 서버(식당의 주방).
- 데이터베이스(DB)는 '정보를 보관하는 창고'다 — 가입 정보, 작성한 글, 점수 같은 걸 저장해 둔다.
- 화면과 서버는 인터넷으로 '요청과 응답'을 주고받는다 — 주문(요청)을 보내면 결과(응답)가 돌아온다.
- AI는 주방의 '특별 요리사'다 — 글·그림을 만들어 주지만 일한 만큼(토큰만큼) 비용이 들어, 기획할 때 'AI를 어디에 쓸지' 정해야 한다.
- 기획자가 코딩까지 할 필요는 없다 — 다만 '겉과 속이 따로 있다'는 큰 그림을 알면 AI나 개발자에게 무엇을 부탁할지 또렷해진다.
교사 팁
'식당 역할극'을 3명 1조로 시킨다 — 한 명은 홀(화면: "주문 받습니다"), 한 명은 주방(서버: 계산·조리), 한 명은 창고(DB: 재료 보관). 손님 주문이 홀→주방→창고를 거쳐 다시 돌아오는 과정을 30초 연기하면, 추상적인 '프런트/백엔드/DB'가 몸으로 이해된다. 깊이 들어가고 싶으면 architecture(IT 입문) 1장(컴퓨터가 하는 일)·5장(보이는 쪽과 안 보이는 쪽)·7장(데이터 창고)로 연결한다. 단, 이 모듈의 목표는 '겁먹지 않을 만큼의 큰 그림'이지 기술 암기가 아님을 분명히 한다.
참고 자료
- Frontend vs Backend의 차이 — AWSen / article
클라우드 대표 기업 AWS가 정리한 프런트엔드/백엔드 비교. '보이는 쪽'과 '처리하는 쪽'의 역할 구분을 명확히 설명해 식당 비유의 근거 자료로 적합.
- 서버 사이드 웹 프로그래밍 첫걸음 — MDNen / article
웹 표준 문서로 유명한 MDN의 백엔드 입문. 서버가 무슨 일을 하는지(요청 처리·DB 접근)를 초심자용으로 설명해 교사 배경 지식 보완에 좋다.
- 웹은 어떻게 작동하는가 — MDNen / article
브라우저(화면)와 서버가 인터넷으로 '요청·응답'을 주고받는 과정을 그림으로 설명. '주문서가 주방으로 갔다 돌아온다'는 비유를 실제 구조로 연결해 준다.
- 코드잇 — 코딩·IT 입문 학습ko / interactive
프런트엔드·백엔드·데이터베이스 기초를 한국어로 단계별로 배우는 플랫폼. 학생·교사가 용어를 우리말로 익히고 싶을 때 보완 자료로 활용 가능.