AI가 뽑아낸 '그저 그런' 디자인, 이젠 질렸다고? 당신의 웹 디자인에 '취향'을 입히는 법

어디 한번 맞춰볼까요?

당신은 Claude Code를 켜고 "모던한 랜딩 페이지 만들어줘"라고 입력한 다음 엔터를 눌렀겠죠. 결과물은 기술적으로는 작동하지만, 어딘가 모르게 스크롤하며 지나쳤던 다른 모든 사이트들과 똑같아 보였을 겁니다.

보랏빛에서 푸른빛으로 넘어가는 그라디언트. 폰트는 온통 Inter. 모든 헤딩 위에 둥둥 떠 있는 작은 둥근 아이콘 타일들. 세상 어떤 SaaS 서비스에 갖다 붙여도 위화감 없는 히어로 섹션까지.

축하합니다. 당신은 방금 'AI 슬롭(Slop)' 한 그릇을 신선하게 대접받았습니다.

저는 이 'AI 슬롭'과의 싸움을 꽤 오랫동안 벌여왔습니다. 그리고 제가 어떻게 이 지루한 패턴을 깨부쉀는지 그 과정을 여러분께 알려드리고자 합니다. 단 하나의 마법 같은 프롬프트로 해결한 것도 아니고, 어디선가 복사한 1만 줄짜리 DESIGN.md 파일 덕분도 아닙니다. 그저 세 가지 움직임, 몇 가지 도구, 그리고 '원샷'에 모든 걸 맡기지 않는 작업 방식이 전부였습니다.

도대체 왜 '슬롭'이 생겨날까?

불편한 진실이지만, 잠시 곰곰이 생각해 볼 가치가 있습니다.

'슬롭'의 문제는 기술적인 결함이 아닙니다. AI 모델이 CSS 코드를 못 짜는 게 아니거든요. 솔직히 말해, 그들은 CSS를 기가 막히게 잘 짭니다. 문제는 결과물이 너무 일반적이라는 데 있습니다. 그리고 이 '일반적'이라는 기준은 계속 움직이는 목표입니다.

만약 AI 모델의 성능이 내일 당장 10배 더 좋아진다고 해도, 그들은 단지 '기본'이라고 불리는 것의 기준을 올릴 뿐입니다. 바닥은 올라가고, '슬롭'도 그에 맞춰 이동합니다.

왜냐고요? 공개 인터넷으로 학습된 모델은 공개 인터넷의 통계적 중심을 학습하기 때문입니다. 2026년 디자인 인터넷의 중심은 테일윈드 템플릿, Vercel 스타터, 그리고 다른 AI 생성 랜딩 페이지들로 가득합니다. "모던한 디자인"을 요청하면, 지금까지 출시된 모든 랜딩 페이지의 수학적 평균값을 얻게 되는 셈이죠. 그 평균이 바로 '슬롭'입니다.

그러니 해결책은 더 나은 모델이 아닙니다. 해결책은 바로 당신입니다. 더 구체적으로는, 당신의 '취향'이죠. 그리고 많은 개발자들이 이 지점에서 제대로 요리하기보다 대충 타협하려 듭니다.

AI 슬롭 문제 이미지

네, 바로 이게 우리가 흔히 타협하는 지점입니다. 이 글의 나머지 부분은 이와는 정반대의 이야기를 다룰 겁니다.

자, 본격적으로 파고들기 전에 전체 그림을 한눈에 보시죠.

전체 게임 흐름도

1단계: 나만의 '취향'을 기르세요 (없는 것을 주입할 수는 없으니까)

"AI는 취향이 없다"는 말을 수백 번 들었을 겁니다. 좋습니다. 하지만 아무도 대놓고 말하지 않는 교묘한 후속 질문은 바로 '넘겨줄 취향은 당신에게 있느냐'는 것입니다. 우리 대부분은 의도적으로 취향을 만들어 본 적이 없죠. 그저 '느낌 가는 대로' 작업했을 뿐입니다.

그래서 첫 번째 단계는 지루하고 화려하지 않으며, 타협할 수 없는 필수 과정입니다. 바로 '마음에 드는 것들을 수집'하는 겁니다.

까치처럼 예쁜 것을 모아보세요. Dribbble에 접속해서 "web design"을 검색하고 인기순으로 정렬한 다음, 뭔가 가슴을 울리는 히어로 페이지들을 스크린샷 찍기 시작하세요. Pinterest에서도 똑같이 해보세요.

그리고 제가 개인적으로 가장 좋아하는 방법은 바로 Twitter(X)입니다. 이곳에는 다른 어떤 플랫폼보다도 정말 말도 안 되는 양의 최고급 UI 작업물들이 가장 먼저 올라오죠. 스크린샷을 저장하고, 라이브 사이트 링크도 저장하세요. 실제 페이지는 평평한 이미지보다 모델에게 훨씬 더 많은 정보를 전달합니다.

이제 이 스크린샷들을 inspo_FINAL_v3 같은 폴더에 썩혀둘 수도 있습니다. 하지만 좀 더 재미있게 활용하는 방법은 Claude Code를 시켜서 나만의 작은 영감 라이브러리 웹 앱을 만들어보는 겁니다. 제가 실무에서 이 부분을 테스트해 봤을 때, 꽤나 효율적인 작업 방식이라는 걸 깨달았습니다.

제 라이브러리는 모든 것을 디자인 스타일별로 묶고, 실제 디자인 용어로 미학적 이름을 붙여주고, 각 요소에 대한 키워드를 제공합니다. 스크린샷을 클릭하면 나중에 어울리는 히어로 배경을 생성할 수 있는 이미지 프롬프트나 전체 페이지를 생성할 수 있는 상세 브리프를 복사할 수 있습니다.

이렇게 하면 예쁜 사진 더미가 당신만의 취향이 담긴 재사용 가능한 팔레트로 변신하죠.

이 단계의 목표는 누군가를 모방하는 것이 아닙니다. 미래의 당신이 참고할 만한 기반을 마련하여, 빈 프롬프트와 평균적인 결과물에서 시작하지 않도록 하는 것입니다. 당신이 이미 좋아하는 방향에서 시작하는 거죠.

2단계: Claude Code에 '기본 제공 안 되는' 도구들을 장착시키세요

기본적인 Claude Code는 강력한 개발자이지만, 시각적 판단력은 동전 던지기 수준입니다. 그래서 우리는 이 친구에게 더 나은 '눈'과 '손'을 쥐여줘야 합니다. 세 가지 카테고리만으로도 충분합니다.

진정한 디자인 스킬

기본 Anthropic 프런트엔드 디자인 스킬은 괜찮은 시작이었지만, 이제는 오히려 '슬롭'을 생성하는 경향이 있습니다. 제가 지금 사용하는 것은 Paul Bakaus가 만든 오픈소스 Claude Code 스킬인 Impeccable입니다.

막연하게 모델에게 "AI가 생성한 것처럼 보이지 않게 해달라"고 애원하는(이건 절대 통하지 않습니다) 대신, 이 스킬은 영리한 작업을 수행합니다. 바로 특정 슬롭 패턴의 이름을 명시하고 모델에게 그것들을 피하라고 지시하죠.

하나의 스킬로 배포되며, 슬래시 명령처럼 호출하는 여러 명령어를 포함합니다. 제가 자주 사용하는 몇 가지는 다음과 같습니다.

/critique: 계층 구조와 명확성에 대한 솔직한 UX 리뷰
/bolder: 안전하고 지루한 디자인에 실제 임팩트를 불어넣기
/quieter: 과도하게 활기찬 디자인을 차분하게 가라앉히기
/polish: 출시 전 최종 정렬 및 간격 조정

내부적으로 Impeccable은 타이포그래피, 색상, 공간 디자인, 반응성, 인터랙션, 모션, UX 라이팅의 7가지 영역에서 '슬롭'을 찾아냅니다. 라이브 사이트에서 슬롭 패턴을 강조하는 크롬 확장 프로그램까지 있는데, 좀 무례하긴 하지만 굉장히 유용합니다. 문서에 있는 비포 앤 애프터 예시가 제가 설명하는 것보다 훨씬 잘 보여줄 겁니다.

Impeccable이 마음에 들지 않는다면, GitHub에는 비슷한 정신의 다른 '취향' 스타일 스킬들이 많이 있으며, 같은 원리로 작동합니다.

이미지 및 비디오 MCP (Multi-Control Platform)

Claude Code는 그림을 그릴 줄 모릅니다. 히어로 텍스트 뒤에 넣고 싶은 몽환적인 영화 같은 산맥 이미지를 생성할 수 없죠. 그러니 Higgsfield MCP로 그 능력을 부여하세요. 이 도구는 기본적으로 AI 에이전트에게 단일 연결을 통해 30개 이상의 이미지 및 비디오 모델에 대한 백스테이지 패스를 제공합니다. 히어로 이미지를 설명하면, 그것이 이미지를 생성하여 섹션에 넣어주고 끝입니다. 다른 5가지 도구를 왔다 갔다 할 필요가 없습니다.

컴포넌트 레지스트리

더 작은 요소들, 예를 들어 버튼, 카드, 가격 섹션, 페이지네이션(마지막으로 페이지네이션에 대해 깊이 고민해본 게 언제였던가요?) 같은 것들은 21st.dev를 둘러봅니다. 이곳은 각 컴포넌트가 "프롬프트 복사" 버튼과 함께 제공되는 오픈 레지스트리입니다. 그 프롬프트를 Claude Code에 붙여넣으면 여러분의 코드베이스 안에 스택에 맞게 컴포넌트가 재구축됩니다. 1단계의 '취향 사냥'을 컴포넌트 레벨까지 확대한 것이라고 생각하시면 됩니다.

도구 쇼핑을 하기 전 한 가지 경고

여기 함정이 있습니다. 저도 여러 번 빠져봤죠. 하나의 스킬만 있으면 모든 디자인 문제가 해결될 것이라고 스스로를 설득하기는 매우 쉽습니다. 하지만 그렇지 않습니다.

여러분은 멋진 사이트를 만들어주는 화려한 스킬들을 발견할 수 있습니다. 하지만 함정은, 그것들이 대개 매우 좁고 지시적이어서 매번 정확히 한 가지 종류의 결과물만을 제공한다는 겁니다. 그것은 '취향'이 아니라, 단계를 늘린 '템플릿'에 불과합니다. 제가 Impeccable과 Higgsfield를 좋아하는 이유는 바로 그것들이 유연하기 때문입니다.

유연하다는 것의 단점은 마법처럼 위대한 결과물을 만들어주지는 않는다는 겁니다. 여전히 당신의 프롬프트와 '취향'에 달려있습니다. 이것이 바로 핵심이죠. 제가 실무에서 수많은 툴들을 사용해 본 결과, 결국 가장 중요한 건 도구의 종류가 아니라, 그 도구를 어떤 의도를 가지고 어떻게 활용하느냐에 달려있다는 것을 깨달았습니다.

도구 스택 이미지

3단계: '원샷'이 아닌 '반복'으로 빌드하세요

이것이 저의 모든 것을 바꾼 사고방식의 전환입니다. 두 번 읽어보세요. '원샷'으로 끝내려 하지 마세요.

'원샷'은 복권과 같습니다. "프리미엄하게 만들어줘"라고 입력하고 엔터를 누른 다음 기도하죠. 가끔은 당첨될 수도 있습니다. 하지만 대개는 좀 더 나은 폰트가 적용된 '슬롭'을 얻게 됩니다. 대신, 처음에는 매우 넓은 그물을 던지고, 그 다음에 좁혀나가세요.

제가 실제로 사용하는 작업 흐름은 다음과 같습니다.

반복적인 빌드 흐름도

구체적인 예를 들어볼까요?

가상의 AI 분석 스타트업 'Kestrel'의 랜딩 페이지를 만들고 있고, 목표는 사람들이 데모를 예약하게 하는 것이라고 가정해 봅시다.

먼저, 다섯 가지 스타일로 다섯 가지 버전을 동시에 만듭니다. 한 개가 아니라 다섯 개입니다. 1단계에서 영감 라이브러리를 구축했다면, Claude Code에게 라이브러리를 참조하여 다섯 가지 미학적 계열을 뽑아내고 각 스타일에 맞춰 페이지를 만들라고 지시할 수 있습니다. 한 화면에 나란히 놓고 보면 어떤 방향이 가능성이 있는지 명확하게 드러나죠. 터미널에서 하나씩 째려보는 방식으로는 절대 알 수 없는 부분입니다. 저는 '광활하고 고요한' 미니멀리스트 디자인에 영화 같은 큰 이미지를 히어로 배경으로 사용하는 방향으로 결정했습니다.

그 다음, 그 한 가지 방향에서 세 가지 변형을 시도합니다. 같은 미학이지만, 본문 레이아웃을 다르게 해보는 거죠. 하나는 슈퍼 수직적이고 미니멀하게, 하나는 스크롤과 함께 인덱스가 따라오는 '원장(ledger)' 스타일로, 다른 하나는 각 섹션을 프레임으로 둘러싸는 방식으로요. 저는 '원장' 스타일을 선택했습니다. 스크롤 인덱스가 정말 멋졌거든요.

그 다음에 다른 어떤 것에 신경 쓰기 전에 히어로 이미지를 완성합니다. Higgsfield MCP를 실행시켜 고요한 미학에 맞는 2K 해상도 옵션 네 가지를 요청하고, 실제 히어로 슬롯에서 어떻게 보이는지 확인합니다. 너무 흑백인가요? 색상이 가미된 변형을 요청합니다. 그 부드러운 황금빛 "알펜글로우(alpenglow)" 스타일이 마음에 쏙 드네요! 바로 선택합니다.

그리고 전환 효과와 무게감을 더합니다. 히어로 섹션이 갑자기 끊기는 대신 본문으로 부드럽게 페이드인되도록 요청하고, 요소들이 약간의 무게감을 가지고 로드되도록 하여 전체적으로 빠르고 저렴한 느낌 대신 프리미엄한 인상을 주도록 합니다.

무슨 일이 일어나고 있는지 주목하세요. 모든 단계에서 저는 옵션을 보고 선택하는 과정을 거칩니다. 단 한 번의 생성 결과물을 맹목적으로 신뢰하지 않습니다. 이것이 바로 핵심 비법입니다. 예전에 제가 급하게 클라이언트 프로젝트를 진행할 땐, 이런 과정을 건너뛰고 '원샷'으로 대충 뽑아내고 나중에 수정하려다 오히려 시간만 더 잡아먹은 경험도 있었죠.

프롬프트에 넣을 가치 있는 네 가지

거창한 디자인 문서가 필요 없습니다. 그런 문서가 너무 구체적이면 매번 똑같은 결과물만 내놓을 뿐인데, 이는 겉만 번지르르한 '슬롭' 문제의 또 다른 형태일 뿐입니다. 저는 대략 네 가지를 전달합니다.

프롬프트 4요소

미학(Aesthetic). 당신이 추구하는 디자인의 전반적인 분위기나 스타일입니다.
참조 이미지(Reference image). 여기서 당신의 취향 라이브러리가 빛을 발합니다. 스크린샷이나, 더 좋은 방법은 당신이 좋아하는 실제 사이트의 URL을 제공하는 겁니다. 콘텐츠를 복사하는 것이 아니라, 느낌을 맞추는 거죠.
의도(Intent). 이것은 무엇이고 왜 존재하나요? SaaS 제품인가요? 이벤트 페이지인가요? 대상 고객은 누구이며, 그들이 무엇을 하기를 원하나요? 읽기, 클릭, 또는 양식 작성?
가이드라인(Guardrails). 항상 지켜야 할 것과 절대 피해야 할 것들입니다. 이것이 바로 '반(反)슬롭' 조항이죠. "절대 보라색 그라디언트를 사용하지 마라. Inter 폰트는 쓰지 마라. 3D SaaS 블롭은 금지."

숨겨진 무기: 라이브 트윅 바

이 모든 과정을 거친 후에도, 페이지가 거의 완벽하지만 미니멀한 느낌이 조금 강하다는 생각이 들었습니다. "더 돋보이게 해줘" 같은 추측성 프롬프트를 계속 날리는 대신, Claude Code에게 개발 서버에 Claude Design에서 볼 수 있는 것과 같은 라이브 트윅 바를 추가해달라고 요청했습니다. 폰트 패밀리, 폰트 크기, 강조 색상, 모션, 나타나는 거리 등 디자인 결정이 이루어지는 모든 요소를 조절할 수 있게 말이죠.

이제 저는 눈으로 직접 보면서 반복합니다. 미친 사람처럼 10개의 페이지를 새로 빌드해서 비교하는 대신, 실시간으로 폰트를 바꿔가며 확인하죠.

차이점을 즉시 볼 수 있다는 점이 마침내 당신이 진정으로 좋아하는 것을 얻게 하는 결정적인 요소입니다. 그리고 잊지 마세요. 참조는 히어로 섹션만을 위한 것이 아닙니다. 본문의 레이아웃을 어떻게 구성하고 싶은지에 대한 URL과 스크린샷도 모델에게 제공하세요. Claude Code는 라이브 페이지를 보고 그 구조를 적용할 수 있으니까요.

라이브 트윅 바

마무리하며

이 모든 것이 딱딱한 규칙서는 아닙니다. 문자 그대로 따르려 하지 마세요. 어떤 것이든 엄격한 공식이 되는 순간, 그것은 그 자체의 또 다른 형태의 '슬롭'을 만들어내기 시작합니다. 핵심은 어떤 프로젝트에도 적용할 수 있는 유연한 작업 흐름입니다.

넘겨줄 '취향'을 가지기 위해 당신만의 취향을 기르세요. 에이전트에게 디자인 스킬, 이미지 MCP, 그리고 컴포넌트 레지스트리를 장착시키세요. 그리고 '원샷'에 모든 것을 맡기지 않고, 처음에는 넓게 그물을 던지고 마지막에는 눈으로 직접 조절하는 '반복' 방식으로 빌드하세요.

진정한 해자는 도구 상자가 아니었습니다. 그것은 항상 당신의 '취향'이었죠.

이제 당신의 개성이 담긴 무언가를 만들어보세요. 그리고 그 보라색 그라디언트는 원래 있어야 할 곳에 두시고요.

만약 이 방법을 시도해보신다면, 어떤 결과물을 만들어내셨는지 꼭 보고 싶습니다. 댓글에 링크를 남겨주시면 함께 의견을 나눌 수 있으면 좋겠습니다.

git-lrc 이미지

AI 에이전트는 코드를 빠르게 작성합니다. 하지만 동시에 논리를 조용히 제거하고, 동작을 변경하며, 버그를 도입하기도 합니다. 심지어 당신에게 알려주지 않고 말이죠. 이런 사실을 보통 프로덕션 환경에서야 알게 됩니다.

git-lrc가 이 문제를 해결합니다. 이 도구는 Git 커밋에 연결되어 모든 diff가 병합되기 전에 리뷰합니다. 60초면 설정이 끝나고, 완전히 무료입니다.

어떤 피드백이나 기여자도 환영합니다! 온라인에서 소스 코드도 공개되어 있으며, 누구나 사용할 수 있습니다.

GitHub에서 별을 눌러주세요: {% github=https://github.com/HexmosTech/git-lrc %}

원문: https://dev.to/lovestaco/teaching-your-ai-web-design-some-actual-taste-4p13 수집일: 2026-08-09 00:43:54