네 가지 선택을 하나의 빌드로
Auglab은 리그 오브 레전드 ARAM: Mayhem에서 증강 조합을 살펴보고 공유할 수 있도록 만든 웹서비스입니다. 챔피언, 보유 증강, 아이템이 달라지면 다음 선택에 필요한 정보도 달라집니다. 이 상황을 한 화면에 모아 비교하고, 다른 사람의 빌드도 함께 탐색하도록 구성했습니다.
지금 나온 후보를 비교하는 흐름
챔피언과 현재 보유 상태를 입력한 뒤, 게임에 실제로 제시된 같은 등급의 증강 후보를 최대 세 개까지 비교합니다. 효과 설명과 준비 조건을 나란히 보고, 실제로 선택한 증강만 보유 슬롯에 반영합니다.
고민 중인 후보와 이미 획득한 증강을 분리해, 비교하는 과정에서 현재 빌드가 바뀌지 않도록 했습니다.
탐색에서 공유까지
- 증강 후보 비교 — 현재 챔피언·보유 증강·아이템을 바탕으로 효과와 준비 조건을 확인합니다.
- 빌드 만들기와 공유 — 네 가지 증강 조합을 작성하고, 개별 링크로 공유합니다.
- 커뮤니티와 랭킹 — 챔피언·증강·지역별로 게시 빌드를 탐색하고, 추천과 재미 반응을 살펴봅니다.
- 예능 실험실 — 원하는 플레이 방식에 따라 조합 아이디어를 보고, 핵심 증강과 진행 순서·대안을 확인합니다.
- 지역·언어·화면 설정 — 지역별 탐색, 한국어·영어, 라이트·다크 테마를 제공합니다.
가입 장벽은 낮추고, 작성 권한은 구분하기
로그인 없이 탐색하고 빌드를 공유하는 흐름을 만들었습니다. 게시물 작성자의 브라우저 세션으로 소유권을 관리하고, 서버에서 작성·수정 권한과 요청 횟수를 확인합니다. 쓰기 요청에는 Turnstile을 적용했습니다.
React·TypeScript로 화면을 구현하고 Supabase로 데이터를 관리하며, Cloudflare Pages와 Functions로 배포했습니다. 챔피언·증강 카탈로그와 커뮤니티 게시물을 구분해 운영하도록 설계했습니다.
근거가 보이는 비교 도구
효과 설명, 커뮤니티 반응, 실험 아이디어는 서로 다른 정보입니다. 이를 승률이나 최적 조합 점수로 합치지 않고 각각의 근거를 보여주도록 구성했습니다. 별도의 비교 규칙이 없는 상호작용은 판단을 보류하고, 예능 실험안은 실전 미검증 상태를 표시합니다.
기획과 서비스 흐름을 정리하고 AI 코딩 도구와 함께 구현·배포했습니다. 현재 auglab.win에서 공개 운영 중입니다.
사용 기술 · React · TypeScript · Vite · Supabase · Cloudflare Pages / Functions · Turnstile
Auglab은 Riot Games의 공식 서비스가 아닌 개인 제작 프로젝트입니다. 게임 관련 상표와 자산의 권리는 Riot Games에 있습니다.