프로젝트 Ninda 중간점검 (06.05 ~ 06.23)

Updated:

I. 개요

사실 처음 프로젝트를 진행할 때에는 Kora라는 이름으로, 각기 다른 언어에 능통한 사람들이 모여 서로 언어교환 및 스터디를 진행할 수 있는 사이트를 계획했었다. 하지만 생각해볼수록 외국인 이용자에 대해 대처하기 힘들 것 같다는 점이 마음에 걸렸고, 결정적으로 프로젝트주제 자체에 큰 흥미를 느끼기 힘들었다. 크게 관심이 없는 분야이기 때문에 니즈를 파악하는 부분에 있어서 큰 어려움이 있을 것 같았다.

마침 개발은 일단 사용자에 대한 회원가입, 로그인, 인증, 세션등에 대한 부분부터 진행하고 있었기 때문에 쉽게 주제를 바꿀 수 있었고, 별다른 어려움 없이 새 프로젝트명인 Ninda로서 프로젝트를 이어나가기로 했다.

닌다는 일본 콘솔 게임사 닌텐도의 비정기 소프트웨어 발표회인 닌텐도 다이렉트를 줄여 부르는 말이다. 워낙 익숙하기도 하고 달리 떠오르는 말이 없어 프로젝트명으로 채택했다.
닌다한국닌텐도에 정식으로 발매된 게임들에 대한 정보를 간편하게 제공하고, 이에 대해 약간의 커뮤니티적인 요소를 추가하여 이용자들로 하여금 쉽게 게임에 대한 의견을 나눌 수 있는 공간으로 만들고자 하였다.




II. 진행상황

1. 회원가입 및 로그인

01-01

회원가입 및 로그인에 대한 부분을 먼저 개발해나갔다.
로그인방식은 세가지로 구성했다.

  1. 이메일 인증을 통한 사이트 자체 회원가입
  2. OAuth2를 통한 구글아이디로 회원가입
  3. OAuth2를 통한 카카오아이디로 회원가입

OAuth2를 구성하는데에 있어서는 개발서적 스프링 부트와 AWS로 혼자 구현하는 웹 서비스의 도움을 많이 받았다.
이부분에서 Spring Security도 적용하였으나, 당시에는 예제코드만 변경하여 사용하였다.
이후 인증, 인가에 대해 필요한 부분들을 적용하다 보니 어느정도 Spring Security에 대해 이해할 수 있었다.

01-02

회원가입 과정에서는 프론트단에서 먼저 유효성검사를 진행할 수 있도록 하였다.
특히 이메일주소같은경우는 중복이 불가능하기 때문에, 이메일 텍스트가 변경될 때 마다 그 정보를 백으로 보내서 DB를 조회하여 중복검사를 진행할 수 있도록 구성했다.

이메일 입력을 통한 사이트 가입 시, 인증메일이 입력된 이메일로 발송되게 된다. 이메일에 포함된 링크는 쿼리스트링으로 이메일주소와 랜덤하게 생성된 인증값을 포함하고, 컨트롤러에 접근이 이루어지면 DB에 같은 값의 이메일과 인증값이 있는지 비교한 후에 권한을 상승시켜 서비스를 정상적으로 이용할 수 있도록 구성했다.

OAuth2로 회원가입을 한 유저는 닉네임에 대한 부분을 추가적으로 제공받은 후에 마찬가지로 권한을 상승시켜 서비스를 이용할 수 있도록 하였다.

정상적으로 로그인한 유저는 세션을 갖게되고, 이 안에는 이메일주소와 회원ID등 몇가지 필요한 정보를 담게된다. 이부분은 추후 필요에 따라 얼마든지 변경될 수 있을 것 같다.

2. 게임정보 크롤링 및 DB저장

게임에 대한 자세한 정보를 모두 DB에 수동으로 입력할 수 없기 때문에, 한국닌텐도홈페이지에서 가져오게 된다.
이를 위해 라이브러리 Jsoup을 사용했다.

게임 각각에 대해 타이틀, 가격, 썸네일, 설명, 지원언어 등을 얻어 DB에 저장하게 된다.
단순히 크롤링하는 것까지는 어렵지 않았으나, 이를 DB에 저장하고 꺼냈을 때 원하는대로 사용할 수 있도록 가공하는 과정에서 굉장히 시행착오가 많았다.

현재는 개발과정이므로 메모리상에서 H2를 사용하고 있어 매번 수동으로 게임에 대한 정보를 업데이트하고 있지만, 추후 운영과정에 있어서는 주기적으로 게임에 대한 정보를 얻어오도록 구성할 예정이다.

3. 게임리스트 출력

03-01

DB에 저장된 게임들을 리스트화하여 사용자들에게 보여주게 된다.
이부분에서 사이트의 전체적인 디자인요소가 많이 좋아졌다.(원래는 회색으로 이곳저곳 얼룩덜룩한 모습이 마치 00년대 개인홈페이지를 보는 것 같았다…..)

페이징

게임이 한두가지가 아니기 때문에 목록에 일괄표현할 수 없으므로 페이징을 구현하는 과정이 필요했다. Spring Data JPA에 있는 페이징 기능을 적극 활용하였다. 이 부분에서도 굉장히 시행착오가 많았기 때문에, 추후 다시 사용할 수 있도록 게시글로 따로 정리하려고 한다.

현재는 페이지당 12개의 게임을 보여주며, 페이지가 이동하면 숫자들 또한 바뀌고 앞의 한번에 5칸씩 앞으로 이동할 수 있는 버튼도 구현하였다.

정렬 및 검색

사용자에게 있어서 정렬과 검색은 굉장히 중요하다.

단순히 이름순으로 게임 리스트를 둘러보고 싶을 수도 있고, 인기가 많은 게임을 빠르게 찾아보고 싶을 수도 있다.

처음에는 여러가지 정렬기능들을 넣어놓았으나, 결과적으로는 세가지만 남았다.

이름순: 타이틀명을 기준으로 정렬해서 보여준다.
인기순: 사람들이 가장 많이 접근했던 게임 순으로 보여준다. 추천순: 게임별로 추천기능을 두고 이를 기준으로 정렬해서 보여준다.

정렬과정도 쉽진 않았지만, 이를 페이징과 접목하여 보여주는 과정이 처음엔 조금 난감했다.
페이징과 연결되는 부분이므로 마찬가지로 별도의 게시글에서 자세하기 기록하려 한다.

4. 게임 세부사항 구성

04-01

한줄평

04-02

유저들로 하여금 게시글등을 통해 게임에 대한 정보와 평가를 취하게 하는 것은 조금 번거롭고 하드하다고 생각했다.
그래서 게임정보페이지에서 바로 한줄평을 남겨 게임에 대한 평가를 나눌 수 있도록 하였다.

한줄평은 작성자의 이름과 내용을 포함하고, 작성자 본인에 한하여 수정 및 삭제가 가능토록 하였다.

04-03

수정버튼을 클릭하면 위와 같이 내용을 포함한 새로운 폼이 생성된다.
이 과정에서 완료를 누르면 새로 입력한 내용으로 변경되고, 취소를 누른다면 기존화면을 보여준다. 수정기능을 구현하는 과정에서 굉장히 애로사항이 많았지만 결과적으로 잘 구현되었다.

추천 및 비추천

게임 및 한줄평에 대해 추천, 비추천 기능을 구현했다.

처음에는 단순히 추천버튼을 누르면 각각의 like값이 오르도록 구성했다.

하지만 결정적으로 추천시스템에는 중복을 방지할 필요가 있다고 생각했다.

여러 방법을 시도해본 끝에 각각의 엔티티에 likeListhateList라는 필드를 추가했고, 추천 또는 비추천을 누른 유저의 IDString의 형태로 이어붙여 저장했다. 이후에 추천 요청이 들어온다면 추천버튼을 누른 유저가 리스트에 포함되어 있는지 검사하고, 만약 그렇다면 요청을 거절하도록 하였다.

따라서 만약 중복된 추천요청이 들어온다면 이를 거부하고 추천수는 오르지 않게 된다.




III. 앞으로 구현하고자 하는 기능

  • 닌텐도 및 여러 게임사들의 트위터 등 뉴스피드를 가져와 실시간으로 제공
  • 게임별로 별도의 게시판을 구성하여 정보를 공유할 수 있는 커뮤니티영역을 생성
  • 개인 프로필페이지 구현
  • 발매예정 게임들에 대해 예약정보를 제공할 수 있는 페이지 구현
  • 메인페이지 구현
  • 앞으로 생각나는 것들은 어떤것이든!!!!!!




IV. 어려웠던 점들 및 개선해야할 점들

  • Security에 대한 이해가 부족한 것 같다. 각 역할에 따라 어떻게 리소스접근을 제한하면 좋을지 아직 잘 모르겠다.

  • 스프링개발자로서 성장하기 위해 프로젝트를 진행하지만, 정작 프론트단을 구현하기 위해 더 많은 시간을 쏟게 된다….. 정말 기초부터 검색하면서 진행하느라 너무 힘들다.

  • 예외처리에 대한 공부가 필요할 것 같다. 지금은 모든 예외를 그냥 던져놓고 일단 테스트할때 안건드리기만 하면 되지 하는 생각으로 하고있는데, 각각 에러, 또는 비지니스 로직의 거절에 따른 적절한 메시지를 사용자에게 전달하는 것은 굉장히 중요하다고 생각한다.

  • 경로에 대한 통일이 필요할 것 같다. 그때 그때 생각나는대로 구성하다보니 정말 내가 아니면 모를 정도로 난잡하게 되어있다.

  • 주석이 필요할 것 같다. 아직 프로젝트가 많이 진행되지 않았지만 벌써 특정 메소드를 봐도 한눈에 의미를 알아채기 쉽지 않다.

Leave a comment