OH SU JINFrontend Engineer

사내 서비스운영 중AI 생성

Banner Fit

프롬프트와 상품 이미지로 배너 크리에이티브를 만들고 규격별로 리사이즈하는 사내 도구.

담당
프론트엔드 전담 · 생성 플로우 · 캔버스 합성
팀
백엔드 1 · 프론트 1(본인)
기간
2026.06 – 2026.08

프롬프트와 상품 이미지로 배너 크리에이티브를 생성하고, 캔버스로 로고를 합성한 뒤 여러 규격으로 리사이즈하는 도구. 생성 결과를 잃는 것이 가장 큰 사고라 이탈 경고와 비율 유지에 공을 들였다.

배포
사내 도구
스택
TypeScriptCanvas API멀티페이지디자인 토큰

주요 작업

  • 생성 결과를 잃지 않게

    • AI 생성은 시간이 걸리고 비용이 든다.
    • 작업 중 이탈 경고를 붙이고, 결과물 비율을 항상 유지해 다시 생성해야 하는 상황 자체를 줄였다.
  • 캔버스 합성 경로를 브라우저별로 실증

    • 로고 오버레이는 캔버스 합성이라 브라우저 엔진마다 결과가 다를 수 있다.
    • WebKit·Chromium 양쪽에서 합성 경로를 직접 확인했다.
    • 실기기 검증 수단이 없는 항목은 '미조치'로 남겨 추측으로 완료 처리하지 않았다.
테스트
16 / 16 통과
포맷 검사 게이트 포함
프롬프트
2,000자 · 결과물 비율 유지
이탈 경고
생성 중 이탈 시 확인