게임 아이템 분석 사이트를 서비스했어요 - 메이플 추가옵션 분석기를 개발하며

얼마 전부터 이전 글에서 만들고있던 분석 사이트를 서비스하기 시작했어요.

 

생각보다 버그 수정과 호스팅에서 많은 시간이 소모되어서 예상했던 1월 중을 한참 넘긴 3월이 되어서야 공개하게 되었네요.

 

그래도 전역전에 실 서비스 할 수 있게 되어서 기쁘네요.

 

그동안 학교 선배 서버(...)나 무료 호스팅 같은 곳에 기생하다가 처음으로 사비를 들여서 해보는 호스팅이라 느낌이 새롭기도 하구요.

 

막 엄청난 서비스 같은건 아니지만 집이나 개인 환경이 아닌 부대 내 사이버지식정보방에서 배포까지 성공했다는 점에 의의를 두려고 합니다ㅠㅠ

 

 

메이플 추가옵션 분석기의 메인 화면

 

아무튼 그래서! 프로그래밍을 공부하며 생애 처음으로 한 배포 기념으로 이 프로젝트를 개발해온 과정과 거기서 느꼈던 점을 짧게 작성해보려고 합니다.

 

 

 

 

메이플 추가옵션 분석기 개발기

 

우선 처음으로 배포까지 염두했던 프로젝트라 고려해야 할 점들이 정말 많았어요. 놓치는 점도 많았겠지만 시작할때 최대한 빈틈을 메우고 시작해야 할 것 같아 처음으로 개발 계획에 공을 들였어요.

 

 

어떤 서비스를 만들것인가?

 기왕에 배포를 할 것이라면, 내가 잘 아는 내용이고 흥미가 있으며 다른 사람들에게 도움이 될만한 프로젝트를 하고 싶었어요.

 

그래서 선택한게 바로 게임 아이템 분석기.

 

입대 전까지 게임을 즐기고 있었고, 동시에 어렸을때는 잘 몰랐던 어른의(?) 눈으로 게임을 다시보니 아이템 하나가 적지 않은 현실의 화폐만큼의 가치를 가지더라구요.

 

곰곰히 생각해보니 이런 걸 몰랐을때는 높은 가치의 아이템을 모르고 버린다거나, 헐값에 팔아버리는 안타까운 경우가 한번쯤은 분명 있었을거에요. 이제 와서 안타까워해봐야 돌아오지 않지만...

 

게임에 대해 잘 모르는 사람도 아이템의 가치를 쉽게 알 수 있다면 그런 불상사가 일어나는 일은 없지 않을까? 하는 생각에 만들기로 결심했어요.

 

 

 

어떻게 서비스를 만들것인가?

 우선 저는 아직 군인 신분이고, 집이나 학교, 카페등에서 개발하기에는 현실적으로 어려웠어요. (못 나가니까...)

 

그래서 프로그래밍을 하려면 개인정비 시간과 주말을 이용하여 사이버지식정보방 PC를 이용하는 방법밖에는 없었는데, 이 공용 PC는 IDE 등의 프로그램을 제 마음대로 설치할 수 없었어요. 설치 한다고 해도 재부팅하면 사라지는 파일들과 IDE를 버티지 못하는 컴퓨터로는 도저히 불가능하다는 결론이 나왔고, 군 생활동안 애용하던 구름 IDE를 사용하기로 결정했어요.

 

 시간도 문제였어요. 실질적으로 활용할 수 있는 개인정비 시간은 하루에 많아야 두 시간. 그마저도 다른 할 일들이 있어 온전히 사용할 수 없었기에 처음부터 하나하나 짜내려면 완성보다 전역이 빠를 것이라는 생각이 들어서 프레임 워크를 이용하기로 했어요.

 

지금 상황에서 가장 익숙했던 프레임 워크는 역시 Vue.js 였어요.

국방부오픈소스아카데미 때부터 사용해왔던 Vue.js

 

 

그런데 안타깝게도 구름IDE에서 Vue.js를 기본으로 지원하지 않았고, 우분투 환경에서 직접 내려받아 사용하는 방법도 있었지만 분명 여러 문제들이 생겨 결국 시간 소모가 심해질거라고 판단해서...

 

구름에서 기본으로 지원하는 Express.js 를 사용해보기로 했어요.

 

직접 사용해본적은 없지만, 이미 제로초님의 유튜브 강좌도 들었던 상태여서 이 정도면 모르는건 찾아보며 진행해도 되겠다라는 생각이 들더라구요.

 

그렇게 기본적인 기술은 Node.js - Express.js 을 사용하기로 정해졌습니다.

 

추가로 디자인 쪽에는 영 소질이 없어서 CSS 하나하나 다 만들바엔 심플하고 이쁜 MDBootstrap을 사용하기로 했습니다. 이 선택은 지금도 아주 만족하고 있어요.

 

 

 

 

첫 번째 시련 - 노드가 뭐였더라..?

 

사실 프로젝트의 코어 기능인 가치 계산 부분은 구현에 큰 어려움이 없었어요. 이미 잘 아는 내용이기도 했고, 복잡하고 어려운 수식이 필요한 것도 아니어서 단지 약간의 노동이 필요할 뿐이었죠.

 

그렇게 프론트단은 큰 문제없이 술술 진행되었지만 문제는 백단이었어요.

 

사실 저는 Node.js에 대해 제대로 아는게 없었거든요. 그런데 프레임워크인 Express.js 까지 덮여버리니 문제가 생겨도 어디서 생긴건지, 어떻게 해결해야하는지, 심지어 뭐라고 검색해야 할지도 (ㅋㅋㅋㅋ) 모르는 상황에 맞닥뜨려버렸어요.

 

view 와 app.js 를 연결하지 못해서 끙끙대고, 파라메터를 제대로 넘기지 못해서 좌절하고, bodyparser 를 갖고도 보낸 데이터를 받지 못해서 삽질만 며칠을 했습니다.

 

결국 강의를 다시 정독하고, 노드와 익스프레스에 대한 기본적인 강의 글을 보이는대로 독파한 뒤에 문제를 해결할 수 있었어요.

 

역시 기본이 중요하단걸 다시 한 번 느끼게 되었습니다.

 

나를 괴롭히던 views

 

두 번째 시련 - 그런데 모바일은?

 

위의 문제를 해결하고 신나게 구현하던 차에 불현듯 모바일에서도 이렇게 보이나...? 하는 생각이 머리를 스쳤어요.

 

분명 화면이 작은만큼 PC에서 보이던 화면과는 분명 차이가 있을텐데 배치가 깨지거나 어긋나지 않을까 걱정되어 바로 접속해보았습니다.

 

부트스트랩을 적용한 덕분에 전체적인 틀은 어느정도 잡혀있던 상태였지만 커스텀으로 적용한 CSS들은 이리저리 날아가고 화면 밖으로 탈출하여 도저히 정상적인 이용이 불가능하던 상황이었습니다.

 

뾰족한 방법이 없으니 또 다시 검색과 삽질을 한 끝에 @media 속성에 대해 알게되었어요.

 

브라우저의 사이즈에 반응하여 개체의 크기를 조정할 수 있는 @media

 

 

@media 속성을 통해 적당하게 값을 손봐준 덕분에 모바일에서도 아래처럼 깔끔하게 화면이 나오게 되었습니다.

편안...

 

반갑다 모바일

 

 

세 번째 시련 - 호스팅 에러

 

구현이 끝났다고 해서 개발도 끝이 아니었습니다. 이제 이 프로그램을 공개하려면 호스팅을 해야 했는데, 호락호락하지 않았습니다.

 

사실 뭐 어렵겠어? 라고 대수롭지 않게 생각했다가 생각보다 어려워서 일주일을 내리 삽질했습니다...

 

처음엔 Google Firebase 를 사용하려 했습니다. Node.js를 지원한다고는 했지만 express로 제작된 이번 프로젝트 같은 경우 통째로 배포환경으로 이식하기가 너무 어려워서 결국 포기했습니다.

 

안되네...

 

 

두 번째로 시도했던건 AWS. 주변에 사용하는 개발자도 많고 무엇보다 나중에 반드시 쓸 일이 생길 것 같아 이번 기회에 써보려고 했는데 회원가입부터 막혀버렸습니다. 저의 경우 신용카드를 사용하지 않는데 체크카드로는 결제 정보 입력이 완료되지 않는 현상이 생겨버렸습니다. 돈이 있어도 쓰지를 못하다니... 결국 절망하고 발걸음을 돌려야했습니다.

 

 

제발 제 돈을 가져가주세요

 

 

 

남들이 많이 쓰고, 유명한 서비스들에게 차례로 쓴 맛을 보고나니 이젠 쉽게 배포만 시켜줬으면 좋겠다는 생각이 들었습니다. 기본적으로 한국어로 되어있고, 한국 사람들이 많이 써서 혹시라도 막히면 도움을 받을 수 있는 배포 경로를 찾던 중 홀연듯 cafe24가 머리를 스쳐 지나갔습니다.

 

그 길로 바로 cafe24를 검색해들어갔고 호스팅을 이리저리 살펴보았는데, node.js 서비스도 배포할 수 있을까 걱정이 되었지만 다행히도 node 호스팅을 지원했습니다!

 

스페셜호스팅!

 

바로 회원가입 후 1년 플랜을 결제했고, 내친김에 1년치 도메인까지 함께 구매했습니다. 생각보다 비싸진 않은 것 같아 안심했습니다.

 

이제 드디어 끝났구나... 속으로 생각하며 FTP로 파일들을 올려볼까 했는데 갑작스레 생각지도 못한 문제가 생겼습니다.

 

바로 Node.js 호스팅은 FTP를 지원하지 않는다는 것.

 

git이요...?

 

FTP로 파일을 올릴 수 없는 대신, git을 사용하여 파일 관리를 한다는 공지를 보자 당황스러웠지만, 늘 사용하던 git이려니 하고 진행하였습니다.

 

그런데 이게 웬걸, 메뉴얼에 나온대로 설정을 마치고 push 하려고 하니 오류 메시지가 저를 반겨주었습니다.

 

fatal: 'remote_nodejs' does not appear to be a git repository

Please make sure you have correct access rights and the repository exists.

 

??? 이런 메시지는 본 적이 없었는데...

재빨리 구글링을 해보고 찾은 해결법들을 그대로 적용시켜보았지만 여전히 묵묵부답이었습니다.

 

기껏 도메인이며 호스팅이며 다 구매했는데 배포 단계에서 막혀 답답했지만, ssh 접속으로 저장소가 있는 서버에 있는 모든 폴더와 파일들을 하나하나 다 까보기도 하고 이리저리 삽질해본 덕분에 gitolite, ssh 접속, public key 등등 평소에 써본적 없는 분야에 대한 지식도 조금이나마 생겨서 그리 나쁘지만은 않았습니다.

 

결국 해결은 안됐지만 고생하셨습니다

 

하지만 공부는 공부고 안되는건 안되는것... 결국 학교 선배에게 도움을 요청해 그 후로 내리 이틀을 온전히 배포에 투자했습니다.

 

그렇게 찾은 문제점 세 가지.

 

 

 

1. 구름IDE에서 public key 를 생성했을시 생성된 기본 폴더가 아닌 특정한 위치에 key 파일을 직접 넣어줘야 한다는 것.

 

 

2. ssh 관련 설정 파일을 직접 만들어서 넣어줘야 함.

 

 

3. gitolite가 Ubuntu 버젼이 16.04인 컨테이너에선 안되고 18.04인 컨테이너에선 잘 작동함. (프로젝트는 16.04 버젼으로 작업했음)

 

 

 

범인을 찾았다

 

 

 

다른건 그러려니 했는데 3번은 정말 상상도 못했습니다. 그렇게 삽질을 했는데 컨테이너에 설치된 우분투 버젼 문제였다니... 이걸 어떻게 찾았는지 지금도 신기하네요. 역시 선배님...

 

아무튼 약 일주일간의 괴로운 배포 과정 끝에 push에 성공했고, 최근에는 작게나마 패치도 정상적으로 수행하였습니다.

 

마지막이 잘 끝났으니 해피 엔딩이겠죠?

 

 

 

 

 

마치며...

 

힘들었지만 정말 많은 것을 배운 프로젝트였습니다.

 

기본적인 언어 사용부터 구현, 기획, 사용자 편의성 고려, 그리고 개발 외적인 부분들까지 대부분 처음 해 보는것들이라 얻어가는게 더 컸습니다. 이제 와서 생각해보니 실제로 서비스를 하는 것을 목표를 잡았던게 참 잘한 선택이었던 것 같습니다.

 

앞으로도 이 프로젝트는 꾸준히 업데이트 할 계획입니다. 처음 배포한 프로젝트인 만큼 저에겐 큰 의미가 있네요. 애정도 생기고...

 

이번 경험 덕분에 다음엔 더 빠르게, 완성도 있는 결과물을 낼 수 있을 것 같네요.

 

두서없는 글 읽어주셔서 감사합니다.

 

 

 

 

 

프로젝트 링크 - http://mapleitem.com/

깃 레포지토리 - https://github.com/kyr9389/mapleItemAnalyzer

패치노트 - https://blog.naver.com/PostList.nhn?blogId=kyr9389&categoryNo=9&from=postList&parentCategoryNo=9