AI로 웹사이트를 만들 때 제일 막히는 게 디자인과 레이아웃이죠. 기능은 말로 설명하면 되는데, "예쁘게 만들어줘"는 아무리 말해도 원하는 화면이 안 나옵니다.
이럴 땐 처음부터 그리려고 하지 말고, 잘 만든 사이트를 하나 정해서 카피하는 게 제일 빠릅니다. 이 글에서는 그 카피를 클로드로 제대로 하는 방법을 정리했어요.
결론부터 말씀드리면 캡처를 보여주는 걸로는 부족합니다. 그 사이트가 실제로 쓰는 색, 글자 크기, 간격 숫자를 뽑아서 통째로 넘겨야 그대로 나옵니다.
디자이너들도 빈 화면에서 시작하지 않아요. 비슷한 서비스 중 잘 만든 화면을 여러 개 모아 놓고, 거기서 배치와 간격을 가져와 시작합니다. 이걸 레퍼런스라고 부르죠.
AI로 만들 때도 똑같습니다. "깔끔한 랜딩 페이지"라고 하면 AI는 세상에서 제일 흔한 랜딩 페이지를 내놓습니다. 반대로 "이 사이트처럼"이라고 기준을 하나 주면 결과가 확 달라져요.
문제는 그 "이 사이트처럼"을 어떻게 전달하느냐입니다.
잘 만든 사이트를 캡처해서 클로드에게 보여주고 "이렇게 만들어줘"라고 해 보셨나요? 비슷하긴 한데 뭔가 다르죠. 색이 미묘하게 탁하고, 간격이 헐겁고, 버튼은 어디서 본 모양입니다.
캡처에서 AI가 읽을 수 있는 건 대략적인 인상뿐이거든요. 정확한 색 코드, 글자 크기 단계, 간격 단계, 모서리 둥글기, 애니메이션 속도는 그림만 봐서는 알 수 없습니다. 그 빈칸을 AI는 자기가 아는 가장 흔한 값으로 채워요.
그래서 카피를 제대로 하려면 그 사이트가 실제로 쓰는 숫자를 꺼내서 줘야 합니다. 그 일을 해 주는 도구가 있어요.
designlang이라는 도구는 사이트 주소를 넣으면 브라우저로 실제 페이지를 열어 디자인 값을 읽어냅니다. MIT 라이선스 오픈소스이고, 2026년 10월 6일 기준 npm 최신 버전은 13.3.2예요.
npm i -g designlang
designlang install-browser
designlang https://따라할사이트주소한 번 돌리면 결과 폴더에 파일이 여러 개 생깁니다. README에는 "명령 하나로 17개 이상의 파일"이 나온다고 적혀 있어요.
파일 | 들어 있는 것 | 어디에 쓰나 |
|---|---|---|
디자인 언어 문서(.md) | 색, 글꼴, 간격, 그림자 등 19개 섹션 | 클로드에게 기준으로 넘긴다 |
디자인 토큰(JSON) | 색·간격 값 | 디자인 시스템에 넣는다 |
Tailwind 설정, shadcn 테마 | 바로 붙일 수 있는 설정 | 코드에 그대로 붙인다 |
모션 토큰 | 애니메이션 재생 시간, 가속 곡선 | 움직임까지 맞춘다 |
터미널 명령이 부담스러우시면 크롬 확장도 있어요. design-md-chrome은 지금 보고 있는 탭을 읽어서 DESIGN.md 파일을 만들어 줍니다. designlang과는 다른 사람이 만든 별개 프로젝트이고, 크롬 웹스토어가 아니라 개발자 모드에서 "압축해제된 확장 프로그램 로드"로 설치해요.
숫자를 손에 넣었다면 이제 클로드에게 넘길 차례입니다.
뽑은 파일을 프로젝트 폴더에 넣고 이렇게 요청하시면 됩니다.
이 디자인 문서대로 랜딩 페이지를 만들어줘
색과 간격은 이 토큰에 있는 값만 써줘
간격은 문서에 있는 spacing 단계를 지켜줘
두 번째와 세 번째 줄이 제일 자주 빠집니다. 파일만 주고 범위를 안 막으면, AI는 문서에 없는 자리를 또 자기 기본값으로 채우거든요.
【직접 확인 · 2026-10-06】 제가 쓰는 디자인 스킬 Impeccable(v3.5.0)은 작업을 시작하기 전에 프로젝트 폴더에서 DESIGN.md를 먼저 찾아 읽도록 되어 있습니다.
디자인 문서를 파일로 넣어 두면 이런 스킬과도 맞물려 돌아간다는 뜻이죠. 디자인 스킬은 AI티 안 나게 하는 법에서 따로 다뤘습니다.
여기까지 하면 꽤 비슷하게 나옵니다. 마지막으로 바꿔야 할 것만 바꾸면 끝이에요.
배치, 간격 단계, 글자 크기 단계는 그대로 가져와도 됩니다. 잘 만든 사이트들끼리도 이 부분은 서로 많이 닮아 있어요.
대신 이 세 가지는 꼭 내 것으로 바꾸세요.
로고와 브랜드 색 : 그대로 두면 그 회사 사이트처럼 보입니다
문구 : 남의 소개 문장은 남의 저작물입니다
사진과 일러스트 : 그 사이트가 직접 찍거나 산 것입니다
색까지 다 바꾸기 어려우면 대표 색 하나만 바꿔도 인상이 꽤 달라집니다. 레퍼런스를 두세 곳 뽑아 섞으면 한 사이트를 닮는 문제도 줄어들고요. 어디까지가 법적으로 괜찮은지는 사안마다 달라서 제가 단정할 수는 없습니다.
처음 설치가 무겁습니다. 헤드리스 브라우저를 내려받아 실제로 페이지를 엽니다.
--smart 옵션은 외부로 데이터를 보냅니다. 추출한 내용을 외부 AI API로 넘기니 회사 내부 화면에는 쓰지 마세요.
로그인이 필요한 페이지는 기본 설정으로 못 읽습니다.
100% 같다고 보장되지는 않습니다. 모든 사이트에 대 본 건 아니라서, 중요한 색 몇 개는 원래 사이트와 비교해 보시길 권합니다.
정리하면 순서는 단순합니다. 따라 할 사이트를 고르고, 숫자로 뽑고, "이 값만 써"와 함께 넘기고, 로고·문구·사진만 내 것으로 바꾸세요.
designlang 저장소(Manavarya09/design-extract) README: https://github.com/Manavarya09/design-extract
design-md-chrome 저장소(bergside/design-md-chrome) README: https://github.com/bergside/design-md-chrome
Impeccable 저장소(pbakaus/impeccable): https://github.com/pbakaus/impeccable