클로드 바이브 코딩으로 캔바 대체할 나만의 카드뉴스 에디터 만들기 시리즈 1

📌 이 글 요약

캔바 쓰기 귀찮아서 AI한테 카드뉴스 에디터 자체를 만들어달라고 했습니다. 프롬프트 2번이면 브라우저에서 바로 돌아가는 나만의 에디터가 완성됩니다.

📋 목차

1. 캔바 말고 직접 만든 이유
2. 1번째 프롬프트 — 기본 에디터 뽑기
3. 2번째 프롬프트 — 기능 한꺼번에 추가
4. 완성된 에디터 — v1 vs v2 비교

인스타그램에 뭔가를 올릴 때마다 캔바를 켭니다. 그때마다 똑같은 작업을 반복합니다. 색상 코드 입력, 로고 위치 조정, 폰트 다시 선택. 내용보다 세팅에 시간이 더 걸릴 때도 있습니다.

어느 날 이런 생각이 들었습니다. "캔바를 쓰는 게 아니라, 캔바 같은 프로그램 자체를 AI한테 만들어달라고 하면 어떨까?"

요즘 Claude로 이것저것 만들다 보니 이런 발상이 자연스럽게 떠올랐습니다. 이걸 바이브 코딩이라고 부르더군요. 코드를 직접 짜는 게 아니라, AI와 대화하면서 원하는 프로그램을 뽑아내는 방식입니다.

결론부터 말하면, 프롬프트 2번으로 브라우저에서 바로 쓸 수 있는 카드뉴스 에디터가 완성됐습니다. 내 브랜딩이 처음부터 고정되어 있고, 텍스트와 이미지만 바꾸면 바로 완성되는 구조입니다.

이 글에서 그 프롬프트 2개를 그대로 공개합니다.

첫 번째 프롬프트에서는 핵심 구조만 잡습니다. 세부 기능은 두 번째에서 한꺼번에 넣는 게 훨씬 깔끔합니다. 나눠서 요청하면 코드가 충돌하는 경우가 생깁니다.

인스타그램용 카드뉴스 에디터를 HTML 파일 1개로 만들어줘.
브라우저에서 바로 열어서 쓸 수 있어야 해.

기본 조건:
- 카드 크기는 정사각형 1080x1080 기준
- 왼쪽 편집 패널 + 오른쪽 미리보기 구조
- 브랜드명, 서브텍스트, 아이콘 색상은 고정값으로 미리 설정
- 카드마다 제목, 설명, 태그를 따로 입력 가능
- 이미지 업로드(드래그앤드롭 포함)
- PNG 다운로드 버튼
- 다크 UI, Noto Sans KR 폰트

브랜드 기본값:
- 이름: [브랜드명]
- 서브: [서브텍스트]
- 아이콘 색상: [색상코드]

브랜드명과 색상 코드 자리에 본인 것을 넣으면 됩니다. 저는 "풀어쓰는 사회학", "풀사샘·통합사회", #7c3aed를 넣었습니다.

이 프롬프트 한 번으로 텍스트 입력, 이미지 업로드, 기본 테마 3종이 들어간 에디터가 나옵니다. 쓸 수는 있지만 금방 한계가 보입니다.

📎 Claude로 다양한 도구를 만드는 사례는 → AI 수업자료 제작기 허브에서 확인하실 수 있습니다.

v1을 하루 써보고 나서 원하는 기능 목록을 정리했습니다. 이걸 두 번째 프롬프트에 한꺼번에 넣습니다. 핵심은 "한꺼번에"입니다. 기능별로 나눠서 요청하면 앞에서 만든 코드와 충돌이 생깁니다.

아래 기능을 전부 한꺼번에 추가해서 완성본으로 다시 만들어줘.

추가 기능:
- 테마 19종 (dark/light/purple/blue/ocean/mint/warm/rose/sunset/
  forest/slate/charcoal/coral/lavender/peach/neon/gold/gradient/custom)
- 색상 직접 선택 (태그 배경, 글자색, 아이콘색 각각 color picker)
- 글자 크기 슬라이더 (태그/제목/중제목/설명 각각)
- 이미지 최대 4장, 카드별로 다르게
- 이미지 크기 조절 슬라이더 (10~300%)
- 레이아웃 선택 (center/top/bottom/image-bg)
- 카드 추가/삭제/복제
- JSON 가져오기/내보내기
- 브랜드 설정 탭 (카드별 개별 편집 가능 + 전체 통일 버튼)
- 인스타 캡션 입력란 + 복사 버튼 (텍스트 탭 하단)
- PNG 저장 (현재 카드 / 전체 ZIP)
- 페이지 번호 표시 토글
- 프리셋 4종 (수업자료 홍보 / 웹교구 소개 / 수업팁 / 자유)

이 프롬프트 한 번으로 v1 대비 기능이 대폭 늘어납니다. 테마 19종, 글자 크기 슬라이더, 이미지 300%까지 확대, 브랜드 전체 통일 버튼, 인스타 캡션 입력란까지 들어갑니다.

캡션 입력란은 나중에 추가한 기능인데, 생각보다 유용합니다. 카드 만들 때 해시태그랑 소개글도 같이 써두면 인스타에 올릴 때 바로 복붙이 됩니다.

혹시 본인 브랜드로 만들고 싶다면, 위 프롬프트에서 브랜드 기본값만 바꾸면 됩니다. 나머지 기능은 그대로 씁니다.

📎 완성된 에디터에 JSON 자동화를 붙이는 과정은 → 2편: JSON 자동화와 Claude 스킬 제작에서 이어집니다.

v1은 "이런 구조가 가능하구나"를 확인하는 단계입니다. v2에서 실제로 쓸 수 있는 도구가 나옵니다. 지금 제가 실제로 인스타 홍보에 쓰고 있는 에디터가 이 v2 기반입니다.

다음 편에서는 여기에 JSON 자동화를 붙입니다. Claude한테 주제 한 줄 던지면 JSON이 나오고, 에디터에 붙여넣으면 카드뉴스가 자동으로 세팅됩니다. 제작 시간이 15분에서 3분으로 줄어드는 과정을 보실 수 있습니다.

📎 Claude로 만드는 다양한 자동화 도구 사례 → AI 수업자료 제작기 시리즈 허브

더 많은 AI 자동화 도구 제작 사례 보기

📌 나만의 카드뉴스 에디터 만들기 시리즈

• 1편 (현재): 바이브 코딩으로 에디터 만들기 — 프롬프트 2개 공개
• 2편: JSON 자동화와 Claude 스킬 제작 — 15분 → 3분
• 3편: Claude 카드뉴스 스킬 공개 — 누구나 쓸 수 있는 인스타 자동화
• 4편: JSON 대량 처리 자동 생성기 심화편 (예정)

풀어쓰는 사회학AI | 메인 허브 | AI 수업자료 제작기