Pro.gg - 프로젝트 회고록(1) : 기획

 

프로젝트 기획 - 어떤 작품을 만들어야 할까?

다른 사람들과 함께 작업해서 만드는 협업 프로젝트를 하기 위해 국비 학원에 등록해서 강의를 수강한 만큼, 프로젝트는 나에게 있어서 반드시 넘어야 할 산이었다.

그런데 정작 프로젝트를 위한 팀을 구성해야 할 시기가 다가온 상황에서도 어떤 작품을 만들지에 대한 고민이 끝나질 않았다.

 

그런 상황에서 일단 팀 부터 먼저 구성하고 보자 라는 생각으로 그 동안 코로나 때문에 최대한 비대면으로 강의가 진행되느라 잘 나가지 않던 학원에 나가고 보니, 마침 나와 같이 팀 프로젝트를 할 생각으로 학원에 나온 사람들이 있었다.

그 덕분에 자연스럽게 당시 학원에 나왔던 사람들과 팀을 이루게 되었고 그 즉시 어떤 프로젝트를 할 지에 대한 논의가 시작되었다.

 

사실 논의라고 해봤자, 나는 아직 어떤 프로젝트를 할 지 아직 갈피를 못 잡고 있었기 때문에 별다른 의견은 내지 못하고 그냥 어떤걸 하든 잘 만들어볼 자신은 있다는 말 밖에 하지 못했었다.

그런데 다행히도 같이 팀을 이루기로 한 사람중에 아이디어를 가진 사람이 있었고 그 사람의 아이디어 덕분에 우리 팀의 프로젝트 주제 선정 및 기획은 급 물살을 타기 시작했다.

 

우리와 같은 또래들이 좋아하는 게임을 주제로 웹 사이트를 만들어보자.

우리팀은 세계적으로 큰 인기를 끌고 있던 League of Legends(일명 LOL) 라는 게임을 주제로 커뮤니티 및 팀 매칭 사이트를 만들어보기로 했다.

프로젝트의 모티브는 OPGG 와 같은 LOL 관련 정보 및 커뮤니티 사이트 이다.

OPGG 링크 : https://www.op.gg/  

롤 전적 검색 OP.GG - 전적 검색, 관전, 리플레이, 챔피언 공략, 카운터, 랭킹

물론 전공자이긴 해도 이제 막 처음으로 프로젝트를 수행하는 나와 한 살위의 형, 그리고 국비 과정으로 코딩을 처음 배운 비전공자 2명, 이렇게 4명이서 OPGG 와 같은 규모의 사이트를 만드는 것은 쉽지 않은 일이다.

 

그렇기에 우리는 LOL 이라는 게임이 5:5 로 팀을 이루어 상대방과 승부를 겨루는 게임이라는 것에 초점을 맞추어 다음과 같은 기능들로 이루어진 웹 사이트를 만들어 보기로 했다.

 

프로젝트에서 구현해보기로 한 기능들

* 팀 관련 기능

 - 신청 제한 티어(솔로 랭크 기준)를 기준으로 자신의 팀을 생성할 수 있는 팀 생성 기능과, 팀 신청 내역에서 신청한 사람의 티어 및 포지션 정보를 보고 신청 수락, 거절 등을 결정하는 등의 기능을 통해 자신만의 팀을 구성할 수 있다.

- 5명의 인원이 모두 채워진 팀을 기준으로 팀원들의 평균 티어에서 위 아래로 일정 수치이상 차이가 나는 팀 들을 매칭해주고, 매칭된 팀들에 대한 정보를 확인 할 수 있다.

 

* 소환사 데이터 관련 기능

- 자신의 정보에 자신의 소환사 명을 등록하면, 해당 소환사의 솔랭(솔로 랭크), 자랭(자유 랭크) 정보 및 최근 전적 데이터를 확인 할 수 있다.

- 메인 화면에서 소환사명 을 검색하면 해당 하는 소환사명이 존재할 경우, 그 소환사의 솔랭, 자랭 정보 및 최근 전적 데이터를 확인 할 수 있다.(닉네임으로 검색할 경우 해당 닉네임에 등록된 소환사의 데이터를 확인 할 수 있다.)

 

* 게임 정보 관련 기능

- LOL 의 모든 챔피언들의 초상화들이 열거되고 각각의 챔피언들의 이미지를 클릭해서 챔피언 상세 정보 페이지로 이동할 수 있다.

- 챔피언 상세 정보 페이지에서는 해당 챔피언의 전체 이미지 및 세부 스탯, 사용 팁과 상대 팁 등을 확인할 수 있다.

 

* 조건별 회원 검색 기능

- 티어, 승률을 조건으로 하여 조건에 맞는 회원을 검색할 수 있고, 해당하는 회원의 소환사 데이터 및 최근 전적을 확인 할 수 있다.

- 위와 같은 조건별 회원 검색 기능을 통해 팀의 구성 하는데 있어 원하는 회원의 정보를 찾아 볼 수 있다.

 

* 커뮤니티 기능

- 자유 게시판, 팁 게시판, 그리고 회원 모집 게시판을 통해 회원들간 커뮤니티 기능을 제공하며, 이를 통해 회원들은 각 게시판의 주제에 맞게 소통을 할 수 있다.

 

 

프로젝트에 활용된 기술 스택

이번 프로젝트에 활용한 기술 스택은 다음과 같다.

프론트 엔드(Front-End)

- JavaScript

- HTML/CSS

- BootStrap

- JSP/Servlet

- jQuery

- Ajax

 

백 엔드(Back-End)

- JAVA(JDK >= 11)

- MySQL

- MyBatis

- Spring boot Framework(Gradle)

 

서버

- 네이버 클라우드 플랫폼

- Apache Tomcat 8.5.70

 

사용 툴

- IntelliJ IDEA Community Version

- Eclipse IDEA

- Visual Studio Code

- Heidi SQL

 

프로젝트에 활용된 외부 API

이번 프로젝트에서 활용한 외부 API 는 다음과 같다.

 

LOL API

* 소환사 명 검색 API : 소환사 명을 검색하여 해당되는 소환사의 계정 정보를 받아오는 API 

  - 참조 링크 : https://developer.riotgames.com/apis#summoner-v4/GET_getBySummonerName

Riot Developer Portal

 

* 소환사 솔로 랭크 및 자유 랭크 전적 검색 API : 수집한 소환사 id 값을 변수로 하여 소환사의 솔로 랭크 및 자유 랭크 티어, 전적을 받아오는 API

  참조 링크 : https://developer.riotgames.com/apis#league-v4/GET_getLeagueEntriesForSummoner

Riot Developer Portal

 

* 소환사 최근 매치 id 값 갯수별 검색 API : 소환사의 최근 경기부터 지정한 숫자의 매치 횟수 만큼의 각 매치별 id 값을 리스트 형태로 받아오는 API

  - 참조 링크 : https://developer.riotgames.com/apis#match-v5/GET_getMatchIdsByPUUID

Riot Developer Portal

 

* 소환사 매치 별 상세 정보 검색 API : 각 매치 별 id 값을 변수로 하여 해당하는 매치의 상세 정보를 받아오는 API

(선택한 챔피언, 구매한 아이템, 사용한 소환사 스펠, K/D/A 정보 등등)

  - 참조 링크 : https://developer.riotgames.com/apis#match-v5/GET_getMatch

Riot Developer Portal

 

 

LOL 관련 각종 리소스 경로

* 챔피언 이미지 : LOL 챔피언 들의 프로필 이미지 데이터를 호출해 올 수 있다. 

  - 예시) http://ddragon.leagueoflegends.com/cdn/11.12.1/img/champion/Aatrox.png(아트록스 외에 다른 챔피언들도 가능하다.)

* 챔피언 상세 정보 : LOL 챔피언들의 상세 정보를 포함하고 있는 json 파일의 데이터를 호출해 올 수 있다.

  - 예시)  https://ddragon.leagueoflegends.com/cdn/11.12.1/data/ko_KR/champion/Aatrox.json(아트록스 외에 다른 챔피언들도 가능하다.)

* 각종 아이템 이미지 : LOL 에서 매치 중에 상점에서 구매할 수 있는 아이템 들의 이미지 데이터를 호출 해 올 수 있다.

  - 예시) http://ddragon.leagueoflegends.com/cdn/11.12.1/img/item/***.png (*** 는 아이템을 지칭하는 특정 숫자)

 

* 각종 소환사 스펠 이미지 : LOL 에서 매치 전에 지정하여 사용할 수 있는 소환사 스펠에 대한 이미지 데이터를 호출 해 올 수 있다.

  - 예시) http://ddragon.leagueoflegends.com/cdn/11.12.1/img/spell/***.png (*** 는 소환사 스펠을 지칭하는 숫자)

 

각종 SNS 로그인 API

- Naver Login API : Naver 계정을 통해 간편하게 회원가입 및 로그인을 할 수 있다.

- Kakao 계정을 통해 간편하게 회원가입 및 로그인을 할 수 있다.

- Facebook Login API : Facebook 계정을 통해 간편하게 회원가입 및 로그인을 할 수 있다.

(현재는 서버의 https 보안 처리가 되지 않아 이용이 불가능 합니다.) -> 2022.03.14 기준 https 적용이 완료되어 기능이 정상적으로 제공됩니다.

- Google Login API : Google 계정을 통해 간편하게 회원가입 및 로그인을 할 수 있다.

(현재는 서버의 https 보안 처리가 되지 않아 이용이 불가능 합니다.) -> 2022.03.14 기준 https 적용이 완료되어 기능이 정상적으로 제공됩니다.

 

 

구현할 기능, 사용할 API 까지 결정 되었겠다, 프로젝트가 순탄하게 완성 될 수...있을까?

프로젝트를 본격적으로 시작하기 전 사용할 기술 스택과 구현할 기능들이 모두 몇번의 회의를 통해 결정되었고, 

사용할 API 또한 프로젝트에 들어가기 전 몇 가지 실험들을 통해 우리의 역량으로도 사용이 가능하다는 것이 증명 되었겠다. 이제 본격적으로 프로젝트를 시작할 일만 남았었다.

이때가 아마 5월 중순 쯤 이었던걸로 기억한다.

 

예상 대로 잘 되었다면 프로젝트 규모 때문에 원래 학원에서 정해준 완성 기한인 6월 초에는 완성을 못 하더라도, 적어도 여름 안에는 완성 할 수 있지않을까 하고 기대했다.

하지만 그 기대는 그저 내 착오에 불과했다.

프로젝트 시작부터 큰 악재가 터졌기 때문이다.