AI가 만든 뻔한 UI를 피하는 디자인 스킬, hallmark

AI 코딩 어시스턴트를 활용하면 웹 페이지를 빠르게 만들 수 있습니다. 하지만 한 가지 아쉬움이 남을 때가 있습니다. 결과물을 보면 보라색 그라디언트의 히어로 영역, 중앙 정렬된 콘텐츠, 비슷한 형태의 카드와 아이콘 등 익숙한 디자인이 반복되기 때문입니다.

hallmark는 이런 AI 특유의 획일적인 디자인, 이른바 'AI slop'을 줄이기 위해 만들어진 디자인 스킬입니다. 타이포그래피, 색상, 레이아웃, 모션, 인터랙션을 포함한 안티 슬롭 규칙을 적용하고, 페이지를 생성할 때도 단순히 화면을 채우는 것이 아니라 먼저 전체 구조를 결정한 뒤 테마와 세부 요소를 적용합니다.

특히 Default, Audit, Redesign, Study 네 가지 액션을 제공해 디자인 생성뿐 아니라 기존 페이지의 문제점을 진단하거나 구조를 다시 설계하고, 참고 디자인에서 디자인 DNA를 추출하는 작업까지 지원합니다.

반응형

AI가 만든 디자인이 비슷해지는 이유

AI 코딩 어시스턴트는 빠르게 UI를 만들 수 있다는 장점이 있지만, 결과물이 항상 개성 있는 디자인으로 이어지는 것은 아닙니다.

대표적으로 다음과 같은 패턴이 반복될 수 있습니다.

• 보라색 그라디언트를 사용한 히어로 영역
• 디스플레이 폰트로 사용되는 Inter
• 모든 콘텐츠를 가운데 정렬하는 레이아웃
• 아이콘을 넣은 동일한 형태의 피처 카드
• 페이지 성격과 관계없이 비슷하게 구성되는 AI 내비게이션

문제는 이런 요소 하나가 잘못됐다는 것이 아닙니다. 여러 요소가 반복적으로 조합되면서 페이지가 서로 비슷하게 보인다는 데 있습니다.

hallmark는 이러한 반복적인 디자인을 'slop'으로 보고, 이를 피하기 위한 디자인 규칙을 하나의 스킬로 묶었습니다.

hallmark는 무엇인가

hallmark는 AI 코딩 어시스턴트가 만드는 전형적인 디자인을 피하기 위한 디자인 스킬입니다.

단순히 특정 색상이나 폰트를 바꾸는 방식이 아니라 타이포그래피, 색상, 여백, 모션, 인터랙션, 레이아웃, 계층 구조와 같은 디자인 요소 전반에 규칙을 적용합니다.

페이지를 생성할 때는 다음과 같은 순서로 접근합니다.

매크로구조 → 테마 → 보강 → 슬롭 테스트

먼저 페이지의 큰 구조를 정하고, 그 구조에 맞춰 테마를 입힌 다음 세부 요소를 보강합니다. 마지막에는 생성된 결과가 안티 슬롭 규칙을 따르고 있는지 테스트합니다.

또 하나의 특징은 직전 3개의 구조를 반복하지 않도록 한다는 것입니다. 이를 통해 페이지를 생성할 때 같은 형태가 계속 반복되는 것을 방지합니다.

AI 디자인에서 자주 나타나는 5가지 슬롭 패턴

hallmark는 AI가 기본적으로 만들기 쉬운 다섯 가지 디자인 패턴과 그에 대한 대안을 제시합니다.

1. 보라색 그라디언트 히어로

AI가 생성하는 페이지에서 보라색 그라디언트를 활용한 히어로 영역은 익숙한 디자인 패턴입니다.

hallmark는 히어로에 그라디언트 배경을 사용하는 대신 앵커 색상 하나와 강조색 하나를 사용하도록 합니다. 전체적으로는 무채색에 색조를 더하는 방식으로 접근합니다.

핵심은 색상을 많이 사용하는 것이 아니라 제한된 색상을 통해 디자인의 개성을 만드는 것입니다.

2. 디스플레이로 사용하는 Inter

Inter 자체가 문제가 되는 것은 아닙니다. 다만 모든 영역에서 비슷한 방식으로 사용하면 디자인의 개성이 약해질 수 있습니다.

hallmark는 개성 있는 디스플레이 폰트와 정제된 본문 폰트를 함께 사용하는 방식을 제시합니다. 최소 두 개의 폰트페이스를 활용해 제목과 본문 사이에 차이를 만드는 것입니다.

3. 모든 것을 가운데 정렬

모든 콘텐츠를 가운데에 배치하면 깔끔한 화면을 만들기는 쉽습니다. 하지만 반복되면 페이지의 구조가 단조로워질 수 있습니다.

hallmark는 여백을 한쪽으로 몰아주는 방식 등을 활용해 대칭을 한 번 깨도록 합니다.

즉, 모든 요소를 동일한 방식으로 배치하기보다 일부러 균형에 변화를 주면서 페이지의 리듬을 만드는 것입니다.

4. 아이콘 타일 형태의 피처 카드

아이콘과 텍스트를 동일한 형태의 카드에 넣는 방식도 AI가 자주 사용하는 패턴 중 하나입니다.

hallmark는 카드의 크기와 정렬을 다양하게 만들거나, 아이콘을 제거하고 타이포그래피부터 시작하는 등 비대칭적인 디자인을 제시합니다.

중요한 것은 모든 정보를 같은 크기와 같은 형태의 박스에 넣지 않는 것입니다.

5. 획일적인 AI 내비게이션

내비게이션 역시 페이지의 성격에 따라 달라질 수 있습니다.

hallmark는 모든 사이트에 동일한 내비게이션을 적용하기보다 페이지 장르에 맞는 내비게이션 아키타입을 선택하도록 합니다.

예를 들어 신문이라면 신문 마스트헤드와 같은 형태를, 터미널이라면 명령바와 같은 형태를 고려하는 방식입니다.

8가지 기초 디자인 규칙

hallmark에는 특정 테마에 관계없이 적용되는 8가지 기초 규칙이 포함되어 있습니다.

Type, Colour, Space, Motion, Voice, Layout, Hierarchy, Restraint

각 규칙은 디자인을 구성하는 서로 다른 요소를 다룹니다.

Type

타이포그래피를 통해 콘텐츠의 성격과 계층을 구분합니다.

Colour

색상을 무분별하게 사용하는 대신 명확한 역할을 가진 색상을 제한적으로 사용합니다. 특히 OKLCH 팔레트를 활용하고 강조색은 5% 미만으로 사용하는 규칙이 포함되어 있습니다.

Space

여백 역시 디자인의 일부로 다룹니다. 간격을 일관된 기준으로 관리하며 4의 배수 간격을 사용하고 17px과 같은 임의의 패딩을 피합니다.

Motion

애니메이션을 단순한 장식으로 사용하지 않습니다. 모든 애니메이션에는 reduced-motion 대안을 제공합니다.

Voice

페이지에서 사용되는 언어와 표현 방식도 디자인의 일부로 고려합니다.

Layout

페이지 전체의 구조와 요소 배치를 통해 콘텐츠의 흐름을 만듭니다.

Hierarchy

어떤 콘텐츠를 먼저 보고 어떤 콘텐츠를 나중에 봐야 하는지 시각적인 계층을 명확하게 구성합니다.

Restraint

hallmark가 강조하는 원칙 중 하나입니다.

"나쁜 무언가보다 아무것도 없는 편이 낫다."

무언가를 채우기 위해 불필요한 장식이나 요소를 추가하기보다, 필요하지 않은 것은 과감하게 제거하는 절제의 원칙입니다.

네 가지 액션으로 활용하는 hallmark

hallmark는 디자인을 생성하는 기능만 제공하지 않습니다. 총 네 가지 액션을 통해 생성부터 분석과 재설계까지 다룰 수 있습니다.

Default: UI 생성

Default는 기본적인 UI 생성 기능입니다.

브리프, 프로젝트 토큰, 프레임워크를 읽고 매크로구조 → 테마 → 보강 순서로 페이지를 생성합니다.

생성이 끝나면 슬롭 테스트까지 실행해 결과물을 확인합니다.

즉, 단순히 페이지를 만들어주는 것이 아니라 디자인 구조를 먼저 결정하고 결과물을 검증하는 흐름으로 동작합니다.

Audit: 디자인 문제 진단

Audit은 페이지를 직접 수정하지 않고 문제점만 진단하는 기능입니다.

안티패턴 카탈로그를 기준으로 페이지의 문제를 점수화하고, 우선순위가 높은 문제부터 확인할 수 있는 펀치 리스트를 제공합니다.

기존 페이지를 유지하면서 어떤 부분을 개선해야 하는지 파악하고 싶을 때 활용할 수 있는 방식입니다.

Redesign: 구조 재설계

Redesign은 기존 페이지의 구조를 다시 만드는 기능입니다.

여기서 중요한 점은 카피, IA, 브랜드는 유지한다는 것입니다. 대신 기존의 구조적인 요소를 버리고 새로운 섹션 리듬과 제목 배치를 적용해 페이지를 재구축합니다.

기존 콘텐츠를 모두 다시 작성하는 것이 아니라 디자인 구조 자체를 바꾸는 접근입니다.

Study: 참고 디자인 분석

Study는 참고할 디자인을 바탕으로 새로운 디자인 규칙을 만드는 기능입니다.

스크린샷이나 URL을 입력하면 단순히 픽셀 단위로 따라 하는 것이 아니라 해당 디자인의 구조를 읽어냅니다.

그 결과 디자인의 DNA를 추출하고 이를 이식할 수 있는 design.md 형태로 생성합니다.

hallmark 설치 방법

hallmark는 다음 명령어로 설치할 수 있습니다.

npx skills add nutlope/hallmark

Claude Code, Cursor, Codex에서 사용할 수 있습니다.

설치한 이후에는 AI 코딩 환경에서 hallmark가 제공하는 디자인 생성 및 분석 기능을 활용할 수 있습니다.

예를 들어 새로운 UI를 만들 때는 Default를 사용하고, 이미 만들어진 페이지의 디자인 문제를 확인할 때는 Audit을 사용하는 식으로 목적에 따라 액션을 선택할 수 있습니다.

728x90

AI 디자인에서 중요한 것은 더 많은 요소가 아니다

AI를 활용하면 UI를 만드는 속도는 빨라집니다. 하지만 빠르게 만들어진 결과물이 항상 좋은 디자인을 의미하지는 않습니다.

특히 AI가 반복적으로 사용하는 패턴이 쌓이면 서로 다른 페이지임에도 비슷한 인상을 줄 수 있습니다.

hallmark는 이 문제를 디자인 규칙의 관점에서 다룹니다. 페이지를 생성할 때 구조를 먼저 결정하고, 이전 구조의 반복을 피하며, 타이포그래피와 색상부터 여백과 모션까지 다양한 요소에 규칙을 적용합니다.

또한 Default 하나에만 의존하지 않고 Audit으로 문제를 진단하고, Redesign으로 구조를 다시 만들며, Study를 통해 참고 디자인의 구조를 분석할 수 있도록 구성되어 있습니다.

결국 hallmark가 제시하는 방향은 AI에게 더 많은 것을 추가하도록 요구하는 것이 아니라, 필요하지 않은 반복을 줄이고 디자인의 차이를 만들어내는 것에 가깝습니다.

AI 코딩 어시스턴트의 활용 범위가 UI 생성까지 확대되는 상황에서, 단순히 작동하는 페이지를 만드는 것을 넘어 어떤 구조와 디자인으로 보여줄 것인지가 중요해지고 있습니다. hallmark는 이러한 과정에서 AI가 반복하기 쉬운 디자인 패턴을 줄이고 보다 다양한 결과물을 만들기 위한 하나의 접근 방법을 제시합니다.

300x250

https://github.com/Nutlope/hallmark

GitHub - Nutlope/hallmark: Anti-AI-slop design skill for Claude Code, Cursor, and Codex.