왜 용어가 계속 흐려지는가
바이브 코딩을 시작하면 배포, 포트, API, 컨테이너, 빌드 같은 말이 쏟아진다. 하나씩 검색하면 그 순간에는 이해가 되는데 며칠 지나면 다시 흐려진다.
낱개로 외우기 때문이다. 이 단어들은 서로 독립된 지식이 아니라 하나의 흐름 위에 순서대로 놓인 자리 이름이다. 순서를 모르면 스무 개의 무관한 낱말이 되고, 순서를 알면 한 줄이 된다.
그래서 이 연재는 도구 사용법부터 시작하지 않는다. 아홉 편에 걸쳐 그 한 줄을 앞에서 뒤로 훑는다. 오늘은 그 줄 전체를 한 번에 본다.
주소창에 무언가를 치면 일어나는 일
브라우저 주소창에 주소를 넣고 엔터를 누르면 세 가지 일이 순서대로 일어난다.
첫째, 내 브라우저가 어딘가에 있는 컴퓨터에게 이 화면에 필요한 것을 달라고 요청한다. 둘째, 그 컴퓨터가 파일을 보내 준다. 셋째, 브라우저가 그 파일을 읽어 화면으로 그린다.
회원가입을 하든 영상을 보든 댓글을 쓰든, 겉모습만 다를 뿐 안에서 일어나는 일은 이 세 단계의 반복이다.
내 브라우저 ──── 이 화면에 필요한 것을 주세요 ────▶ 서버
◀─── HTML · CSS · JavaScript · 데이터 ───
브라우저가 받은 것을 읽어 화면으로 그린다서버는 특별한 기계가 아니다
요청을 받아 답하는 그 컴퓨터를 서버라고 부른다. 이름 때문에 특수한 장비를 떠올리기 쉬운데, 그냥 컴퓨터다.
다른 점은 하나다. 언제 요청이 와도 답할 수 있도록 24시간 켜 둔다는 것. 서버라는 말 자체가 시중든다는 뜻에서 왔다.
그래서 내 노트북도 서버가 될 수 있다. 인터넷에 연결돼 있고 켜져 있고 요청에 답할 프로그램이 돌고 있으면 조건이 충족된다. 개발 중에 내 컴퓨터에서 서버를 띄워 놓고 브라우저로 접속해 보는 일이 바로 그것이다.
배우는 것들이 붙는 자리
이 한 줄을 그려 놓으면 앞으로 나올 기술들이 각자 어디에 붙는지가 정해진다.
요청을 어디로 보낼지 정하는 자리에 IP와 포트와 도메인이 있다. 요청을 받아 무엇을 줄지 정하는 자리에 웹서버가 있다. 줄 것을 만들어 내는 자리가 백엔드고, 받은 것을 화면으로 그리는 자리가 프론트엔드다. 줄 내용을 쌓아 두는 자리에 데이터베이스와 스토리지가 있다. 그리고 이 전체를 다른 컴퓨터로 통째로 옮기는 자리에 컨테이너가 있다.
아홉 편은 정확히 이 순서를 따른다. 브라우저가 읽는 파일 셋에서 출발해 주소와 문지기를 지나 프론트엔드와 백엔드로 가고, 데이터가 어디에 쌓이는지를 본 뒤 배포로 끝난다.
| 회차 | 다루는 자리 | 대표 이름 |
|---|---|---|
| 02 | 브라우저가 읽는 파일 | HTML · CSS · JavaScript |
| 03 | 요청을 어디로 보낼지 | IP · 포트 · 도메인 · DNS |
| 04 | 요청을 받아 무엇을 줄지 | Nginx · HTTPS |
| 05 | 받은 것을 그리는 쪽 | Next.js |
| 06 | 줄 것을 만들어 내는 쪽 | FastAPI · JSON |
| 07 | 값을 쌓아 두는 곳 | PostgreSQL |
| 08 | 파일을 쌓아 두는 곳 | 스토리지 · CDN |
| 09 | 통째로 옮기는 법 | Docker · Kubernetes |
이 지도가 실제로 쓰이는 자리
에이전트가 만들어 준 코드를 열었을 때 물어볼 질문이 생긴다. 이건 어느 칸 이야기인가.
화면이 안 뜬다는 하나의 증상도 칸마다 원인이 다르다. 주소가 잘못 가리키는 것과, 문지기가 엉뚱한 폴더를 주는 것과, 백엔드가 답을 못 만드는 것과, 데이터베이스가 비어 있는 것은 전혀 다른 문제다. 칸을 먼저 좁히면 검색어가 달라진다.
에이전트에게 물을 때도 마찬가지다. 사이트가 안 돼요보다 배포 후 도메인은 붙는데 502가 뜹니다가 훨씬 짧게 끝난다. 다음 편부터 이 칸들을 하나씩 채운다.