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

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

이런 분께 강추예요.

1. 바이브코딩으로 만든 결과물이 매번 어색해서 답답한 분
2. 디자이너 없이 브랜드 콘텐츠를 직접 만들고 싶은 1인 사업자
3. 홈페이지, PPT, SNS를 같은 브랜드 무드로 통일하고 싶은 분
    

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

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

draftx.co.kr

좋은 레퍼런스

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

1. 포인트 컬러 1~2가지 이내로 정돈된 사이트 (산만하면 추출해도 산만한 결과)
2. 폰트 2~3 이내로 일관된 사이트 (위계가 명확해야 시스템이 잡힘)
3. 여백이 충분한 사이트 (여백 부족하면 답답한 결과물이 나와요)
4. 트렌디한 인터렉션에 의존하지 않은 사이트 (애니메이션/3D 과한 곳은 추출 어려움)
5. 정적 페이지 위주의 사이트 (SPA/React 헤비는 추출 정확도가 떨어져요)

피해야 할 레퍼런스 유형

1. 포털형 (네이버 / 카카오등) 정보 밀도가 너무 높아요.
2. 동영상 풀스크린/3D 위주 — 추출 자체가 안 되거나 분위기를 못 살려요
3. 뉴스/매거진형 — 컬러·폰트 종류가 너무 많아서 시스템이 흐려져요
4. 쇼핑몰 — 상품 위주라 브랜드 톤 추출이 어려워요

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

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

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

1. html.to.design
2. Print Style Guide

① html to design URL 입력

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

② 디자인 파일로 전환.

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

③ Print Style Guide

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

③ 피그마 로컬 파일로 저장

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

⚠️ 한 가지 주의

JS 헤비한 사이트(SPA, React/Next.js 등)는 추출 정확도가 좀 떨어져요. 일부 인터랙션 컴포넌트가 빠지거나 레이아웃이 깨질 수 있거든요. 정적 페이지는 거의 100%인데 동적 페이지는 빠지는 부분이 생겨요. 이럴 땐 차라리 정적인 레퍼런스를 다시 고르는 게 빨라요.

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

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

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


 

디자인 시스템 업로드

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

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

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

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

업로드한 디자인 시스템 그대로 가지고 클로드에 이렇게 요청해요.

"이 디자인 시스템 그대로 웹 에이전시 랜딩페이지 만들어줘. 컬러, 폰트, 여백 비율 그대로 지켜줘."

첫 결과물부터 분위기가 달라요. 같은 클로드인데 결과가 완전 다르거든요. 이전엔 수정을 5~6번 왔다갔다해야 원하는 톤이 나왔는데, 이번엔 수정 1번으로 끝났어요.



 

결과물 공유

 https://asc-after.vercel.app
 

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

⚠️ 주의 할 점

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

프롬프트 하나만 바꿔보세요. "이 디자인 시스템을 출발점으로, 내 브랜드 톤(예: 따뜻하고 신뢰감 있는 / 30대 여성 사업자 타겟)에 맞게 컬러를 다시 제안해줘. 폰트도 비슷한 분위기지만 다른 조합으로 추천해줘."

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

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

솔직한 후기

1. 브랜드 일관성이 자동으로 생겨요. 채널이 달라도, 포맷이 달라도, 같은 시스템을 쓰니까 어디서 봐도 "같은 브랜드"처럼 보여요.
2. 디자인 비전공자한테 특히 유용해요. 디자인을 배운 적 없어도 URL 하나로 시작점을 만들 수 있거든요.
3. 시간이 진짜 짧아요. 플러그인으로 시스템 추출하고, 그다음 작업들도 수정 한두 번이면 마무리돼요.
   
    

마무리하며

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

지금 구독하기