LogoCreator 소개
이미지 생성 모델에 "우리 회사 로고를 만들어 줘"라고 부탁해 본 사람은 결과물이 어디서 무너지는지 알고 있습니다. 그림 자체는 그럴듯하게 나오지만 회사 이름의 글자가 뭉개지거나 없는 철자가 끼어들고, 마음에 드는 마크가 나와도 파비콘으로 쓸 정사각형 버전이나 명함에 얹을 배치는 다시 처음부터 만들어야 합니다. 결국 로고 한 벌을 쓸 만하게 갖추는 일은 이미지를 뽑는 문제가 아니라 여러 번의 요청과 후처리를 엮는 문제입니다.
LogoCreator 는 그 과정을 하나의 웹 앱으로 묶은 오픈소스 로고 생성기입니다. 브랜드 이름과 스타일, 색을 고르면 로고를 만들고, 같은 마크에서 파비콘과 소셜 이미지, 색 팔레트, 제품 목업까지 브랜드 키트로 내보냅니다. 눈에 띄는 설계 결정은 로고에 글자가 들어가는지를 기준으로 서로 다른 이미지 모델에 요청을 보낸다는 점입니다. 글자가 없는 마크는 black-forest-labs/FLUX.2-pro 로, 회사 이름이 그림 안에 들어가는 형태는 google/flash-image-3.1 로 갈라 보냅니다.
앱은 Next.js App Router 와 TypeScript 로 만들어졌고 UI 는 Radix 프리미티브와 Tailwind 를 씁니다. 이미지 생성은 Together AI 를 거치며, 로그인(Clerk)과 요청 제한(Upstash Redis)은 선택 사항이라 둘 없이도 자기 API 키를 넣는 방식으로 계정 없이 돌아갑니다. 이 글에서는 모델을 갈라 쓰는 이유와 프롬프트를 만드는 방식, 지원하는 스타일과 로고 형태, 브랜드 키트와 SVG 내보내기가 실제로 무엇을 하는지, 그리고 직접 실행하는 방법을 정리합니다.
LogoCreator가 글자 있는 로고를 다른 모델로 보내는 이유
범용 이미지 모델에 로고를 요청하는 방식과 LogoCreator 의 차이는 대부분 app/api/generate-logo/route.ts 안에 들어 있습니다. 이 라우트는 사용자가 고른 로고 형태에 글자가 포함되는지를 먼저 판단하고, 그 결과로 모델을 바꿉니다. 코드의 조건은 한 줄입니다.
model: hasText ? "google/flash-image-3.1" : "black-forest-labs/FLUX.2-pro",
width: 1024,
height: 1024,
response_format: "base64" as const,
...(hasText ? {} : { guidance: 7 }),
주석은 이 선택의 근거를 함께 적어 두었습니다. 회사 이름을 글자 그대로 넣어야 하는 형태에서는 Flash Image 계열이 글자를 안정적으로 렌더하고 "monogram" 같은 구조 지시도 더 잘 따랐으며, 이전에 쓰던 Ideogram 대비 지연 시간이 절반 수준이었다는 2026년 7월 10일 비교 결과가 근거로 남아 있습니다. 반대로 글자가 없는 아이콘과 추상 마크는 FLUX.2-pro 가 마무리 품질에서 앞선다고 보고 그대로 유지했습니다. guidance 값 7 이 FLUX 쪽에만 붙는 것도 실측 기록에 따른 것으로, Together 에서 FLUX.2-pro 는 guidance 는 받지만 steps 는 받지 않고 Google 모델은 둘 다 받지 않습니다.
모델을 갈라 쓰면 한쪽의 운영 특성도 함께 떠안게 됩니다. 저장소 주석은 Flash Image 3.1 이 정사각형 크기(512·1024·2048·4096)만 지원하고 image_url 입력을 거부하며 짧은 시간에 몰린 요청을 공격적으로 제한한다고 적고 있습니다. 그래서 429 응답이 오면 1.2초 남짓 기다린 뒤 한 번 재시도하고, 그래도 실패하면 FLUX.2-pro 로 내려보냅니다. 주석의 표현을 그대로 옮기면 "글자는 Gemini 보다 약하지만, 배치 중간에 에러를 내는 것보다는 로고가 나오는 편이 낫다" 는 판단입니다.
프롬프트를 조립하는 방식에도 같은 종류의 경험이 반영되어 있습니다. 색을 지정하면 16진수 값을 그대로 넘기지 않고 24개의 색 이름 표에서 가장 가까운 이름을 찾아 blue (#2F6FF5) 형태로 함께 적습니다. 모델이 벌거벗은 16진수보다 색 이름을 훨씬 잘 지킨다는 이유이고, 사용자가 직접 고른 임의의 색에도 같은 변환이 적용됩니다.
LogoCreator의 스타일과 로고 형태 선택
로고 형태는 여섯 가지입니다. 아이콘과 이름 조합(icon-name), 아이콘만(icon), 글자만 쓰는 워드마크(wordmark), 이니셜을 조합한 모노그램(monogram), 배지 형태의 엠블럼(emblem), 추상 마크(abstract) 중에서 고릅니다. 이 중 앞의 넷은 그림 안에 글자가 들어가므로 앞 절의 라우팅에서 Flash Image 쪽으로 갑니다.
스타일은 Minimal, Geometric, Gradient, Mascot, Hand-drawn, Luxury, Retro, 3D 의 여덟 가지이고, 디테일 양은 Minimal·Balanced·Detailed 세 단계로 조절합니다. 색은 기본값이 auto 여서 지정하지 않으면 모델이 분위기에 맞는 팔레트를 고릅니다. 아래 네 장은 같은 별 모양 마크를 Minimal, Geometric, Luxury, Retro 스타일로 각각 그린 저장소의 스타일 예시입니다.
처음 쓰는 사람을 위한 시작 프리셋도 14개 들어 있습니다. app/lib/presets.ts 를 보면 Tech, Coffee, Fitness, Finance 처럼 업종 이름이 붙은 프리셋마다 로고 형태와 스타일, 배경색, 디테일 단계, 설명 문구 초안이 한 번에 채워집니다. 예를 들어 Coffee 프리셋은 아이콘과 이름 조합에 Hand-drawn 스타일, 크림색 배경을 묶고 설명 칸에 "a warm hand-drawn coffee cup with rising steam, cozy and artisanal" 을 넣어 줍니다. 브랜드 색만은 프리셋이 정하지 않고 auto 로 남겨 매번 다른 팔레트가 나오게 했습니다.
참고할 로고 이미지가 이미 있다면 업로드해서 방향을 맞출 수도 있습니다. app/api/read-reference/route.ts 는 업로드한 이미지를 meta-llama/Llama-4-Maverick-17B-128E-Instruct-FP4 에 넘겨 마크의 구성과 모티프를 한 문장으로 설명하고, 여덟 스타일 중 가장 가까운 것과 대표 색을 16진수로, 형용사 3~6개를 JSON 으로 돌려받습니다. 프롬프트는 회사 이름을 말하거나 로고 안의 글자를 그대로 옮기지 말라고 명시하고 있어, 참조 이미지의 상표를 베끼는 방향으로는 쓰이지 않습니다. 브랜드 웹사이트 주소를 넣어 색과 이름을 가져오는 경로도 있는데, 이쪽은 내부망 주소를 걸러내고 리다이렉트를 다시 검사하는 방어 코드를 갖추고 있습니다.
LogoCreator의 브랜드 키트와 SVG 내보내기
로고 하나를 골랐다면 브랜드 키트로 확장할 수 있습니다. 팔레트를 뽑아 brand-colors.css 와 JSON, 색 스와치를 만들고, 아이콘과 파비콘 세트, 웹과 소셜용 이미지, 그리고 티셔츠·머그·토트백 목업을 묶어 zip 으로 내려받는 구성입니다. 이 가운데 실제로 모델을 호출해 비용이 드는 것은 명함과 간판 목업 두 장, 그리고 조합형 마크의 로고 배치 최대 네 장뿐이고 나머지는 브라우저에서 캔버스로 처리합니다. 폭이 넓은 워드마크는 정사각형 파비콘이 될 수 없으므로, 그 경우에는 이니셜로 깔끔한 정사각형 마크를 따로 만들어 채웁니다.
SVG 내보내기는 서버를 거치지 않고 브라우저에서 래스터 이미지를 벡터로 추적하는 방식입니다. app/lib/svg-export.ts 는 색 수를 10개로 제한하고 작은 조각(pathomit: 24)을 버리며 선 없이 면만 남기는 설정으로 평면 로고에 맞춰 두었고, viewBox 만 있고 고정 폭·높이가 없는 SVG 를 내보내 파비콘 칸이든 인쇄용 시트든 크기에 맞게 늘어나게 합니다. 추적 전에 배경을 한 가지 색으로 눌러 주는 처리도 들어 있는데, FLUX 가 내보내는 흰 배경이 실제로는 미세한 잡티로 가득해 그대로 추적하면 수백 개의 점 경로가 생기기 때문입니다. 저자도 이 기능을 손으로 다시 그린 벡터가 아니라 자동 추적이라고 분명히 적어 두었습니다.
비용은 자기 키를 넣은 사용자에게만 대략값으로 표시됩니다. app/lib/pricing.ts 기준으로 글자 없는 로고는 1024×1024 한 장에 약 $0.03, 글자가 들어가는 형태는 약 $0.05, 브랜드 키트의 모델 호출은 장당 약 $0.03 으로 잡혀 있습니다. 파일 주석은 이 숫자가 추정치이며 Together AI 요금 페이지에서 확인해야 한다고 밝히고 있고, UI 도 ~ 나 ≈ 를 붙여 대략값임을 드러냅니다.
LogoCreator는 누구에게 유용한가
사이드 프로젝트나 사내 도구에 붙일 로고가 급하게 필요한 개발자, 그리고 이미지 모델을 실제 제품 흐름에 어떻게 끼워 넣는지 코드로 보고 싶은 사람에게 잘 맞습니다. 모델 라우팅, 재시도와 폴백, 프롬프트에 색 이름을 섞는 처리, 브라우저 벡터화까지 판단의 근거가 주석으로 남아 있어 Together AI 기반 앱을 만들 때 참고 자료로 쓸 수 있습니다. 반면 최종 상표로 쓸 로고를 만드는 목적이라면 그대로 쓰기 어렵습니다. 상표 검색이나 중복 확인 기능이 없고 SVG 도 자동 추적 결과이므로, 실제 브랜드로 확정하기 전에는 디자이너의 손을 거치는 편이 안전합니다.
직접 호스팅할 때는 Together AI 계정 등급도 확인이 필요합니다. 앱은 모델 접근이 막힌 경우 Build Tier 2 등급이 필요하다는 안내를 그대로 사용자에게 보여주도록 작성되어 있습니다.
LogoCreator 설치 및 실행 방법
저장소를 복제하고 Together AI 키만 넣으면 로컬에서 바로 돌아갑니다.
git clone https://github.com/Nutlope/logocreator
cd logocreator
.env.local 파일을 만들어 키를 채웁니다.
TOGETHER_API_KEY=
의존성을 설치하고 개발 서버를 띄웁니다.
pnpm install
pnpm dev
Clerk 과 Upstash 는 넣지 않아도 됩니다. 둘을 비워 두면 계정 없이 자기 키를 입력해 쓰는 방식으로 동작하고, Clerk 을 설정하면 무료 크레딧이 로그인 뒤에 열립니다. 익명 상태로 유료 모델을 무한히 호출하는 것을 막기 위한 구분입니다.
LogoCreator 웹 데모
LogoCreator 프로젝트 GitHub 저장소
더 읽어보기
이 글은 GPT 모델로 정리한 초안을 바탕으로 한 것으로, 원문의 내용 또는 의도와 다르게 정리된 내용이 있을 수 있습니다. 관심있는 내용이시라면 원문도 함께 참고해주세요! 읽으시면서 어색하거나 잘못된 내용을 발견하시면 댓글로 알려주시기를 부탁드립니다. 
이 도구를 직접 설치해 사용해보셨다면, 
파이토치 한국 사용자 모임
회원들을 위해 경험이나 팁을 댓글로 남겨주세요! 