claude design 기본 사용법

클로드 디자인은 클로드 유료 사용자라면 누구나 사용할 수 있다.
클로드 채팅 사용량과는 별도로 사용량이 제공된다.
이 매뉴얼에서는 클로드 디자인의 대표 기능들을 차례로 소개한다.

• 디자인 시스템 만들기
• 슬라이드 덱 만들기
• 웹사이트 디자인 (프로토타입)
• 모션 그래픽 만들기와 템플릿 등록

가장 중요한 디자인 시스템을 만드는 과정부터 시작한다.

클로드 디자인에 들어가 디자인 시스템 탭에서 create를 누른다.
디자인 시스템의 이름을 입력한다.
다음으로 클로드에게 사용할 디자인 정보를 제공해야 한다.

입력 방식은 위에서부터 네 가지가 있다.

첫 번째는 GitHub에 올려둔 코드 주소를 알려주는 방식이다.
원하는 디자인을 이미 어느 정도 코드 형태로 완성한 사람에게 적합하다.
평소 디자인 작업을 하지 않는 사람은 이 방식은 패스하게 된다.

두 번째는 내 컴퓨터에 있는 디자인 코드의 경로를 알려주는 방식이다.
이 매뉴얼에서는 이 방식을 사용한다.

세 번째는 피그마 파일을 제공하는 방식이다.
피그마를 사용해 본 적이 없으면 이 방식은 어렵다.
참고로 다른 사용자의 영상에서 피그마 파일을 제공한 사례가 있는데,
클로드가 그 디자인 시스템을 완벽히 따르지는 않았다.
현재 연구용 프리뷰 버전이라 그럴 수도 있다.

클로드 디자인 기능중에는 멋진 사이트 화면을 캡처해 클로드에게 제공하고 디자인을 부탁하는 방식도 있다.
다만 멋진 사이트를 내 로컬에 HTML로 저장해 그 코드를 제공할 수 있다면, 그 방법이 더 좋다.

따라서 여기서는 두 번째 방식을 사용해 로컬의 디자인 코드를 제공한다.
다만 디자인 관련 지식이 없으면 처음부터 그런 코드를 준비할 수 없다.
그래서 기존에 잘 만들어져 있고 디자인이 아름다운 사이트들을 참고하는 방법을 택한다.

마음에 드는 사이트를 찾아 로컬 HTML로 저장하는 방법은 여러 가지가 있다.
이 매뉴얼에서는 single-file-cli를 활용한다.
이 도구는 웹사이트의 모든 리소스를 하나의 HTML 파일로 완벽하게 캡처해 준다.

예시로 외부 서버에서 호스팅 중인 개인 블로그를 single-file-cli로 받아 로컬에 HTML로 저장한다.
클로드 코드를 실행하고 다음과 같이 프롬프트를 입력한다.

다음 사이트를 single-file-cli로 받아서 ./reference.html 로 저장해줘
https://knowhackking.com/

저장된 HTML 파일을 열어 보면 실제 블로그의 내용이 내 PC에서 그대로 보이는 것을 확인할 수 있다.
이 방법으로 마음에 드는 디자인의 사이트를 찾아 내 PC에 HTML로 저장하면 된다.

여기서 꼭 주의할 점이 있다.
이렇게 저장한 파일에는 해당 사이트의 전용 폰트, 로고, 고유 아이콘 같은 저작권 자료가 그대로 포함되어 있다.
이걸 그대로 쓰면 당연히 저작권 문제가 생긴다.

처리 방법은 두 가지다.

첫 번째는 클로드 디자인 시스템 하단의 노트 항목에 구체적인 요구사항을 적는 것이다.
저작권 관련 내용을 지워달라고 명시할 수 있다.
하지만 얼마나 완벽하게 반영될지는 불안할 수 있다.

두 번째는 더 확실한 방법으로, 클로드 코드를 이용해 저장된 파일을 분석하고
저작권 이슈가 될 만한 요소들을 미리 제거한 클린 HTML을 새로 만드는 방식이다.
사실 일일이 지시하지 않아도, 클로드가 알아서 저작권 요소를 파악하고 깔끔하게 정리해 준다.

위 방법으로 좋아하는 스타일의 디자인 샘플을 직접 만들어 디자인 시스템에 첨부한다.
필자의 경우 이전에 배포한 클로드 코드 매뉴얼의 HTML 버전을 출발점으로 삼아,
클로드 코드로 저작권 관련 문제가 없는 깨끗한 HTML을 만들어 디자인 시스템에 첨부했다.

클로드 디자인에서 디자인 시스템은 매우 중요하다.
디자인 시스템을 잘 만들고 이후에 그 디자인 시스템으로 작업을 하면 시행착오를 줄일 수 있다.

화면에서 디자인 폴더가 지정된 것을 확인한다.
필요하다면 채널 프로필 이미지도 함께 등록한다.
만들기 버튼을 누른다.

디자인 시스템을 만드는 데 걸리는 시간은 약 5분 정도다.
실제로는 5분이 조금 빨리 끝나기도 한다.
참고로 현재 작업 모델은 sonnet 4.6이다.

작업이 완료되면 결과를 확인한다.

먼저 폰트가 누락되면 폰트를 업로드하라는 안내가 나온다.
업로드하지 않으면 대체 폰트를 사용한다.
다음으로 color를 확인한다.

잘못됐거나 마음에 들지 않으면 Needs work… 버튼을 누르면 된다.
정리된 내용을 확인할 수 있다.

published와 default를 누른다.
이 디자인 시스템을 적용하고 기본으로 사용하겠다는 뜻이다.

만들어진 디자인 관련 파일들을 확인할 수 있다.
스킬 파일도 보인다.
여기서 스킬 내용을 직접 수정할 수도 있다.

디자인 시스템들을 관리하는 화면에서, 사용할 디자인 시스템만 published 체크를 한다.

앞에서 만든 디자인 시스템을 이용해서 슬라이드 덱을 만든다.
예시로 클로드 디자인 기능을 소개하는 슬라이드 덱을 만들어 본다.

프롬프트는 자세하고 구체적이면 좋다.
하지만 내용이 너무 많으면 쪼개서 요청하는 게 좋다.
사실 자세히 입력하지 않아도 괜찮다.
필요한 정보를 클로드가 다시 물어보기 때문이다.

완성된 슬라이드 덱을 확인한다.
다른 건 몰라도 디자인 시스템은 잘 적용된 것을 볼 수 있다.
일부 수정이 필요한 부분은 확인 후 다듬으면 된다.

파워포인트로 내보내기를 누르면 네 가지 항목이 보인다.

첫 번째는 내 컴퓨터에 설치된 전용 폰트를 그대로 살리고 싶을 때 사용한다.
디자인은 가장 예쁘지만, 폰트가 없는 다른 컴퓨터에서는 글꼴이 깨질 수 있다.

두 번째는 가장 안전한 선택이다.
누구나 가지고 있는 기본 폰트로 바꿔 주기 때문에,
어디서 열어도 글자가 안 깨지고 편집도 자유롭다.

세 번째는 파워포인트 대신 구글 슬라이드로 작업할 사람을 위한 옵션이다.
구글 폰트를 사용해 호환성을 높여 준다.

네 번째는 편집은 필요 없고 지금 보는 화면 그대로만 보여주고 싶을 때 고른다.
슬라이드가 통째로 이미지로 저장되어 절대 안 깨지지만, 글자 수정은 불가능하다.

여기서는 두 번째를 선택한다.
내보내기한 파일을 파워포인트에서 열어 페이지들을 하나씩 확인한다.
완벽하지는 않지만 조금씩만 수정하면 된다.

이제 웹사이트를 디자인해 본다.

프로토타입은 쉽게 말해서 실제 제품을 만들기 전에 미리 체험해 보는 테스트 버전이다.
예를 들어 앱 디자인을 했다면, 단순히 화면만 보는 게 아니라
버튼을 누르면 다음 화면으로 넘어가고 실제 사용하는 것처럼 동작하게 만드는 것이다.
그래서 개발 전에 사용자 경험을 미리 확인하고 문제를 빠르게 수정할 수 있다.

예시로 유튜브 채널을 소개하는 사이트를 디자인한다.
와이어프레임은 구조를 잡는 단계이고, 하이 피델리티는 그걸 실제처럼 완성하는 단계다.

예를 들어 와이어프레임은 "이 버튼이 여기 있다" 정도라면,
하이 피델리티는 색상, 디자인까지 다 입힌 진짜 화면이라고 보면 된다.
여기서는 바로 하이 피델리티를 선택한다.

다른 사용자의 영상들에서는 클로드 디자인이 토큰을 너무 많이 사용한다는 얘기가 있었다.
몇 개 만들면 한도가 걸린다는 얘기다.

가급적 모델을 sonnet 4.6으로 선택하고 디자인 작업을 한다.
결과가 만족스럽지 못하면 opus로 변경할 수도 있지만,
필자 기준에서는 굳이 opus로 변경하지 않아도 됐다.

또한 작업할 때 여러 단계를 거치거나 시행착오를 겪게 되면 토큰이 낭비된다.
최대한 단계를 줄이고 프롬프트를 잘 정리하고 쪼개서 클로드에게 전달한다.
이런 부분들이 클로드 디자인을 사용할 때 토큰을 아끼는 방법이다.

create를 누른다.

랜딩 페이지 hero 영역에 첨부한 프로필 이미지에 대한 3D 효과를 주었다.
프롬프트는 사전에 다른 AI에게 물어봐서 작성했다.
3D 효과를 클로드 디자인에서 작업해야 할지 클로드 코드에서 작업해야 할지 몰라서 클로드에게 직접 물어봤다.
이 경우에는 클로드 디자인에서 작업하는 게 좋다는 답을 받았다.

스케치 기능을 이용하면 레이아웃을 설명할 수 있다.
랜딩페이지에 대한 레이아웃을 그린 뒤 저장한다.
저장하니 레이아웃이 추가된 것을 확인할 수 있다.

프롬프트는 AI를 활용해 최대한 구체적으로 정리한다.
화면에 중간중간에 들어갈 문구들도 함께 정리한다.
사실 자세히 정리하지 않아도 클로드가 필요한 사항들을 물어본다.
하지만 단계가 늘어날수록 토큰 사용량이 많아진다.
잘 정리해 두면 한 번에 거의 완성본에 가까운 결과를 얻을 수 있다.

프로필 이미지도 추가한다.
완료된 결과를 확인하면 디자인 시스템이 잘 적용된 것을 볼 수 있다.
메뉴들도 잘 연결되어 있다.

3D 효과에 에러가 있다.
마우스 반응에 따라 움직여야 하는데 메뉴를 몇 번 클릭하니 작동을 안 했다.
다시 수정 요청을 했고 클로드가 한번에 수정을 완료했다.

Edit 버튼을 누르면 글자 스타일, 영역 크기, 박스 디테일 등을 세부적으로 수정할 수 있다.

tweaks는 디자인을 크게 바꾸는 게 아니라 간격이나 색상 같은 디테일을 살짝 수정하는 걸 의미한다.
예를 들어 "채널 구독하기 버튼과 위에 있는 텍스트 간격이 너무 답답해 → 간격을 조금만 늘려 줘" 같은 식으로 요청할 수 있다.

zip 파일을 저장한다.
이후 클로드 코드에서 최종 웹사이트 기능을 완성하고 외부 서버에 호스팅할 수 있다.

필자의 경우 이전에 배포한 클로드 코드 매뉴얼을 웹에서도 확인 가능하게 만들어 외부 서버에 호스팅했다.
큰 에러 없이 잘 작동한다.

클로드 디자인에서는 모션 그래픽도 만들 수 있다.
이렇게 만든 모션 그래픽은 Hyperframes 스킬로 고화질 영상으로 렌더링한 뒤,
영상 편집 툴에 합성해 사용할 수 있다.
또한 자주 사용하는 형태는 템플릿으로 등록해서 재사용할 수 있다.

claude.ai에 들어가 좌측 메뉴의 Design을 클릭한다.
Prototype에 이름을 입력하고 Create를 누른다.
이후 대화창에 프롬프트를 입력한다.

예시로 다음과 같은 구성으로 모션 그래픽을 요청할 수 있다.

• 화면 왼쪽 하단에 채널명과 채널 소개를 카드 형태로 표시
• 카드가 나타나고 사라질 때 애니메이션 적용
• 그 다음에는 영상에서 다룰 내용을 리스트로 표시
• 영상 마지막에는 와이프 전환 효과 추가
• 만든 영상을 다른 영상에 합성해 사용할 예정이라면 배경은 그린스크린으로 요청

오른쪽 화면에는 만들어지는 파일들이, 왼쪽 화면에는 작업 진행 사항이 표시된다.
작업이 완료되면 결과를 화면에서 바로 확인할 수 있다.

오른쪽 상단 메뉴에서 zip 파일을 다운로드한다.

GitHub의 hygen/hyperframes 스킬을 사용한다.
HTML로 된 모션 그래픽을 MP4 같은 고화질 영상으로 렌더링해 주는 강력한 스킬이다.

사실 클로드가 만들어준 화면을 단순히 캡처 프로그램으로 녹화할 수도 있다.
하지만 그러면 프레임이 툭툭 끊기거나 화질이 뭉개질 수 있다.
Hyperframes는 코드를 프레임 단위로 직접 계산해서 렌더링하기 때문에,
4K 고해상도에서도 아주 부드럽고 안정적인 프레임을 얻을 수 있다.
마치 전문 툴로 작업한 것 같은 퀄리티가 나온다.

GitHub 저장소의 code 메뉴에서 주소를 복사한다.

이제 클로드 코드를 실행하고 클로드에게 두 가지를 알려주면 된다.

1. 다운로드한 zip 파일 경로
2. 이용할 GitHub 스킬 주소

꼭 터미널에서 실행할 필요는 없다.
클로드 코드에서 적절한 권한만 있으면 된다.

클로드가 작업을 다 끝내면 브라우저를 열어 결과를 보여 준다.
이제 내 PC에서 만든 영상을 재생하며 export 할 수 있다.
mp4로 export 한다.

export 한 mp4를 영상 편집 툴(예: 파이널 컷)에 소스로 추가한다.
타임라인에 추가한 뒤 그린 스크린 키어를 적용한다.
이제 녹색 배경이 화면에 표시되지 않고 영상이 깔끔하게 합성된다.

기존 결과물의 좌측 상단에 불필요한 글씨가 나오고 있다.
채널 소개와 유튜브 소개 리스트가 따로 나오는 점도 마음에 들지 않는다.
디자인 또한 원하는 스타일이 아니다.
이 세 가지를 한 번에 수정한다.

디자인 시스템을 한 번 더 확인해 보면 새 디자인 시스템이 잘 적용된 것을 볼 수 있다.

수정이 완료된 결과를 확인한다.
타이틀과 숫자 글씨가 너무 작아 다시 수정을 요청했다.
원하는 방향으로 수정이 잘된다.

결과를 템플릿으로 저장한다.
필요한 내용을 입력하고 published를 체크한다.

이후 from 템플릿 탭을 클릭하면 등록된 템플릿이 보인다.
이제 템플릿을 이용해서 문구 정도만 수정하면 된다.

작업을 마치고 클로드 디자인의 총 사용량을 확인할 수 있다.

토큰 사용에 신경을 쓰면서 작업하면 생각보다 적게 사용된다.
앞서 정리한 토큰 절약 팁들을 의식적으로 적용한 결과다.