AI가 만든 듯한 화면을 피하는 디자인 스킬, Hallmark

AI가 만든 듯한 화면을 피하는 디자인 스킬, Hallmark

AI 뉴스 썸네일

AI 코딩 도구로 웹 화면을 만들면 결과가 빠르게 나오지만, 보라색 그래디언트와 가운데 정렬처럼 익숙한 구성이 자주 반복돼요. Hallmark는 이런 습관을 규칙으로 찾아내고, 페이지 구조부터 다시 고르게 돕는 오픈소스 디자인 스킬이에요. 1

핵심 요약

구분	핵심	왜 볼 만한가요
설계 방식	페이지의 큰 구조를 먼저 고른 뒤 색상과 글꼴을 적용해요	색상만 바꾼 비슷한 화면이 반복되는 문제를 줄여요
제공 기능	생성, 진단, 재설계, 디자인 분석 등 4가지 작업을 지원해요	새 화면 제작과 기존 화면 개선을 한 도구에서 다룰 수 있어요
품질 규칙	21개 테마와 57개 품질 항목을 사용해요	타이포그래피, 여백, 모션, 반응형 화면을 구체적으로 확인해요
사용 환경	Claude Code, Cursor, Codex에서 설치해 쓸 수 있어요	기존 AI 코딩 작업에 디자인 규칙을 바로 더할 수 있어요

1. 색을 고르기 전에 페이지의 뼈대부터 정해요

Hallmark는 화면을 곧바로 꾸미지 않아요. 먼저 콘텐츠 성격에 맞는 매크로 구조를 고르고, 그다음 21개 테마 가운데 하나를 적용해요. 프로젝트에 이미 글꼴과 색상 토큰이 있으면 그 설정을 먼저 읽어요. 서로 다른 요구사항으로 만든 두 페이지가 같은 템플릿의 색상 변형처럼 보이지 않게 하는 방식이에요. 2

규칙은 흔히 보이는 결과를 구체적으로 짚어요. 보라색 그래디언트를 기본 히어로 배경으로 쓰거나 모든 내용을 가운데 정렬하는 구성을 피하게 해요. 같은 크기의 아이콘 카드가 줄지어 서는 화면도 점검해요. 페이지 성격과 관계없이 비슷한 내비게이션을 붙이는 습관도 검사 대상이에요.

728x90

글꼴과 색상도 장식으로만 다루지 않아요. 제목용 글꼴과 본문용 글꼴의 역할을 나누고, 색상은 이름이 붙은 토큰을 통해 쓰도록 요구해요. 임의의 색상 값을 화면 곳곳에 추가하지 못하게 막아 디자인 일관성을 지켜요. 실제 수치나 고객 사례가 없으면 그럴듯한 숫자를 만들어 넣지 말라는 규칙도 포함돼 있어요.

새 화면부터 기존 화면 진단까지 4가지 작업을 지원해요

기본 작업은 새 UI를 만들고 결과를 넘기기 전에 품질 항목을 확인해요. `audit`은 기존 화면을 수정하지 않고 문제를 중요도 순서로 보여줘요. `redesign`은 문구와 정보 구조, 브랜드 성격을 유지하면서 섹션 리듬과 제목 배치를 다시 짜요. `study`는 참고 화면이나 URL에서 큰 구조, 글꼴 조합, 중심 색상을 읽어 재사용할 수 있는 디자인 문서로 정리해요. 2

참고 디자인을 그대로 복제하는 기능은 아니에요. 화면의 픽셀을 베끼기보다 어떤 구조와 시각 규칙이 분위기를 만드는지 분리해서 읽는 데 초점을 둬요. 유료 템플릿이나 다른 제품의 화면을 그대로 복제하지 않도록 제한도 걸어뒀어요.

작은 화면과 움직임도 별도 조건으로 확인해요

Hallmark가 내세우는 57개 품질 항목에는 반응형 화면과 접근성 조건이 들어 있어요. 결과물은 320px, 375px, 414px, 768px 너비에서 가로 스크롤과 잘린 제목이 없는지 확인하도록 설계됐어요. 클릭할 수 있는 문구가 두 줄로 꺾이지 않는지도 살펴요. 2

모션을 넣을 때는 움직임을 줄이는 운영체제 설정을 함께 지원해야 해요. 화려한 전환을 기본값으로 밀어 넣기보다, 사용자가 움직임을 줄이도록 설정했을 때 대체 표현이 있어야 해요. 모바일 화면과 접근성을 마지막 정리 단계가 아니라 생성 규칙에 포함했다는 점이 실무에서 쓸 만해요.

설치는 한 줄이지만 결과는 직접 검토해야 해요

설치는 `npx skills add nutlope/hallmark` 명령으로 할 수 있어요. 저장소는 MIT 라이선스로 공개돼 있고 Claude Code, Cursor, Codex용 설치 경로를 안내해요. 공식 데모에서는 서로 다른 업종과 목적을 가진 예시 화면을 비교할 수 있어요. 3

규칙이 많다고 좋은 디자인이 자동으로 보장되지는 않아요. 브랜드 문맥이 약하거나 콘텐츠 우선순위가 틀리면 화면이 달라 보여도 제품에는 맞지 않을 수 있어요. 디자인 담당자는 Hallmark의 진단 결과를 정답으로 받아들이기보다, 사용자 과업과 브랜드 기준에 맞는지 다시 확인해야 해요.

왜 중요한가요

AI 코딩 도구가 보편화되면서 서로 다른 인상의 화면을 만드는 일이 더 어려워졌어요. 같은 모델이 익숙한 웹 패턴을 반복해서 고르면 서로 다른 서비스도 비슷한 첫 화면과 카드 구성을 갖게 돼요. Hallmark는 이 문제를 "더 예쁘게 만들어 줘" 같은 모호한 요청 대신 구조, 글꼴, 색상, 여백, 모션 규칙으로 나눠 다뤄요. 2

개발팀에는 디자인 검토 기준을 공유하기 쉬워진다는 이점이 있어요. 기존 화면을 진단만 하거나, 문구와 정보 구조를 보존한 채 시각 구조만 바꾸는 작업을 따로 고를 수 있어요. 디자이너가 없는 작은 팀이라면 반복되는 화면 습관을 찾는 첫 점검표로 쓸 수 있어요. 디자이너가 있는 팀이라면 프로젝트의 디자인 토큰과 원칙을 AI 코딩 도구가 따르게 만드는 보조 장치로 활용할 수 있어요.

참고 자료

1. hallmark - AI 티가 안나는 디자인 스킬 — GeekNews
2. Nutlope/hallmark — GitHub
3. Hallmark 공식 데모 — Hallmark