Claude Design으로 PPT와 웹사이트 만드는 법

Claude Design 핵심 구성요소 살펴보기

Claude Design은 왼쪽 사이드바의 [디자인] 메뉴에서 진입하며, 작업 종류에 따라 세 가지 영역으로 나뉩니다.

오른쪽에 있는 디자인 시스템 영역에 회사의 브랜드 컬러, 폰트, 여백, 스타일을 등록해 두면, 이후 만드는 모든 결과물에 통일된 규격이 자동으로 적용됩니다.

스킬과 디자인 시스템 두 가지만 기억하세요

1. Claude Design의 동작 원리는 단순합니다. 채팅창에 요청을 입력하면 프롬프트를 기반으로 작업이 실행됩니다.
   
2. 결과물을 만드는 과정은 등록한 스킬에 따라 '슬라이드, 애니메이션, 웹사이트' 등 다른 결과물을 만들어 내고, 그 결과물의 시각 규칙은 디자인 시스템이 결정합니다.
   
3. 슬라이드로 만든 결과물을 웹사이트로 바꾸고 싶을 때 처음부터 다시 시작할 필요는 없습니다. 채팅창 옆 [+] 를 클릭한 후, Skills and Design System 에서 필요한 스킬 (예: Make a Deck이나 다른 스킬)을 추가하기만 하면 같은 콘텐츠가 다른 형태로 변환됩니다.
   
4. 디자인보다 먼저 정해야 할 것은 콘텐츠를 효과적으로 전달하는 스토리라인입니다. 예쁘게 만들기 전에 무엇을 어떤 순서로 전달할지가 결과물의 완성도를 좌우합니다.

피그마 무료 템플릿으로 레퍼런스 준비하기

Claude Design은 피그마 파일(.fig)을 그대로 업로드 받아 디자인 레퍼런스로 활용할 수 있습니다. 무료 사용자도 마음에 드는 템플릿을 받아 로컬에 저장한 뒤 첨부하면 됩니다.

1. 피그마에 구글 계정으로 로그인합니다.
   
2. 왼쪽 메뉴에서 Community → Resource로 이동합니다.
   
3. 포트폴리오, 웹사이트 등 원하는 카테고리에서 마음에 드는 템플릿을 선택하고 Open in Figma를 클릭합니다.
   
4. 좌측의 피그마 아이콘에서 Save Local Copy를 눌러 .fig 파일로 저장합니다.
   

마음에 드는 템플릿이 없다면 원하는 스타일을 직접 설명해 요청해도 됩니다. Claude Design이 요청 사항에 맞춰 새로 디자인을 생성합니다.

자기소개서와 사진 한 장으로 포트폴리오 만들기

포트폴리오 웹사이트 한 페이지를 만드는 데 필요한 입력 자료는 세 가지입니다. 자기소개서 문서, 프로필 사진, 그리고 앞 단계에서 받아 둔 피그마 템플릿입니다.

1. Claude Design에서 Prototype을 선택하고 이름을 지정합니다. 레이아웃은 HighFidelity(디자인 요소를 포함한 최종 결과물 출력)를 선택합니다.
   
2. 자기소개서, 프로필 이미지, 피그마 파일을 차례로 첨부합니다.
   
3. 피그마 파일은 모든 페이지를 불러오는 옵션을 선택해도 Claude가 알아서 필요한 부분만 사용합니다.
   
4. 요청 프롬프트의 마지막에 추가로 확인이 필요한 항목이 있으면 저와 함께 꼼꼼히 검토한 후 진행합시다 문구를 넣어 검토 단계를 강제합니다.
   Apple 웹사이트 느낌의 전문적이고 모던, 감성적인 포트폴리오 1페이지 웹사이트를 제작합니다.
   스크롤을 내리면 배경화면과 요소가 전환되면서 역동적이고 감각적인 디자인을 적용합니다.
   총 3개의 서로 다른 무드/톤의 결과물을 생성해서 내가 직접 보고 tweak 할 수 있도록 variation을 추가하세요.
   추가로 확인이 필요한 항목이 있다면, 저와 함께 꼼꼼히 검토한 후 제작을 시작합시다
5. 무드 톤, 핵심 카피, 스크롤 강도 등 검토 항목을 선택하고 생성합니다.
   

자기소개서는 PDF, 워드, 웹페이지 링크, 메모장 텍스트 등 어떤 형식으로 입력해도 인식됩니다.

완성된 결과물을 편리하게 수정하는 네 가지 방법

생성된 결과물은 채팅 외에도 화면 안에서 직접 편집할 수 있습니다. 상황에 맞는 도구를 골라 사용합니다.

1. 완성된 결과물을 다른 사람과 공유하려면 오른쪽 위 Share에서 [Download Project as .zip] 을 선택해 압축 파일을 다운로드합니다.
   
2. 파일 압축을 푼 후, 메인 페이지 파일 이름을 index로 변경한 후 다시 압축합니다.
   
3. Netlify 같은 무료 호스팅에 그대로 업로드해 공유 가능한 웹사이트로 만들 수 있습니다.
   

인터랙티브 교육자료와 모바일 청첩장 활용 예제

• Claude Design은 포트폴리오 외에도 다양한 디자인 결과물을 만들어 냅니다. 사진과 영상을 함께 첨부하면 리조트 소개 페이지나 음식점 랜딩 페이지처럼 풍부한 시각 자료가 들어간 웹사이트도 빠르게 생성됩니다.
  https://www.oppadu.com/temp/dimsum/index.html
  
• 중·고등학생 학습용 자료에는 영상이나 이미지를 활용한 인터랙티브 교육 페이지가 적합합니다. 태양계 행성 학습 페이지처럼 영상을 첨부하고 주제만 알려 주면, 클릭하며 탐색할 수 있는 학습 페이지가 만들어집니다.
  https://www.oppadu.com/temp/solar-system/
  
• 애플 감성의 모바일 청첩장도 같은 방식으로 제작합니다. 애니메이션이 들어간 화면 전환과 참석 의사 등록 기능까지 한 페이지 안에 담을 수 있고, 이름과 날짜만 바꿔 재사용하기 좋습니다.
  https://www.oppadu.com/temp/jk-wedding.html
  

엑셀 데이터를 PPT로 옮기는 스토리보드 설계

엑셀 데이터를 슬라이드로 만들 때는 작업을 두 단계로 나누면 토큰을 크게 절약할 수 있습니다.

1. 스토리보드 설계는 일반 채팅에서 진행합니다. 피벗테이블 결과 데이터를 텍스트로 복사해 붙여 넣고, 분석 결과와 인사이트를 전달하는 슬라이드 초안을 작성하도록 요청합니다.
   첨부한 데이터를 기반으로 분석 결과 및 인사이트를 전달하는 PPT 슬라이드 발표자료를 제작합니다.
   슬라이드에 사용할 스토리 보드 초안을 작성하세요.
   각 슬라이드에는 키 메시지와 근거 데이터가 명확히 작성되어야 합니다.
   또한 각 슬라이드에는 분석 결과를 효과적으로 시각화하는 시각화 자료도 포함합니다.
2. 완성된 스토리보드 텍스트를 그대로 복사합니다.
   
3. 클로드 디자인에서 Slide Deck 을 선택해 슬라이드 템플릿을 생성합니다. 만약 발표용으로 텍스트를 줄이려면 생성 옵션에서 스피커 노트를 체크합니다.
   
4. 복사한 스토리보드를 채팅창에 입력하고, 보다 정확한 결과를 위해 스토리보드 제작에 첨부했던 데이터를 한번 더 첨부합니다.
   
5. 잠시만 기다리면 매출 분석 PPT 슬라이드가 완성됩니다.
   

완성된 슬라이드를 PPT로 받아 편집하는 방법

완성된 슬라이드를 파워포인트에서 다시 편집하려면 다운로드 옵션에서 PPTX 형식으로 파일을 받으면 됩니다.

1. 완성된 슬라이드에서 [Share] → 'Export as PPTX'를 클릭해 PPT 파일로 저장합니다.
   
2. 만약 슬라이드에 디자인 시스템이 적용되었거나 별도로 업로드 한 폰트가 적용되었다면, Custom Font 가 적용된 PPT 파일을 다운로드합니다. 그렇지 않다면 Universal Font (예: Apple Gothic 등)으로 다운로드 합니다.
   
3. 다운 받은 PPT 파일에서 [홈] 탭 - [편집] - [글꼴 바꾸기]를 실행한 후, 커스텀 폰트를 현재 보유중인 폰트로 바꿔주면 PPT 저장이 완료됩니다.
   

다운로드 후에는 일부 요소의 위치가 어긋날 수 있지만, 파워포인트에서 도형과 텍스트 위치만 조정하면 그대로 사내 보고서나 발표 자료로 사용할 수 있습니다.

회사 브랜드를 담은 디자인 시스템 등록

회사 고유의 컬러, 폰트, 여백, 스타일을 디자인 시스템에 등록해 두면 이후 모든 결과물에 통일된 규격이 자동 적용됩니다. 디자인 시스템 자체를 만들 때 사용량을 절약하는 방법이 있습니다.

1. 디자인 시스템의 기본 설계는 일반 채팅에서 작성합니다. 회사 이름, 한 줄 소개, 핵심 키워드, 분위기, 브랜드 아이덴티티를 입력하고 레퍼런스 페이지 URL이나 이미지를 함께 첨부합니다.

   # Claude Design 디자인 시스템 제작 요청
   이 디자인 시스템은 다른 Claude Design 세션에 시스템 프롬프트/컨텍스트로 붙여넣어 일관된 톤의 아티팩트(랜딩 페이지, 카드, 썸네일 등)를 생성하는 데 사용할 예정입니다.
   따라서 AI가 명확히 따를 수 있도록 토큰명·HEX·사용 규칙을 코드 블록으로 정리해주세요.
    
   ## 1. 입력 정보
   - 레퍼런스: [https://www.oppadu.com/about/, 핵심 색상 : #1A8754(그린톤)]
   - 브랜드/서비스명: [오빠두엑셀]
   - 한 줄 소개: [오늘은 바꾸는 두드림, 직장인을 위한 오피스/ai/엑셀 교육 플랫폼, 공유를 통한 모두의 성장]
   - 타겟 사용자: [25~40세 직장인]
   - 핵심 키워드: [연결, 신뢰, 전문성, 명료함, 따뜻함]
   - 분위기: [깔끔하고 전문적이면서 따뜻한 느낌]
    
   ## 2. 레퍼런스 활용 지침
   첨부된 링크/파일에서 다음 요소의 인상을 추출해 반영해주세요:
   - 컬러 무드 (메인 컬러의 채도·명도 경향)
   - 타이포 스타일 (세리프/산세리프, 굵기 대비)
   - 레이아웃 여백감 (밀도 높은/여유로운)
   - 전반적인 비주얼 톤
    
   단, 그대로 복제하지 말고 위 '핵심 키워드'와 '분위기'에 맞게 재해석해서 우리 브랜드만의 시스템으로 개선합니다.
    
   ## 3. 최종 출력물 (2개 모두 필수)
   ### A. 시각 미리보기
   - show_widget으로 컬러 팔레트·타이포·컴포넌트가 한눈에 보이는 시안
   ### B. 복붙용 마크다운 문서
   - 전체를 하나의 코드 블록으로 작성합니다. 안쪽에 다른 코드 블록을 넣지 말고 들여쓰기로 코드를 표현하거나, 바깥은 4개 백틱(````)으로 감싸서 작성합니다.
   - 다른 LLM이 그대로 시스템 프롬프트로 사용 가능한 형식으로 작성합니다.
    
   ## 4. 포함 항목
   ### ① 브랜드 개요
   - 브랜드명, 한 줄 소개, 타겟, 핵심 가치 3개
    
   ### ② 디자인 톤 & 무드
   - 핵심 키워드 3개
   - 무드 설명 2~3줄
   - 비주얼 스타일 방향 (예: 모던 / 미니멀 / 휴머니즘 등)
    
   ### ③ 컬러 시스템
   - Primary: 메인 컬러 1개 + 명도별 5단계 (50/100/300/500/700)
   - Secondary: 서브 컬러 1~2개
   - Neutral: 그레이 스케일 5~7단계
   - Semantic: Success / Warning / Error / Info
   - 각 컬러에 HEX 코드 표기
    
   ### ④ 타이포그래피
   - 한글 폰트 + 영문 폰트 (페어링)
   - 위계: Display / H1 / H2 / H3 / Body / Caption
   - 각 위계의 크기(px)와 굵기(weight) 명시
    
   ### ⑤ 스페이싱 & 그리드
   - 기본 단위 (4px 또는 8px 시스템)
   - 간격 토큰: xs / sm / md / lg / xl
   - 컨테이너 그리드 가이드
    
   ### ⑥ 컴포넌트 가이드
   - 버튼: Primary / Secondary / Ghost (Default·Hover·Disabled 상태)
   - 입력창: Default / Focus / Error
   - 카드: 기본형 + 강조형
   - 뱃지·태그 (선택)
    
   ## 5. 출력 형식
   - 컬러: 토큰명 + HEX (예: --primary-500: #2563EB)
   - 타이포: 위계별 토큰 (font-size, font-weight, line-height)
   - 스페이싱: 4px 또는 8px 기반 토큰 (--space-xs ~ --space-xl)
   - 컴포넌트: 버튼·입력창·카드의 각 상태별 스타일 정의
   - 이 시스템을 적용한 간단한 미리보기 1개 (예: 카드 컴포넌트 샘플)
   - 이후 같은 대화 내 모든 시각화에 자동 적용되도록 구조화
   - 모든 라벨과 설명은 한국어로 작성

2. Claude가 생성한 스타일 가이드 마크다운을 그대로 복사해 디자인 시스템 입력란에 붙여 넣습니다.
   
3. 회사 로고가 있다면 함께 첨부하고 Generation을 클릭합니다.
   
4. 팔레트, 보조 색상, 톤, 폰트, 스케일을 검토한 후, 부족한 부분이 있다면 [Needs work]를 클릭해 추가 요청을 입력합니다.
   
5. 화면에 표시되는 클로드 디자인의 결과물에 커스텀 폰트를 적용하려면, 디자인 가이드에 Pretendard 등 사용할 폰트 파일을 함께 업로드합니다.

완성된 디자인 시스템은 이름을 지정해 저장하고, 필요할 때 Publish해 활성화합니다. 기본값으로 고정할지 여부도 선택할 수 있습니다.

기존 PPT 슬라이드에 디자인 시스템 적용

1. 이미 만들어 둔 슬라이드도 디자인 시스템을 적용해 새 스타일로 일괄 변경할 수 있습니다. 기존 작업물을 연 후, 입력창 [+] → 'Skills and design system'으로 이동한 후, 방금 등록한 디자인 시스템을 선택합니다.
   
2. 이후, 첨부한 디자인 시스템을 바탕으로 슬라이드를 수정하세요라고 요청하면 폰트, 색상, 여백이 회사 규격에 맞춰 바뀝니다.
   
3. 새 슬라이드를 만들 때는 처음부터 디자인 시스템을 선택해 시작할 수 있어, 매번 같은 스타일을 다시 지정할 필요가 없습니다. 한 번 등록한 디자인 시스템으로 슬라이드, 웹사이트, 영상, 상세페이지 결과물의 시각 톤을 통일할 수 있습니다.