1. 배경: 왜 매뉴얼이 필요했나

Table.in(테이블인)은 인스타그램·유튜브 인플루언서 검색, 분석, 캠페인 관리까지 올인원으로 제공하는 AI 마케팅 플랫폼입니다. 기능이 빠르게 늘어나면서, 고객 온보딩과 CS 문의 대응에 체계적인 서비스 매뉴얼이 필수적이었습니다.

매뉴얼 제작에는 현실적인 어려움이 있었습니다:

• 9개 대분류, 30개 이상 세부 항목 — 방대한 콘텐츠 분량
• 38장의 실제 서비스 스크린샷 촬영 및 정리 필요
• 브랜드 디자인 시스템에 맞는 일관된 UI 구현
• 반응형 레이아웃 + 스크롤 스파이 TOC 네비게이션

전통적인 방식이라면 기획 → 디자인 → 퍼블리싱 → 콘텐츠 작성까지 최소 1~2주가 소요될 작업이었습니다.

2. 해결 전략: AI + 자동화 파이프라인

우리는 Claude Code(AI 코딩 에이전트)와 Playwright(브라우저 자동화)를 결합해 작업 효율을 극대화했습니다.

1 Playwright로 스크린샷 자동 촬영

수동으로 38장의 스크린샷을 찍는 대신, Playwright 스크립트로 각 서비스 페이지를 자동 방문하여 일관된 해상도(1440×900)로 캡처했습니다.

// Playwright 스크린샷 자동화 예시
const { chromium } = require('playwright');

const browser = await chromium.launch({ headless: true });
const page = await browser.newPage({ viewport: { width: 1440, height: 900 } });

// 각 서비스 페이지를 순회하며 스크린샷 촬영
const pages = [
  { url: '/instagram/search', name: '인스타그램-검색' },
  { url: '/youtube/home', name: '유튜브-대시보드' },
  { url: '/campaign', name: '캠페인-목록' },
  // ... 총 38개 페이지
];

for (const p of pages) {
  await page.goto(baseUrl + p.url, { waitUntil: 'networkidle' });
  await page.waitForTimeout(2000);
  await page.screenshot({
    path: `./public/_asset/images/manual/${p.name}.png`,
    fullPage: false
  });
}

이점:

• 일관된 뷰포트 크기와 해상도
• 한국어 로케일 설정으로 날짜/숫자 포맷 통일
• networkidle + 대기 시간으로 비동기 데이터까지 완전 로딩 후 촬영
• 디자인 변경 시 스크립트 재실행만으로 전체 갱신 가능

2 Claude Code로 매뉴얼 콘텐츠 + UI 생성

Claude Code에게 서비스의 기능 구조와 디자인 시스템을 컨텍스트로 제공하고, 매뉴얼 페이지 전체를 생성하도록 했습니다.

// Claude Code가 생성한 매뉴얼 컴포넌트 구조
components/manual/
  ├── SectionHeader.vue    // 섹션 제목 + 구분선
  ├── ScreenshotImage.vue  // 스크린샷 이미지 + 캡션
  └── FeatureCard.vue      // 기능 소개 카드

pages/manual/
  └── index.vue            // 871줄 — 전체 매뉴얼 페이지

핵심 요청 사항:

1. 기존 디자인 시스템(브랜드 컬러 #FD115C, Pretendard 폰트) 준수
2. 좌측 고정 TOC 사이드바 + 스크롤 스파이 구현
3. 38장 스크린샷을 적절한 위치에 배치
4. 9개 섹션(서비스 소개, 시작하기, 인스타그램, 유튜브, 그룹, 캠페인, 마이페이지 등) 구조화

3. 완성된 매뉴얼 둘러보기

아래는 실제 운영 중인 매뉴얼 페이지를 Playwright로 캡처한 스크린샷입니다.

매뉴얼 메인 — 히어로 + TOC 네비게이션

좌측 고정 TOC 사이드바와 서비스 소개 영역. 스크롤 위치에 따라 현재 섹션이 하이라이트됩니다.

시작하기 — 회원가입 & 요금제 안내

실제 서비스 화면 스크린샷이 포함된 시작하기 섹션. Playwright로 촬영한 이미지가 매뉴얼에 자연스럽게 녹아듭니다.

인스타그램 분석 기능

인플루언서 상세 인사이트 — 핵심 지표, 스타일 분석, 광고 분석 등 심층 데이터를 한눈에.

유튜브 채널 분석

유튜브 채널 상세 인사이트 — 조회수, 참여율, 오디언스 분석까지 통합 제공.

캠페인 관리

캠페인 생성부터 AI 활동 가이드 자동 생성까지 — 마케팅 워크플로우의 핵심.

4. AI 코딩 에이전트 활용 포인트

Claude Code의 핵심 기여

작업	AI 기여도	설명
콘텐츠 구조 설계	★★★★★	9개 대분류, 30+ 항목의 체계적 구조를 기능 분석 후 자동 설계
Vue 컴포넌트 코드	★★★★★	871줄의 매뉴얼 페이지 + 3개 재사용 컴포넌트 생성
스크롤 스파이 구현	★★★★	IntersectionObserver 기반 TOC 하이라이트 자동 구현
디자인 시스템 적용	★★★★★	기존 브랜드 컬러, 폰트, 컴포넌트 스타일 일관 적용
반응형 레이아웃	★★★★	모바일/태블릿/데스크톱 대응

Playwright의 핵심 기여

작업	자동화 효과
38장 스크린샷 촬영	수동 30분+ → 자동 2분
일관된 해상도 보장	1440×900 뷰포트 고정
동적 콘텐츠 대응	networkidle + 대기 시간으로 완전 로딩 보장
매뉴얼 갱신 대응	디자인 변경 시 스크립트 재실행으로 전체 스크린샷 갱신

5. 개발 워크플로우

6. 수치로 보는 효과

지표	기존 방식 (예상)	AI + 자동화	개선율
총 소요 시간	5~10일	1일	80~90% ↓
스크린샷 촬영	30분+ (수동)	2분 (Playwright)	93% ↓
콘텐츠 작성	3~5일	수 시간 (Claude Code)	85% ↓
코드 작성	2~3일	수 시간 (Claude Code)	80% ↓
매뉴얼 갱신	매번 전체 재작업	스크립트 재실행 + AI 수정	반복 비용 최소화

7. 배운 점과 Tips

1. 컨텍스트가 핵심이다 — Claude Code에게 디자인 시스템 문서, 기존 컴포넌트 코드, 브랜드 가이드를 충분히 제공하면 일관성 높은 결과물을 얻을 수 있습니다.
2. Playwright는 스크린샷 머신 — networkidle 옵션과 적절한 대기 시간이 동적 SPA 캡처의 핵심입니다.
3. 재사용 컴포넌트 설계 — ScreenshotImage, SectionHeader 등 작은 컴포넌트를 먼저 만들면 AI가 일관된 패턴으로 대량의 콘텐츠를 생성할 수 있습니다.
4. 스크롤 스파이는 필수 — 긴 매뉴얼의 UX를 결정짓는 요소입니다. IntersectionObserver 기반으로 구현하면 성능도 좋습니다.

8. 마무리

AI 코딩 에이전트(Claude Code)와 브라우저 자동화(Playwright)의 조합은 반복적이고 시간이 많이 드는 문서화 작업을 근본적으로 바꿔놓았습니다.

특히 서비스 매뉴얼처럼 구조화된 콘텐츠 + 다수의 스크린샷 + 일관된 디자인이 필요한 작업에서 이 조합의 시너지는 극대화됩니다.

다음 단계로는 서비스 UI가 변경될 때 CI/CD 파이프라인에서 Playwright로 스크린샷을 자동 갱신하고, AI가 변경된 부분의 매뉴얼 텍스트를 자동 업데이트하는 것을 계획하고 있습니다.

---

매뉴얼 보러가기: www.tablein.co.kr/manual
테이블인 — AI 인플루언서 마케팅 플랫폼