CASE STUDY
대본이 바뀌어도 카드뉴스 형식이 흔들리지 않게 했다
인스타 대본을 기존 형식의 피그마 카드로 옮기는 과정을 자동화하고 재사용 가능한 스킬로 고정했다
문제와 목표
문제. 완결러들의 인스타 카드뉴스는 모눈 배경, 명조 글꼴, 분홍 형광펜이라는 형식을 유지한다. 그래서 새 대본이 올 때마다 줄 나누기, 강조, 배치를 같은 규칙으로 다시 해야 했다.
목표. 텍스트 대본을 주면 기존 형식의 카드가 피그마 파일에 만들어지고, 다음 대본에도 같은 과정을 다시 쓸 수 있게 하는 것. 일러스트는 사람이 맡고, 자동화 범위는 텍스트와 형광펜으로 정했다.
설계 기준과 선택 이유
기준은 네 가지였다.
- 기존 카드는 건드리지 않을 것
- 원본 수치를 그대로 쓸 것
- 사람이 피그마에서 이어서 고칠 수 있을 것
- 다음 대본에도 같은 절차로 실행될 것
이미지로 내보내는 대신 피그마에 직접 만들었다. 작업 파일이 이미 피그마에 있고, 일러스트와 최종 글꼴은 사람이 그 안에서 마무리하기 때문이다. 원본 프레임을 읽어 카드 크기, 글자 크기, 줄간격, 형광펜 색을 수치로 가져왔다.
대본 내용은 데이터로, 형식은 생성 코드로 나눴다. 그래서 다음 대본에서는 카드 내용만 새로 채우면 된다.
전체 연결도
flowchart TD
A["사람: 대본과 기존 형식"] --> B["AI: 카드 설계"]
C["cardnews-figma 스킬"] --> B
B --> D["Figma: 새 카드 프레임"]
D --> E["AI: 화면 검수"]
E --> F["사람: 글꼴과 일러스트 마무리"]
F --> G["PNG 내보내기"]작동 과정
대본 한 편은 다음 순서로 카드가 된다.
단계별 설명
- 01대본 전달사람
슬라이드별 대본을 준다
- 02사전 점검AI
다음 번호, 빈 위치, 글꼴, 배경을 읽기 전용으로 확인한다
- 03카드 설계AI
문장을 카드로 나누고 강조 줄을 고른다
- 04프레임 생성AI
한 번에 5장까지 피그마에 만든다
- 05화면 검수AI
넘침, 접힌 줄, 겹침을 카드마다 확인한다
- 06마무리사람
글꼴을 바꾸고 일러스트를 넣는다
- 07내보내기사람
완성한 카드를 PNG로 저장한다
구체적인 구현
스킬은 파일 세 개로 구성했다.
| 구성요소 | 역할 |
|---|---|
| 절차 문서 | 연결, 점검, 설계, 생성, 확인, 보고 순서와 카드 규칙 |
| 점검 스크립트 | 다음 카드 위치와 사용 가능한 글꼴, 배경 이미지를 읽기 전용으로 확인 |
| 생성 스크립트 | 카드 데이터를 받아 프레임, 문단, 형광펜, 프롬프트 박스를 생성 |
카드 내용은 네 가지 요소로 표현한다. 일반 줄, 굵은 줄, 형광펜 줄, 프롬프트 박스다. 세로 공간은 줄 수로 미리 계산해 넘치지 않게 하고, 생성 뒤에는 폭, 아래쪽 경계, 프롬프트 줄 접힘을 숫자로 확인한다.
실패와 교정
원본 수정이 불가능했다. 처음에는 기존 카드를 복제해 글자만 바꿀 계획이었다. 하지만 원본 글꼴을 도구에서 불러오지 못했다. 그래서 새 프레임에 대체 글꼴로 넣고, 마지막에 사람이 글꼴을 일괄 변경하는 방식으로 바꿨다.
형광펜이 글꼴 변경을 버텨야 했다. 원본처럼 사각형을 줄마다 놓으면 글꼴을 바꿀 때 길이가 어긋난다. 그래서 텍스트를 감싼 프레임에 색을 칠해 글자 폭을 따라가게 만들었다.
응답이 끊겼다. 프레임 구조를 한 번에 읽는 호출이 네 번 실패했다. 반환값을 짧은 요약으로 줄여 해결했다.
마지막 카드가 검수에서 빠질 뻔했다. 6장을 한 번에 만들자 화면 캡처가 5장만 돌아왔다. 마지막 카드를 따로 확인했고, 스킬은 한 번에 5장까지만 만들도록 고쳤다.
검증과 남은 과제
확인한 것.
- 대본 13슬라이드를 13장의 프레임으로 만들고 모두 화면으로 확인했다.
- 기존 카드 8장을 수정하지 않고 새 카드를 추가했다.
- 최종 결과는 PNG 14장으로 내보내졌다. 표지 일러스트와 마무리 카드는 사람이 추가했다.
- 점검 스크립트는 실제 파일에서, 생성 스크립트는 시험 카드 2장에서 작동했다. 시험 카드는 확인 후 삭제했다.
아직 확인하지 못한 것.
- 스킬을 새 대본으로 처음부터 끝까지 실행하는 시험은 하지 않았다.
- 제작 시간 절감 효과는 측정하지 않았다.
- 글꼴 변경 뒤의 레이어 상태는 직접 읽지 못했다. Figma 호출 한도에 걸렸기 때문이다.
- 호출 한도는 다음 자동 생성의 제약이 될 수 있어 대응이 필요하다.
나와 AI의 역할
내가 결정한 것. 기존 형식을 유지할 것, 텍스트만 자동화할 것, 어떤 파일에 만들 것인지, 글꼴과 일러스트의 최종 모습, 이 과정을 스킬로 남길 것.
AI가 수행한 것. 기존 프레임의 수치 판독, 대본의 카드 분할과 강조 줄 제안, 생성 코드 작성과 실행, 화면 검수, 스킬 문서 작성과 시험.