AI 발자취

CASE STUDY

대본이 바뀌어도 카드뉴스 형식이 흔들리지 않게 했다

2026-10-02 · 완결러들 카드뉴스 제작

인스타 대본을 기존 형식의 피그마 카드로 옮기는 과정을 자동화하고 재사용 가능한 스킬로 고정했다

문제와 목표

문제. 완결러들의 인스타 카드뉴스는 모눈 배경, 명조 글꼴, 분홍 형광펜이라는 형식을 유지한다. 그래서 새 대본이 올 때마다 줄 나누기, 강조, 배치를 같은 규칙으로 다시 해야 했다.

목표. 텍스트 대본을 주면 기존 형식의 카드가 피그마 파일에 만들어지고, 다음 대본에도 같은 과정을 다시 쓸 수 있게 하는 것. 일러스트는 사람이 맡고, 자동화 범위는 텍스트와 형광펜으로 정했다.

설계 기준과 선택 이유

기준은 네 가지였다.

이미지로 내보내는 대신 피그마에 직접 만들었다. 작업 파일이 이미 피그마에 있고, 일러스트와 최종 글꼴은 사람이 그 안에서 마무리하기 때문이다. 원본 프레임을 읽어 카드 크기, 글자 크기, 줄간격, 형광펜 색을 수치로 가져왔다.

대본 내용은 데이터로, 형식은 생성 코드로 나눴다. 그래서 다음 대본에서는 카드 내용만 새로 채우면 된다.

전체 연결도

구성도
flowchart TD
    A["사람: 대본과 기존 형식"] --> B["AI: 카드 설계"]
    C["cardnews-figma 스킬"] --> B
    B --> D["Figma: 새 카드 프레임"]
    D --> E["AI: 화면 검수"]
    E --> F["사람: 글꼴과 일러스트 마무리"]
    F --> G["PNG 내보내기"]

작동 과정

대본 한 편은 다음 순서로 카드가 된다.

대본에서 카드까지

단계별 설명

  1. 01
    대본 전달사람

    슬라이드별 대본을 준다

  2. 02
    사전 점검AI

    다음 번호, 빈 위치, 글꼴, 배경을 읽기 전용으로 확인한다

  3. 03
    카드 설계AI

    문장을 카드로 나누고 강조 줄을 고른다

  4. 04
    프레임 생성AI

    한 번에 5장까지 피그마에 만든다

  5. 05
    화면 검수AI

    넘침, 접힌 줄, 겹침을 카드마다 확인한다

  6. 06
    마무리사람

    글꼴을 바꾸고 일러스트를 넣는다

  7. 07
    내보내기사람

    완성한 카드를 PNG로 저장한다

구체적인 구현

스킬은 파일 세 개로 구성했다.

구성요소역할
절차 문서연결, 점검, 설계, 생성, 확인, 보고 순서와 카드 규칙
점검 스크립트다음 카드 위치와 사용 가능한 글꼴, 배경 이미지를 읽기 전용으로 확인
생성 스크립트카드 데이터를 받아 프레임, 문단, 형광펜, 프롬프트 박스를 생성

카드 내용은 네 가지 요소로 표현한다. 일반 줄, 굵은 줄, 형광펜 줄, 프롬프트 박스다. 세로 공간은 줄 수로 미리 계산해 넘치지 않게 하고, 생성 뒤에는 폭, 아래쪽 경계, 프롬프트 줄 접힘을 숫자로 확인한다.

실패와 교정

원본 수정이 불가능했다. 처음에는 기존 카드를 복제해 글자만 바꿀 계획이었다. 하지만 원본 글꼴을 도구에서 불러오지 못했다. 그래서 새 프레임에 대체 글꼴로 넣고, 마지막에 사람이 글꼴을 일괄 변경하는 방식으로 바꿨다.

형광펜이 글꼴 변경을 버텨야 했다. 원본처럼 사각형을 줄마다 놓으면 글꼴을 바꿀 때 길이가 어긋난다. 그래서 텍스트를 감싼 프레임에 색을 칠해 글자 폭을 따라가게 만들었다.

응답이 끊겼다. 프레임 구조를 한 번에 읽는 호출이 네 번 실패했다. 반환값을 짧은 요약으로 줄여 해결했다.

마지막 카드가 검수에서 빠질 뻔했다. 6장을 한 번에 만들자 화면 캡처가 5장만 돌아왔다. 마지막 카드를 따로 확인했고, 스킬은 한 번에 5장까지만 만들도록 고쳤다.

검증과 남은 과제

확인한 것.

아직 확인하지 못한 것.

나와 AI의 역할

내가 결정한 것. 기존 형식을 유지할 것, 텍스트만 자동화할 것, 어떤 파일에 만들 것인지, 글꼴과 일러스트의 최종 모습, 이 과정을 스킬로 남길 것.

AI가 수행한 것. 기존 프레임의 수치 판독, 대본의 카드 분할과 강조 줄 제안, 생성 코드 작성과 실행, 화면 검수, 스킬 문서 작성과 시험.