"뉴스 요약해서 경쟁사 관련된 것만 정리해서 매일 오전 9시에 알람 보내줘." AI가 뭔가 만들어줬어요. py 파일이 생겼고, 실행하니까 잘 돌아가요. 근데 컴퓨터 끄니까 작동이 멈추는데요?
맞아요. 이거 진짜 많이들 겪는 상황이에요.
분명 AI가 만들어줬고, 실행하면 잘 돼요. 근데 컴퓨터 안 켜놓으면 안 돌아가요. "매일 9시에 자동으로"가 아니라 "내가 실행해야만" 돌아가는 거예요.
왜 이렇게 되는 걸까요?
AI가 만들어준 건 "로컬에서 돌아가는 스크립트"예요. 근데 우리가 원한 건 "서버에서 자동으로 돌아가는 서비스"였어요.
프로그램 종류가 다르면, 만들어지는 것 자체가 달라요. 이걸 모르면 "되긴 되는데 내가 원한 게 아닌" 상황이 계속 반복돼요.
오늘부터 PART 3: 기술 개념 - 큰 그림이 시작돼요.
알고 가기
🚫 이거 모르면: "로그인 만들어줘" → AI가 뭘 만든 건지 모름 → 수정 요청도 못 함 ✅ 이거 알면: "프론트에서 백엔드 API 호출하는 부분 고쳐줘"라고 정확히 지시 가능
첫 번째로 "프로그램의 종류"를 배워볼게요.
이 글을 읽고 나면
- 프로그램 종류(웹앱, 네이티브앱, 자동화)를 구분할 수 있다
- 이 시리즈에서 웹앱을 만든다는 걸 이해한다
- AI한테 '브라우저에서 돌아가는 웹앱으로 만들어줘'라고 말할 수 있다
프로그램의 종류는 왜 알아야 하나요?
같은 기능이라도 어디서 돌아가게 만드느냐에 따라 완전히 다르게 만들어져요.
핵심은 "어디서 돌아가느냐"예요.
AI한테 프로그램 만들어달라고 할 때:
- "웹으로 만들어줘" vs "모바일 앱으로 만들어줘"
- "브라우저에서 돌아가게" vs "자동으로 실행되게"
이 한 마디 차이가 완전히 다른 결과를 만들어요.
큰 그림: 프로그램의 종류
프로그램은 크게 두 가지로 나눌 수 있어요.
어디서 돌아가는지가 중요해요: 웹(브라우저) vs 앱(폰) vs 봇(서버)
바이브 코더가 주로 만드는 건:
- 웹 서비스 - 가장 많이 만듦. 배포도 쉬움
- 자동화/봇 - 반복 작업 대신 처리. 훅에서 본 "뉴스 요약 봇" 같은 것
- 모바일 앱 - 스마트폰 전용 기능 필요할 때
- 데스크톱 앱 - 요즘은 웹으로 대체되는 추세라 우선순위 낮음
하나씩 자세히 볼게요.
1. 웹 서비스
브라우저에서 돌아가는 프로그램.
웹 서비스의 예시
익숙한 서비스들로 볼게요.
AI한테 요청할 때
🎯 왜 정확히 말해야 할까요?
"앱 만들어줘"라고만 하면 AI는 추측해요. 근데 AI가 모바일 앱으로 만들었는데, 여러분은 웹을 원했다면? 처음부터 다시 만들어야 해요.
프로그램 종류가 다르면 구조가 완전히 달라요. 웹 코드를 모바일 앱 코드로 바꾸는 건 "새로 만들기"예요.
그래서 처음부터 정확히 말해야 해요.
❌ "앱 만들어줘" → AI가 추측해서 만듦. 나중에 바꾸려면 전부 다시.
✅ "브라우저에서 돌아가는 웹앱으로 만들어줘" → AI가 정확히 이해. 처음부터 제대로 만들어짐.
✅ "웹 서비스로 만들 건데, React 써줘" → 기술 스택까지 지정하면 더 명확함.
막연한 "앱 만들어줘" vs 구체적인 "웹앱 만들어줘"
2. 모바일 앱
스마트폰에 설치해서 쓰는 프로그램.
모바일 앱의 예시
웹 vs 모바일 앱, 뭘 선택해야 할까요?
바이브 코더 초보라면 웹부터 시작하세요. 웹이 만들기도 쉽고, 배포도 쉽고, 고치기도 쉬워요.
AI한테 요청할 때
🎯 iOS와 Android, 한 번에 만들 수 있나요?
네, "크로스 플랫폼" 기술을 쓰면 한 번 만들어서 둘 다 돌아가게 할 수 있어요. 대표적인 게 React Native, Flutter예요.
이걸 모르면:
- "iOS 앱 만들어줘" → iOS만 됨
- "아, Android도 필요한데?" → 또 만들어야 함
이걸 알면:
- "React Native로 iOS/Android 둘 다 돌아가게 만들어줘" → 한 번에 해결
❌ "앱 만들어줘" → 웹인지 모바일인지 불명확
✅ "모바일 앱으로 만들어줘. React Native 써서" → 모바일 앱이고, 기술 스택도 명확
✅ "iOS랑 Android 둘 다 돌아가게 만들어줘" → 크로스 플랫폼 요구사항 명확
3. 자동화/봇
사람이 직접 안 열어도 자동으로 실행되는 프로그램.
화면이 없고, 정해진 작업을 자동으로 처리해요.
자동화/봇의 예시
AI한테 요청할 때
🎯 자동화 vs 웹, 어떻게 구분해서 요청하나요?
핵심은 화면이 필요한지, 자동으로 돌아가는지예요.
웹: 사람이 접속해서 버튼 누르고 사용 자동화: 정해진 시간에 자동으로 실행, 화면 없음
이걸 명확히 안 하면:
- "뉴스 모아주는 거 만들어줘" → AI가 웹으로 만들 수도 있음
- 원한 건 "매일 아침 자동으로" 실행인데, 웹으로 만들어지면 매번 접속해야 함
❌ "뉴스 모아주는 거 만들어줘" → 웹으로 만들지, 자동화로 만들지 불명확
✅ "매일 아침 자동으로 뉴스 수집해서 슬랙으로 보내주는 스크립트 만들어줘" → 자동화/봇라는 게 명확 → 실행 시간, 결과 전달 방식까지 명확
✅ "Python으로 자동화/봇 만들 건데, 매일 밤 12시에 실행되게 해줘" → 언어, 실행 시간까지 명확
하이브리드: 웹과 앱의 중간
요즘엔 "웹 기술로 만들었지만 앱처럼 동작"하는 것도 있어요.
바이브 코더 입장에서는:
- PWA: 웹으로 만들 때 "나중에 앱처럼 쓸 수 있게 해줘"라고 요청
- 크로스 플랫폼: 모바일 앱 만들 때 "React Native로 만들어줘"라고 요청
이것만 알면 돼요. 지금은 "이런 것도 있구나" 정도만 알아두세요. 나중에 자세히 다룰게요.
실제 대화 예시: 프로그램 종류 정하기
바이브 코더가 AI와 어떻게 대화하는지 상황극으로 보여드릴게요.
예시: 할 일 관리 서비스 만들기
이게 기술적 대화예요.
"앱 만들어줘"가 아니라:
- "웹으로 할지 모바일로 할지 추천해줘"
- [AI 추천 듣고]
- "웹으로 가자"
- "기술 스택 추천해줘"
- [AI 추천 듣고]
- "React + Supabase로, 브라우저에서 돌아가는 웹앱으로 만들어줘"
- [만들어지면] 기능 단위로 직접 확인
- 안 되는 부분 발견하면 피드백
이렇게 단계별로 정하고, 확인하고, 피드백하면서 대화하는 거예요.
정리: 프로그램 종류별 비교표
바이브 코더 초보라면: 1순위: 웹 서비스 2순위: 자동화/봇 3순위: 모바일 앱 (나중에)
오늘의 핵심 정리
셀프체크
오늘 배운 내용, 제대로 이해했는지 확인해볼까요?
□ 카카오톡은 무슨 앱인가요?
□ 노션 웹 버전은 무슨 앱인가요?
□ 이 시리즈에서는 주로 무엇을 만드나요?
(정답: 네이티브 앱 - 설치/알림/오프라인 지원 / 웹앱 - 설치 X, 브라우저 사용 / 웹앱 - 배포와 테스트가 쉬워서)
다음 글 예고
오늘은 프로그램의 종류를 배웠어요. "어디서 돌아가느냐"에 따라 웹, 모바일 앱, 자동화/봇로 나뉘고, AI한테 "브라우저에서 돌아가게" 같은 식으로 말할 수 있게 됐어요.
다음 글에서는 프론트엔드 vs 백엔드를 알아볼게요.
웹 서비스를 만든다고 했을 때:
- "화면에 보이는 부분"과 "뒤에서 처리하는 부분"이 나뉘어요
- AI한테 "로그인 UI는 프론트에, 인증 로직은 백엔드에 만들어줘"라고 말할 수 있게 돼요
- "백엔드 없이도 만들 수 있어?"라는 질문에 답을 알게 돼요
프로그램 종류를 알았으니, 이제 그 안의 구조를 알아볼 차례예요.
이 시리즈 로드맵
PART 1: 마인드셋 (4편) ✅ 완료!
[ 1~4편 ] AI는 신입사원, 바이브 코딩, 유능한 상사 되기
↓
PART 2: 도구 세팅 (5편) ✅ 완료!
[ 5~9편 ] Claude Code, 터미널, VS Code, Git, 환경 세팅
↓
PART 3: 기술 개념 - 큰 그림 (6편)
[ 10편 ] 프로그램의 종류 ← 지금 여기!
[ 11편 ] 프론트엔드 vs 백엔드
[ 12편 ] 데이터는 어디에 저장되나
[ 13편 ] 서비스들이 대화하는 방법: API
[ 14편 ] 프로젝트 구조
[ 15편 ] 데이터 흐름
↓
PART 4: 기술 개념 - 설계 (5편)
[ 16~20편 ] 자료구조, 아키텍처, 디자인 패턴, 상태 관리
↓
PART 5~7: 프로젝트 (12편)
PART 8: 독립 성장 (3편)
"앱 만들어줘"에서 "브라우저에서 돌아가는 웹앱으로 만들어줘"로. 이 한 마디 차이가 AI가 정확히 이해하는 차이예요.
궁금한 점이나 다뤘으면 하는 주제가 있으면 댓글로 남겨주세요!