클로드 디자인으로 상세페이지 제작해본 후기: 노션 기획안부터 피그마 변환까지 (26년 4월 Opus 4.7 기준)

 

 

1. Claude Design을 테스트한 이유

2. Claude Design 이용 조건

3. Claude Design 과금 방식

4. Opus 4.7 주요 특징

5. Claude Code와 Claude Design의 차이

6. Claude Design 사용 후기

7. 상세페이지 제작 워크플로우

8. Claude Design 활용 시 주의할 점

정리: 완성본 제작 도구보다는 쓸만한 디자인 초안 제작 도구

 

---

1. Claude Design을 테스트한 이유

나는 상세페이지라고는 만들어본 적 없는 사람이다.

하지만 입사하고 얼마 되지 않아서 상세페이지를 만들 일이 생겨서 Claude Design을 직접 테스트해봤다. (26년 4월 기준)
이번 테스트는 단순히 “AI로 디자인이 되는가?”를 보는 수준이 아니라, 실제 상세페이지 제작 업무에 활용할 수 있는지 확인하는 데 목적이 있었다.

 

테스트 기준은 다음과 같았다.

• 노션으로 상세페이지 기획안 작성
• 마크다운 파일로 추출
• Claude Design에 업로드
• 상세페이지 디자인 생성
• HTML 파일 추출
• Figma로 변환
• 최종 수정 및 export

결론부터 말하면, Claude Design은 상세페이지나 PPT처럼 구조가 있는 시각 자료를 빠르게 초안화하는 데 꽤 유용했다.
다만 크레딧 소모가 크고, 결과물을 곧바로 실무 최종본으로 쓰기보다는 피그마에서 수정 가능한 초안으로 가져오는 방식에 더 가깝다.

 

---

2. Claude Design 이용 조건

Claude Design은 Pro 요금제에서만 사용할 수 있다.

무료 요금제에서는 접속 자체가 불가능했다.
따라서 실제로 디자인 기능을 테스트하거나 업무에 적용하려면 Pro 요금제가 필요하다.

 

---

3. 과금 방식: 일반 Claude 사용량과 별도

Claude Design은 일반 Claude 사용량과 별도로 디자인 전용 크레딧이 차감된다.

특히 Opus 4.7 기반으로 작동하는 디자인 작업은 크레딧 소모량이 꽤 큰 편이었다.

 

직접 테스트해본 결과, 회사 상세페이지 수준의 작업 기준으로는 주 4회 정도 사용할 수 있을 것으로 보였다.

테스트 근거는 다음과 같다.

• 상세페이지 2개 생성
• 전체 디자인 크레딧 약 45% 사용

즉, 단순 텍스트 생성처럼 가볍게 여러 번 시도하기에는 부담이 있다.
디자인 생성 전에 기획안, 레퍼런스, 프롬프트를 최대한 정리해두는 것이 중요하다.

 

---

4. 모델 Opus 4.7의 특징

Claude Design을 이해하려면 최신 모델인 Opus 4.7의 특징도 같이 봐야 한다.

공식 문서 기준으로 Opus 4.7은 이전 모델 대비 지시 이행, 멀티모달, 실제 업무 처리, 메모리 활용 측면에서 개선되었다.

• 공식 문서:
  https://www.anthropic.com/news/claude-opus-4-7

Introducing Claude Opus 4.7

 

---

4-1. 지시 이행 능력 향상

Opus 4.7은 지시를 이전보다 훨씬 더 문자 그대로 해석하는 경향이 있다.

이 점은 장점이면서 동시에 주의할 점이기도 하다.

이전 Claude 모델에서는 다소 느슨하게 해석되던 프롬프트가 Opus 4.7에서는 더 엄격하게 반영될 수 있다.
따라서 예전 모델용 프롬프트를 그대로 사용하면 예상과 다른 결과가 나올 수 있다.

 

실무에서는 프롬프트를 다음처럼 작성하는 것이 좋다.

• 조건을 명확하게 쓴다.
• 금지사항을 따로 분리한다.
• 레퍼런스 이미지의 역할을 구체적으로 지정한다.
• 카피 수정 가능 여부를 명확히 제한한다.
• 출력 형식과 섹션 순서를 닫힌 구조로 제시한다.

예를 들어 상세페이지 제작 시에는 “카피를 자연스럽게 다듬어줘”라고 쓰기보다,
“기획안 md 파일에 있는 카피는 임의로 해석하거나 변형하지 말고 그대로 사용해줘”라고 쓰는 편이 안전하다.

---

4-2. 멀티모달 성능 개선

Opus 4.7은 최대 2,576픽셀, 약 375만 화소까지 이미지를 인식할 수 있다.

이전 Claude 모델 대비 3배 이상의 해상도를 지원한다고 한다.

이 덕분에 다음과 같은 작업에서 유리하다.

• 복잡한 스크린샷 읽기
• 정교한 다이어그램 데이터 추출
• 픽셀 단위 정확도가 필요한 시각 작업
• 레퍼런스 이미지 기반 디자인 분석
• 상세페이지 섹션 구조 파악

디자인 작업에서는 이 부분이 꽤 중요하다.
레퍼런스 이미지를 넣었을 때 단순히 분위기만 따라가는 것이 아니라, 섹션 구성, 여백, 강조 방식, 레이아웃 흐름까지 어느 정도 파악하는 데 도움이 되기 때문이다.

---

4-3. 실제 업무 성능 강화

Opus 4.7은 고난도 전문 지식노동 분야에서 성능이 높아졌다고 볼 수 있다.

공식 문서에서는 금융 분석, 법률 등 경제적 가치가 높은 지식노동 영역에서의 성능 향상을 언급하고 있다.

 

상세페이지 제작 관점에서도 이 점은 의미가 있다.

단순히 예쁜 화면을 만드는 것이 아니라,
기획안의 논리 구조를 읽고, 섹션의 우선순위를 정리하고, 설득 흐름을 시각적으로 배치하는 데 도움이 되기 때문이다.

 

즉, 디자인 도구라기보다
“기획 문서를 시각 구조로 바꿔주는 도구”에 가깝게 활용할 수 있다.

---

4-4. 메모리 활용 개선

Opus 4.7은 파일 시스템 기반 메모리 활용 능력이 개선되었다고 한다.

실무적으로는 이 부분도 꽤 중요하다.

기획안이나 지시사항을 마크다운 파일로 정리해두면, 매번 처음부터 맥락을 설명하지 않아도 된다.
또한 프롬프트, 레퍼런스, 카피 문서를 분리해 관리하면 반복 작업의 자동화 효율도 높아질 수 있다.

예를 들어 다음처럼 파일을 나눠두면 좋다.

• 상세페이지 기획안.md
• 브랜드 가이드.md
• 디자인 프롬프트.md
• 금지사항.md
• 레퍼런스 이미지

이렇게 정리해두면 매번 같은 설명을 반복하지 않아도 되고, 결과물의 흔들림도 줄일 수 있다.

---

5. Claude Code와 Claude Design의 차이

Claude로 디자인을 만드는 방법은 크게 두 가지로 나눌 수 있다.

첫 번째는 Claude Code를 사용하는 방식이다.
두 번째는 Claude Design을 사용하는 방식이다.

 

Claude Code로 디자인할 때

Claude Code는 코드 기반으로 UI를 생성한다.

일반적인 흐름은 다음과 같다.

1. 자연어로 UI 요청
2. HTML, CSS, React 등 코드 생성
3. 브라우저 또는 localhost에서 결과 확인
4. 코드 수정
5. 다시 확인

이 방식은 개발자에게는 익숙하지만, 디자인 결과를 즉각적으로 보며 수정하기에는 다소 번거롭다.

 

Claude Design으로 디자인할 때

Claude Design은 자연어로 UI를 생성하고, 결과물을 즉각 시각적으로 확인하면서 수정할 수 있다.

일반적인 흐름은 다음과 같다.

1. 자연어로 디자인 요청
2. 레퍼런스 이미지와 기획안 업로드
3. 시각 결과물 생성
4. UI 화면에서 바로 수정
5. HTML 파일 추출

 

즉, Claude Code가 “코드로 디자인을 만드는 방식”이라면
Claude Design은 “디자인 화면을 직접 보면서 자연어로 수정하는 방식”에 가깝다.

상세페이지, PPT, 랜딩페이지처럼 시각적 흐름이 중요한 작업에서는 Claude Design 쪽이 더 직관적이었다.

 

---

6. Claude Design 사용 후기

전반적으로 Claude Design에 대한 후기는 괜찮은 편이다.

특히 PPT 제작에 좋다는 평가가 많았다.
Gamma보다 브랜드톤에 맞는 디자인이 잘 나온다는 후기도 있었다.

 

직접 테스트해본 입장에서도 어느 정도 공감했다.

Claude Design은 단순히 템플릿 느낌으로 밀어붙이기보다, 입력한 기획안과 레퍼런스 이미지를 바탕으로 브랜드톤을 맞추려는 느낌이 있었다.

 

크레딧 소모가 크다

 

다만 아쉬운 점도 있다.

• 크레딧 소모량이 크다.
• 아직 AI가 만든 느낌이 완전히 사라지지는 않는다.
• 최종본으로 바로 쓰기에는 디테일 수정이 필요하다.
• HTML을 Figma로 옮기는 과정에서 폰트나 레이아웃이 깨질 수 있다.

따라서 Claude Design을 “완성본 제작 도구”로 보기보다는
“수정 가능한 디자인 초안을 빠르게 만드는 도구”로 보는 편이 현실적이다.

---

7. Claude Design 상세페이지 제작 워크플로우

이번에는 실제로 진행했던 작업 절차를 정리해본다.

전체 흐름은 다음과 같다.

1. 노션으로 상세페이지 기획안 작성
2. 마크다운 파일로 추출
3. 브랜드 컬러 및 폰트 정리
4. ChatGPT로 Claude용 프롬프트 작성
5. 프롬프트 검수
6. Claude Design에 파일 업로드
7. 디자인 생성 및 수정
8. HTML 파일 추출
9. Figma 플러그인으로 변환
10. Figma에서 최종 수정 후 export

---

7-1. 노션으로 상세페이지 기획안 작성

먼저 노션으로 상세페이지 기획안을 작성했다.

처음부터 완성된 디자인을 만들려고 하기보다는, 상세페이지에 들어갈 내용과 흐름을 정리하는 데 집중했다.

노션에서는 다음 정도만 정리했다.

• 텍스트
• 볼드 처리
• 하이라이트
• 섹션 구분
• 카피 구조
• 상세페이지 흐름

처음에는 노션 화면을 캡처해서 활용할 생각이었다.
하지만 이후 Claude Design에 넣기 위해 마크다운 파일로 추출하는 방식이 더 적합하다고 판단했다.

---

7-2. 노션 상세페이지 기획안을 마크다운 파일로 추출

노션에서 작성한 상세페이지 기획안을 마크다운(md) 파일로 export했다.

마크다운 파일을 사용하는 이유는 간단하다.

• 구조가 유지된다.
• 텍스트가 깔끔하게 추출된다.
• Claude에 업로드하기 좋다.
• 섹션별 내용을 파악시키기 쉽다.
• 이후 수정과 재사용이 편하다.

특히 상세페이지는 카피의 순서와 섹션 구조가 중요하기 때문에, 마크다운 형태로 정리해두는 것이 좋다.

---

7-3. 브랜드 컬러와 폰트 정리

다음으로 회사 홈페이지에 있는 기존 페이지의 브랜드 컬러를 확인했다.

색상은 피그마에 대략적으로 정리했다.

정리한 항목은 다음과 같다.

• 클래스명
• 주요 색상 코드
• 사용된 분위기
• 기존 컬러와의 중복 여부
• 이번 상세페이지에서 사용할 색상 방향

여기서 중요한 점은 기존 클래스의 브랜드 컬러와 너무 비슷한 계열은 피하는 것이다.

새로운 교육 상품이라면 기존 상품과 구분되는 시각적 인상이 필요하다.
그래서 기존 컬러를 참고하되, 완전히 겹치지 않도록 조정했다.

폰트는 회사 지정 폰트를 기준으로 했다.

---

7-4. ChatGPT로 Claude용 프롬프트 작성

Claude Design에 바로 요청하기 전에, 먼저 ChatGPT로 Claude용 프롬프트를 작성했다.

첨부한 PDF는 노션에서 추출한 교육 홍보용 상세페이지 기획안입니다.

이 PDF를 읽고, **교육 홍보 상세페이지의 구조를 정리**해주세요.

## 기본 정보
- 교육명: ㅇㅇㅇ
- 교육 대상: ㅇㅇㅇ
- 교육 목적: ㅇㅇㅇ

## 내가 원하는 작업
PDF 안에 있는 내용을 바탕으로,  
**상세페이지의 전체 흐름을 아래 4개 기준으로 정리**해주세요.

1. 순서
2. 섹션
3. 파트
4. 헤드카피

## 출력 형식
반드시 **마크다운 표**로 작성해주세요.

형식은 아래와 같습니다.

| 순서 | 섹션 | 파트 | 헤드카피 |
|------|------|------|----------|
| 1 | 예시 섹션 | 예시 파트 | 예시 헤드카피 |

## 정리 기준
- PDF에 나온 **순서 그대로** 정리해주세요.
- 비슷한 내용이라도 **섹션/파트가 다르면 분리**해서 적어주세요.
- 헤드카피는 가능한 한 **원문 표현을 그대로 유지**해주세요.
- **카피 문구(텍스트) 워딩은 임의로 해석하거나 변형하지 마세요.**
- 문장이 길면 적절히 줄바꿈하되, **표 안에서는 `<br>` 태그**를 사용해주세요.
- 디자인 요소만 있고 텍스트가 불분명한 부분은 억지로 추측하지 말고 **[확인 필요]**로 표시해주세요.
- 같은 섹션 안에 여러 파트가 있으면 **행을 나눠서** 정리해주세요.
- 표를 만든 뒤, 맨 아래에 **상세페이지 흐름 요약 3~5줄**도 함께 적어주세요.

## 섹션명 정리 원칙
섹션명은 가능하면 아래처럼 **역할 중심으로 정리**해주세요.
예:
- 문제 인식
- 공감/상황 제시
- 강의 소개
- 차별점
- 커리큘럼
- 수강 대상
- 기대 효과
- 실습 방식
- 혜택/제공 내용
- 강사/브랜드 신뢰
- 신청 유도
- FAQ

단, PDF에 명확한 구획명이 있으면 그 표현을 우선 반영해주세요.

## 예시 스타일
아래 같은 형태로 정리해주세요.

| 순서 | 섹션 | 파트 | 헤드카피 |
| -- | ------ | ----------------------------------------------------------------------------- | -------------------------------------------------------------------------- |
| 순서 | 섹션           | 파트                                                                            | 헤드카피                                                                       |
| -- | ------------ | ----------------------------------------------------------------------------- | -------------------------------------------------------------------------- |
| 2  | 쉽게 시작하기 | 누구나 부담 없이 시작할 수 있는 사용법 안내 / 복잡한 과정 없이 바로 사용할 수 있다는 점 강조 / 진입 장벽 낮추기 | 하루 한 번, 간편하게 시작하는 루틴 |
| 3  | 신뢰 데이터 | 소비자가 체감할 수 있는 핵심 수치 제시 / 누적 판매량·리뷰 수·만족도 등 신뢰 요소 배치 | 누적 판매 118,560개<br>리뷰 8,217건<br>만족도 4.7/5.0<br>(2026.1 기준) |

## 추가 요청
표를 다 작성한 뒤,
1. 이 상세페이지가 어떤 순서로 설득 구조를 가져가는지
2. 빠진 섹션이 있다면 무엇이 보완되면 좋을지

이 두 가지도 짧게 덧붙여주세요.

 

이렇게 한 이유는 두 가지다.

• 첫 번째는 GPT로 정확한 명령문을 만들기 위해서다.
  Claude는 자연스러운 글쓰기와 긴 문서 처리에 강점이 있지만, 디자인 요청 전에 명령 구조를 정리해두면 결과물이 더 안정적으로 나온다. 
• 두 번째는 프롬프트 설계와 실행을 분리하기 위해서다.
  프롬프트를 설계하는 단계와 실제 디자인을 생성하는 단계를 나누면, 조건 누락을 줄일 수 있다.

Claude에게 전달할 프롬프트에는 다음 구조를 포함했다.

• 순서 / 섹션 / 파트 / 헤드카피

이 표 구조는 회사에서 상세페이지 제작시 사용하는 양식이다.
섹션별 흐름과 카피를 정리하기에 적합하다.

 

특히 중요한 조건은 다음이다.

“기획안 md 파일에 있는 카피 문구는 임의로 해석하거나 변형하지 말고 그대로 사용해줘.”

 

상세페이지에서 카피는 설득 구조의 핵심이다.
따라서 Claude가 임의로 문장을 바꾸지 않도록 명확히 제한해야 한다.

---

7-5. ChatGPT가 작성한 프롬프트 검수

클로드에서 프롬프트 작성해도 됨. 오히려 스킬 파일 넣어서 더 좋은 프롬프트 작성 가능.

 

ChatGPT가 작성한 프롬프트를 바로 Claude에 넣기 전에 한 번 더 검수했다.

검수 기준은 다음과 같다.

• 조건이 빠지지 않았는가?
• 카피 임의 변형 금지 문구가 들어갔는가?
• 표 양식이 제대로 들어갔는가?
• 레퍼런스 이미지의 역할이 명확한가?
• 폰트와 컬러 조건이 포함되었는가?
• 금지사항이 따로 정리되었는가?
• 인물 사진, 배너, 바로가기 섹션 등 별도 표시 조건이 들어갔는가?

Claude Design은 지시를 꽤 문자 그대로 반영하는 편이기 때문에, 프롬프트 검수 단계가 중요하다.

이 단계에서 조건을 명확하게 닫아두지 않으면, 디자인 결과물이 예상과 다르게 나올 수 있다.

---

7-6. Claude Design에 파일 업로드

프롬프트 검수가 끝나면 Claude Design에 접속한다.

작업 흐름은 다음과 같다.

1. Claude Design 접속
2. Front design 클릭
3. 새 프로젝트 생성
4. 자연어로 명령 입력
5. 필요한 파일 업로드

함께 업로드한 파일은 다음과 같다.

1. 마크다운 기획안 파일
2. 마프웍 상세페이지 레퍼런스 이미지
3. ChatGPT로 작성한 Claude용 프롬프트

여기서 레퍼런스 이미지는 “그대로 베끼기” 용도가 아니다.

레퍼런스 이미지의 역할은 다음처럼 명확히 지정하는 것이 좋다.

• 전체 톤 참고
• 섹션 구성 참고
• 여백감 참고
• 강조 방식 참고
• 카피는 md 파일 기준으로만 사용

즉, 이미지는 디자인 방향을 참고하기 위한 자료이고, 실제 카피는 md 파일의 내용을 기준으로 사용하게 해야 한다.

---

7-7. 생성된 디자인 확인 후 수정

Claude Design에서 결과물이 생성되면 화면에서 바로 확인할 수 있다.

수정사항이 있으면 UI 화면에서 바로 수정할 수 있다.

이 부분이 Claude Code와 가장 큰 차이점이다.

Claude Code는 수정하려면 코드를 보고 다시 브라우저에서 확인해야 하는 경우가 많다.

반면 Claude Design은 시각 결과물을 보면서 자연어로 바로 수정할 수 있다.

 

예를 들어 다음처럼 요청할 수 있다.

• 첫 번째 섹션의 여백을 더 넓혀줘.
• 헤드카피를 더 강하게 보여줘.
• CTA 버튼을 더 눈에 띄게 만들어줘.
• 인물 사진 영역은 별도 섹션으로 분리해줘.
• 배경 컬러를 조금 더 브랜드톤에 맞게 조정해줘.

수정이 끝나면 HTML 파일을 추출한다.

---

7-8. Figma 플러그인 html.to.design 설치

 

Claude Design에서 추출한 HTML 파일을 Figma로 가져오기 위해 html.to.design 플러그인을 사용했다.

이 플러그인은 HTML 파일을 Figma 내에서 수정 가능한 작업본으로 바꿔준다.

설치 후 실행하면 무료 체험이 바로 작동한다.
테스트 기준으로는 30일 동안 10개까지 무료로 사용할 수 있었다.

---

7-9. html.to.design에서 HTML 파일 업로드

html.to.design 플러그인을 실행한 뒤 Claude Design에서 추출한 HTML 파일을 업로드한다.

이때 가장 중요한 것은 폰트다.

 

HTML에 사용된 폰트가 PC에 설치되어 있지 않으면 Figma에서 폰트가 깨질 수 있다.
특히 굵기나 자간, 줄간격이 다르게 보일 수 있다.

따라서 Figma 변환 전에 사용된 폰트를 반드시 PC에 설치해야 한다.

 

폰트가 제대로 적용되지 않으면 Claude Design 화면에서는 괜찮아 보였던 디자인이 Figma에서는 어색하게 보일 수 있다.

---

7-8. Figma 작업본으로 변환

HTML 파일을 업로드하면 html.to.design 플러그인이 이를 Figma 내에서 수정 가능한 작업본으로 변환해준다.

Claude Design에서 만든 결과물을 그대로 최종 제출하기보다는 Figma에서 손볼 수 있는 형태로 가져오는 것이 현실적인 활용 방식이다.

---

7-9. Figma에서 추가 수정 후 export

마지막으로 Figma에서 추가 수정 작업을 진행한다.

수정할 부분이 있다면 기존 작업 방식대로 정리하면 된다.

 

결과물 예시

---

정리

Claude Design은 상세페이지 제작 과정에서 꽤 유용하게 쓸 수 있었다.

특히 기획안이 어느 정도 정리되어 있고, 레퍼런스 이미지와 브랜드 가이드가 있다면 빠르게 디자인 초안을 만들 수 있다.

다만 실무에서 바로 최종본으로 쓰기에는 아직 수정이 필요하다.

 

나는 다음과 같이 활용했다.

노션 기획안 작성
→ 마크다운 파일 추출
→ 브랜드 컬러/폰트 정리
→ ChatGPT로 Claude용 프롬프트 작성
→ Claude Design에서 디자인 생성
→ HTML 추출
→ html.to.design으로 Figma 변환
→ Figma에서 최종 수정 및 export

 

상세페이지, PPT, 랜딩페이지처럼 구조와 시각 흐름이 중요한 작업에서는 충분히 테스트해볼 만하다.
다만 크레딧 소모가 크기 때문에, 생성 전에 기획안과 프롬프트를 최대한 정리해두는 것이 중요하다.