일본어로 선택만 하면 AI 이미지 생성 프롬프트를 만들 수 있는 Web 툴을 만들었습니다【HTML/CSS/JS】

AI 이미지 생성 (AI Image Generation)을 시작하면 가장 먼저 부딪히는 것이 바로 "영어 프롬프트의 장벽"입니다. Stable Diffusion이나 Midjourney에서 원하는 대로 이미지를 만들려면 스타일, 구도, 조명, 품질 등을 영어로 세세하게 지정해야 합니다.

"cinematic lighting이 뭐야?", "네거티브 프롬프트 (Negative Prompt)는 어떻게 써야 하지?" —— 이러한 고민을 해결하기 위해, 일본어 GUI에서 선택하는 것만으로 영어 프롬프트가 자동 생성되는 Web 툴을 만들었습니다. 프레임워크 없이 HTML/CSS/JS만으로 동작합니다.

주요 기능은 다음과 같습니다.

스타일 선택: 사진풍, 애니메이션풍, 유화풍 등 20종류 이상 -
구도·앵글 (Composition/Angle): 부감(俯瞰), 로우 앵글 (Low Angle), 클로즈업 (Close-up) 등을 원클릭으로 지정 -
라이팅 (Lighting): 스튜디오 조명, 자연광, 골든 아워 (Golden Hour) 등 -
품질 프리셋 (Quality Preset): 네거티브 프롬프트도 자동 부여 -
원클릭 복사: 생성된 결과를 클립보드에 즉시 복사

서버 없이 완전히 클라이언트 사이드 (Client-side)에서 동작합니다.

UI의 컬러 테마를 CSS 변수 (CSS Variables)로 일원 관리하고 있습니다. 다크 모드 (Dark Mode) 대응도 이 메커니즘으로 실현했습니다.

const setTheme = (theme) => {
const root = document.documentElement;
Object.entries(themes[theme]).forEach(([key, value]) => {
...

각 카테고리의 선택 상태를 객체 (Object)로 관리하며, 변경될 때마다 프롬프트를 재구축합니다.

const state = {
style: null,
composition: null,
...

일본어 라벨과 영어 프롬프트의 매핑 (Mapping)을 데이터로 보유함으로써, 새로운 카테고리 추가도 용이합니다.

외부 라이브러리에 의존하지 않고, SVG를 JavaScript에서 동적으로 생성하고 있습니다. CDN 의존성 제로로, 오프라인에서도 동작 가능합니다.

const createIcon = (path, size = 24) => {
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('viewBox', `0 0 ${size} ${size}`);
...

영어 프롬프트로 고민하는 시간을 없애고 싶다는 동기에서 만든 툴입니다. 프롬프트의 구조를 배우는 교재로도 사용할 수 있어, AI 이미지 생성을 막 시작한 분들에게도 추천합니다.

모든 코드는 HTML/CSS/JS로 완결되어 있으므로, 포크 (Fork)하여 자유롭게 커스터마이징할 수 있습니다.

툴은 여기서 체험할 수 있습니다:

AI 이미지 생성 프롬프트 빌더

만드는 방법에 대한 자세한 기술 해설은 블로그에 정리해 두었습니다:

자세한 내용은 이쪽으로