FlowYulLab Method
바이브메이킹
AI로 생각을 결과물로 만드는 제작 방식
바이브메이킹은 AI와 함께 기획, 디자인, 코딩, 배포를 연결해 아이디어를 실제로 작동하는 결과물로 만드는 방법론입니다.
- 0년째
- AI 제작 흐름 수업 운영
- 0개반+
- 오프라인 프로젝트 수업 경험
- 40-60대
- 쉽게 쓰는 AI 제작 도구 비전
Think
Design
Build
Ship
Human Direction
AI Collaboration
Actual Output
Think
Design
Build
Ship
Problem
AI는 쉬워졌지만, 결과물은 여전히 어렵습니다
AI에게 질문하는 사람은 많아졌습니다. 하지만 기획, 디자인, 코딩, 배포까지 연결해 실제 결과물로 만드는 사람은 아직 많지 않습니다.
디자인 방향은 잡았지만 화면으로 정리되지 않는다
코드는 생성했지만 수정과 완성이 어렵다
여러 AI 도구가 하나의 결과물로 연결되지 않는다
Shift
질문만 잘하는 사람에서, 결과물을 설계하는 사람으로
바이브메이킹은 AI에게 답을 받는 데서 끝나지 않습니다. 답을 고르고, 구조화하고, 화면과 코드로 옮겨 실제로 열리는 결과물까지 만드는 쪽으로 초점을 옮깁니다.
AI에게 질문한다
- 좋은 답변을 받는 데 집중
- 프롬프트가 흩어지고 다시 쓰기 어려움
- 결과물이 문서나 아이디어 상태에 머무름
AI와 함께 만든다
- 목적, 화면, 코드, 배포를 하나로 연결
- 판단과 수정 과정을 제작 기록으로 남김
- 공유 가능한 웹 결과물로 완성
Definition
바이브메이킹이란?
바이브메이킹은 AI와 함께 아이디어를 실제 결과물로 만드는 제작 방식입니다. 단순히 프롬프트를 잘 쓰는 것이 아니라, 기획의 흐름, 디자인의 판단, 프론트엔드 구현을 연결해 작동하는 결과물까지 만들어내는 과정을 다룹니다.
AI에게 맡기는 것이 아니라,
AI와 함께 만드는 방식입니다.
Vibe Design
+
Vibe Coding
+
Human Direction
=
VibeMaking
Method
바이브메이킹은 네 가지 흐름으로 진행됩니다
생각을 정리하고, 화면으로 만들고, 코드로 작동시키고, 배포해서 결과물로 남깁니다.
생각하기
문제, 사용자, 목적을 정리합니다.
디자인하기
레퍼런스, 무드, 화면 구조를 잡습니다.
구현하기
AI와 함께 코드를 만들고 실행하며 수정합니다.
완성하기
배포하고 피드백을 반영해 결과물로 남깁니다.
Vibe Design + Vibe Coding
바이브코딩만으로는 부족합니다
코드를 만드는 것만으로는 좋은 결과물이 나오지 않습니다. 무엇을 만들지, 누구를 위해 만들지, 어떤 화면이 필요한지 먼저 정리되어야 합니다.
Vibe Design
AI와 함께 콘셉트, 레퍼런스, UI 방향, 화면 구조를 설계합니다.
VibeMaking
디자인과 코딩을 연결해 아이디어를 결과물로 완성합니다.
Vibe Coding
AI와 함께 코드를 만들고, 오류를 수정하고, 실제로 작동하게 만듭니다.
VibeMaker
바이브메이커는 누구인가요?
바이브메이커는 AI를 그냥 써보는 데서 끝내지 않고, 기획하고 디자인하고 구현하면서 자기 결과물을 만들어가는 사람입니다.
AI로 포트폴리오를 만들고 싶은 사람
아이디어를 웹페이지나 앱으로 구현하고 싶은 사람
디자인과 코딩 사이의 간극을 줄이고 싶은 사람
프롬프트를 넘어 실제 제작 흐름을 배우고 싶은 사람
AI 시대의 자기 제작 방식을 만들고 싶은 사람
Output Map
멤버십 안에서는 보는 것보다 만드는 흐름을 남깁니다
바이브메이킹은 단편적인 AI 팁이 아니라, 아이디어를 정리하고 화면으로 설계한 뒤 실제 웹 결과물로 배포하는 과정을 단계별 산출물로 남기는 방식입니다.
기획 노트
문제, 사용자, 목적, 콘텐츠 구조를 AI와 함께 정리합니다.
화면 설계
레퍼런스, 무드, 섹션 구조, UI 방향을 실제 화면 단위로 잡습니다.
작동하는 웹
AI 코딩으로 구현하고 수정하며, GitHub와 Vercel 배포까지 연결합니다.
제작 기록
프롬프트, 판단, 수정 과정을 남겨 다음 프로젝트에 재사용합니다.
- 회원 전용 영상
- 바이브메이킹 실전 노트
- 프롬프트와 제작 흐름 템플릿
- AI 도구 활용 사례와 판단 기준
- 디자인·프론트엔드 작업 과정 기록
Use Cases
바이브메이킹은 작은 결과물부터 바로 쓰이게 만듭니다
거창한 앱을 처음부터 만드는 대신, 지금 필요한 소개 페이지, 수업 자료, 프로젝트 기록, 작은 자동화부터 결과물로 완성하는 흐름을 익힙니다.
Product Vision
최종 목표는 누구나 쉽게 쓸 수 있는 AI 제작 프로덕트입니다
바이브메이킹의 목표는 강의에서 끝나지 않습니다. 40~60도 쉽게 AI를 활용해 자기 일, 취미, 사업, 삶에 필요한 결과물을 만들 수 있는 프로덕트를 지향합니다.
쉬운 언어
단계별 선택
결과물 중심
쉬운 질문 흐름
단계별 제작 가이드
기획서 자동 구조화
화면 구성 가이드
프롬프트 자동 생성
디자인 방향 제안
코드 생성 보조
배포 가이드
개인 결과물 아카이브
About
FlowYulLab
FlowYulLab은 AI 시대의 기획, 디자인, 프론트엔드 제작 방식을 연구하고 교육합니다. 율쌤은 UX/UI 디자인, 웹기획, 프론트엔드 부트캠프 수업 현장에서 생성형 AI를 2년째 실제 프로젝트 제작 흐름에 적용해왔습니다.
프롬프트, 컨텍스트, 바이브디자인, 바이브코딩을 기획에서 배포까지 이어지는 흐름 안에서 실험하며, 디자이너와 비개발자도 AI와 함께 결과물을 만들 수 있는 방법을 정리하고 있습니다.
UX/UI
웹기획
프론트엔드
AI 제작 교육
by 율쌤 · AI 활용 UX/UI · 웹기획 · 프론트엔드 강사
FAQ
시작하기 전에 자주 묻는 질문
바이브메이킹은 AI 도구를 많이 아는 것보다, 내 목적에 맞는 결과물을 끝까지 만들어보는 흐름에 집중합니다.
코딩을 잘 몰라도 따라갈 수 있나요?
네. 시작점은 코드가 아니라 문제 정의, 콘텐츠 구조, 화면 설계입니다. 코드는 AI와 함께 만들고, 오류를 읽고 수정하는 흐름을 함께 익힙니다.
바이브코딩과 바이브메이킹은 무엇이 다른가요?
바이브코딩은 구현에 가깝고, 바이브메이킹은 기획, 디자인, 코딩, 배포를 하나의 제작 흐름으로 묶습니다. 결과물이 작동하고 남는 것까지 봅니다.
멤버십에서는 어떤 결과물을 만들게 되나요?
랜딩 페이지, 포트폴리오, 작은 웹 도구, AI 활용 콘텐츠 구조처럼 실제로 열어보고 공유할 수 있는 웹 결과물을 중심으로 다룹니다.
GitHub와 Vercel 배포도 포함되나요?
네. 로컬에서 만든 파일을 GitHub에 올리고, Vercel로 배포해서 URL로 확인하는 흐름까지 제작 과정의 일부로 봅니다.
40~60대도 쓸 수 있는 프로덕트를 말하는 이유는 무엇인가요?
AI 제작이 전문가만의 일이 되지 않으려면 질문, 선택, 수정, 배포 과정이 쉬워야 합니다. 바이브메이킹은 그 흐름을 교육과 프로덕트로 함께 정리해갑니다.
Start Making
AI를 써보는 사람에서,
AI와 함께 만드는 사람으로.
바이브메이킹은 AI를 잘 쓰는 법보다 AI와 함께 끝까지 만들어내는 법을 다룹니다.