바이브 코딩 X 생성형 이미지가 갖고오는 UI 혁신
yeezy.com에 영감을 받은
0. 바이브 코딩 X 생성형 이미지 조합은 강력합니다.
최근 바이브 코딩으로 아래 인터랙티브 쇼핑몰 프로토타이핑을 해봤는데 작성 과정을 남겨봅니다. 참고로 저는 PRD를 기반으로 컴퍼넌 리스트와 필요한 스펙들을 미리 어느정도 파악하고, 디자인 시스템을 어떻게 구성하면 좋을지를 미리 상의한다음에 이를 조립하는 방식으로 작업합니다.
작업환경은 커서에수 react.js + mui + storybook을 사용하고, 필요에 따라 claude code, codex를 같이 사용합니다.
일단 링크부터 먼저 공유합니다:
1. 사이트 링크
2. 스토리북 링크
1. 정적인 그리드에서 “입어보는” UI로
얼마 전 yeezy.com 을 보다가, 이상할 정도로 깨끗한 그리드에 눈이 멈췄습니다. 제품을 제외한 그 어떤것도 없는 디자인, 그 화면 자체가 하나의 브랜딩처럼 느껴졌습니다. 여기서 한 걸음 더 상상해봤습니다.
“만약 이 그리드 안에서, 모델이 제품을 실제로 입고 움직이는 영상까지 자연스럽게 이어진다면 어떨까?”
스크롤을 내리다가 마음에 드는 제품을 클릭하면,
그 카드가 화면 정중앙으로 부드럽게 확대되고
같은 톤의 영상이 이어지면서 착용샷이 재생되고
스와이프만으로 바로 다음 제품의 착장 영상으로 넘어가는
일종의 ‘입어보는 그리드’ 같은 경험 말입니다.
먼저 미드저니에서 이 아이디어를 시험해봤습니다. 아래 조건들을 걸고 프롬프트를 테스트해보니, 가상의 모션이지만 순수한 제품사진과 착상 모션이 자연스럽게 이어졌습니다.
철저한 정면구도 및 절제된 옷 정렬 상태
그림자 및 셰이딩 최소화
미니멀하고, 최대한 단색의 브랜드 톤
화면이 끊기지 않은 연속적인 옷 - 모델 트랜지션
이런식으로 제품, 모델, 배경 톤을 최대한 단순하게 맞추고 몇 가지 프롬프트를 돌려보니, 생각보다 꽤 그럴듯한 결과가 나왔습니다.
2. 디자인 아이디어 규칙으로 쪼개기
바이브 코딩의 첫 단계는 상상을 규칙으로 쪼개는 일이라고 생각합니다.
이번 케이스에서 제가 정리한 규칙은 대략 이런 구조였습니다.
2-1) 동적으로 소팅되는 그리드
- 컬러, 카테고리, 스타일 등으로 필터와 정렬이 가능하다.
- 정렬 기준이 바뀌어도 그리드의 균형과 밀도는 유지된다.
- 헤더와 필터는 상단에 고정되고, 그리드만 부드럽게 재배치된다.
2-2) 선택한 제품이 화면 정중앙으로 오는 전환
- 카드를 클릭하면, 그 카드가 원래 있던 자리에서 화면 중앙으로 이동하는 모션이 필요하다.
- 나머지 카드는 살짝 어두워지고 뒤로 물러난 느낌을 준다.
- 새 페이지로 튀어나가는 느낌이 아니라, 지금 보고 있던 화면 안을 확대하는 감각에 가깝게 만든다.
2-3) 줌인 상태에서 착용 샷과 캐러셀 매트릭스
- 확대된 카드 안에서 동일 톤의 착용 샷 이미지나 영상이 재생된다.
- 좌우 스와이프나 버튼으로 다음, 이전 제품의 착용 샷으로 바로 이동할 수 있다.
- 전환될 때도 “그리드의 한 셀에서 옆 셀로 이동한다”는 느낌을 유지한다.
3. 컴포넌트 언어로 다시 말하기: Cursor와의 대화
규칙이 정리되었다면, 이제 이를 컴포넌트 언어로 바꾸는 단계가 필요합니다.
이 지점에서 Cursor와의 바이브 코딩이 본격적으로 작동합니다.
저는 보통 다음과 같이 규칙 중심의 요구 사항을 커서 룰에 먼저 등록합니다. 이렇게 하는 이유는 각 컴퍼넌트들의 상호작용과 공통적으로 사용할 외부 라이브러리들을 종합적으로 판단하기 위함입니다.
MainPage
- 필터, 그리드 확대 단계, 선택된 제품, 상세 보기 여부를 한 번에 관리합니다.
- 라우팅 없이 한 페이지 안에서 상태만 바뀌도록 하고, 하위 컴포넌트에는 결과값만 props로 내려줍니다.
Header
- 현재 필터 상태와 확대 단계만 표시하고, 모든 변경은 콜백으로 MainPage에 올립니다.
- 좌측: 확대/백 버튼, 중앙: 성별·색상 필터, 우측: 장바구니 버튼 구조로 단순하게 유지합니다.
GridContainer
- zoom 단계에 따라 columns 수와 레이아웃만 조정합니다.
- 확대·축소 시 transform/transition으로 부드럽게 전환하고, 뷰포트를 꽉 채우는 레이아웃을 기본으로 합니다.
DynamicGrid
- 필터링된 products를 MUI Grid로 배치하는 역할만 담당합니다.
- zoom 단계와 뷰포트에 따라 column 수와 spacing만 바꾸고, 클릭 이벤트는 상위로 전달합니다.
ProductCard
- 썸네일 이미지와 가격, 최소한의 정보를 보여주는 기본 단위입니다.
- PC에서는 호버 시 짧은 미리보기(영상·보조 이미지)만 추가하고, 클릭 시 선택된 product id만 상위로 올립니다.
ProductDetailView
- 선택된 제품을 중앙에 크게 보여주는 오버레이 레이어입니다.
- 등장 시 선택 카드가 중앙으로 확대되고, 나머지 그리드는 자연스럽게 어두워지며, ESC·백버튼으로 복귀하도록 합니다.
Matrix2DCarousel
- 가로로는 한 제품의 여러 이미지, 세로로는 제품 간 전환을 담당합니다.
- 좌우 키·스와이프는 이미지 전환, 상하 스크롤은 제품 전환으로 고정하고, 프레임은 그대로 둔 채 콘텐츠만 교체되도록 설계합니다.
4. 스토리북으로 인터랙션의 기준을 계약서처럼 남기기
컴포넌트 구조가 정리되면, 저는 바로 스토리북으로 옮겨서 각 상태를 “계약서”처럼 남기려고 합니다.
특히 이번처럼 필터, 확대, 상세 보기, 2D 캐러셀까지 상태 변화가 많은 UI에서는, 스토리북이 없으면 협업이나 유지보수가 금방 불안정해질 수 있습니다.
이번 프로젝트에서는 대략 다음과 같은 스토리를 정의하는 것이 목표였습니다.
- 공통 원칙
- “예제 모음”이 아니라, 인터랙션과 레이아웃의 기준을 정하는 문서처럼 사용합니다.
- 각 컴포넌트는 상태별 스토리를 짧게 쪼개고, 논의는 항상 스토리 기준으로 진행합니다.
- MainPage 스토리
- 필터 조합, 확대 단계(기본/확대)별 화면을 따로 둡니다.
- “라우팅 없이 한 페이지 안에서 상태만 변한다”는 콘셉트가 유지되는지 확인하는 용도입니다.
- Header 스토리
- 성별·색상 필터 on/off 상태, 확대 버튼이 +에서 <로 바뀐 상태를 각각 보여줍니다.
- 필터와 버튼 구성이 과도하지 않고, 한눈에 구조가 읽히는지 검증합니다.
- GridContainer / DynamicGrid 스토리
- zoom 단계별 columns 수 변화, 반응형 브레이크포인트별 레이아웃을 분리해 확인합니다.
- 필터 변경/확대 시 그리드가 “튀지 않고 자연스럽게 재배치되는지”만 집중해서 체크합니다.
- ProductCard 스토리
- 기본, 호버, 클릭 직전 상태를 나란히 보여줍니다.
- 정보량과 모션 강도가 부담스럽지 않은지, 카드 자체가 너무 시끄럽지 않은지 판단하는 용도입니다.
- ProductDetailView / Matrix2DCarousel 스토리
- 중앙 확대 상태, 배경 fade out, 좌우 이미지 슬라이드, 상하 제품 전환을 각각 짧은 스토리로 분리합니다.
- 키보드/스크롤 조작으로 “어디로 이동하는지 직관적으로 이해되는지”를 확인하고, 속도·전환 강도를 조정합니다.
5. 마치며 + 바이브 코딩 오프라인 코스 안내
최근에 바이브 코딩을 거의 디자인 작업까지 이용하고 있는데, 이는 지난 10년간 디발자로서의 정체성을 정리하는 과정에 가까웠습니다. 이는 규칙으로 설명할 수 있는 모든 디자인은 AI와 바로 코딩으로 만들지 않을 이유가 없다라는 생각이 생겼고,
내 아이디어를 구현하고자하는 디자이너, 디자인 자립심을 키우고 싶은 개발자에게 모두 도움이 될만한 뱡향이라 생각해서 과정을 정리해봤습니다.
저는 현재 vibe design lab이라는 바이브 코딩 플랫폼을 준비중이며 그 시작으로 4주짜리 오프라인 코스를 준비중입니다. 바이브 디자인 스타터 키트라는 컨셉으로 철저하게 디자인 중심으로 접근할 수 있는 바이브 코딩 환경과 방법론을 준비된 템플렛과 함께 교육하는 과정입니다.
소수 10명으로 진행되니 관심있는 디자이너, 개발자분들은 아래 링크를 확인해주시면 감사하겠니다.
- 내 디자인을 끝까지 책임지고 싶은 디자이너
- 바이브 코딩 환경에서 바로 디자인하고 싶은 개발자
들을 위한 강의입니다.
바이브 디자인 스타터 코스 안내
