미리보기

• 게임 점검 시 글로벌 유저가 볼 수 있는 점검 웹뷰 서비스를 개편을 진행하고 운영하고 있습니다.

• 게임가이드, 쿠폰, 점검 웹뷰의 어드민 시스템을 신규 개발하여 다국어 기반으로 서비스를 세팅을 할 수 있도록 운영하고 있습니다.

• 여러 플랫폼 서비스에 CSS, JSON 기반으로 게임 테마에 맞게 디자인을 편리하게 적용할 수 있도록 시스템을 개발했습니다.

• 사용 기술: React, TypeScript, Zustand, Antd, Emotion, MSW, webpack

• 역할: 게임 가이드 관리자를 메인으로 담당하여 개발을 진행했습니다.

• 주요 업무 사항

  • 게임 가이드 서비스에 대한 점검 설정, 테마 설정 및 다국어별 가이드 내용 설정을 할 수 있도록 개발

  • 게임 가이드 메뉴 트리 Drag and Drop 적용

    • requestAnimationFrame(rAF), Throttle 적용으로 scroll, drag 이벤트 최적화

  • Button 요소에 Debounce 적용으로 API 과다 요청 방지

  • vite, esbuild, webpack 번들러 검토 및 적용

    • webpack에 기존 babel-loader에서 esbuild-loader 적용

  • 메뉴 트리 순회 로직에 대해 index 기반 데이터 접근을 통한 O(n)에서 O(1)로 최적화 진행

• 주요 성과

  • JIRA로 요청하던 Zone별 가이드 이관을 관리자 내에 제공하면서 커뮤니케이션 비용 100% 감소

    • 사용자가 이관 상태를 파악할 수 있도록 Step UI 제공

  • pnpm과 webpack에 esbuild-loader 적용으로 빌드 시간 평균 약 50% (5분 대 → 2분 대) 단축

  • 메뉴 트리 Drag and Drop, 복제 기능, 다국어 일괄 적용을 제공하여 유저 편의성 증대

• 배운점

  • 서비스 개발을 담당하지 않았지만 추후 유지보수를 할 수 있어 Next.js 14 버전 기준 Server Component의 이해도를 높이기 위해 학습 진행 학습 블로그 →

  • 서비스 쪽 빌드 시간 단축을 위해 docker layer cache에 대해 파악하고 적용 학습 블로그→

  • webpack, vite를 비교하며 특징을 알게 되었고 트러블 슈팅을 하며 적용하는 방식을 더 자세히 파악 학습 블로그 →

  • 의존성 설치 속도 개선을 위해 pnpm에 대해 학습하고 도입 학습 블로그 →

  • Immer 라이브러리를 활용하여 구조적 공유를 하여 중첩 데이터를 업데이트할 수 있도록 최적화 진행 및 Immer 라이브러리의 내부 로직 파악 학습 블로그 →

  • Debounce, Throttle과 requestAnimationFrame(rAF)에 대해 학습하고 관리자 서비스에 적용 학습 블로그→

  • 프론트엔드 css 라이브러리를 검토하고 비교하며 채택하여 각 라이브러리의 특징 파악 학습 블로그 →

• 사용 기술: React, TypeScript, Next.js, Zustand, MSW, K8s, Docker, GitLab CI/CD, ArgoCd, K6

• 역할: 서비스 메인 개발자로 전체 구조 설계 및 개발 진행했습니다.

• 주요 업무 사항

  • Vue2 기반의 게임 점검 시에 노출되는 웹뷰 서비스를 Next.js로 전환 진행

  • 서비스에 대한 개편 필요 사항을 기획팀에 먼저 제안하여 서비스 개편 진행

  • 모바일과 PC 빌드용 게임 점검 시간을 표시하는 웹뷰 개발, 다양한 게임 서비스에 맞는 반응형 페이지(4가지 타입) 제공

  • API 캐싱, next/image 활용을 통한 이미지 최적화, brotli 활용 번들 사이즈 압축을 통해 처리량(TPS) 증대

  • 성능 테스트 설계 및 K6 기반 유닛, 안정성, 롱런, 스파이크 테스트 진행

  • K8s 환경 적용으로 blue/green 배포 및 오토스케일링 적용

  • 사내 공통 디자인 시스템 활용하여 서비스 디자인에 적용

  • Next.js의 standalone 빌드를 적용하여 Docker 이미지 경량화

• 주요 성과

  • 서비스 초당 처리량(TPS) 30% 증대 (5000TPS → 6700TPS)

  • font preload와 이미지 압축 적용(avif, webp)을 하여 로딩 속도 감소로 향상된 사용자 경험 제공(LCP 기준 4.8s→ 1.7s 감소)

  • 에러 코드, 메시지 세분화하여 에러 발생 시 선제적으로 이슈 파악 가능

  • Next.js의 assetPrefix를 사용해 akamai cdn과 Next.js 연동하여 더 가까운 엣지 포인트에서 정적파일을 글로벌 고객에게 더 빠르게 제공

• 배운점

  • 기획/디자이너와의 협업을 통한 커뮤니케이션 능력

  • 국제화(i18n) 적용 방식과 성능 테스트 설계 및 실행 능력

  • 서버사이드 렌더링(SSR) 작동 원리 및 적용법

  • 다양한 웹 성능 최적화 기법 및 서비스 호환성 처리 방법

  • sharp를 활용한 next/image 내부 이미지 최적화 로직 파악 및 이미지 포맷별 특징 파악 학습 블로그 →

• 사용 기술: React, TypeScript, Zustand, MSW, webpack, SCSS

• 역할: 관리자 필요 항목 및 기능 기획팀에 제안, 관리자 구조 설계 및 관리자 서비스 전체 개발을 진행했습니다.

• 주요 업무 사항

  • 다국어 기반으로 한 웹뷰 데이터 신규/복사 등록, 수정 기능 개발

  • 웹뷰 유형 설정 및 안내 팝업 설정 기능 개발

  • 사내 여러 Zone에 대상으로 이관할 수 있는 기능 제공

• 주요 성과

  • 기획/사업부의 점검 웹뷰 관리 효율성 및 용이성 증대

  • 점검 웹뷰 등록 URL Path 감소로 등록 복잡도 감소

  • 커뮤니케이션 비용 감소 - 기획/사업부의 서비스 관련 문의 사항 감소

  • MSW 도입으로 백엔드 의존도 감소 및 개발 효율성 향상

• 배운점

  • 효율적인 공통 컴포넌트 구성 방법 및 타입 관리 기술

  • 다국어 기반 에디터 데이터 설정 및 커스텀 방법

  • Zustand 기반 상태관리 기법

  • 다양한 데이터 기반으로 한 여러 로직 및 UI 분기처리 방법

  • 사내 관리자 시스템 환경에서 webpack을 활용해서 MSW를 적용할 수 있는 방법

• 사용 기술: React, TypeScript, webpack, Recoil, SCSS

• 역할: 디자인 시스템 설계/구축 및 관리자 페이지 개발을 진행했습니다.

• 주요 업무 사항

  • 공통 디자인 시스템 적용 가이드 제작 및 관리자 페이지 구현

  • BEM 기법 기반으로 한 CSS, JSON 네이밍 컨벤션 수립

  • Etag 기반 데이터 캐싱 방식 적용

  • 게임 별 기본 적용 디자인 항목 생성 및 CDN 업로드

  • 디자인 관련 색상의 엑셀 업로드 및 다운로드 기능 개발

• 주요 성과

  • 일관된 서비스 이미지와 사용자 경험을 제공

  • 미리 정의된 디자인 요소들을 재 사용할 수 있으므로, 플랫폼 서비스의 UI 개발 시간과 비용 절감

  • 색상 정보와 같은 디자인 관련 데이터 관리 편리성 증대

• 배운점

  • 디자인팀과의 주요 협업으로 관점에 대한 차이 인식 및 커뮤니케이션 능력

  • CSS의 네이밍 컨벤션 기법 및 체계적인 CSS 구조와 SCSS 활용 방법

  • HTTP 헤더를 활용한 데이터 캐싱 기법(Etag)

  • 다른 부서를 대상으로 한 가이드 작성을 통한 문서화 능력 향상

• 사용 기술: React, TypeScript, Recoil, webpack, SCSS

• 역할: 쿠폰 공통 설정 페이지, 쿠폰 로그/지표 팝업, 쿠폰 가이드 등록 페이지 개발을 진행했습니다.

• 주요 업무 사항

  • 쿠폰 설정, 로그/지표 관리, 가이드 등록 페이지 개발

  • 맞춤형 엑셀 데이터 추출 기능 구현

  • 팀내 ESLint, Prettier, Husky 도입하여 코드 품질 및 일관성 향상되도록 진행

• 주요 성과

  • 사업부의 쿠폰 데이터 관리의 용이성 및 효율성 증대

  • 사업부의 요구사항에 맞춘 엑셀 포맷으로 로그 및 지표 데이터를 추출할 수 있게 함으로써, 보고 및 분석 프로세스를 간소화

  • 다국어 설정 지원으로 다양한 국가의 사용자들에게 지역화된 쿠폰 서비스를 제공

  • Husky와 Lint-staged를 통해 코드를 안전하게 관리

    • 커밋 전 Git 스테이징 영역에 있는 코드에 대해 ESLint와 Prettier 검사를 수행하여 Lint 룰에 맞지 않는 에러를 잡고 코드 정렬을 통해 코드의 일관성을 유지

  • import, export 순서를 통일

    • ESLint import/order를 사용해 순서 자동화 적용

  • GitLab CI의 파이프라인을 돌릴 때 태그 생성을 통해 롤백을 바로 할 수 있도록 적용하여 배포 프로세스의 안정성 향상

• 배운점

  • 팀 내 다른 개발자 동료들과 협업을 통한 합의 필요 사항 및 개발 방식

  • 다른 팀과의 협업/커뮤니케이션 능력

  • 상태 관리 라이브러리 Recoil 활용법

  • ESLint, Prettier, Husky 적용 방법 및 각 설정에 대한 의미 학습 블로그 →

• 사용 기술: K8s, Docker, GitLab CI/CD, ArgoCD, nGrinder

• 역할: VM 환경 기반 서비스를 K8s 환경으로 전환하고 성능 테스트를 진행했습니다.

• 주요 업무 사항

  • 각 Zone별로 K8s 환경 구성

  • GitLab CI/CD, ArgoCD 활용을 통한 빌드/배포 자동화 적용

  • 정적파일(html, js) 압축을 위해 Nginx 설정을 통한 brotli 압축 적용

  • 팀 내 K8s 환경 구축에 필요한 가이드 작성 및 주요 이슈 사항 정리

  • nGrinder 기반 성능 테스트 진행

• 주요 성과

  • 서비스 성능 10% 향상(TPS) 및 서비스 확장성 향상

  • 효율적인 리소스 사용으로 인한 운영 효율성 및 비용 절감

  • 서비스 안정성 강화 및 지속적인 모니터링 가능

• 배운점

  • K8s 환경 구축 방법 및 K8s 환경의 구조, 동작 원리

  • GitLab CI/CD 및 ArgoCD 적용을 통한 빌드 배포 자동화 방법

  • 성능 테스트를 통한 서비스 적정 처리량 도출 방법 및 성능 최적화 방법

배운 것을 기록하고 공유하고자 2021년도부터 시작하여 꾸준히 블로그 글 작성을 진행하고 있습니다.