못생긴 무료 도구 사이트, 디자이너가 다시 만들어 봤습니다 – toolbit

광고를 두 번 지나가야 하는 계산기

만 나이를 계산할 일이 있어서 검색을 했습니다.
맨 위에 뜬 사이트를 열었는데, 화면 절반을 덮은 배너, 스크롤 아래로 밀려난 입력창, 결과 밑에 한 번 더 붙은 광고가 차례로 나왔어요.

3초면 끝나는 계산이었는데 광고를 두 번 지나갔습니다. 그런데 이상하게 화가 나기보다는 궁금해졌어요. 이런 사이트는 왜 하나같이 이렇게 생겼을까.

게임 UI를 오래 설계하다 보면 화면을 볼 때 버릇이 생깁니다. 만든 사람이 무엇을 제일 먼저 보여 주고 싶었는지부터 보게 되거든요. 그 사이트가 먼저 보여 주고 싶었던 건 계산이 아니라 광고였겠죠.

그래서 직접 만들어 봤습니다. 계산기, 이미지 크기 재기, 사다리타기, 타이머처럼 자주 쓰는 작은 도구 열여덟 개를 모은 무료 사이트, ‘툴빗’입니다.

매번 처음부터 다시 배우는 사이트들

오래 써 보니 광고보다 더 불편한 게 있었습니다. 사이트마다 쓰는 법이 전부 달라요.

숫자를 넣자마자 결과가 바뀌는 곳, 버튼을 눌러야 계산되는 곳, 결과가 위에 뜨는 곳, 아래에 뜨는 곳, 초기화 버튼이 어디 숨었는지 한참 찾아야 하는 곳. 어제 쓴 계산기에 익숙해져도 오늘 여는 계산기에서는 다시 처음부터 시작입니다.

이유를 생각해 보면 단순합니다. 대부분의 도구 사이트는 검색으로 들어온 사람이 한 번 쓰고 나가면서 광고를 보는 구조로 돌아가죠. 다시 올 사람을 기다리지 않으니, 화면을 다듬을 이유도 크지 않았을 겁니다.

그래서 툴빗은 거꾸로 ‘자주 다시 오는 사람’을 기준으로 잡았습니다. 하나를 익히면 나머지도 바로 쓸 수 있는 사이트. 제가 제일 먼저 정한 목표였습니다.

색은 도구에게만

첫 도구를 만들기 전에 규칙부터 정했습니다. 도구를 하나씩 만들다 보면 그때그때 모양이 조금씩 달라지고, 열여덟 개가 쌓이면 서로 다른 사이트처럼 보이기 쉽거든요.

규칙은 두 가지였어요. 화면의 뼈대는 검정과 회색으로만 만들 것. 그리고 색은 도구에게만 하나씩 줄 것. 도구마다 색 하나와 캐릭터 하나를 짝지어서, 그 조합만 보고도 어떤 도구인지 알아볼 수 있게 했습니다.

뼈대에서 색을 뺀 건 사람의 눈이 색 있는 곳부터 보기 때문입니다. 버튼이나 배경에 색이 들어가면 정작 도구를 구분하는 색이 묻혀 버려요. 뼈대를 조용하게 두니까 빨간색은 퍼센트 계산기, 초록색은 경주마 게임처럼 색만으로 구분이 됐습니다.

이 규칙이 제대로 버티는지는 성격이 전혀 다른 도구를 나란히 놓아 보면 알 수 있었어요. 누구나 쓰는 연봉 실수령액 계산기 옆에, 영상 만드는 사람만 쓰는 쇼츠 세이프존 확인기가 있습니다. (뒤쪽 도구들은 솔직히 제가 작업하다 필요해서 만든 것들입니다.)

쓰임이 이렇게 달라도 한 사이트처럼 보이는 것. 규칙을 먼저 세운 이유였습니다.

정리한 규칙은 사이트 안에 그대로 공개해 뒀습니다(toolbit.kr/system.html). 새 도구를 붙일 때 색과 캐릭터를 고르는 기준이 적혀 있어요.

뽑기는 천천히

계산기나 변환기는 빠를수록 좋습니다. 숫자를 넣고 결과를 보면 끝이라, 그 사이에 애니메이션이 끼어들면 방해가 되죠.

그런데 사다리타기나 룰렛, 경주마 게임은 조금 다르다고 느꼈습니다. 커피 내기를 할 때 사람들이 화면 앞에 모이는 건 결과가 궁금해서만은 아니거든요. 결과가 나오기까지의 그 몇 초가 재미있는 거죠.

그래서 경주마 게임에는 연출을 잔뜩 넣었습니다. 달리다 속도를 올리면 튀는 별 조각, 가끔 넘어졌다 일어나는 목마, 서로를 방해하려고 뱉는 침, 결승선에서 터지는 콘페티, 열 곡 중 하나로 울리는 팡파레.

대신 확률은 건드리지 않았어요. 모든 말의 이길 확률은 똑같고, 침을 맞거나 넘어지는 건 승패와 아무 상관이 없습니다. (침을 맞아도 느려지는 ‘척’만 하는 셈이죠.) 뽑기 도구는 결과가 연출에 끌려간다고 느껴지는 순간 믿을 수 없게 되니까요.

여럿이 같이 보는 순간을 위해 전체화면 모드도 붙였습니다. 회의실 모니터에 띄워 놓고 다 같이 결과를 기다리는 장면을 떠올리면서요.

무엇으로 만들었나

툴빗은 별도의 프레임워크 없이 HTML, CSS, 자바스크립트로 만든 정적 사이트입니다. 계산은 모두 브라우저 안에서 끝나고, 도구에 입력한 숫자나 이름은 서버로 보내지 않아요.

계정은 없어도 됩니다. 만들면 자주 쓰는 도구를 모아 두고 다른 기기에서도 이어 쓸 수 있는데, 계정이 하는 일은 딱 거기까지입니다.

아직 모르는 것

솔직히 아직 모르는 게 하나 있습니다. 사람들이 툴빗을 좋아하는지요.

스레드와 인스타그램에 알릴 자리는 있었는데, 본업이 바빠지면서 제대로 알리지 못했습니다. (바빴다는 건 반쯤은 핑계겠죠…) 주변 반응도 생각보다 조용했어요.

그런데 지금의 조용함이 무슨 뜻인지는 알 수가 없습니다. 도구가 별로라서 조용한 건지, 아직 아무도 몰라서 조용한 건지 구분이 안 되거든요. 그래서 도구를 더 늘리기 전에, 검색으로 들어온 사람들이 어떤 도구를 얼마나 쓰다 나가는지부터 들여다보려고 합니다.

만드는 일은 끝까지 해 봤습니다. 이제 남은 건 알리는 일이에요. 거기까지 가 봐야 제가 만든 것에 대한 진짜 대답을 들을 수 있지 않을까요.

필요한 도구가 있다면 사이트 아래쪽에서 제안해 주세요. 만들어지면 알려 드릴게요.

toolbit.kr →