한 장의 이미지는 천 개의 토큰만큼 가치가 있다

Repaint에서 제가 하는 일 중 하나는 AI가 실제로 보기 좋은 웹사이트를 생성하도록 만드는 것입니다. 이게 놀라울 정도로 어렵습니다. AI 모델은 같은 시각적 패턴에 반복적으로 빠지는 경향이 있습니다. 너무 일관적이라서 "AI 웹사이트"가 하나의 인식 가능한 미학이 되어가고 있습니다.

우리는 이 패턴을 깨기 위해 수십 가지 방법을 테스트했습니다. 그 과정에서 모델에 대해 훨씬 깊이 이해하게 되었고, 이를 공유하고 싶었습니다.

이것은 꽤 표준적인 기본 AI 웹사이트입니다. 일반적인 스타일, 최소한의 콘텐츠, 과도하게 사용된 레이아웃. 그리고 물론, 가끔 나타나는 읽을 수 없는 버튼까지.

저는 아주 적은 양의 지시만 주었습니다. 불공평해 보일 수 있지만, 좋은 테스트라고 생각합니다. 물론 계속 프롬프트를 주면 이것을 점진적으로 훌륭한 웹사이트로 만들 수 있습니다. 하지만 그러면 모든 디자인을 여러분이 하는 것이고, 모델은 단지 코딩만 하는 겁니다. 대부분의 사람들은 그렇게 할 줄 모릅니다. 진정한 혁신은 AI가 사람이 모든 세부사항을 지정하지 않아도 디자인을 할 수 있을 때 일어납니다.

AI의 기본 스타일은 근본적으로 보편적인 문제입니다. 여기 치료사 사이트에서도 똑같이 나타납니다. 치료사 사이트는 극적으로 다르게 보일 것이라고 생각하실 겁니다. 하지만 아닙니다, 그저 거의 같은 사이트를 녹색 버튼으로 만들 뿐입니다.

AI 웹사이트를 어떻게 개선할 수 있을까?

디자인 시스템

명백한 첫 번째 방법: 색상, 폰트, 모서리 둥글기, 그림자를 미리 설정하는 것입니다. 이런 결정들은 코드만 보고 있을 때 제대로 맞추기 어렵습니다. AI를 좋은 세트로 시작하면 실수할 여지가 줄어듭니다.

약간 도움이 됩니다. 심각한 색상 실수가 줄어듭니다. 여기서는 이미지 배경도 사용했습니다. 하지만 전체적으로 레이아웃, 콘텐츠 밀도, 전반적인 구조는 기본적으로 동일합니다. 디자인 시스템은 모델에게 팔레트를 제공하지만, 구성하는 방법을 가르쳐주지는 않습니다.

코칭

또 다른 접근법: 모델에게 디자인 방법에 대한 큰 지시 세트를 제공하는 것입니다. 보통은 하지 않을 것들을 하도록 프롬프트를 줍니다. Claude AI의 메인 챗봇에는 정확히 이것을 하는 스킬이 있습니다:

This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.
The user provides frontend requirements: a component, page, application, or interface to build. They may include context about the purpose, audience, or technical constraints.
Design Thinking
Before coding, understand the context and commit to a BOLD aesthetic direction:

Purpose: What problem does this interface solve? Who uses it?
Tone: Pick an extreme: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian, etc. There are so many flavors to choose from. Use these for inspiration but design one that is true to the aesthetic direction.
Constraints: Technical requirements (framework, performance, accessibility).
Differentiation: What makes this UNFORGETTABLE? What's the one thing someone will remember?

CRITICAL: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work - the key is intentionality, not intensity.
Then implement working code (HTML/CSS/JS, React, Vue, etc.) that is:

Production-grade and functional
Visually striking and memorable
Cohesive with a clear aesthetic point-of-view
Meticulously refined in every detail

Frontend Aesthetics Guidelines
Focus on:

Typography: Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter; opt instead for distinctive choices that elevate the frontend's aesthetics; unexpected, characterful font choices. Pair a distinctive display font with a refined body font.
Color & Theme: Commit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.
Motion: Use animations for effects and micro-interactions. Prioritize CSS-only solutions for HTML. Use Motion library for React when available. Focus on high-impact moments: one well-orchestrated page load with staggered reveals (animation-delay) creates more delight than scattered micro-interactions. Use scroll-triggering and hover states that surprise.
Spatial Composition: Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density.
Backgrounds & Visual Details: Create atmosphere and depth rather than defaulting to solid colors. Add contextual effects and textures that match the overall aesthetic. Apply creative forms like gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, custom cursors, and grain overlays.

NEVER use generic AI-generated aesthetics like overused font families (Inter, Roboto, Arial, system fonts), cliched color schemes (particularly purple gradients on white backgrounds), predictable layouts and component patterns, and cookie-cutter design that lacks context-specific character.
Interpret creatively and make unexpected choices that feel genuinely designed for the context. No design should be the same. Vary between light and dark themes, different fonts, different aesthetics. NEVER converge on common choices (Space Grotesk, for example) across generations.
IMPORTANT: Match implementation complexity to the aesthetic vision. Maximalist designs need elaborate code with extensive animations and effects. Minimalist or refined designs need restraint, precision, and careful attention to spacing, typography, and subtle details. Elegance comes from executing the vision well.
Remember: Claude is capable of extraordinary creative work. Don't hold back, show what can truly be created when thinking outside the box and committing fully to a distinctive vision.

확실한 개선입니다. 전체적인 레이아웃은 이전과 비슷합니다. 하지만 드디어 실제 치료사 사이트처럼 보이며, 부드러운 폰트와 독특한 버튼 스타일이 적용되었습니다. 자신의 이미지로 교체하면 바로 게시할 수 있을 정도입니다.

테스트에서 커스텀 지시가 반복 문제를 해결하지 못한다는 것을 발견했습니다. 모델은 여전히 같은 패턴을 사용하므로, 기본적으로 표준 AI 사이트처럼 보입니다. 다만 훨씬 더 깔끔한 버전일 뿐입니다.

또한 과도하게 사용되는 패턴을 피하는 것은 Claude의 프롬프트가 시사하는 것보다 더 어렵습니다. 그들은 이렇게 말합니다:

NEVER use generic AI-generated aesthetics like overused font families (Inter, Roboto, Arial, system fonts)

그래서 대신 모델은 Jost나 Cormorant Garamond 같은 다른 폰트를 과도하게 사용합니다. 그러면 Inter가 올바른 선택인 상황을 처리할 수 없게 됩니다. 결국, 나쁜 습관을 억지로 없앨 수는 있지만, 어떤 식으로든 같은 것을 반복적으로 하게 됩니다.

참조 이미지

단어를 완전히 건너뛰고 모델에게 원하는 것을 보여주면 어떨까요? 마음에 드는 디자인의 스크린샷을 제공하고 비슷한 것을 만들어달라고 요청하는 것입니다.

이것은 모델이 항상 만드는 같은 2-3개의 레이아웃 외에 새로운 레이아웃을 만든 첫 번째 전술이었습니다. 모델은 자체적으로 절대 반 화면 이미지를 만들지 않습니다.

이미지는 많은 정보를 공유하는 매우 효율적인 방법입니다. 모델은 레이아웃, 간격, 색상 관계, 밀도를 한꺼번에 파악합니다. 프롬프트에서 설명할 생각도 못 할 것들입니다. 하지만 불안정합니다. 복잡한 레이아웃이나 애니메이션은 재현할 수 없습니다. 그리고 모델이 참조 외에 더 많은 콘텐츠를 채워야 하면, 다시 기본 스타일로 돌아갑니다.

코드 및 스타일 템플릿

이것은 아마 가장 무차별적인 아이디어일 것입니다. 그냥 코드를 제공하는 것입니다. 이것이 현재 ChatGPT가 하는 방식입니다. 사이트를 만들 때 템플릿 라이브러리를 사용합니다.

이렇게 하면 당연히 품질이 크게 올라갑니다. AI에게 답을 직접 주는 것이니까요. 하지만 대부분의 사람들은 원하는 것에 대한 코드를 이미 가지고 있지 않습니다. 그래서 이것은 주로 플랫폼 빌더들이 다른 사람들을 위한 도구를 만들 때 사용하는 전술입니다.

다만 문제가 있습니다:

"Make a therapist website"

"Make a lawyer website"

"Make a plumber website"

"Make a bakery website"

AI에게 예시를 주면, 놀라울 정도로 비슷하게 생긴 웹사이트를 만들고, 맥락에 맞추기 위해 최소한의 조정만 합니다. 그래서 현재 ChatGPT가 사이트를 만들면, 프롬프트에 관계없이 같은 기술 스타트업처럼 보입니다.

안타깝게도, 이 모든 전술을 사용해도 일반적인 Wix 템플릿보다 더 나은 것을 만들었는지 확신하기 어렵습니다.

자기 반복

모델이 자신의 출력을 보고 개선하도록 두면 어떨까요? Wix 디자이너도 결국 여러 번 반복 작업을 합니다.

이론적으로는 모든 것을 해결합니다. 실제로는 20분 동안 작업하고, 10달러의 토큰을 소비하고, 금방 정체됩니다. 예를 들어, 앞서 만든 lighthouse 사이트를 반복 개선하도록 했습니다. 읽을 수 없는 버튼조차 인식하지 못했습니다.

자기 반복은 아마 미래의 방향일 것입니다. 하지만 오늘날의 모델은 아직 완전히 준비되지 않았습니다.

이 모든 접근법을 탐색한 후, 스타일을 개선하기 위한 실질적인 옵션들을 얻었습니다. 그 이상으로, AI 모델이 어떻게 작동하는지 훨씬 깊은 수준에서 이해하게 되었다고 느꼈습니다.

AI 모델에 대해 배운 것들

모델은 정말로 기본 스타일을 선호한다

모델에는 기본 미학이 내장되어 있습니다. 학습 데이터에 있는 평균적인 웹사이트와 같습니다. 결정을 내릴 때마다, 명시적인 이유가 없는 한 기본 스타일을 사용합니다. 그래서 AI 사이트가 그렇게 알아보기 쉽고, 자기 반복이 실제로 아무 효과가 없는 이유입니다. 모델은 독특한 디자인으로 수렴하지 않습니다. 기본값으로 수렴합니다. AI가 패턴을 깨기를 원한다면, 참조 이미지나 코드 샘플처럼 기본값에서 벗어나게 할 무언가를 제공해야 합니다.

이미지는 단어보다 대역폭이 높다

단어로 모델을 유도하기는 어렵습니다. "깔끔하고, 모던하고, 여백이 충분한"을 원한다고 한 단락을 써도 거의 소용없습니다. 항상 기본 스타일이 됩니다. 이미지는 더 많은 정보를 전달하기 때문에 모델이 독특한 디자인을 만들 수 있게 합니다. 스크린샷 하나가 간격, 색상, 레이아웃에 대한 수백 가지 세부 결정을 담고 있으며, 이것은 단어로는 정의할 수 없습니다. 따라서 코드 샘플이 없다면, 참조 이미지가 AI를 유도하는 가장 좋은 방법입니다.

미리 구축하는 것은 트레이드오프 곡선이다

우리가 시도한 모든 전술은 AI를 위해 결정을 미리 내리는 형태였습니다. 더 많이 제공하면 품질 상한선을 높일 수 있지만, 유연성을 잃습니다. 가능한 모든 사용 사례에 대비하는 것은 Repaint 같은 범용 플랫폼에서만 중요합니다. 본인만을 위한 것이라면, AI에게 구체적인 참조를 제공하여 시각적 품질을 최대화할 수 있고, 그렇게 해야 합니다.

AI로 더 나은 디자인을 만드는 방법

천편일률적인 결과를 피하는 가장 간단한 방법은 AI에게 독특한 시각적 참조를 제공하는 것입니다. 마음에 드는 사이트의 이미지, 코드 샘플, 또는 둘 다 활용하세요. 스타일을 잡으면, AI는 그에 맞는 더 많은 섹션을 생성할 수 있어야 합니다. 이것은 대부분의 사람들이 하는 것처럼 프롬프트를 반복적으로 주는 것보다 훨씬 효과적입니다.

또는 참조를 찾고 스타일을 구축하는 것이 부담스럽다면, Repaint를 사용해보세요. 우리는 코드 샘플과 디자인 변수가 포함된 대규모 스타일 라이브러리를 구축했습니다. 다양한 옵션이 있기 때문에 AI가 하나의 스타일에 갇히지 않습니다.

더 넓게 보면, 앱 디자인, 이미지 생성, 동영상 생성 등 어떤 시각적 AI 도구에서든 "더 고급스럽게 만들어줘"라고 말하는 대신, 더 많은 스크린샷과 예시를 제공해보세요. 훨씬 더 효과적입니다.