ChatGPT한테 웹사이트 하나 만들어줘
AI 웹디자인 프롬프트 하나 잘못 쓰면 결과가 전부 비슷해진다. 이 한 마디로 나온 결과물을 본 적 있을 거다. 카드 UI에 기본 폰트, 밋밋한 단색 배경. 어디서 많이 본 듯한 그 레이아웃. 나만 그런 게 아니었다. 프롬프트가 구체적이지 않으면 AI는 가장 흔한 패턴으로 수렴한다.
OpenAI가 GPT-5.4 출시와 함께 이 문제의 원인과 해결법을 직접 공개했다. “Designing delightful frontends with GPT-5.4″라는 제목의 실전 가이드다. 프롬프트가 구체적이지 않으면 AI는 학습 데이터에서 가장 흔한 패턴으로 돌아간다는 걸 인정하면서, 그 벽을 넘는 4가지 핵심 기법을 제시했다.
프롬프트 변형에 따른 AI 웹디자인 결과물 비교
AI가 만든 웹사이트가 다 비슷한 진짜 이유
프롬프트에 “멋진 웹사이트 만들어줘”라고만 쓰면 어떻게 될까. AI는 훈련 데이터에서 가장 빈도가 높은 기본값(Defaults)으로 회귀한다. OpenAI가 직접 지적한 대표적인 회귀 패턴이 있다.
- Inter, Roboto, Arial 같은 시스템 기본 폰트로 돌아간다
- 평면적인 단색 배경을 깔아버린다
- 인터랙션 여부와 관계없이 모든 요소를 카드 UI로 감싼다
- 보라색-흰색 기본 컬러 조합이 등장한다
결과물이 “그럴듯하긴 한데 어디서 많이 본” 느낌인 건 이 때문이다. 기능은 돌아가지만 브랜드도, 개성도, 시각적 위계도 없다. AI한테 자유도를 너무 많이 줬기 때문에 생기는 역설이다. 제약이 없으면 가장 안전한 선택지로 흘러간다.
GPT-5.4가 달라진 세 가지
GPT-5.4는 이전 모델과 비교해 프론트엔드 작업에서 세 가지가 바뀌었다. 단순한 성능 향상이 아니라 디자인 작업 방식 자체가 달라진 부분이다.
이미지를 직접 보고 이해한다
이미지 검색과 이미지 생성 도구를 네이티브로 사용하도록 훈련됐다. 스크린샷을 올리면 레이아웃 리듬, 타이포그래피 비율, 색상 팔레트를 추론한다. 무드보드를 먼저 생성한 뒤 방향을 잡고, 그 다음에 실제 디자인으로 들어가는 워크플로우가 가능해졌다.
진짜 동작하는 앱을 만든다
이전 모델에선 껍데기만 그럴듯하고 실제로는 안 돌아가는 경우가 많았다. GPT-5.4는 더 완전하고 기능적으로 건전한 앱을 만들도록 훈련됐다. 장기간 태스크에서도 안정적이고, 게임이나 복잡한 인터랙션도 1~2턴에 구현 가능하다.
스스로 결과물을 확인하고 고친다
Computer Use를 위해 훈련된 최초의 메인라인 모델이다. Playwright와 결합하면 자기가 짠 코드를 브라우저에 렌더링하고, 여러 화면 크기를 넘나들며 테스트하고, 내비게이션과 UI 상태 문제를 직접 잡아낸다. 만들고 → 보고 → 고치는 사이클을 AI가 알아서 돌리는 셈이다.
AI 웹디자인 프롬프트, 이 4가지가 핵심이다
OpenAI가 제시한 핵심은 명확하다. “AI한테 자유를 주지 말고 제약을 줘라.” 4가지 기법을 하나씩 뜯어보자.
1. 디자인 시스템부터 정의한다
작업 시작 전에 제약 조건을 못 박아야 한다. H1 헤드라인 하나, 섹션 최대 6개, 서체 최대 2개, 액센트 컬러 하나, 폴드 위에 CTA 하나. 이런 식으로 예산(Budget)을 정해주는 거다.
디자인 토큰도 미리 잡아준다.
디자인 토큰 예시:
- background, surface, primary text, muted text, accent
- 타이포그래피 역할: display, headline, body, caption
- CSS 변수로 정의해서 일관성 유지React와 Tailwind 스택을 명시하면 GPT-5.4가 특히 강력한 결과를 낸다. 모호하게 “예쁘게 해줘”가 아니라 “이 범위 안에서 해줘”가 포인트다.
2. 비주얼 레퍼런스를 제공한다
AI 웹디자인 프롬프트를 텍스트만으로 채우는 건 한계가 있다. 스크린샷이나 무드보드를 직접 올려야 한다. GPT-5.4는 이미지를 분석해서 레이아웃 리듬, 타이포그래피 스케일, 스페이싱 시스템, 이미지 처리 방식까지 추론한다.
한 가지 팁이 있다. 본 작업 전에 AI한테 먼저 무드보드를 생성하게 해보자. “NYC 커피 문화 + Y2K 미학”처럼 스타일, 색상 팔레트, 구도, 분위기를 명시적으로 기술하면 상당히 정교한 방향성을 잡아준다. 이 과정을 거치면 최종 결과물의 일관성이 훨씬 올라간다. 프롬프트의 맥락 설계가 결과물 품질을 좌우한다는 점은 프롬프트 엔지니어링, 컨텍스트 스토리텔링으로 질문이 아닌 세계를 설계하라에서도 다룬 바 있다.
3. 페이지를 내러티브로 구조화한다
웹페이지는 단순한 정보 나열이 아니다. 스토리다. OpenAI가 제안하는 마케팅 페이지 구조는 다음과 같다.
- Hero – 브랜드 정체성과 약속을 세운다
- Supporting imagery – 맥락이나 분위기를 보여준다
- Product detail – 제안을 구체적으로 설명한다
- Social proof – 신뢰를 확보한다
- Final CTA – 관심을 행동으로 전환한다
실제 카피, 제품 맥락, 프로젝트 목표를 프롬프트에 넣어줘야 한다. “Lorem ipsum” 같은 임시 텍스트를 쓰면 AI도 임시 수준으로 내려간다. 진짜 콘텐츠를 넣으면 진짜 수준의 구조가 나온다.
4. 추론 수준을 낮춘다
직관에 반하는 조언이다. 단순한 웹사이트에서는 추론(Reasoning)을 낮음(Low)이나 중간(Medium)으로 설정하는 게 오히려 낫다. AI가 너무 많이 생각하면 과잉 설계가 된다. 불필요한 컴포넌트를 추가하고, 복잡한 상태 관리를 끼워넣고, 레이아웃이 비대해진다.
빠르고 집중적인 결과를 원한다면 추론을 줄여보자. 정말 복잡하고 야심찬 디자인을 할 때만 추론 수준을 높이면 된다.
OpenAI가 공개한 프론트엔드 디자인 하드 룰
가이드에는 구체적인 디자인 규칙도 포함되어 있다. 프롬프트에 직접 넣을 수 있는 규칙들이다.
히어로 섹션의 예산
첫 화면에 들어갈 수 있는 건 딱 5개다. 브랜드, 헤드라인 하나, 짧은 서포팅 문장 하나, CTA 그룹 하나, 지배적 이미지 하나. 통계, 일정, 이벤트 목록, 프로모 배너를 첫 화면에 넣으면 안 된다.
히어로 이미지는 화면을 꽉 채우는 풀블리드(Full-bleed)가 기본이다. 그 위에 뱃지, 스티커, 프로모 칩을 올리는 것도 금지다.
브랜드 테스트
내비게이션 바를 제거했을 때 첫 화면이 다른 브랜드처럼 보인다면 – 실패한 디자인이다. 브랜드나 제품명이 히어로급 시그널이어야 한다. 내비게이션 텍스트나 작은 로고로 밀려나면 안 된다.
카드 UI의 기본값은 ‘사용 안 함’
카드는 사용자 인터랙션의 컨테이너일 때만 쓴다. 테두리, 그림자, 배경을 제거해도 이해에 지장이 없다면 카드여선 안 된다. 히어로에는 절대 카드를 쓰지 않는다.
진짜 시각적 기준점
이미지는 제품, 장소, 분위기, 맥락을 보여줘야 한다. 장식적인 그라디언트와 추상적 배경은 메인 비주얼로 인정받지 못한다. 표현력 있는 폰트를 쓰되, Inter나 Roboto 같은 기본 스택은 피해야 한다.
AI 웹디자인 프롬프트 실전 체크리스트
AI 웹디자인 프롬프트를 작성하기 전에 이것만 챙기면 결과가 달라진다.
- 디자인 시스템을 정의했나 – 컬러 토큰, 타이포그래피 역할, 서체 2개 이내
- 비주얼 레퍼런스를 첨부했나 – 스크린샷, 무드보드, 또는 AI가 생성한 옵션
- 실제 콘텐츠를 넣었나 – 진짜 카피, 제품 설명, 프로젝트 목표
- 페이지 구조를 내러티브로 잡았나 – Hero부터 Final CTA까지 흐름 설계
- 추론 수준을 조절했나 – 단순한 사이트는 Low/Medium, 복잡한 프로젝트만 High
- 히어로 예산을 지켰나 – 첫 화면에 5개 요소만 배치
OpenAI는 이 규칙들을 하나로 묶은 Frontend Skill이라는 프롬프트 패키지도 공개했다. Codex 같은 코딩 에이전트에서 바로 설치할 수 있다. AI를 활용한 크리에이티브 작업에 관심이 있다면 오픈AI가 공개한 Sora2 공식 프롬프트 완벽 가이드도 함께 참고해보자.
결국 AI 디자인도 제약이 창의를 만든다
“자유롭게 만들어줘”라는 프롬프트가 가장 제네릭한 결과를 낳는다. 좋은 디자인은 제약 안에서 나온다는 건 사람이든 AI든 마찬가지다. 디자인 시스템을 정의하고, 비주얼 레퍼런스를 주고, 스토리를 짜고, 추론 수준을 조절하는 것. 이 4가지만 바꿔도 AI가 만드는 웹사이트의 수준이 확실히 달라진다.
AI 웹디자인 프롬프트의 핵심은 “더 많이 쓰는 것”이 아니라 “더 정확하게 제한하는 것”이다. 다음에 AI한테 웹사이트를 맡긴다면, 화면부터 그리지 말고 규칙부터 정해보자.
참고 자료: OpenAI, “Designing delightful frontends with GPT-5.4”