무료 도구 사이트는 왜 하나같이 못생겼을까 — 툴빗(toolbit.kr)을 만들며 확인한 것

만 나이를 계산하려고 검색을 합니다. 상위에 뜬 사이트를 열면 광고가 화면 절반을 차지하고, 입력창은 그 아래 어딘가에 있습니다. 결과를 누르면 결과 밑에 광고가 한 번 더 붙습니다. 계산은 3초면 끝납니다. 그 3초를 위해 광고를 두 번 지나갑니다.

저는 게임 UI와 비주얼 경험을 설계하는 일을 합니다. 그래서 화면을 보면 만든 사람이 무엇을 먼저 두었는지가 눈에 들어옵니다. 저 배치는 의도입니다. 광고를 먼저 보게 하고 계산은 그다음에 두기로 정한 결과입니다.

그래서 작고 가벼운 도구 열여덟 개를 한자리에 모았습니다. 툴빗(toolbit.kr)입니다. 숫자를 다루는 것, 이미지 크기를 재는 것, 순서를 뽑는 것, 시간을 재는 것이 전부 같은 규칙으로 만들어져 있습니다. 브라우저에서 바로 쓰고 설치도 가입도 필요 없습니다. 만든 이유와 만들면서 확인한 것을 적었습니다.

01. 그 화면들은 한 사람이 다시 올 것을 전제하지 않았습니다

웹에는 이런 도구가 넘칩니다. 저도 오래 써 왔고 쓸 때마다 같은 자리에서 걸렸습니다. 어떤 페이지는 값을 넣는 즉시 결과가 바뀌고 어떤 페이지는 버튼을 눌러야 합니다. 결과가 뜨는 위치도, 초기화가 어디 붙어 있는지도 페이지마다 다릅니다. 쓰기 전에 이 페이지가 어느 쪽인지부터 확인하게 됩니다.

어제 쓴 사이트와 오늘 쓴 사이트 사이에는 아무 관계도 없습니다. 도구 하나를 익힌 경험이 다음 도구로 이어지지 않으니 매번 처음부터 배웁니다. 광고가 도구보다 넓은 자리를 차지하는 건 그다음 문제입니다.

이 화면들은 한 사람이 여러 번 올 것을 전제하지 않습니다. 검색으로 들어와 한 번 쓰고 나가면 그걸로 수익 구조가 완결되기 때문입니다. 그 구조에서 완성도는 들일 이유가 없는 비용입니다. 못생겨도 되게 만들어진 화면입니다.

그럼 반대로 만들면 어떻게 되는지 궁금했습니다. 실험이었습니다. 디자이너로 쌓아 온 안목과 게임 UI에서 다뤄 온 엔터테인먼트 성격의 연출을 작은 규모로 구현해 보고, 새로운 디자인 형식이 시장에서 반응을 얻는지 확인해 보고 싶었습니다. 수익까지 붙는다면 더 좋고요. 크게 벌여 검증하는 대신 작게 내놓고 반응을 보는 쪽을 택했습니다. 일종의 MVP입니다.

질문은 하나로 좁혀집니다. 재방문을 전제로 만들면 화면은 어디부터 달라지는가.

02. 도구보다 규칙을 먼저 썼습니다

제일 먼저 달라지는 곳은 도구와 도구 사이입니다. 그래서 첫 도구를 만들기 전에 디자인 시스템부터 정리했습니다. 순서를 반대로 하면 열여덟 번째 도구쯤에서 첫 번째 도구와 남남이 됩니다.

규칙은 단순합니다. 인터페이스는 모노톤 블랙으로 고정하고 색은 도구가 갖습니다. 도구마다 12스톱 팔레트에서 색 하나를 배정하고 플랫 캐릭터 하나를 짝지었습니다. 그 색과 캐릭터의 조합이 그 도구의 아이덴티티 전부입니다. 한 페이지에는 도구 하나만 두고 그 도구가 하는 일도 하나로 좁혔습니다.

인터페이스에서 색을 뺀 데는 이유가 있습니다. 한 화면에서 색이 가장 먼저 눈에 걸리는 자리는 하나뿐입니다. 인터페이스가 색을 가지면 도구에게 남는 색이 없습니다. 배경과 버튼을 전부 무채색으로 내려놓고 나서야 빨강 하나로 퍼센트 계산기를, 초록 하나로 경주마 게임을 구분할 수 있게 됩니다.

시스템 문서는 사이트 안에 그대로 공개해 뒀습니다(toolbit.kr/system.html). 도구를 하나 더 붙일 때 색과 캐릭터를 고르는 자리가 거기 적혀 있습니다.

목록을 보면 결이 다른 것들이 섞여 있습니다. 연봉 실수령액 계산기 옆에 쇼츠 세이프존이 있고 만 나이 옆에 AI 영상 컷 타이밍 계산기가 있습니다. 앞의 것들은 누구나 쓰고 뒤의 것들은 영상 만드는 사람만 씁니다. 뒤쪽은 제가 작업하다 아쉬워서 만든 것들입니다. 성격이 이렇게 다른 열여덟 개가 한 화면에 놓였을 때도 한 덩어리로 보이는지, 그게 이 실험의 첫 번째 확인 사항이었습니다.

이 규칙 하나로 덮이지 않는 자리가 있었습니다.

03. 뽑기 도구는 빨라지면 안 됩니다

값을 내주는 도구의 원칙은 명확합니다. 입력에서 결과까지 짧을수록 좋습니다. 환율을 확인하거나 이미지 크기를 잴 때 연출이 끼어들면 그건 방해입니다.

사다리타기와 룰렛, 경주마 게임에서는 이 원칙이 뒤집힙니다. 커피 내기에서 결과는 어차피 3초면 나옵니다. 사람들이 화면 앞에 모여 있는 이유는 결과가 나오기까지의 그 몇 초 때문입니다. 결과를 주는 도구와 과정을 보여 주는 도구는 설계 목표가 다릅니다.

경주마는 달라 목마 실루엣을 스프라이트로 애니메이션했습니다. 가속하면 별 파티클이 튀고 가끔 넘어졌다가 일어나며 서로 침을 뱉어 방해합니다. 결과가 나오면 검정 콘페티가 올라오고 팡파레가 열 곡 중 하나로 재생됩니다. 다만 확률은 손대지 않았습니다. 모든 말이 같은 확률로 이기고, 침을 맞아 느려지는 것도 넘어졌다 따라붙는 것도 승패에 영향을 주지 않습니다. 뽑기 도구는 결과가 연출에 끌려간다고 보이는 순간 신뢰를 잃습니다.

전체화면 모드도 붙였습니다. 회의실 화면에 띄워 놓고 여럿이 보는 상황을 상정했는데, 이 모드를 만들고 나서야 이 도구들의 성격이 정리됐습니다. 사다리타기는 혼자 값을 확인하는 도구보다 여러 사람 앞에 거는 판에 가깝습니다.

04. 무엇으로 만들었는지

앞의 화면과 연출을 무엇으로 만들었는지 정리합니다.

밖으로 나가는 요청은 Google Fonts(Archivo, IBM Plex Mono)와 CDN의 Supabase JS, Google Analytics뿐입니다. 도구에 입력한 값은 그중 어디에도 실리지 않습니다.

05. 세 개의 버그는 전부 제 모니터 밖에 있었습니다

위의 스펙과 화면은 전부 제 모니터에서 확인한 것입니다. 밖으로 나가자 다른 게 나왔습니다.

구글 검색결과에 파비콘이 점처럼 찍혀 있길래 파일을 열어 봤더니 캔버스만 크게 잡히고 정작 그림은 구석에 작게 박혀 있었습니다. 링크 공유용 카드 열아홉 장도 같은 이유로 잘려 있었고 카드 쪽은 링크를 실제로 공유해 보기 전까지 드러나지 않았습니다. 사다리타기는 모바일에서 세로줄이 통째로 사라져 있었습니다. 세로줄에 붙인 클래스 이름이 사이드바와 같아서 좁은 화면에서 사이드바를 숨기는 규칙이 선까지 함께 지웠습니다.

셋 다 제 모니터 밖에서 발견됐습니다. 파비콘은 구글 검색결과에서 봤고, 공유 카드는 메신저로 링크를 보내 보고서야 알았습니다. 세로줄은 다른 사람의 휴대폰에서 사라져 있었습니다. 제 화면에서는 전부 멀쩡했습니다. 눈으로는 하나도 잡히지 않아서, 브라우저를 띄워 실제 픽셀과 좌표를 재고 나서야 나왔습니다.

지금은 파비콘과 공유 카드를 스크립트로 굽고 배포할 때마다 브라우저를 열어 값을 확인합니다. 개인 프로젝트를 배포하시는 분께 하나 권한다면 확인 지점을 자기 화면 밖에 세 군데 정해 두는 것입니다. 구글 검색결과, 메신저 링크 미리보기, 그리고 폭 375px.

06. 네 번째는 아직 못 쟀습니다

그런데 이 방식으로 아직 재지 못한 것이 하나 남았습니다.

쓰레드와 인스타그램, 카카오톡 채널이 있어서 알릴 자리는 있었고 시작할 때 그 채널들을 믿은 면도 있는데, 요즘 본업이 바빠 채널 관리에 손을 놓았고 주변 반응도 생각보다 없었습니다. 이 부분이 제일 아쉽습니다.

솔직하게 정리해 둘 것이 있습니다. MVP가 확인해야 하는 질문은 두 개입니다. 만든 것이 쓸 만한가, 그리고 그것을 알릴 수 있는가. 두 번째를 실행하지 않았기 때문에 첫 번째의 답도 아직 모릅니다. 반응이 없다는 사실은 제품에 대한 데이터가 아니라 유통에 대한 데이터입니다. 이걸 제품 실패로 읽으면 엉뚱한 것을 고치게 됩니다.

현재 상태는 도구 열여덟 개, 전부 무료입니다. 계정을 만들면 자주 쓰는 도구를 도구함에 담아 기기 사이에서 동기화할 수 있고 계정이 하는 일은 그게 전부입니다. 다음 계획은 도구를 늘리기 전에 지금 열여덟 개가 검색에 어떻게 걸리고 열어만 보고 나가는지를 보는 것입니다.

세 개의 버그는 브라우저로 재서 잡았습니다. 네 번째, 이 제품이 시장에서 쓸 만한지는 아직 못 쟀습니다. 재는 방법은 있습니다. 밖에 내놓는 일을 제가 미뤘을 뿐입니다. 화면 안에서 멀쩡한 것은 아직 아무것도 아닙니다. 파비콘도 사다리 세로줄도 그랬고 제품도 마찬가지입니다.

필요한 도구가 있으면 사이트 하단에서 제안하실 수 있습니다. 만들어지면 알려 드립니다.

toolbit.kr →