AI로 만든 이미지 생성 도구

📝 한줄 요약

카테고리 버튼 클릭만으로 AI 이미지 생성 프롬프트가 자동 완성되는 웹 애플리케이션을, Claude Code와 함께 19분 만에 만들었습니다.

🎯 이런 분들께 도움돼요

• 아이디어를 빠르게 프로토타입으로 만들고 싶은 창업가

• AI 협업으로 개발 속도를 높이고 싶은 개발자

• 코딩 없이도 생산성 도구를 만들어보고 싶은 비개발자

🛠️ 사용한 도구

• 도구명: Claude Code (CLI)

• 모델: Claude Sonnet 4.5

• 기술 스택: Next.js, TypeScript, Tailwind CSS, OpenAI API

🔧 작업 과정

아이디어 설명 - "이런 걸 만들고 싶어요"

사실 처음에는 다른 목적으로 Claude Code를 실행했습니다. /write-post라는 명령어로 개발 과정을 블로그 글로 만들려고 했는데, 정작 작업 내역이 없었던 거죠. Claude가 "실제 작업을 먼저 해보시겠어요?"라고 제안했고, 저는 평소 만들고 싶었던 도구를 떠올렸습니다.

저는 버튼만 눌러서 이미지 생성 프롬프트가 자동 완성되는 '프롬프트 템플릿 생성기'를 만들려고 했습니다.

사용자는 [여자] [남자] [아시아] [유럽] 같은 카테고리 버튼(칩)을 선택하기만 하면 되고, 그 결과로 바로 복사해서 쓸 수 있는 프롬프트 1개가 생성되도록 설계했습니다.

핵심은 '프롬프트를 글쓰기'가 아니라 '제품(시스템)으로 만든다'는 접근이었습니다.

요구사항을 설명하자마자 Claude는 프로젝트 구조를 제안했습니다. Next.js 기반 웹앱으로, 8개 카테고리와 프리셋 시스템을 갖춘 완전한 설계도였습니다. 제가 막연하게 생각했던 "버튼 기반 선택"을 구체적인 시스템 아키텍처로 풀어낸 순간, "아, 이 AI는 내 의도를 정확히 이해했구나" 싶었습니다.

체계적인 카테고리 설계 - "어떤 요소가 필요할까?"

처음에는 어떤 카테고리를 만들어야 할지 막막했습니다. "성별, 나이 정도?" 생각했는데, Claude가 훨씬 체계적인 구조를 제안했습니다.

8개 카테고리 시스템:

• 성별: 여자, 남자, 중성

• 인종: 아시아, 유럽, 아프리카, 라틴

• 연령: 어린이, 10대, 20대, 30-40대, 50대, 60대 이상

• 스타일: 사실적, 애니메이션, 만화, 예술적, 3D

• 분위기: 행복한, 진지한, 신비로운, 드라마틱, 평화로운

• 배경: 스튜디오, 야외, 도시, 자연, 판타지

• 조명: 자연광, 스튜디오 조명, 골든아워, 강렬한 조명, 부드러운 조명

• 품질: 고품질, 최고품질, 표준

각 카테고리마다 3~6개의 선택지가 버튼으로 제공됩니다. 복잡한 프롬프트 작성이 이제 "클릭 몇 번"으로 바뀌는 순간이었습니다.

Claude는 단순히 카테고리 이름만 나열한 게 아니라, 각 옵션의 value 값까지 영어로 최적화해서 정의했습니다. 예를 들어 "사실적" 스타일을 선택하면 "realistic, photorealistic"이라는 값이 프롬프트에 들어가는 식입니다. 이미지 생성 AI가 잘 이해할 수 있는 키워드까지 고려한 설계였죠.

프리셋 시스템 - "자주 쓰는 조합은 저장하자"

8개 카테고리를 매번 다 선택하기엔 번거로울 수 있습니다. 그래서 Claude가 제안한 게 프리셋 시스템이었습니다.

자주 사용하는 조합을 미리 정의해두면, 클릭 한 번으로 모든 카테고리가 자동 선택됩니다:

• 아시아 여성 인물사진: 사실적인 스튜디오 촬영 느낌

• 애니메이션 캐릭터: 일본 애니메이션 스타일

• 전문가 프로필: 비즈니스 프로필용 진지한 분위기

• 야외 캐주얼: 자연스러운 골든아워 느낌

• 드라마틱 인물: 강렬한 조명의 예술적 느낌

프리셋을 선택한 후에도 개별 카테고리를 바꿀 수 있어서, "기본 템플릿 + 커스터마이징" 방식으로 사용할 수 있습니다. 이게 바로 제가 원했던 "재사용 가능한 프롬프트 자산"이었습니다.

파일 생성 러시 - "Claude가 24개 파일을 뚝딱"

요구사항이 정리되자 Claude는 본격적으로 파일을 생성하기 시작했습니다.

먼저 프로젝트 구조부터:

• package.json, tsconfig.json 같은 설정 파일

• TypeScript 타입 정의 (src/types/prompt.ts)

• 카테고리와 프리셋 데이터 파일

그 다음 핵심 로직:

• OpenAI API 연동 코드

• 프롬프트 조합 로직

• 두 가지 생성 모드 (AI 최적화 / 직접 조합)

그리고 UI 컴포넌트 4개:

• CategoryChips: 카테고리 선택 버튼들

• Toggle: AI 모드 켜기/끄기 스위치

• Presets: 프리셋 선택 카드

• PromptOutput: 생성된 프롬프트 표시 및 복사 버튼

마지막으로 메인 페이지, API 라우트, 스타일까지.

총 24개 파일이 약 10분 만에 생성되었습니다. 저는 그냥 지켜보기만 했어요. 각 파일이 어떤 역할을 하는지 설명도 함께 해주니, 나중에 수정하고 싶을 때 어디를 봐야 할지도 명확했습니다.

OpenAI API 키 설정 - "여기서 잠깐 막혔다"

모든 파일이 완성되고 나서, 실행하려는 순간 .env.local 파일이 눈에 들어왔습니다.

OPENAI_API_KEY=your-api-key-here

"아, API 키가 필요하구나." 저는 OpenAI API를 써본 적이 없어서 어떻게 발급받는지 몰랐습니다. 하지만 Claude가 생성한 QUICK_START.md 파일에 단계별로 다 나와 있었습니다:

1. https://platform.openai.com/api-keys 접속

2. "Create new secret key" 클릭

3. 생성된 키를 복사해서 .env.local에 붙여넣기

가이드 그대로 따라하니 5분 만에 해결됐습니다. 혼자였으면 구글 검색하며 헤맸을 부분인데, 필요한 순간에 딱 맞는 문서가 있다는 게 편했습니다.

첫 실행 - "정말로 작동한다!"

cd prompt-builder
npm run dev

터미널에 명령어 두 줄 입력하고 브라우저에서 http://localhost:3000을 열었습니다.

깔끔한 UI가 나타났습니다. 상단에는 5개의 프리셋 카드, 그 아래에는 8개 카테고리의 버튼들이 쭉 펼쳐져 있었습니다. "아시아 여성 인물사진" 프리셋을 클릭하자 모든 카테고리가 파란색으로 선택되었고, "프롬프트 생성" 버튼을 눌렀습니다.

몇 초 후, 프롬프트가 생성되었습니다:

"A portrait of a young adult Asian female, realistic and photorealistic style, happy and cheerful expression, studio background setting, professional studio lighting, ultra high quality with masterpiece-level detail and sharp focus."

"복사하기" 버튼을 누르니 클립보드에 복사 완료. 이걸 DALL-E나 Midjourney에 바로 붙여넣을 수 있습니다.

아이디어를 설명한 지 19분 만에, 실제로 작동하는 웹 애플리케이션이 완성된 순간이었습니다.

✅ 결과 (After)

Before vs After

결과물

• 완전히 작동하는 Next.js 웹 애플리케이션

• 8개 카테고리, 5개 프리셋

• AI 최적화 모드 / 직접 조합 모드 선택 가능

• 클립보드 복사 기능

• 반응형 디자인 (모바일/PC 모두 지원)

💬 이 과정에서 배운 AI 활용 팁

효과적이었던 것

1. 명확하고 구체적인 요구사항 전달

   • "이런 느낌으로"가 아니라 "버튼 클릭 → 프롬프트 생성 → 복사" 같은 구체적인 플로우 설명

   • 내가 원하는 최종 결과물의 모습을 명확히 제시

   • 예시를 들어주면 더 정확하게 이해함

2. AI에게 '제품 설계'까지 맡기기

   • 단순히 "코드 작성"이 아니라 "이런 문제를 해결하고 싶다"고 요청

   • Claude가 카테고리 구조, 타입 시스템, 확장 가능한 아키텍처까지 설계

   • 개발자적 시각과 UX 관점을 모두 고려한 설계가 나옴

이렇게 하면 안 돼요

1. 막연한 요청은 원하는 결과를 얻기 어렵다

   • "프롬프트 도구 만들어줘" 보다는 구체적인 기능 나열이 효과적

   • 사용 시나리오를 설명하면 더 좋음

2. 중간 확인 없이 끝까지 가면 방향 수정이 어렵다

   • 큰 작업은 단계별로 확인하며 진행

   • 이번엔 운 좋게 한 번에 성공했지만, 복잡한 프로젝트는 중간 점검 필요

🌍 다른 업무에 적용한다면?

이번 경험을 통해 "버튼 기반 자동화"라는 패턴의 가능성을 보았습니다:

• 보고서 생성기: 카테고리 선택 → 보고서 템플릿 자동 완성

• 이메일 템플릿 빌더: 상황별 버튼 → 이메일 초안 생성

• SQL 쿼리 빌더: 조건 선택 → 쿼리 자동 생성

• 문서 양식 생성기: 항목 선택 → 계약서/제안서 초안

반복적이고 패턴화 가능한 작업이라면, 이런 식으로 "선택 → 자동 생성" 도구를 만들 수 있습니다.

🚀 앞으로의 계획

1. 실사용하면서 카테고리와 프리셋 계속 추가

   • 자주 쓰는 스타일을 프리셋으로 저장

   • 새로운 카테고리 추가 (포즈, 표정, 카메라 앵글 등)

   • 사용 패턴 분석하며 최적화

2. 팀원들과 공유해서 함께 사용

   • Vercel에 배포해서 웹에서 바로 접근

   • 회사 프로젝트에 활용

   • 프리셋을 팀 표준으로 만들어 일관된 이미지 스타일 유지

3. 오픈소스 이미지 생성 모델 연동

   • 프롬프트 생성에서 끝나는 게 아니라

   • 웹페이지 내에서 바로 이미지 생성까지 한 번에 처리

   • Stable Diffusion 같은 오픈소스 모델 API 연동

   • "버튼 클릭 → 프롬프트 생성 → 이미지 표시" 완전 자동화

📋 재사용 가능한 프롬프트

프롬프트 1: 프로젝트 시작 시

저는 [목적/기능]을 하는 [형태: 웹앱/스크립트/도구]를 만들고 싶습니다.

사용자는 [입력 방식]으로 [데이터/선택]을 입력하면, 그 결과로 [출력 형태]가 나오도록 하고 싶습니다.

사용 환경은 [웹/로컬/모바일]이고, [특별히 중요한 요구사항]을 고려해주세요.

프롬프트 2: 구조 설계 요청 시

위 프로젝트를 구현하려면 어떤 파일 구조와 기술 스택이 필요한가요?

[선호하는 기술이 있다면 명시: Next.js, React, Python 등]

확장 가능하고 유지보수하기 쉬운 구조로 제안해주세요.

프롬프트 3: 문서 요청 시

README.md와 사용자 가이드 문서를 작성해주세요.

포함할 내용:

• 프로젝트 설명

• 설치 및 실행 방법

• 주요 기능 설명

• 문제 해결 (troubleshooting)

• 커스터마이징 방법