무료 텍스트 생성기를 만들었습니다. 이를 통해 배운 점들을 공유합니다.
몇 달 전 작은 사이드 프로젝트를 시작했습니다. 'Tulisan Aesthetic'이라는 도구입니다. 일반 텍스트를 스타일리시한 유니코드 폰트로 변환해 줍니다. 사용자들은 인스타그램 프로필, 틱톡 캡션, WhatsApp 상태 메시지 등에 이를 사용합니다.
HTML, CSS, vanilla JS로 제작했습니다. 대규모 유니코드 문자 맵을 사용했습니다.
이 도구는 표준 문자를 폰트처럼 보이는 수학 기호로 교체하는 방식으로 작동합니다. 이는 커스텀 폰트를 지원하지 않는 곳에서도 작동합니다.
사용자 데이터를 통해 배운 세 가지는 다음과 같습니다.
- 모바일이 전부입니다.
사용자의 60%가 모바일일 것이라고 생각했지만, 실제로는 85% 이상이 모바일 사용자였습니다. 이로 인해 디자인 접근 방식이 바뀌었습니다. 엄지손가락으로 누르기 쉽게 복사 버튼을 크게 만들었습니다. 폰트 목록은 부드럽게 스크롤되도록 했습니다. 최소 폰트 크기를 16px로 설정하여 iOS의 자동 줌 문제를 해결했습니다.
소셜 미디어 사용자를 위한 서비스를 만든다면, 모바일을 우선적으로 디자인하세요. 데스크톱은 그다음입니다.
- 핵심 동작에 집중하세요.
처음에는 다중 열 그리드(multi-column grid)로 시작했습니다. 데스크톱에서는 보기 좋았지만 모바일에서는 실패했습니다. 사람들이 도구를 어떻게 사용하는지 관찰했습니다. 그들은 오직 복사 버튼만을 원했습니다. 나머지는 모두 노이즈였습니다.
도구를 단일 스크롤 목록으로 다시 만들었습니다. 각 스타일은 고유한 행을 가지며 명확한 복사 버튼이 있습니다. 이 변화로 참여도가 높아지고 이탈률이 낮아졌습니다.
도구가 존재하는 단 하나의 목적을 찾으세요. 그 동작을 아주 쉽게 만드세요.
- 속도가 곧 SEO 전략입니다.
광고에 단 1달러도 쓰지 않았습니다. 모든 성장은 유기적 검색(organic search)을 통해 이루어졌습니다.
이 분야의 대부분의 도구는 느리고 광고로 가득 차 있습니다. 제 도구는 가볍습니다. 전체 페이지 용량은 80KB 미만입니다. Lighthouse 점수는 98점 이상입니다. 도구가 빠르게 로드되기 때문에 검색 결과에서 더 높은 순위를 차지했습니다.
니치(niche)한 도구의 경우, 성능이 검색 순위를 높이는 핵심입니다.
기술적 세부 사항:
- 프론트엔드: Vanilla HTML, CSS, JS.
- 페이지 용량: 80KB 미만.
다시 한다면 처음부터 더 많은 언어를 추가할 것입니다. 인도네시아와 브라질에서 즉각적인 트래픽이 발생하는 것을 보았습니다. 그럴 준비가 되어 있지 않았습니다.
도구 체험하기: tulisanaestheticid.com