개발자가 아닌 회사원이 AI와 함께 만든 웹 시스템을 이해하려고 '식당 비유'로 정리한 기록입니다. 프론트엔드와 백엔드, 데이터베이스(Firestore)와 파일 저장소(Storage), GitHub과 Vercel이 각각 무슨 일을 하는지, 그리고 Firestore와 SQL의 차이까지 쉽게 풀었습니다.
지난 글에서 남겨둔 질문
지난 글 끝에 이렇게 적었다. 나는 GitHub을 쓰고 Vercel로 배포도 하는데, 그게 정확히 무엇인지 모른다고. 내 경험 안에 그것과 닮은 게 아직 없어서 걸릴 곳이 없다고.
이번에는 순서를 바꿔 봤다. 먼저 클로드에게 물었다. "전체 그림과 꼭 알아야 할 것만 알려줘."
비개발자가 꼭 알아야 할 것 10가지
돌아온 답은 우선순위가 붙은 목록이었다. 목표는 직접 코딩하는 게 아니라, AI가 하는 일을 읽고 판단할 수 있는 수준이라고 했다.
A. 개발 기초
- 프로젝트 폴더 구조: 어떤 파일이 무슨 역할인지
- 기본 명령 몇 개: 설치하고 실행하는 법
- 프론트엔드, 백엔드, 데이터베이스의 관계
- Git: 저장하고 되돌리는 법
- 배포: 내 PC의 결과물이 인터넷에 올라가는 과정
B. AI 코딩 도구(Claude Code) 사용법
- 설정 파일(CLAUDE.md): AI에게 주는 업무 매뉴얼
- Plan 모드: 실행 전에 계획부터 확인하기
- 권한: AI가 알아서 할 일과 허락받을 일 구분하기
- 스킬과 MCP: 반복 업무를 매뉴얼로 만들고, 외부 서비스와 연결하기
- 나머지 고급 기능은 나중에
목록을 받자마자 3번에서 막혔다. 프론트엔드, 백엔드, 데이터베이스. 단어는 아는데 머릿속에 그림이 그려지지 않았다.
남의 비유를 빌려 쓰기로 했다
지난 글에서 비유는 클로드에게 물어보면 안 된다고 썼다. 남의 비유는 아무리 좋아도 붙지 않는다고.
이번엔 그 규칙을 반쯤 어겼다. 개발자들이 웹 서비스를 설명할 때 흔히 쓰는 '식당 비유'를 빌려 왔다. 대신 받아 적지는 않았다. 내가 만든 시스템에 하나씩 대입했고, 대입이 안 되는 곳마다 내 추측을 먼저 던진 뒤 틀렸는지 확인받았다.
웹 서비스 = 식당: 한눈에 보는 대응표
| 웹 서비스 구성 요소 | 식당 비유 | 하는 일 |
| 프론트엔드 | 매장 | 손님(사용자)이 보는 화면. 메뉴판을 보고 주문하는 곳 |
| 백엔드 | 주방 | 주문을 받아 실제로 일을 처리하는 곳. 손님은 들어올 수 없다 |
| 데이터베이스 (Firestore) | 장부 | 직원 명부, 주문 기록 같은 영업 기록 |
| 파일 저장소 (Storage) | 창고 | 서류, 사진, PDF 같은 무거운 파일 |
| 배포 서비스 (Vercel) | 상가 건물 겸 관리업체 | 매장과 주방이 들어선 건물. 문을 열어 두고 관리한다 |
| GitHub | 레시피 보관소 | 설계도와 레시피(코드)의 원본과 개정 이력 |
| AI 코딩 도구 (Claude Code) | 주방장 | 사장의 지시를 받아 요리하는 사람 |
| 설정 파일 (CLAUDE.md) | 주방 운영 매뉴얼 | 주방장이 출근하면 제일 먼저 읽는 문서 |
손님은 매장만 본다. 주방, 장부, 창고는 보이지 않는 곳에서 일한다. 레시피 보관소는 손님이 올 때마다 쓰는 곳이 아니라, 새 메뉴를 낼 때만 건물에 반영된다. 이게 배포다.
대입하다가 틀렸던 것들
1. Vercel은 서빙 직원이 아니었다
처음엔 Vercel을 서빙 직원이나 배달업체쯤으로 생각했다. 틀렸다. 주방에서 매장으로 음식을 나르는 건 앱이 직접 하는 일이다.
Vercel은 매장과 주방이 들어선 상가 건물 겸 관리업체에 가깝다. 문을 열어 두고, 손님이 몰리면 자리를 늘리고, 레시피 보관소(GitHub)에 새 레시피가 올라오면 그대로 매장에 반영해 준다.
2. 자바스크립트는 자재, Next.js는 공법
식당 비유가 '어떻게 돌아가나'라면, '어떻게 지었나'는 건축으로 생각해 봤다. 자바스크립트는 시멘트나 철골 같은 자재다. 이건 맞았다.
Next.js와 React는 공법이라고 했더니 반만 맞았다. 둘 다 공법이지만 범위가 다르다. React는 조립식(모듈러) 공법이다. 버튼, 표, 카드 같은 부품을 찍어 내 조립하는데, 매장 인테리어(화면)에만 쓴다. Next.js는 턴키 공법이다. React를 품고, 매장부터 주방과 배관까지 한 번에 짓는다.
3. Firestore는 '매뉴얼'이 아니라 '장부'였다
Firestore를 식당 운영 장부 겸 매뉴얼이라고 생각했다. 직원 명단과 권한, 메뉴, 재료 보관 위치까지 다 적힌 곳. 반만 맞았다.
직원 명부와 권한은 장부에 있다. 하지만 어떤 메뉴(화면과 기능)가 있는지는 코드에 적혀 있고, 매뉴얼은 CLAUDE.md다. Firestore에는 영업하면서 쌓이는 기록만 들어간다.
Firebase와 Firestore도 헷갈렸다. Firebase는 구글이 운영하는 '식당 운영 지원 업체'이고, Firestore는 그 업체가 빌려주는 상품 중 하나다. 내 시스템은 장부(Firestore), 창고(Storage), 입구에서 예약 명부를 확인하는 직원(Authentication) 세 가지를 빌려 쓰고 있었다.
창고(Storage)도 장부 내용이 전부 들어 있는 곳이 아니었다. 이름, 직책, 날짜 같은 글자와 숫자는 장부에 직접 적힌다. 창고에는 PDF나 사진 같은 무거운 파일만 들어가고, 장부에는 "창고 몇 번 선반에 있음"이라는 위치만 적힌다.
4. GitHub과 Storage는 중복이 아니었다
둘 다 보관소인데 기능이 겹치는 것 아닌가 싶었다. 답은 2호점을 낸다고 상상하면 나온다.
레시피(코드)를 그대로 가져가면 똑같은 메뉴, 똑같은 인테리어의 식당이 생긴다. 하지만 장부와 창고는 텅 비어 있다. 직원도, 주문 기록도, 서류도 없다.
GitHub(코드)은 식당을 어떻게 운영할지를, 장부와 창고(데이터)는 실제로 무슨 일이 있었는지를 담는다.
그래서 실무에서는 데이터 백업이 코드 백업보다 더 중요하다. 코드는 내 PC에 사본이 남지만, 장부가 날아가면 그동안의 기록은 되돌릴 수 없다.
지난 글에서 GitHub이 무엇과 닮았는지 모르겠다고 했다. 레시피 보관소라는 말을 듣고 나서야 한 가지가 보였다. 레시피는 고칠 때마다 개정 이력이 남는다. 보고서_최종_최종2_진짜최종.docx를 만들던 일을, 이력으로 대신 관리해 주는 곳이었다.
5. Firestore와 SQL은 장부의 '양식'이 다르다
그럼 흔히 듣는 SQL 데이터베이스와는 뭐가 다를까. SQL은 칸이 인쇄된 공식 장부다. 모든 행이 똑같은 칸을 가져야 하고, 장부끼리 번호로 엄격하게 연결된다. Firestore는 서류철이다. 서류마다 적힌 항목이 달라도 된다.
- 항목을 나중에 덧붙이기 쉽다. 새 서류에만 새 항목을 적으면 끝난다. SQL은 장부 양식을 다시 인쇄해야 한다.
- 서류 안에 목록을 통째로 넣을 수 있다. 메모 기록이나 첨부 목록을 한 서류에 같이 둔다.
- 대신 서류끼리 연결은 쓰는 사람이 직접 챙겨야 한다. 한쪽만 고치고 다른 쪽을 깜빡하면 둘이 다른 말을 한다.
한 줄로 정리하면, 빨리 만들고 자주 바꾸기엔 Firestore, 데이터끼리 연결이 많고 정확성이 생명이면 SQL이다.
남의 비유를 내 것으로 만드는 법
지난 글에서 남의 비유는 붙지 않는다고 썼다. 이번에 그 생각을 조금 고쳤다.
남의 비유도 내 것에 직접 대입하면 붙는다. 정확히는 대입하다가 틀리는 지점에서 붙는다. Vercel을 서빙 직원이라고 했다가 상가 건물이라는 말을 들었을 때, 그 차이가 기억에 남았다. 처음부터 상가 건물이라고 받아 적었다면 남지 않았을 것이다.
그래서 지난 글의 질문에 하나를 덧붙인다.
"이건 내가 아는 무엇과 닮았지?"
그리고 빌려 온 비유라면, "내 것에 대입했을 때 어디서 틀리지?"
자주 묻는 질문
프론트엔드와 백엔드의 차이는 무엇인가요?
프론트엔드는 사용자가 보는 화면(매장), 백엔드는 보이지 않는 곳에서 요청을 처리하는 부분(주방)입니다. 비밀번호나 API 키처럼 감춰야 하는 일은 백엔드에서 처리합니다.
Firebase와 Firestore는 같은 건가요?
아닙니다. Firebase는 구글의 서비스 묶음이고, Firestore는 그중 데이터베이스 서비스입니다. 같은 묶음에 로그인(Authentication), 파일 저장(Storage) 등이 함께 들어 있습니다.
GitHub과 파일 저장소는 기능이 겹치지 않나요?
겹치지 않습니다. GitHub에는 개발자가 고치는 코드가, 파일 저장소에는 사용자가 서비스를 쓰면서 올리는 파일이 들어갑니다.
Vercel은 무슨 일을 하나요?
GitHub에 올라온 코드를 가져가 빌드하고, 인터넷 주소로 서비스를 띄워 주는 배포 서비스입니다.
Firestore와 SQL 데이터베이스는 어떻게 다른가요?
SQL은 정해진 표 형식에 맞춰 저장하고 표끼리 엄격하게 연결합니다. Firestore는 문서마다 항목이 달라도 되는 대신, 문서끼리의 연결을 직접 관리해야 합니다.
Claude Code를 처음 설치하고 겪은 이야기는 이전 글에 정리해 두었다. → Claude code 입문 가이드
이 글의 구조와 문장 정리는 클로드와 함께했다. 경험과 판단은 내 것이다.
'AI 도구 익히기' 카테고리의 다른 글
| Claude code 입문 가이드 (0) | 2026.04.12 |
|---|