Toolbit — Lightweight Web Tools
Toolbit
인터페이스는 검정, 색은 도구가 갖는다.
The interface stays black. The color belongs to the tool.
툴빗(toolbit.kr)은 계산기·변환기·뽑기 도구 스물세 개를 하나의 제품으로 묶은 웹 도구 사이트입니다. 무료 도구 사이트가 못생긴 건 실력의 문제가 아니라 그 화면이 한 사람의 두 번째 방문을 전제하지 않기 때문이라고 봤습니다. 그래서 도구를 만들기 전에 디자인 시스템을 먼저 쓰고, 스물세 개가 같은 규칙 위에서 자라도록 설계했습니다. 기획·디자인 시스템·캐릭터·프런트엔드 구현까지 혼자 진행한 개인 제품입니다.
Toolbit is a web utility site that binds twenty-three calculators, converters and drawing tools into a single product. Free tool sites look bad not because their makers lack skill, but because those screens were never designed for a second visit. So the design system came before the first tool — every tool grows on the same rules. Concept, design system, characters and front-end implementation: a solo product.
Twenty-three tools, one grammar — only the color band changes.
퍼센트 계산기 옆에 쇼츠 세이프존이, 만 나이 옆에 AI 영상 컷 타이밍이 있습니다. 성격이 다른 스물세 개를 한 제품으로 읽히게 만드는 건 규격입니다 — 높이·간격·타입 스케일은 전부 같고, 다른 것은 색 띠 하나뿐입니다.
The rulebook is published inside the product.
12스톱 앱 팔레트와 브랜드 컬러 한 칸, 도구마다 배정된 플랫 캐릭터 하나. 아웃라인도 그라디언트도 두 번째 채움도 없이 단색 면 하나로만 그립니다. 시스템 문서는 사이트 안에 그대로 공개해 뒀습니다(toolbit.kr/system.html) — 규칙이 밖에 나와 있으면 나중에 스스로 어기기 어려워집니다.
Tools that hand you a result, and tools that show you a process.
계산기는 입력에서 결과까지 짧을수록 좋습니다. 애니메이션은 방해입니다. 반대로 사다리타기·룰렛·경주마는 결과가 나오기까지의 몇 초가 존재 이유라, 게임 UI를 만들던 방식으로 연출했습니다. 색과 간격은 스물세 개가 함께 쓰지만 시간은 함께 쓰지 않습니다. 다만 연출이 확률을 기울이지는 않습니다.
Build
프레임워크도 UI 라이브러리도 쓰지 않았습니다. 정적 HTML과 바닐라 JS, 스타일시트 두 장이 전부이고 도구 페이지는 도구 정의에서 생성합니다. 계산은 전부 브라우저 안에서 끝나 입력값이 서버로 가지 않습니다. 설치하면 오프라인에서도 열리고, 로그인하면 자주 쓰는 도구를 도구함에 담아 기기 간에 꺼내 씁니다.
No framework, no UI library — static HTML, vanilla JS and two stylesheets, with tool pages generated from tool definitions. Every calculation runs in the browser, so nothing typed in leaves the device. Installable and offline-capable; signing in keeps a personal tool shelf across devices.