Teaching Your AI Web Design Some Actual Taste
Hello, I'm Maneshwar. I'm building git-lrc, a Micro AI code reviewer that runs on every commit. It is...
개요 #
Claude Code에 "모던한 랜딩 페이지 만들어줘"라고 입력하면 어떤 결과가 나올까. 보라색에서 파란색으로 넘어가는 그라디언트, 모든 텍스트에 적용된 Inter 폰트, 제목마다 위에 떠 있는 둥근 아이콘 타일. 작동은 하지만 어디서 본 것 같은 페이지가 나온다.
개발자 Maneshwar는 이 현상을 "AI 슬롭(AI slop)"이라 부르며, 자신이 이 문제와 오래 씨름한 끝에 찾은 해법을 Dev.to에 공개했다. 마법 같은 프롬프트 한 줄도, 어디선가 복사해온 1만 줄짜리 DESIGN.md도 아니다. 세 가지 작업 방식과 몇 개의 도구가 전부다.
슬롭은 왜 생기는가 #
Maneshwar가 먼저 짚는 건 원인이다. 그는 이 문제가 기술적인 게 아니라고 말한다. 모델은 CSS를 못 쓰지 않는다. 오히려 아주 잘 쓴다. 문제는 결과물이 **평범하다(generic)**는 것이고, 평범함의 기준은 계속 움직인다.
모델이 내일 열 배 좋아진다고 해도 달라지지 않는다. 기본이라 불리는 수준의 바닥이 올라갈 뿐, 슬롭도 같이 따라 올라간다.
이유는 학습 데이터에 있다. 공개된 인터넷으로 학습한 모델은 그 인터넷의 통계적 중앙값을 익힌다. 2026년 디자인 인터넷의 중앙값은 Tailwind 템플릿, Vercel 스타터, 그리고 다른 AI가 만든 랜딩 페이지다. "모던하게"라고 요청하면 지금까지 배포된 모든 랜딩 페이지의 산술 평균이 돌아온다. 그 평균이 슬롭이다.
그래서 그는 해법이 더 좋은 모델이 아니라 사용자 본인, 정확히는 사용자의 취향에 있다고 결론짓는다.
1단계: 취향부터 모아라 #
Photo by Christina Morillo on Pexels
"AI에는 취향이 없다"는 말은 다들 안다. 그런데 Maneshwar가 지적하는 건 그다음이다. 넘겨줄 취향이 사용자에게 있어야 하는데, 대부분은 그걸 의식적으로 쌓아본 적이 없다. 그냥 감으로 한다.
그래서 1단계는 지루하지만 건너뛸 수 없다. 마음에 드는 걸 직접 모으는 일이다.
Dribbble에서 "web design"을 검색하고 인기순으로 정렬한 다음, 마음이 움직이는 히어로 페이지를 스크린샷으로 저장한다. Pinterest도 마찬가지다. Maneshwar가 특히 추천하는 곳은 X(트위터)다. 좋은 UI 작업이 다른 어디보다 먼저 올라오는 경우가 많기 때문이다. 스크린샷뿐 아니라 실제 사이트 링크도 함께 저장하라고 조언한다. 정지된 이미지보다 살아 있는 페이지가 모델에게 훨씬 많은 정보를 준다.
여기서 한 걸음 더 나간 게 그의 방식이다. 모은 자료를 inspo_FINAL_v3 같은 폴더에 썩히는 대신, Claude Code에게 작은 영감 라이브러리 웹앱을 만들게 했다. 그의 라이브러리는 디자인 스타일별로 자료를 묶고, 실제 디자인 용어로 미감에 이름을 붙이고, 항목마다 키워드를 달아준다. 스크린샷을 클릭하면 이미지 프롬프트(나중에 어울리는 히어로 배경을 생성할 때 쓴다)나 전체 브리프(페이지 전체를 생성할 때 쓴다)를 복사할 수 있다.
목적은 남의 디자인을 베끼는 게 아니다. 빈 프롬프트에서 시작해 평균값을 받아드는 상황을 없애는 것이다.
2단계: Claude Code에 없는 도구를 붙여라 #
Maneshwar는 기본 상태의 Claude Code를 "개발 실력은 탄탄하지만 시각적 판단력은 동전 던지기 수준"이라고 표현한다. 그래서 더 나은 눈과 손을 쥐여준다. 세 가지 범주면 충분하다고 그는 정리한다.
제대로 된 디자인 스킬 #
Anthropic 기본 frontend-design 스킬은 출발점으로는 괜찮았지만, 지금은 오히려 막으려던 슬롭을 만들어낸다고 그는 평가한다. 대신 그가 쓰는 건 Paul Bakaus가 만든 오픈소스 Claude Code 스킬 Impeccable이다.
접근법이 다르다. "AI가 만든 것처럼 보이지 않게 해줘"라고 모호하게 부탁하는 대신(이건 절대 안 먹힌다), 구체적인 슬롭 패턴을 하나하나 이름 붙여 피하라고 지시한다.
슬래시 명령처럼 호출하는 커맨드들이 함께 들어 있다. Maneshwar가 자주 쓰는 것들:
/critique— 위계와 명료성에 대한 솔직한 UX 리뷰/bolder— 안전하고 밋밋한 디자인을 밀어붙이기/quieter— 과한 디자인을 가라앉히기/polish— 배포 전 정렬·간격 최종 점검
내부적으로는 타이포그래피, 색상, 공간 디자인, 반응형, 인터랙션, 모션, UX 라이팅 일곱 영역에서 슬롭을 잡아낸다. 실제 사이트에서 슬롭 패턴을 하이라이트해주는 Chrome 확장도 있다.
이미지·영상 MCP #
Claude Code는 그림을 그리지 못한다. 히어로 텍스트 뒤에 깔고 싶은 산맥 이미지를 만들어낼 수 없다. 여기서 Higgsfield MCP를 붙인다. 연결 하나로 30개가 넘는 이미지·영상 모델에 접근할 수 있다. 원하는 히어로 이미지를 설명하면 생성해서 해당 섹션에 넣어준다. 다른 탭 다섯 개를 오갈 일이 없어진다.
컴포넌트 레지스트리 #
버튼, 카드, 가격 섹션, 페이지네이션 같은 작은 요소는 21st.dev에서 찾는다. 오픈 레지스트리라 컴포넌트마다 "copy prompt" 버튼이 붙어 있고, 그걸 Claude Code에 붙여넣으면 자신의 코드베이스 안에서 스택에 맞게 다시 만들어준다.
도구 쇼핑 전 경고 #
Maneshwar는 본인도 여러 번 빠졌다는 함정을 짚는다. 스킬 하나만 더 있으면 디자인 문제가 다 풀릴 거라고 믿게 되는 것이다.
멋진 사이트를 만들어주는 화려한 스킬들이 있다. 문제는 그런 스킬일수록 범위가 좁고 규정이 빡빡해서, 매번 딱 한 종류의 결과만 내놓는다는 데 있다. 그건 취향이 아니라 단계만 하나 늘어난 템플릿이라고 그는 진단한다. Impeccable과 Higgsfield를 쓰는 이유도 유연하기 때문이다. 대신 알아서 훌륭한 결과를 뽑아주지는 않는다. 그건 여전히 사용자의 프롬프트와 취향에 달렸다.
3단계: 한 번에 끝내지 말고 루프를 돌려라 #
Photo by Maneshwar가 가장 크게 달라졌다고 꼽는 부분이다. 한 방(one shot)에 끝내려 하지 말 것.
원샷은 복권이다. "프리미엄하게 만들어줘"라고 치고 엔터를 누른 뒤 기도하는 방식. 가끔 당첨되지만 보통은 폰트만 조금 나아진 슬롭이 나온다. 대신 처음에 그물을 아주 넓게 던지고, 거기서 좁혀 들어간다.
그가 실제로 돌리는 순서는 이렇다. Kestrel이라는 가상의 AI 분석 스타트업 랜딩 페이지를 만들고, 목표는 데모 예약이라고 가정한 예시다.
첫째, 다섯 가지 스타일로 다섯 개 버전을 한꺼번에. 하나가 아니라 다섯 개다. 1단계에서 영감 라이브러리를 만들어뒀다면 Claude Code에게 그걸 보고 다섯 개 미감 계열을 뽑아 각각 페이지를 만들라고 시키면 된다. 한 화면에 나란히 놓고 보면 어느 방향에 가능성이 있는지 바로 드러난다. 터미널에서 한 번에 하나씩 눈을 찌푸려가며 보는 방식으로는 알 수 없는 것이다. 그는 히어로 뒤에 큰 시네마틱 이미지를 깐 "고요하고 광활한" 미니멀 방향을 골랐다.
둘째, 고른 방향으로 세 가지 변주. 같은 미감에 본문 레이아웃만 다르게 간다. 하나는 극단적으로 수직적이고 미니멀하게, 하나는 스크롤을 따라 옆에서 함께 움직이는 인덱스가 있는 "장부(ledger)" 스타일로, 하나는 각 섹션을 테두리로 감싸는 식으로. 그는 스크롤 인덱스가 마음에 들어 장부 스타일을 택했다.
셋째, 다른 걸 손대기 전에 히어로 이미지부터 확정. Higgsfield MCP로 조용한 미감에 맞는 2K 옵션 네 개를 받아 실제 히어로 자리에 놓고 본다. 너무 흑백이면 색을 조금 넣은 변주를 요청한다. 그는 은은한 황금빛 "알펜글로" 버전을 골랐다.
넷째, 전환과 무게감. 히어로가 본문으로 뚝 끊기지 않고 서서히 녹아들도록, 요소들이 약간의 무게를 지고 로드되도록 요청한다. 빠르고 가벼운 느낌 대신 프리미엄한 느낌을 내기 위해서다.
핵심은 매 단계마다 선택지를 눈으로 보고 고른다는 것이다. 생성 결과 하나를 무작정 믿지 않는다.
프롬프트에 넣을 만한 네 가지 #
거대한 디자인 문서는 필요 없다고 그는 잘라 말한다. 문서가 너무 구체적이면 매번 똑같은 결과가 나오고, 그건 옷만 잘 차려입은 슬롭이다. 그가 느슨하게 전달하는 건 네 가지다.
- 미감(Aesthetic) — 지향하는 디자인 계열
- 레퍼런스 이미지 — 취향 라이브러리가 값을 하는 지점. 스크린샷을 넣거나, 더 좋게는 마음에 드는 사이트의 실제 URL을 넣는다. 내용을 베끼는 게 아니라 느낌을 맞추는 작업이다.
- 의도(Intent) — 이게 뭐고 왜 존재하는지. SaaS 제품인지 이벤트 페이지인지, 독자는 누구고 무엇을 읽거나 클릭하거나 입력하게 하고 싶은지.
- 가드레일(Guardrails) — 항상 지킬 것과 절대 하지 말 것. 안티 슬롭 조항이다. "보라색 그라디언트 금지. Inter 금지. 3D SaaS 블롭 금지."
비장의 무기: 실시간 조정 바 #
여기까지 해도 페이지가 거의 맞는데 살짝 미니멀한 느낌이 남았다고 한다. "좀 더 눈에 띄게"류의 프롬프트로 더듬는 대신, 그는 Claude Code에게 개발 서버에 실시간 조정 바를 추가하라고 시켰다. Claude Design 안에 있는 패널 같은 것이다. 폰트 계열, 폰트 크기, 강조색, 모션, 등장 거리 — 디자인 결정이 걸리는 항목이면 무엇이든.
이제 눈으로 보며 반복한다. 페이지 열 개를 다시 만들어놓고 비교하는 대신 폰트를 실시간으로 넘겨본다. 차이가 그 자리에서 보이니 결국 마음에 드는 지점까지 도달하게 된다는 것이다.
레퍼런스는 히어로에만 쓰는 게 아니라는 조언도 덧붙인다. 본문 레이아웃을 어떻게 하고 싶은지도 URL과 스크린샷으로 넘기면 된다. Claude Code는 살아 있는 페이지를 보고 그 구조를 적용할 수 있다.
마무리 #
Maneshwar는 자신의 글이 규칙집이 아니라고 못 박는다. 무언가가 딱딱한 공식이 되는 순간, 그것 나름의 슬롭을 만들어내기 시작하기 때문이다. 어떤 프로젝트에든 구부려 쓸 수 있는 유연한 작업 방식, 그가 강조하는 건 거기까지다.
넘겨줄 것이 생기도록 취향을 기른다. 에이전트에 디자인 스킬, 이미지 MCP, 컴포넌트 레지스트리를 붙인다. 그리고 루프를 돌린다. 처음엔 그물을 넓게, 마지막엔 눈으로 조정하며. 그래야 주사위 한 번에 운명을 맡기지 않는다.
"해자는 애초에 도구함이 아니었다. 언제나 당신의 취향이었다."
이 글은 위 출처를 바탕으로 한국 독자를 위해 재작성한 기사입니다. 원문의 사실과 수치에 근거하며, 별도의 견해를 포함하지 않습니다.