getdesign.md는 무엇인가

getdesign.md는 잘 알려진 웹사이트의 공개 화면을 분석해 만든 DESIGN.md 자료를 둘러볼 수 있는 서비스입니다. VoltAgent 팀의 awesome-design-md GitHub 모음을 웹에서 찾기 쉽게 보여주는 역할을 하며, 원하는 사이트를 대상으로 별도 분석을 요청하는 기능도 제공합니다.

여기서 중요한 점은 DESIGN.md와 getdesign.md가 같은 것이 아니라는 점입니다.

  • DESIGN.md: 색상, 글꼴, 간격과 컴포넌트 규칙을 기록하는 파일 형식
  • getdesign.md: 여러 DESIGN.md 분석을 탐색하거나 요청하는 서비스

설치가 필요한가

사이트를 둘러보고 디자인을 선택하는 데는 설치가 필요 없습니다. 브라우저에서 getdesign.md에 접속한 뒤 자료를 고르고, 제공되는 DESIGN.md 내용을 프로젝트에 저장해 사용합니다.

기본 흐름은 다음과 같습니다.

getdesign.md에서 디자인 탐색
→ DESIGN.md 내용 확인 또는 파일 받기
→ 내 프로젝트 루트에 DESIGN.md 저장
→ AI 코딩 도구에 적용 요청
→ 결과 화면 검토

1단계: 목적부터 정하기

사이트를 보기 전에 필요한 화면을 한 문장으로 정해두면 선택하기 쉽습니다.

  • 문서와 정보가 많은 관리 화면
  • 제품을 강조하는 랜딩 페이지
  • 차분한 업무용 SaaS 화면
  • 이미지가 중심인 포트폴리오

단순히 유명한 브랜드를 고르기보다 만들려는 서비스와 콘텐츠 밀도가 비슷한 디자인을 고르는 편이 결과가 좋습니다.

2단계: 카탈로그에서 찾기

공식 카탈로그에서는 AI·개발 도구, 생산성, 디자인, 금융, 쇼핑과 미디어 같은 분야별로 자료를 찾을 수 있습니다.

  1. getdesign.md 카탈로그에 접속합니다.
  2. 만들려는 서비스와 가까운 카테고리를 선택합니다.
  3. 후보 디자인의 색상, 글꼴과 화면 밀도를 비교합니다.
  4. 라이트·다크 모드가 필요한지 확인합니다.
  5. 적용할 자료의 설명과 이용 조건을 읽습니다.

공개 자료와 맞춤 제작 상품의 제공 범위는 다를 수 있으므로 내려받기나 결제 전에 현재 화면에 표시된 구성과 가격을 확인해야 합니다.

3단계: DESIGN.md를 프로젝트에 넣기

선택한 내용을 DESIGN.md라는 이름으로 프로젝트 최상위 폴더에 둡니다.

my-project/
├─ src/
├─ public/
├─ package.json
└─ DESIGN.md

기존 DESIGN.md가 있다면 바로 덮어쓰지 말고 DESIGN-reference.md처럼 별도 이름으로 비교합니다. 현재 서비스의 색상과 새 참고 자료의 규칙을 그대로 섞으면 화면이 불안정해질 수 있습니다.

4단계: AI 코딩 도구에 요청하기

처음에는 전체 사이트가 아니라 한 페이지에만 적용하는 것이 좋습니다.

DESIGN.md를 디자인 참고 자료로 읽어줘.
현재 기능과 콘텐츠 구조는 유지하고, 홈 화면의 색상·타이포그래피·간격만 적용해줘.
원본 브랜드의 로고와 이미지는 사용하지 말고 우리 콘텐츠에 맞게 조정해줘.
모바일 390px 화면도 함께 확인해줘.

“이 사이트와 똑같이 만들어줘”라는 요청은 로고와 고유 표현까지 따라갈 위험이 있습니다. 색상 대비, 정보 위계, 간격과 컴포넌트 패턴처럼 필요한 원칙만 적용하도록 범위를 지정합니다.

5단계: 적용 결과 확인하기

AI가 코드를 수정한 뒤 다음 항목을 확인합니다.

  • 제목과 본문의 구분이 명확한가
  • 버튼과 링크가 배경에서 충분히 구분되는가
  • 모바일에서 메뉴와 긴 제목이 잘리지 않는가
  • 기존 기능과 링크가 그대로 동작하는가
  • 한 화면에 강조 색상이 지나치게 많지 않은가
  • 원본 사이트의 로고나 이미지를 복사하지 않았는가

보기 좋은 첫 화면보다 다른 페이지를 추가했을 때도 같은 규칙이 유지되는지가 더 중요합니다.

공개 자료와 맞춤 요청의 차이

getdesign.md는 공개 카탈로그 외에도 특정 웹사이트를 대상으로 한 비공개 DESIGN.md 분석과 웹사이트 시작용 상품을 안내하고 있습니다. 이 부분은 무료 공개 자료와 별개이며 가격과 제공 범위가 바뀔 수 있습니다.

결제 전에는 다음을 확인합니다.

  • 결과물이 DESIGN.md만 포함하는지
  • 라이트·다크 버전과 미리보기가 포함되는지
  • 전달 방식과 예상 기간
  • 환불 및 재배포 조건
  • 참고하려는 사이트와의 관계에 대한 고지

브랜드 디자인을 사용할 때 주의할 점

getdesign.md는 카탈로그의 자료가 해당 기업이 제공한 공식 디자인 시스템이 아니라, 공개된 시각 패턴을 독립적으로 분석한 참고 자료라고 설명합니다.

따라서 다음 원칙을 지키는 것이 좋습니다.

  • 타사의 로고, 사진과 고유 일러스트는 가져오지 않습니다.
  • 브랜드 이름을 내 서비스처럼 표시하지 않습니다.
  • 색상과 간격을 참고하더라도 우리 콘텐츠에 맞게 수정합니다.
  • 유료 결과물을 다시 판매하거나 공개할 때는 이용 조건을 확인합니다.
  • 완성된 화면이 특정 사이트와 혼동될 정도로 같지 않은지 검토합니다.

제가 추천하는 활용 방식

  1. 카탈로그에서 후보를 두 개만 고릅니다.
  2. 각 DESIGN.md에서 마음에 드는 규칙을 표시합니다.
  3. 프로젝트 고유 색상과 콘텐츠 구조는 유지합니다.
  4. 한 페이지에 적용해 모바일까지 확인합니다.
  5. 잘 맞는 규칙만 내 프로젝트의 DESIGN.md로 다시 정리합니다.

getdesign.md는 완성된 사이트를 복사하는 도구보다, 디자인 방향을 빠르게 비교하고 AI에게 구체적인 기준을 전달하는 참고 자료실로 사용할 때 가장 실용적입니다.