작년 12월부터 지금까지, 내 머릿속 절반은 TIMO.GG로 가득 차 있었다고 해도 과언이 아닌 것 같다..
작년 디자이너분이 만들어주신 귀엽고 정감 가는 로고와 캐릭터 덕분에, 이 프로젝트에 더 큰 애정을 갖게 된 것 같다.
대학 생활 중 정말 다양한 프로젝트를 해봤지만, 실제 서비스로 운영까지 간 적은 없었다. (대부분 비즈니스 모델의 한계 때문이었다)
그래서 이번에는 ‘우리가 좋아하고 직접 써볼 수 있는 서비스’를 만들고, 끝까지 운영까지 해보자는 목표를 세웠다.
이 프로젝트를 진행하며 가장 집중한 부분은 무엇이었을까?
사용자 중심적 사고
회원가입 플로우 단순화
기본 닉네임 자동생성
- 티모대위-a12b42(랜덤UUID 활용)
오직 OAuth 로그인 통한 비밀번호 미사용
→ 유저가 빠르게 서비스를 경험하는 것이 핵심인 만큼, 불필요한 입력 절차는 오히려 이탈을 유발할 수 있다고 판단
세부 설정은 추후에 세팅 가능
→ 유저는 언제든지 회원가입 중간에 나갔다가, 이후에 내 계정 페이지에서 완료할 수 있도록 흐름을 유연하게 구성
인증 관련 UI/UX
- 공공데이터 가공
→ 전국 대학교/학과 목록을 JSON으로 가공 후 드롭다운 자동완성 구현
- 라이엇 인증 뱃지 도입
| 상태 | 설명 | 활성화 기능 |
| API_PARSED | 미인증 상태 | 듀오 / 내전 / 랭킹 기능 |
| RSO_VERIFIED | 인증 완료 | 위 기능 + 인증 뱃지 표시 (신뢰도 강화) |
모든 UI는 반응형 대응
→ 특히 채팅은 모바일 최적화에 집중
→ 채팅 리스트 -> 채팅방 진입 - 카카오톡 UI 구조와 유사하게 설계
그 외
전적 조회 및 서비스 내 세부 정보 확인은 모달 창 형태로 구현하였다.
→ 페이지를 새로 이동하지 않고도, 현재 흐름을 유지한 채로 필요한 정보를 바로 확인할 수 있도록 사용자 경험 설계
응답 시간이 소요되는 API 요청 구간에는 스피너 UI를 삽입하여, 사용자 입장에서 지연을 인지하고도 답답함을 느끼지 않도록 UX를 개선
빠른 프로토타입과 MVP 개발
베타 테스트 버전 배포
- 미리 완성된 서비스를 1차적으로 배포 (6월 4일)
- 사용자 반응과 놓쳤던 오류들을 파악할 수 있었다.
- slido를 통해 문의사항 게시판으로 활용
프로토타입
이전 프로젝트 실패를 통해 대규모 리모델링을 하였다.(https://timo-gg.vercel.app→ 이전에 진행한 TIMO 서비스)
4월에 다시 처음부터 시작할때는 사용자 반응을 먼저 확인하고 진행하고자 하였다.
- 피그마 프로토타입 기능 활용 (링크 : URL)
- 빠르게 확인하기 위해 5일만에 프로토타입 생성
- 에브리타임 투표 기능 활용
모든 파트에 진심이었던 프로젝트
이번 프로젝트는 기획부터 디자인, 프론트엔드, 백엔드까지 전 과정을 함께하며 진행했다.
각 파트마다 “무엇을 가장 중요하게 생각할 것인가”를 정하고, 그 기준에 맞춰 임하려고 했다.
기획
우선 유저 타겟은 자연스럽게 우리와 같은 대학생으로 설정했다.
가장 큰 이유는, 우리가 평소 자주 사용하는 에브리타임 커뮤니티를 통해 홍보 및 사용자 모집을 쉽게 할 수 있을 거라 판단했기 때문이다.
에브리타임은 대학생들에게 익숙한 플랫폼이기도 하고, 처음부터 이 커뮤니티를 염두에 두고 기획하면
다른 학교로의 확장도 자연스럽게 이어질 수 있을 거라고 생각했다.
또한, 모든 리그 오브 레전드(LOL) 유저를 대상으로 하기보다는,
'대학생 롤 유저'라는 세분화된 타겟을 설정하는 것이 서비스의 명확한 색깔과 차별성을 만드는 데 더 효과적이라고 생각했다.
사실 우리 팀원은 전원 LOL을 좋아한다.
에브리타임을 보면 간간히 롤 듀오나 내전 모집 글이 올라오곤 하는데,
이런 게시글들을 보면서 “우리가 만들려는 서비스에 분명 수요가 있겠다”는 확신도 들었다.
디자인
UI/UX 디자인에서는 최대한 심플하고, 사용자 입장에서 편한 구조를 만드는 데 집중했다.
서비스 특성상 사용자가 빠르게 정보를 확인하고, 쉽게 글을 작성하고, 바로 매칭이 이뤄져야 했기 때문이다.
그래서 처음부터 불필요한 요소를 걷어내고, 직관적인 동선에 집중하려고 했다.
- duo.op.gg
전체적인 디자인 흐름과 구조에서 가장 많은 참고를 했다.
유저들이 익숙하게 느낄 수 있도록 기본적인 UI 구성은 이 사이트의 방식을 따랐다. - your.gg
게시글에 만료 시간을 설정하는 기능 아이디어를 이곳에서 얻었다.
롤 듀오 모집 특성상 정보가 오래 남아 있을 필요가 없기 때문에,
휘발성 게시판 개념을 적용하는 데 큰 도움이 됐다. - dak.gg
게시글 카테고리의 세분화 측면에서 참고한 사이트다.
우리 프로젝트에서는 여기에 착안해, 사용자 성향 파악을 돕는 MBTI 카테고리를 추가해보았다.
프론트
백엔드 3명이서 팀을 꾸린거라 프론트엔드도 우리가 스스로 배우면서 같이 진행하였다.
그래서 최대한 아래와 같은 목표를 가지고 진행하였다.
- MUI (Material UI) 사용
→ UI 컴포넌트 개발에 드는 시간을 최대한 줄이고, 일관된 디자인 시스템을 빠르게 적용하기 위해 사용했다. - 기능 구현 및 API 연동을 우선
→ 초기에는 코드 퀄리티나 구조보다는, 작동하는 화면을 빠르게 만들어내는 데 집중했다.
→ 실제 사용자 테스트나 반응을 통해 점진적으로 개선해나가는 방식을 택했다. - 빠른 배포 환경 구축 (AWS S3 + CloudFront)
→ 프론트는 정적 사이트로 구성했고, AWS S3에 업로드하고 CloudFront를 통해 배포하여
빠른 피드백을 받을 수 있는 구조를 마련했다.
백엔드
프로젝트 인원 모두 백엔드 개발자를 지향하는 만큼, 여기에 가장 많은 시간을 쏟았다.
이전 프로젝트에서 사용할 수 없는 코드들은 팀원들과 모여 제거하는 과정을 거쳤다.
리팩토링 과정도 중요시하였다.
특히 팀원의 코드를 보고 더 나은 구조가 있으면 해당 구조로 리팩토링을 진행하였다.
개발 프로세스와 규칙
- 도메인 기반 패키지 구조를 기본으로 잡아, 코드가 명확한 역할과 책임을 가지도록 했다.
- Git 컨벤션을 팀 내에서 정하고, 모두가 지키도록 노력했다.
- 그리고 설정 관련 수정사항이나 중요한 결정은 팀 노션에 꼼꼼히 기록하여 공유하였다.
리팩토링
- 알림서비스 추가로 인한 전략 패턴 도입
- 최근 10경기 전적조회 동기화로 인한 응답시간 지연 -> 스레드 풀을 활용한 비동기 방식
- 라이엇 외부 API 하드코딩 -> HttpInterface + RestClient구조로 리팩토링
'티모지지' 카테고리의 다른 글
| [Riot API] 비동기 전적조회 리팩토링으로 응답속도 개선하기 (2차) (0) | 2025.07.08 |
|---|---|
| [Riot API] RestClient + HttpInterface 도입 한 이유 (1차) (2) | 2025.06.30 |