AI UI/UX Vibe Coding 실습책

DAY 1 · 8/7 (금) · SESSION 68

Stitch로 설계하고, Codex로 구현하기

Google Stitch에서 첫 화면을 설계하고 Codex로 구현한 뒤, 마지막에 Three.js 효과 하나를 더합니다.

ONE MISSIONStitch 설계안과 Three.js 요소가 있는 홈페이지 첫 화면

Google Stitch · Codex · Three.js · Chrome산출물 Stitch 설계안 1장 + 3D 메인 화면이 있는 홈페이지

Stitch 시작00:00–00:20

Stitch 시작

Google Stitch에서 첫 화면부터 시작하기

브랜드 이름, 대상 사용자, 한 줄 가치 제안, 첫 행동 버튼, 카드 3개만 정한 뒤 곧바로 Stitch에서 첫 화면을 생성합니다. 첫날에는 메뉴와 기능을 많이 넣지 않습니다.

진행 순서

01Stitch에서 새 디자인을 엽니다.
02브랜드 이름과 한 줄 소개를 먼저 적습니다.
03아래 프롬프트의 대괄호를 내 내용으로 바꿉니다.
04첫 화면 한 장만 생성합니다.

GOOGLE STITCH에서 바로 시작하기Stitch 요청 내용 보기

반응형 홈페이지의 첫 화면을 디자인해 주세요.

서비스: [브랜드 이름 / 제공하는 서비스]
대상 사용자: [누가 사용하는지]
핵심 메시지: [한 줄 가치 제안]
첫 행동 버튼: [버튼 문구]
콘텐츠: 소개 문장, 서비스 또는 상품 카드 3개

디자인 방향
- 신뢰감 있고 현대적인 분위기
- 배경색 1개, 강조색 1개, 중립색만 사용
- 제목과 첫 행동 버튼이 가장 먼저 보이는 정보 계층
- 충분한 여백과 명확한 카드 구분
- 데스크톱 1440px 기준으로 먼저 디자인
- 모바일 390px에서는 한 열로 자연스럽게 재배치

로그인, 장바구니, 관리자 화면, 복잡한 애니메이션은 넣지 마세요.

Stitch 생성00:20–00:55

Stitch 생성

첫 결과에서 화면 구조와 시선 흐름 확인하기

첫 결과가 예쁜지보다 제목과 첫 행동 버튼이 먼저 보이는지, 카드 3개가 같은 규칙으로 정리되는지 확인합니다. 가장 이해하기 쉬운 화면 한 장만 기준안으로 선택합니다.

진행 순서

01제목이 가장 먼저 보이는지 확인
02첫 행동 버튼이 하나인지 확인
03카드 3개의 크기와 여백 비교
04가장 이해하기 쉬운 화면 한 장 선택

KEY POINT

첫 결과에서는 제목 → 설명 → 첫 행동 버튼 → 카드 3개의 순서가 자연스러운지만 확인합니다.

Stitch 수정00:55–01:20

Stitch 수정

대화로 필요한 부분만 한 번 수정하기

전체를 다시 생성하지 않고 제목 크기, 여백, 버튼 대비, 카드 배열만 지정해 수정합니다. 모바일 390px에서 한 열로 바뀌는 기준도 함께 요청합니다.

진행 순서

01전체 재생성 대신 수정할 네 항목만 말합니다.
02제목과 첫 행동 버튼의 우선순위를 먼저 봅니다.
03모바일 화면이 한 열로 재배치되는지 확인합니다.
04색·글자·간격·버튼 규칙을 메모합니다.

GOOGLE STITCH에서 한 번 더 다듬기Stitch 요청 내용 보기

현재 첫 화면의 전체 분위기와 콘텐츠는 유지해 주세요. 다음 네 가지만 수정해 주세요.

1) 메인 제목이 첫 번째로 읽히도록 크기와 줄 간격 조정
2) 첫 행동 버튼의 대비와 클릭 영역 강화
3) 카드 3개의 제목·설명·여백 규칙 통일
4) 390px 모바일에서 제목, 버튼, 카드가 한 열로 이어지게 재배치

새 섹션이나 새 기능은 추가하지 말고, 수정 전후 차이가 분명하게 보이게 해 주세요.

Codex 구현01:30–02:25

Codex 구현

Stitch 설계 규칙을 실제 홈페이지로 옮기기

Stitch 화면을 그대로 복제하지 않고 색, 글자 크기, 간격, 버튼, 카드 규칙을 Codex에 전달합니다. Codex가 현재 React 파일을 읽은 뒤 첫 화면 하나만 구현하게 합니다.

진행 순서

01Stitch 화면 또는 공유 링크와 디자인 규칙을 준비합니다.
02Codex가 현재 파일을 먼저 읽게 합니다.
03한 화면만 구현하고 브라우저에서 확인합니다.
04설계안과 다른 부분은 한 번에 하나씩 수정합니다.

STITCH 설계안을 CODEX로 구현하기Codex 요청 내용 보기

현재 React starter의 파일 구조를 먼저 읽어 주세요. 첨부한 Google Stitch 화면을 참고하되, 생성 코드를 그대로 덮어쓰지 말고 아래 디자인 규칙만 현재 프로젝트에 적용해 주세요.

- 화면 구성: 브랜드 이름, 한 줄 소개, 첫 행동 버튼, 카드 3개
- 색상: [배경색], [강조색], 중립색
- 글자: 제목 [크기], 본문 [크기], 명확한 굵기 차이
- 간격: 섹션과 카드 사이에 일관된 여백
- 반응형: 390px 한 열, 1440px 카드 3열

먼저 수정할 파일과 적용할 디자인 규칙을 짧게 설명하고 구현하세요. Three.js, 로그인, API, 장바구니는 아직 추가하지 마세요.

화면 확인02:25–02:40

화면 확인

3D를 넣기 전에 기본 홈페이지 확인하기

제목, 설명, 첫 행동 버튼, 카드 3개만으로도 홈페이지가 이해되는지 확인합니다. 이 기본 화면이 먼저 완성되어야 Three.js가 장식이 아니라 보조 역할을 할 수 있습니다.

진행 순서

013D 없이 서비스 내용을 한 문장으로 설명
02첫 행동 버튼을 바로 찾을 수 있는지 확인
03390px에서 가로 스크롤 확인
04기본 화면 캡처 저장

KEY POINT

Three.js를 빼도 브랜드, 설명, 첫 행동 버튼, 카드 3개가 이해되어야 합니다.

THREE.JS REFERENCE · 01

Lusion

3D로 브랜드 역량을 보여 주는 스튜디오 홈페이지

첫 문장으로 회사가 하는 일을 설명하고, 스크롤에 맞춰 3D 장면과 프로젝트를 연결합니다. 3D가 장식이 아니라 전문성을 증명하는 콘텐츠가 되는 방식을 관찰합니다.

보면서 확인할 것

첫 화면에서 회사가 하는 일을 바로 이해할 수 있는가
스크롤과 3D 장면 전환이 프로젝트 소개로 자연스럽게 이어지는가
3D가 제목과 메뉴를 가리지 않고 브랜드 인상을 강화하는가

홈페이지 직접 보기 ↗

THREE.JS REFERENCE · 02

Three.js 공식 홈페이지

한 개의 3D 장면으로 인상을 만드는 심플한 홈페이지

짧은 정보 구조와 넓은 여백 안에 3D 장면을 배치한 사례입니다. 전체 효과를 복제하지 않고, 상단 메뉴·한 줄 제목·중앙 오브젝트·링크 버튼만 Codex로 따라 만듭니다.

보면서 확인할 것

HTML과 CSS로 제목·메뉴·버튼부터 만들기
Three.js로 도형 하나와 조명 하나만 추가하기
도형을 천천히 회전시키고 모바일에서는 정지시키기

홈페이지 직접 보기 ↗

Three.js02:40–03:30

Three.js

Three.js 사례를 보고 3D 요소 하나 더하기

간단한 사례를 본 뒤 도형 하나와 느린 움직임만 더합니다. 첫 행동 버튼과 본문을 가리지 않고, 모바일과 움직임 줄이기 설정에는 정적인 대체 화면을 남깁니다.

진행 순서

01도형 하나, 조명 하나, 느린 움직임만 사용합니다.
02본문과 버튼보다 뒤에 보이게 합니다.
03모바일에는 정적인 대체 화면을 둡니다.
04움직임 줄이기 설정에서는 애니메이션을 멈춥니다.

CODEX로 THREE.JS 요소 더하기Codex 요청 내용 보기

현재 [브랜드 이름] 홈페이지의 기본 레이아웃과 첫 행동 버튼(첫 행동 버튼(CTA))은 그대로 유지한 채, 메인 화면 배경에만 Three.js 3D 요소 하나를 추가해 주세요.

1) three 패키지가 없다면 설치 방법을 먼저 알려 주세요.
2) 카메라, 조명, 기하 도형 하나만 사용하세요.
3) 도형은 천천히 회전하거나 마우스/터치에 아주 약하게 반응하게 하되, 첫 행동 버튼(첫 행동 버튼(CTA))과 본문을 가리지 마세요.
4) 390px 모바일에서는 성능을 위해 정적인 배경 또는 간단한 CSS 대체 화면을 보여 주세요.
5) prefers-reduced-motion에서는 움직임을 멈추세요.

새 페이지·로그인·API·장바구니는 추가하지 말고, 수정할 파일을 짧게 설명한 뒤 구현하세요.

직접 검수03:30–04:00

직접 검수

모바일·데스크톱에서 직접 확인하고 공유하기

390px 모바일과 1440px 데스크톱에서 제목, 버튼, 3D 요소를 확인합니다. Stitch 설계안과 구현 화면의 차이를 기록하고 다음 목표는 세 개까지만 남깁니다.

진행 순서

01390px에서 가로 스크롤 확인
021440px에서 제목과 버튼 우선순위 확인
03마우스와 터치 없이도 핵심 정보 확인
04Stitch 설계안과 구현 화면의 차이 기록

브라우저에서 직접 확인하기검수 요청 내용 보기

방금 구현한 [오늘 목표]를 확인할 체크리스트를 만들어 주세요.
모바일 390px, 데스크톱 1440px, 버튼 또는 입력 동작에서 각각 한 가지씩 직접 확인할 항목을 적어 주세요.
코드를 새로 만들지 말고 검수 항목만 답하세요.