이 블로그 처음 만들 때 디자인 때문에 시간을 엄청 썼어요. 마음에 드는 사이트가 있으면 개발자 도구를 열어야 하는데, 비개발자한테 이건 진짜 외계어예요. 폰트가 뭔지, 색상 코드가 뭔지, 간격이 몇 픽셀인지. 한 시간 넘게 붙잡고 있었는데 건진 건 별로 없더라고요.
나중에 DesignMD라는 크롬 확장 프로그램을 알게 됐는데, 좀 허탈했어요. 버튼 하나 누르면 그 사이트 디자인 정보가 마크다운 파일로 쫙 나오거든요. 이걸 Claude Code에 던지면 "이 느낌으로 만들어줘"가 진짜 먹혀요.
뭘 뽑아주나
버튼 누르면 이런 것들이 뽑혀요.
| 항목 | 추출 내용 |
|---|---|
| 타이포그래피 | 폰트 패밀리, 사이즈, 자간, 행간 |
| 컬러 | 주요 색상, 배경, 텍스트, 포인트 컬러 |
| 간격 & 레이아웃 | 패딩, 마진, 그리드 시스템 |
| 모서리 반경 | 버튼이나 카드가 얼마나 둥근지 |
| 그림자 & 모션 | 호버 효과, 트랜지션 |
근데 폰트랑 색상만 나오는 게 아니에요. 브랜드 무드라든지, "이건 해도 되고 이건 하면 안 돼" 같은 디자인 원칙도 같이 뽑혀요. 아, 그리고 SKILL.md라는 형식으로도 뽑을 수 있는데 — 이건 Claude Code 스킬 파일이라 그냥 폴더에 넣으면 바로 적용돼요.
실제 사용 흐름
1 크롬 웹스토어에서 DesignMD 설치
크롬 웹스토어에서 "DesignMD Style Extractor" 검색해서 설치해주세요. 30초면 끝나요.
2 마음에 드는 사이트에서 버튼 클릭
따라 만들고 싶은 사이트 열어놓고, 확장 프로그램 아이콘 클릭하세요. DESIGN.md랑 SKILL.md 중에 골라서 뽑으면 돼요.
3 Claude Code에 던져주기
뽑은 파일을 프로젝트 폴더에 넣고 "DESIGN.md 참고해서 이 느낌으로 만들어줘"라고 말하면 끝이에요. 진짜 이게 다예요.
비개발자한테 특히 유용한 이유
개발자는 개발자 도구 열면 CSS 바로 보이니까 상관없어요. 근데 비개발자는 그게 안 되잖아요. 그래서 스크린샷을 찍어서 AI한테 "이거 따라 만들어줘" 하는데, 솔직히 결과가 좀 애매하게 나와요. AI가 스크린샷만 보고 "아 이 폰트 Pretendard고 간격 16px이네" 이렇게 정확히 뽑아내기는 아직 어려워요.
그래서 DesignMD가 필요한 거예요. 내가 보고 "오 이거 좋다" 한 그 느낌, 그걸 폰트명이랑 색상 코드랑 간격 숫자로 바꿔서 AI한테 넘겨주는 거.
이런 식으로 쓸 수 있어요
- 마음에 드는 사이트 DESIGN.md 뽑고 + 내 브랜드 컬러 합쳐서 → "이 구조에 이 색으로 만들어줘"
- 경쟁사 3곳 DESIGN.md 비교해보면 공통점이 보여요. 그걸 내 사이트에 적용
- 내 사이트 DESIGN.md를 뽑아두면 새 페이지 만들 때 디자인이 안 흔들려요
자주 묻는 질문 (FAQ)
Q. 무료인가요?
네 무료예요. 오픈소스라 코드도 GitHub에 다 공개되어 있어요.
Q. 추출한 디자인을 그대로 쓰면 저작권 문제 없나요?
그대로 베끼면 당연히 문제돼요. 참고만 하고 자기 브랜드에 맞게 바꿔서 쓰세요.
Q. Claude Code 외에 다른 AI에서도 쓸 수 있나요?
당연하죠. DESIGN.md가 그냥 마크다운 파일이라 ChatGPT든 Gemini든 아무 데나 넣으면 돼요. Claude Code한테 최적화된 SKILL.md도 따로 뽑을 수 있고요.
써보고 느낀 점
솔직히 이 블로그 디자인 잡을 때가 제일 힘들었어요. 레퍼런스 사이트 CSS를 개발자 도구로 하나하나 뜯어봤거든요. 그 시간에 글을 두 편은 더 썼을 텐데. DesignMD를 그때 알았으면 진심 좋았을 거예요.
AI한테 "이 느낌으로 해줘" 하고 싶은데 그 느낌을 어떻게 전해야 할지 모르겠으면, 이거 한 번 깔아보세요. 버튼 하나 누르는 건데, 뽑힌 거 보면 "아 이런 게 있었어?" 하실 거예요.
Claude Code 실전 팁 더 보기
클로드코드 팁 모아보기 →
참고 자료
· DesignMD GitHub — bergside/design-md-chrome
댓글
댓글 쓰기