오토프로그2강: AI 시대의 기본 용어
문법은 몰라도 개념은 알아야 해요
오늘 끝나면 이런 걸 갖게 돼요
다음 강에서 쓸 작업 지시문 하나가 생겨요. 프롬프트, 프론트엔드, 백엔드만 알면 첫 페이지를 부탁할 수 있어요.
바로 써볼까요?
먼저 claude.ai에 로그인하세요. 이것만 직접 하시면 프롬프트 정리는 클로드가 해요.
클로드 코드는 다음 강에서 설치할 도구예요. 지금은 클로드에게 이렇게 말하세요.
내가 자기소개 웹페이지를 만들려고 해.프론트엔드에는 이름, 하는 일, 연락처를 보여주고 싶어.백엔드는 아직 만들지 않을 거야.이 내용을 클로드 코드에 넣을 프롬프트로 정리해줘.코드는 쓰지 말고, 완성된 프롬프트만 보여줘.
클로드가 요구를 작업 지시문으로 묶어 줘요. 답변은 다음 강에서 쓸 수 있게 메모장이나 메모 앱에 복사해 두세요.
1. 프롬프트: AI에게 주는 주문서
카페에서 “아이스 아메리카노, 연하게, 얼음 많이”라고 주문해 볼게요. 프롬프트(Prompt, AI에게 주는 지시문)는 이 주문서와 같아요.
“웹페이지 만들어줘”보다 들어갈 내용과 원하는 모습을 함께 말하면 결과가 더 또렷해져요. 위에서 클로드에게 보낸 문장 전체가 프롬프트예요.
2. 프론트엔드: 손님이 보는 곳
식당에 들어가면 메뉴판, 테이블, 주문 화면이 보여요. 프론트엔드(Frontend, 사용자에게 보이는 화면)는 이처럼 손님이 보는 곳이에요.
유튜브의 재생 버튼, 동영상 썸네일, 댓글 입력창처럼 눈에 보이고 누를 수 있는 부분을 말해요. 다음 강에서는 자기소개 페이지의 프론트엔드부터 준비해요.
3. 백엔드: 뒤에서 처리하는 곳
식당 주방은 손님 눈에 잘 보이지 않지만 주문받은 음식을 만들어요. 백엔드(Backend, 화면 뒤에서 데이터를 처리하는 부분)도 같은 역할을 해요.
유튜브에서는 영상을 저장하고, 조회수를 계산하고, 댓글을 불러와요. 첫 자기소개 페이지에는 꼭 필요하지 않으니 잠시 미뤄둘게요.
| 구분 | 프론트엔드 | 백엔드 |
|---|---|---|
| 보이는가 | 화면에서 보여요 | 화면 뒤에서 일해요 |
| 유튜브 예시 | 재생 버튼, 썸네일, 댓글창 | 영상 저장, 조회수 계산, 댓글 불러오기 |
| 식당 비유 | 메뉴판과 테이블 | 주방과 냉장고 |
더 알아보기: 용어 사전
토큰: AI가 글을 읽는 단위
편의점 계산대가 상품을 하나씩 찍듯이, AI는 글을 작은 조각으로 나눠 처리해요. 이 조각을 토큰(Token)이라고 해요.
영어는 대략 단어 하나가 토큰 하나예요. Hello는 1토큰이고, 안녕하세요는 2~3토큰 정도예요.
AI를 부품처럼 가져다 쓰는 API에서는 토큰 수에 따라 비용이 매겨져요. claude.ai 같은 채팅 서비스는 무료 플랜이나 월정액을 사용하므로 토큰당 요금을 따로 내지 않아요.
모델: AI의 두뇌 종류
모델(Model)은 AI의 두뇌 종류를 뜻해요. 같은 프롬프트를 줘도 모델에 따라 결과가 달라질 수 있어요.
Claude에는 Sonnet, Opus, Haiku 갈래가 있어요. 이 글을 쓴 2026년 7월에는 이 강의에서 Claude Sonnet 5를 주로 썼어요. Claude는 Anthropic(앤스로픽)이 만들었고, 다른 모델로는 OpenAI의 GPT와 Google의 Gemini가 있어요.
API: 프로그램끼리 대화하는 창구
패스트푸드점에서는 손님이 주방에 직접 들어가지 않고 카운터에 주문해요. API(Application Programming Interface, 프로그램끼리 요청과 응답을 주고받는 규칙)는 이 카운터와 같아요.
브라우저가 날씨를 요청하면 기상청 API가 서버(데이터를 저장하고 처리하는 컴퓨터)에 전달하고 결과를 돌려줘요. “날씨 API를 붙여줘”라는 말은 이 창구를 연결해 달라는 뜻이에요.
데이터 저장소: 칠판, 포스트잇, 서류 캐비닛
메모리(Memory)는 새로고침하면 지워지는 칠판과 같아요. localStorage(로컬스토리지)는 내 브라우저에 남는 포스트잇이에요. DB(Database, 데이터베이스)는 여러 기기에서 꺼내 볼 수 있는 서류 캐비닛이에요.
| 저장소 | 비유 | 언제 사라지나 | 다른 기기에서 접근 |
|---|---|---|---|
| 메모리 | 칠판 | 새로고침하면 사라짐 | 불가능 |
| localStorage | 포스트잇 | 직접 지우기 전까지 유지 | 불가능 |
| DB | 서류 캐비닛 | 직접 삭제하기 전까지 유지 | 가능 |
웹, 앱, 자동화 봇
웹(Web)은 크롬이나 사파리 같은 브라우저에서 열어요. 앱(App)은 스마트폰에 설치해요. 자동화 봇(Bot)은 화면 없이 정해진 일을 반복해요.
이 강의는 결과를 확인하기 쉬운 웹부터 시작해요. 18강에서는 자동화 봇을, 19강에서는 웹을 앱처럼 설치하는 PWA(Progressive Web App, 설치할 수 있는 웹 기술)를 다뤄요.
이번 강에서 기억할 것
- 프롬프트는 AI에게 주는 주문서예요.
- 프론트엔드는 눈에 보이는 화면이에요.
- 백엔드는 화면 뒤에서 저장하고 처리하는 부분이에요.
세 단어를 외울 필요는 없어요. 다음 강에서 “프론트엔드만 먼저 만들어줘”라고 말할 수 있으면 충분해요.
이런 분께 추천해요
AI에게 무엇을 어떻게 말해야 할지 막막한 사장님·직장인·예비창업자에게 맞아요. 개발팀과 이야기할 때 화면과 뒤쪽 작업을 구분하고 싶은 분에게도 도움이 돼요.
이 강의, 영상으로도 있어요
프롬프트, 토큰, 모델, 프론트엔드, 백엔드, API, 저장소 일곱 개를 5분 영상으로 정리했어요.
영상이 더 편하시면 유튜브에서 이어서 보세요.
참고 링크
- Claude AI (무료 체험): claude.ai
- Anthropic 공식 사이트: anthropic.com
- 프롬프트 엔지니어링 가이드 (Anthropic): 프롬프트 엔지니어링 개요
- 바이브 코딩 스터디 1강: 오토프로그 랩스 — 바이브 코딩이 뭔가요?
다음 강
3강: 개발 환경 세팅에서는 도구를 설치하고 로그인한 뒤 첫 페이지를 만들어요.