AI가 만든 흔적을 지워 진짜처럼 보이는 웹페이지를 만드는 설계 규칙
브라우저에서 페이지를 열면 제목 위 작은 글씨, 무의미한 대문자 라벨, 그리고 끝없는 사진만 있는 빈칸이 눈에 띕니다. 이런 기계적인 흔적을 자동으로 찾아내고 고쳐주는 도구입니다. Claude Code나 Cursor 같은 AI 코딩 도구를 쓰면서도 결과물이 'AI가 만들었다'는 느낌을 주지 않도록 돕는 설계 스킬입니다.
v2에서 바뀐 것들
각 테마는 종이, 타이포그래피, 색감, 표면 질감 등 재료를 정의하며, 완성된 페이지의 예시 이미지도 함께 들어 있습니다. 이제 예약 페이지는 예약에, 상점 페이지는 구매에 초점을 맞춰 페이지를 구성합니다. 또한 사용자가 직접 요청한 URL이나 개발 서버를 가리키면 스크린샷을 스스로 캡처해 실제 제품과 일치하도록 만듭니다.
AI 냄새를 제거하는 검사 체계
이 도구는 페이지가 기계적으로 보일 수 있는 요소들을 실제 브라우저에서 검사합니다.
- 기본 하한선 대비, 포커스 상태, 모션 감소 설정, 사실 왜곡, 모바일 레이아웃 깨짐 등 기본 요건을 충족하지 못하면 배포를 막습니다.
- 반사적 오류 차단 AI 모델이 자주 범하는 패턴을 검사하며, 정당한 이유가 있으면 기록을 남기고 예외를 허용합니다.
- 마무리 점검 세부적인 완성도 체크리스트를 확인하지만, 이 단계에서 배포를 막지는 않습니다.
페이지 생성 과정
작업이 시작되면 프로젝트의 폰트, 팔레트, 프레임워크를 먼저 읽습니다. 히어로 섹션은 나머지 페이지가 존재하기 전에 먼저 만들어지고, 새로운 컨텍스트의 리뷰어가 냉정하게 검토합니다. 최종적으로 8가지 폭에서 페이지를 렌더링하여 기계적인 흔적이 없는지 확인합니다. 모든 페이지는 독립적인 HTML과 CSS로 구성되며, 어떤 디자인 결정을 내렸는지 첫 번째 CSS 주석에 기록합니다.
기존 페이지 리디자인과 감사
이미 존재하는 디자인을 바꾸려면 명시적으로 지시해야 합니다. 리디자인 명령을 내리면 콘텐츠와 로직은 유지하면서 시스템과 레이아웃만 변경합니다. 감사 명령은 변경 없이 문제점만 보고합니다. 변경 전 모든 링크, 필드, 핸들러, 제목을 기록해 두고, 리디자인 후 하나라도 사라지면 실패로 처리합니다. 최종 결과물은 변경 전과 후를 나란히 보여주는 형태로 전달됩니다.
설치와 사용 조건
Node 18 이상 환경이 필요합니다. 전역 설치 시 npx skills add nutlope/hallmark -g 명령을 사용합니다. 브라우저 기반 검사 기능을 사용하려면 puppeteer-core와 Chrome이 추가로 필요합니다. 이 의존성이 없으면 정적 검사만 수행됩니다. Claude Code, Codex, Cursor, OpenCode 등 다양한 AI 코딩 도구에 설치할 수 있으며, 각 도구의 명령어 형식에 맞춰 호출합니다. 라이선스는 MIT이며, 사진 자료는 Wikimedia Commons의 공개 라이선스 이미지를 사용하며 출처를 명시합니다.
