가이드

디자이너가 없나요? 검증된 디자인 시스템을 내 앱에 가져오세요

좋은 디자인은 보면 알지만, 처음부터 만들기는 어렵죠. 그럴 필요 없어요. 마음에 드는 제품을 골라 그 디자인 시스템을 DESIGN.md로 가져오고, 그 브랜드만의 요소를 바꾸면, 코딩 에이전트가 검증된 시스템으로 앱을 만들 수 있어요.

검증되었다는 건 실제 사용자에게 테스트되었다는 뜻이에요. 잘 읽히는 글자, 여유 있는 간격, 버튼처럼 보이는 버튼. 이런 건 그대로 두고, 정체성만 여러분의 것으로 바꾸세요.

대상 독자: 1인 창업자와 소규모 팀. 업데이트: .

이 가이드에서 얻는 것

  • 제품에 맞는 참고 사이트를 고를 수 있도록 좋은 참고 사이트의 조건을 정리한 짧은 목록.
  • 시작 디자인 시스템으로 저장소에 바로 넣을 수 있는 DESIGN.md.
  • 유지할 것(타입 스케일, 간격, 반경, 컴포넌트 형태)과 바꿀 것(브랜드 색상, 로고, 폰트, 톤)의 명확한 구분.
  • 교체 작업을 대신해 주는 프롬프트와, 결과가 여전히 잘 읽히는지 확인하는 방법.

참고 사이트 고르는 법

어떤 사이트를 참고하느냐가 앱의 느낌을 대부분 결정하니, 여기에 10분만 투자하세요. 좋은 참고 사이트는 이런 특징이 있어요:

  • 같은 종류의 제품. 대시보드는 패션 쇼핑몰이 아니라 다른 대시보드에서 참고할 때 잘 맞아요.
  • 비슷한 밀도. 앱이 폼과 표로 되어 있다면, 큰 히어로 하나뿐인 사이트가 아니라 폼과 표가 있는 사이트를 고르세요.
  • 명확한 액션 색상 하나. 클릭할 곳을 한 가지 색상으로 표시한다면, 리브랜딩은 그 색상 계열 하나만 바꾸면 돼요.
  • 읽기 쉬운 글자. 휴대폰으로 사이트를 열고 한 단락을 읽어 보세요. 편하게 읽힌다면 타입 스케일을 가져올 만해요.
  • 원하는 라이트 또는 다크. 다크 중심 시스템을 라이트로 바꾸는 건 조정이 아니라 리디자인이에요.
  • 브랜드 그 자체가 아닌 모습. 색상만 봐도 어느 사이트인지 알 수 있다면, 바꿔야 할 게 너무 많아요.

DESIGN.md 갤러리는 카테고리별로 필터링할 수 있어서 후보 몇 곳을 빠르게 비교할 수 있어요.

단계

  1. 후보 사이트 두세 곳 고르기

    위의 특징을 기준으로 삼으세요. 마음에 드는 화면의 스크린샷을 찍어 두면 나중에 결정하는 데 도움이 돼요.

  2. 가장 마음에 드는 사이트의 DESIGN.md 받기

    갤러리 페이지에서 복사하거나, Design Extractor 홈페이지에 URL을 붙여 넣고 Pro 추출을 실행하세요. Pro는 사이트의 주요 페이지를 샘플링해 색상, 타이포그래피, 간격, 반경, 컴포넌트 레시피가 담긴 파일 하나를 돌려줘요. 이 형식이 처음이라면 DESIGN.md란 무엇인지 읽어 보세요.

  3. 내 것으로 만들기

    브랜드 색상 계열, 상용 폰트라면 폰트, 이름, 톤을 바꾸세요. 아래 프롬프트로 한 번에 할 수 있어요.

  4. 저장소에 넣고 에이전트에게 알려 주기

    저장소 루트에 DESIGN.md로 저장하세요. 추가할 안내 문구는 Claude Code와 Cursor 가이드에 있어요.

  5. 확인하기

    편집한 파일을 무료 DESIGN.md 검사기에 붙여 넣으세요. 구조를 검사하고 대비가 너무 낮은 텍스트 색상을 알려 줘요.

실전 예시: Notion

Notion의 느낌이 마음에 든다고 해 볼게요. 갤러리의 DESIGN.md에 기록된 디자인 시스템과, 무엇을 유지하고 무엇을 바꿀지 정리했어요.

색상

타이포그래피

hero-displayDesign is intelligence made visibleNotion Inter96px / 600 / 1.05
display-lgDesign is intelligence made visibleNotion Inter72px / 500 / 1.2
display-mdDesign is intelligence made visibleNotion Inter54px / 700 / 1.05
display-smDesign is intelligence made visibleNotion Inter40px / 400 / 1.5
title-lgDesign is intelligence made visibleNotion Inter24px / 500 / 0.85
title-mdDesign is intelligence made visibleNotion Inter22px / 700 / 1.25

모양

xs · 4px
sm · 8px
md · 12px
full · 9999px

Notion DESIGN.md에서 렌더링한 처음 12개 색상, 6개 타입 스타일, 4개 반경이에요. 견본을 클릭하면 hex 값이 복사돼요.

유지할 것과 바꿀 것

파일의 항목Notion DESIGN.md의 내용할 일
타입 스케일hero-display, 96px, 굵기 600부터 body, 16px, 굵기 400까지유지
반경xs 4px, sm 8px, md 12px, full 9999px유지
뉴트럴 색상surface #FFFFFF, ink #000000유지
컴포넌트 형태크기, 패딩, 테두리, 상태가 담긴 컴포넌트 레시피 14개유지
브랜드 색상primary #0075DE, primary-focus #0075DE, primary-link #097FE8, primary-pressed #005BAB, primary-tint #E6F3FE내 색상과 그 명도 단계로 변경
폰트Notion Inter, Lyon Text무료로 쓸 수 있을 때만 유지, 아니면 대체 폰트 사용
이름name: Notion내 제품 이름으로 변경
톤Overview에 그 브랜드의 개성이 설명되어 있음내 브랜드에 대해 한두 문장으로 다시 작성
로고와 이미지파일에 없음내 로고, 아이콘, 일러스트 사용
폰트가 고민된다면? Notion DESIGN.md의 Typography 섹션에 답이 있어요. 원문 그대로 옮겼어요:
### Note on Font Substitutes
Notion Inter is a proprietary cut; use open-source **Inter** (variable) and keep the token tracking values exactly, since the negative display tracking is calibrated for Inter's metrics. Lyon Text is commercial; substitute **Source Serif 4** or **Newsreader** at the `quote` size and 1.55 line height, or fall back to Georgia as the site's own stack does. Check that the serif's x-height doesn't make 18px quotes read larger than surrounding 16px body.

Notion 공개 웹사이트에서 추출한 것으로, 공식 브랜드 가이드라인이 아니에요. Notion DESIGN.md 전체 읽기

프롬프트 하나로 내 것으로 만들기

편집은 코딩 에이전트가 할 수 있어요. DESIGN.md가 있는 저장소를 열고 아래와 같은 프롬프트를 붙여 넣되, Acme의 이름, 색상, 문장 대신 여러분의 것을 넣으세요. 이 프롬프트는 이 가이드를 위해 Notion의 실제 토큰 이름으로 작성했어요.

Make DESIGN.md our own design system:
- Rename it from "Notion" to "Acme" in the front matter name and the title.
- Replace primary (#0075DE) with our brand color #2F6FEB, and recompute primary-focus, primary-link, primary-pressed, primary-tint as matching shades.
- Replace the old primary hex values everywhere they appear, including in the component recipes.
- Where Notion Inter or Lyon Text is a commercial font, swap it for the open-source stand-in the Typography section names.
- Rewrite the Overview in our voice: Acme helps small teams plan their week.
Keep every other token as it is, and check that text on the new primary meets 4.5:1 contrast.

그런 다음 diff를 읽어 보세요. hex 값은 두 곳에서 바뀌어요: 맨 위의 colors 토큰, 그리고 아래쪽 각 컴포넌트 레시피의 CSS. 두 곳이 함께 바뀌지 않으면 버튼에 이전 색상이 남아요.

브랜드를 통째로 복사하면 안 되는 이유

가져온 시스템은 출발점이지 변장이 아니에요. 다른 브랜드의 모습을 그대로 내놓으면 득보다 실이 커요:

  • 사람들은 알아봐요. 유명 제품처럼 생긴 앱에 이름만 다르면 복사본으로 보이고, 신뢰를 잃어요.
  • 정체성은 가져갈 수 있는 게 아니에요. 로고, 제품 이름, 대표 색상, 일러스트, 문구는 그 브랜드의 것이에요. 간격, 글자 크기, 반경은 배울 수 있는 공통의 기술이에요.
  • 폰트에는 라이선스가 있어요. 그 사이트의 상용 폰트에 대한 라이선스가 여러분의 사이트까지 적용되지는 않아요.
  • 키워 나가고 싶어질 거예요. 색상과 톤이 여러분의 것이 되면, 화면을 추가하는 일이 남의 제품이 아닌 내 제품을 만드는 일처럼 느껴져요.

기본 원칙: 구조는 유지하고, 정체성은 바꾸세요. 최소한 브랜드 색상, 로고, 상용 폰트, 톤은 바꾸세요. 갤러리 파일은 각 브랜드의 공개 웹사이트에서 추출한 것으로 공식 브랜드 가이드라인이 아니며, 여러분이 추출하는 모든 파일도 마찬가지예요.

FAQ

디자이너 없이 디자인 시스템 가져오기: 자주 묻는 질문

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

사이트의 간격, 글자 크기, 모서리 반경을 출발점으로 삼는 건 대부분의 인터페이스가 만들어지는 방식이에요. 하지만 그 정체성을 복사하는 건 안 돼요: 로고, 이름, 대표 브랜드 색상, 일러스트, 문구. 이런 것들은 바꾸고, 상용 폰트는 라이선스를 받은 경우에만 사용하세요. 갤러리 파일은 공개 웹사이트에서 추출한 것으로, 공식 브랜드 가이드라인이 아니에요.

많은 브랜드가 상용 폰트나 커스텀 폰트를 써요. DESIGN.md는 타이포그래피 토큰에 각 패밀리 이름을 적고, Typography 섹션에서 보통 자간과 굵기에 대한 메모와 함께 오픈 소스 대체 폰트를 제안해요. 대체 폰트를 쓰거나, 비율이 비슷한 무료 폰트를 고르세요.

갤러리의 파일을 읽고 복사하는 건 무료예요. 원하는 사이트를 추출하려면 선불 크레딧이 필요해요. Pro 추출은 10크레딧이 들고, 팩은 $5 for 50 credits부터예요. 크레딧은 만료되지 않고 구독도 없어요.

아니요. 텍스트 파일이에요. 색상은 hex 값, 폰트는 이름, 크기는 픽셀이에요. 값을 바꾸거나 코딩 에이전트에게 바꿔 달라고 요청한 다음, 무료 DESIGN.md 검사기로 결과를 확인하세요. 검사기는 대비가 너무 낮은 텍스트 색상도 알려 줘요.

마음에 드는 사이트를 찾았나요?

URL을 붙여 넣고 그 디자인 시스템을 DESIGN.md로 받아, 내 것으로 만들어 보세요.

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

관련 가이드

모든 DESIGN.md 가이드 보기