1인 개발자의 롤 전적 검색 사이트 5stack.gg 개발기

이 글을 시작으로 5stack.gg 1인개발기와 서비스나 업데이트 소식에 관련된 이야기 들을 틈틈히 쓰려고 합니다.

전 웹개발자가 아닙니다. 프런트 엔드 역시 HTML, CSS, 자바스크립트는 잠깐 공부만 했을 뿐, 거의 써볼 일이 없었습니다. 블로그 이름을 보시면 알 수 있을 겁니다.

프로그래밍 언어야 다 닮은 구석이 있어 배우는 것은 시간이 해결해 주지만 웹 서비스라는 큰 톱니바퀴들을 맞물리게 하는 것이 참 디테일한 작업이더라구요. 

그래서 5stack.gg를 만들기까지 참 많은 난관이 있었네요. 애초에 웹 개발자는 아니고 자문 구할 곳도 없어서 더 그랬네요.

아무튼 어찌하다 이렇게 서비스를 시작하게 되었습니다. 아직 아무도 이 사이트의 존재를 몰라서 방문자가 가뭄에 콩 나듯 합니다. ㅠ

그래도 감사합니다.

현재 한국에는 오래된 롤 전적 검색 사이트들이 있습니다. 

이런 사이트들의 존재가 분명 제가 만든 사이트의 동기부여 역할을 한 것은 사실입니다.

그렇지만 모방이 아닌 제가 구상한 것을 그대로 만들고 싶어졌습니다.

5stack.gg5stack.gg - Riot API로 제공된 데이터로 만든 경기요약 애니메이션.


아직 사이트(5Stack.gg)가 초창기라 구현하지 않은 컨텐츠들이 많습니다. 1인 개발이기 때문에 데이터베이스 모델링부터 백엔드, 프런트엔드 + 인프라까지 모두 구현하려면 분업에 비해 3~4 배로 시간이 걸립니다. ㅠ 하지만 웹 서비스 전체 기술을 다 알고 문제해결을 혼자해야하기 때문에 시간은 좀 걸리더라도 협업에서의 소통의 오류가 적을 수 있다는 장점도 있습니다.(하지만 쉬기 힘들겠죠 ㅠ)

사이트를 보면 다른 전적 사이트들과 비슷한 부분도 있을 겁니다. 기본적으로 Riot에서 제공되는 Api를 이용하기 때문이죠.

5stack.gg -  모바일 화면5stack.gg - 모바일 화면


실제로 전적 분석 사이트들이 제공하는 데이들은 비슷한 것을 볼 수 있습니다. 앞서 말했듯이 사용되는 데이터가 동일하니까요. 그 안에서 데이터를 가공해서 정보를 보여주는 것이고요.

리그오브 레전드의 약 20~30분간의 게임경기를 하게 되면 정말 많은 데이터들이 생깁니다. 예를 들어 게임 내에서 아이템을 팔았다가 다시 취소하는 것도 기록됩니다.

이런 모든 데이터를 다 쓸 수는 없습니다.  중요하거나 원하는 것을 적절히 골라내서 그대로 또는 가공해야겠죠.

처음 사이트에 대한 구상은 Riot에서 제공되는 데이터로부터 시작됩니다. 그리고 사람들이 어떤 데이터에 관심을 두는지에 대해서도 잘 캐치를 해야 합니다.

그러니 기본적으로 이런 사이트를 만들기 위해서는 해당 데이터에 대해서 잘 알고 있어야 겠죠..

이렇게 데이터에 대해 분석을 하면서 사이트 만들기가 시작되었습니다.

사실 데이터 분석을 하는 것 자체로도 꽤 재밌어서 처음에는 서비스를 만들기보다는 데이터 분석에 치중해 있었습니다.

머신러닝과 딥러닝 라이브러리를 이용해서 다양한 시도도 해보았습니다. 이런 시도들이 제가 만드는 사이트의 앞으로의 발전 방향에 영향을 주었습니다. (아직은 구현되지 않은 기능들은 빅 데이터를 사용하기에 사이트가 어느 정도 서비스되고 데이터들이 많이 쌓여야 가능해집니다. 그래서 아직 어쩔 수 없이 구현하지 않은 기능들이 있습니다. )

전 리그오브 레전드가 한국에 서비스되기 전부터 북미 서버에서 게임을 하고 있었습니다. 그게 2010년인가 그런 것 같네요. 그래서 많이 관심 갖는 게임이라 더 재밌게 분석한 것 같습니다.

그런데  분석한 내용을 서비스로 만들어 여러 사람들에게 제공하는 것이 목표였는데, 정작 아직 웹사이트가 없으니, 당장 만들어야 할 필요성이 느껴졌습니다.

이렇게 고난이 시작되었습니다.

나름 그래도 개발자라 이론적인 것들은 가지고 있었지만 지금 이렇게 사이트를 만들고 드는 생각은 모르면 용감해진다는 것입니다.

아직 개선 업그레이드할 부분이 참 많지만 지금 서비스를 겨우 할 정도로 완성을 하고나니 정말 힘든 도전을 멋모르고 쉽게 시작했다 싶습니다. 사실 전 서버 인프라를 구축하는 것만으로도 정말 많이 배웠거든요. 그래도 끝이 안 나는 게 함정이라면 함정입니다.

그러니 서버(서비스) 인프라를 구성하다보면 데이터베이스 모델링이나 백 엔드 로직, 프런트엔드를 어떻게 할지.. 이런 생각들로 머리가 터저나가기 시작합니다. 왜냐면 전 웹 개발경험이 전무했기 때문입니다. ㅠ

하나하기도 벅찬데 컴퓨터도 아닌 웹개발 0스택 개발자가 컨텍스트 스위칭을 해가면서 개발을 하려니 답도 없었네요.  그러니 서비스에 오류나 비효율적인 설계도 있게 됩니다. 

예를 들어 아래 그림은 5stack.gg 가 제공하는 랭킹 서비스 입니다. 하지만 비효율적이고 다른 사이트에 비해서 시간차 오류가 있습니다.  

5stack.gg- 랭킹5stack.gg- 랭킹

문제는 DB 모델링이 효율적이 않기 때문입니다. 이걸 설명하려면 좀 길기 때문에 따로 지면을 할애 하겠습니다. 

어쨌든 처음엔 어떻게 모델링을 해야할지 조차 감도 안잡혔는데 지금은 좀 더 효율적인 방법으로 모델링할 수 있는 방법을 알아냈으니 나름 발전된 것 같네요. DB를 건드리려면 백엔드 로직도 변경되고 잘 못하면 API 변경도 되기 때문에 우선 쉬운 것들을 해결 한 후 건드릴 생각입니다. 

또 앞으로 개선해야할 오류 중에 소환사 포지션 정보가 잘 못 된 부분입니다. 아래 그림에서 소환사 포지션 정보가 잘못되었습니다. (만약 포지션 정보가 개선되면 플레이 요약의 가독성이 높아질 거라 생각됩니다.)

5stack.gg5stack.gg - Riot API로 제공된 데이터로 만든 경기요약 애니메이션.

기본적으로 Riot에서는 제공하는 API는 소환사 포지션 정보는 부정확할 경우가 더러 있습니다. 왜냐면 선호 포지션과 실제 게임에서의 포지션을 다를 수 있으니 말입니다. 탑과 봇의 스왑이라면 더욱더 애매해 집니다. 

그렇기 때문에 100% 완전히 포지션을 알아낼 수는 없습니다.

이미 많은 롤 전적 검색 사이트들에서 포지션을 정하는 알고리즘을 사용할 겁니다. 잘 알려진 알고리즘은 약 4가지 정도의 알고리즘이 있는 것 같은데 장단점이 있습니다. 저는 그런 알고리즘을 참고만 하고 작년에 데이터를 분석하고 만지면서 이 부분을 해결했는데 사정상 아직 적용하지는 않았습니다. 사이트가 안정화되면 최 우선적으로 적용해야할 부분이기는 합니다. 이렇게 하면 대략 95~99.9% 정도의 정확도로 포지션을 정할 수 있습니다. 제 지식으로는 어떤 사이트라도 100%는 힘들거라고 생각됩니다.

이렇게 개발을 하면서 느낀게, 당장 한 계단을 올라가는 건 어찌어찌 올라가 지더라는 겁니다. 이렇게 하면 더디더라도 수천,수만 계단도 언젠가는 올라갈 수 있습니다. 그런데 내가 올라가야 하는 계단이 몇 계단인지 알고 있다면, 그리고 그 계단이 10만 계단이라면,, 시도하지 않을 거란 생각이 들었습니다. 이유는 그 당시에 지금 보면 엄두안나는 계단을 오르려고 해서입니다. 그래서 그런지 새로운 것을 알아가는 즐거음과 동시에 스트레스도 참 많이 받았습니다.

5stack.gg를 개발하면서 여러 교훈을 체득한 것 같습니다. 그리고 해오면서 내가 오늘 올라갈 계단만 생각하고 꾸준히 그 계단들만 올랐던 것 같습니다. 내일 올라갈 계단은 내일 올라가면 되니까요. 내일 할 일은 가능하면 신경안쓰려고 했네요.

앞으로 몇 회에 걸쳐 5stack.gg를 개발하면서 기억나거나 느낀 점 또는 기술에 관련된 글들을 쓸 계획입니다.

읽어주셔서 감사합니다. ( _ _ )

이 댓글을 비밀 댓글로
    • 뚜빠뚜빠
    • 2021.04.09 23:24
    안녕하세요 라이엇 API로 검색하다가 처음 알게되었는데 대단하시네요 응원하겠습니다
    • 뚜빠뚜빠
    • 2021.04.09 23:34
    혹시 사이트가 어떤 기반으로 만들어졌는지 알 수 있을까요? 애니메이션 기능이 너무 참신해서 한 번 따라서 만들어보고 싶습니다. 5stack.gg에 대한 포스트 더 올려주세용~~
    • 기본적인 웹 기술이라 딱히 말씀드릴게 없네요. 현재도 갭발중이라 기술 변경이 크게 있어서 많이 변할 것 같습니다.
      조만간 자세한 포스팅 올리겠습니다. 감사합니다.
    • 2021.04.19 21:43
    비밀댓글입니다
      • 2021.04.20 09:48
      비밀댓글입니다