Riilog
전체시리즈
Back
ESSAY비개발자를 위한 바이브코딩 안내서
NOV 24, 2025

Part 1.3 - 꼭 알아야 할 개발 용어 20개

바이브코딩 하다 보면 모르는 단어들이 계속 나옵니다

"프론트엔드에서 API 호출해서 백엔드로 보내고, 데이터베이스에 저장한 다음..."

처음 들으면 외계어 같습니다. 제가 마치 의학용어나 법학용어를 접하면 저 또한 저런 기분이 들거에요. 근데 이 용어들을 대충이라도 알아야 AI한테 제대로 요청할 수 있습니다. AI가 "프론트엔드에서 처리할까요, 백엔드에서 처리할까요?" 하고 물어보면 뭔 소린지는 알아야 하잖아요?

오늘은 비개발자가 바이브코딩할 때 꼭 알아야 할 용어 20개를 정리해드리겠습니다. 외울 필요 없습니다. 나중에 모르는 단어 나오면 여기 와서 찾아보세요.

기본 구조 관련

1. 프론트엔드 (Frontend)

한 마디로: 눈에 보이는 부분

화면에서 보는 모든 것이 프론트엔드입니다. 버튼, 글자, 이미지, 입력창, 메뉴... 이런 것들이요.

인스타그램 앱을 켜면 피드가 보이죠? 하트 버튼 누르면 빨개지죠? 이게 다 프론트엔드입니다

AI한테 이럴 때 씀:

  • "로그인 버튼 디자인 바꿔줘" → 프론트엔드

  • "화면에 로딩 표시 넣어줘" → 프론트엔드

  • "모바일에서도 잘 보이게 해줘" → 프론트엔드

2. 백엔드 (Backend)

한 마디로: 눈에 안 보이는 뒷단

프론트엔드가 얼굴이라면, 백엔드는 뇌예요. 데이터 저장하고, 계산하고, 처리하는 부분입니다

인스타그램에서 하트 누르면 그 정보가 어딘가에 저장되어야 하잖아요. 다음에 앱 켜도 하트가 눌려있으려면요. 그 "저장하는 곳"이 백엔드입니다

AI한테 이럴 때 씀:

  • "회원 정보 저장해줘" → 백엔드

  • "로그인 확인하는 로직 만들어줘" → 백엔드

  • "결제 처리해줘" → 백엔드

3. 풀스택 (Fullstack)

한 마디로: 프론트엔드 + 백엔드 둘 다

"풀스택 개발자"라고 하면 앞단 뒷단 둘 다 할 줄 아는 사람입니다. 요즘은 AI까지 해야 풀스택이라고 부르는 거 같던데..

바이브코딩으로 서비스 만들면 풀스택 개발을 하는 거예요

4. 서버 (Server)

한 마디로: 24시간 켜져 있는 컴퓨터

우리 컴퓨터는 끄면 꺼지잖아요. 근데 네이버는 24시간 접속 가능하죠. 어딘가에 항상 켜져 있는 컴퓨터가 있기 때문입니다. 그게 서버입니다

5. 클라이언트 (Client)

한 마디로: 서버한테 뭔가 요청하는 쪽

자신의 핸드폰이나 컴퓨터가 클라이언트입니다. 네이버 서버한테 "메인 페이지 보여줘" 하고 요청하는 거죠.

"클라이언트 사이드"라고 하면 여러분 브라우저에서 실행되는 코드를 말합니다
"서버 사이드"라고 하면 서버에서 실행되는 코드고요

데이터 관련

6. 데이터베이스 (Database, DB)

한 마디로: 데이터 저장소

엑셀 파일 생각하시면 됩니다. 회원 정보, 게시글, 댓글... 이런 것들을 표처럼 저장해두는 곳입니다

자주 듣게 될 이름들:

  • Supabase: 요즘 바이브코딩에서 제일 인기. 쉬움.

  • Firebase: 구글꺼. 이것도 많이 씀. 하지만 개인적으로는 비추합니다.

  • MongoDB: 좀 다른 방식. 나중에 알아도 됨.

  • PostgreSQL, MySQL: 전통적인 방식. Supabase가 PostgreSQL 기반임.

7. API (Application Programming Interface)

한 마디로: 프로그램끼리 대화하는 방법

좀 어려운 개념인데, 예시로 설명해보겠습니다.

제가 날씨 앱을 만들고 싶어요. 근데 날씨 정보를 직접 수집할 순 없잖아요. 그래서 기상청한테 "오늘 서울 날씨 알려줘"라고 요청하면, 기상청이 "맑음, 25도"라고 답해줍니다

이때 "요청하고 답 받는 규칙"이 API예요.

실제로 이렇게 생겼어요:

요청: GET https://api.weather.com/seoul
응답: { "weather": "맑음", "temp": 25 }

자주 쓰는 표현:

  • "API 호출한다" = 다른 서비스한테 데이터 달라고 요청한다

  • "API 만든다" = 내 서비스가 데이터 주는 창구를 만든다

8. JSON

한 마디로: 데이터 주고받는 형식

API로 데이터 주고받을 때 주로 JSON 형식을 씁니다:

{
  "name": "김철수",
  "age": 30,
  "email": "kim@email.com"
}

그냥 정보를 정리하는 양식이라고 생각하세요. 중괄호 안에 "이름": "값" 형태로 씁니다.

코드 관련

9. 프레임워크 (Framework)

한 마디로: 개발 뼈대

집 지을 때 철골 구조물 먼저 세우잖아요. 프레임워크가 그거예요. 기본 구조를 제공해줘서, 거기에 살만 붙이면 되게 해주는 거죠.

자주 듣게 될 이름들:

  • React: 프론트엔드. 제일 많이 씀.

  • Next.js: React 기반. 프론트 + 백엔드 같이.

  • Vue: React 대안. 하지만 초보자에게는 추천하지 않음. 자료가 풍부한 React를 추천 ( 저 Vue좋아합니다 )

AI한테 "React로 만들어줘" 이런 식으로 요청하게 될 겁니다

10. 라이브러리 (Library)

한 마디로: 가져다 쓰는 코드 모음

남이 만들어둔 코드를 가져다 쓰는 거예요. 바퀴를 다시 발명할 필요 없습니다. 공부 목적이라면 해도 좋습니다. 저는 개인적으로 프로덕트를 빨리 만들고 나서, 회고시간 혹은 개인시간에 바닥부터 만들곤 합니다.

예를 들어 달력 기능이 필요하면, 처음부터 만들 필요 없이 "달력 라이브러리" 가져다 쓰면 됩니다.

프레임워크 vs 라이브러리 차이:

  • 프레임워크: 큰 뼈대. 그 안에서 내가 코드를 씀. 일정 양식이 이미 갖춰져있음.

  • 라이브러리: 내가 필요할 때 갖다 씀. 부품 같은 거.

11. 의존성 (Dependency)

한 마디로: 내 프로젝트가 쓰고 있는 외부 코드들

React 쓰면 React가 의존성입니다. 달력 라이브러리 쓰면 그것도 의존성이고요.

package.json 파일에 내 프로젝트의 의존성 목록이 있습니다. 나중에 "의존성 설치해"라는 말을 듣게 될 텐데, npm install 명령어 치면 돼요.

12. 패키지 매니저 (Package Manager)

한 마디로: 라이브러리 설치/관리 도구

대표적인 게 npm이에요. Node Package Manager의 약자.

라이브러리 설치할 때 :

npm install 라이브러리이름

비슷한 거로 yarn, pnpm도 있어요. 일단 npm만 알면 됩니다.

도구 관련

13. IDE (Integrated Development Environment)

한 마디로: 코드 편집기

메모장으로도 코드 쓸 수 있어요. 근데 불편하잖아요. IDE는 코드 쓰기 편하게 만들어진 프로그램입니다. 힙하게 코딩 하자구요.

바이브코딩에서 많이 쓰는 거:

  • VS Code: 무료. 제일 많이 씀.

  • Cursor: VS Code 기반인데 AI가 붙어있음. 바이브코딩 최적화.

14. 터미널 / CLI (Command Line Interface)

한 마디로: 글자로 명령하는 창

까만 화면에 글자만 나오는 거 있죠. 그거예요.

마우스로 클릭하는 대신 키보드로 명령어 쳐서 컴퓨터한테 시키는 거예요.

cd my-project    (폴더 이동)
npm install      (라이브러리 설치)
npm run dev      (개발 서버 실행)

처음엔 무섭게 느껴지는데, 몇 개만 외우면 금방 익숙해져요.

15. Git

한 마디로: 코드 버전 관리 도구

문서 작업할 때 "최종.docx", "최종_진짜최종.docx" 이런 식으로 저장하신 적 있죠? Git은 그거 자동으로 해주는 겁니다. 이거 제가 전 글에서도 계속 말씀드렸는데, 꼭 쓰시길 바랍니다. 꼭 쓰시길 바랍니다. 꼭 쓰시길 바랍니다. Git은 따로 시간을 내서 연재를 할텐데, 그 때 꼭 따라하면서 실습도 해 보시길 바랍니다. 실습도 꼭 해 보시길 바랍니다.

코드 수정할 때마다 "저장"(커밋)해두면, 나중에 "3일 전 버전으로 돌아가줘"가 가능합니다. 제가 교육을 하면서 굉장히 애매했던 부분이 '깃헙, 깃을 알려줘야 하나?...' 였습니다. 바이브코딩으로 프로덕트를 만들기에도 엄청 바쁜 분들이신데, 깃까지 알려주는게 선뜻 쉽지는 않더라구요.

GitHub는 Git으로 관리하는 코드를 온라인에 올려두는 곳입니다.

배포 관련

16. 배포 (Deploy)

한 마디로: 인터넷에 올려서 다른 사람도 볼 수 있게 하기

지금까지 로컬 컴퓨터에서만 볼 수 있었잖아요. 배포하면 주소(URL)가 생기고, 누구나 접속할 수 있어요.

자주 쓰는 배포 서비스:

  • Vercel: Next.js 만든 회사. 쉬움. 무료.

  • Netlify: Vercel이랑 비슷.

  • Cloudflare Pages: 이것도 비슷.

  • Railway: Vercel과 비슷한 방식으로 배포 가능. 저렴하게 사용가능

17. 호스팅 (Hosting)

한 마디로: 내 서비스를 서버에 올려두는 것

배포랑 비슷한 말이에요. "어디서 호스팅하세요?"라고 물으면 "Vercel이요"라고 대답하면 돼요.

18. 도메인 (Domain)

한 마디로: 인터넷 주소

google.com, naver.com 같은 거요.

배포하면 처음엔 my-app.vercel.app 같은 주소가 생겨요. 근데 자신만의 주소(예: myservice.com)를 쓰고 싶으면 도메인을 사야 해요. 1년에 보통 1-2만원 정도.

19. 환경 변수 (Environment Variable)

한 마디로: 비밀 정보 저장하는 곳

API 키, 비밀번호 같은 건 코드에 직접 쓰면 위험해요. 누가 코드 보면 다 보이니까요.

그래서 환경 변수라는 곳에 따로 저장해요. .env 파일에 이렇게 써요:

API_KEY=abcd1234
DATABASE_URL=https://...

코드에서는 process.env.API_KEY 이런 식으로 불러와요.

중요: .env 파일은 절대 GitHub에 올리면 안 돼요!

20. 로컬 / 로컬호스트 (Local / Localhost)

한 마디로: 내 컴퓨터

"로컬에서 돌려봐"라는 말은 "네 컴퓨터에서 실행해봐"라는 뜻이에요.

localhost:3000 이런 주소 보신 적 있죠? 이건 내 컴퓨터에서만 접속되는 주소예요. 다른 사람은 못 봐요.

마무리

20개나 되니까 한 번에 다 외우려고 하지 마세요.

바이브코딩 하다가 모르는 단어 나오면 여기 와서 찾아보세요. 그러다 보면 자연스럽게 익혀집니다. 여기까지 다시 오는 거 힘들면 그냥 구글링하거나 LLM한테 바로 물어보세요. 더 자세히 알려줄겁니다.

중요한 건 이 단어들이 나왔을 때 "뭔 소리야" 하고 멈추지 않는 거예요. 대충이라도 알면 AI한테 더 구체적으로 질문할 수 있거든요.

Thank you for reading.

Based in Seoul
Since 2024