Inter 폰트에 보라색 그라디언트, 'AI스러운 디자인'에서 벗어나는 법

흰 배경에 보라색 그라디언트, 최소한의 애니메이션, Inter 폰트. 바이브 코딩을 하면 자꾸 이런 결과물만 나와요. AI스러운 디자인은 싫은데 의도한 톤앤매너가 반영되지 않는 거죠. Claude에게 "예쁜 페이지 만들어줘"라고 했다가 결과물이 의도와 달랐던 경험, 바이브 코딩을 해본 사람이라면 누구나 공감할 거예요.

그래서 한 번에 다 하려고 하지 말고 단계를 나누는 게 핵심이에요. 디자인에 집착하는 편인 한 디자이너가 실전에서 찾아낸 방법을 공유해요.

색상보다 레이아웃 구조를 먼저 잡아야 하는 이유

"레이아웃 구조만 먼저 보여줘"라고 요청하면 Claude가 ASCII 아트로 구조를 그려줘요. 색상은 hex 코드 바꾸면 되지만, 레이아웃을 바꾸려면 코드를 많이 건드려야 하거든요. 구조가 틀리면 나중에 고치기가 훨씬 힘들어요.

페이지마다 디자인이 달라지는 문제도 있었어요. 원인은 단순했죠. 매번 새 페이지를 만들 때마다 Claude가 "적당히" 색을 골랐기 때문이에요. Adobe Color에서 어울리는 색 조합을 먼저 고르고 HEX 코드를 복사해서 전달하니까 일관성이 생겼어요.

디자인 시스템 문서 하나가 모든 걸 바꾼다

docs/design-system.md 파일을 만들었어요. 색상 팔레트와 용도, 배경-전경 조합 규칙, 버튼 종류별 스타일, 반응형 규칙을 정리해뒀죠. 이 문서를 프로젝트에 넣어두면 Claude가 CLAUDE.md를 읽을 때 함께 참조하거든요.

한 번 정리해두면 이후 모든 페이지에서 일관된 디자인이 나오는 셈이에요. AI에게 디자인 규칙을 문서로 전달하는 게 말로 설명하는 것보다 훨씬 정확하죠.

"여기 좀 더 위로"가 Claude에게 통하지 않는 이유

타이포그래피 자간이나 미세한 위치 수정은 Claude에게 말로 전달하면 시행착오가 많아요. Claude는 '눈'으로 보는 게 아니라 '코드'로 읽으니까 "간격이 좀 답답해" 같은 직관적 표현을 이해하지 못하거든요. 그래서 세부 조정은 코드에 주석을 달아달라고 한 뒤 직접 수정하는 게 더 빨라요. 개발 서버에서 바로 확인하면서 hex 코드 바꾸고, 패딩 숫자 올리고. 이렇게 역할을 나누는 게 바이브 코딩의 실전 노하우예요.