디자이너 없이 바이브코딩으로 토스급 UI 만드는 법

또. 이쁘지가 않다.

Claude Code한테 "대시보드 만들어줘" 했더니 기능은 되는데 화면이 영 아마추어다. 카드 간격이 제각각이고, 색이 정리가 안 되고, 전체적으로 뭔가... 촌스럽다.

"좀 더 깔끔하게" 해봤자 달라지는 게 없다. 좀 더 구체적으로 "토스처럼" 해봤자 비슷하다. AI가 토스를 모르는 게 아니다. 컴포넌트도 잘 만든다.

근데 디자인 판단을 못 한다.

무슨 말이냐면

토스 앱을 켜서 찬찬히 보면, 화면마다 같은 "느낌"이 있다. 그 느낌의 정체가 뭔지 뜯어봤다.

규칙이 있다.

가장 어두운 검정이 #000이 아니라 #2A2A2A다. 미세한 차인데, 이게 "딱딱함"과 "고급스러움"의 차이다.

강조 색은 앱 전체에서 딱 하나. 보라 하나. 나머지는 전부 회색 톤이다. 절제가 고급이다.

카드 그림자? opacity 4%다. 그림자가 눈에 보이면 이미 과하다.

숫자는 48px로 크게, 단위는 24px로 작게. 항상 2:1. 시선이 숫자에 먼저 간다.

디자이너는 이런 판단을 무의식적으로 내린다. 경험으로 쌓인 거다. 근데 이걸 글로 정리하면? AI도 따라할 수 있다.

그래서 정리했다

내 앱 만들면서 AI가 뱉는 UI를 고치다 지쳤다. "이건 왜 구려 보이지?"를 분석하다 보니 패턴이 보였다. 같은 실수가 반복됐다.

그래서 디자이너가 머릿속에 갖고 있는 판단 기준을 하나씩 글로 적었다. 69개가 됐다.

예를 들면:

같은 카드 레이아웃을 연속으로 두 번 쓰지 마라. 히어로 다음에 그리드, 그리드 다음에 차트, 차트 다음에 리스트. 리듬이 있어야 한다.

KPI 카드 4개를 만들 때 전부 똑같이 만들지 마라. 트렌드 화살표 2개, 프로그레스바 1개, 비교 텍스트 1개. 변주가 있어야 단조롭지 않다.

위에서 아래로 갈수록 글씨가 작아지고 정보가 빽빽해진다. 히어로는 48px 하나, 맨 아래 리스트는 14px 여러 줄. 자연스러운 줌인 효과.

이 규칙들을 AI가 읽을 수 있게 패키징했다.

엔진 + 스킨

구조가 좀 재밌다.

styleseed/
├── engine/    ← 디자인 두뇌 (규칙 69개, 컴포넌트 48개, AI 스킬 11개)
└── skins/     ← 브랜드 컬러 (토스, Stripe, Linear, Vercel, Notion...)

엔진은 "어떻게 구성할지"를 안다. 레이아웃, 타이포 비율, 카드 구조, 시각적 리듬, 금지 패턴. 브랜드 색이 뭐든 상관없이 동작한다.

스킨은 CSS 파일 하나다. --brand: #533afd 하면 Stripe, --brand: #721FE5 하면 토스. 색만 바꾸면 전체 UI가 따라 바뀐다.

awesome-design-md에 58개 브랜드가 있는데, 거기서 아무거나 골라서 스킨으로 쓸 수 있다.

실제로 쓰는 과정

1단계. 엔진을 내 프로젝트에 복사한다.

cp -r styleseed/engine/* my-project/
cp -r styleseed/engine/css/* my-project/src/styles/

2단계. 스킨을 고른다.

cp styleseed/skins/stripe/theme.css my-project/src/styles/theme.css

귀찮으면 /ui-setup 치면 하나씩 물어보면서 세팅해준다. 앱 종류, 색상, 폰트, 첫 페이지까지.

3단계. 만든다.

SaaS 대시보드 만들어줘.

AI가 CLAUDE.md를 자동으로 읽는다. 69개 규칙에 따라 히어로 카드, KPI 그리드, 차트 섹션, 리스트를 정보 피라미드 순서로 배치한다.

여기서 끝이 아니다.

/ux-audit src/Dashboard.tsx    # 닐슨 10대 원칙으로 UX 점검
/ux-copy "대시보드"             # 버튼 라벨, 에러 메시지 자동 생성
/ux-feedback src/Dashboard.tsx  # 로딩/에러/빈 상태 추가
/ui-review src/Dashboard.tsx    # 디자인 규칙 준수 검사

솔직히 좀 사기다 싶었다. 디자이너 + UX 리서처가 하는 일을 명령어 4개로.

통일감의 비결

왜 토스 앱은 어떤 화면을 열어도 "같은 앱" 느낌이 날까.

한 사람(또는 한 팀)의 머릿속에 일관된 기준이 있기 때문이다. "이 간격은 24px", "이 색은 쓰지 마", "숫자는 이 크기" — 이 기준이 모든 화면에 적용되니까 통일감이 생긴다.

StyleSeed는 그 기준을 69개 규칙으로 적어놓은 거다. AI가 이걸 읽으면, 어떤 페이지를 만들든 같은 기준으로 만든다.

스킨이 바뀌어도 구조는 안 바뀐다. Stripe든 Vercel이든 — 엔진이 동일하니까.

솔직히 말하면

완벽하지는 않다. 아직 모바일(430px) 전용이고, 데스크톱 레이아웃은 별도로 짜야 한다. 차트도 Recharts 직접 세팅해야 한다. 계속 규칙 추가하면서 다듬는 중이다.

근데 확실한 건 — 이거 쓰기 전과 후가 확연히 다르다. "구려 보이는데 뭘 고쳐야 할지 모르겠다"에서 "알아서 깔끔하게 나온다"로.

디자이너 고용비 0원. 세팅 5분.

GitHub에서 보기

MIT 오픈소스다. 쓸만하면 스타 하나 부탁.