dev.to

I Wanted a Side Hustle. I Built a Herald With a Tip Jar.

부업을 찾다가 팁통을 단 문장관(herald)을 만들었습니다

Blazon은 입력한 단어를 고정된 문장 규칙으로 방패 문양과 설명(blazon)으로 바꾸고, Gemma가 문구와 짧은 설화를 씁니다. 무료 SVG 다운로드와 팁통으로 운영하며, 결정론적 생성과 모델 입력·출력 검증, 일일 호출 제한을 적용했습니다.

에디터 노트

가장 설득력 있는 설계는 문양과 문구의 역할을 나눈 부분입니다. 같은 입력에서 방패가 반복 생성되고 blazon까지 검증할 수 있어 결과물의 재현성을 지키며, 변화를 원하는 좌우명과 설화에만 Gemma를 씁니다. 모델 응답이 실패해도 고정 목록으로 화면을 채우는 구조도 무료 서비스의 호출 한도와 맞습니다. 다만 저자가 제시한 3,000개 단어 검사는 규칙 생성 결과의 문자 형식 검증이지, 문양이 문장 규칙을 모두 지킨다는 검증으로 읽어서는 안 됩니다. 또한 현재 서비스는 Gemini API를 호출하므로 오픈 웨이트 모델을 썼다는 사실만으로 운영 비용과 제공 조건이 독립적이지는 않습니다. 저자는 자체 호스팅 전환용 코드를 마련했다고 설명하지만, 지금의 비용 절감은 무료 이용 한도와 일일 제한에 기대고 있습니다.

AI 요약

Blazon은 단어 하나를 문장(coat of arms)으로 바꾸는 웹앱입니다. 입력 단어를 해시로 변환하고 고정된 규칙표에 따라 방패의 구획, 색(tincture), 문양(charge)을 선택합니다. 같은 버전에서 같은 단어를 입력하면 같은 문양과 정식 문장 설명(blazon)이 나옵니다. 저자는 Hacktoberfest Open-Source AI Challenge의 부업 주제에 맞춰 하루 동안 프로젝트를 만들었습니다. 이전에 만든 문장 생성 앱에 목소리를 더하고자 Gemma를 연결했습니다.

규칙 기반 생성과 Gemma의 역할

방패와 설명은 해시와 규칙표가 만듭니다. 색을 배치할 때는 금속 위에 금속이나 색 위에 색을 놓지 않는 문장 규칙(rule of tincture)을 따릅니다. Gemma는 완성된 blazon과 입력 단어를 받아 좌우명(motto)과 두세 문장의 설화를 씁니다. 모델은 방패 디자인을 결정하지 않습니다. 저자는 인쇄할 문양은 반복 가능하고 검증 가능한 규칙에 맡기고, 달라져도 되는 문구에만 모델을 썼다고 설명합니다.

Gemma가 느리거나 사용할 수 없거나 일일 한도에 도달하면 고정된 12개 좌우명 목록에서 대체 문구를 고릅니다. 이 선택에도 같은 해시를 써서 입력 단어마다 같은 대체 문구가 나옵니다. 정상 작동 중에는 같은 방패에 여러 번 요청해도 좌우명이 달라질 수 있습니다. 마음에 드는 결과를 받으면 그때 SVG를 내려받아야 합니다. 같은 단어에 같은 좌우명을 제공하는 모드는 향후 계획에 적혀 있습니다.

운영 비용과 입력 검증

앱은 Render 무료 요금제에서 Node 서버와 프런트엔드를 운영합니다. 서버가 Gemini API를 호출하고 API 키를 보관하며, 전체 기준 하루 50회, 방문자 한 명당 하루 10회로 호출을 제한합니다. 무료 서버는 방문이 15분간 없으면 잠들기 때문에 한동안 첫 방문자는 서버가 깨어날 때까지 약 1분을 기다릴 수 있습니다. 저자는 실제 사이트에서 Gemma가 2.8초 만에 응답한 사례도 제시했습니다. 비용을 낮추기 위해 작은 모델을 사용하고, 좌우명과 설화가 짧은 작업에 프런티어 모델의 처리 여력이 필요하지 않다고 설명합니다.

사용자가 입력한 단어는 모델에 전달되므로 프롬프트 인젝션 가능성도 다룹니다. 서버는 입력을 최대 40자로 제한하고 허용 문자를 검사합니다. 모델에는 단어와 blazon이 지시가 아닌 데이터라고 안내하며, 사용자가 보낸 펜스 표시는 제거합니다. 모델 응답에 필수 항목이 없거나 길이가 지나치게 길거나 마크업 또는 링크가 있으면 응답을 버리고 대체 좌우명을 보여줍니다. 저자는 생성 규칙으로 단어 3,000개를 검사했고 blazon이 정해진 문자만 사용하며 최대 61자였다고 적었습니다. 다만 robots.txt의 크롤러 제한은 접근 제어가 아니며 일일 호출 제한이 서버 쪽 방어라고 구분합니다.

제품 범위와 구현 과정

Blazon은 무료로 SVG를 내려받게 하고 다운로드 아래에 Buy Me a Coffee 팁 링크를 둡니다. 개인 문장이 없는 가족을 위한 선물, 소규모 Etsy 판매자의 디자인 출발점, 탁상 역할극 그룹의 가상 가문 문양을 잠재 사용자로 들었습니다. 사이트는 이를 실제 가문의 역사나 등록된 문장이라고 주장하지 않습니다. 영국 문장은 성씨가 아니라 개인에게 수여됐다는 설명을 덧붙이고, Blazon의 결과는 입력 단어로 새로 만든 디자인이라고 선을 긋습니다.

개발자는 이전 Gemma 프로젝트의 Node 서버 코드 세 파일을 재사용했습니다. Google Stitch가 만든 화면을 HTML, CSS, JavaScript로 나눴고, Claude와 GitHub Copilot을 각각 명세·서버 변경·테스트와 브라우저 상호작용 구현에 활용했습니다. 최종 검토에서는 단어를 바꾼 뒤 이전 요청의 응답이 새 문양에 붙는 문제와 색 견본이 실제 문양 색을 반영하지 않는 문제를 고쳤습니다. 다운로드 형식은 SVG이며 PNG는 지원하지 않습니다.

원문: dev.to / 번역·요약: Trawling

원문 보기 ↗토론 보기 ↗