---
title: 3일차 강의노트
tags:
  - 강의자료
  - AI에이전트크리에이터
  - 마케팅콘텐츠자동화
  - 바이브코딩
  - 미리캔버스
  - CELAI
created: 2026-09-30
---

# 3일차 강의노트
## 마케팅 콘텐츠 자동화 Ⅰ — 이미지 편집 도구와 AI 가상 인플루언서

### 학습목표
- 이미지 규격 변환처럼 반복적인 콘텐츠 제작 업무를 자동화 웹앱으로 직접 만들 수 있다.
- AI 가상 인플루언서로 상품 콘텐츠를 생성하는 흐름을 이해한다.
- 플랫폼별 톤에 맞춘 SNS 콘텐츠 유통 전략을 수립할 수 있다.

오늘은 콘텐츠 제작·유통과 관련된 두 가지 실습을 진행한다. 하나는 미리캔버스에 올릴 이미지 요소를 자동으로 변환해주는 도구를 직접 바이브 코딩으로 만들어보는 것이고, 다른 하나는 CELAI라는 AI 가상 인플루언서 프로그램으로 콘텐츠를 만들고 SNS에 자동으로 올리는 것이다.

## 1. 미리캔버스 사진요소 변환기 바이브 코딩으로 만들기

**배경**: 미리캔버스 "사진 요소"로 올리려면 규격(사이즈, 해상도, 비율, 포맷)에 맞춰 이미지를 손질해야 한다.

**핵심 기능**:
- 이미지 업로드 → 자동 변환 파이프라인: 사이즈 보정(가로/세로 2700~9800px, 비율 유지) → 해상도 130DPI 메타데이터 기록 → JPG로 자동 변환 → 출력 비율과 크롭 여부 확인
- 여러 이미지 동시 업로드/변환, 개별 다운로드 + ZIP 전체 다운로드
- 드래그&드롭 업로드, 크로스브라우저 대응 파일 선택 버튼
- guide/about/contact/privacy 페이지, SEO(sitemap, robots.txt), Google AdSense 연동까지 포함해 실제 서비스로 배포

**예시 프롬프트**:
```
미리캔버스 "사진 요소" 등록 규격에 맞춰 이미지를 자동 변환하는 웹앱을 만들어줘.
- 이미지를 업로드하면 가로/세로 2700~9800px 범위로 비율을 유지하며 리사이즈
- JPG로 자동 변환하고, 해상도 메타데이터에 130DPI를 기록
- 비율은 원본을 보존하며, 제출하려는 콘텐츠 유형의 공식 규격에 명시된 경우에만 크롭
- 여러 장을 한꺼번에 처리하고, 개별 다운로드와 전체 ZIP 다운로드를 모두 지원해줘
```

**추가로 요청해볼 수 있는 것**:
- "이용 가이드/사이트 소개/문의/개인정보처리방침 페이지도 만들어서 실제 서비스처럼 배포하고 싶어"
- "Vercel로 배포해줘"
- "Google AdSense 코드랑 ads.txt도 넣어줘"

## 2. 미리캔버스 PNG요소 변환기 바이브 코딩으로 만들기

**배경**: 캐릭터 등 "PNG 요소"를 미리캔버스 기여자 규격으로 등록하려면 배경 투명화, 여백 없는 크롭, PNG 포맷, 규격을 확인해야 한다. 수업에서는 130dpi·800~9800px를 연습 설정으로 사용한다. 공식 PNG 요소 안내의 최소치는 120dpi·700px이며 최대치는 9800px다(2026-10-12 확인).

**핵심 기능**:
- `@imgly/background-removal`로 브라우저 안에서 AI 배경 제거(서버 전송 없이 클라이언트에서만 처리)
- 알파 채널을 스캔해 불투명 영역의 바운딩 박스를 계산 → 여백 없이 자동 크롭
- 가로·세로가 800~9800px 범위 안에 들도록 비율 유지 스케일링
- PNG `pHYs` 청크를 직접 작성해 130dpi 메타데이터 삽입
- 다중 파일 업로드 → 큐에 쌓아 2개씩 병렬 처리, 개별 다운로드 + ZIP 전체 다운로드

**예시 프롬프트**:
```
캐릭터 PNG 이미지를 미리캔버스 기여자 요소 규격에 맞게 자동 변환하는 웹앱을 만들어줘.
- 배경을 브라우저에서 AI로 자동 제거(서버 전송 없이)
- 캐릭터 영역만 남기고 여백 없이 자동 크롭
- 가로/세로 800~9800px 범위에 맞게 비율 유지 리사이즈
- PNG로 저장하면서 해상도 메타데이터에 130dpi를 기록
- 여러 장을 동시에 업로드해서 처리하고, 개별/전체(zip) 다운로드를 지원해줘
```

**추가로 요청해볼 수 있는 것**:
- "배경 제거 처리 진행률을 카드마다 %로 보여줘"
- "규격을 벗어난 이미지는 카드에 경고 문구를 표시해줘"
- "타입스크립트로 만들고 타입 체크까지 통과하는지 확인해줘"

### 1·2번 실습 공통 진행 순서
1. 프로젝트 폴더를 하나 만든다(예: `미리캔버스변환기`)
2. 터미널에서 `cd 미리캔버스변환기` 후 `claude` 실행
3. 위 예시 프롬프트를 참고해 원하는 기능을 설명
4. 결과물을 브라우저로 열어 실제 이미지로 테스트해보고, 부족한 부분은 이어서 요청
5. 실제 배포까지 해보고 싶다면 Vercel 배포 절차를 참고

> [!tip]
> 아래 수치는 공식 최소 규격이 아닌 수업용 출력 설정이다. "사진 요소"(JPG, 2700~9800px, 130dpi, 특정 비율)와 "PNG 요소"(배경 투명, 800~9800px, 130dpi)로 규격이 서로 다르다는 점에 유의한다.

<!-- lecture-diagram:start day-3-1 -->
**그림으로 정리 · 사진 요소와 PNG 요소는 처리 방법이 달라요**

![사진 요소와 PNG 요소는 처리 방법이 달라요](assets/diagrams/day-03-1.svg)

수업용 출력 설정 예시입니다. 제출 전 공식 규격을 확인하세요. 사진은 크기·비율, PNG는 투명 배경과 여백 제거가 핵심입니다.
<!-- lecture-diagram:end -->

## 3. CELAI를 활용한 AI 가상 인플루언서 만들기

CELAI는 PC에 설치해서 쓰는 프로그램으로, 상품 URL만 넣으면 AI가 모델 착장 이미지, 영상, 대본, 음성까지 만들어주는 콘텐츠 자동화 툴이다.(설치 전 현재 지원 OS와 제공 기능 확인)

**기본 흐름**:
1. CELAI의 현재 지원 환경 확인 후 설치
2. 네이버·쿠팡·알리익스프레스 등에서 판매 중인 상품 URL 입력 → 상품 정보·이미지 자동 수집
3. AI 모델에게 해당 상품을 착장시킨 이미지 생성
4. 배경 변경, 영상 제작, 대본·음성(더빙) 자동 생성

동일한 캐릭터로 여러 상품을 반복 생성하면 하나의 "가상 인플루언서 계정"으로 운영할 수 있다.

**실습 포인트**:
- 처음에는 상품 1개로 전체 흐름(이미지 → 영상 → 대본/음성)을 한 번 끝까지 따라가 본다.
- 같은 AI 모델(캐릭터)을 여러 상품에 반복 적용해 일관된 톤의 인플루언서 이미지를 만든다.

## 4. CELAI를 활용한 블로그, 인스타 등 SNS 자동포스팅

CELAI는 생성한 콘텐츠를 각 플랫폼에 맞는 형태로 만들어준다.

- **인스타그램**: 피드, 릴스, 스토리용 포맷
- **유튜브**: 쇼츠, 일반 영상용 포맷
- **네이버 블로그**: 글+이미지 포스팅용 포맷
- **틱톡**: 숏폼 영상 포맷

**실습 흐름**:
1. 3번에서 만든 가상 인플루언서 콘텐츠를 플랫폼별 포맷으로 내보내기
2. 각 SNS 계정에 자동(또는 반자동) 업로드 설정
3. 업로드 주기를 정해두고 반복 발행(예: 주 3회 인스타 릴스 + 주 1회 블로그 글)

**실습 팁**:
- 처음에는 자동 업로드 전에 결과물을 직접 눈으로 확인하는 단계를 꼭 거친다.
- 플랫폼마다 톤(블로그는 정보성, 릴스는 짧고 임팩트 있게)이 다르므로 같은 콘텐츠라도 포맷별로 문구를 다르게 다듬는 게 좋다.
- 저작권·초상권 문제가 없는 상품 이미지·소스만 사용한다.

<!-- lecture-diagram:start day-3-2 -->
**그림으로 정리 · 상품 하나에서 플랫폼별 콘텐츠까지**

![상품 하나에서 플랫폼별 콘텐츠까지](assets/diagrams/day-03-2.svg)

같은 캐릭터를 유지하되, 게시할 플랫폼에 맞춰 형식과 문구를 바꿉니다.
<!-- lecture-diagram:end -->

## 오늘 실습 팁
- 바이브 코딩 도구는 이미지 파일을 다루므로, 테스트용 샘플 사진을 몇 장 미리 준비해두면 실습이 빠르다.
- CELAI는 설치형 프로그램이라 PC 사양(특히 그래픽 처리)에 따라 생성 속도가 달라질 수 있다.
- 자동포스팅을 걸기 전에는 항상 결과물을 검수하는 단계를 넣는 것이 안전하다.

## 오늘의 실습 산출물
- 이미지 변환기 웹앱
- 가상 인플루언서 샘플 콘텐츠

## 참고 자료
- [셀라이 CELAI 공식 사이트](https://www.celaigo.com/)
- [미리캔버스 요소 프레임 사용 가이드](https://help.miricanvas.com/hc/ko/articles/360021771772)

## 관련 노트
- [[2일차_강의노트]]
- [[4일차_강의노트]]


## 실습 검증과 문제 해결

### 이미지 변환 품질 확인

- **직접 해볼 일**: 원본 이미지 한 장을 복사한 뒤 수업용 크기로 변환한다.
- **예상 결과와 판정 기준**: 가로·세로 픽셀과 비율을 확인하고, 투명 PNG는 밝고 어두운 배경 위에서 가장자리를 확인한다.
- **오류를 좁히는 방법**: DPI 메타데이터만 바꾸어도 실제 픽셀과 선명도는 증가하지 않는다. 억지 확대와 불필요한 크롭을 구분한다.

이 항목은 교육용 검증 시나리오이며 실제 실행 성공·수익·플랫폼 승인을 보고하는 사례가 아니다. 결과 화면과 수정 내용을 기록하면 다음 실습에서 같은 오류를 줄일 수 있다.

## 자료 업데이트 안내

2026-10-12 주요 설명 보완. 설치 명령·계정별 기능·요금과 심사 규정은 실행 시점의 공식 문서를 다시 확인한다.

- [미리캔버스 PNG 요소 규격](https://miricanvas-designhub.zendesk.com/hc/ko/articles/20412918293529)
- 강의 내용 문의 및 오류 신고: [라인블록](mailto:lineblock55@gmail.com)