코딩을 배우지 않아도 앱을 만들 수 있는 시대
2023년까지만 해도 "앱 개발"은 최소 6개월 이상의 코딩 교육이 필요한 전문 영역이었습니다. 이제 바이브코딩이 그 문턱을 완전히 바꿨습니다.
바이브코딩(Vibe Coding)이란 코드를 직접 작성하지 않고, AI에게 원하는 것을 설명해서 AI가 코드를 생성하도록 하는 방식입니다. "감각(Vibe)"으로 코딩한다는 의미로, 기술 지식보다 무엇을 만들지에 대한 명확한 아이디어가 더 중요합니다.
이번 수업에서는 Cursor와 Claude를 활용해서 코딩 지식 없이도 실제로 동작하는 웹 페이지를 만들어봅니다.
바이브코딩으로 만들 수 있는 것들
코딩 경험이 전혀 없어도 오늘 수업 2시간 안에 만들 수 있는 것들입니다.
- 나만의 링크 모음 페이지 (인스타그램 바이오 링크 대체)
- 개인 소개 페이지 (온라인 명함)
- 간단한 할 일 목록 앱
- 상품 소개 랜딩 페이지
- 간단한 계산기 (예: 배송비 계산, 할인율 계산)
- 이미지 슬라이드쇼 갤러리
Cursor 설치 및 첫 사용
Cursor는 AI가 통합된 코드 편집기입니다. Microsoft의 VS Code를 기반으로 만들어졌기 때문에, 기존에 VS Code를 써본 분이라면 바로 익숙하게 사용할 수 있습니다.
설치 방법:
- cursor.com 접속
- 운영체제에 맞는 버전 다운로드 (Windows/Mac)
- 설치 후 실행, Google 또는 GitHub 계정으로 로그인
- 무료 플랜으로 시작 (매달 일정 횟수 AI 요청 무료)
첫 사용 흐름:
- 새 폴더 만들기 (예: my-page)
- Cursor에서 그 폴더 열기
- 오른쪽 채팅 창에서 AI에게 요청
- 생성된 코드 파일 저장
- 브라우저로 결과 확인
Bolt.new — 설치 없이 브라우저에서 바로
Cursor 설치가 어렵다면 Bolt.new를 사용합니다. 브라우저에서 바로 실행되고, 만들어진 웹 앱이 즉시 미리보기로 보입니다. 초보자에게 가장 권장하는 도구입니다.
사용 방법: bolt.new 접속 → 원하는 것을 한국어로 입력 → AI가 바로 동작하는 앱을 만들어줌 → 코드 수정 요청도 채팅으로 진행
AI에게 잘 요청하는 방법
바이브코딩의 핵심 기술은 AI에게 정확히 설명하는 것입니다.
나쁜 요청: "웹 페이지 만들어줘" 좋은 요청: "배경은 크림색, 중앙에 프로필 사진 원형, 아래에 이름과 직업, SNS 아이콘 4개(인스타그램, 유튜브, 카카오, 네이버 블로그), 아래에 공방 위치와 연락처. 폰트는 부드럽고 따뜻한 느낌. 모바일에서도 잘 보이게."
단계별 요청 전략: 한 번에 완성품을 요청하는 것보다 단계를 나눠서 하나씩 완성해가는 것이 훨씬 좋은 결과를 만들어냅니다.
- 1단계: "기본 구조만 먼저 만들어줘"
- 2단계: "배경색과 폰트를 바꿔줘. 더 따뜻한 느낌으로"
- 3단계: "연락처 버튼을 눌렀을 때 카카오톡이 열리게 해줘"
- 4단계: "모바일에서 볼 때 글씨가 너무 작아. 조정해줘"
이렇게 하면 매 단계마다 결과를 확인하면서 원하는 방향으로 가져갈 수 있습니다.
수정 요청 잘 하는 법
처음 나온 결과가 마음에 들지 않아도 괜찮습니다. 바이브코딩에서 수정은 매우 자연스러운 과정입니다.
- "배경 색을 좀 더 어둡게 해줘"
- "버튼이 너무 크다. 반으로 줄여줘"
- "이 부분은 가운데 정렬로 바꿔줘"
- "사진 아래에 설명 텍스트 추가해줘"
- "이 레이아웃을 두 칸 나란히로 바꿔줘"
구체적으로 무엇이 어디서 어떻게 바뀌어야 하는지를 말하면 AI가 정확히 수정합니다.
완성한 페이지 공유하는 방법
Bolt.new나 Cursor로 만든 웹 페이지를 다른 사람과 공유하는 가장 쉬운 방법은 Netlify Drop입니다.
- app.netlify.com/drop 접속
- 완성된 파일 폴더를 드래그 앤 드롭
- 즉시 인터넷 주소(URL)가 생성
- 그 주소를 인스타그램 바이오나 카카오톡에 붙여넣기
무료로, 추가 설정 없이, 전 세계 어디서나 접속 가능한 개인 페이지가 생깁니다.
실습 과제
오늘 수업 2시간 안에 자신의 간단한 개인 소개 페이지를 완성하고 Netlify에 배포합니다.
포함할 내용: 이름, 하는 일, 간단한 소개 한 줄, 연락처 또는 SNS 링크 2개 이상
완성된 페이지 URL을 단체 채팅방에 공유합니다.
