미리보기

인도네시아 시장을 대상으로 온라인 상점 관리 서비스를 제공하는 플루고에서 옴니채널 웹 어플리케이션의 전반적인 프론트엔드 개발 및 운영을 맡았습니다.

• 옴니채널 서비스 PlugoSync 웹 프론트엔드 개발 및 운영(React, TypeScript, Tanstack Query, React Hook Form)

  • Vue2로 작성되어 있던 기존 프로젝트를 React로 전환 및 신규 기능 추가 개발

  • 라이브 이슈 대응

  • 백엔드 API, 백오피스 개발

• 상점 관리 서비스 PlugoStore/PlugoAdmin 개발 및 운영(Vue2, Nuxt 2, TypeScript, JavaScript)

인도네시아 시장을 대상으로 온라인 상점 관리 서비스를 제공하는 코드브릭에서 여러 프로젝트의 프론트엔드 개발 및 운영 업무를 맡았습니다. 이외에 주니어 개발자 리딩, 디자인 시스템 개발 경험이 있습니다.

• 상점 웹 개발 및 운영(Vue 2, Nuxt 2, Vuetify, JavaScript)

• 상점 어드민 웹 개발 및 운영(Vue 2, Vuetify, JavaScript)

• 옴니채널 서비스 웹 프론트엔드 개발(Vue 2, Vuex, Vuetify, TypeScript)

• PC 온라인 스포츠 게임 FIFA Online 4 개발 및 운영(C++, ActionScript)

• Unity Engine 기반 모바일 카드 대전 게임 프로토타이핑 (Unity Engine)

• PC 온라인 레이싱 게임 Need For Speed: Edge 개발 및 운영(TypeScript)

• PC 온라인 게임 플랫폼 Stove 클라이언트 개발 (C++, Qt)

• 인게임 오버레이 구현 (C++, CEGUI)

• 플랫폼 테스트용 샘플 게임 개발 (C++, Ogre3D)

• 내부 개발 SDK 연동 테스트

• Unreal Engine 3 기반 온라인 FPS 게임 온라인게임 Crossfire2 개발 (C++, Unreal Engine 3)

• MMORPG '세피로스' 운영툴 리뉴얼(JSP, jQuery, JavaScript)

옴니채널 서비스 웹 프론트엔드 구현(React, TypeScript, Tanstack Query, React Hook Form)

• 여러 쇼핑몰을 한 곳에서 효율적으로 관리할 수 있도록 상품/재고/주문/채팅/통계 기능을 통합해서 제공하는 옴니채널 웹 어플리케이션의 프론트엔드 전반을 개발

• 상품/재고/채팅 관리 기능 구현, 개선

  • 쇼핑몰 API마다 다른 요구사항을 만족시키면서 효율적인 개발이 가능하도록 컴포넌트/코드 구조 설계

• 라이브 이슈 대응, 신규 기능 개발, 기존 기능 개선

  • Clarity를 통한 사용자 모니터링 및 pain point 확인, 사용성 개선

• 개발 생산성 향상을 위한 Figma 플러그인 개발

  • Figma 디자인을 디자인 토큰이 적용된 Tailwind CSS 형태로 변환

• 모바일 웹 개발

인도네시아 사용자들의 느린 디바이스 및 네트워크 환경을 고려하여 상점 웹이 더 빠르게 로딩 될 수 있도록 최적화 작업을 진행

• 번들 사이즈 최적화(Nuxt 2)

  • Nuxt의 컴포넌트 auto import 옵션을 튜닝해서 번들 사이즈 최적화(1.3MB → 410KB)

  • 로딩 타임 33.6s → 6.86s (3G network, 4x slowdown CPU, onload event 기준)

• 이미지 최적화(AWS Lambda@Edge)

  • 상점 메인 화면에 고해상도 이미지를 사용하는 케이스를 최적화

  • 모바일에서 접속할 경우 모바일 화면 사이즈에 맞게 Lambda@Edge를 사용해서 이미지 요청 시 실시간으로 이미지 리사이징

  • Lighthouse Performance Score(Mobile 기준) 30 → 54

상점 웹 장바구니/결제 플로우 개선(Nuxt2, Vuex, Vuetify, JavaScript)

• 장바구니/결제 과정에서의 이탈율을 낮추기 위해 사용성 및 성능 개선 작업 진행

• 마이크로 서비스 형태로 재구현된 백엔드 서버에 맞춰 UI 및 플로우 재구현

• 할인 조건과 장바구니 상태에 따른 바우쳐 추천 시스템 구현

PC 온라인 스포츠 게임 FIFA Online 4 개발 및 유지보수 (C++, ActionScript)

• Scaleform 기반 UI 개발 및 유지보수
• 피쳐 개발 및 유지보수
• 빌드 전달 및 라이브 이슈 대응
• E-Sports 대회 운영 지원

Unity Engine 기반 모바일 카드 대전 게임 프로토타이핑 (C#, Unity Engine)

• Unity Engine 환경에서 게임플레이 구현
• 게임 룰 전반과 그에 해당하는 연출 구현
• websocket 기반 멀티플레이 구현
• 웹 브라우져 타겟 빌드 R&D

PC 온라인 레이싱 게임 개발 및 유지보수 (TypeScript, Redux, React)

• TypeScript & WebKit 기반 게임 UI 라이브러리(FaceJS) 개발 및 유지보수

  • FaceJS: 아티스트가 Adobe Flash로 제작한 어셋을 게임 위에서 돌아가는 WebKit 기반 웹브라우져에서 사용할 수 있도록 해주는 인하우스 라이브러리입니다.

• AngularJS 기반 레거시 코드 마이그레이션 및 최적화

• 웹 프론트엔드 환경에서 피쳐 개발 및 유지 보수

  • 로비 UI, 인게임 HUD 개발

  • 아티스트와의 협업을 통한 interactive UI 구현

• 빌드 전달 및 라이브 이슈 대응

PC 온라인 게임 플랫폼 클라이언트 개발

• 인게임 오버레이 구현 (Qt, EasyHook, CEF, CEGUI)
  • 인게임 오버레이: 게임 내에서 플랫폼 기능을 사용할 수 있도록 해주는 기능입니다. 게임의 렌더링 API와 입력 API, 윈도우 메시지를 후킹해서 플랫폼 UI를 게임 위에 띄우고 유저 입력을 플랫폼 UI에 전달하는 식으로 구현되었습니다.
• 플랫폼 테스트용 샘플 게임 개발 (Ogre3D)
• 내부 개발 SDK 연동 테스트 (Unreal Engine 4)