클로드 디자인으로 "AI티" 벗기는 4단계 — 레퍼런스, 추출, 그리고 스킬

AI로 만든 랜딩페이지는 보면 압니다. 히어로에 큰 글씨, 그 아래 3단 카드, 아이콘 하나씩. 나쁘진 않은데 어디서 본 것 같습니다.

문제는 도구가 아닙니다. 주문하는 방식입니다. 디자이너에게 “예쁘게 해 주세요” 한 마디만 던져놓고 결과가 평범하다고 탓하는 것과 같습니다.

이 글은 클로드 디자인에 재료를 단계적으로 주는 네 가지 방법을 정리한 것입니다. 디자인을 배우지 않아도, 코딩을 몰라도 따라할 수 있습니다.

공개된 시연 영상과 공식 문서를 근거로 정리했습니다. 직접 장기간 운영해본 기록은 아니므로, 요금·사용량 관련 사항은 본인 플랜에서 확인하시기 바랍니다.

먼저: 2.0에서 뭐가 바뀌었나

클로드 디자인은 출시 직후 반응이 컸지만, 써본 사람 상당수가 며칠 만에 접었습니다. 이유는 하나였습니다. 켜기만 해도 크레딧이 녹았습니다. 문장 하나 고치는 것도 클로드한테 부탁해야 했으니 수정 몇 번이면 그날 사용량이 끝났죠.

2.0은 그 지점을 정면으로 고쳤습니다.

변화	의미
크레딧 효율 개선	진입장벽이던 “켜자마자 소진” 문제 해소
캔버스 직접 편집	오타 하나 고치려고 클로드를 부르지 않아도 됨. 피그마처럼 클릭해서 수정
디자인 시스템 등록	내 브랜드 색·폰트·규칙을 저장해 재사용
클로드 코드와 양방향	만든 결과물이 실제 코드. 제품으로 키울 수 있음

특히 직접 편집이 실질적인 변화입니다. AI에게 모든 수정을 부탁하는 구조에서는 사소한 조정 하나가 비용이자 대기시간이었으니까요.

Level 1 — 그냥 시킨다

기준선입니다. 모던 디자인 시스템에 랜딩 템플릿을 고르고 간단히 요청합니다.

결과는 나쁘지 않습니다. 다만 흔합니다. 특색이 없습니다.

여기서 “역시 AI는 별로네”라고 결론 내리기 쉬운데, 정확히 말하면 재료를 안 준 것입니다. 다음 단계부터는 주문 방식 자체를 바꿉니다.

Level 2 — 말로 설명하지 말고 보여줘라

핵심 문장입니다. “미니멀하고 따뜻한 느낌”이라고 백날 써봤자, 클로드의 미니멀과 내 미니멀은 다릅니다.

이 간극은 시각 자료 한 장으로 사라집니다. 문제는 그 자료를 어디서 구하냐인데, 세 곳이면 충분합니다.

사이트	성격
Recent	잘 만든 웹사이트 큐레이션. 예전 이름은 Godly이고 지금은 리다이렉트됩니다. 웹뿐 아니라 브랜딩·타이포·3D·패키징까지 다루고, OG 이미지·앱 아이콘 전용 갤러리가 따로 있습니다
Dribbble	키워드로 검색해 관련 디자인 소스 탐색
Awwwards	수상작 모음. 퀄리티는 보장되나 과한 것도 있어 참고용으로

마음에 드는 화면 한두 장을 캡처해서 첨부하면 됩니다. 색감과 레이아웃이 눈에 띄게 달라집니다.

추가 팁이 하나 있습니다. 피그마 커뮤니티에서 디자인 키트를 검색하면 무료 키트가 아주 많습니다. 클로드 디자인은 피그마 파일 첨부를 지원하기 때문에 이걸 그대로 던져도 됩니다. 캡처 이미지보다 정보량이 훨씬 많죠.

여기서부터는 세부 조정을 직접 합니다. 상단 편집 메뉴로 폰트·텍스트·색상을 바꾸고, 요소를 추가로 배치할 수도 있습니다. 큰 수정만 클로드한테 맡기고, “이 섹션 크기를 줄여줘” 같은 요청은 코멘트로 영역을 찍어서 하면 됩니다.

Level 3 — 추출: 브랜드와 규칙을 가져온다

2단계까지 하면 두 가지 질문이 남습니다.

나는 이미 브랜드가 있는데, 그건 어떻게 입히지?
“쓸 만한” 말고 “진짜 잘 만든 것처럼” 보이게 하려면?

3단계가 첫 번째 질문의 답입니다. 도구는 Firecrawl입니다. 웹사이트를 AI가 읽기 좋은 형태로 정리해서 가져오는 서비스인데, 그냥 주소만 주고 긁으라고 하면 광고·메뉴 같은 잡다한 코드까지 딸려오는 반면 이건 필요한 정보만 뽑아줍니다.

연결하기

무료 플랜 크레딧으로 이 정도 작업은 충분히 커버됩니다.

클로드 설정 → 커넥터 → 커스텀 커넥터 추가
이름은 아무거나 (예: Firecrawl)
주소는 Firecrawl 공식 문서에서 확인합니다. 상단 Docs → 좌측 사이드바 MCP 서버 항목에 주소가 나와 있습니다
그 주소의 v2 앞부분에 본인 API 키를 끼워 넣습니다. 키는 로그인 후 대시보드에서 바로 보입니다

용도 1 — 내 브랜드 입히기

스마트스토어든 인스타그램이든 회사 홈페이지든, 이미 운영 중인 사이트가 있다면 그 주소 하나면 됩니다. 색 구성을 그대로 가져오고 폰트 느낌을 잡고 사이트의 톤까지 반영합니다.

브랜드 가이드 문서를 만들 필요가 없어진다는 뜻입니다. 이게 생각보다 큽니다. 소규모 사업자 대부분은 브랜드 가이드가 아예 없으니까요.

용도 2 — 잘 만든 사이트의 규칙 가져오기

어떤 사이트를 보고 “와, 예쁘다”고 느꼈을 때, 왜 예쁜지 설명할 수 있나요? 어떤 레이아웃인지, 어떤 폰트를 몇 픽셀로 쓰는지 눈으로는 잘 안 보입니다.

클로드는 할 수 있습니다. 그 사이트의 코드를 읽을 수 있으니까요.

여기서 중요한 원칙 하나. 베끼지 마세요. 우리가 가져오는 건 그 사이트의 생김새가 아니라, 그 사이트를 좋아 보이게 만드는 규칙입니다. 여백을 어떻게 쓰는지, 액센트 색을 몇 개나 쓰는지, 글자 크기 단계를 어떻게 나누는지 같은 것들이죠. 화면을 복제하면 표절이지만 판단 기준을 배우는 건 학습입니다.

팁: 한 번 추출한 브랜드나 규칙은 디자인 시스템으로 등록할 수 있습니다. 그러면 다음부터는 추출 과정 없이 만들 때마다 바로 그 스타일로 나옵니다.

Level 4 — 스킬로 전문가의 감각을 설치한다

3단계까지는 클로드에게 재료를 가져다줬습니다. 4단계는 접근이 다릅니다. 전문가의 판단 기준 자체를 설치합니다.

이걸 가능하게 하는 게 스킬입니다. 전문가가 자기 노하우를 미리 써둔 작업 지침서라고 보면 됩니다. 클로드가 작업할 때마다 이 지침서를 펼쳐놓고 일하게 되는 구조죠.

디자인 쪽에서 많이 쓰이는 두 가지가 있습니다.

taste-skill — AI가 만드는 뻔하고 지루한 디자인을 막는 게 목적입니다. 재미있는 건 안에 다이얼이 세 개 있다는 점입니다. 레이아웃을 얼마나 실험적으로 갈지, 애니메이션을 얼마나 넣을지를 조절할 수 있습니다.

Emil Kowalski 스킬 — Vercel과 Linear에서 일한 엔지니어이자, 웹에서 흔히 보는 토스트 알림 컴포넌트(Sonner)를 만든 사람이 배포한 스킬입니다. 이걸 설치하는 건 그 사람의 디테일 감각을 빌려오는 것에 가깝습니다. 예를 들면 이런 기준들이 코드로 정리돼 있습니다.

요소가 등장할 땐 무(無)에서 튀어나오면 안 된다
애니메이션이 0.3초를 넘기면 답답해진다

설치는 간단합니다. 레포 주소를 복사해 클로드에 요청하고, 다운로드한 뒤 설정의 스킬 탭에서 추가합니다. 그다음 디자인 화면에서 + 버튼 → 스킬을 선택하면 됩니다.

적용하면 차이가 손에 잡힙니다. 버튼에 마우스를 올리면 반응하고, 누르면 살짝 눌리는 느낌이 있고, 스크롤하면 요소가 자연스럽게 올라옵니다. 설명은 못 해도 몸으로 느껴지는 종류의 디테일입니다.

정리하면

그냥 시킨다 — 기준선
레퍼런스를 보여준다 — 캡처 또는 피그마 키트
브랜드와 규칙을 추출한다 — Firecrawl
전문가 감각을 스킬로 설치한다 — taste-skill 등

디자인을 배운 것도 아니고, 그냥 단계마다 더 좋은 재료를 줬을 뿐입니다.

점수: 8.8

좋은 점

2.0의 캔버스 직접 편집으로 사소한 수정에 AI를 부르지 않아도 됩니다. 실사용 피로도가 크게 줄었습니다
크레딧 효율 개선으로 “켜자마자 소진” 문제가 해소됐습니다
피그마 파일 첨부를 지원해 레퍼런스 전달이 정확합니다
결과물이 실제 코드라, 공유 버튼으로 Claude Code에 내보내 회원가입·결제·DB를 붙이며 제품으로 키울 수 있습니다
디자인 시스템 등록으로 브랜드 일관성이 자동 유지됩니다

아쉬운 점

3·4단계는 외부 도구 설정이 필요합니다. Firecrawl API 키 발급, 스킬 설치 — 완전 초보에겐 이 부분이 벽입니다
사용량은 결국 플랜에 묶여 있습니다. 개선됐다는 것이지 무제한은 아닙니다
스킬은 강력하지만 취향이 강합니다. 설치한 스킬의 감각이 내 브랜드와 안 맞을 수도 있습니다
세밀한 그래픽 작업(로고, 일러스트)은 여전히 전용 도구가 필요합니다

이럴 때 쓰세요: 디자이너를 쓸 예산은 없는데 결과물은 그럴듯해야 하는 랜딩페이지·프로토타입. 반대로 이미 자기 워크플로우가 확립된 디자이너라면 굳이 넘어올 이유가 없습니다.

이 도구의 자리

만든 사람의 결론이 정확했습니다. 클로드 디자인은 디자이너를 대체하는 도구가 아닙니다.

전문가에게는 이미 자기 워크플로우가 있고, 솔직히 그게 훨씬 편합니다. 이 제품이 노리는 건 디자이너와 개발자 사이에 있는 사람들입니다. 디자인은 못 하지만 뭔가 만들어야 하는 사람, 개발은 하지만 화면이 촌스러운 사람. 그 간격을 메우려고 나온 물건입니다.

그리고 여기서 만든 건 전부 코드입니다. 디자인은 여기서 끝나지만, 제품은 코드에서 시작됩니다.