AI 디자인 스크린샷을 재사용 가능한 웹 에셋으로 변환하는 도구 제작
I built a tool that turns AI design screenshots into reusable web assets
핵심 요약
AI를 활용해 디자인 스크린샷에서 웹용 에셋을 자동으로 추출하고 최적화해주는 도구 개발기.
- 기능 자동화 — 디자인 스크린샷에서 웹 에셋을 자동으로 추출함
- AI 활용 — Nano Banana 모델을 사용해 최종 에셋을 생성함
- 웹 최적화 — 다양한 크기의 웹용 에셋 변형을 자동으로 생성함
- 사용자 피드백 — 도구 출시 전 커뮤니티의 관심도를 확인하고자 함
디자인 스크린샷을 재사용 가능한 웹 에셋으로 변환하는 작은 AI 기반 도구를 만들고 있습니다.
전체 스크린샷을 찍으면 추출할 수 있는 조각들을 제안하고, 승인하거나 수동으로 영역을 선택하게 한 뒤, 각 조각을 잘라내어 AI(현재 Nano Banana 사용)를 통해 최종 에셋을 생성합니다. 그 후 웹 사용에 최적화된 여러 크기의 변형도 생성합니다.
AI로 생성된 디자인이나 목업을 일일이 수작업으로 다시 만드는 대신, 실제 투명 PNG 그래픽, 아이콘, 일러스트로 쉽게 변환하는 것을 목표로 합니다.
작업 흐름을 보여주는 짧은 데모 영상을 만들었습니다.
혹시 제가 이 도구를 출시한다면 사용해보고 싶으신 분 계신가요?



