웹사이트 디자인을 참고할 때 가장 귀찮은 게 뭘까요. 개발자 도구 열어서 폰트 확인하고, 색상 코드 복사하고, 간격 하나하나 재는 겁니다. 비개발자한테는 개발자 도구 자체가 외계어입니다. 저도 이 블로그 디자인 잡을 때 레퍼런스 사이트 CSS를 일일이 뜯어봤는데, 시간만 날리고 핵심은 못 잡았습니다.
DesignMD는 이 과정을 버튼 하나로 끝냅니다. 크롬 확장 프로그램을 설치하고, 마음에 드는 사이트에서 클릭하면 DESIGN.md 파일이 나옵니다. 이걸 Claude Code에 던져주면 "이 느낌으로 만들어줘"가 실제로 됩니다.
실제 사용 영상 보기
뭘 뽑아주나
수치만 나열하는 게 아닙니다. AI가 읽기 좋은 구조로 정리된 마크다운 문서가 나옵니다.
| 항목 | 추출 내용 |
|---|---|
| 타이포그래피 | 폰트 패밀리, 사이즈, 자간, 행간 |
| 컬러 | 주요 색상, 배경, 텍스트, 포인트 컬러 |
| 간격 & 레이아웃 | 패딩, 마진, 그리드 시스템 |
| 모서리 반경 | 버튼이나 카드가 얼마나 둥근지 |
| 그림자 & 모션 | 호버 효과, 트랜지션 |
여기에 브랜드 무드, 디자인 원칙, Do/Don't 가이드까지 포함됩니다. SKILL.md 형식도 지원해서 Claude Code 스킬 파일로도 바로 쓸 수 있습니다.
실제 사용 흐름
1 크롬 웹스토어에서 DesignMD 설치
검색창에 "DesignMD Style Extractor"를 입력하고 설치합니다.
2 마음에 드는 사이트에서 버튼 클릭
레퍼런스 사이트를 열고 확장 프로그램 아이콘을 클릭합니다. DESIGN.md 또는 SKILL.md 형식을 선택할 수 있습니다.
3 Claude Code에 던져주기
생성된 파일을 프로젝트 폴더에 넣으면 끝입니다. "DESIGN.md 참고해서 이 느낌으로 페이지 만들어줘"라고 하면 됩니다.
비개발자한테 특히 유용한 이유
개발자는 개발자 도구에서 CSS를 직접 읽을 수 있습니다. 비개발자는 못합니다. 그런데 AI한테 "이 사이트처럼 만들어줘"라고 말할 때, 스크린샷만 던져서는 정확한 결과가 안 나옵니다. AI는 스크린샷에서 폰트가 Pretendard인지 Noto Sans인지 구분하지 못합니다.
DesignMD는 이 간극을 메웁니다. 비개발자가 눈으로 보는 "느낌"을 AI가 읽을 수 있는 "데이터"로 바꿔줍니다.
활용 예시
- 레퍼런스 사이트 A의 DESIGN.md + 자기 브랜드 컬러 → "이 구조에 이 색상으로 만들어줘"
- 경쟁사 사이트 3개의 DESIGN.md 비교 → 공통 패턴 파악 → 자기 사이트에 적용
- 자기 사이트의 DESIGN.md 추출 → 새 페이지 만들 때 일관성 유지
자주 묻는 질문 (FAQ)
Q. 무료인가요?
네, 오픈소스이고 무료입니다. GitHub에 코드가 공개되어 있어서 어떤 데이터를 수집하는지 직접 확인할 수 있습니다.
Q. 추출한 디자인을 그대로 쓰면 저작권 문제 없나요?
디자인 시스템을 그대로 복제하면 문제가 될 수 있습니다. 참고용으로 쓰되, 자기 브랜드에 맞게 변형해서 사용하세요.
Q. Claude Code 외에 다른 AI에서도 쓸 수 있나요?
DESIGN.md는 표준 마크다운 파일이라 ChatGPT, Gemini, Codex 어디서든 읽을 수 있습니다. Claude Code에 최적화된 SKILL.md 형식도 지원합니다.
정리하며
이 블로그도 디자인 잡을 때 레퍼런스 사이트를 몇 개 뜯어봤습니다. 개발자 도구 열어서 CSS 복사하고, 색상 코드 하나하나 옮기고. 비개발자한테 이 과정은 고역입니다. DesignMD를 그때 알았으면 시간을 많이 아꼈을 겁니다.
결국 AI한테 잘 시키려면, 내가 원하는 걸 AI가 읽을 수 있는 형태로 건네줘야 합니다. "이 느낌으로 해줘"가 아니라, 그 느낌의 구체적인 수치를 넘겨주는 겁니다. DesignMD는 그 번역기 역할을 합니다.
Claude Code 실전 팁 더 보기
클로드코드 팁 모아보기 →
참고 자료
· DesignMD GitHub — bergside/design-md-chrome
댓글
댓글 쓰기