기술 오픈 소스화: 샤오홍슈와 위챗의 일러스트레이션 문제를 완벽하게 해결하다

얼마 전, 저는 guizang-ppt-skill을 오픈소스로 공개했고, 이후 직접 콘텐츠를 만들면서 한 가지를 발견했습니다.

이걸로 생성한 웹 페이지를 스크린샷해서 이미지-텍스트 플랫폼에 올렸더니, 제가 직접 만든 레이아웃보다 훨씬 좋은 반응과 데이터를 얻었습니다.

여러분도 아마 3:4 비율의 카드 이미지를 만들어 주는 프롬프트나 Skill을 본 적이 있을 겁니다.

그거 거의 다 비슷한 느낌이죠. Tailwind 스타일, 큰 색 블록, 이모지 잔뜩, 평범한 폰트 계층 구조.

보고 나면 AI가 만든 이미지-텍스트 카드가 왜 한눈에 티가 나는지 대충 알겠습니다. 웹 페이지를 만들고 있지, 잡지를 만들고 있지 않기 때문입니다.

이미지-텍스트 카드는 PPT와 완전히 다른 존재입니다. 세로 화면, 정보 흐름에서 멈출지 말지 1초 만에 결정하는 환경, 글자보다 그림에 의존하는 방식.

레이아웃도 다르고, 리듬도 다르고, 독자도 다릅니다.

그래서 PPT Skill에서 분리해서 독립형 guizang-social-card-skill(https://github.com/op7418/guizang-social-card-skill)로 만들었습니다.

아래에서 이게 왜 좋은지, 그리고 제가 왜 이렇게 시간을 쏟았는지 이야기해보겠습니다.

2. 도대체 왜 좋은가?

3:4 세로 이미지는 이미지-텍스트 카드의 주요 전장입니다. 이 Skill의 디자인 에너지 대부분은 3:4 비율, 즉 폰트 계층 구조, 레이아웃 비율, 줄바꿈 규칙에 집중되었습니다.

모바일 정보 흐름에서 스와이프하며 소비되는 실제 시나리오에 맞춰 모든 것을 조정했습니다. 21:9와 1:1 위챗 공식 계정 헤더 이미지도 지원합니다.

이미지-텍스트 크리에이터가 가장 신경 쓰는 부분부터 시작하죠.

2.1 작성 중인 내용을 구분하고 적절한 스타일을 매칭합니다

이미지-텍스트 플랫폼의 콘텐츠는 카테고리가 나뉩니다. 영화 리뷰와 제품 리뷰는 완전히 다른 비주얼 언어가 필요합니다.

여행 일기와 직장 팁은 다른 레이아웃을 사용해야 하죠.

하지만 대부분의 AI 도구는 이런 걸 신경 쓰지 않습니다. 뭘 쓰든 똑같은 템플릿을 씁니다.

결과적으로 모든 사람의 카드가 위챗 공식 계정 커버 조립 라인에서 나온 것처럼 보이게 됩니다.

이 Skill에는 11가지 일반적인 이미지-텍스트 카테고리에 대한 적응 규칙이 내장되어 있습니다.

여행 / 라이프스타일: 매거진 스타일, 따뜻한 색감, 전체 화면 이미지, 큰 세리프 제목
직장 / 팁 / 비즈니스 인사이트: 그리드 스타일, 어두운 배경, 데이터 중심 포스터 레이아웃
영화 / 문화: 쿨톤 매거진 스타일, 영화 포스터 레이아웃, 인물 클로즈업 우선
제품 리뷰 / 디지털: 그리드 스타일, 비교 표, 기기 프레임 스크린샷
독서 / 노트: 매거진 스타일, 세리프 폰트, 중앙 정렬 인용문 레이아웃, 최대 여백
음식 / 맛집: 고채도 매거진 스타일, 위에서 내려다본 샷 우선, 텍스트는 모서리로 이동

여행 블로거를 위해 특별히 지도 컴포넌트도 만들었습니다. 여기에 가게 위치와 여행 경로를 표시하면 AI가 자동으로 주석을 생성해 줍니다.

같은 텍스트를 넣고 영화 리뷰라고 알려주면 영화 포스터 스타일의 카드를 만들어 줍니다. 제품 리뷰라고 알려주면 기기 프레임이 있는 비교 차트를 만들어 줍니다.

더 중요한 점은 명확한 "금지 구역"이 있다는 것입니다.

팬 중심 콘텐츠: 필요한 비주얼 언어가 완전히 다릅니다.
순수 홍보 광고: 내용을 강조하는 디자인 철학과 모순됩니다.
12화면을 초과하는 긴 튜토리얼: 이미지-텍스트 형식은 긴 튜토리얼에 최적의 전달 매체가 아닙니다.

이러한 시나리오에서 Skill은 처음부터 "다른 도구를 사용하는 것이 좋겠습니다"라고 알려줍니다.

일부러 이렇게 남겨두었습니다. 경계는 기능 자체보다 더 제품을 정의합니다. 모든 것을 다 하려는 Skill은 결국 아무것도 제대로 하지 못하는 경우가 많습니다.

2.2 이미지 위에 텍스트를 배치하는 방법

이미지 위에 텍스트를 얹는 것은 이미지-텍스트 카드에서 가장 어려운 부분이자, "AI 느낌"이 가장 쉽게 드러나는 부분입니다.

잘못하면 세 가지 유형의 실패가 발생합니다.

텍스트가 얼굴이나 제품의 중심을 가립니다.
밝은 배경에 흰색 텍스트, 어두운 배경에 검은색 텍스트는 가독성이 떨어집니다.
텍스트가 이미지 전체를 차지하여 아름다운 구도를 망칩니다.

Skill은 이 문제를 세 단계로 처리합니다.

이미지의 피사체(얼굴, 제품, 텍스트가 많은 영역)를 식별하고 레이아웃에서 자동으로 회피합니다.
텍스트가 놓일 영역의 색상과 밝기를 계산하여 텍스트 색상, 마스크 추가 여부, 그림자 깊이를 결정합니다.
적응형 폰트 크기 및 줄바꿈: 텍스트 영역 크기에 따라 폰트 크기와 줄바꿈 위치를 동적으로 조정하며, 넘칠 것이 뻔한 하드코딩된 폰트 크기를 사용하지 않습니다.

이러한 규칙 덕분에 카드의 "고급스러움"이 확립됩니다. 독자는 "텍스트가 얹혀졌다"는 느낌과 "원래 거기 있었다"는 느낌을 구분하지 못합니다.

2.3 이미지는 어디서 오는가: 다른 AI 카드 도구와의 가장 큰 차이점

이미지-텍스트 카드를 생성하는 대부분의 AI 도구는 사용자가 직접 이미지를 업로드하거나, 이모지로 대체하거나, 한눈에 AI 티가 나는 일러스트레이션을 생성하게 합니다.

결과적으로 직접 이미지를 찾는 건 너무 힘들고, 이모지를 잔뜩 넣으면 가짜 같아 보입니다.

이 Skill은 기본적으로 세 가지 무료 상업용 이미지 라이브러리에 연결됩니다.

Pexels: 중국어 검색 지원, 일반적인 시나리오에 적합
Unsplash: 가장 강력한 사진 질감, 인물, 생활, 공간 콘텐츠에 최고
Wallhaven: 게임, 사진, 배경화면이 모두 있지만 저작권이 복잡함

텍스트 문단의 의미를 기반으로 검색어를 자동으로 생성하고, 이미지를 검색한 후 레이아웃에 맞게 잘라냅니다. 얼굴이나 피사체가 잘리지 않도록 합니다.

결과적으로 컬러 블록 카드가 아닌 실제 사진이 담긴 카드를 얻을 수 있습니다.

또한 저작권 문제가 완전히 없는 이미지만 고집하지는 않습니다. 어떤 이미지를 찾았는지 알려주고, 저작권이 불분명한 이미지는 사용자가 직접 결정할 수 있도록 합니다.

게다가 플랫폼은 현재 AI 워터마크에 매우 엄격합니다. 지금 사용하는 대부분의 AI 생성 이미지에는 워터마크가 있으며, 플랫폼에서 이를 감지하면 섀도우밴(노출 제한)으로 이어질 수 있습니다. 이는 주요한 문제점입니다.

2.4 스크린샷도 이미지다: 4종 미용

많은 콘텐츠는 사진을 사용할 수 없고 소프트웨어 스크린샷, 채팅 기록, 제품 인터페이스가 필요합니다.

Skill에는 스크린샷 미용 기능이 내장되어 있습니다.

macOS/iOS 스타일의 기기 프레임(브라우저 창 또는 휴대폰 테두리)을 추가하고, 스크린샷을 담을 다양한 배경 질감(모눈종이, 도트 매트릭스, 따뜻한 흰색, 어두운 색상)을 사용하여 스크린샷이 하얀 배경에 둥둥 떠 있지 않도록 합니다.

동시에 비주얼 스타일에 따라 그림자 레이어와 모서리 반경 매개변수를 자동으로 매칭합니다. 두 가지 스타일 각각에 스크린샷 레시피가 있어 수동 조정 없이 일관성을 유지합니다.

간단히 말해, 찍은 아무 스크린샷이나 거치면 공식 제품 홍보 이미지처럼 보이게 됩니다.

2.5 AI 이미지 생성: 절제된 사용

이전의 모든 이미지 소스가 적합한 자료를 찾지 못했을 때만 Skill이 AI 이미지 생성을 호출합니다.

이미지를 생성할 때는 "뻔한 AI 일러스트"의 평범함을 피하기 위해 스타일 제약 단어를 강제로 추가합니다.

AI를 사용하여 모든 이미지-텍스트 카드를 마치 자매처럼 보이게 만들기보다는, AI를 덜 사용하는 편이 낫습니다. 이는 AI 이미지 사용으로 인한 콘텐츠 노출 저하를 방지하는 데도 도움이 됩니다.

2.6 비주얼 시스템: 두 가지 스타일 + 28가지 레이아웃 골격

제 이전 PPT Skill에 익숙한 분들은 익숙할 것입니다. 이 두 가지 비주얼 시스템과 레이아웃 골격은 PPT Skill에서 가져와 이미지-텍스트 카드 맥락에 맞게 조정하고 재보정했습니다.

자세한 내용은 반복하지 않겠지만, 이미지-텍스트 카드 맥락에서 어떻게 보이는지 보여드리겠습니다.

두 가지 비주얼 시스템:

매거진 스타일: The New Yorker나 상하이 번역 출판사 표지에서 보는 타이포그래피. 넉넉한 여백, 큰 세리프 제목, 비대칭 레이아웃, 숨 쉴 공간이 있는 텍스트.
그리드 스타일: Massimo Vignelli와 Helmut Schmid의 스위스 그래픽 디자인 계통. 강력한 그리드, 산세리프 폰트, 기하학적 느낌, 절제되지만 정확한 색상 사용.

28가지 레이아웃 골격은 제가 지난 10년간 본 잡지, 포스터, 앨범 커버, 영화 포스터 중에서 엄선한 것들입니다. 까다로운 기준을 통과한 것들이죠.

AI는 여전히 "자유로운 레이아웃 디자인"에 미흡합니다. 검증된 골격을 제공함으로써 AI의 과제는 "디자인"에서 "채우기"로 격하되고, 완성품의 안정성은 즉시 향상됩니다.

10가지 테마 색상 팔레트, 고정된 폰트 페어링, 제한된 아이콘 라이브러리 등 자세한 내용은 일일이 나열하지 않겠습니다.

논리는 동일합니다. 제약은 장애물이 아니라 기준선입니다.

콘텐츠 크리에이터에게 무한한 색상 선택권을 주면 못생긴 것을 만들 가능성이 더 높아집니다. 검증된 10가지 팔레트를 주면 괜찮은 것을 만들 확률이 100%에 가까워집니다.

3. 왜 이런 작업을 하는가?

3.1 디자인 관점: 잡지 느낌이 매우 효과적이다

왜 더 "현대적인" 카드 디자인이 아니라 매거진과 그리드 스타일을 선택했을까요?

이미지-텍스트 카드의 본질은 인쇄된 포스터, 화보, 앨범 커버와 동일합니다. 정적 이미지를 사용하여 1초 안에 낯선 사람이 멈추도록 설득하는 것입니다. 잡지와 포스터는 지난 백 년간 이에 대해 철저히 연구해 왔습니다.

웹 디자인 언어는 스크롤 가능하고 상호작용적인 시나리오를 위해 만들어졌습니다. 이를 정적 이미지로 옮기면 어색해 보이고 정보가 평면적으로 느껴집니다.

따라서 이 Skill의 모든 비주얼 결정에 대한 "이유"는 다음과 같습니다.

왜 넉넉한 여백을 사용하는가? 여백은 잡지가 "초점은 여기입니다"라고 알려주는 방식입니다.
왜 세리프 폰트를 우선시하는가? 세리프 폰트는 큰 크기에서 인쇄물의 무게감을 지닙니다.
왜 비대칭 레이아웃을 사용하는가? 비대칭은 시각적 리듬을 만들어 눈이 어디를 먼저 봐야 하는지 알려줍니다.
왜 색상을 절제하는가? 소셜 미디어 피드에서 절제된 팔레트는 오히려 고채도보다 더 눈에 띕니다. 주변의 "시끄럽게 외치는" 카드들 사이에서 두드러집니다.

이러한 결정들은 "추상적으로" 들리지만, 모두 코드 속의 구체적인 상수입니다. 폰트 크기 비율, 여백 비율, 그리드 열 개수, 대비 임계값, 줄바꿈 규칙. 이러한 상수들이 이 Skill의 진정한 해자(moat)입니다.

3.2 제품 관점: 단순한 프롬프트가 아닌 제품이다

이렇게 많은 Skill을 만들어 오면서 "Skill이 실제로 무엇인지"에 대한 나름의 판단을 형성했습니다.

Skill은 본질적으로 작은 제품입니다.