가이드

참고 사이트 두 곳을 섞어 프로토타입용 디자인 하나 만들기

“Notion과 Stripe를 섞은 느낌으로 해 주세요.” 클라이언트는 프로토타입을 이런 식으로 요청하곤 해요. 각 사이트의 DESIGN.md가 있으면 이 한 문장을 구체적인 사양 하나로 바꿀 수 있어요. 토큰을 나란히 비교하고, 어느 파일을 기준으로 할지 정하고, 합치면 돼요.

Design Extractor는 두 파일을 제공해요. 합치는 건 여러분의 몫이에요. 직접 하거나 코딩 에이전트로 할 수 있고, 이 가이드에서 두 방법을 모두 보여 드려요.

대상 독자: 프로토타입을 만드는 디자이너와 에이전시. 업데이트: .

이 가이드에서 얻는 것

  • 토큰 단위로 비교한 DESIGN.md 파일 두 개. 차이가 구체적으로 보여요.
  • 병합 계획: 한 파일을 기준으로 삼고, 다른 파일에서 가져올 토큰 그룹을 지정.
  • 직접 또는 아래 프롬프트로 에이전트가 만든 병합된 DESIGN.md.
  • 섞은 결과가 여전히 잘 읽히는지 확인하는 대비 검사.

섞는 방법

섞는다는 건 평균을 내는 게 아니에요. 한 팔레트의 절반과 다른 팔레트의 절반을 섞으면 어느 쪽도 닮지 않은 사이트가 돼요. 효과적인 방법은 기준 파일 하나에 다른 파일의 이름 붙인 부분 몇 가지를 더하는 거예요:

  • 기준 파일은 구조를 제공해요: 타입 스케일, 간격, 반경, 컴포넌트 레시피.
  • 강조 파일은 primary 색상 계열이나 디스플레이 폰트처럼 그룹 전체를 빌려줘요. 따로 떨어진 값 하나만 가져오지는 않아요.

두 파일 모두 Google의 DESIGN.md 사양을 따르기 때문에 그룹이 맞아떨어져요: colors, typography, rounded, spacing, components. 전체 구조는 DESIGN.md에 담긴 내용을 참고하세요.

단계

  1. 두 파일 받기

    갤러리에 있다면 복사하고, 없다면 Design Extractor 홈페이지에 각 URL을 붙여 넣고 각각 Pro 추출을 실행하세요.

  2. 나란히 놓기

    아래 표처럼 primary 색상, 배경, 폰트, 글자 크기, 반경을 비교하세요.

  3. 기준 고르기

    레이아웃과 밀도가 프로토타입과 맞는 사이트를 고르세요.

  4. 강조 파일에서 빌릴 것 정하기

    “primary 색상 계열”처럼 토큰 그룹 단위로 적어 두세요.

  5. 직접 또는 에이전트로 합치기

    두 방법 모두 아래에 있어요. 결과를 프로토타입 저장소에 DESIGN.md로 저장하세요.

  6. 대비와 구조 확인하기

    병합한 파일을 무료 DESIGN.md 검사기에 붙여 넣으세요.

실전 예시: Notion + Stripe

갤러리의 실제 파일 두 개: Notion DESIGN.md와 Stripe DESIGN.md. 둘 다 브랜드의 공개 웹사이트에서 추출한 것으로, 공식 브랜드 가이드라인이 아니에요.

NotionStripe
Primary#0075DE#533AFD
배경#FFFFFF#FFFFFF
텍스트#000000#061B31
폰트Notion Inter, Lyon TextSohne
가장 큰 글자hero-display, 96px, 굵기 600hero-display, 56px, 굵기 500
본문 글자body, 16px, 굵기 400body-lg, 18px, 굵기 300
버튼 반경8px4px
색상 토큰2021
컴포넌트 레시피1471

섞는 방법 하나

Notion의 타입, 간격, 반경, 컴포넌트를 기준으로 삼고, Stripe에서 primary 색상 계열(primary, primary-focus, primary-bright, primary-pressed, primary-deep, primary-soft)을 빌려 오세요. 전형적인 “우리 레이아웃에 저쪽 에너지” 요청이에요.

확정하기 전에 수치를 확인하세요. Notion 배경 위 Stripe primary의 대비율: 6.1:1. 새 primary 위 Notion on-primary 텍스트의 대비율: 6.1:1. WCAG AA 기준으로 본문 텍스트는 최소 4.5:1, 큰 텍스트와 아이콘은 3:1이 필요해요.

함정이 하나 있어요. Notion 자체의 primary 값(#0075DE)이 파일에 65번 나오며, 대부분 컴포넌트 레시피 안에 있어요. 맨 위의 토큰만 바꿔서는 부족하고, 모든 곳을 바꿔야 해요.

위에서 설명한 수동 병합을 이 페이지가 두 갤러리 파일로 조합한 일러스트예요: Notion의 토큰에 Stripe의 primary 계열을 적용한 것으로, 일부만 보여 줘요. Design Extractor의 기능이 아니며 에이전트가 만든 결과물도 아니에요.
---
name: Notion and Stripe prototype
colors:
  primary: "#533AFD"
  primary-focus: "#5452FB"
  primary-bright: "#635BFF"
  primary-pressed: "#4032C8"
  primary-deep: "#2E2B8C"
  primary-soft: "#D6D9FC"
  on-primary: "#FFFFFF"
  ink: "#000000"
typography:
  hero-display:
    fontFamily: Notion Inter
    fontSize: 96px
    fontWeight: 600
    lineHeight: 1.05
    letterSpacing: -4.6px
  body:
    fontFamily: Notion Inter
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: normal
rounded:
  xs: 4px
  sm: 8px
  md: 12px
  full: 9999px
---

직접 합치기

  1. 기준 파일을 DESIGN.md로 복사하고 name을 바꾸세요.
  2. colors에서 기준 파일의 primary 계열을 강조 파일의 값으로 바꾸세요.
  3. 파일 전체에서 이전 hex 값을 하나씩 검색해 바꾸세요. 컴포넌트 레시피의 CSS에 색상이 반복되기 때문에 토큰 목록만 바꿔서는 부족해요.
  4. Overview와 Colors 섹션의 설명을 어느 한 브랜드가 아닌 섞은 결과를 설명하도록 다시 쓰세요.
  5. 검사기로 파일을 확인하고 대비 경고를 해결하세요.

에이전트로 합치기

두 파일을 프로토타입 저장소(예: design/ 아래)에 저장하고, 기준 파일, 가져올 그룹, 실행할 확인 작업을 명시한 프롬프트를 에이전트에게 주세요. 아래 프롬프트는 이 가이드를 위해 실제 파일 이름과 토큰 이름으로 작성했어요.

Read design/notion.DESIGN.md and design/stripe.DESIGN.md. Write DESIGN.md for our prototype:
- Start from the Notion file: keep its typography, spacing, rounded tokens and component recipes.
- Take Stripe's primary color family (primary, primary-focus, primary-bright, primary-pressed, primary-deep, primary-soft) and use it wherever the Notion file uses its own primary colors, including inside the component recipes.
- Rename the file and rewrite the Overview and Colors prose so they describe the blend, not either brand.
- Keep the section order of Google's DESIGN.md spec, and make sure text on the new primary meets 4.5:1 contrast.
List every value you changed.

결과는 다른 변경 사항처럼 리뷰하세요. diff를 읽고, 파일을 검사기에 붙여 넣으세요. 입력은 에이전트가 하지만, 프롬프트에 담긴 결정은 여전히 여러분의 몫이에요.

FAQ

두 웹사이트 디자인을 하나로 섞기: 자주 묻는 질문

시도해 보기 전에 많이 묻는 질문에 짧게 답해 드려요.

아니요, 병합 기능은 없어요. 추출할 때마다 사이트 하나의 DESIGN.md를 돌려줘요. 두 파일은 직접 합치거나, 이 가이드에 있는 것 같은 프롬프트로 코딩 에이전트에게 요청한 다음 결과를 리뷰하세요.

두 개, 가끔은 세 개예요. 한 파일이 기준이 되어 구조(타입 스케일, 간격, 반경, 컴포넌트)를 제공해요. 나머지는 색상 계열이나 디스플레이 폰트처럼 이름을 붙일 수 있는 부분을 빌려줘요. 더 많은 파일의 값을 섞으면 결과가 짜깁기한 것처럼 보여요.

레이아웃과 밀도가 프로토타입과 맞는 파일이에요. 클라이언트가 한 사이트의 색상을 가진 차분한 문서형 제품을 원한다면, 차분한 사이트가 기준이 되고 다른 사이트는 색상을 빌려줘요. 반대로 하면 안 돼요.

병합한 파일을 무료 DESIGN.md 검사기에 붙여 넣으세요. 구조를 검사하고 대비가 너무 낮은 텍스트 색상을 알려 줘요. 그런 다음 클라이언트에게 보여 주기 전에 그 파일로 실제 화면을 하나 만들어 보세요.

요청에 필요한 두 파일을 받아 보세요

참고 사이트마다 URL을 붙여 넣고 DESIGN.md를 받아, 비교하고 합쳐 보세요.

웹사이트에서 DESIGN.md 추출하기

관련 가이드

모든 DESIGN.md 가이드 보기