목록으로
·4분 읽기·GXAI Studio

Step 4 — 디자인

Designer agent가 비주얼 만듦. 기존 게임 보고 스타일 매칭 — 새 스타일 발명 안 함.

프로세스디자인

비주얼.

Designer agent는 새 스타일 발명 안 함. 기존 게임 읽고 색, 폰트, 간격 복사해서 새 게임에 적용.

이로써 모든 게임이 같은 스튜디오 제작으로 보임.

스튜디오 디자인 토큰

각 게임이 같은 원자 디자인 토큰 공유. 벗어나지 않음.

design-tokens.txt
# 스튜디오 토큰

색: #00ffff (시안, 메인) #ff4466 (핑크, 강조) #ffcc33 (골드, 성공) #34d399 (그린, OK) #0a0a0f (어두운 배경)

폰트: Space Grotesk Inter

버튼: 샤프 코너, 2px 보더 간격: 8 / 16 / 24 / 48px 애니: ease-out, 200ms

✓ 같은 토큰, 모든 게임 ✓ 플레이어 1초만에 식별

/토큰

같은 토큰, 모든 게임.

4개 게임이 같은 색, 폰트, 리듬 공유. 의도적 — 하나 플레이한 사람은 다른 것도 한눈에 인식.

Designer 첫 지시: "이 토큰 써, 제안 아니라."

7가지 필수 상태

각 화면 목업은 7가지 모든 플레이어가 볼 수 있는 상태 포함. 디자인 구멍 일찍 잡음.

states.txt
# 화면별 필수 상태
  1. idle — 기본
  2. loading — 스피너
  3. error — 연결 끊김
  4. empty — 데이터 없음
  5. success — 동작 확인
  6. disabled — 버튼 잠김
  7. focus — 키보드 네비

✓ 7개 다 있어야 코드 가능 ✗ 빠지면 Designer로 반환

/상태

7개 다 안 되면 미완성.

대부분 "나중에 생각" 버그는 empty/error 상태 잊은 결과. 코드 전에 Reviewer가 잡음.

흔한 함정

✗ 토큰 무시하고 새 색 발명
✗ "당연하니까" 7 상태 스킵
✗ 목업 대신 아이디어 보냄
✗ HTML이면 충분한데 Figma 사용

← Step 3 — 계획 · Step 5 — 코드 →

공유:
블로그