바이브코딩 초보가 자주 만나는 프론트엔드, 백엔드, API, 데이터베이스, 환경변수, Git, 배포 등 필수 개발 용어 20개를 실제 흐름에 맞춰 쉽게 설명합니다.
용어를 외우기보다 화면·서버·저장·오류 중 어느 위치를 가리키는지 알면 AI의 설명을 따라가기 쉬워집니다.
연재 안내: 27편 전체 순서와 현재 공개된 글은 비개발자 바이브코딩 로드맵에서 확인할 수 있습니다.
시작 전에 지켜야 할 기준은 바이브코딩 주의사항에서 확인할 수 있습니다. 이번 글은 이후 연재를 읽기 위한 짧은 용어 사전입니다.
한 줄 답변
바이브코딩 용어는 코드를 외우기 위한 시험 문제가 아닙니다. 화면에서 시작한 요청이 서버와 데이터베이스(DB)를 거쳐 다시 결과로 돌아오는 과정에 붙은 역할 이름입니다. 각 용어의 위치만 알아도 AI에게 훨씬 정확하게 질문할 수 있습니다.
이 글에서 바로 답하는 것
- 프론트엔드·백엔드·서버·데이터베이스가 어떻게 이어지는지
- API·JSON·API 키·환경변수를 왜 구분해야 하는지
- 빌드·배포·Git·디버깅을 어느 상황에서 쓰는지
- 모르는 개발 용어를 AI에게 어떻게 다시 물어봐야 하는지
핵심 요약
- 화면에서 보이는 부분은 프론트엔드, 규칙과 데이터를 처리하는 부분은 백엔드입니다.
- API는 프로그램끼리 대화하는 약속이며, API 키는 공개하면 안 되는 비밀값입니다.
- 빌드는 코드를 공개 가능한 형태로 준비하는 과정이고, 배포는 다른 사람이 접속할 환경에 올리는 일입니다.
- Git은 변경 이력을 남기는 도구이고, 로그와 디버깅은 오류 원인을 좁히는 과정입니다.
화면과 서버를 이해하는 용어
| 용어 | 초보자용 뜻 | 확인할 질문 |
|---|---|---|
| 프론트엔드 | 사용자가 보고 누르는 화면 부분 | 이 버튼과 입력창은 어디에 있는가? |
| 백엔드 | 화면 뒤에서 규칙과 데이터를 처리하는 부분 | 입력값을 누가 검사하고 저장하는가? |
| 서버 | 요청을 받아 처리 결과를 보내는 컴퓨터 또는 프로그램 | 지금 요청이 어느 서버로 가는가? |
| 데이터베이스 | 회원, 예약, 글 같은 정보를 구조적으로 저장하는 공간 | 어떤 항목이 어떤 표에 저장되는가? |
| 로컬호스트 | 인터넷 공개 전 내 컴퓨터에서만 앱을 실행하는 주소 | 로컬과 배포 주소가 다른가? |
프론트엔드와 백엔드는 서로 다른 앱이라기보다 한 서비스의 앞과 뒤입니다. 예를 들어 예약 버튼은 프론트엔드에 있고, 같은 시간의 중복 예약을 막는 검사는 백엔드에 있어야 합니다. 데이터베이스는 검사에 통과한 예약을 저장합니다.
프로그램이 대화할 때 쓰는 용어
| 용어 | 초보자용 뜻 | 확인할 질문 |
|---|---|---|
| API | 프로그램끼리 요청과 응답을 주고받는 약속 | 어떤 주소에 무엇을 보내는가? |
| 요청·응답 | 원하는 일을 보내고 결과를 돌려받는 과정 | 요청값과 응답값은 무엇인가? |
| JSON | API가 데이터를 주고받을 때 자주 쓰는 구조화 형식 | 원하는 값이 어느 이름 아래 있는가? |
| API 키 | 외부 서비스가 사용자를 식별하는 비밀 출입증 | 키가 코드나 화면에 노출되지 않는가? |
| 환경변수 | 코드와 분리해 보관하는 설정값 또는 비밀값 | 로컬과 배포 환경에 각각 등록했는가? |
API 키는 일반 설정값이 아니라 비밀값입니다. 브라우저 화면에 포함하면 사용자가 볼 수 있으므로 서버에서 사용해야 합니다. JSON은 중괄호가 많아 어렵게 보이지만 이름과 값의 묶음이라고 생각하면 됩니다.
API 자체를 더 자세히 이해하려면 바이브코딩 API 연결: 초보자가 알아야 할 기본 흐름을 함께 읽어보세요.
프로젝트 파일과 설치에 관한 용어
| 용어 | 초보자용 뜻 | 확인할 질문 |
|---|---|---|
| 라이브러리·패키지 | 다른 사람이 만든 재사용 가능한 코드 묶음 | 이 패키지가 정말 필요한가? |
| 의존성 | 프로젝트 실행에 필요한 다른 코드와의 관계 | 버전이 서로 충돌하지 않는가? |
| 터미널 | 글자로 명령을 입력해 컴퓨터에 작업을 시키는 창 | 지금 어느 폴더에서 실행 중인가? |
| 빌드 | 작성한 코드를 배포 가능한 형태로 준비하는 과정 | 빌드 오류가 먼저 발생하지 않았는가? |
| 배포 | 내 컴퓨터의 앱을 다른 사람이 접속할 환경에 올리는 일 | 공개 주소에서 다시 테스트했는가? |
패키지를 설치하면 프로젝트 폴더 안에 관련 파일이 추가되고, 어떤 버전을 쓰는지 기록됩니다. 의존성 오류는 내 코드가 틀렸다기보다 필요한 패키지의 버전이나 설치 상태가 맞지 않을 때도 생깁니다.
변경·오류·주소를 관리하는 용어
| 용어 | 초보자용 뜻 | 확인할 질문 |
|---|---|---|
| Git | 코드 변경 이력을 저장하고 비교하는 도구 | 정상 상태를 커밋했는가? |
| 저장소 | Git으로 관리하는 파일과 변경 이력의 공간 | 비밀 파일이 포함되지 않았는가? |
| 커밋 | 다시 확인하거나 돌아갈 수 있게 남긴 변경 지점 | 무엇이 정상인지 메시지에 적었는가? |
| 로그·디버깅 | 실행 기록과 재현 조건을 따라 오류 원인을 좁히는 과정 | 첫 오류를 같은 순서로 다시 만들 수 있는가? |
| 도메인·DNS | 사람이 읽는 웹 주소를 실제 서버 위치에 연결하는 체계 | 공개 주소가 올바른 서버를 가리키는가? |
Git은 GitHub와 같은 뜻이 아닙니다. Git은 내 컴퓨터에서도 변경을 기록할 수 있는 도구이고, GitHub는 저장소를 인터넷에서 보관하고 협업하는 서비스 중 하나입니다. 로그는 오류를 해결하는 단서이며, 디버깅은 무작정 코드를 바꾸는 일이 아니라 단서를 따라 원인을 좁히는 과정입니다. 배포 서비스에서 앱이 정상이어도 DNS 연결이 잘못되면 사용자는 사이트에 들어오지 못합니다.
실전 기준: 용어를 외우지 않고 사용하는 법
새 용어를 만나면 정의, 현재 프로젝트의 위치, 확인할 질문 세 가지만 적으세요. 예를 들어 빌드라면 “배포 가능한 형태로 준비하는 과정”, “package.json의 build 명령”, “로컬에서 빌드가 성공하는가?”로 기록합니다.
AI 설명이 어려우면 다음처럼 물어보세요.
이 용어가 지금 화면, 서버, 데이터베이스 중 어디에 해당하는지 알려줘. 실패했을 때 사용자가 보는 증상과 먼저 확인할 파일도 함께 설명해줘.
용어를 실제 파일과 오류에 연결하면 사전적 정의보다 오래 기억할 수 있습니다. 이 글의 20개를 모두 암기할 필요도 없습니다. AI가 “환경변수에 API 키를 넣고 서버에서 요청한다”고 말했을 때, 비밀값을 화면이 아닌 서버 쪽에 보관한다는 흐름만 이해하면 충분합니다.
바이브코딩 용어 최종 점검
바이브코딩 용어를 배우는 목적은 전문가처럼 말하기 위해서가 아니라 AI의 설명과 오류 메시지에서 문제 위치를 찾기 위해서입니다. 프론트엔드·백엔드·API·DB·환경변수·Git·배포의 관계를 한 문장씩 설명할 수 있는지 확인하세요.
모르는 단어가 나오면 “이 프로젝트에서 어느 파일과 연결되고, 사용자가 보는 결과에 어떤 영향을 주는가”를 물어보세요. 정의와 실제 위치를 함께 기록하면 같은 오류를 다시 만났을 때 검색어와 질문이 훨씬 구체적이 됩니다.
추가 정의가 필요할 때는 MDN Web Docs 용어집에서 확인하고, 내 프로젝트에서 쓰인 뜻을 바이브코딩 용어 노트에 한 줄로 다시 적어두면 좋습니다.
코딩을 어느 정도 배워야 하는지 아직 고민된다면 바이브코딩 하려면 코딩을 배워야 할까?를 먼저 읽어보세요. 이제 AI에게 구현을 부탁할 준비가 되었다면 다음 글인 AI 코딩 질문 방법: 부탁 전 5줄 정리로 이어가세요. 앱을 공개한 뒤의 관리가 궁금하다면 바이브코딩 배포와 운영: 초보자가 놓치기 쉬운 현실에서 확인할 수 있습니다.
바이브코딩 전체 순서 보기
바이브코딩 뜻, 하는법, 도구 선택, API 연결, 데이터베이스, 배포 흐름은 바이브코딩 가이드에서 이어서 볼 수 있습니다.
