AI 슬롭이 뭐길래? Hallmark으로 보는 2026 안티 AI 디자인
AI 슬롭이 뭐길래? Hallmark 디자인 스킬로 보는 2026 안티 AI 슬롭 완벽 가이드
요즘 AI로 만든 웹사이트를 보면 이상하게 다 비슷해 보이지 않으세요? 보라색 그라데이션 히어로, 어디서 본 듯한 폰트, 3개씩 늘어선 기능 카드. 이렇게 "AI가 만들었네"라는 티가 확 나는 결과물을 요즘은 AI 슬롭이라고 부릅니다. 그리고 이 문제를 정면으로 겨냥한 오픈소스 도구가 2026년 개발자 커뮤니티에서 빠르게 퍼지고 있어요. 바로 Hallmark입니다.
용어: AI 슬롭(slop)이란 AI가 학습된 기본값으로만 뽑아내서 어디서나 똑같아 보이는, "AI 티"가 나는 저품질 결과물을 말해요. 디자인에서는 보라색 그라데이션·중첩 카드·판박이 레이아웃처럼 패턴이 뻔히 읽히는 UI가 대표적입니다.
AI가 만든 웹은 왜 다 똑같아 보일까 (AI 슬롭 정의)
결론부터 말하면, 모든 AI 코딩 에이전트가 똑같은 웹사이트를 만들기 때문이에요. Claude Code, Cursor, Codex 어떤 도구를 쓰든 Inter 폰트에 보라색 그라데이션 히어로, 3개 중첩 기능 카드가 반복됩니다. 학습된 평균값으로 돌아가는 거죠.
이게 단순히 "취향이 촌스럽다"는 미학의 문제라면 그냥 넘어가도 됩니다. 문제는 신뢰예요. 방문자가 "이 페이지 AI가 디자인했네"라고 눈으로 알아채기 시작하면, 그 패턴 인식이 브랜드 신뢰를 갉아먹습니다. 정성껏 만든 서비스라도 첫인상에서 "대충 찍어낸 것"으로 읽히면 손해잖아요.
Hallmark은 여기에서 출발합니다. 제작자는 Hassan El Mghari(GitHub 핸들 Nutlope), 후원은 AI 인프라 회사 Together AI, 라이선스는 자유롭게 쓸 수 있는 MIT입니다. 저장소는 2026년 4월 27일에 만들어져 6월 26일 최종 커밋을 찍었고, GitHub 스타는 2026년 7월 16일 기준 8,717개까지 늘었어요. 짧은 기간에 빠르게 주목받은 셈입니다.
Hallmark이 내놓은 해법: 구조적 다양성
Hallmark의 핵심 약속은 한 문장입니다. "서로 다른 브리프로 만든 두 페이지가 다른 사이트처럼 느껴져야 한다."
여기서 중요한 건 색만 바꾸는 시각 다양성이 아니라 **구조적 다양성(structural variety)**이라는 점이에요. 예를 들어 두 페이지가 "히어로 → 3개 기능 카드 → CTA → 푸터"라는 똑같은 리듬을 공유하면, 아무리 색을 바꿔도 결국 같은 템플릿입니다. Hallmark은 이걸 거부하고 페이지마다 다른 골격(매크로구조)을 쓰게 강제해요.
작동 순서는 이렇습니다. 브리프에 맞는 매크로구조를 고르고, 20개 명명된 테마(Specimen, Atelier, Brutal, Terminal, Midnight, Aurora 같은 이름들) 중 하나를 입힌 뒤, 슬롭 테스트 게이트로 검사하고, 자가비평을 통과해야 결과물을 내놓습니다. 안티패턴이 걸리면 다시 만들어요.
Hallmark 스스로 밝히길, 이 규칙셋은 안티 AI 슬롭 디자인 분야의 합의(Anthropic의 프론트엔드 디자인 스킬, Claude 쿡북의 미학 가이드, 2026년 "촉각적 반란(tactile rebellion)" 흐름)에서 뽑아냈다고 합니다. 그리고 "의도적으로 짧고 지루하고 단호하게" 만들어서, LLM이 익숙한 기본값으로 돌아가는 걸 막는다고 못 박아요.
58개 게이트와 6축 자가비평이 작동하는 방식
Hallmark이 AI 슬롭을 걸러내는 두 축은 게이트와 자가비평입니다.
첫째, 58개 슬롭 테스트 게이트예요(라이브 스킬 SKILL.md v1.1.0 기준). 이름이 붙은 안티패턴을 하나하나 검사합니다. 대표적으로 이런 것들이에요.
- 보라색 그라데이션 히어로
- Inter 폰트를 제목·본문에 똑같이 전면 사용
- 3열 기능 그리드
- 카드 안에 카드를 또 넣는 중첩(card-in-card)
- 그라데이션으로 글자를 칠하는 헤드라인
- 화면을 꽉 채워 가운데 정렬한 히어로(min-height:100vh)
- 순수 검정(#000)과 순수 흰색(#fff)만 쓰기
Hallmark의 표현을 빌리면 "하나 보이면 문제, 한 화면에 둘 보이면 확진"입니다.
둘째, **6축 자가비평(pre-emit self-critique)**이에요. 결과물을 내보내기 전에 여섯 항목을 1~5점으로 스스로 채점하고, 하나라도 3점 미만이면 다시 씁니다. 여섯 축은 Philosophy(철학), Hierarchy(위계), Execution(실행), Specificity(구체성), Restraint(절제), Variety(다양성)이에요. 재밌는 건 이 점수를 결과물 최상단 CSS 주석에 도장처럼 새긴다는 점입니다(/* Hallmark · pre-emit critique: P5 H4 E5 S4 R5 V5 */). 어떤 기준으로 통과했는지 코드에 흔적을 남기는 거죠.
4개 동사: 빌드·audit·redesign·study
Hallmark은 새로 만드는 것 말고도 네 가지 동사로 쓸 수 있어요. 상황에 맞게 골라 쓰면 됩니다.
- 빌드(기본): 새 UI를 만듭니다. 매크로구조를 고르고, 규칙셋을 적용하고, 슬롭 테스트를 거쳐 반환해요.
hallmark audit <대상>: 기존 코드를 안티패턴 목록으로 채점합니다. 우선순위가 매겨진 개선 리스트만 주고, 코드를 직접 고치지는 않아요. 진단만 해주는 셈입니다.hallmark redesign <대상>: 구조를 버리되 카피·정보구조·브랜드는 유지한 채, 완전히 다른 "지문(fingerprint)"으로 다시 짓습니다.hallmark study <스크린샷 | URL>: 마음에 드는 디자인에서 DNA(매크로구조, 폰트 페어링, 컬러 앵커)를 추출해요. 픽셀 그대로 복제하거나 유료 템플릿을 베끼는 건 거부하고, 원하면 다른 AI 도구로 넘길 수 있는 이식용design.md를 뽑아줍니다.
설치도 한 줄이면 끝나요. npx skills add nutlope/hallmark를 실행하면 Claude Code, Cursor, Codex 각각의 스킬 폴더에 규칙셋이 자리를 잡습니다.
정직한 카피: 없는 지표는 지어내지 않는다
Hallmark에서 개인적으로 가장 인상적인 규칙은 디자인이 아니라 카피에 있어요. 게이트 46번, "정직한 카피" 규칙입니다.
핵심은 이렇습니다. 사용자가 수치를 주지 않았으면 AI가 지어내지 않는다. "+47% 전환", "50,000+ 팀이 신뢰", "10배 빠름" 같은 문구는 근거 없이 붙이는 순간 그 자체가 슬롭이라는 거예요. 후기 개수, 로고 나열, 사례 수도 같은 규칙을 따릅니다.
이건 AI 슬롭을 시각이 아니라 신뢰의 문제로 본다는 Hallmark의 철학과 맞닿아 있어요. 예쁜 랜딩페이지에 가짜 숫자를 채워 넣으면, 디자인이 아무리 좋아도 결국 방문자를 속이는 겁니다. 실제로 한국에서도 근거 없는 효과·후기 표기는 표시광고법 리스크가 있으니, 이 규칙은 법적으로도 안전한 방향이에요.
Hallmark은 안전장치도 분명히 합니다. "코드베이스를 밀어버릴 라이선스가 아니다"라고 스스로 못 박고, 기존 프로젝트에서 파일이나 컴포넌트를 사용자 승인 없이 삭제하지 않아요. 편집 전에 어떤 파일을 고치고 만들고 지울지 먼저 밝히고, 삭제는 명시적 확인을 받습니다.
우리가 배울 점: 팀·1인기업의 콘텐츠·랜딩 적용
Hallmark이 개발 도구라고 해서 개발자에게만 의미 있는 건 아니에요. 콘텐츠와 랜딩을 만드는 팀, 그리고 혼자 일하는 1인기업에게도 그대로 쓸 수 있는 원칙이 세 가지 있습니다.
첫째, 다양성을 구조에서 확보하세요. 카드뉴스든 랜딩이든 매번 같은 틀에 색만 바꾸면 그게 곧 AI 슬롭입니다. 페이지마다, 콘텐츠마다 골격 자체를 다르게 가져가면 "찍어낸 느낌"이 사라져요.
둘째, 숫자는 있는 것만 씁니다. Hallmark의 게이트 46번처럼, 근거 없는 전환율이나 "수천 명이 신뢰" 같은 문구는 빼는 게 낫습니다. 정직한 카피가 길게 보면 신뢰를 쌓아요.
셋째, 내보내기 전에 스스로 점검하는 습관을 만드세요. 6축 자가비평처럼 "이거 뻔하지 않나?", "AI 티 나는 요소가 둘 이상 겹치지 않았나?"를 발행 전에 한 번 걸러주는 것만으로도 결과물의 품질이 달라집니다.
AI가 콘텐츠와 디자인을 대량으로 찍어내는 시대일수록, 안티 AI 슬롭 디자인의 원칙은 경쟁력이 됩니다. Hallmark은 그 원칙을 코드로 강제한 첫 사례일 뿐, 진짜 배울 점은 "AI에게 다 맡기지 말고, 뻔함을 걸러내는 기준을 손에 쥐어라"는 태도예요.
마무리
AI 슬롭은 취향의 문제가 아니라 신뢰의 문제입니다. 방문자가 "AI가 찍어냈네"라고 알아채는 순간 브랜드 인상이 깎이니까요. Hallmark이 던지는 메시지는 분명해요. 색이 아니라 구조를 바꾸고, 없는 숫자는 지어내지 말고, 내놓기 전에 스스로 채점하라는 것. 팀이든 1인기업이든 콘텐츠와 랜딩페이지를 만들 때 이 세 가지만 지켜도 "AI 티"의 절반은 걷어낼 수 있습니다. 도구를 그대로 설치하지 않더라도, Hallmark이 정리한 안티패턴 목록을 체크리스트 삼아 우리 결과물을 한 번 훑어보는 것부터 시작해 보세요.
자주 묻는 질문(FAQ)
Q. AI 슬롭이 정확히 뭔가요?
AI 슬롭은 AI가 학습된 기본값으로만 뽑아내서 어디서나 똑같아 보이는 저품질 결과물을 말해요. 디자인에서는 보라색 그라데이션 히어로, 중첩 카드, 판박이 3열 그리드처럼 "AI가 만들었네"라는 티가 뚜렷한 UI가 대표적입니다.
Q. Hallmark 디자인 스킬은 어떻게 설치하나요?
npx skills add nutlope/hallmark 한 줄이면 됩니다. 실행하면 Claude Code, Cursor, Codex 각각의 스킬 폴더에 규칙셋이 자동으로 배치돼요. MIT 라이선스라 자유롭게 쓸 수 있습니다.
Q. Hallmark은 기존 프로젝트를 망가뜨리지 않나요?
네, 안전장치가 있어요. Hallmark은 사용자 승인 없이 프로덕션 파일이나 컴포넌트를 삭제하지 않습니다. 편집 전에 어떤 파일을 고치고 만들고 지울지 먼저 밝히고, 삭제는 명시적 확인을 받은 뒤에만 진행합니다.

