FlowYulLab Workroom
바이브메이킹
생각만 하던 걸,
오늘 열어볼 수 있게.
무엇을 만들지 고르고, 첫 화면을 만들고, 링크를 엽니다.
AI는 손을 보태고, 방향은 사람이 정합니다.
바이브메이킹 제작 흐름
-
01 · 고르기 누구에게 보여줄지 대상과 한 문장부터 -
02 · 만들기 첫 화면부터 문장과 버튼부터 -
03 · 눌러보기 직접 눌러보고 안 되면 바로 고치기 -
04 · 열기 링크를 열어두기 다음에 고칠 것까지
What We Do
우리는 이렇게 만듭니다
거창한 계획보다 지금 확인할 수 있는 한 장부터 시작합니다.
-
01
VibeMake
먼저, 누구에게 보여줄지 정합니다.
하고 싶은 말을 한 문장으로 줄이면 필요한 화면도 선명해집니다.
-
02
VibeDesign
그다음, 첫 화면부터 만듭니다.
모든 걸 채우기 전에 제목, 이미지, 버튼이 제대로 이어지는지 봅니다.
-
03
VibeCoding
마지막으로, 링크를 열고 고칩니다.
직접 눌러 보고 어색한 곳을 손본 뒤 다음에 고칠 이유까지 적어둡니다.
Worklog
링크를 열어두면
다음 수정이 보입니다
완성했다고 닫지 않고, 지금 열리는 화면에서 어색한 곳을 다시 찾습니다.
-
01
지금 열리는 화면
설명보다 먼저 실제 화면을 보여주고 반응을 확인합니다.
-
02
가장 어색한 지점
직접 눌러보며 막히는 곳과 가장 많이 바꾼 화면을 남깁니다.
-
03
다음에 고칠 한 문장
완성 선언 대신 다음 수정의 기준을 짧게 적어둡니다.
Archive
실제로 열리는
링크들입니다
바이브메이킹으로 만든 결과물을 기록 그대로 남깁니다. 직접 눌러서 확인해 보세요.
-
복붙랩
웹퍼블리셔와 디자이너가 납품 직전에 막히는 파비콘, 웹폰트, CSS 코드를 한 화면에서 만들고 바로 복사하는 무료 도구 모음입니다.
가장 많이 고친 곳기능을 더할 때마다 AI가 앞의 맥락을 줄이거나 지시문을 그대로 HTML에 남겨서, 설계 문서를 기준으로 되돌리는 일을 가장 많이 반복했습니다.
bokbootlab.com -
KIA 브랜드 사이트 리디자인
수강생 팀이 기아 브랜드 사이트를 처음부터 다시 설계했습니다. 영상 히어로부터 차량 추천, 고객 리뷰까지 실제 서비스 구조를 그대로 구현했습니다.
가장 많이 고친 곳여러 명이 함께 만들다 보니 코드 스타일과 작업 방식이 갈려서, 기준을 정해 하나로 맞추는 데 가장 많은 시간을 썼습니다.
yebina1.github.io/kia -
오늘도락
냉장고에 남은 재료를 알려주면 AI 챗봇이 오늘의 도시락 메뉴를 추천합니다. 재료 낭비를 줄이는 도시락 루틴 웹앱입니다.
가장 많이 고친 곳처음엔 보안을 생각하지 않고 API를 붙였다가, 키를 감추고 호출 구조를 다시 세우는 부분을 가장 크게 고쳤습니다.
oneuldorak-new.vercel.app
더 많은 수업 결과물은 준비되는 대로 이어서 공개합니다.
FlowYulLab
혼자 막히면,
같이 봅니다
주제 한 줄부터 열린 링크까지, 어디서 막혔는지 화면을 보며 같이 고칩니다.
작업실 안내 멤버십 안내와 실제 제작 기록은 유튜브에 이어서 남깁니다.