아이디어를 현실로 만드는
1인 개발 연구실

JubroLab 프로젝트

JubroLab은 사이드 프로젝트를 관계도 한 장으로 보여주는 1인 개발 연구실입니다. 웹 게임 · 개발자 도구 · 생성 도구를 직접 만들어 운영하고, 같은 기술을 쓴 프로젝트끼리 선으로 이어 무엇을 반복해서 쓰는지 한눈에 보여줍니다.

• Token Generator

  토큰 15종을 한 화면에서

  UUID v1·v4·v7, Hex, Base64, API Key, JWT 스타일 Bearer, OTP까지 15종을 카테고리로 걸러 만들고 한 번에 복사합니다. 열세 개 중 가장 작지만 가장 자주 쓰는 것입니다.

  토큰이 필요할 때마다 검색해서 아무 사이트에나 들어가던 게 싫어서 만들었습니다. 그래서 목표가 하나였습니다 — 열면 이미 만들어져 있고, Enter로 새로 뽑고, Ctrl+C로 복사하고 끝. 비행기에서도 열리도록 PWA로 감쌌습니다.

  분류: UTILITY · 상태: 운영 중 · 사용 기술: Next.js, React, TypeScript, PWA

  Token Generator 열어보기

• Text2Visual

  같은 문장은 언제나 같은 그림이 된다

  텍스트를 결정론적으로 그림으로 바꿉니다. 유체·붓터치·마블링·수채·점묘·모자이크·글리치까지 화풍 8가지를 고를 수 있습니다.

  난수로 그리면 예쁘긴 해도 한 번 지나가면 끝입니다. 입력 문자열을 해시로 돌려 그 값만으로 그림을 만들면, 같은 문장은 언제나 같은 그림이 됩니다. 이 성질이 생기고 나서 쓸 곳이 두 개 더 나왔습니다 — SHA-256으로 진위를 확인하는 인증서, 그리고 자기 패턴을 아홉 개 중에서 골라내는 이미지 2차 인증.

  분류: GENERATIVE · 상태: 운영 중 · 사용 기술: Next.js, React, TypeScript, Tailwind, Canvas, LLM, PWA

  Text2Visual 열어보기

• Story Hacker

  단서를 읽고 비밀번호를 맞힌다

  이야기 속 단서로 PIN을 추리하는 스토리 모드 10편과, 이야기 없이 숫자의 위치·크기·관계만으로 푸는 추론 모드 8편.

  퍼즐 게임에서 틀리면 보통 벌을 줍니다. 목숨이 줄거나 처음으로 돌아가거나. 여기서는 틀릴 때마다 단서가 하나 열립니다. 못 푸는 사람은 계속 힌트를 받아 결국 풀고, 잘 푸는 사람은 적은 시도로 별 셋을 받습니다. 실력 차이를 난이도가 아니라 보상으로 가릅니다.

  분류: PUZZLE · 상태: 운영 중 · 사용 기술: Next.js, React, TypeScript, Tailwind

  Story Hacker 열어보기

• Kiply

  6~12세를 위한 미니게임 7종

  풍선을 터뜨려 덧셈, 카드를 뒤집어 기억력, 흩어진 글자로 어휘력, 두더지를 잡아 암산. 프로필을 나눠 쓰고 난이도를 고르고 학습 리포트를 남깁니다.

  아이가 쓰는 것이라 두 가지를 먼저 정했습니다. 하나, 광고와 결제를 넣지 않는다. 둘, 접근성은 어른용보다 더 엄격하게 — WCAG를 지키고 모션 감소 설정을 따르고 키보드만으로도 전부 됩니다. 한 판이 1분을 넘지 않게 자른 것도 의도입니다. 짧은 집중 시간은 고칠 문제가 아니라 전제니까요.

  분류: KIDS · 상태: 운영 중 · 사용 기술: Next.js, React, TypeScript, Tailwind, PWA

  Kiply 열어보기

• AI Stock Analyzer

  열 종목을 훑어 서넛으로 압축했다

  밸류에이션·SWOT·시나리오·매매 전략·백테스트를 한 장의 리포트로 뽑던 스크리닝 도구. 종목 하나에 200원, 열 개를 10분에 훑었습니다.

  최종 투자 판단을 대신하려고 만든 게 아닙니다. 관심 종목 열 개를 빠르게 훑어 심층 분석할 서넛으로 줄이는, 리서치의 앞단만 담당했습니다. 그래서 리포트 첫 줄에 "이것만 보고 결정하지 말 것"을 박아뒀습니다. OpenAI와 Gemini에 같은 데이터를 물려 두 요약을 나란히 놓은 것도 같은 이유입니다 — 한쪽 말을 믿지 않게 하려고.

  분류: RESEARCH · 상태: 서비스 종료 · 사용 기술: LLM, Supabase, Python

• TickerBrief

  티커를 넣으면 분석 리포트가 왔다

  미국 주식 분석 리포트를 신청받던 서비스. 티커를 검색해 최대 3개까지 신청하면 12시간 안에 리포트를 보냈고, 리포트는 AI Stock Analyzer가 만들었습니다.

  AI Stock Analyzer는 제 손에서만 돌던 CLI였습니다. 남이 쓰게 하려면 신청을 받을 창구가 필요해서 만든 게 이쪽입니다. 리포트 생성은 손이 가는 일이라 주간 한도를 사용자당 10개로 묶고, 신청이 들어오면 Slack으로 알림을 받아 사람이 돌렸습니다. 완전 자동화보다 수요 확인을 먼저 두려던 구조였습니다.

  분류: REPORT · 상태: 서비스 종료 · 사용 기술: Next.js, React, TypeScript, Tailwind, Supabase, PWA

• Specast

  스펙 하나를 진실로 삼는 화면 빌더

  드래그로 화면을 짜고, 자연어로 시키고, Figma에서 가져오고, React 코드나 HTML5 임베드로 내보냅니다. 편집 방식이 넷이지만 결과는 JSON 스펙 하나로 모입니다.

  화면을 만드는 방법이 네 가지인데 결과물도 네 가지면 아무것도 못 합니다. 그래서 캔버스·자연어·코드·Figma 넷이 모두 같은 JSON 스펙을 고치게 했습니다. 무엇으로 시작했든 다른 방식으로 이어서 편집할 수 있고, 렌더 타깃도 갈아 끼울 수 있습니다. 컴포넌트 카탈로그가 어떤 프레임워크에도 의존하지 않는 이유가 이것입니다 — 지금은 React와 HTML5를 뱉지만 다음이 무엇이 될지 모르니까.

  분류: BUILDER · 상태: 준비 중 · 사용 기술: Next.js, React, TypeScript, Vite, Tailwind, Supabase, LLM

• INK ARENA

  더 넓게 칠한 팀이 이긴다

  바닥을 잉크로 칠해 더 많은 영역을 차지한 팀이 이깁니다. 잠수는 아군 잉크 위에서만 빨라지고 잉크가 찹니다.

  모바일 조작을 짜다가 막혔습니다. 이동·조준·발사·잠수를 버튼 넷으로 나누면 엄지가 둘뿐이라 동시에 두 개까지만 눌립니다. 그래서 발사 버튼을 없앴습니다 — 오른쪽 스틱을 기울이면 그 방향으로 계속 쏩니다. 잠수 버튼을 조준 스틱 위에 둔 것도 같은 계산입니다. 엄지가 스틱을 떠나야 눌리는데, 그게 "잠수 중에는 못 쏜다"는 게임 규칙과 정확히 같은 동작입니다.

  분류: ACTION · 상태: 운영 중 · 사용 기술: TypeScript, Phaser, Vite, PWA

  INK ARENA 열어보기

• Paperdoll

  파츠를 겹쳐 만들고 시트로 내보낸다

  레이어 파츠를 조립해 캐릭터를 만들고 레이어마다 색을 입힌 뒤, 상태별 스프라이트 시트를 zip 하나로 받습니다. 13레이어 · 파츠 36종 · 파츠당 42프레임.

  아트가 회색조인 건 의도입니다. 베이스 #EFEFEF, 음영 #A7A8A7, 검정 아웃라인. 색은 런타임에 곱연산으로 입혀 아웃라인만 검정으로 남깁니다. 배율에 255/239를 곱하는데, 이래야 베이스가 고른 색에 정확히 떨어집니다. 손·발·일부 눈은 순수 검정이라 틴트가 의미 없어서, 빌드가 파츠별로 이를 감지해 컬러 피커를 숨깁니다.

  분류: ASSET · 상태: 운영 중 · 사용 기술: Next.js, React, TypeScript, Tailwind, Canvas

  Paperdoll 열어보기

• Impastile

  원화가 그어진 방향으로 붓을 놓는다

  반 고흐 회화 12점을 셀 격자로 나눠, 셀마다 원화의 붓결 방향으로 회전한 스트로크를 놓아 다시 그립니다. 소용돌이치는 밤하늘은 소용돌이 접선을, 사이프러스는 수직 불꽃결을 따라 흐릅니다. 내 이미지를 끌어다 놓으면 같은 붓이 그 자리에서 붓결을 뽑아 다시 그립니다.

  모자이크는 색만 남기고 붓질을 버립니다. 그래서 색상 맵과 함께 붓결 방향장을 뽑았습니다 — 원화에 구조 텐서를 걸어 등고선 방향을 얻고, 그 각도로 회전한 길쭉한 사각형에 물감이 솟은 릿지를 얹습니다. 색은 지어내지 않고 원화에서만 오므로, 모자이크와 갈리는 것은 방향뿐입니다. 그 방향을 배각(2θ) 벡터로 저장한 것이 핵심입니다. 붓 스트로크는 180° 대칭이라 방향의 부호가 의미 없는데, 각도를 그대로 보간하면 0°와 179°가 90°로 섞여 스트로크가 뒤집힙니다.

  분류: GALLERY · 상태: 운영 중 · 사용 기술: Next.js, React, TypeScript, Canvas, Python

  Impastile 열어보기

• Koda CLI

  모델이 어디서 무너지는지 재는 실험대

  OpenAI 호환 엔드포인트(Ollama · vLLM · 클라우드) 아무 데나 붙는 터미널 코딩 에이전트. 도구 12종과 5단계 권한, 서브에이전트·MCP·훅·스킬까지 직접 짜 넣고, 그 위에 계측을 얹어 "이 기법이 실제로 도움이 되나"에 숫자로 답합니다. 화면은 React 로 그리는데 브라우저가 아니라 터미널입니다.

  "토큰 비용이 0이면 시장이 생긴다"로 시작해 두 번 접었습니다. 먼저 상품 가설 — 비용 함수를 잘못 적었더군요. 로컬 추론용 GPU 값에 감가상각과 모델 갱신 락인까지 더하면, 사용한 만큼만 내는 클라우드 쪽이 오히려 예측 가능한 비용입니다. 그다음엔 "그래도 내가 매일 쓰는 도구"도 접었습니다. 일상 코딩은 이미 더 나은 도구가 있고(이 저장소도 그걸로 고칩니다), 기능 패리티를 쫓으면 정작 이것만 가진 것을 못 씁니다. 남은 것은 열려 있는 루프입니다 — 남의 닫힌 에이전트로는 "이 기법이 효과가 있나"를 잴 수 없습니다. 지금은 쓰려고가 아니라 재려고 고칩니다.

  분류: AGENT · 상태: 운영 중 · 사용 기술: React, LLM

  Koda CLI 열어보기

• RIM RATS

  실력을 릴리즈 타이밍 하나에 몰아준 길거리 농구

  8개국이 붙는 아케이드 길거리 농구. 3대3 풀코트 토너먼트(8강 → 결승)와 1대1 하프코트를 브라우저에서 바로 합니다. 스프라이트·효과음·BGM·브랜드 이미지까지 저장소 안에서 다시 구울 수 있습니다.

  물리로 림 통과를 판정하면 들어갈 것 같던 슛이 안 들어가고, 플레이어가 납득하지 못합니다. 그래서 순서를 뒤집었습니다 — 릴리즈 순간에 확률로 성공을 확정하고, 궤적을 그 결과에 맞춰 역산합니다. 거리도 수비 압박도 능력치도 상황이 주는 변수라, 플레이어가 순수하게 통제하는 것은 릴리즈 타이밍 하나만 남겼습니다. 숙련도 곡선을 거기에 몰아준 겁니다. 슈퍼슛 게이지를 공격이 아니라 수비 성공으로 채운 것도 같은 계산입니다. 뺏는 행위에 보상이 없으면 아무도 수비를 하지 않습니다.

  분류: SPORTS · 상태: 운영 중 · 사용 기술: TypeScript, Phaser, Vite, Python

  RIM RATS 열어보기

• Bannerholm

  2D 게임의 규칙을 화면에서 고친다

  타일맵 · 유닛 · 건물 · 전투 AI 에디터 넷이 한 스튜디오에 있습니다. 유닛을 배치해 실제로 싸움을 붙여 보며 고치고, 결과는 코드가 아니라 저장소의 JSON 으로 떨어집니다. 유닛 11 · 건물 10 · AI 프리셋 10.

  게임 하나가 아니라 게임을 만드는 자리를 만들었습니다. 규칙(스탯 · 건물 · 전투 AI)이 코드에 있으면 숫자 하나를 만질 때마다 다시 빌드해야 해서, 규칙은 전부 데이터로 내리고 엔진은 데이터가 시킨 것만 하게 했습니다. 게임 로직이 프레임워크를 모른다는 것도 약속으로 두지 않았습니다 — tsconfig 가 React · Next · Phaser 를 막힌 타입으로 돌려세워, 그 셋을 부르는 순간 타입 체크에서 걸립니다.

  분류: STUDIO · 상태: 운영 중 · 사용 기술: Next.js, React, TypeScript, Tailwind, Phaser, Canvas

  Bannerholm 열어보기