토이프로젝트 개편하기 ~0탄~

예정된 시행착오가 기다리고 있는 토이 프로젝트 개발일지

이번에 2019년도에 제작해서 배포했던 토이프로젝트를 개편하려고 한다.

기존 프로젝트는 무엇인지?

TRPG라고 하면 보통은 그게 뭔지 모르므로 보드게임이라고 칭하겠다. 보드게임을 온라인에서 플레이할 때 사용할 수 있는 이미지를 제작해주는 사이트였다. HTML, CSS, JavaScript(JQuery)로만 만들었고, 기능은 썩 대단한 것은 없지만 SNS에서 1000회가량 공유되었다. 해당 프로젝트에는 대략 아래와 같은 기능이 있다.

1. 1단계인 텍스트 정보를 입력한다.

2. 2단계인 이미지 편집 버튼을 누른다.

3. 배경 이미지는 직접 업로드하거나 검색해서 찾을 수 있다.

4. 색상, 폰트를 골라셔 좀 더 이미지를 꾸민다.

5. 다운로드 버튼을 눌러서 이미지 저장!

이렇게 이렇게 하면 이렇게 저렇게 되는거거든요...

위 기능 외에도 다른 것도 있지만, 가장 공유가 많이 되었던 기능을 소개한 것이다.

무엇을 개편하려고 하는가에 대하여...

• 만들 수 있는 이미지 종류의 수를 늘리고 싶다.
• 사이트의 UI를 세련되게 바꾸고 싶다.
• 사이트의 성능을 개선하고 싶다.
• jQuery에서 벗어나 JavaScript의 최신 문법을 사용하고 싶다.
• 빌드 자동화 툴(gulp)을 사용하고 싶다.

지금은 한가지의 룰을 위해서만 사이트가 제작되었다. 보드게임으로 치면 부루마블만을 위한 사이트인 것이다. 하지만 난 여기서 원카드나 체스를 위한 기능을 추가하고 싶어 졌다고 보면 된다. 그리고 UI를 바꾸고 싶은 이유는... 기존 UI는 최대한 빨리 만들어서 배포하고 싶은 마음에 디자인을 하지 않았기 때문이다. (그냥 못생겼다)

사이트 성능 개선은 데이터를 바꿀때 마다 이미지를 새로 렌더링하고 있기 때문에, 현재 상태는 매우 성능이 좋지가 않다. 그런 이유 때문에 텍스트를 입력하는 1단계와 이미지를 편집하는 2단계로 나눴지만 그 정도로는 부족하다. 사이트가 반응형이기 때문에 화면 사이즈 별로 이미지 미리 보기 화면의 크기가 변하는데, 그것을 비율 맞춰서 보여주기 가장 편했던 방법이 img태그에 object-fit:contain속성을 추가하는 것이었기 때문이다. 하지만 이건 몹시 매우 좋지 않은 방법이었다.

이것좀 봐. 경고가 이렇게 많잖아.

경우에 따라서는 브라우저가 멈춰버릴 것 같다. 😥 예전엔 이런 성능을 측정하고 개선하는 방법을 몰랐지만, 조금은 성장했으니까 이걸 멋지게 고쳐볼 것이다.

남은 두가지 이유 (4번, 5번)은 사용자보다 개발자의 사정이다. 2019년도의 나는 주로 jQuery로 작업을 했기 때문에 바닐라 자바스크립트로 작업하는 것보다 jQuery로 작업하는 속도가 빨랐다. 하지만 앞으로 자바스크립트 최신 문법을 사용하여 연습하고 싶다는 욕심이 들었다. (사실 이 프로젝트의 특성을 미루어 리액트가 더 적합하다고 생각이 들지만..서도.) 또한 이전 작업할 때 빌드 자동화 툴을 쓰지 않아서 번거로웠기 때문에, 작업 시간과 편의성을 위해 gulp를 도입하려고 한다. 빨리 완성해서 배포하고 싶으니까. (당장 리액트를 안쓰는 이유도 이것이다. 리액트가 아직 생소하기 때문에 비교적 쉬운 프로젝트부터 연습해서 익숙해지고 싶다. 처음부터 내 기준에서 너무 어려운 프로젝트를 하면 계속 실패하는 경험을 겪게 될 것이기 때문에)

정말 그게 전부인가?

아니요... 그리고요.....😂

• 사이트 방문자 통계를 확인하고 싶다.
• 도메인 값이라도 벌고 싶다.

기존 사이트에는 일부러 통계를 측정하지 않았다. 왜냐하면 게시글 조회수를 신경쓰는 타입이기 때문에.. 사용자 숫자에 연연하고 싶지 않았기 때문이다. 결과적으로 말하면 좋은 생각은 아니었던 것 같다. 사이트 자체가 얼마나 가치가 있는지, 내가 새로 개발한 기능이 얼마나 가치가 있었는지 수치적으로 전혀 알 수 없었다. 짐작할 수 있는 건 SNS에서 얼마나 공유되었는지 정도지만 그래서 실제 사용자가 얼마나 되는지는 추측하기 어려웠다. 사이트에 대한 통계는 필요할 것 같다.

처음엔 내가 만든 사이트로 돈을 벌 생각은 꿈도 꾸지 않았다. 그정도로 가치가 있는지도 모르겠고. 그냥 코딩 연습이 된다면 충분하고 생각했다. 하지만 돈을 벌고 싶다고 생각을 바꾼 이유는 두 가지로 나뉘어 있다.

• 사이트를 만들 동기가 된다.
• 사이트의 가치를 확인할 수 있다.
• 정말로 돈이 없다.

결국은 사이트 방문자를 확인하고 싶은 것과 같은 이유다. 그게 핵심이고. 구글 애드센스 등에 광고를 붙여서 수익이 된다면 좋은 동기가 될 수 있겠지만, 돈을 벌지 못한다해서 동기가 되진 않을 것 같다. 돈이 되든 안 되는 이 정도 사이트는 얼마큼의 가치가 있는지 측정할 수 있는 좋은 실험이 된다. (그 과정에서 도메인 값이라도 벌고 싶다는 소망이 있긴 하지만...)

무엇을 할지는 정했다.

이제 이런 내 희망사항들을 어떻게실현 할지... 기획해보자.

 

 

토이프로젝트 개편하기 ~1탄~