VibeMaking
Studio 안내
AX · AI · UX/UI · Frontend : FlowYulLab Yulssem's VibeMaking

직접 만드는 바이브메이킹

내가 쓰려고 만들었는데,
다른 사람도 쓰면 좋겠어서

최율희 강사가 직접 개발한 VibeMaking Studio와 복붙랩·레이어캡처를 수업과 작업에 씁니다.
AI가 만든 화면에서 어색한 곳은 학생이 스스로 찾아 고치도록 가르칩니다.

오프라인 수업 보기 Studio 활용 모습 보기

VibeMaker Teachers

바이브메이커 강사

최율희 강사 (플로율랩-율쌤)1호 바이브메이커

프로덕트 디자인 · 웹퍼블리싱 · 디자인 실무 12년 · 강의 8년 차 · AI 적용 수업 네 반(약 2년) 수업 보기

제작과 수업에 AI를 많이 쓰다 보니, 결과마다 비슷하게 반복되는 선택이 눈에 들어옵니다. 서비스마다 집계 기준이 달라 수치는 서로 다르게 표시되며, 배지는 최신 공개 기록으로 자동 갱신됩니다.

How VibeMaking works

만드는 법을 알아야, 고칠 데가 보여.

바이브디자인과 바이브코딩을 아래 네 단계로 이어, 공개 링크까지 완성합니다. 혼자 만들든 팀으로 만들든 순서는 같습니다.

  1. 01 고르기

    언니 이거 나만 불편해?

    누가 왜 불편한지는 AI가 대신 정해 주지 않습니다. 직접 적어 두고, 고칠 곳이 헷갈릴 때마다 다시 읽습니다.

    남기는 것
    ‘나만 불편해?’의 답 한 줄

  2. 02 만들기

    핑계 대지 말고, 무작정 시작해 봐.

    제목, 이미지, 버튼을 놓고 눈으로 화면을 확인합니다. 모든 기능을 채우기보다 중요한 장면부터 만듭니다.

    남기는 것
    직접 볼 수 있는 첫 화면

  3. 03 눌러보기

    좋아 보이는 것과 잘 되는 것은 다르니까.

    ‘더 예쁘게 해 줘’로는 고쳐지지 않습니다. 버튼을 하나씩 누르며 어디서 손이 멈추는지부터 찾습니다.

    남기는 것
    고친 곳과 그 이유

  4. 04 열기

    배포 링크를 열고, 다음을 보자.

    다른 사람도 눌러 볼 수 있게 공개합니다. 버릴 것과 수정할 것을 정리합니다.

    남기는 것
    공개 링크와 다음 수정 한 문장

네 단계 중 어디서든 필요할 때 꺼내 쓰는 기준입니다.

  • VibeMake

    무엇이 되면 ‘됐다’고 볼지 정해 두고, 더 고칠지 여기서 멈출지를 가립니다.

  • VibeDesign

    눌러야 할 곳이 눌러야 할 곳처럼 보이는지 화면에서 따져 봅니다.

  • VibeCoding

    화면을 코드로 작동시키고, 버튼과 입력이 제대로 움직이는지 확인한 뒤 배포합니다.

걸리는 곳을 찾으면, 고치기 전에 왜 그런지 말해 봅니다. 직접 또는 AI로 고쳤으면, 다른 곳이 틀어지지 않았는지 한 번 더 확인합니다.

이 네 단계로 진행한 수강생 팀 프로젝트는 바로 아래 Class Work 에서 열어 볼 수 있습니다.

Class Work

직접 만드는 과정을, 수업에서도 이어갑니다.

K브랜드 글로벌 사이트 리뉴얼과 AI 챗봇 지원 팬덤 커뮤니티, 두 번의 팀 프로젝트 결과물입니다. 제작 수강생 팀 · 지도 최율희

이 결과물을 만든 수업 AI UXUI디자인 & 웹기획 프론트엔드 바이브코딩 부트캠프 수업 보기

보이면 고칠 수 있고, 열리면 나눌 수 있습니다.

Tools I built

수업과 작업에 필요한 도구도 직접 만듭니다.

필요한 기능을 정하고, 구현하고, 직접 사용하며 개선합니다.

오프라인 수업을,
직접 만든 Studio로 연결합니다.

VibeMaking Studio
by FlowYulLab ChoiYulHee

  1. 01 / 세부 일정

    언제 뭘 하는지
    흩어져 있잖아.

    프로젝트와 팀 일정을 한 화면에 모아 두고,
    수업 진행에 맞춰 바로 고칩니다.

    VibeMakingStudio세부 일정 관리
  2. 02 / 회의록

    회의는 했는데
    남는 게 없잖아.

    팀 회의 내용을 그 자리에서 남기고,
    참여자와 자료를 함께 정리합니다.

    VibeMakingStudio회의록
  3. 03 / 1:1 문의

    물어볼 곳이
    따로 없잖아.

    수강생이 남긴 질문에 강사가 1:1로 답합니다.
    수업 시간 밖에서 막힌 곳도 이어서 풉니다.

    VibeMakingStudio강사와 1:1 문의

Your Next Step

이제, 당신의 첫 장면으로.

처음 배우는 분도, 만들던 작업을 이어가는 분도. 지금 필요한 곳에서 시작하세요.

초대받은 기존 수강생

만들던 작업을 이어가세요.

Google 계정으로 로그인해 프로젝트를 이어갑니다.

Studio 로그인

FAQ

자주 묻는 질문

바이브메이킹의 개념과 제작 방식에 대해 자주 묻는 질문을 모았습니다.

바이브메이킹이란 무엇인가요?

바이브메이킹은 AI를 활용해 아이디어를 정하고, 화면을 설계하고, 웹으로 구현하고, 직접 사용해 본 뒤 공개 링크로 완성하는 제작 방식입니다.

바이브코딩과 무엇이 다른가요?

바이브코딩이 코드 구현에 집중한다면, 바이브메이킹은 기획, UX/UI 디자인, 프론트엔드 구현, 테스트와 배포까지 하나의 흐름으로 연결합니다.

어떤 결과물을 만드나요?

수업에서는 K브랜드 글로벌 사이트 리뉴얼과 AI 챗봇 지원 팬덤 커뮤니티, 두 번의 팀 프로젝트를 모두 진행합니다. 개인 웹·개인 앱·퍼스널 브랜딩 포트폴리오는 학습 참여도와 진행 상황에 따라 완성 범위가 달라집니다.

AI가 전부 만들어주나요?

AI가 만든 결과를 그대로 사용하는 것이 아니라, 사람이 목적과 품질을 판단하고 직접 눌러 보며 고치는 과정을 포함합니다.

특정 AI나 CSS 도구를 쓰면 안 되나요?

써도 됩니다. 어떤 도구를 썼는지보다, 그 선택이 이 내용에 맞는지 설명할 수 있는지를 봅니다.