AI에게 웹사이트를 만들어 달라고 하면, 어딘가 비슷비슷한 결과물이 나옵니다. 보라색 그라디언트, 카드 레이아웃, Inter 폰트. 다른 프롬프트를 써도, 다른 날 써도 비슷한 느낌입니다.

OpenAI가 GPT-5.4의 출시와 함께 프론트엔드 디자인을 위한 공식 프롬프팅 가이드를 발표했습니다. 단순한 팁 모음이 아니라, 모델이 왜 뻔한 결과물을 내는지 설명하고, 어떻게 접근해야 그 패턴을 벗어날 수 있는지를 체계적으로 정리한 문서입니다.

출처: Designing delightful frontends with GPT-5.4 – OpenAI Developers Blog

AI 디자인이 뻔해지는 이유

OpenAI는 원인을 명확히 짚습니다. 프롬프트에 구체적인 지시가 없으면, 모델은 학습 데이터에서 가장 자주 등장한 패턴으로 수렴한다고요. 기술적으로 작동하고 구조적으로 그럴듯하지만, 어디서 본 듯한 레이아웃과 약한 시각적 위계가 남습니다.

GPT-5.4는 이미지 이해와 UI 생성 능력에 특화해 훈련된 첫 번째 메인라인 모델입니다. 이미지 검색과 이미지 생성 도구를 디자인 과정에 직접 활용할 수 있도록 설계됐고, Playwright 같은 도구로 자신이 만든 결과물을 직접 시각적으로 확인하고 수정하는 것도 가능합니다. 그럼에도 프롬프트 설계 없이는 이 능력이 제대로 발휘되지 않습니다.

플레이북의 핵심 철학 세 가지

OpenAI가 이 가이드에서 강조하는 핵심은 크게 세 가지입니다.

첫째, 디자인 시스템을 먼저 정의하라. 색상, 타이포그래피, 레이아웃 제약 조건을 프롬프트 앞부분에 명시하면, 모델이 훨씬 일관성 있고 의도된 결과물을 냅니다. 헤드라인은 하나, 섹션은 여섯 개 이하, 폰트는 두 가지, 강조 색상은 하나처럼 구체적인 제약이 모델의 선택지를 좁혀줍니다.

둘째, 추론 레벨을 낮춰라. 이건 직관에 반하는 조언입니다. 더 많이 생각하게 할수록 결과가 좋아질 것 같지만, 프론트엔드 작업에서는 낮은 추론 레벨이 오히려 더 빠르고 집중된 결과를 낸다고 OpenAI는 설명합니다. 과잉 사고가 오히려 일반적인 패턴으로 회귀하게 만든다는 겁니다.

셋째, 실제 콘텐츠를 제공하라. 플레이스홀더 텍스트 대신 실제 제품 설명, 브랜드 이름, 실제 카피를 넣으면 모델이 적합한 구조를 선택하고 더 맥락에 맞는 메시지를 작성합니다. “Lorem ipsum” 대신 실제 문장이 들어오는 순간, 결과물의 질이 달라진다는 것입니다.

함께 공개된 Frontend Skill

가이드와 함께 frontend-skill이라는 도구도 공개됐습니다. OpenAI의 코딩 에이전트 Codex에서 설치해 사용할 수 있는 이 스킬은, 모델에게 구조와 디자인 감각, 인터랙션 패턴에 대한 추가 지침을 줍니다. “카드는 기본적으로 사용하지 말 것”, “첫 화면은 포스터처럼 다뤄야 한다”, “섹션마다 하나의 목적만 가져야 한다” 같은 규칙들이 담겨 있습니다.

별도의 스타터 프롬프트도 함께 제공되며, 히어로 영역 구성부터 React 패턴까지 꼼꼼하게 명시돼 있습니다. 완성된 결과물은 OpenAI의 공개 갤러리에 제출할 수도 있습니다.

모델이 좋아질수록, 프롬프트도 정교해져야 한다

이 가이드가 흥미로운 이유는 내용 자체보다 OpenAI가 이런 문서를 낸다는 사실에 있습니다. 모델 성능이 올라갈수록 “더 좋은 결과를 내려면 어떻게 지시해야 하는가”가 점점 중요한 문제가 되고 있다는 방증입니다. 프롬프트는 단순한 명령어가 아니라, 모델과의 협업 언어에 가까워지고 있습니다.

스타터 프롬프트, Frontend Skill 설치 방법, 상세한 디자인 원칙은 원문에서 확인할 수 있습니다.