클로드 인포그래픽 svg 만드는 프롬프트

클로드에게 내용을 주고 인포그래픽 svg 형태 만드는 프롬프트를 만들었습니다. 클로드 3.7로 올라가면서 svg 형식의 벡터파일을 만들수 있게 되었습니다.

 

반응형

 

인포그래픽 svg 형태 만드는 프롬프트

다음 자료를 극도로 간결한 SVG 인포그래픽으로 변환해 주세요:

[여기에 자료 입력]

화면 비율: [원하는 비율 입력 - 기본값 1:1]

요구사항:
1. 보라색 테마 사용 (다양한 보라 색조 활용)
   - 타이틀 배경: 진한 보라색 (#6A0DAD)
   - 콘텐츠 배경: 연한 보라색 (#f0fff0) 
   - 아이콘 배경: 중간 보라색 (#9370DB)
   - 텍스트: 흰색 또는 진한 보라색 (배경에 따라 대비되게)

2. 타이틀 영역 차별화
   - 타이틀은 상단 25% 영역 차지
   - 타이틀 글자 크기 레이아웃의 최대 80% 안넘게게 하고 아이콘 없으면 최소 50px 있으면 최소 38px, 두꺼운 굵은체
   - 타이틀 배경색 진하게 + 그림자 효과 추가
   - 타이틀과 콘텐츠 영역 사이에 명확한 구분선 또는 그림자
   - 타이틀 배경은 테두리가 살짝 둥글고 백그라운드와 여백을 2px 줘서 살짝 떨어지게 보이게
   - 서브 타이틀이 있으면 메인과 서브가 상하 중앙에 오게 위치

3. 콘텐츠 구성
   - 4분할 그리드 레이아웃(가능한 경우)
   - 각 박스에 적절한 그림자와 테두리 유지
   - 키워드만 사용 (단어 3-5개 이하)
   - 콘텐츠 글자 크기 레이아웃의 최대 30% 안넘게게 하고 최소 30px
   - 각 콘텐츠 영역에 명확한 테두리와 그림자
   - 영역별 최소 15px 이상의 여백
   - 세부 항목중 첫번째 시작항목은 상단 여백(20px 이상)
   - 세부 항목은 들여쓰기 추가 (25px 이상)
   - 세부 항목 글씨 크기 최소 30px(적절한 반전이나 구분되는 색 사용)
   - 세부 항목 글머리 기호 없고 10자 이내로 핵심만 보이게 줄이기
   
4. 레이아웃 최적화
   - 모든 요소는 부모 컨테이너의 85% 이내 사용
   - 항목이 2개일 때 각각 최대 40% 너비만 사용
   - 항목 간 최소 10% 이상 여백 확보
   - 단색 배경만 표시되는 문제 방지를 위한 강제 콘텐츠 표시

5. 아이콘 처리
   - 아이콘 크기는 텍스트 높이의 1.0배 이상
   - 원형 배경에 아이콘 배치
   - 아이콘과 텍스트 좌우 사이 약간의 간격(겹치지 않게)
   - 아이콘은 제목 왼쪽에 위치시키고 제목과 겹치지 않게 함
   - 아이콘과 제목 사이 최소 15px 간격 유지
   - 아이콘 배경 원을 제목과 겹치지 않게 조정

6. 디자인 세련미 향상:
   - 콘텐츠 박스 내 제목은 왼쪽 정렬
   - 세부 항목은 왼쪽 정렬하고 들여쓰기 적용
   - 콘텐츠 박스 내 여백 늘리기
   - 아이콘에 부드러운 그라데이션 효과 적용


출력 형식:
- SVG 코드(image/svg+xml)
- 모든 요소에 고유 ID 부여
- 배경 그라데이션 또는 패턴 적용 (단색 방지)
- 모든 텍스트에 자동 크기 조절 속성 추가
- 모든 상자에 부드러운 그림자 효과 추가
- 테두리, 그림자, 강조 효과로 영역 구분 강화

 

 

클로드 프로젝트로 만들어서 테스트 해봤습니다.

나무위키의 경제 단어를 가져와 만들었습니다. https://namu.wiki/w/%EA%B2%BD%EC%A0%9C

 

나무위키 경제 내용 복사

나무위키 경제

 

경제 인포그래픽 svg

경제 인포그래픽

 

클로드에 내용 입력후 svg 생성

클로드에 내용 입력후 svg 생성

 

실제 인포그래픽 svg 내용

 

 

₩ 경제 (Economy) 재화와 용역의 생산·분배·소비 활동 개요 사회 현상과 인간 활동 재화와 용역 생산·분배·소비 활동 경제학 기반 특징 자원의 희소성 합리적 선택 경제 순환 경제주체 상호작용 어원 그리스어 오이코노미아 오이코스(살림살이) 노미아(규범) 한자 경세제민(줄임) 경제 시스템 GDP/GNI 측정정부·기업·가계과학기술 중요성경제 안정성

 

 

 

다른글들:

2024.09.26 - [AI/GPTs, Projects] - 데이터 품질관리 GPTs

데이터 품질관리 GPTs

2024.08.21 - [AI] - 미드저니 프롬프트 (f.페이퍼로지)

미드저니 프롬프트 (f.페이퍼로지)

2023.07.21 - [CSS] - [CSS] 🎨 버튼(Button) 디자인 스타일 모음

[CSS] 🎨 버튼(Button) 디자인 스타일 모음

2024.10.15 - [분류 전체보기] - 버튼 - 오렌지

티스토리

2024.10.21 - [분류 전체보기] - 크롬 탭 여러개 선택후 url 복사하는 방법

크롬 탭 여러개 선택후 url 복사하는 방법