미리보기

게임 가이드 서비스의 어드민 개발, 게임 쿠폰 서비스의 어드민 개발, K8s, Docker 기반 환경 기반 점검 웹뷰 서비스과 어드민 개발, 웹/플랫폼 서비스에 게임과 통일된 디자인 적용을 위한 넷마블 테마 시스템 구축 및 어드민 개발, 사내 어드민 개발 환경을 자동으로 구성할 수 있는 커스텀 CLI 도구를 개발

React, TypeScript, Zustand + Immer, Ant Design, Emotion, MSW, Webpack, Vite, Zod, Tanstack Query, React-Hook-Form을 사용하여 글로벌 유저를 대상으로 각 게임에 대한 가이드나 아이템 확률 정보를 확인할 수 있는 게임 가이드 서비스의 콘텐츠를 효율적으로 관리하기 위한 어드민 시스템을 개발했습니다. 기존 JIRA 기반의 수동 이관 프로세스를 자동화하여 비효율을 제거하고, 사용자 경험과 개발 생산성을 동시에 개선하며 사업/기획 부서의 서비스 운영 효율성과 안정성을 향상시키는 것을 목표로 했습니다.

React, TypeScript, Next.js, Zustand, K8s, Docker, GitLab CI, ArgoCd, K6을 사용하여 글로벌 유저 대상으로 게임 오픈 전이나 점검 시에 유저에게 게임 오픈까지의 시간 정보와 점검 항목을 전달해줄 수 있는 서비스를 담당하여 개발했습니다. 기존 Vue.js 기반으로 운영되던 게임 점검 웹뷰 서비스를 Next.js로 전환하면서, SSR을 적용해 초기 페이지 로딩 속도 높이고, 관리자의 데이터 변경 사항을 빠르게 유저에게 반영할 수 있도록 했습니다.

React, TypeScript, Zustand, Webpack, SCSS를 사용하여 다국어 별로 게임 점검 웹뷰 서비스 내에 보여줄 이미지, 내용과 오픈 시간 등을 설정할 수 있는 관리자 페이지를 개발했습니다. 기존에는 다른 팀의 CMS에서 데이터를 관리했기 때문에 관리자 기능 관련 문의가 있을 경우 CMS 담당 팀에 다시 요청해야 하는 불필요한 커뮤니케이션 비용이 발생했습니다.

React, TypeScript, Webpack, SCSS, Zod, React-Hook-Form, Tanstack Query를 사용하여 게임별 웹/플랫폼 서비스에 공통 색상을 적용하여 게임과 유사한 분위기를 제공하는 테마 시스템을 설계 및 구축했습니다. 기존 웹/플랫폼 서비스가 게임의 분위기와 맞지 않아 유저 몰입감이 떨어진다고 판단하였고, 기획/디자인 팀에 선제안을 통해 프로젝트를 시작했습니다.

React, TypeScript, Webpack, SCSS를 사용하여 유저가 쿠폰을 사용할 수 있는 서비스를 관리할 수 있는 어드민 페이지 개발을 담당했습니다. 어드민 중 쿠폰 서비스 화면을 구성할 수 있는 페이지, 쿠폰 사용률, 발급률, 지급 실패율을 확인할 수 있는 로그/지표 팝업, 쿠폰 사용 방법을 등록할 수 있는 가이드 설정 페이지 개발을 주로 맡아 진행했습니다.

K8s, Docker, GitLab CI, Argo CD, Harbor, Helm, nGrinder를 사용하여 서비스의 운영 효율성과 안정성을 높이기 위해 VM 기반 환경에서 K8s 환경으로 전환 작업을 진행했습니다. 실내 최초로 K8s 환경을 도입하면서 다른 구성원들이 환경 전환을 더 쉽게 할 수 있도록 가이드 작성과 주요 이슈 정리를 함께 담당했습니다.