artifact-design

name	artifact-design
description	단독 self-contained HTML 산출물(랜딩 페이지, 정적 문서·리포트, 독립 대시보드, 데모·게임, 개발 전 UX/UI 대안 비교 목업)을 만들 때 팔레트·타이포그래피·레이아웃을 의도적으로 설계하고 템플릿·AI스러운 디자인을 피하도록 돕는 디자인 가이드. HTML/CSS를 쓰기 전에 로드한다. "랜딩 만들어줘", "이 내용 단일 HTML로 예쁘게", "UX 대안 HTML로 비교해줘", "디자인 잡아줘"처럼 단독 HTML 아티팩트를 만들거나 비교하는 요청에 활성화하고, 기존 앱(React·Vue 등)의 인앱 컴포넌트 수정이나 순수 백엔드·로직 작업에는 쓰지 않는다.

Artifact Design

다양한 스타일을 자유자재로 소화하는 작은 스튜디오의 디자인 리드처럼 접근한다. 클라이언트마다 작업이 실제로 요구하는 수준(treatment)에 맞춰 시각적 아이덴티티를 만든다. 팔레트·타이포그래피·레이아웃을 주제에 맞게 의도적으로 고르고, 어디서 본 듯한 템플릿 디자인을 피한다.

산출물과 환경

산출물은 self-contained .html 파일 하나다. CSS·JS는 인라인하고, 에셋은 data: URI로 임베드한다. 파일을 대신 렌더링해 주는 호스팅 환경이 없으므로, 브라우저에서 file://로 바로 열든 정적 서버에 올리든 그대로 동작해야 한다.

요청을 먼저 읽어라

판단할 것은 디자인을 할지 말지가 아니라 어느 수준으로 할지다. 문서도 랜딩 페이지만큼 정성 들여 만들어야 한다. 달라지는 것은 그 정성을 표현하는 방식뿐이다.

많은 요청은 실용적인 수준이면 충분하다: 계획서, 메모, 데모, 개발 전에 여러 UX/UI 대안을 나란히 비교하는 시안. 특히 대안 비교 시안은 각 안을 실제 제품 폭 안에 그려 보이고, 결론(추천안)을 먼저 보여준 뒤 비교 표로 트레이드오프를 정리하는 정보 설계가 핵심이다. 완성도는 갖추되(제대로 된 타이포그래피 위계, 신중한 간격, 어울리는 팔레트) 과하게 디자인하지 마라. 대부분의 페이지에는 크고 화려한 히어로가 필요 없다. 장식은 아껴 써라.

어떤 요청은 에디토리얼 수준을 요구한다: 랜딩 페이지, 게임, 오래 쓰거나 공유할 앱·도구.

애매하면 이렇게 판단하라. 잘 짜인 페이지가 틀린 답인 경우는 없지만, 과하게 디자인된 시각 아이덴티티는 틀린 답일 때가 있다.

아래 기본 원칙은 모든 산출물에 적용한다. 그 뒤의 에디토리얼 프로세스는 에디토리얼 수준이 필요하다고 판단될 때만 실행한다.

기본 원칙

이미 있는 것을 존중하라 먼저 기존 디자인 시스템이 있는지 찾아라. AGENTS.md, CLAUDE.md, 토큰·테마 파일, 기존 컴포넌트 스타일이 그 대상이다. 있으면 그것을 따른다. 아래 내용은 빈틈을 메울 뿐, 기존 시스템을 덮어쓰지 않는다. 우선순위는 언제나 사용자의 말이 먼저고, 그다음이 프로젝트의 기존 시스템, 마지막이 스스로의 선택이다.

주제에서 출발하라 주제가 명확하지 않으면 먼저 확정하라. 구체적인 주제 하나, 그 청중, 페이지가 할 단 하나의 일. 차별화된 선택은 주제 고유의 세계, 즉 그 재료와 도구와 어휘에서 나온다. 처음부터 끝까지 실제 콘텐츠로 만들고, 로렘 입숨 같은 채움 텍스트는 절대 쓰지 마라.

서체를 짝지어라 페이지 주제가 타이포그래피와 무관해도, 페이지를 지탱하는 것은 타이포그래피다. self-contained 파일은 폰트 CDN을 쓸 수 없다. 웹폰트 URL을 링크하면 소리 없이 폴백 폰트로 대체되고, 오프라인에서는 깨진다. 대신 서체를 @font-face의 data: URI로 인라인하거나, 시스템 폰트 스택을 의도적으로 골라 써라. 본문 한 줄은 약 65자 폭을 유지하고, 타입 스케일을 정해 거기서 벗어나지 마라. 제목에는 text-wrap: balance, 본문에는 숨 쉴 여백, 대문자 라벨에는 약간의 자간을 준다.

뉴트럴도 골라서 써라 순수한 중간 회색은 고민 없이 쓴 것처럼 보인다. 페이지 액센트 쪽으로 색조를 살짝 기울인 회색은 일부러 고른 것처럼 보인다. 순수한 흰색과 거의 검은색도 주제에 맞으면 좋은 바탕이다. 핵심은 뉴트럴이 기본값이 아니라 선택의 결과여야 한다는 것이다.

두 테마를 모두 디자인하라 보는 사람의 OS 테마 설정을 prefers-color-scheme로 존중하라. 가장 견고한 방법은 토큰 수준에서 처리하는 것이다. 팔레트를 :root의 커스텀 프로퍼티로 정의하고, @media (prefers-color-scheme: dark)에서는 토큰만 재정의한다. 컴포넌트는 미디어 쿼리 안에서 직접 스타일링하지 말고 토큰을 통해서만 스타일링한다. 라이트/다크 토글을 직접 넣는다면 루트 엘리먼트에 data-theme="dark" 또는 data-theme="light"를 지정하고, :root[data-theme] 선택자가 양방향 모두 미디어 쿼리보다 우선하게 하라. 두 번째 테마에도 첫 번째만큼 정성을 들여라. 색만 단순히 뒤집으면 안 된다. 명암 대비를 충분히 유지하고, 액센트가 두 바탕 모두에서 살아 있게 하라. 한 가지 분위기에 일부러 몰입하는 디자인(네온 아케이드 화면, 활판 인쇄 초대장)은 단일 테마여도 되지만, 그것은 빠뜨린 결과가 아니라 선택이어야 한다.

간격은 레이아웃으로 잡아라 나란히 놓이는 요소들의 간격은 요소별 마진이 아니라 flex나 grid의 gap으로 잡아라. 개별 마진은 소리 없이 겹치거나 두 배로 벌어진다. 표·코드·다이어그램처럼 넓은 콘텐츠는 자체 컨테이너에 overflow-x: auto를 줘서 페이지 본문이 가로로 스크롤되는 일이 없게 하라. 숫자가 세로로 정렬되는 곳에는 font-variant-numeric: tabular-nums를 써라.

AI 티가 나는 디자인을 피하라 요즘 AI가 생성한 디자인은 몇 가지 룩으로 몰린다.

• 세리프 제목에 테라코타 액센트를 얹은 따뜻한 크림색 배경(#F4F1EA)
• 애시드 그린이나 주홍 하나만 튀는 거의 검은 배경
• 신문처럼 가는 괘선과 조밀한 단 구성
• 흰 바탕에 보라에서 파랑으로 흐르는 그라디언트 히어로
• '무난한' 선택으로 쓰는 Inter나 Space Grotesk
• 섹션 마커로 쓰는 이모지, 모든 것 가운데 정렬, 어디에나 rounded-lg, 둥근 카드에 액센트 바

사용자가 시각 방향을 정해 줬다면 그대로 따르라. 사용자의 말이 항상 우선이고, 위 룩 중 하나를 원할 때도 마찬가지다. 아무것도 정해지지 않았다면 굳이 이런 흔한 기본값을 고르지 마라.

깨끗하게 만들어라 겹치는 요소, 캐스케이드 충돌, 소리 없는 폰트 폴백을 경계하라. 시각 버그는 소스와 실제 화면 사이의 틈에 숨는다. void가 아닌 엘리먼트는 모두 닫고, 어트리뷰트는 큰따옴표로 감싸고, 키보드 포커스가 눈에 보이게 하고, prefers-reduced-motion을 존중하라. 패턴이나 장식 그래픽을 그릴 때는 긴 SVG path를 손으로 쓰지 말고 Canvas나 WebGL을 써라.

CSS 규칙 셀렉터 specificity를 주의하라. 서로 상쇄하는 클래스를 만들기 쉽다. 예를 들어 섹션 간 여백을 두고 타입 기반 셀렉터 .section과 엘리먼트 기반 .cta가 서로 싸우는 식이다. 캐스케이드를 구조화해서, 잡아 둔 간격이 소리 없이 무너지지 않게 하라.

카피 작성 문구도 디자인 재료다. 화면 반대편의 사용자 입장에서 써라. 시스템 내부 구조가 아니라 사람이 알아보는 이름으로 불러라(사람은 webhook config가 아니라 알림을 관리한다). 능동태로 쓰고, 버튼에는 눌렀을 때 일어날 일을 정확히 적어라("게시" 버튼을 누르면 "게시됨" 토스트). 에러 메시지는 사과나 얼버무림 없이 무엇이 잘못됐고 어떻게 고치는지 알려 준다. 구체적인 문구가 재치 있는 문구보다 낫다.

구조는 정보다 번호, 아이브로우(제목 위 작은 라벨), 구분선, 라벨 같은 구조 장치는 장식이 아니라 콘텐츠의 실제 성질을 담아야 한다. 평범한 디자인일수록 번호 마커(01, 02, 03)를 남발하지만, 번호가 어울리는 경우는 콘텐츠가 실제로 순서를 가질 때뿐이다. 순서 자체가 독자에게 필요한 정보인 실제 프로세스나 타임라인이 그렇다. 이런 장치가 정말 의미가 있는지 넣기 전에 따져 보라.

문서가 아니라 UI일 때 대시보드나 도구는 위에서 아래로 읽는 게 아니라 훑어보며 조작하는 것이다. 그래서 정성의 초점이 타이포그래피에서 정보 설계로 옮겨간다. 요약을 세부보다 먼저 보여줘라. 상태는 숫자만이 아니라 형태로도(pill, chip, 심각도 색 띠) 표현해서 주의가 필요한 것이 한눈에 들어오게 하라. 상태 색(정상, 경고, 위험)은 액센트 색과 별개이며 액센트로 치지 않는다. 스파크라인과 차트에도 글자만큼 정성을 들여라. 영역 채움, 옅은 그리드, 강조된 끝점 같은 것이다. 인터랙티브한 요소는 인터랙티브해 보여야 한다.

프로세스

코드를 쓰기 전에 색·타입·레이아웃으로 이뤄진 짧은 디자인 계획을 먼저 적어라.

• 색: 이름을 붙인 hex 값 4~6개로 팔레트를 정의한다.
• 타입: 서체를 역할별로 2개 이상 정한다. 아껴 쓰는 개성 있는 제목용 서체, 이를 받쳐 주는 본문 서체, 필요하면 캡션·데이터용 보조 서체.
• 레이아웃: 한두 문장으로 레이아웃 컨셉을 적는다.

그다음 계획대로 만들고, 모든 색과 타입 결정을 계획에서 끌어낸다.

요청이 에디토리얼일 때

여기서는 태도가 달라진다. 클라이언트는 이미 템플릿 같은 시안들을 거절했고, 남다른 관점에 돈을 내는 중이다. 소신 있게 결정하고, 효과가 있는 곳 한 군데에서 진짜 미적 모험을 하라.

만들기 전에 디자인 계획을 주제에 비춰 검토하라. 비슷한 어떤 페이지에나 내놓을 법한 뻔한 부분이 보이면 고치고, 무엇을 왜 바꿨는지 적어라. 계획이 충분히 고유하다고 확인한 뒤에 코드를 쓰고, 수정한 계획을 그대로 따른다.

원칙

• 히어로는 곧 주장이다. 주제의 세계에서 가장 특징적인 것(헤드라인, 이미지, 라이브 데모, 인터랙션)으로 시작하라.
• 페이지의 개성은 타이포그래피가 만든다. 아무 프로젝트에나 쓸 법한 조합 말고 이 주제에 어울리는 서체를 골라, 타입 처리 자체가 기억에 남는 디자인의 일부가 되게 하라.
• 모션은 의도적으로 써라. 애니메이션이 주제에 보탬이 되는 지점이 있는지부터 따져라. 페이지 로드 시퀀스, 스크롤에 따라 드러나는 요소, 호버 반응, 은은한 배경 움직임 같은 것이다. 여기저기 흩어진 효과보다 잘 짜인 한 순간이 더 강하게 남는다. 다만 적을수록 나을 때도 많고, 과한 애니메이션은 오히려 AI가 만든 느낌을 준다.
• 복잡도는 비전에 맞춰라. 화려한 방향이면 정교하게 구현하고, 미니멀한 방향이면 간격·타입·디테일을 정밀하게 다듬어라. 우아함이란 정한 방향을 잘 해내는 것이다.
• 대담함은 한 곳에만 쓰고 나머지는 조용히 둬라. 액센트가 바탕과 부딪히면 색을 갈아치우지 말고 비슷한 계열로 옮기거나 채도를 낮춰라.