레이어킷: 클로드 코드로 제작된 편집 가능한 레이어를 갖춘 AI 이미지 편집기

레이어킷의 기능

레이어킷은 AI 이미지 생성기의 작은 수정을 위해 지속적으로 재프롬프팅해야 하는 문제를 해결하기 위해 만들어진 브라우저 기반 이미지 편집기입니다. 개발자는 헤드라인 변경, 텍스트 약간 이동, CTA 추가 등이 재프롬프팅이나 Canva 같은 도구로 전환을 요구하는 워크플로에 좌절감을 느꼈습니다.

작동 방식

워크플로는 다음과 같습니다:

• 평문으로 장면 설명하기
• AI가 구성을 고려하여 배경 이미지 생성
• 두 번째 AI 단계에서 실제 생성된 이미지를 분석하여 가독성 있는 위치에 텍스트 배치
• 모든 요소가 편집 가능한 레이어로 존재하여 다른 요소에 영향을 주지 않고 드래그, 크기 조정, 스타일 변경 또는 삭제 가능

기술 아키텍처

전체 코드베이는 Claude Code를 사용하여 구축되었습니다. 아키텍처는 단계적 AI 파이프라인을 특징으로 합니다:

• 하나의 LLM이 구성 계획
• 이미지 모델이 장면 생성
• 두 번째 LLM 단계에서 실제 생성된 이미지를 분석하여 텍스트 배치

Claude Code는 Fabric.js 캔버스 설정부터 사용자가 자신의 키를 연결할 수 있는 API 라우팅 레이어까지 모든 것을 처리했습니다. 분해기 및 텍스트 정제 단계를 위한 대부분의 프롬프트 엔지니어링도 Claude를 통해 반복적으로 진행되었습니다.

주요 기능

• 브랜드 키트 - 브랜드 자산을 업로드하면 AI가 색상, 폰트, 스타일을 추출하여 모든 생성물이 브랜드에 맞도록 유지
• Google AI 키만으로 작동 - 구독료나 이미지당 요금 없음
• OpenRouter 키 추가 옵션으로 GPT, Claude 및 기타 모델 접근 가능
• 전체 설정을 암호화된 파일로 내보내 팀원과 공유 가능
• 브라우저에서 완전히 실행 - 서버에 아무것도 저장되지 않음
• 무료 사용

개발 통찰

개발자는 Claude가 다단계 파이프라인 설계를 얼마나 잘 처리하는지에 놀랐습니다. "텍스트가 이미지의 복잡한 부분에 계속 위치한다"와 같은 문제를 설명하면, Claude는 솔루션(비전 기반 사후 배치 정제)을 제안하고 종단간 구현을 수행했습니다.

이 도구는 현재 layerkit.impulze.ai에서 이용 가능하며, 개발자는 스마트 텍스트 배치를 미세 조정 중이며 피드백을 환영합니다.