https://knitshare.link 로 들어가 접속할 수 있다
뜨개질 픽셀도안을 쉽게 제작하고 공유할 수 있는 웹사이트이다. 개인 프로젝트로서 유지 보수하기 쉬우면서 추가적인 데이터 서버 사용을 줄이기 위해 데이터를 링크에 저장하는 선택을 했다.
원래는 초심자도 쉽게 아두이노 게임기를 간단하게 만들 수 있는 아두이노 게임 생성기, 제작 튜토리얼 가이드를 목표로 만들고 있었다. 나름 한정된 용량을 가지고 변수 크기 하나마저도 고민하는 것이 재밌었는데 데이터 용량 줄이고 이런 부분들이 재미 있었는데.. 그런데 아무리 해도 초심자가 할 수 있을 만한 사이즈가 안나오는 것이었다. 작게 만드려면 납땜이 필수이고.. 쉬우면서 컴팩드하게 만들 수 있는 아이디어가 아무리해도 안 떠올랐다.
그래서 만들다가 일단 좀 미루기로 했고 거기서 픽셀로 캐릭터 만드는 부분은 따다가 단어 퍼즐 웹사이트를 만들었다. 단어 웹사이트는 단어 목록을 받아서 랜덤 dfs로 자동 배치해서 자동 퍼즐을 만들어주는 웹사이트인데 이거는 만들자마자 지치고 개인적인 기준에 못 미쳐서 따로 홍보하지 않았다.
그리고 지친 마음으로 러닝머신을 뛰고 있었는데 갑자기 아이디어가 생각이 났다. 뜨개질 배색 도안을 만드는 사이트를 만드는 것이다. 구성이라던가 핵심 요소는 단어 퍼즐 웹사이트를 거의 비슷하게 가져온 형태였다.
데이터를 공유하는 기능을 꼭 넣고 싶었는데 그러면 데이터 저장하는 서버가 거의 필수적이다. 데이터를 저장하려면 로그인 기능이 필요할 것 같고 로그인 기능이 있으면 사이트에 로그인을 유도하는 (웹사이트 가입을 하면 더 편리하게 사용할 수 있어요,앱을 다운로드 하면 더 편하게 사용할 수 있어요) 다크패턴을 넣어야할 것 같았는데 이런 패턴에 피로감을 느껴서 이런 형태를 피하고 싶었다.
그래서 생각해 낸 방법이 공유할 데이터를 링크에 넣는 것이었다. 링크 쿼리에 넣을 데이터를 만드는 페이지, 그 링크 쿼리를 읽어들여서 내용을 보여주는 페이지를 쌍으로 구성하면 서버 없이 데이터를 공유할 수 있었다.
데이터가 생각보다 커서 링크에 들어 갈 수 있는 최대 길이를 초과해 버리는 일들이 생겨서 골머리를 앓았다.
생각한 것보다 링크가 길어져서 고민을 하다가 jpg가 데이터를 압축하는 것을 떠올렸다.
같은 부분이 반복된다면 압축 할 수 있을 것 같아서 압축할 방법을 찾게 되었고 라이브러리 써서 구현하게 되었다. 여차하면 그냥 jpg가 압축되는 원리찾아서 비슷하게 구현할 셈이었다.
압축률은 비슷한 부분이 반복되는 경우에 정말 획기적인 성능을 보였다. 그래도 너무 무늬에 반복이 없으면 압축률이 낮아지고
기기마다 브라우저 이벤트가 다르게 작동해서 고전했다.
mouseup mousedown 이런 이벤트는 스마트폰에서는 작동하지 않는다. 스마트폰과 데스크탑 환경을 모두 만족하기 위해 pointer이벤트를 사용해줘야했다. pointer로 하면 스마트폰 데스크탑 동시에 쓸 수 있는데 살짝 다르게 작동하는 부분이 있었다.
여러 국가 사용자를 목표했기 때문에 다국어 제공을 고려했다.
일단은 영어, 일본어, 한국어를 제공한다.
영어는 공용어니까 추가하고 일본어는 일본에 뜨개질 취미인 이용자층이 많은 것 같아서 였다.
언어는 기기의 언어를 따랐다. gps로 사용자 위치로 판별할 수도 있겠지만 그러면 gps 이용동의를 받아야해서 안함.
다국어 지원은 잘한 선택이라고 생각한다. 외국어로 홍보하지 않았지만 조금이지만 해외에서도 방문해줬기 때문이다.
배포는 클라우드 플레어 pages를 사용했다. 옛날에는 netlify나 헤로쿠를 고려했겠지만.. 다 유료로 전환되거나 트래픽에 따른 과도한 비용 부과 이슈가 있어서 나는 클라우드 플레어로 완전히 이사하게 되었다. 클라우드 플레어는 아직은 거의 무료에 가깝고 무료로 제공하는 서비스도 많고 믿음직스럽다.
클라우드 플레어를 사용하다 보니 너무 만족스러워서 주식을 만원어치 샀는데 천원 떨어져서 구천원이 되었다.
배포 브랜치랑 디벨롭 브랜치를 나눠서 썼다. 더 세부적으로 나눌 필요성은 못 느껴서 심플하게 했다.
도메인.. 정말 고민이었다. 이전에 도메인을 샀을 때는 가비아에서 샀지만 비용을 더 아끼고 싶었기 때문이다. 아주 여러 곳에서 찾아봤는데 결국 namecheap에서 하기로 했다. 가장 큰 장점은 가격이 아주 저렴하다는 것이다. 가비아가 닷컴이 이만원 선이면 네임칩은 만사천원정도 한다고 생각하면 된다.
저렴한 만큼 서비스 불호 후기도 종종 보였는데 그냥 감수하고 가기로 했다.(무서운 후기를 봤는데 운영중에 본인 인증에 문제가 생겨서 namecheap에서 도메인 권한을 다 통째로 뺏어버렸다는 후기였다. 설마 나한테도 생기겠어 하는 마음으로 여기서 하고 있다.)
홍보는 원래 유튜브 쇼츠로 하려고 했었다. 유튜브 쇼츠는 임의로 관심있을 사용자들을 배정해 주기 때문이다. 즉, 사용자가 내 영상을 클릭해서 들어오는 게 아니라 넘기다가 유튜브가 관심있을거라 정해준 영상을 보여준다.
그렇게 숏츠로 올렸는데 유입이 잘 안돼서 그냥 직접적으로 사이트 사용 설명과 예시를 만들어서 올렸다. 그랬더니 생각보다 유입이 생겼고 입소문도 나면서 어느정도 사용자가 생겼다.
댓글로 받은 피드백을 기반으로 업데이트를 진행했다. 업데이트는 12에 했는데 업데이트 하고 공지를 만드는게 생각보다 오래 걸려서 다음번부터는 업데이트는 5시나 6시에 일찍 일어나서 하려고 한다.
당시에 비즈로 픽셀모양으로 만드는 게 유행이었는데 이거 할 수 있는 기능을 추가해두면 많이 쓰지 않을까해서 추가해뒀다 주제에 좀 비껴나간 느낌이라 고민이 많았는데 내가 쓰고 싶어서 넣었다.
동그라미 모양으로 여러개 보이게 되니까 착시현상이 생겨서 고민 좀 했다. 구슬 모양에 음영을 넣고 1px정도 다른 픽셀들과 띄웠더니 해결되었다.
이미지를 도안화 하는 기능을 피드백으로 받았을 때는 처음에는 너무 당황스러웠다. 어떻게 해야하는지 감이 잘 안잡혔기 때문이다.
일단 그림을 픽셀화 해야 했는데 일반적인 픽셀화랑은 조금 더 조건이 붙는 상황이었다.
학교에서 인공지능 수업에서 k means 배웠던 것이 떠올라서 이거를 이용해서 만들었더니 생각한대로 작동했다. 그래서 좀 신기했다. 이미지를 줄여서 사용했는데 브라우저 내에서 처리 하는데 사진이 너무 크면 처리 속도가 느려지는 부분을 고려했다. 일반적인 프사 사이즈가 저 정도라고 해서 저 정도로 줄이면 대부분의 사진이 적당한가보다 하고 나도 그렇게 했다.
초기 기획부터 계획에 있던 기능. 픽셀을 실제 뜨개질 모양으로 제공해준다.
이미지를 직접 제작해서 가공하고 넣어주는 식으로 했다.