[내돈내산] 7만 원 바이브 디자인 워크숍, AI에 디자인 맡기기 전 알아야 할 팩트

2026년 8월 22일 합정에서 열린 바이브 디자인 워크숍에 다녀왔습니다. 참가비는 7만 원이었습니다.

이번 과제에서 만든 WORKWAYS는 혼자 일하는 사람을 위한 오프라인 작업 프로그램입니다. 진행 중인 일을 가져와 집중하고, 필요한 순간에만 다른 관점과 교차한 뒤 다음 행동 하나를 들고 나오는 방을 상상했습니다.

처음에는 AI로 예쁜 랜딩페이지를 만드는 수업이라고 생각했어요. 랜딩페이지는 방문자가 처음 도착해 소개를 읽고 신청까지 하는 한 장짜리 페이지입니다. 막상 들어보니 중심은 다른 데 있었습니다. AI에게 화면을 시키기 전에, 사람이 브랜드의 판단 기준을 만드는 수업이었습니다.

글을 처음 발행한 뒤 강사님이 워크숍에서 관찰한 미비사항을 점검하고 스킬과 추가 가이드를 업데이트했다는 안내를 올렸습니다. 여기서 스킬은 AI에게 시킬 작업 순서와 검토 기준을 미리 정리해둔 묶음입니다. 그래서 최신 버전을 새로 받아 Apple 분석부터 WORKWAYS 브랜드 조립, 랜딩 재료, 실제 구현과 배포까지 다시 진행했습니다.

이 글에서 확인할 것

• 브랜드 해체·조립이 실제 작업에서 어떻게 쓰이는지
• 세 가지 제작 스킬과 전체 파이프라인의 역할이 어떻게 다른지
• 업데이트된 결과에서 무엇이 더 명확해졌는지
• 문서 검증 뒤 실제 구현과 배포에서 무엇을 다시 결정해야 하는지

바이브 디자인 워크숍에서 배운 브랜드 해체·조립

브랜드를 세 층으로 나눠 적으면 “감각이 없다”는 막연한 말을 색, 카피, 흐름 중 무엇의 문제인지 구분해서 말할 수 있습니다. 과제도 이 세 층을 차례로 채우는 순서였습니다. 참고 브랜드 분석 → 새 브랜드 기획 → UX Flow → Visual Direction → 랜딩 구현 순으로 진행했습니다.

세 층은 이렇게 나눠 봅니다.

층	질문	웹 구현
Verbal	어떤 말투와 약속인가?	헤드라인·버튼
Visual	어떤 색·타이포·이미지인가?	토큰·레이아웃
Storytelling	어떤 순서로 이해하고 행동하는가?	섹션·CTA

표에 나온 토큰은 색이나 글자 크기 같은 값에 이름을 붙여 저장해둔 것이고, CTA(Call To Action)는 “신청하기”처럼 방문자가 누르기를 바라는 버튼입니다. 핵심 문장은 이것입니다.

사람이 디자인 기준을 만들고, AI에게는 조립만 맡긴다.

업데이트된 AI 디자인 스킬은 어디까지 해주나

스킬은 네 개입니다. 앞의 세 개가 분석, 브랜드, 랜딩 재료를 한 단계씩 만들고 네 번째가 그 순서를 이어줍니다. 각 단계에서 무엇이 나오고 무엇은 나오지 않는지 보면 어디까지 기대할 수 있는지 알 수 있습니다.

1. research-brand-anatomy

Apple을 막연히 조사하지 않습니다. 채널과 범위를 잠그고, 관찰한 사실과 해석을 구분한 뒤 Verbal·Visual·Storytelling의 문법을 추출합니다. 최신 실행에서는 Apple의 흰색 화면이나 제품 표면을 따라 하지 않도록 보호 경계도 함께 남겼습니다.

2. build-brand-from-anatomy

승인된 분석을 WORKWAYS라는 새 브랜드로 번역합니다. 포지셔닝, 프로그램 라인업, 카피, 키 비주얼, 이미지와 토큰 방향을 만들고 대표 제품 이미지와 브랜드 무드 이미지를 생성합니다.

3. build-landing-materials

코드 대신 랜딩에 들어갈 재료를 만듭니다. 첫 화면인 Hero, 가치, 브랜드 스토리, 프로그램별 USP(다른 곳과 구별되는 강점)와 CTA, 섹션별 이미지 역할을 정리하고 Open Work·Coffee Chat·Field Seminar·Link Night의 제품 렌더를 각각 등록합니다.

4. reconstruct-brand-system

앞의 세 단계를 분석 → 브랜드 전환 → 랜딩 재료 순서로 이어주는 라우터입니다. 라우터는 지금 어느 단계인지 보고 다음 단계로 넘겨주는 역할만 맡습니다. 사용자가 각 단계 결과를 승인해야 다음 단계로 넘어갑니다. 중요한 점은 Stage 3가 끝나도 실제 랜딩페이지 코딩과 배포까지 자동으로 끝나는 것은 아니라는 것입니다.

스킬의 역할은 결과물을 한 번에 뽑는 데 있지 않습니다. 서로 다른 판단을 섞지 않고, 어느 단계에서 무엇을 검토해야 하는지 정해주는 쪽에 가깝습니다.

최신 버전을 다시 돌리니 달라진 점

가장 크게 달라진 것은 결과물의 화려함이 아니라 경계가 더 구체적으로 정해진 것이었습니다.

첫째, 90분 만들기 · 12분 선택적 교류 · 다음 행동 한 가지는 모든 프로그램의 공통 규칙이 아니라 대표 프로그램 Open Work에만 적용된다고 분리됐습니다. Coffee Chat은 질문, Field Seminar는 판단 과정, Link Night는 상호 동의한 연결이라는 차이가 선명해졌습니다.

둘째, 참여 상태를 눈치에 맡기지 않았습니다. Mode Card, Crossing Timer, One Thing Out 같은 물리 도구가 집중·교차 시간·다음 행동을 보여주는 인터페이스로 정리됐습니다.

셋째, 프로그램별 이미지가 친목 행사 사진처럼 뭉뚱그려지지 않았습니다. 질문 한 장, 실패와 수정의 순서, 필요한 도움과 양쪽의 동의처럼 각 프로그램이 실제로 무엇을 증명해야 하는지 이미지 역할이 달라졌습니다.

넷째, 아직 운영하지 않은 브랜드를 이미 성공한 커뮤니티처럼 보이지 않게 했습니다. 일정·장소·가격·정원은 미정이고, 생성 이미지는 방향 이미지이며, 현재 신청 정보는 저장하지 않는다고 페이지에 표시했습니다.

아래는 이 기준으로 다시 만든 Open Work의 방향 이미지입니다. 실제 현장 사진이 아니라 분위기를 보여주는 생성 이미지입니다.

WORKWAYS 구현에서 다시 확인한 빈틈

문서 파이프라인이 끝난 뒤 실제 랜딩페이지를 직접 구현해보니, 스킬이 대신 결정해주지 않는 영역이 분명해졌습니다. 페이지는 Hero에서 참여 방식을 설명하고, 운영 원칙과 네 프로그램, 물리 인터페이스, 브랜드 스토리, 준비 현황으로 이어지는 한 페이지 구조로 만들었습니다. 화면 크기에 따라 배치가 바뀌는 반응형으로도 맞췄습니다.

검증기는 결과물이 규칙대로 만들어졌는지 자동으로 점검해주는 도구입니다. 정해진 형식(JSON) 구조, 파일 등록, 라인업 누락과 이미지 존재 여부는 잘 확인합니다. 하지만 모바일에서 글이 너무 길게 느껴지는지, CTA를 눌렀을 때 어디에 도착해야 하는지, 어떤 정보를 실제로 수집할지는 대신 결정하지 않습니다.

특히 “첫 세션 알림 받기”처럼 보이는 폼이 실제로 저장되지 않는다면, 성공 메시지를 띄우는 것 자체가 오해를 만듭니다. 그래서 최신 페이지에서는 입력 폼을 제거하고 소식 신청 기능 준비 중이라고 명시했습니다.

“그럼 스킬이 실패한 건가?”라고 생각할 수 있습니다. 절반은 맞고 절반은 아닙니다. 스킬은 디자인 품질과 운영 정책을 자동 결정하는 도구가 아니라, 사람이 판단할 재료와 검토 순서를 정리하는 도구이기 때문입니다.

배포 주소를 정리하다가 지점을 하나 더 만났습니다. 같은 작업 기간에 서로 다른 스타터킷으로 WORKWAYS를 두 번 조립해뒀던 겁니다. 하나는 처음 후기를 쓸 때 쓴 결과물이었고, 다른 하나는 이후 새로 받은 스타터킷으로 다시 조립한 버전이었습니다.

폴더 이름과 화면 구성이 비슷해서 잠깐 어느 쪽이 최신인지 헷갈렸습니다. 배포 자동화는 지정한 폴더를 그대로 배포했을 뿐, 그 폴더가 최신인지는 판단해주지 않았습니다. 두 결과물을 직접 열어 비교한 뒤 새 스타터킷 쪽으로 다시 배포하고 링크를 정리했습니다.

7만 원의 값어치는 있었나

완성된 웹사이트를 대신 만들어주는 강의라면 아쉽습니다. 스킬을 실행했다고 반응형 UI, 접근성, 신청 시스템과 배포까지 자동으로 끝나지는 않습니다.

반면 디자인 결정을 구조화하는 수업으로 보면 비용은 납득됩니다.

• 참고 브랜드의 표면이 아니라 문법을 분해하게 됐습니다.
• 카피·이미지·레이아웃을 하나의 시스템으로 묶어 보게 됐습니다.
• “예쁘게 다시” 대신 어느 층위가 문제인지 말할 수 있게 됐습니다.
• 실제가 아닌 상태와 아직 정하지 않은 정보를 숨기지 않는 기준이 생겼습니다.

업데이트된 스킬만 실행하면 사이트 배포까지 되나

아닙니다. reconstruct-brand-system은 Stage 3 랜딩 재료가 승인되면 종료됩니다. 이후 실제 페이지 구조, 반응형 동작, 메타데이터, 이미지 최적화와 배포는 별도 구현 단계입니다.

이번에는 그 다음 단계까지 이어서 작업했고, 최종 결과를 WORKWAYS 오프라인 작업 프로그램 랜딩페이지에 다시 배포했습니다.

WORKWAYS는 아직 실제 공간과 첫 세션이 없는 실험 브랜드입니다. 따라서 지금 페이지에서 확인할 수 있는 것은 운영 성과가 아니라 브랜드 방향과 참여 방식입니다. 바이브코딩의 전체 학습 흐름은 바이브코딩 시작 가이드에서 이어집니다.

정리 – 바이브 디자인을 기억하는 법

• 프롬프트보다 브랜드 기준이 먼저입니다.
• Verbal·Visual·Storytelling을 함께 설계해야 합니다.
• 토큰은 취향이 아니라 역할을 저장합니다.
• 승인 게이트는 판단 순서를 지켜주지만 실제 화면 품질을 대신 보장하지 않습니다.
• 운영하지 않은 사실과 생성된 방향 이미지는 구분해서 보여줘야 합니다.
• 최종 결과는 모바일·데스크톱과 실제 배포 주소에서 다시 확인해야 합니다.

바이브 디자인 워크숍은 누구에게 맞을까

지금 자기 상황이 어느 쪽에 가까운지로 판단하면 됩니다.

지금 내 상황	판단
브랜드를 처음 설계하거나 AI로 랜딩페이지를 만들어보고 싶다	잘 맞습니다
이미 브랜드 전략과 반응형 UI 설계가 익숙하다	스킬 문서를 읽고 필요한 단계만 골라 적용하는 편이 더 빠를 수 있습니다

자주 묻는 질문

업데이트된 스킬은 기존 저장소를 다시 받아야 하나요?

아니요, 전부 다시 받지 않아도 됩니다. 저장소는 스킬 파일이 모여 있는 폴더이고, Git은 그 폴더의 변경 이력을 관리하는 도구입니다. 기존 저장소를 Git으로 관리했다면 최신 변경만 내려받으면(pull) 됩니다. 변경 이력을 다루는 일이 익숙하지 않다면 새 폴더에 처음부터 다시 내려받은(clone) 뒤, 기존 결과물과 프롬프트만 옮겨 비교하는 편이 안전합니다.

스킬을 다시 실행하면 이전 디자인은 사라지나요?

아니요, 자동으로 사라지지는 않습니다. 다만 이전 결과물과 새 결과물을 같은 폴더에 덮어쓰지 마세요. 단계별 산출물과 승인 기록을 분리해야 무엇이 바뀌었는지 비교할 수 있습니다.

생성 이미지를 실제 행사 사진처럼 사용해도 되나요?

아니요, 아직 운영 전이라면 실제 현장 사진처럼 소개하지 않는 편이 맞습니다. WORKWAYS 페이지도 생성 이미지를 프로그램 방향 이미지로 표시하고, 일정·장소·가격·정원은 준비 중인 정보로 분리했습니다.

워크숍 소개는 Vibe Design Lab의 이벤트 페이지와 Starter Kit 과정 안내에서 확인할 수 있습니다. 워크숍 이후 공유된 업데이트 가이드도 함께 보면 처음 결과와 무엇이 달라졌는지 이해하기 쉽습니다.

AI에게 디자인을 맡기는 것이 아니라, 사람이 디자인의 기준을 만든 뒤 AI에게 조립을 맡긴다. 업데이트된 스킬을 다시 돌려본 뒤에도 가장 오래 남은 문장은 이것이었습니다.

검증 기준

• 마지막 업데이트일: 2026-09-06
• 확인 환경: 기존 워크숍 참가 기록, 행사·Starter Kit 공개 안내, WORKWAYS 배포 페이지 대조. 참가비와 수강 경험은 원래 기록이며, 오늘 다시 수강하거나 제작 스킬 전체를 재실행한 것은 아니다.
• 주요 근거: 워크숍 행사 안내 · Starter Kit · WORKWAYS 공개 결과