카드뉴스 AI 스튜디오는 이미 잘 작동하고 있었습니다. 슬라이드 콘텐츠(소제목·핵심문구·본문·하단강조박스)와 해시태그 5개까지 버튼 한 번으로 뽑아내고, PNG·ZIP 다운로드까지 완비된 상태였습니다.
문제는 그다음이었습니다. 실제로 인스타그램·스레드·틱톡에 업로드하려면 이미지 밖에 별도로 붙는 캡션(게시물 본문)이 필요한데, 이 부분은 매번 수작업으로 따로 쓰고 있었습니다. 카드 이미지가 이미 정보를 담고 있다 보니 놓치기 쉬운 부분이었는데, 사실 이미지와 캡션은 SNS에서 완전히 다른 역할을 합니다. 캡션은 스크롤을 멈추게 하는 훅이자, 알고리즘에 걸리는 텍스트이자, 플랫폼마다 다른 톤으로 반응을 유도하는 장치니까요.
카드뉴스 스튜디오 안에 "SNS 캡션" 섹션을 새로 추가했습니다. 버튼 하나로 Instagram·Threads·TikTok 세 플랫폼용 캡션을 동시에 생성하고, 플랫폼별로 다른 톤을 각각 적용했습니다.
Instagram: 스크롤을 멈추는 훅으로 시작 → 핵심 요약 → 저장·공유 유도 문구, 존댓말 Threads: 짧고 캐주얼한 대화체 TikTok: 짧은 후킹 문장 + 핵심 한 줄, 해시태그는 이미 별도 필드에 있으니 본문엔 중복 배제
소소한 뒷이야기
구현 과정에서 Antigravity가 만든 diff 보고서의 백틱 문자가 실제 코드 파일에도 잘못 이스케이프되어 들어가면서 빌드가 깨지는 일이 있었습니다. 에러 메시지만 보면 당황스러울 수 있는데, 실제로는 템플릿 리터럴 문법 하나가 깨진 단순한 문제였습니다. "보고서에 적힌 diff와 실제 파일 내용이 항상 같지는 않다"는 걸 다시 한번 확인한 순간이었습니다.
배운 점
기능을 만들 때 "무엇을 만들까"만큼 중요했던 건 "어디서 나눌까"였습니다. 카드 콘텐츠와 캡션을 같은 호출에 합칠 수도 있었지만, 재생성 유연성을 위해 굳이 분리한 이 결정이 결과적으로 더 다루기 쉬운 구조를 만들었습니다.
가장 먼저 정해야 했던 건 "카드 콘텐츠를 만들 때 캡션도 같이 뽑을지, 완전히 별도로 분리할지"였습니다. 같은 호출에 합치면 API 비용은 아끼지만, 카드 슬라이드를 수정한 뒤 캡션만 다시 뽑고 싶을 때도 전체를 재생성해야 하는 문제가 생깁니다.
그래서 별도 액션으로 분리했습니다. 카드 콘텐츠가 확정된 뒤, 그 최종 슬라이드 텍스트와 해시태그를 컨텍스트로 넘겨받아 캡션을 만드는 구조입니다. 카드 재생성과 캡션 재생성을 독립적으로 컨트롤할 수 있다는 게 이 구조의 핵심입니다.
저장은 card_news_drafts 테이블에 captions(jsonb) 컬럼 하나를 새로 추가하는 방식으로 처리했습니다. 이전에 있던 "스키마 추가를 피하려고 다른 필드 안에 값을 몰래 끼워 넣는" 방식은 이번엔 반복하지 않고, 정식 컬럼으로 정리했습니다.
같은 카드뉴스 콘텐츠(계약서 분석 자동화 관련)로 세 플랫폼 캡션을 동시에 생성해봤습니다.
Instagram: "계약서 한 장, 매번 손으로 옮겨 적으셨나요?"로 시작해 핵심 포인트를 나열하고, "나중에 다시 보고 싶다면 저장!"으로 마무리 Threads: "계약서 매번 손으로 옮겨 적는 거, 이제 그만해도 될지도?"처럼 짧고 반말 대화체 TikTok: "계약서 하나로 PM 업무 자동화 진짜 될까? 직접 검증해봄"처럼 후킹형 한 줄
세 플랫폼 모두 지시한 톤 차이가 뚜렷하게 재현됐고, dev·prod 환경 양쪽에서 동일하게 확인했습니다. 새로고침 후에도 저장된 캡션이 정상적으로 다시 불러와지는 것까지 검증했습니다.
관련 프로젝트
프로젝트 개요 기획자(PM)로서 AI를 활용한 업무 자동화(AX) 사례를 문서화하는 개인 포트폴리오 사이트입니다. 국내 기업의 AX 기획자/AI PM 직군으로의 커리어 전환을 목표로, 사이트 자체가 채용 지원용 스토리텔링 자료로 실사용되고 있습니다. 핵심 패턴: 업무 병목 발견 → AI로 워크플로우 재설계 → Before/After·근거·재현 가능성 문서화 전체 서사는 '실행하지 않은 아이디어 나열'이 아니라, 하나의 검증된 자동화 패턴과 도메인별 확장 블루프린트를 갖춘 재사용 가능한 엔진을 보유하는 방향으로 수렴하고 있습니다. 기술 스택 Next.js 16, Tailwind CSS v4, TypeScript Supabase (개발/운영 환경 분리), Vercel, Resend Claude API 기반 기술 자문 및 프롬프트 설계 보안 아키텍처 관리자 CRUD는 세션 기반 인증과 RLS(Row Level Security)로 보호 공개 읽기 전용 경로는 별도의 익명 클라이언트로 분리 서비스 롤 키는 애플리케이션 코드에서 완전히 배제 권한 검증은 마이그레이션 파일 및 대시보드 검토를 통해서만 진행 작업 방식 (에이전틱 IDE 협업 워크플로우) AI 에이전트 기반 IDE가 파일/버전관리 작업을 담당하고, LLM은 기술 자문 및 프롬프트 작성 역할을 수행하는 협업 구조를 운영합니다. AI 자문 → 에이전트용 프롬프트 작성 → 실행자가 붙여넣기 → 계획 확인 → 자문 검토 → 실행 승인 → 로그 검토 → 직접 클릭 테스트 → 명시적 지시 시에만 커밋 통제 규칙 실행 전 계획 검토 필수 요약 보고가 아닌 직접 클릭 테스트로 검증 개발 환경 우선 적용 후 명시적 승인 하에 운영 환경 반영 커밋은 명시적 지시가 있을 때만 수행 DB 자격증명 직접 연결 및 범위 외 삭제 금지 브랜치 전략: 개발 브랜치에서 작업 후 운영 브랜치는 배포 전용으로 직접 커밋 금지, 병합 전 변경 범위 검증 현재 진행 상황 고객사 미팅 브리핑 자동화 사례: 1단계 완료, 개발/운영 환경 배포 및 실데이터 테스트 완료 범위 변경 감지 자동화 사례: 상태 확인 진행 중 리스크 조기 경보 자동화 사례: 운영 환경 배포 완료 보안 사고 관련 포스트: 'AI 리스크 거버넌스 사례'로 재구성 예정 AI 활용 관련 콘텐츠 시리즈 초안 작성 완료, 게시 미확정 핵심 학습 원칙 보고가 아닌 검증: 버그·보안 이슈는 항상 직접 로그/브라우저 검토를 통해서만 발견되며, 에이전트의 자체 결과 요약을 그대로 신뢰하지 않음 보안 사고의 콘텐츠화: 실제 발생한 권한 관련 이슈 사례를 케이스 스터디로 재구성하여 콘텐츠화 커밋 의미 분리: 기능 단위/변경 유형별로 항상 분리 커밋 자동화하지 않는 것도 스토리: 저사용 빈도 기능을 의도적으로 고도화하지 않은 결정 자체를 AX 스토리텔링 소재로 활용