그 익숙한 "AI가 생성한" 페이지

당신은 AI에게 랜딩 페이지(landing page)를 만들어 달라고 요청합니다. 몇 초 후, AI는 "꽤 괜찮아 보이는" 무언가를 건네줍니다.

상단에는 전체 너비의 보라색에서 파란색으로 이어지는 그라데이션 히어로(hero) 섹션이 있고, 중앙에는 굵은 헤드라인이, 그 아래에는 서브헤드라인과 둥근 버튼이 자리 잡고 있습니다. 아래로 스크롤하면 아이콘이 상단에 있는 세 개의 동일한 너비의 카드가 나란히 배치되어 있습니다. 여기에는 ⚡, 저기에는 🔒, 그 옆에는 📊 아이콘이 있고, 그 뒤를 이어 두 줄의 제목과 세 줄의 카피(copy)가 이어집니다. 계속 내려가면 "10,000개 이상의 팀이 신뢰함"이라는 문구가 나오고, 마지막으로 작은 저작권 텍스트로 마무리되는 4열 푸터(footer)가 나타납니다.

깔끔하고 대칭적이며 색상도 조화롭습니다. 하지만 3초 동안 그것을 응시하고 있으면 한 단어가 떠오릅니다. 바로 **가짜(fake)**입니다.

무엇이 잘못되었는지 정확히 짚어낼 수는 없지만, 당신은 그것을 AI가 만들었다는 사실을 즉각적으로 알 수 있습니다.

그래서 이러한 "AI 슬롭(AI slop)"이 실제로 어디에서 오는지, 그리고 Hallmark라는 오픈 소스 프로젝트가 어떻게 당신의 작업물을 더 세련되고 독특하게 만드는 데 도움을 주는지 설명해 드리겠습니다.

설령 이 프로젝트를 사용하지 않더라도, 당신은 스스로 AI 슬롭을 식별할 수 있는 체크리스트를 얻게 될 것입니다.

AI 슬롭은 미학의 문제가 아닙니다. 통계의 문제입니다.

먼저 가장 흔한 오해를 바로잡겠습니다. 대부분의 사람들은 AI 인터페이스가 보기 좋지 않은 이유가 "모델의 안목이 낮기 때문"이라고 가정합니다. 틀렸습니다. 진짜 이유는 모델이 작동하는 방식에 내재되어 있습니다.

대규모 언어 모델(Large Language Model, LLM)이 웹 페이지를 포함한 무엇인가를 생성할 때, 모델은 실제로 한 가지 일만 수행합니다. 바로 가장 가능성이 높은 다음 토큰(token)을 예측하는 것입니다. 그리고 "가장 가능성이 높다"는 것은 모델이 학습 데이터의 **평균(mean)**을 향해 계속 회귀한다는 것을 의미합니다.

모델이 얼마나 많은 랜딩 페이지를 보았을까요? 수백만 개입니다. 그리고 그 수백만 개 중 압도적인 대다수는 어떤 모습일까요?

• Hero → feature card 3개 → CTA → Footer로 이어지는 고정된 리듬
• 제목과 본문에 모두 Inter, Roboto 또는 Open Sans를 사용하는 동일한 서체
• 보라색-파란색 그라데이션, 중앙 정렬된 헤드라인, 100vh 전체 화면 Hero 섹션
• 아이콘으로 내장 이모지(emoji)를 사용하는 경향
• "XX,000개 이상의 팀이 신뢰합니다"라는 문구

따라서 모델은 통계적으로 정확하게, 그리고 충실하게 이 모드(mode)를 재현합니다. 우리가 "AI 슬롭 (AI slop)"이라고 부르는 것은 바로 그 분포의 평균 그 자체입니다. 이것은 버그가 아닙니다. 모델이 자신의 일을 잘 수행했을 때 나타나는 필연적인 결과입니다. 모델에게 "랜딩 페이지를 만들어줘"라고 요청하면, 모델은 지금까지 존재했던 모든 랜딩 페이지의 그림자를 겹겹이 쌓아 놓은 결과물을 건네줍니다.

이는 또한 직관에 어긋나는 현상을 설명해 줍니다. 즉, 프롬프트(prompt)를 아무리 상세하게 작성하더라도 이 문제를 근본적으로 해결할 수는 없다는 점입니다. 왜냐하면 당신이 싸우고 있는 대상은 단일한 지시 사항이 아니라, 학습 데이터(training data)에 존재하는 수백만 개 샘플의 중력(gravity)이기 때문입니다. 당신이 "디자인된 것처럼 보이게 해줘"라고 말하면, 모델은 고개를 끄덕인 뒤 곧바로 다시 그 모드로 미끄러져 들어갑니다. 모델이 본 데이터 속에서 "잘 디자인된 랜딩 페이지"는 모두 거의 비슷하게 생겼기 때문입니다.

시각적 다양성 ≠ 구조적 다양성

Hallmark의 핵심 통찰이자, 시장에 나와 있는 "AI 리스킨닝 (reskinning) 도구"들과 근본적으로 차별화되는 지점은 다음과 같습니다.

색상을 바꾸는 것은 변화가 아닙니다. 골격(skeleton)을 바꾸는 것이 변화입니다.

수많은 도구가 "다양한 스타일"을 생성한다고 주장하지만, 자세히 살펴보면 동일한 Hero → 카드 3개 → CTA 템플릿을 가져와 색상과 테두리 곡률(border radii)만 바꾼 것에 불과합니다. 구조는 동일합니다. 이러한 종류의 "시각적 다양성"은 인간의 눈을 속일 수 없습니다. 우리는 색상이 아니라 구조를 통해 "공식(formula)」을 인식하기 때문입니다.

Hallmark은 이를 다음과 같이 표현합니다. 서로 다른 두 가지 니즈를 위해 생성된 두 페이지는 "동일한 템플릿의 색상 변형이 아니라, 두 개의 서로 다른 웹사이트처럼 느껴져야" 합니다. Hallmark는 구조적 다양성을 고집합니다. 이것이 이 글 전체에서 가장 중요한 문장입니다.

Hallmark란 무엇이며, 무엇을 할 수 있는가?

Hallmark는 컴포넌트 라이브러리(component library)도 아니고, 웹사이트 생성기(website generator)도 아닙니다. 이것은 Together AI 팀이 구축한 디자인 규율(design discipline)이며, 여러분이 이미 사용 중인 AI 코딩 어시스턴트(AI coding assistant)에 연결할 수 있는 기술(skill) 형태로 패키징되어 있습니다. Claude Code, Cursor, Codex를 모두 지원합니다. 설치 방법은 한 줄의 명령어로 간단합니다:

npx skills add nutlope/hallmark

설치가 완료되면, AI에게 "페이지를 만들어줘 / 이것을 리팩터링(refactor)해줘 / 이 웹사이트를 분석해줘"라고 요청할 때마다, AI가 작업을 시작하기 전에 Hallmark의 규칙 세트(rule set)가 제어권을 가져옵니다.

그 철학은 단 한 문장으로 요약됩니다:

좋은 디자인을 "요청"하기 위해 더 영리한 프롬프트(prompt)를 작성하려고 애쓰지 마세요. 대신 명시적인 규칙 세트를 사용하여, 모델이 기본 모드(default mode)로 돌아가는 경로를 근본적으로 차단하십시오.

"안목(Taste)"을 "결정 가능한 게이트(Decidable Gate)"로 바꾸기

Hallmark는 날카롭고 항목별로 정리된 "AI 특징 목록(AI tell list)"을 유지합니다. 이 목록은 AI의 정체를 가장 잘 드러내는 특징들을 "치명적(critical)"이라고 라벨링합니다. 가장 흔한 몇 가지 예시는 다음과 같습니다:

• 보라색 그라데이션 히어로(Purple gradient hero): 보라색에서 파란색 또는 보라색에서 분홍색으로 변하는 배경 그라데이션에 중앙 정렬된 흰색 텍스트. "이것은 단연코 가장 알아보기 쉬운 AI 미학(aesthetic)입니다."
• 도처에 쓰인 Inter 폰트: 폰트 조합(font pairing) 없이 제목과 본문에 모두 동일한 Inter/Roboto 폰트를 사용하는 것.
• 3열 아이콘 카드: 동일한 너비를 가진 세 개의 카드이며, 각 카드 상단에 아이콘이 있는 형태.
• 그라데이션 텍스트 제목: background-clip: text를 사용하여 만든 그라데이션 헤드라인.
• 전체 화면 중앙 정렬 히어로: min-height: 100vh, 모든 요소가 중앙에 정렬되어 있으며, 한 줄의 텍스트와 하나의 큰 버튼이 있는 형태.
• 이탤릭체 강조 단어: 로만체(roman) 제목 중 한두 단어에 이탤릭체(italic)를 사용하여 강조하는 것.

Hallmark는 모든 전형적인 AI 슬롭(AI-slop, AI가 만든 조잡한 결과물) 패턴에 이름을 붙였으며, 이렇게 명명된 특성들은 해당 기술의 참조 문서(reference docs)에 기록되어 있습니다. AI가 생성한 인터페이스에 대해 Hallmark의 감사(audit) 명령이 실행되면, 이 명명된 특성들을 사용하여 AI 슬롭이 존재하는지 여부를 확인합니다.

그렇다면 Hallmark는 어떻게 이를 차단할까요? Hallmark에는 네 가지 방어 계층(layers of defense)이 있습니다.

계층 1: 색상이 아닌 골격(Skeleton)을 먼저 선택하기

이것은 가장 중요한 단계이며, "구조적 다양성 (structural variety)"을 직접적으로 겨냥합니다. 어떤 디자인 규칙 세트(design rule set)를 로드하기 전에, Hallmark는 AI가 먼저 21개의 명명된 "매크로구조 (macrostructures)" 중 하나를 선택하도록 강제합니다. 이것들은 색상 조합이 아닙니다. 헤딩(heading)이 어디에 위치하는지, 본문(body copy)이 어떻게 배치되는지, 무엇이 구분선(dividers) 역할을 하는지, 버튼의 톤은 어떠한지, 히어로 이미지(hero image)가 어떻게 처리되는지 등 페이지의 골격 형태를 하나의 명명된 선택지로 묶어놓은 것입니다.

• Stat-Led: 데이터가 강조해야 할 핵심 요소인 경우.
• Workbench: 기능적 작업 및 워크플로 데모(workflow demos)에 집중하는 경우.
• Manifesto: 선언문이나 일련의 가치를 제시하는 경우.
• Letter: 서간체(epistolary style)로 콘텐츠를 제시해야 하는 경우.
• Bento Grid: 세분화된 콘텐츠가 많거나, 동일하게 중요한 여러 진입점(entry points)이 있는 경우.
• …

더 많은 매크로구조는 여기에서 찾아볼 수 있습니다.

여기에는 의무적인 다양화 규칙(diversification rule)도 있습니다. 동일한 프로젝트 내에서 연속된 두 번의 생성(generations)은 동일한 매크로구조를 사용할 수 없습니다. Hallmark는 또한 프로젝트의 이력을 확인하며(계층 3 참조), 이력이 발견되면 반드시 다른 것을 선택해야 합니다. 이것이 Hallmark로 만든 두 페이지가 "서로 닮아 보이지 않는" 이유입니다.

선택하기 전에, 기존 CSS 파일에 /_Hallmark · macrostructure: · ..._/ 주석이 있는지 대상 코드베이스를 확인하세요. 만약 발견된다면, 선택하는 것은 반드시 다른 매크로구조여야 합니다. 동일한 프로젝트 내에서 두 번 연속된 Hallmark 출력물은 동일한 매크로구조를 공유하지 않습니다.

계층 2: 20개의 테마 + 커스텀 브랜치 (Custom Branch)

뼈대가 설정되면, 이제 "옷을 입힐" 차례입니다. Hallmark는 Specimen, Terminal, Midnight, Garden, Newsprint, Brutal 등 20개의 명명된 테마(themes)를 함께 제공합니다. 각 테마는 완전한 OKLCH 팔레트(palette) + 폰트 조합(font pairing) + 질감 언어(textural language)를 포함합니다. 이 테마들은 4가지 "장르"(editorial / modern-minimal / atmospheric / playful)에 따라 클러스터(clusters) 단위로 순환합니다.

사용자의 요청에 명확한 브랜드 의도(특정 브랜드 색상을 지정하거나, 특정 무드 단어 묶음을 전달하거나, 혹은 단순히 "독특하게 만들어줘"라고 말하는 경우)가 포함되어 있으면, Hallmark는 오직 당신만을 위해 맞춤형 OKLCH 팔레트 + 프리 폰트 조합(free-font pairing)을 혼합합니다.

계층 3: 자기 비판 (Self-Critique) + 프로젝트 메모리 (Project Memory)

58개의 게이트(gates)를 실행하기 전에, Hallmark는 AI가 먼저 6개의 축(axes)을 따라 자신의 디자인을 각각 1~5점 사이로 채점하도록 요구합니다. 어떤 축이라도 3점 미만이면 다음 단계로 넘어가기 전에 디자인을 재작업해야 합니다.

Hallmark는 프로젝트 루트(root)에 .hallmark/log.json 파일을 작성하여, 각 생성(generation) 시 어떤 뼈대와 어떤 테마를 사용했는지 기록합니다. 다음 실행 시 이 파일을 가장 먼저 읽음으로써, 새로운 페이지가 최근 생성된 몇 개의 페이지와 차별화되도록 보장합니다.

이것이 바로 "구조적 다양성(structural variety)"이 여러 페이지에 걸쳐 유지될 수 있게 하는 메커니즘이며, AI에게 "지난번에 내가 무엇을 했는지"에 대한 메모리를 제공합니다.

계층 4: 58개의 슬롭 테스트 게이트 (Slop-Test Gates)

이것이 Hallmark가 "취향(taste)"을 "엔지니어링(engineering)"으로 전환하는 핵심 방식입니다. 어떤 페이지를 전달하기 전에, AI는 출력물을 58개의 슬롭 테스트(slop tests)에 통과시켜야 하며, 모든 질문에 대한 답변은 반드시 "아니오(no)"여야 합니다.

몇 가지 예시는 다음과 같습니다:

• 헤딩(heading) 폰트가 Inter / Roboto / Open Sans / 시스템 기본값(system default)인가요?
• 보라색-파란색 그라데이션(purple-blue gradient)이 있나요? background-clip: text를 통한 그라데이션 헤딩을 포함하여?
• 3개의 동일한 열(three-equal-column)로 구성되어 있으며, 아이콘이 제목 위에 있는 카드 그리드(card grid) 형태인가요?
• 히어로(hero) 섹션의 모든 요소가 중앙 정렬(

이 도구는 오직 현재의 디자인만 읽고, 해당 AI 특징(AI tell) 목록에 따라 점수를 매긴 뒤, 계층화된 문제 목록을 출력합니다. 코드는 전혀 건드리지 않습니다.

[critical] 보라색 그라데이션 히어로(hero) — index.astro:42
  가장 흔하게 식별되는 AI 미학(aesthetic)
  → 단일 앵커 컬러(anchor color)로 전환하고, 그라데이션 배경을 제거하세요
...

디자이너가 없는 팀에게 이것은 마치 무료로 디자인 리뷰를 받는 것과 같습니다. 심지어 이 동사(verb)만 사용하여 체크리스트 도구로 활용할 수도 있습니다.

타인의 훌륭한 디자인에서 배우기

좋아하는 웹사이트나 스크린샷을 보고 "복제하지 않으면서 그것으로부터 배우고 싶다"라고 생각하시나요?

hallmark study <screenshot | URL>

동경하는 디자인 이미지를 붙여넣거나 업로드하거나, 접근 가능한 페이지의 URL을 붙여넣으세요. Hallmark는 전체적인 아키텍처(architecture), 전형적인 패러다임(archetypal paradigm), 폰트 조합(font pairing), 그리고 주요 컬러 베이스라인(primary color baseline)을 포함한 디자인의 DNA를 추출하여 진단 보고서를 생성합니다.

추출된 디자인 코어(core)를 바탕으로 자신의 콘텐츠를 재구축하거나, 재사용 가능한 design.md 코어 문서를 내보내거나, 혹은 진단 보고서만 유지한 채 그대로 마칠 수도 있습니다.

만약 이 명령어가 타인의 웹사이트를 클론(clone)할 수 있게 해준다고 생각한다면 실망하게 될 것입니다. Hallmark는 픽셀 단위의 완벽한 클로닝(pixel-perfect cloning)을 거부하며, 유료 템플릿 사이트(ThemeForest, Framer/Webflow 템플릿, Dribbble 샷은 완전히 거부됨)를 거부합니다. 이 도구는 "타인의 특정 픽셀"이 아니라 "구조와 취향"을 추출합니다. 폰트의 경우 "역할 + 후보군"만을 명시하며, 이미지의 경우 원본을 절대 가져오지 않고 구조적으로 동일한 플레이스홀더(placeholder)를 생성하거나 사용자가 직접 에셋(asset)을 제공하도록 요청합니다.

리디자인 (Redesign)

감사(audit) 후든 학습(study) 후든, 원하는 디자인이 현재 스타일이 아니라는 점이 명확해지면 리디자인 단계로 넘어갈 수 있습니다.