AI가 자꾸 똑같은 보라색 그라데이션 다크 모드 사이트만 만드는 이유와, 내가 해결한 단 한 가지 방법
Why your AI keeps building the same purple-gradient dark-mode site and the one thing that actually fixed it for me
핵심 요약
AI가 생성하는 평범한 디자인에서 벗어나려면 프롬프트 대신 실제 사이트를 참조 모델로 활용해야 합니다.
- 평균의 함정 — AI는 학습 데이터의 중간값인 '평범한' 디자인을 생성함
- 프롬프트의 한계 — 형용사만으로는 AI가 생성하는 디자인의 클러스터를 벗어나기 어려움
- 참조 모델 활용 — 실제 사이트를 예시로 제공하면 AI가 특정 디자인을 모방하도록 유도 가능함
- 동적 디자인의 과제 — 정적 레이아웃은 모방이 쉽지만, 인터랙션과 애니메이션은 여전히 구현이 어려움
랜딩 페이지를 만들고 싶다고 해보자. 다크 모드 히어로 섹션, 인디고에서 보라색으로 이어지는 그라데이션, 빛나는 구체, 얇은 흰색 테두리가 있는 유리 질감 카드가 나온다. "보라색은 빼"라고 하면 보라색 계열의 바이올렛이 나온다. "그라데이션 빼"라고 하면 더 부드러운 그라데이션을 만들어낸다.
AI가 당신의 말을 무시하는 게 아니다. 그저 자기만의 마법을 부리고 있는 거다.
ThePrimeagen
즉, 진짜 문제는 이것이다. 프롬프트만으로는 평균에서 벗어날 수 없다. 형용사를 더 많이 쓴다고 해서 데이터 뭉치에서 빠져나오는 게 아니라, 그 안에서 위치만 조금 바뀔 뿐이다. "세련된", "프리미엄", "현대적인" 같은 단어들은 모두 같은 클러스터에 속해 있다.
내가 효과를 본 방법은 이렇다. 묘사하지 말고, 가리켜라. 실제로 존재하는 사이트 하나를 가져와서 그 사이트를 그대로 만들라고 시키는 것이다. 이제 AI는 수백만 페이지의 평균을 내는 게 아니라, 하나에 고정(anchor)되기 때문에 수렴할 곳이 따로 없게 된다.
셀프 홍보: 이런 걸 만들고 있다. Awwwards에서 가져온 실제 사이트 3개를 지정해 줬다. 스크롤에 따라 움직이는 제트기 전세기 페이지, 이미지가 그리드로 흩어지는 포트폴리오, 그리고 라이브 three.js 장면까지. AI가 이 각각을 단일 코드베이스, 스타일시트, 컴포넌트로 재구성해서 실제 파일 트리로 만드는 데 50초가 걸렸다. 보이스오버도 없었다.
three.js를 쓴 사이트가 제일 재밌다. 마크업을 복사할 수 없으니, 말로 설명해서는 절대 똑같이 만들 수 없기 때문이다.
참조하고 싶은 사이트가 있는가? 아래에 남겨주면 몇 개 돌려보겠다.
