AI 카드뉴스 제작 도구, 기획부터 편집·저장까지

카드뉴스를 한 번 만드는 것과, 팀원이 다음 작업에서도 고쳐 쓰는 것은 다른 문제였다. 이미 사용하던 색과 구성은 유지하면서 내용은 매번 바꿀 수 있어야 했다. AI가 만든 문장에 원문과 다른 내용이 들어가지는 않았는지도 확인해야 했고.

외부 AI 제작 도구에 원문을 넣고 결과물을 만드는 흐름을 직접 따라가 봤다. 장별 기획안을 먼저 확인하는 화면은 참고할 만했다. 다만 내 작업에서는 비용을 예상하고, 작업 상태를 이어 쓰고, 사실을 확인하는 절차가 더 필요했다.

그래서 팀원이 기존 구성을 바탕으로 기획안을 고치고, 승인한 뒤 카드로 만들고, 결과물도 다시 수정할 수 있는 웹 도구를 만들었다. 제작 당시 기록을 바탕으로 작업 과정과 어디까지 확인했는지를 정리했다.

기존 카드에서 반복되는 구조부터 찾기

먼저 기존 카드뉴스 17장을 살펴봤다. 처음에는 커버·본문·리스트·공지·엔딩의 다섯 유형이면 될 것으로 예상했다. 실제 카드에서는 별도의 공지형이 없었고, 본문도 같은 방식으로 배치되어 있지 않았다.

화면 이미지를 크게 보여주는 장, 설명을 읽는 장, 개념을 박스로 묶은 장, 이미지와 설명을 함께 담은 장이 있었다. 커버와 엔딩을 더해 여섯 유형으로 정리했다.

• 커버: 전체 주제와 첫 인상
• 비주얼: 이미지를 중심으로 보여주는 내용
• 텍스트: 설명을 읽는 내용
• 개념: 내용을 박스 구조로 묶어 보여주는 내용
• 혼합: 이미지와 설명을 함께 보여주는 내용
• 엔딩: 마지막 안내와 마무리

각 유형에서 제목·본문·이미지가 들어갈 자리를 HTML/CSS 템플릿으로 만들었다. 색상, 글꼴, 하단 문구는 별도 설정으로 분리했다. 같은 배치를 쓰면서 색과 글꼴을 바꿀 수 있게. 새로운 배치 자체를 추가하려면 개발이 필요했다.

AI에게 장별 기획안을 받고, 내용은 직접 확정하기

도구 안에 AI API 호출부터 넣지는 않았다. 팀원이 선택한 템플릿에 맞는 요청문을 복사해 AI에 전달하고, 돌아온 기획안을 도구에 붙여넣는 방식으로 시작했다.

기획안은 JSON이라는 정해진 형식으로 받는다. 각 장의 유형, 제목, 본문, 이미지 배치 설명이 들어간다. 도구가 이 내용을 장별 편집 카드로 펼쳐주므로, 검토할 때 JSON 코드를 직접 읽을 필요는 없다.

편집 화면에서는 유형과 제목·본문을 고치고, 장을 추가하거나 삭제하고, 순서를 바꿀 수 있다. 원문에 없는 내용이 들어갔는지, 한 장에 너무 많은 설명을 담지는 않았는지 확인한 뒤 승인하도록 했다. 승인 후에는 기획안의 내용을 선택한 템플릿에 배치해 카드 미리보기를 만든다.

실제 작업 순서는 다음과 같다.

1. 템플릿을 선택한다.
2. 제공된 요청문으로 AI 기획안을 만든다.
3. 기획안을 붙여넣고 장별 내용을 검토·수정한다.
4. 원문과 대조한 뒤 승인하고 카드 미리보기를 만든다.
5. 필요한 부분을 다시 편집하고 파일로 저장한다.

디자인이 완성되기 전에 기획안을 먼저 확인했다. 제목과 문장이 정확한지, 한 장에 정보가 너무 많지는 않은지, 설명과 이미지 배치가 맞는지를 보려고.

결과를 받은 뒤에도 수정할 수 있게 저장하기

카드가 만들어진 뒤에도 화면 위의 글을 직접 편집할 수 있도록 했다. 저장은 장별 HTML 또는 전체를 묶은 HTML로 제공한다. PNG 생성도 검증했지만, 내 작업에서는 후속 수정을 위해 HTML 저장을 우선했다.

팀원이 같은 도구를 열 수 있도록 Google Apps Script 웹앱으로 구성했다. 기획안 저장·불러오기 기능도 구현했다. 다만 연결된 Sheets에 실제 저장하는 마지막 클릭 검증은 당시 기록에서 남은 작업이었다.

긴 문장과 잘못된 이미지 입력을 처리하기

실제 작업에서는 문장이 카드 밖으로 넘쳤다. 글자 크기를 자동으로 줄이는 처리를 추가했지만, 너무 작아지면 읽기 어려웠다. 최소 크기에서도 넘치면 내용을 나누라는 경고를 보여주도록 보완했다.

요청문에도 분량 가이드를 넣었다. 본문 두 문단, 문단당 60자 안팎, 목록 네 항목 이내를 권장했다. 당시 템플릿에 맞춘 기준이다.

설정에서 배경색을 바꿨는데 카드에 반영되지 않는 오류도 있었다. 화면에 고정된 색이 설정값보다 먼저 적용되는 부분을 수정했다. AI가 이미지 주소 자리에 설명문을 넣는 경우에는 설명문을 이미지 파일처럼 불러오지 않도록 검사했고.

HTML을 Figma로 가져오는 과정에서는 단순한 사각형만 있는 파일에서도 캡처 오류가 났다. 카드의 복잡도보다 접속 환경을 확인해야 하는 문제로 좁혀졌고, 로컬호스트 주소로 여는 사용 절차를 남겼다.

도구를 확인할 때는 긴 문장이나 이미지가 없는 장도 넣어봤다. 결과가 어디에서 깨지는지 확인한 뒤 설정과 입력 처리를 보완했다.

다섯 장을 만들었고, 추가 보완은 로컬에서 확인했다

제작 기록에서는 기존 17장을 여섯 구조로 분류하고, 실제 HTML·PNG 다섯 장을 생성한 것을 확인했다. v0.3 운영 배포와 주요 화면 흐름 검증도 진행했다.

자동 글자 축소와 이미지 입력 검사가 포함된 v0.4는 당시 로컬 테스트 범위였다. 실서버 반영과 Sheets 저장의 최종 클릭 검증이 남아 있었다. 장기간 팀이 사용한 성과까지 확인한 것은 아니다.

문제 정의, 분류와 서체·색상의 최종 판단, 승인 단계의 업무 기준은 직접 정했다. 결과 검수와 수정 결정도 맡았다. AI는 카드 판독과 초기 분류안, 기획안 작성, 웹앱 구현과 테스트에 참여했다.