모듈 분류: 콘텐츠 제작 · 선행 모듈: AI 프롬프트 기초, HTML 기반 디자인 산출물 만들기

한 줄 정의

Gemini 또는 Claude로 카드뉴스 디자인 시스템을 먼저 만들고, HTML 템플릿을 완성한 뒤, 필요하면 Figma로 가져와 세부 편집까지 이어가는 대량 카드뉴스 제작 워크플로우.

왜 배우는가

• 카드뉴스를 한 장씩 수작업으로 만들면 시간과 품질이 모두 흔들리기 쉽다.
• 먼저 디자인 가이드를 만들고, 그 가이드를 기준으로 HTML 템플릿을 만들면 여러 장의 카드뉴스를 같은 톤으로 빠르게 제작할 수 있다.
• Gemini와 Claude는 카드뉴스 초안 제작에 사용할 수 있고, Figma는 텍스트 수정, 사진 추가, 레이어 단위 편집이 필요할 때 후반 작업 도구로 연결할 수 있다.
• 핵심은 “한 번 쓸 이미지”가 아니라 “반복 생산 가능한 카드뉴스 생성 시스템”을 만드는 것이다.

전체 워크플로우

1. 카드뉴스 생성 시스템 만들기
2. 디자인 가이드 기획하기
3. 디자인 템플릿 초안 생성하기
4. 디자인, 색감, 배치 수정 반영하기
5. 디자인을 고정한 뒤 카드별 텍스트 내용 반영하기
6. 완성된 HTML을 파일로 저장하기
7. html.to.design 확장 프로그램으로 캡처하기
8. h2d 파일을 Figma로 가져와 레이어 단위로 수정하기

사용하는 도구

• Gemini 또는 Claude
• 선택 도구: Figma