방학에는 뭐다? 혼공학습단이다!
이번에도 모집공고 뜨자마자 신청했습니다.
다만 이번에는 바이브코딩만 단독 진행한다고 하네요.
고민할 필요가 없어서 오히려 좋아!
바이브 코딩(Vibe Coding)이란?
바이브 코딩(Vibe Coding)은 AI와 대화를 주고받으며 프로그램을 만드는 개발 방식입니다.
이 개념은 2025년 2월, 오픈AI 공동 창업자 안드레이 카파시(Andrej Karpathy)가 제안하며 주목받기 시작했습니다.
기존 코딩 방식과의 차이
기존 개발 방식에서는 HTML, CSS, JavaScript와 같은 언어 문법을 먼저 학습한 뒤 코드를 직접 작성하고 오류를 수정하는 과정을 반복해야 했습니다.
반면 바이브 코딩은 접근 방식이 다릅니다. 만들고 싶은 결과를 자연어로 설명하면 AI가 코드를 생성합니다. 예를 들어, “달력 웹 앱 만들어줘” 라고 요청하면 AI가 기본 구조와 기능을 포함한 코드를 만들어줍니다. 이후에는 디자인 변경이나 기능 추가처럼 수정이 필요한 부분만 요청하며 점진적으로 완성해 나갑니다.
바이브 코딩의 핵심 개념
바이브 코딩의 핵심은 코드를 직접 작성하는 능력보다 아이디어를 명확하게 전달하는 것입니다. 개발 언어 문법에 대한 이해가 부족하더라도 무엇을 만들고 싶은지가 분명하다면 AI를 활용해 프로그램을 구현할 수 있습니다. 이로 인해 개발 방식은 ‘코드를 작성하는 작업’에서 ‘AI와 협업하는 과정’으로 변화하고 있습니다.
AI 코딩 도구의 종류
AI 코딩 도구는 사용하는 방식에 따라 크게 모델 선택형과 전용 모델형으로 나눌 수 있습니다.
1) 모델 선택형 AI 코딩 도구
모델 선택형은 하나의 개발 도구 안에서 여러 AI 모델 중 원하는 모델을 선택해 사용하는 방식입니다.
대표적인 예시는 다음과 같습니다.
- Cursor
- Replit
- Windsurf
이러한 도구들은 코드 작성, 수정, 디버깅까지 하나의 환경에서 편리하게 사용할 수 있다는 장점이 있습니다. 특히 초보자에게는 별도 설정 없이 바로 시작할 수 있다는 점이 매력적입니다. 다만 단점도 존재합니다. 도구 자체의 사용료와 AI 모델 사용료를 이중으로 지불해야 하는 경우가 많습니다.
2) 전용 모델형 AI 코딩 도구
전용 모델형은 특정 AI 모델을 직접 설치하거나 연결해 사용하는 방식입니다.
대표적인 예시는 다음과 같습니다.
- Claude Code
- Gemini CLI
이 방식의 가장 큰 장점은 AI 모델 사용료만 지불하면 된다는 점입니다. 또한 로컬 환경에서 실행되기 때문에 내 PC의 파일과 프로젝트에 직접 접근할 수 있습니다. 대신 초기 설정이나 사용법은 모델 선택형 도구보다 다소 익숙해질 시간이 필요할 수 있습니다.
이러한 도구들은 대체로 터미널에 직접 명령어를 조작하는 CLI 방식으로 동작합니다. CLI(Command Line Interfave)는 명령 프롬프트(cmd)라고 하는 창에 텍스트로 직접 명령어를 입력해서 컴퓨터를 움직이는 방식입니다. CLI는 겉보기에는 어렵지만, 빠르고 가벼워서 특히 전문가가 서버를 관리하거나 반복 작업을 자동으로 처리할 때는 GUI보다 훨씬 효율적입니다.
AI 어시스턴트의 발전 과정
오늘날 우리가 사용하는 AI 어시스턴트는 하루아침에 등장한 기술이 아닙니다. 수십 년에 걸친 인공지능 연구의 축적을 통해 점진적으로 발전해 왔습니다.
1. 뉴럴 네트워크 (1940년대)
AI 연구의 출발점은 뉴럴 네트워크(Neural Network)입니다. 인간의 뇌 신경 구조를 단순화해 수학적으로 모델링한 방식으로, 기계가 입력과 출력을 연결해 학습할 수 있다는 개념이 이 시기에 제시되었습니다. 다만 계산 자원과 데이터가 부족해 실제 활용에는 한계가 있던 단계였습니다.
2. 딥러닝 (2010년대)
2010년대에 들어와 GPU 성능 향상과 대용량 데이터 활용이 가능해지면서 딥러닝(Deep Learning)이 본격적으로 발전했습니다. 신경망을 여러 층으로 쌓아 이미지 인식, 음성 인식 등에서 기존 방식보다 훨씬 뛰어난 성능을 보이기 시작했습니다.
3. 트랜스포머 (2017년, 구글)
2017년, 구글은 트랜스포머(Transformer) 구조를 발표했습니다. 이 기술은 문맥 전체를 한 번에 이해하는 방식으로, 자연어 처리 성능을 획기적으로 끌어올렸습니다. 이 구조는 이후 대부분의 언어 모델의 기반이 됩니다.
4. LLM (대규모 언어 모델)
트랜스포머 구조를 바탕으로 LLM(Large Language Model), 즉 대규모 언어 모델이 등장했습니다.
대표적인 예시는
- GPT 시리즈
- Claude
와 같은 AI 어시스턴트입니다.
이들은 방대한 텍스트 데이터를 학습해 사람과 자연스럽게 대화하고, 코딩·문서 작성·분석까지 수행할 수 있습니다.
AI 어시스턴트
- 합성곱 신경망(Conveolutional Nueural Network, CNN) : 이미지 속 특징을 스스로 학습하는 필터 기반의 계층 구조, 이미지 분류와 인식 분야에 활용
- 생성적 적대 신경망(Generative Adversaial Networks, GAN) : 생성자와 판별자가 경쟁하며 성능을 향상시키는 구조, 새로운 데이터 생성에 특화
- 오토인코더(Autoencoder, AE) : 인코더-디코더 구조의 자기지도 신경망, 데이터의 핵심 표현 추출과 복원이 강점
- 순환신경망(Recurrent Neural Network, RNN) : 시간적 순서가 있는 데이터의 패턴을 학습하는 순환 구조, 텍스트 처리와 시계열 예측에 특화
엔트로픽(Anthropic)과 클로드(Claude)
엔트로픽(Anthropic)은 오픈AI 출신 연구진이 AI 안전성을 목표로 설립한 회사입니다. 이 회사는 안전하고 신뢰할 수 있는 AI 개발을 지향하며 AI 모델 클로드(Claude)를 개발했습니다.
클로드는 명확한 지시 이해와 안정적인 응답을 강점으로 AI 코딩과 문서 작업 분야에서 많이 활용되고 있습니다.
클로드로 웹페이지 만들기
클로드(Claude)는 단순히 질문에 답하는 AI가 아니라, 실제로 작동하는 결과물을 함께 만들어갈 수 있는 AI 어시스턴트입니다. 그 중심에 있는 기능이 바로 아티팩트(Artifacts)입니다.
아티팩트(Artifacts) 기능이란?
아티팩트는 대화창과는 별도로 구분된 패널에 AI가 생성한 결과물을 바로 보여주는 기능입니다. 텍스트 설명만 제공하는 것이 아니라, 실제 실행 가능한 결과를 즉시 확인할 수 있다는 점이 특징입니다. 예를 들어 웹페이지를 만들 경우 HTML, CSS, JavaScript 코드가 아티팩트 패널에 표시되고, 동시에 동작하는 화면을 바로 확인할 수 있습니다.
아티팩트의 활용 분야
아티팩트 기능은 다양한 작업에 활용할 수 있습니다.
- 보고서 및 문서 작성
- 차트와 그래프 생성
- 웹페이지 제작
- 코드 실행 및 미리보기
이처럼 결과물이 중요한 작업에서 대화와 결과를 분리해 볼 수 있어 작업 흐름이 깔끔해집니다.
아티팩트 기능의 특징
아티팩트의 또 다른 강점은 버전 관리입니다. 수정을 할 때마다 이전 버전이 자동으로 저장되므로,
여러 시도를 해보거나 결과를 비교하기에 적합합니다. 덕분에 실험적인 수정이나 디자인 변경도
부담 없이 진행할 수 있습니다.
프롬프트의 중요성
AI는 방대한 언어 데이터를 학습한 지식 저장소입니다. 하지만 AI가 스스로 의도를 추측해 행동할 수는 없으며, 사용자와 소통할 수 있는 통로는 프롬프트 창 하나뿐입니다. 즉, AI가 어떤 결과를 만들어내는지는 어떤 질문과 지시를 입력하느냐에 따라 결정됩니다.
나쁜 프롬프트의 예
“좋은 데로 데려다줘”
이와 같은 프롬프트는 목적지와 기준이 모호해 AI가 정확한 안내를 제공하기 어렵습니다. 사람에게 길을 물어볼 때 막연하게 말하는 것과 같은 상황입니다.
좋은 프롬프트의 예
“서울역에서 강남역까지 가장 빠른 길을 알려줘”
이 프롬프트는 출발지와 목적지, 기준이 명확하기 때문에 AI가 구체적이고 정확한 결과를 제공할 수 있습니다.
프롬프트와 결과의 관계
AI가 만들어내는 결과의 품질은 AI 자체의 성능만으로 결정되지 않습니다. 결과의 품질은 곧 프롬프트의 품질입니다. 바이브 코딩에서도 코드를 얼마나 잘 아는지보다 무엇을, 어떻게 설명하느냐가 훨씬 중요해집니다.
좋은 프롬프트의 3가지 조건
AI에게 원하는 결과를 얻기 위해서는 프롬프트를 아무렇게나 입력하기보다 몇 가지 기본 원칙을 지키는 것이 중요합니다. 좋은 프롬프트에는 공통적으로 다음 세 가지 조건이 포함됩니다.
1. 명확성
프롬프트는 모호한 표현을 피하고, AI가 바로 이해할 수 있도록 원하는 결과를 명확하게 전달해야 합니다. 예를 들어 “알아서 만들어줘”와 같은 표현보다는 무엇을 만들고 싶은지 분명하게 설명하는 것이 좋습니다. 명확할수록 AI의 해석 범위가 줄어들고 결과의 정확도는 높아집니다.
2. 구체성
좋은 프롬프트는 필요한 기능이나 조건을 구체적으로 포함합니다. 단순히 “웹페이지 만들어줘”가 아니라 구성 요소, 동작 방식, 제한 조건 등을 함께 제시하는 것이 효과적입니다. 구체적인 지시는 수정 횟수를 줄이고 원하는 결과에 빠르게 도달하게 해줍니다.
3. 맥락 제공
프롬프트에는 왜 이 작업이 필요한지, 어떤 상황에서 사용할 것인지에 대한 맥락이 포함되면 좋습니다. 사용 목적과 활용 환경을 설명하면 AI는 단순한 결과물이 아닌, 상황에 맞는 더 적절한 형태로 결과를 생성할 수 있습니다.
5W1H 프레임워크
5W1H 프레임워크는 프롬프트를 체계적으로 작성하기 위한 기본적인 사고 도구입니다. 무엇을 입력해야 할지 막막할 때, 이 여섯 가지 질문을 기준으로 정리하면 AI가 이해하기 쉬운 프롬프트를 만들 수 있습니다.
5W1H의 구성 요소
1. Who (누가)
누가 이 결과물을 사용할지 설명합니다. 초보자용인지, 실무자용인지에 따라 AI의 설명 수준과 결과 형태가 달라집니다.
2. What (무엇을)
무엇을 만들고 싶은지 명확히 합니다. 웹페이지, 보고서, 코드, 분석 결과 등 원하는 결과물의 형태를 구체적으로 제시합니다.
3. When (언제)
언제 사용될 결과물인지 설명합니다. 발표용, 즉시 사용, 장기 운영 등 사용 시점을 알려주면 결과의 방향이 정리됩니다.
4. Where (어디서)
어떤 환경에서 사용할지 제시합니다. 웹, 모바일, 로컬 PC, 회사 내부 시스템 등 사용 환경은 결과 구성에 영향을 줍니다.
5. Why (왜)
왜 이 작업이 필요한지 목적을 설명합니다. 목적이 분명할수록 AI는 불필요한 요소를 줄이고 핵심에 집중합니다.
6. How (어떻게)
어떤 방식으로 구현되길 원하는지 설명합니다. 사용 기술, 디자인 방향, 동작 방식 등 원하는 접근 방법을 함께 제시하면 좋습니다.
PRD(Product Requirements Document)
PRD는 Product Requirements Document, 즉 제품 기획서를 의미합니다. 개발자들은 본격적으로 코딩을 시작하기 전에 무엇을 만들 것인지, 왜 필요한지, 어떻게 작동해야 하는지를 PRD 문서로 먼저 정리합니다.
PRD의 역할
PRD에는 다음과 같은 내용이 포함됩니다.
- 어떤 제품을 만들 것인지
- 이 제품이 왜 필요한지
- 어떤 기능을 가져야 하는지
- 사용자는 어떻게 이용하게 되는지
이 문서는 개발 과정에서
모든 판단의 기준이 되는 설계도 역할을 합니다.
좋은 프롬프트와 PRD의 공통점
AI에게 입력하는 프롬프트는 역할만 다를 뿐, 본질적으로 PRD와 매우 유사합니다.
좋은 프롬프트 역시
- 무엇을 만들지
- 왜 필요한지
- 어떻게 작동해야 하는지
를 명확하게 정리해야 합니다.
🚶기본 미션(필수)
- PROJECT 1. 나의 첫 웹페이지 만들고 캡처하기
- p.33, p54-55 확인 문제 풀고 인증하기
🏃추가 미션(선택)
- 클로드 아티팩트에서 [커스터마이즈] 2회 이상하고 캡처하기
https://claude.site/public/artifacts/15a8c7c6-5140-46aa-b15d-ab146817f8a1/embed
아이고 세상에 클로드 이자식 인심이 좀 박하군요.
무료메세지가 1주차 끝나기도 전에 벌써 바닥입니다.
그렇도 유료결제하기에는? 아직 넌 너무 낯설다야.
