코딩 에이전트로 벡터 로고 키트 만들기 — 이미지 모델 없이 SVG·파비콘·OG 까지

왜 이미지 모델에 로고를 맡기지 않나?

로고는 이미지 한 장이 아니기 때문이다. 16px 파비콘과 1024px 앱 아이콘을 다 견디는 마크, 실제 서체로 짠 워드마크, 락업 2종, 어두운판, 단색판이 있어야 하고 전부 서로 맞아야 한다. 이미지 모델은 한 크기의 래스터를 내고, 글자를 매번 조금씩 다르게 그리고, 타이포그래피를 흉내 내고, 벡터를 내지 못한다. 그러면 오후 내내 따라 그리게 된다.

레시피 방식은 기하에서 시작한다. 에이전트가 작은 Node 프로그램을 돌리면 opentype.js 가 폰트 글리프 윤곽선을 읽어 패스로 바꾸고, 도형과 음각은 다각형 불리언으로 만들고, SVG 를 직접 쓰고, resvg 가 PNG 를 만든다. 브라우저도, 이미지 모델도, 유료 API 도 없다. 레시피에는 1초 안팎이면 끝난다고 적혀 있다.

키트에 무엇이 들어 있나?

모든 파일이 같은 기하에서 나오니 브랜드명이나 색을 바꾸면 한 벌이 통째로 일관되게 다시 나온다.

묶음	파일
벡터	mark.svg·wordmark.svg·lockup-horizontal.svg·lockup-stacked.svg 와 각각의 -dark 판, 그리고 mark-mono.svg
파비콘	favicon-16.png·favicon-32.png·favicon-48.png·favicon.ico
앱 아이콘	apple-touch-icon-180.png·app-icon-1024.png
소셜	주제 한 줄을 활자로 넣은 og-1200x630.png
확인용	모든 조각을 실제 크기로 놓은 1600×1000 brand-sheet.png, 측정값이 든 check.json

레시피 끝에는 사이트에 넣는 세 줄이 있다. .ico 와 180px 터치 아이콘은 루트에, OG 이미지는 페이지 머리에.

기하 모노그램 레시피는 마크를 어떻게 그리나?

첫 공개 레시피는 기하 모노그램이고 Duchamp 이름은 "로고 키트 · 기하 모노그램"이다. 마크는 원 또는 스쿼클 하나에서 이니셜을 음각으로 도려낸 것이다. 글자에 끝이 열린 세로 줄기가 있으면 그 줄기를 도형 가장자리까지 뻗어 도형을 면으로 나눈다. N 은 왼쪽 아래·오른쪽 위로 뻗어 두 면, H 는 네 끝이 모두 뻗어 네 면. 글자 크기는 글자와 가장자리 사이 벽이 줄기 굵기의 1.15배가 되도록 코드가 잰다. 워드마크는 Geist 600, 자간 −2.2%. 레시피가 적은 참고 감각은 Linear·Vercel·Raycast 의 절제다.

채우는 빈칸은 다섯이다. 브랜드명 20자 이내, 적은 그대로 워드마크에 들어간다. 주 색·바탕 색 HEX 2개, 비우면 먹색에 가까운 검정과 따뜻한 흰색. OG 이미지의 한 줄이 되는 주제 90자 이내. 마크에 쓸 글자 1자, 비우면 브랜드명 첫 글자. 변형은 A 원, B 스쿼클, C 글자가 아래 가장자리를 뚫고 나가는 스쿼클 크롭, 또는 둥근 글자에 스쿼클을 고르는 자동. 한글 이름은 선택이고 기본 키트 밖에 wordmark-ko.svg 를 더한다.

그 다음 에이전트는 코드 파일 네 개를 한 글자도 바꾸지 않고 저장하고, 빈칸으로 props.json 을 쓰고, npm install 과 node logo-render.mjs 를 돌린다.

코드는 무엇을 검사하고, 에이전트는 무엇을 직접 봐야 하나?

check.json 이 ok: true 로 돌아와야 하고, 아니면 0 이 아닌 종료 코드로 끝난다. 검사 항목은 이렇다.

• 어느 SVG 에도 <text>·<image>·외부 참조가 없다. 글자가 전부 패스라 폰트가 없는 PC 에서도 똑같이 보인다.
• thin32: 마크와 32px 파비콘을 32px 기하로 줄여 8배 해상도로 래스터한 뒤 거리 변환으로 잰다. 가장 가는 획과 가장 좁은 틈이 모두 1.5px 이상이어야 한다.
• ink16: 16px 마크·파비콘의 잉크 비율이 15~75%. 꽉 찬 사각으로 뭉개지거나 빈 칸으로 사라지지 않게.
• 주 색과 바탕 색의 대비. 3:1 미만이면 흑백 단색 키트로 바뀌고 경고가 남고, 에이전트가 색을 바꿀지 물어본다.
• 모든 출력 파일이 있고, PNG 크기가 정확하고, 워드마크 글자가 브랜드명과 같다.

코드 검사는 Apple·Nike·Airbnb·Vercel 삼각형·Linear·Mastercard·Target 과 닮은 마크나, 전구·로켓·스우시 같은 클리셰를 잡지 못한다. 그래서 레시피는 에이전트에게 브랜드 시트와 PNG 를 직접 열어 보고, 닮은 대상이 있으면 이름을 적어 보고하라고 요구한다. 검사가 실패해도 코드를 고치지 말라고 되어 있다. 변형만 바꿔 다시 돌릴 수는 있다.

예시는 어떻게 나왔나?

가상 브랜드 둘을 레시피에 통과시켰고, 키트 전체가 레시피 페이지에 있다.

브랜드	주 색 / 바탕 색	주제 한 줄
Northline	#1E3A8A / #F5F3EE	Weather data for small farms
Halden	#A63D24 / #FBF7F2	Booking software for independent clinics

어디서 찾나?

레시피는 Readymade 의 Brand › Logo 에 로고 키트 · 기하 모노그램으로 있다. 2026년 10월 12일 월요일 10:00 드롭에 공개 예정이고, 그 전에는 페이지에 들어갈 수는 있지만 목록에 뜨지 않는다. MCP 에서는 search_image_templates 에 use: logo 를 주어 찾고 get_template 으로 받는다. 받기는 하루 무료 한도에 세고 검색은 세지 않는다.

한계는?

글자만으로 그리는 로고다. 면 분할에는 줄기가 필요하고, 마크가 그림이어야 하는 브랜드는 범위 밖이다. 주 색이 바탕과 너무 가까우면 단색 키트로 내려간다. 폰트는 고정이다. 그리고 기하 모노그램은 기존 상표 옆에 떨어질 수 있어, 레시피는 내놓기 전 상표 검색을 사용자의 일로 둔다.