AI와 함께 완성한 우리 팀 롤 전적 분석 사이트, 'oinqueue' 개발기 요약

왼쪽 상단 채널은 제가 아카이브용으로 올리는 게임 영상 모음집 채널입니다

 

우리 팀만을 위한 롤 전적 분석 사이트, AI와 함께 한 달 만에 완성하기

안녕하세요! 오늘은 제가 최근에 진행한 토이 프로젝트, 'oinqueue'의 제작 경험을 공유하려고 합니다. "롤 팀 5명의 전적을 기반으로, 팀의 지표를 심도 있게 분석하는 사이트를 만들어보자!"라는 간단한 아이디어에서 시작된 프로젝트였죠. 이 글에서는 아이디어를 현실로 만드는 과정, 특히 AI를 어떻게 활용해서 개발 속도를 높였는지에 대한 경험을 담아보려 합니다.

 

완성된 사이트와 코드는 아래에서 확인하실 수 있습니다.

• 배포 사이트: https://oinqueue.vercel.app/
• GitHub 저장소: https://github.com/kingkingburger/oinqueue

무엇을 만들고 싶었나? (목표와 기능)

저희 팀은 항상 "우리의 진짜 실력은 어느 정도일까?", "어떤 조합을 쓸 때 가장 잘 풀렸지?" 같은 질문들을 던지곤 했습니다. 이 궁금증을 데이터로 직접 확인하고 싶었어요. 그리고 전적 검색 사이트는 이름을 입력하고 모아보는건 안되잖아요. 그래서 맨날 같이 하는 팀의 데이터를 자동적으로 검색할 수 있게 만들었어요. 단순 전적 뿐만 아닌 최근 10경기를 추적해서 우리팀의 지표를 쉽게 확인 할 수 있는 방식이 필요했어요. 그래서 다음과 같은 필수 기능들을 정의했습니다.

• 프라이빗 페이지: 딱 우리 팀 5명만 볼 수 있는 비밀 공간
• 최신 전적: 최근 3경기의 기록을 한눈에 확인
• 조합 승률 분석: 지난 50게임 동안 가장 승률이 높았던 조합과 낮았던 조합 TOP 3
• 메타 정보: 현재 1티어 챔피언 정보 제공 (외부 사이트 데이터 활용)
• 최적 조합 추천: 1티어 챔피언과 우리 팀원들의 주력 챔피언을 분석해 최적의 조합 추천

 

 

기술 스택, 왜 이렇게 선택했을까?

프로젝트의 기술 스택은 속도와 편의성에 초점을 맞췄습니다.

• 프레임워크: Next.js를 선택했습니다. 클론 코딩으로 손에 익숙하기도 했고, 방대한 자료 덕분에 문제 해결이 쉬울 거라 판단했죠. 특히 서버 컴포넌트를 활용해 Riot API 호출부터 데이터 계산까지 백엔드 로직을 처리하는 경험을 해보고 싶었습니다.
• 데이터베이스: db는 쓸 계획이 없었는데 캐싱 처리가 필요해서 db를 사용했어요. 1게임당 1명의 데이터가 쌓이는데요 이를 riotApi 불러오면 요청제한(rate limit)에 부딪혔어요. 페이지를 새로고침 할 때마다 api를 요청하는건 비효율 적이라고 생각했죠. 이 문제를 해결하기 위해 bass인 supabase를 도입했어요. 왜 redis를 안썻냐면 배포를 최소화 하려고 안썼어요. 무료 클라우드 형태인 supabase를 활용한거죠. 배포 경험이 많지 않았기에, 별도 서버 구축 없이 인증, DB, 스토리지 등을 해결할 수 있는 BaaS(Backend as a Service)가 최적의 선택이었습니다.
• 배포: Vercel을 사용했습니다. Next.js와의 궁합은 물론, GitHub 레포지토리를 연결해두면 푸시할 때마다 자동으로 배포해주니 정말 편리했습니다.

 

 

개발의 특이점, AI와의 협업

이번 프로젝트에서 가장 인상 깊었던 부분은 단연코 AI와의 협업이었습니다. 저는 GPT, Claude, Gemini를 적극적으로 활용했고, 이 경험은 개발 프로세스를 완전히 바꿔놓았습니다.

솔직히 말해, 어디까지가 제 코드고 어디까지가 AI의 코드인지 경계가 모호할 정도입니다.

1. 디자인과 레이아웃 구현: 제가 피그마로 대충 그린 와이어프레임을 AI에게 보여주며 "이 그림대로 Next.js와 Tailwind CSS를 사용해서 레이아웃을 만들어줘"라고 요청했습니다. 꽤나 많이 수정을 요청해야 원하는 만큼의 퀄리티가 나왔습니다
2. API 연동과 데이터 처리: Riot API의 응답(Response) 데이터를 통째로 Claude에게 던져주니, TypeScript 타입 정의부터 데이터를 화면에 뿌리는 컴포넌트, 심지어 보기 좋은 디자인까지 한 번에 만들어줬습니다. 팀 조합별 승률 같은 복잡한 지표를 계산하는 로직도 AI가 상당 부분 해결해주어, 저는 핵심 비즈니스 로직과 기획에만 집중할 수 있었습니다.

저는 주로 아이디어를 내고, AI가 구현하는 '페어 프로그래밍' 방식으로 작업했습니다. 물론 AI가 항상 완벽한 답을 주는 것은 아니었지만, 막히는 부분을 질문하고 힌트를 얻는 과정 자체가 훌륭한 학습 경험이었습니다.

 

 

 

프로젝트를 마치며: AI는 최고의 학습 파트너

AI를 활용하니 제가 상상했던 아이디어를 정말 빠르게 현실로 만들 수 있었습니다. 단순히 코드를 받아 쓰는 것을 넘어, AI와 대화하며 "왜 이 코드를 사용해야 하는가?"를 고민하는 과정 자체가 성장의 자양분이 되었습니다. 주의할 건 ai가 만들어준 코드를 전부다 제가 완벽하게 이해해야 다음 단계로 넘어갈 수 있다고 생각합니다. 일정 부분을 모르는 상태로 넘어가버리면 구멍이 더 커진다는걸 느꼈습니다. 이걸 메꾸러면 어디서 부터 구멍인지 찾아야 하고 찾는 시간이 더 오래걸리는 상황까지 갔었습니다. 이런 경험으로 ai 에게 작은 단위로 명령을 주는게 좋다고 느겼습니다

특히 이번 경험을 통해 백엔드 지식도 AI를 통해 충분히 학습할 수 있겠다는 확신이 들었습니다. 예를 들어, ‘10만 번째 요청을 보낸 사람에게 1억을 주는 이벤트 시스템을 설계해줘’와 같이 혼자서는 자료를 찾기 막막한 주제도 AI에게 질문하고, 제시된 아키텍처를 직접 구현하고 분석하며 실력을 키울 수 있겠다는 생각이 듭니다.

막막한 학습의 길을 안내해주는 훌륭한 파트너입니다. 여러분도 작은 아이디어가 있다면, AI와 함께 직접 만들어보는 경험을 꼭 해보시길 바랍니다!

 

 

 

개선해야 할 점을 생각해보며

아직 사용자는 많이 없지만 개선해야할 점이 많이 생각나요. 게임을 좋아하는 사람으로서 연관된 작업을 하다보니 신나서 더 하게되더라고요. 자연스럽게 초기 기획보다 더 나은 개선 할 점도 생각하게되더라고요.

 

🟦 소환사 5명 고정 값이 아니라 다른 5명이 입력되게, 그리고 저장되게

다른 사람들도 본인만의 팀 색깔을 볼 수 있으면 좋을 것 같아요

🟦 외부 데이터 수집 방식의 자동화.

1티어 정보를 얻으려면 lolps를 활용해야 하는데요. lolps는 버전 정보를 url param에 넣어서 처리 해요. 저는 환경변수로 외부 데이터 버전을 관리해요. 버전이 바뀔 때마다 수작업으로 env 값을 고쳐야 하는데 자동화 할 수 있는 방법을 찾아야겠어요.

🟦 시뮬레이션 기능도 만들어보고 싶어요.

우리팀의 조합 vs 가상의 조합을 두고 현제 매타와 숙련도를 기반으로 승률을 예측하는 기능이죠.