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

게임 소개

리그 오브 레전드(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 배포

🧑‍💻 저의 역할

• 백엔드 담당
  • 역할: API 설계, DB 설계, 팀 구성 알고리즘 구현, 프론트 협업 데이터 처리
  • 주요 기여: 백엔드 아키텍처 및 팀 밸런스 알고리즘 구현으로 핵심 시스템 개발

배포 주소

https://www.noobsapp.store/

API개발 협업과정 문서

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

개발 및 문제해결

https://jennet1.tistory.com/category/%EA%B0%9C%EB%B0%9C%20%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8/LOL-TEAM-MATCH

🚀 기술 스택

Frontend

Backend

Deployment

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

🛠️ 구현 기능

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

📖 개발 과정 및 문제 해결

• 데이터를 효율적으로 처리하며 배열과 객체 활용법을 체득
• 프론트와의 협업을 통해 데이터 흐름과 상태 관리를 이해
• Redis를 적용하여 세션 관리를 최적화하며 속도 개선 경험

🌟 배운 점

• React의 상태 관리와 데이터 처리 방식 이해
• Redis를 활용한 빠른 세션 관리 도입
• 프론트와 백엔드 협업을 통해 명확한 데이터 요구사항 전달

🛑 부족한 점

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

🔄 개선할 점

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

프로젝트 결과물 시연

검색추가

모드 팀 구성

벨런스 모드 팀구성

랜덤모드 및 드래프트 모드

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

정보 업데이트

[Noobs 개발 수정 내용]

✅ 완료된 작업

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

⚙️ API 요청 공백값 처리

• 기존: 정확한 gameName으로 검색
• 문제: 공백 포함 시 검색 불가능
• 해결: LIKE 문 적용

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

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

useState로 lineSrc 관리

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

👥 같이한 친구 조회 기능 개선

• 문제: 유저 추가 시 숫자가 줄어드는 현상
• 해결:
• 서버에서 유저 수 조회 후 클라이언트로 전달
• 데이터 추가/삭제 시 유동적으로 반영

🚧 진행 중 작업

• 🔑 로그인 / 회원가입 기능 개발
• PC / 모바일 대응
• 🔍 아이디 찾기 / 비밀번호 찾기 기능 개발
• 🛠️ 추가 및 수정 예정 작업

🖼️ PC 버전

• 디스코드 이미지 추가
• 웹훅 URL 저장 기능 추가

🧾 프로필 페이지

• 📱 모바일 화면:
• Top 10 챔피언 슬라이드 기능 추가
• 폴드 화면 반응형 수정
• 🔄 검색 후 갱신 문제 해결:
• 현재 5분 지나야 업데이트 가능 → 개선 방법 고민 중
• ⭐ 게임 이름 밑 별명 기능 추가