Logo Generator: SVG 로고와 전문가급 쇼케이스를 만드는 Claude Code 스킬

Logo Generator 소개

로고 제작은 보통 디자이너와의 반복적인 협의를 거쳐야 하고, 반대로 AI로 급하게 만든 로고는 실제 제품에 얹기에는 정제도와 표현 품질이 부족한 경우가 많습니다. Logo Generator는 이 간극을 메우려는 목적으로 만들어진 Claude Code 스킬입니다. 제품의 성격을 입력하면 미니멀한 SVG 로고 변형을 여러 개 만들어 주고, 여기에 더해 전문 스튜디오에서 뽑은 듯한 쇼케이스 이미지까지 생성합니다. 즉 로고 자체뿐 아니라 그 로고를 어떻게 보여줄지까지 한 번에 다루는 것이 특징입니다. 결과물은 편집 가능한 SVG와 바로 쓸 수 있는 PNG 두 형식으로 함께 제공됩니다.

Logo Generator가 간극을 메우는 방식은 네 가지로 정리됩니다. 극단적인 단순함, 넉넉한 여백, 정밀한 비율 같은 검증된 디자인 원칙을 적용하고, 하나의 정답 대신 여러 방향을 탐색할 수 있도록 여러 변형을 생성하며, 전문적인 배경 위에 얹은 프로덕션급 쇼케이스 이미지를 만들고, 편집용 SVG와 즉시 사용 가능한 PNG를 모두 내놓습니다. 고급 쇼케이스 이미지는 Gemini 3.1 Flash Image Preview, 이른바 Nano Banana 모델을 사용해 생성합니다. 로고 마크는 벡터로 다루고, 그 로고를 돋보이게 하는 배경 연출은 이미지 생성 모델에 맡기는 구성입니다.

로고 생성 자체는 점 배열(dot matrix), 선 시스템(line systems), 그리고 이 둘을 섞은 구성을 활용한 기하학적 마크를 만드는 데 초점을 둡니다. 한 번의 요청에 서로 다른 패턴의 변형을 6개 이상 만들고, 12가지로 큐레이션된 배경 스타일을 제공하며, 호버 효과와 부드러운 전환이 들어간 인터랙티브 HTML 쇼케이스로 결과를 보여 줍니다. 본 게시물에서는 Logo Generator의 5단계 워크플로우, 디자인 원칙과 배경 스타일, 그리고 설치와 사용법을 차례대로 정리합니다.

Logo Generator의 5단계 워크플로우

Logo Generator는 정보 수집부터 결과물 전달까지 다섯 단계로 진행됩니다. 1단계 정보 수집 에서는 제품 이름, 산업/분야, 핵심 개념(연결·흐름·보안 등), 디자인 선호(미니멀/복잡, 차가움/따뜻함)를 모읍니다. 2단계 패턴 매칭과 SVG 생성 에서는 서로 다른 패턴 유형으로 6개 이상의 변형을 만들고, 각 변형에 대한 디자인 근거를 함께 설명하며, 인터랙티브 HTML 쇼케이스를 생성합니다.

3단계 반복과 다듬기 에서는 마음에 드는 변형을 고른 뒤 크기·간격·회전 같은 파라미터를 조정하거나, 여러 변형의 요소를 조합합니다. 4단계 고급 쇼케이스 생성 에서는 SVG를 1024×1024 PNG로 내보내고, 제품 유형에 맞는 4개의 쇼케이스 스타일을 골라 Nano Banana로 쇼케이스 이미지를 만든 뒤 최종 프레젠테이션 웹페이지를 구성합니다. 마지막 5단계 전달 에서는 인터랙티브 HTML 쇼케이스 페이지, 편집 가능한 SVG 파일, 다양한 크기의 PNG, 그리고 4개의 전문 배경 쇼케이스 이미지를 함께 넘겨 줍니다.

Logo Generator의 디자인 원칙과 배경 스타일

Logo Generator가 로고를 만들 때 따르는 원칙은 여섯 가지입니다. 핵심 요소를 1~2개로 제한하는 극단적 단순함, 캔버스의 최소 40~50%를 비우는 넉넉한 여백, 2.5~4px 선 두께와 적절한 간격을 지키는 정밀한 비율, 의도적인 비대칭으로 흥미를 만드는 시각적 긴장, 모든 요소가 존재 이유를 가져야 한다는 절제, 그리고 명확한 시각적 위계를 위한 단일 초점입니다. 이 원칙들은 "장식을 더하기보다 덜어 낸다"는 방향으로 수렴합니다.

배경 스타일은 어두운 계열 6종과 밝은 계열 6종으로 나뉩니다. 어두운 계열에는 은색 미세 노이즈가 들어간 완전한 검정의 The Void, 유기적 질감의 티타늄 그레이 Frosted Horizon, AI 네이티브 느낌의 딥 퍼플 Fluid Abyss, 매거진 품질의 Studio Spotlight, 금속 광택의 Analog Liquid, 사이버펑크풍 LED Matrix가 있습니다. 밝은 계열에는 종이 질감의 Editorial Paper, 홀로그램 힌트가 들어간 Iridescent Frost, 파스텔 톤의 Morning Aura, 순백 배경의 Clinical Studio, 프로스트 글래스 효과의 UI Container, 효과를 완전히 뺀 Swiss Flat이 포함됩니다. 제품의 성격에 맞춰 이 중 몇 가지를 골라 쇼케이스를 연출하는 방식입니다.

Logo Generator 설치와 사용법

Logo Generator는 Claude Code 스킬로 설치합니다. 자동 설치는 npx skills add 명령으로, 수동 설치는 저장소를 스킬 디렉토리에 복제하는 방식으로 진행합니다.

# 방법 1: 자동 설치
npx skills add https://github.com/op7418/logo-generator-skill.git

# 방법 2: git clone
git clone https://github.com/op7418/logo-generator-skill.git ~/.claude/skills/logo-generator

설치 후에는 의존성을 설치하고 Gemini API 키를 설정합니다. 쇼케이스 이미지 생성에 Gemini API를 사용하므로 GEMINI_API_KEY가 필요합니다.

cd ~/.claude/skills/logo-generator
pip install -r requirements.txt
cp .env.example .env   # .env 에 GEMINI_API_KEY 추가

Claude Code를 재시작한 뒤 대화창에 /logo-generator를 입력하면 스킬이 동작하는지 확인할 수 있습니다. 사용은 자연어 지시로 시작합니다. 예를 들어 "Generate a logo for my AI product called DataFlow" 처럼 요청하면, 스킬이 산업/분야, 핵심 개념, 디자인 선호를 되물은 뒤 디자인 근거와 함께 6개 이상의 SVG 변형을 제시합니다. 이후 "Show me the logo in different background styles", "Export the logo as PNG at 2048x2048" 같은 후속 지시로 배경 스타일을 바꾸거나 원하는 크기로 내보낼 수 있습니다.

실행에는 Python 3.8 이상과 google-genai, python-dotenv, cairosvg, Pillow 패키지, 그리고 쇼케이스 생성을 위한 Gemini API 키가 필요합니다. 저장소는 스킬 정의(SKILL.md) 외에도 SVG를 PNG로 변환하는 scripts/svg_to_png.py 와 쇼케이스 이미지를 만드는 scripts/generate_showcase.py, 그리고 디자인 패턴과 배경 스타일 명세를 담은 references/ 디렉토리 로 구성되어 있습니다.

:github: Logo Generator 프로젝트 GitHub 저장소




이 글은 GPT 모델로 정리한 글을 바탕으로 한 것으로, 원문의 내용 또는 의도와 다르게 정리된 내용이 있을 수 있습니다. 관심있는 내용이시라면 원문도 함께 참고해주세요! 읽으시면서 어색하거나 잘못된 내용을 발견하시면 덧글로 알려주시기를 부탁드립니다. :hugs:

:pytorch:파이토치 한국 사용자 모임:south_korea:이 정리한 이 글이 유용하셨나요? 회원으로 가입하시면 주요 글들을 이메일:love_letter:로 보내드립니다! 텔레그램(Telegram)이나 Slack/Discord/Teams/Dooray/GoogleChat 등으로도 새 글 알림을 받으실 수 있습니다. :smiley:

:wrapped_gift: 아래:down_right_arrow:쪽에 좋아요:+1:를 눌러주시면 새로운 소식들을 정리하고 공유하는데 힘이 됩니다~ :star_struck:

2개의 좋아요