UI 생성: 형용사에서 스펙으로
AI에게 UI를 요청할 때, 형용사는 소원이고 스펙은 지시예요. 같은 랜딩 페이지 요청이라도 프롬프트 3단계면 산출물 급이 세 갈래로 갈려요. 이번 레슨에서는 「예쁘게」를 AI가 벗어날 수 없는 스펙으로 쓰는 법을 배워요.
「예쁜 랜딩 페이지 만들어 줘」를 넘기면, AI는 보라 그라데이션에 가운데로 쌓인 흔한 결과물을 돌려줘요. 잘못은 AI가 절반만 져요—정보를 못 받았으니 학습 데이터의 평균만 내놓을 수밖에 없죠. 프롬프트 엔지니어링 부에서 「정보를 한 줌 주면 한 줌만 답한다」고 했죠. UI 생성이 그 법칙이 제일 잘 보이는 무대예요. 주색을 고정하고, 간격을 그리드에 잠그고, 굵기는 두 단계만, 금지 항목을 목록으로 쓰면 산출물이 바로 한 급 올라가요.
스펙에서 제일 빠지기 쉬운 건 글자 그 자체예요. 인터페이스의 십중팔구는 글자고, 글자가 망하면 배색이 맞아도 소용없어요. 다행히 타이포그래피에는 이미 단단한 수치가 있어요. About Face 4 17장이 바로 숫자를 줘요: 대비, 서체, 대소문자, 글자 크기—네 줄 모두 프롬프트로 옮길 수 있어요.
멀리와 사노의 판결을 About Face 4가 그대로 실었어요: 불필요한 차이는 일관된 디자인의 적. 거의 같은 건 같게 만드세요. 프롬프트에 넣으면 제일 값비싼 금지 항목이 돼요.
왼쪽은 입말, 오른쪽은 AI가 필요한 스펙이에요. 한 줄 눌러 한 줄 번역하고, 다 끝나면 통째로 복사하세요.
스펙은 외울 필요 없어요—여섯 조항에서 블록을 하나씩 고르면 조립돼요. 「생략」을 고른 부분은 AI 운에 맡기게 되고, 미리보기에서 그대로 보여요.
AI UI 생성 효과를 가장 크게 올리는 제약은 어느 문장일까요?
| 조항 유형 | 역할 | 템플릿 문장 |
|---|---|---|
| 포지티브 스펙 | 수치화할 수 있는 건 다 고정해 AI가 추측할 틈을 없애요 | 「주색 #DB2777, 간격은 8pt 그리드, 모서리 둥글기 12px 통일, 굵기는 800과 600만」 |
| 네거티브 제약 | AI가 제일 잘 벗어나는 길을 미리 막아 둬요 | 「그라데이션 금지, 이모지 아이콘 금지, 그림자는 한 종류만」 |
| 레퍼런스 앵커 | 양쪽이 다 아는 제품을 좌표로 써요 | 「정보 밀도는 Linear 레퍼런스, 여백은 Notion 레퍼런스」. 「대기업 스타일」은 말하지 마세요—가리키는 게 없으면 안 한 말이에요 |
| 통일성 조항 | 「거의 같음」을 미리 같게 통일해요 | 「거의 같은 요소는 같게: 전 사이트 주색 하나, 모서리 둥글기 한 세트, 그림자 한 종류. 이유 없는 차이는 전부 삭제」 |
네 번째 유형은 멀리·사노의 「불필요한 차이는 일관된 디자인의 적」을 프롬프트로 쓴 버전이에요. AI는 디테일에 덧붙이기를 좋아해요: 여기 10px 둥글기, 저기 12px, 회색 둘, 그림자 셋. 통일성 조항이 그 틈을 미리 막아요.
형용사는 소원, 스펙은 지시: 주색·간격·굵기·금지 항목을 조항별로 검증할 수 있게 쓰세요.
네거티브 제약이 가성비가 최고예요: 「그라데이션 금지, 이모지 아이콘 금지, 그림자 한 종류」—세 줄이면 AI 티의 대부분을 잘라내요.
타이포에는 베낄 단단한 숫자가 있어요: 대비 80%, 본문 산세리프, 영문 전부 대문자 금지, 글자 크기 10px부터—프롬프트에 넣으면 네 줄 검수 기준이 돼요.
다음에 UI를 생성할 때 블록으로 스펙을 짜서 AI에게 보내고, 지난번의 「한마디」와 산출물을 비교해 보세요.
콘텐츠 출처: 샤오산 아카데미 「미학 엔지니어링」 특집 오리지널; 일부 디자인 원칙은 《About Face 4: 인터랙션 디자인의 정수》 17장에서 정리.