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

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

저는 게임 UI와 비주얼 경험을 설계하는 일을 합니다. 그래서 이런 화면을 보면 만든 사람의 실력보다 그 화면이 무엇을 위해 배치됐는지가 먼저 보입니다. 저 레이아웃은 계산을 빠르게 끝내라고 만들어진 것이 아닙니다.

그래서 도구 열여덟 개를 한 덩어리로 묶은 사이트를 만들었습니다. 툴빗(toolbit.kr)입니다. 퍼센트 계산기부터 사다리타기, 뽀모도로 타이머까지 브라우저에서 바로 쓰고 설치도 가입도 필요 없습니다. 만든 이유와 만들면서 확인한 것들을 적어 둡니다.

01. 그 화면들은 무엇을 위해 만들어졌나

웹에는 이런 도구가 넘칩니다. 저도 오래 써 왔습니다. 그런데 쓸 때마다 같은 느낌이 남았습니다. 기능은 멀쩡히 도는데 완성도가 아쉽고 무엇보다 하나의 제품처럼 느껴지지 않았습니다.

이유를 화면에서 찾자면 세 가지가 보이는데, 광고가 도구보다 넓은 자리를 차지하고, 버튼과 입력창의 크기와 간격이 페이지마다 제각각이고, 어제 쓴 사이트와 오늘 쓴 사이트 사이에 아무 관계가 없다는 점입니다. 세 번째가 특히 큽니다. 도구 하나를 익힌 경험이 다음 도구로 이어지지 않으니 사용자는 매번 처음부터 배웁니다.

이 화면들에는 한 사람이 여러 번 올 이유가 설계돼 있지 않습니다. 검색으로 들어와 한 번 계산하고 나가면 그걸로 수익 구조가 완결됩니다. 완성도는 그 구조에서 필요하지 않은 항목입니다. 못생겨도 되게 만들어진 화면인 셈입니다.

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

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

첫 도구를 만들기 전에 디자인 시스템부터 정리했습니다. 순서를 반대로 하면 열여덟 번째 도구쯤에서 첫 번째 도구와 남남이 됩니다.

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

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

시스템 문서는 사이트 안에 그대로 공개해 뒀습니다(toolbit.kr/system.html). 규칙이 문서로 밖에 나와 있으면 나중에 스스로 어기기가 어려워집니다.

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

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

계산기의 원칙은 명확합니다. 입력에서 결과까지 짧을수록 좋습니다. 퍼센트 계산기에 애니메이션을 넣으면 그건 방해입니다.

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

경주마는 달라 목마 실루엣을 스프라이트로 애니메이션했습니다. 가속하면 별 파티클이 튀고, 가끔 넘어졌다가 일어나고, 서로 침을 뱉어 방해합니다. 결과가 나오면 검정 콘페티가 올라오고 팡파레가 열 곡 중 하나로 재생됩니다. 다만 확률은 손대지 않았습니다. 방해도 역전도 전부 보여 주기 위한 연출이고 누가 이길지는 균등합니다. 연출로 긴장을 만들되 결과를 기울이지 않는 선은 게임 UI에서도 늘 지키던 부분입니다.

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

04. 세 개의 버그가 전부 제 화면 밖에 있었습니다

만들면서 제일 크게 남은 것은 검증 방법이었습니다.

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

세 문제의 공통점은 발견된 장소입니다. 파비콘은 구글 검색결과에서, 공유 카드는 남의 메신저에서, 세로줄은 남의 휴대폰에서 깨져 있었습니다. 제 모니터 안에서는 셋 다 멀쩡했습니다. 눈으로는 하나도 잡히지 않았고 브라우저를 띄워 실제 픽셀과 좌표를 재고 나서야 나왔습니다.

지금은 파비콘과 공유 카드를 스크립트로 굽고 배포할 때마다 브라우저를 열어 값을 확인합니다. 개인 프로젝트를 배포하시는 분께 하나 권한다면 이겁니다. 로컬에서 멀쩡해 보이는 화면은 아직 확인 전입니다.

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

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

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

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

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

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

toolbit.kr →