💌 클로드 디자인 어디까지 써봤니?

레퍼런스 사이트 처럼 디자인하고 싶다구요!

AI한테 디자인 좀 잘해달라! 했는데 결과물이 어딘가 어색하고, 내 브랜드 같지가 않고. 저도 그랬거든요. 오늘은 디자이너가 아니어도, 레퍼런스 사이트 톤 그대로 디자인 결과물이 나오는 방법을 알려드릴게요. 시연 방법까지 정리했으니 끝까지 읽어주세요 ☺️

이런 분께 강추예요.

1단계. 레퍼런스 사이트 고르기

가장 먼저 할 일은 어떤 톤으로 만들고 싶은지 정하는 거예요. 이게 출발점이거든요. 저는 항상 결과물이 깔끔한 곳을 골라요. 시작점이 흐릿하면 추출된 디자인 시스템도 흐릿해지거든요. 이번에 고른 건 브랜딩 에이전시 사이트 draftx.co.kr 이에요. 

 draftx.co.kr

좋은 레퍼런스 

업종 무관하게 적용되는 기준이에요. 레퍼런스 고르실 때 한 번씩 짚어보시면 실패가 거의 없어요.

피해야 할 레퍼런스 유형

💡 닮고 싶은 사이트 찾기 부터 막히시는 분들 많은데요. 저는 평소에 마음에 드는 사이트 보이면 노션에 URL이랑 한 줄 메모로 모아놔요. 작업할 때 이게 진짜 자산이 됩니다.

2단계. 피그마 플러그인 2개로 디자인 시스템 뽑기

이제 본격 추출이에요. 피그마 커뮤니티에서 무료로 설치할 수 있는 플러그인 2개면 돼요.

① html to design URL 입력

draftx.co.kr URL을 html.to.design에 붙여넣고 실행합니다. 

② 디자인 파일로 전환. 

사이트 전체가 피그마 파일로 들어왔어요. 색상 코드, 폰트명, 여백 수치가 레이어로 전부 분해돼서요.

③ Print Style Guide

 피그마의 플러그인 print style guide로 레퍼런스의 디자인 시스템을 추출합니다. 컬러 팔레트랑 타이포그래피 위계가 한 페이지로 정리되어 나왔어요.

③ 피그마 로컬 파일로 저장 

파일 > 로컬 복사본 저장을 눌러 fig파일로 저장해주세요. 

⚠️ 한 가지 주의

3단계. 클로드 디자인에 등록하기

추출한 디자인 시스템, 이제 클로드 디자인에 등록할 차례예요. 한 번 등록해두면 다음 작업부터 진짜 편해지거든요. 웹사이트로 클로드 디자인에 접속해주세요.

⚠️ 아직 데스크탑 앱에는 업데이트가 안 돼있어요. 꼭 웹으로 접속하셔야 해요!

디자인 시스템 업로드

Design systems 탭에서 Create 버튼을 눌러주세요. 

방금 추출한 디자인 시스템 피그마 파일을 업로드하면 끝이에요. 클로드가 5분 정도 알아서 분석하고 등록해주거든요. 이 사이에 커피 한 잔 하셔도 돼요 

잠시 후 레퍼런스 사이트의 디자인 시스템이 모두 등록이 된걸 확인할 수 있어요!

이제 서비스를 만들어 봅시다

업로드한 디자인 시스템 그대로 가지고 클로드에 이렇게 요청해요.  
"이 디자인 시스템 그대로 웹 에이전시 랜딩페이지 만들어줘. 컬러, 폰트, 여백 비율 그대로 지켜줘." 첫 결과물부터 분위기가 달라요. 같은 클로드인데 결과가 완전 다르거든요. 이전엔 수정을 5~6번 왔다갔다해야 원하는 톤이 나왔는데, 이번엔 수정 1번으로 끝났어요.

결과물 공유 

https://asc-after.vercel.app

https://asc-after.vercel.app

어떤가요? 레퍼런스와 비슷한 무드로 결과물이 나왔습니다. 디자인 시스템을 줬냐 안 줬냐에 따라 결과물이 정밀하게 나와요!  이전엔 비슷한 작업할 때 수정을 5~6번 왔다갔다해야 원하는 톤이 겨우 나왔거든요. 이번엔 수정 1번으로 끝났어요. 첫 결과물에서 80% 완성, 마무리 한 번이면 충분했어요. 결과물이 처음부터 "내 브랜드 같은 톤"으로 나온다는 게 진짜 큰 차이예요.

 ⚠️ 주의 할 점 

레퍼런스에서 추출한 시스템을 그대로 쓰면 카피 이슈가 생길 수 있어요. 컬러, 폰트, 여백을 그대로 가져다 쓰면 결과물이 결국 레퍼런스 브랜드를 따라하는 모양이 되거든요.

응용. 같은 시스템으로 PPT, SNS 디자인 

같은 디자인 시스템 파일을 다시 넘기고 "이 톤으로 디자인시스템 자료 5장짜리 슬라이드 만들어줘"라고 요청하면, 같은 컬러·폰트로 슬라이드가 나와요. 저는 컬러만 오렌지로 변경하여 PPT를 만들었습니다!

솔직한 후기

마무리하며

오늘 소개한 아티클 도움이 되셨나요? 디자인픽 뉴스레터를 구독하시면, 한땀한땀 모은 디자인 레퍼런스 사이트 100개를 선물로!웰컴 메일로 더 많은 정보가 담긴 1초 만에 바로 받아보실 수 있습니다!