Claude와 designlang으로 디자인 분석 폴더를 만들어 본 실습
클로드 디자인 1주차 실습으로, 마음에 드는 웹사이트의 디자인을 분석해 색상, 폰트, 여백, 버튼, 카드 등의 디자인 규 칙을 추출해 보았습니다.
평소 웹사이트를 만들 때 참고하고 싶은 사이트가 있어도 다음과 같이 막연하게 요청하는 경우가 많았습니다.
“이 사이트처럼 깔끔하고 전문적으로 만들어 주세요.”
하지만 이 방식은 구체적인 기준이 없기 때문에 AI가 만든 결과물의 색상이나 폰트, 버튼 모양이 매번 달라지는 문제가 있었습니다.
이번 실습에서는 웹사이트의 디자인을 눈으로만 참고하는 것이 아니라, 실제 디자인 토큰과 문서로 추출해 다른 웹페이지나 PPT 제작에 활용하는 것을 목표로 했습니다.
사용한 도구는 다음과 같습니다.
Claude
Claude Code
Node.js
designlang
HTML
1. Node.js 설치 상태 확인하기
designlang을 실행하려면 Node.js가 필요했습니다.
저는 직접 명령어를 입력하기보다는 Claude에게 다음과 같이 요청했습니다.
내 컴퓨터에 Node.js가 설치돼 있는지 확인해줘.
node --version을 실행하고, 설치되어 있으면 버전만 알려줘.
설치되어 있지 않으면 내 운영체제에 맞는 방법으로 설치해줘.
관리자 권한이나 내 확인이 필요한 부분에서는 멈춰서 안내해줘.Claude가 컴퓨터 환경을 확인한 후 Node.js의 설치 여부와 버전을 알려주었습니다.
명령어 사용에 익숙하지 않은 사람도 Claude의 안내를 따라 하나씩 진행할 수 있다는 점이 좋았습니다.
designlang은 Node.js 20 이상 환경에서 npx 명령으로 실행할 수 있는 CLI 도구입니다. 별도로 프로그램을 설치하지 않아도 명령어 한 줄로 실행할 수 있습니다.
2. E드라이브에 디자인분석 폴더 만들기
작업 결과를 쉽게 찾고 관리할 수 있도록 E드라이브에 디자인분석이라는 별도의 폴더를 만들었습니다.
Claude에게 다음과 같이 요청했습니다.
E드라이브에 "디자인분석"이라는 새 폴더를 만들어줘.
그 폴더 안에서 designlang을 실행하고,
생성된 결과 파일을 종류별로 정리해서 설명해줘.그다음 분석하고 싶은 웹사이트 주소를 넣어 아래 명령을 실행했습니다.
npx designlang https://분석할-사이트-주소.com처음에는 명령어를 실행하면 단순히 색상표 정도가 나올 것이라고 생각했습니다.
하지만 실제로는 디자인 언어 문서, 디자인 토큰, Tailwind 설정, shadcn 테마, Figma 변수, 컴포넌트 구조, 브랜드 보이스 등 여러 종류의 파일이 생성되었습니다.
designlang은 웹사이트의 실제 DOM과 CSS를 분석해 디자인 시스템을 추출하며, 기본 실행 결과는 design-extract-output 폴더에 저장됩니다. 공식 소개 자료에 따르면 한 번의 실행으로 17개 이상의 결과 파일을 생성할 수 있습니다.
3. 추출된 파일을 Claude와 함께 분석하기
결과 파일이 여러 개 생성되었지만, 처음에는 어떤 파일을 봐야 하는지 알기 어려웠습니다.
그래서 Claude에게 다음과 같이 요청했습니다.
방금 designlang이 만든 결과를 분석해줘.
이 도구가 무엇을, 어떻게, 왜 하는지 쉽게 설명하고,
추출된 색상, 폰트, 여백, 컴포넌트를 요약해줘.
잘못 추출된 정보나 믿기 어려운 노이즈가 있으면
그 부분도 함께 알려줘.Claude는 생성된 파일을 읽고 주요 내용을 다음과 같이 정리해 주었습니다.
웹사이트에서 많이 사용된 핵심 색상
제목과 본문에 사용된 폰트
버튼과 카드의 모서리 크기
화면 구성에 사용된 여백
버튼, 카드, 뱃지 등의 공통 컴포넌트
브랜드의 전체적인 디자인 분위기
특히 좋았던 점은 복잡한 JSON 파일을 직접 읽지 않아도 Claude가 사람이 이해하기 쉬운 언어로 설명해 주었다는 것입니다.
4. 자동 추출 결과의 노이즈 찾기
designlang이 추출한 결과가 모두 정확한 것은 아니었습니다.
예를 들어 웹사이트에 이모지가 있으면 다음과 같은 폰트가 대표 폰트처럼 추출될 수 있습니다.
Segoe UI Emoji
Apple Color Emoji
Noto Color Emoji
이 폰트들은 웹사이트의 실제 브랜드 폰트가 아니라 이모지를 표시하기 위한 보조 폰트입니다.
또한 웹사이트에 사진이나 외부 배너가 포함되어 있으면 사진 속 색상이나 외부 위젯의 색상이 브랜드 색상으로 추출될 수도 있었습니다.
비슷한 회색이 여러 개 추출되거나, 실제로 거의 사용되지 않는 색상이 핵심 색상으로 포함되는 경우도 있었습니다.
따라서 자동으로 추출된 결과를 그대로 사용하는 대신 Claude에게 다음 작업을 요청했습니 다.
이모지 폰트와 사용 빈도가 낮은 색상을 제거해줘.
비슷한 색상은 하나의 색상으로 통합하고,
배경색과 글자색의 대비가 부족한 경우 대안을 제시해줘.이번 실습을 통해 자동화 도구가 데이터를 빠르게 수집해 주더라도, 최종적으로 어떤 값을 사용할지는 사람이 검토해야 한다는 점을 알게 되었습니다.
5. 디자인 토큰을 실제 컴포넌트에 적용하기
추출된 디자인 토큰을 문서로만 보관하면 실제 활용도가 낮을 수 있습니다.
그래서 색상, 폰트, 여백을 상세페이지의 실제 컴포넌트에 연결해 달라고 요청했습니다.
추출한 디자인 토큰을 상세페이지에 적용해줘.
히어로 영역, 카드, 가격표, CTA 버튼, 뱃지에
각각 어떤 색상과 폰트, 여백을 사용해야 하는지 정리해줘.Claude는 다음과 같은 방식으로 디자인 토큰을 컴포넌트에 연결했습니다.
히어로 영역: 대표 배경색, 큰 제목, 주요 CTA 버튼
카드: 흰색 또는 보조 배경, 둥근 모서리, 일정한 내부 여백
가격표: 추천 상품 강조색, 가격용 큰 폰트
CTA: 강한 대비의 배경색과 버튼
뱃지: 연한 강조색과 작은 글자
또한 같은 디자인을 PPT 카탈로그에도 활용할 수 있도록 표지와 본문 슬라이드의 색상, 폰트, 여백 규칙도 함께 정리했습니다.
6. 하나의 HTML 디자인 시스템으로 만들기
마지막으로 지금까지 정리한 내용을 하나의 HTML 파일로 만들었습니 다.
HTML에는 다음과 같은 내용이 포함되었습니다.
컬러 팔레트
제목과 본문 폰트 예시
여백 크기
버튼 디자인
카드 디자인
뱃지 디자인
가격표
CTA 영역
PPT 표지와 본문 규칙
각각의 JSON과 문서를 따로 열어보는 것보다 HTML 한 화면에서 디자인 시스템을 확인하니 훨씬 이해하기 쉬웠습니다.
색상이나 버튼 모양을 직접 보면서 수정할 수 있기 때문에, 향후 웹사이트나 상세페이지를 제작할 때 기준 자료로 활용할 수 있을 것 같습니다.
실습을 통해 느낀 점
이번 실습에서 가장 크게 느낀 점은 디자인도 AI가 이해할 수 있는 규칙으로 정리해야 한다는 것입니다.
기존에는 AI에게 다음과 같이 요청했습니다.
“전문적이고 세련된 웹사이트를 만들어줘.”
하지만 이번 실습 이후에는 다음과 같이 보다 구체적으로 요청할 수 있게 되었습니다.
“추출한 대표 색상과 제목 폰트를 사용하고, 카드에는 동일한 모서리와 여백을 적용해줘.”
같은 디자인 토큰을 사용하면 웹페이지, 상세페이지, PPT, 교육자료를 만들 때도 비슷한 분위기를 유지할 수 있습니다.
또한 CLI 명령어를 전혀 모르는 사람도 Claude에게 폴더 생성, 프로그램 실행, 파일 분석을 단계별로 요청하면 생각보다 어렵지 않게 작업할 수 있다는 점도 인상적이었습니다.
아쉬웠던 점
자동 추출 결과에는 실제 디자인과 관련 없는 색상이나 폰트가 포함될 수 있었습니다.
따라서 designlang이 만든 파일을 완성된 디 자인 시스템이라고 생각하기보다는, 디자인 시스템을 만들기 위한 초안으로 활용하는 것이 적절해 보입니다.
다른 웹사이트의 디자인을 그대로 복제하기보다는 색상, 여백, 컴포넌트 구조와 같은 디자인 원칙을 참고해 나만의 디자인 시스템으로 수정해보고싶습니다.
앞으로 활용하고 싶은 분야
제가 만들었던 어설푼 웹사이트를 업그레이드 시키고싶습니다
