🕹️ 리그오브레전드 팀 매칭 시스템

게임 소개

리그 오브 레전드(League of Legends)는 5:5 팀 대전 기반의 게임으로, 각 팀의 목표는 상대방의 넥서스(중앙 기지)를 파괴하는 것입니다.
전략적 사고와 팀워크가 중요한 이 게임은 친구들 혹은 10명의 플레이어가 모여 실력을 겨루기에 적합합니다.

프로그램 목적

이 프로그램은 팀 밸런스를 맞춰주는 도구로, 아래와 같은 상황에서 유용하게 사용됩니다:

• 5:5 팀플레이 사용자 설정을 주로 하는 유저들을 대상으로 하여 팀구성을 시간을 줄이고 싶을 때
• 플레이어들의 전적과 실력을 고려하여 공정한 팀을 구성하고 싶을 때
• 각 팀 간의 밸런스를 맞춰 게임을 더욱 재미있게 즐기고 싶을 때

주요 기능

• 빠른 전적 검색 및 데이터 분석을 통해 시간 낭비를 줄임
• 해당 플레이어의 필요한 정보만 빠르게 제공
• 자동으로 균등한 팀 밸런스를 계산하여 제안
• 팀 구성과 관련된 번거로움을 해결하여 더 나은 게임 경험 제공
• 이 프로그램을 통해 플레이어들은 효율적으로 팀을 구성하고, 게임 플레이에 더 많은 시간을 집중할 수 있습니다.

🗓️ 개발 일정: 2024.12.03 ~ 2024.12.24

🎯 개발 목표

• ✅ 누구나 쉽게 사용할 수 있는 매칭 시스템 개발
  
• ✅ 팀 구성에 필요한 직관적인 정보 제공
  
• ✅ 최적화된 시스템 구현으로 빠른 매칭 제공
  
• ✅ 장소에 구애받지 않고 모바일/PC 호환성 제공
  
• ✅ 사용자 맞춤형 정보 제공
  

🧐 주제 선정 이유

리그 오브 레전드는 한국에서 10~30대 유저들에게 큰 사랑을 받는 게임으로 많은 사람들이 즐기고 있습니다.
특히 10명이 모여 자체적으로 게임을 진행하는 모임에서 이 프로그램이 매우 유용하게 사용될 수 있습니다.

이런 모임에서는 서로에 대한 정보를 아는 사람들끼리 게임을 할 수도 있지만 인원이 부족할 경우 새로운 유저를 초대하여 진행하기도 합니다. 그러나 새로 초대받은 유저는 기존 유저들에 대한 정보가 없는 상태에서 9명의 전적을 일일이 검색하고 분석하기 어렵습니다.
게다가 초대된 유저가 누적될수록 분석해야 할 유저 수가 많아져 빠른 게임 진행에 큰 장애가 됩니다.

이러한 문제를 해결하기 위해 백엔드 기술과 데이터 설계 최적화를 통해 전적 데이터를 효율적으로 제공하는 웹 프로그램을 기획하였습니다. API를 활용하여 많은 데이터를 처리하며 실제로 유용한 경험을 쌓고자 본 프로젝트를 진행하게 되었습니다.

📆 개발 일정

1️⃣ 1주차: 기획 및 설계 디자인
2️⃣ 2주차: UI 구현 프론트 개발 / 백엔드 API 설계 및 DB 설계
3️⃣ 3주차: 백엔드·프론트 개발 및 API 연동
4️⃣ 4주차: 테스트 및 AWS 배포

🧑‍💻 저의 역할

• 프론트엔드 담당
  • 역할: 팀 구성시 유저 데이터 상태 관리, 밸런스 팀 구현
  • 주요 역할 : nginx를 이용한 서버/ 클라이언트 배포 -> 추후 백엔드와 프론트엔드 구분하여 각각 배포 (네트리파이로 변경)

배포 주소

https://www.noobsapp.store/

API개발 협업과정 문서

https://www.notion.so/API-1573cb019cd480a4babcc527861ba2c2?pvs=4

🚀 기술 스택

Frontend

Backend

Deployment

배포 플랫폼: AWS EC2, S3
HTTPS 적용: Let's Encrypt 및 SSL 도메인 사용
AWS Route 53

🛠️ 구현 기능

1️⃣ 카카오 로그인 API
2️⃣ Redis를 활용한 세션 관리
3️⃣ 라이엇 API로 유저 검색 및 정보 제공
4️⃣ 프로필 페이지 디자인 및 구현
5️⃣ 드래프트 모드/밸런스 모드 알고리즘 적용

📖 개발 과정 및 문제 해결

• TypeScript를 활용하여 객체에 대한 이해
• 데이터를 효율적으로 처리하며 배열과 객체 활용법을 체득
• 백엔드와의 협업을 통해 데이터 흐름과 상태 관리를 이해

🌟 배운 점

• React의 상태 관리와 데이터 처리 방식 이해
• 프론트와 백엔드 협업을 통해 명확한 데이터 요구사항 전달

🛑 부족한 점

• React와 Tailwind CSS, TypeScript 사용에 대한 부족함을 느끼며 추가 학습 필요
• Tailwind CSS의 스타일링 코드 가독성이 떨어짐

🔄 개선할 점

• 버튼 위치와 크기 개선
• UI/UX 디자인 최적화
• API 응답 속도와 데이터 구조 최적화

프로젝트 결과물 시연

검색추가

모드 팀 구성

벨런스 모드 팀구성

랜덤모드 및 드래프트 모드

• 랜덤 : 팀 밸런스 없이 무작위로 팀구성
• 드래프트 모드 : 각 팀의 팀장을 선택 팀원을 선택하는 모드

정보 업데이트

[Noobs 개발 수정 내용]

✅ 완료된 작업

• 🔍 검색 버튼 크기 수정
• 📍 팀 구성 버튼 위치 조정
• ✏️ 인원 추가 / 모드 선택 / 사용법 버튼 크기 및 글씨 크기 수정

🎨 포지션 선택 시 가독성 개선

• 밸런스 모드 포지션 크기 및 디자인 수정
• 팀 구성 버튼 위치 재조정
• 📋 공지사항 / 문의 요청 / 회원 탈퇴 버튼 추가
• 🖼️ 팀 밸런스 모드 이미지값 변경 문제 수정

useState로 lineSrc 관리

• 유저 데이터 이동 시 포지션 이미지도 동적으로 변경
• ⚖️ 랜덤 모드와 밸런스 모드 차별화
• 서버에서 두 팀의 score 합산값 제공
• 클라이언트가 연산하여 화면에 표시
• 밸런스 정보 시각화로 직관성 향상