PSD Scaffold — 브랜드웹 제작 자동화

프로젝트 소개

캠페인마다 반복하던 PSD 이미지 추출과 화면 배치를 자동화한 도구입니다. Photoshop PSD에서 Vue 컴포넌트·SCSS·WebP 이미지를 생성하고, 디자인 수정본이 들어오면 변경된 부분만 반영하도록 만들었습니다. Electron 데스크톱 앱으로 제공한 뒤, 코드 작업 중 바로 사용할 수 있는 Claude Code 플러그인으로 확장했습니다.

사내 발표 — AI·AX 활용 사례 공유회

PSD Scaffold의 제작 자동화 사례를 사내 AI·AX 활용 사례 공유회 실용성 부문에서 발표했습니다. 기존 작업 방식과 도구 적용 후의 변화를 비교하는 시연 영상을 직접 기획·제작해, 실제 캠페인 제작 과정과 개선 효과를 공유했습니다.

기존 작업 방식

주요 구현

PSD에서 화면 코드까지 자동 생성

• 레이어 구조와 좌표를 분석해 이미지를 WebP로 일괄 추출하고 Vue·SCSS 코드 생성
• 레이어 이름과 위치·크기를 기준으로 슬라이드·탭·다국어 구조 판별

앞뒤 작업을 하나의 제작 흐름으로 연결

• 업무 티켓·기획서에서 공통 작업 기준 문서를 만들고 링크·대체 텍스트·영상 배치에 활용
• 탭·슬라이드·사전예약 모듈 적용부터 시안 대조·검수까지 작업 단계 연결
• 언어별 이미지·스타일을 자동 분기해 다국어 캠페인의 반복 작업 축소

실제 사용 방식에 맞춰 도구 개선

• Windows·macOS에서 사용할 수 있도록 구현하고 앱·플러그인의 핵심 엔진 공유
• 사용 패턴을 반영해 플러그인을 주 운영 방식으로 전환

대화형 어시스턴트·문서 검색(RAG) 고도화 설계

제작 도구를 자연어로 제어할 수 있도록 필요한 기능과 동작 조건을 정의하고, AI에 요구사항과 구현 방향을 제시해 사내 문서 검색과 대화 맥락 기반 요청 해석 구조를 설계했습니다.

• 사내 컴포넌트 문서 검색 — kit의 Slide·Tab 등 Vue 컴포넌트 문서를 분할·임베딩하고 SQLite 기반 벡터 검색 저장소로 구성해, 관련 사용법을 검색하여 코드 생성에 제공하는 RAG 구조 설계
• 대화 맥락 기반 요청 해석 — 현재 요청·최근 대화 5건·프로젝트 작업 상태를 Haiku에 전달할 입력 범위를 정하고, 작업 의도와 대상을 구조화해 문서 검색·빌드·배포로 연결하는 흐름 설계
• 빌드·배포 대상 검증 — “이전 버전으로 빌드”, “특정 망에만 배포” 같은 요청을 작업 상태·빌드 이력과 연결하도록 요구사항을 정의하고, 대상이 불명확하면 확인 질문을 거치도록 동작 조건 설계

적용 결과

• 섹션 8개·이미지 70장의 PSD 추출·화면 생성: 약 2분 30초
• PC 페이지 제작: 7시간 → 2시간 30분
• 모바일 페이지 제작: 3시간 30분 → 1시간 40분
• 다국어판 제작: 10시간 30분 → 4시간
• 룩북 시즌 교체: 2시간 → 10분
• 사전예약 포함 캠페인 제작: 12시간 → 5시간. 확보한 시간은 애니메이션 고도화에 활용
• 캠페인 마크업 담당자 2명이 2개월간 실무에 사용

각 수치는 개별 작업 사례의 비교 기록입니다. 장비·소재·작업 범위에 따라 소요 시간은 달라집니다.

처리 성능 검증

별도 측정에서는 레이어 2,703개 PSD를 7개 섹션·이미지 94장의 Vue·SCSS·WebP로 약 5분에 생성했습니다. 프로젝트·레이어 트리 캐시를 재사용한 반복 실행에서는 약 1분 24초를 줄였습니다.

사용 기술

Vue · SCSS · Node.js · Electron · Photoshop com

AI 제작 루프 — 구현·검수 자동화

01 / 03

← 이전다음 →

프로젝트 소개

PSD Scaffold로 화면 생성을 자동화한 뒤에도, 단계마다 사람이 다음 작업을 지시하고 결과를 확인해야 했습니다. 이를 줄이기 위해 계획·구현·브라우저 검수·수정을 반복하는 에이전트 루프를 구성했습니다. 검수에서 발견한 문제를 수정·재검수로 연결해, 사람의 개입을 시작 지시와 최종 결과 확인 중심으로 줄였습니다.

주요 구현

계획·구현·검수 역할 분리

• 에이전트 3개의 역할과 작업 규칙을 정의하고 검수 결과에 따라 수정·재검수를 반복하는 실행 흐름 구성
• 검수 에이전트의 코드 수정 권한을 제한해 구현과 검수를 분리

실제 브라우저에서 동작과 화면 검수

• Chrome에서 클릭·스크롤 동작과 콘솔 오류를 확인하고 화면을 디자인 시안과 대조
• 등장 애니메이션의 중간 프레임에서 발견한 결함도 수정 작업으로 연결

디자인 수정 감지와 작업 재개

• 공유 폴더에 새 PSD가 등록되면 변경을 감지하고 제작 루프를 자동 실행
• 할 일·진행 상태·검수 결과를 파일에 저장해 에이전트 간 작업 인계와 중단 후 재개 지원
• 반복 실패와 입력에 없는 운영 값은 사람이 확인하도록 처리

여러 프로젝트를 확인하는 실행 콘솔

• 작업보드에서 진행 상황을, 실행 결과·보고서에서 완료 내역과 검수 결과를 확인하도록 구성
• 에이전트 활동과 결정·처리 기록을 남겨 수행 작업과 판단 근거를 추적

비교 검증을 바탕으로 작업 규칙 개선

• 같은 자료로 만든 결과를 수동 제작본과 비교하고 누락·차이를 작업 규칙에 반영
• 정적 시안에 드러나지 않는 마우스 호버·자동재생 등도 검수 항목에 추가

적용 결과

• 실제 게임 업데이트 페이지 2건에 적용해 제작 완료
• 클릭·스크롤 동작, 콘솔 오류, 시안과의 일치 여부를 검수하고 최종 검수에서 발견된 오류를 모두 수정
• 단계마다 지시·확인하던 작업을 시작 지시와 최종 결과 확인 중심으로 전환
• 연출 중 타이틀이 검게 보이는 문제와 CSS 중복 등 결함·오류 11건을 실행 과정에서 발견·수정

게임 브랜드웹 — 인터랙션·다국어 대응

리니지M PHOENIX 브랜드웹

프로젝트 소개

게임의 신규 콘텐츠와 업데이트를 소개하는 브랜드웹을 제작했습니다. 약 10개월간 14개 캠페인에 참여하며 PC·모바일 화면과 인터랙션을 구현하고, 다국어 서비스와 차수별 콘텐츠 공개에 대응했습니다.

주요 구현

• GSAP 기반 섹션 진입 애니메이션 구현
• 플랫폼 SDK를 연동해 팝업·슬라이드·사전예약·영상·팝오버 구성
• PC·모바일 퍼블리싱 및 글로벌 캠페인의 다국어 화면 구현
• PHOENIX 1~4차, 도원결의 1~2차 등 차수별 추가 콘텐츠 반영

대표 사례

• 리니지M PHOENIX ↗: 4차에 걸친 콘텐츠 추가 공개 대응
• 리니지2M 발라카스 ↗: 북미·러시아 대상 다국어 페이지 제작
• 아이온2 DEVA LOOKBOOK ↗: PC·모바일 캠페인 페이지 제작

업무 개선

캠페인마다 반복되는 이미지 추출·배치·검수 과정에서 병목을 확인했습니다. 이를 줄이기 위해 PSD 제작 자동화와 검수 도구를 직접 개발해 제작 공정에 적용했습니다.

사용 기술

Vue 3 · Pinia · SCSS · GSAP · 플랫폼 SDK

게임 프로모션 — 참여·쿠폰 교환 기능 개발

리니지클래식 — 사전 신청·현장 접수

프로젝트 소개

오프라인 PC방 행사의 사전 신청부터 당첨 확인·현장 접수까지 이어지는 웹 화면을 개발했습니다. 이용 대상과 운영 시점이 다른 PC·모바일·현장용 화면을 3개 앱으로 나눠 구성했습니다.

주요 구현

• 사전 신청·당첨 확인·현장 접수 기능을 독립적으로 빌드·배포할 수 있도록 앱 구성
• 백엔드 기획자와 API 응답 규격·화면 흐름을 조율하며 변경되는 현장 운영 규칙 반영
• 접수·입장·경품 지급 단계를 상태로 나눠 변경 요청에 대응
• 로그인 여부·이용 제한·실명인증·이벤트 기간에 따른 화면 분기
• 인증번호 발송·검증의 2단계 휴대폰 본인확인과 예외 처리 구현

적용 결과

온라인 신청과 현장 접수의 서로 다른 운영 조건을 반영했습니다. 사전 신청에서 당첨되지 않은 이용자가 행사장에서 다시 신청하는 흐름까지 처리했습니다.

사용 기술

Vue 3 · Pinia · SCSS · GSAP · axios · Web Crypto API

Tracking Validator — 트래킹 픽셀 검수

프로젝트 소개

광고매체마다 별도 도구로 확인하던 트래킹 픽셀 검수를 하나의 크롬 확장 도구로 통합했습니다. 마케팅팀의 스펙 엑셀을 읽어 검사 항목을 만들고, 실제 픽셀 호출 내역과 실시간으로 대조하도록 구현했습니다.

주요 구현

• 스펙 엑셀의 스크립트를 파싱해 캠페인별 검사 항목 자동 생성
• 네이버·카카오·GA4·Google Ads·Meta·TikTok·Criteo 등 매체 10종의 픽셀 식별 규칙 구성
• 페이지 로드 전부터 호출 내역을 수집하고 발화·누락·대기 상태로 구분
• 클릭·전환 조건이 충족되지 않은 항목을 누락과 구분하고, 완료 이벤트는 시뮬레이션으로 검증
• 스펙에 없는 픽셀과 누락·중복 삽입을 확인하고 검수 로그를 CSV로 내보내도록 구현

적용 결과

• 캠페인 6건의 검수에 사용해 스펙에 있지만 빠진 픽셀을 오픈 전에 발견
• 검수 결과를 CSV로 남겨 마케팅팀과 같은 근거로 확인
• 팀 동료와 함께 사용하며 캠페인 검수 프로세스에 적용