미리보기

데이터에 기반하여 게임 메타를 분석하고 통계 데이터, 전략을 전달하는 서비스를 제공합니다.

기획자/디자이너/개발자와 협업하여 서비스와 백 오피스, 모바일 반응형 개발, 유지보수를 포함하는 프론트엔드 개발 업무를 담당했습니다.

리그오브레전드 ‘전략적 팀 전투’의 인게임 ,유저 통계 데이터 및 전략을 제공하는 웹 사이트 TFTPS.GG, 전 세계 약 9000개의 게이밍기어 정보, 리뷰 플랫폼 웹 사이트 GEARZ.GG의 프론트엔드 개발을 주도했습니다.

두 서비스 모두 프로젝트 기획, 설계 단계부터 참여하여 유저를 위한 더 나은 UI/UX 제공에 기여하였으며 도합 11만의 MAU를 달성했습니다.

개발팀 기술 세미나 건의, PR 템플릿 활용 및 정착 등의 사내 건강한 개발문화를 만들기 위해 노력하였습니다.

(주)피에스애널리틱스(PSAnalyticsInc.) 에서 인턴십 프로젝트를 진행하였습니다.
풀스택 개발과정과 웹 소켓을 활용한 실시간 멀티플레이 환경 '리그오브레전드 밴픽 시뮬레이터' 개발 프로젝트를 경험 하였습니다.

전 세계 약 9000개 게이밍 기어 제품에 대한 리뷰와 정보, 프로게이머, 인기 리뷰어 또는 팔로잉하는 유저의 게이밍 기어 세팅 정보를 제공하는 게이밍 기어 리뷰 플랫폼 - MAU 3만 달성 (Service Link)

디자인 시스템 구축 및 컴포넌트 설계

• 디자인 시스템에 따라 재사용성이 높은 컴포넌트 설계 및 구축

• 컴포넌트간 결합도를 낮추고 독립적인 재사용을 가능하게 하기위해 compound pattern 적용

• tailwind-css + cva를 활용해 다양한 variants에 따른 스타일 정의

• 프로젝트 유지보수성, 생산성 향상

Google Sheets API를 활용한 i18n 번역 토큰 관리 개선

• google-spreadsheet API 연동 업로드, 다운로드 스크립트 작성 및 node 스크립트 정의

• 번역 토큰 추가 및 수정 작업 효율화를 통한 생산성 증대 번역가 검수직후 동기화 가능한 번역본 문서 마련

서비스, 백 오피스 기능 개발

• supabase auth , Next.js middleware 를 활용한 Google, Twitter 소셜로그인 기능 구현

• 검색, 유저 프로필 커스텀, 리뷰 작성, 팔로우 팔로잉, 알림 등의 전반적인 SNS 및 플랫폼 기능 개발

• react-image-crop, react-image-file-resizer 활용 유저 업로드 이미지 커스타마이징 제공 및 최적화

• aws-sdk를 활용한 CDN 이미지 업로드, 유저 및 서비스 데이터 관리 백 오피스 개발

서버 리소스 관리

• 서버 컴포넌트: 초기 로딩 속도를 향상시키고 서버 인프라에 접근

• Supabase: Supabase 쿼리, psql 함수를 활용한 데이터 호출 및 업데이트

• React Query: 클라이언트와 서버 사이드 모두에 대응할 수 있는 유연한 비동기 데이터 상태관리

리그 오브 레전드 “전략적 팀 전투(TFT)” 플레이어들을 위해 설계된 플랫폼으로, 메타 분석, 팀 구성 가이드, 유저 전적 검색, 인게임 요소 성능 통계 등의 기능을 제공 - MAU 8만 달성(Service Link)

추가 기능개발 종료, 게임 시즌변경 대응, 유지보수 및 서비스 운영중

전략 제공 콘텐츠 및 콘텐츠 작성 백 오피스 리뉴얼

• 콘텐츠 작성 생상성 향상을 위한 react-markdown, drag & drop 컴포넌트 구현

RESTful API와 React Query를 활용한 데이터 호출방식 통합 및 상태 관리 개선

• 분산되어 있는 데이터 호출 방식 통합을 위해 전체 데이터를 RESTful API로 전환 제안

• 서버 상태 관리를 위해 React Query, Custom hook을 조합하여 활용

• React Query의 refetch, error boundary를 통한 에러 처리

• 데이터 호출 방식 통합 및 유지 보수성, 서버 상태 캐싱을 통한 이점 확보

애플리케이션 성능 최적화 렌더링 성능 개선 및 LCP 50% 개선

• 메모리 누수 프로파일링 및 해결

• React 메모이제이션을 통한 렌더링 성능 개선

• 정적 에섯 데이터 포멧 최적화 및 Cloudflare CDN 캐싱 정책 설정을 통한 LCP 50% 개선

React 프로젝트 Next.js 마이그레이션

• 레거시 React 프로젝트를 Next.js로 마이그레이션

• Next.js 페이지 라우팅 적용, SSR/SSG 구현, 메타 태그 적용 등

• CSR, SSR, SSG 페이지 구현, SEO 지표 90점 이상 달성

서비스 정식오픈을 위한 페이지 개발 및 레거시 스타일링 청산

• 다양한방법으로 혼재되어있는 컴포넌트 스타일링을 styled-components로 리펙토링

• 인게임 데이터 조회, 유저 전적검색 기능 개발

• 서비스 정식 오픈 기반 마련, 컴포넌트 유지보수성 개선

서비스 홍보 이벤트 페이지 구현

디자인 시스템 정비 및 리디자인, 광고 송출

효과적인 작업 프로세스 및 QA를 위한 git flow 브랜치 전략 도입

리그 오브 레전드의 팀 전략 수립 단계인 챔피언 선택 및 금지 과정을 실제 인게임과 유사한 멀티플레이 환경에서 시뮬레이션하는 프로젝트

실시간 멀티플레이 환경 구현

•게임환경과 유사한 실시간 양방향 통신을 위해 socket.io를 활용

•1인, 1:1, 5:5 멀티플레이가 가능한 옵션 제공

1차 구현 사항

•React 프론트엔드, express.js 백엔드를 활용한 서비스 구현

•풀스택 개발과정 경험

2차 구현 사항

•프론트엔드, 백엔드를 각각 Next.js, Nest.js 프레임워크로 마이그레이션 및 배포

•프레임워크 아키텍쳐에 따른 유지보수성 개선 경험