미리보기

• 주식 모으기 서비스 고도화

  • React에서 Next.js로 마이그레이션 하여 FCP 60% 이상 개선 및 TBT 개선

• 투자왕 랭킹 서비스 설계 및 종료 대응

• 모의 투자 대결 서비스 개발 및 운영

• 초대 이벤트, 사전예약 등 이벤트성 페이지 개발 및 모듈화 작업

  • 이벤트를 통해 약 8%의 고객 수 증가

• Blade & Soul 2 공식 홈페이지 개발 및 유지보수

• Lovebeat 공식 홈페이지 개발 및 유지보수

• 공식 홈페이지에 사용되는 공통 모듈 4가지 개발 및 공통화

  • 공통 모달, 커뮤니티 상단 배너, 3뎁스 탭, 대표 캐릭터 변경 탭

신규 서비스(튜터링 플레이) 개발

• 마이 페이지, 유튜버별 채널 페이지 및 구독 기능 개발 및 유지보수

• 플립카드 구현을 통한 사용자 경험 개선 작업 수행

• 에피소드, 핵심표현, 코스 페이지 기능 개발 및 해당 페이지 제작

튜터링(tutoring) 플레이 유지보수

• 튜터링 플레이 서비스의 유저 데이터를 분석하여 수업 노트 UI 개선 작업 수행

• 관리자(admin) 페이지 신고 기능 업데이트

• 관리자 페이지에서 채널, 에피소드, 코스 검색 기능 최적화 작업 진행

주식을 쉽게 투자할 수 있도록 꾸준히 주식을 모을 수 있는 서비스

• 페이 레포지토리에서 증권 레포지토리로 테마그룹 주식 리스트 이관 진행

  • Next.js 마이그레이션 및 Streaming SSR 도입을 통한 성능 60% 개선

  • 웹뷰 요청 헤더에서 받은 네비게이션 높이 정보 및 다크모드 정보를 미들웨어에서 처리하여 Layout Shift 및 사용자 경험 개선

  • 서버 상태 관리를 tanstack-query로 단일화하여 코드 복잡도 감소 및 개발자 경험(DX) 개선 (관련 글)

• 모으기 생성 화면

  A/B 테스트 API 연동을 통한 신규 거래자 유입 촉진

• 클라이언트의 기능인 전자서명과 전자서명과 함께 요청할 API(본 요청)를 쉽게 사용할 공통 훅 개발

• 서버 컴포넌트 및 클라이언트 컴포넌트에서 URLSearchParams를 쉽게 관리할 수 있는 공통 모듈 개발

• MSW(Mock Service Worker)와 스토리북을 활용하여 개발 생산성 향상

• 기술 스택: Next.js, react-query, storybook, Jest

주식 초보자들이 쉽게 따라할 수 있도록 투자 고수들의 랭킹을 제공해주는 서비스

• 투자왕 랭킹 서비스 설계 및 서비스 운영 고도화 진행

  • 국가/종목 별 투자자 랭킹 리스트 개발

  • 투자자에 대한 거래내역 요약 바텀시트 개발

  • 에러 바운더리를 활용하여 영역별 에러처리

  • Pull To Refresh Trouble-shooting 및 개발 (관련 글)

• 약정 전환율 40%를 위한 온보딩 화면 개선

  • A/B 테스트를 통해 약정 온보딩 바텀시트 분기 처리

• 방문 리텐션 40% 확보하기 위한 개발

  • 특정 종목의 계좌별 수익률/수익금 랭킹보드 API 연동 및 UI 개발

  • 과거 랭킹보드 날짜별 조회 및 에러 처리

• 빌트인(built-in) 화면 분기를 위해 search params로 컴포넌트 UI 분기 처리

• 투자왕 서비스 시즌1, 시즌2 종료 대응

  • 시즌1: 서비스 진입시 '무지 쓸모있는 투자 소식' 컨텐츠 리다이렉트 처리

  • 시즌2: 서비스 종료 시점까지 종료 배너 노출 진행, 종료 후 '무지 쓸모있는 투자 소식' 컨텐츠 리다이렉트 처리

• 기술 스택: Next.js, react-query

과거 실제 주식의 데이터를 기반으로 게이미피케이션 요소를 적용하여 모의로 투자 대결해 볼 수 있는 서비스

• 투자 모의 대결 코어 로직 개발

  • 유저가 선택한 액션(구매, 판매, 건너뛰기)들을 기반으로 수익률 결과 제공

  • 12단계로 이뤄진 게임 구성에 필요한 애니메이션을 개발

  • 단계별 차트 상태, 애니메이션 상태, 유저 선택을 Zustand로 관리하여 코드 가독성 증진

• FSD 아키텍처 설계를 진행 (관련 글)

• 기술 스택: Next.js, react-query, Zustand

각 게임의 유저들을 위한 초대 이벤트를 쉽고 빠르게 제작할 수 있도록 템플릿화를 진행한 프로젝트

단발성 초대 이벤트 페이지 제작

• 초대 코드 등록 및 공유 페이지는 각 게임 IP의 요구사항과 원하는 형태에 맞게 제작

• 사용자 트래킹을 위해 Google Analytics(GA) 태그 추가

• 다국어 서비스 대응이 필요한 이벤트의 경우, 약 10개국 다국어 언어 대응을 제공

• 기술 스택: vue3, pinia, typescript, vite, scss

  • Battle Crush: https://battlecrush.plaync.com/en-us/invitation/events/cbt

  • Throne and Liberty: https://tl.plaync.com/invitation/events/beta/invite

  • Blade & Soul 2: https://bns2.plaync.com/ja-jp/invitation/events/influencer/register

초대이벤트 모듈화 작업

• 신규/복귀 타입, 인원 달성 타입 2가지 형태의 초대 타입 개발

• Vue로 개발된 이벤트성 페이지를 React와 vite를 사용하여 마이그레이션을 진행

• 보상, 초대하기 영역, 초대 코드 등록 영역, 상단 영역 등 초대에 쓰이는 모든 영역을 커스텀 가능하도록 개발

• 결합도는 낮고 응집도는 높아 재사용성이 높은 컴포넌트로 구현

• 초대서비스만의 디자인 시스템을 활용하여 디자인 적용 시간을 단축시켜 다양한 이벤트 페이지에 활용할 수 있도록 함

  • 9가지의 개별 모듈 개발(안내 문구, 인증, 초대하기 코드, 초대 인원, 초대하기 코드 등록, 배너, 프로세스, 유의 사항, 로그인)

• 기술 스택: react, react-query, vite, scss

게임 공식 홈페이지에 사용되는 공통 컴포넌트들을 모듈로 만들어 라이브러리로 관리하는 프로젝트

• 커뮤니티 상단 배너 개발

• 3뎁스 탭 개발

  • 트리 형태로 무한 뎁스로 개발할 수 있도록 재귀방식으로 리팩토링 진행

• 대표 캐릭터 변경 모듈 개발 및 관리

• 공통 모달 개발:

  • 다양한 형태의 UI 모달 패키지 개발 (alert, confirm, toast, modal 등)

  • SweetAlert2를 참고하여 커스텀 및 props 제공하여 유연한 사용 가능하도록 개발

• 기술 스택: typescript, scss

폐쇄망에서 관리되던 코드를 유지보수가 용이하게 리뉴얼 작업을 리드

• 레거시 코드를 반응형 페이지로 개편

  • 러빗툰, 뮤직리스트, 패션, 초보자 가이드 등의 페이지 담당

• 형상 관리 시스템을 SVN(Subversion)에서 Git으로 변경

• JSP 코드를 React로 마이그레이션 진행

• API 캐싱 최적화를 위해 React-query를 도입

• 번들 용량 최적화를 진행해 500kb내외로 용량 조절

• Webpack 커스텀 진행하여 페이지별 번들 파일 생성 (관련 글)

• 기술 스택: react, webpack, typescript, react-query, axios, react-paginate, scss
  URL: https://lovebeat.plaync.com/

게임별 약 50만 명 이상의 사용자들이 참여하는 사전예약을 디자인과 타입을 적용할 수 있는 운영툴

• 사전예약에 사용되는 코어 기능 개발:
  약관 동의, 이메일 및 전화번호 인증, 쿠폰 번호 발행 및 확인, 보상 선택 UI 화면 등의 기능 구현

• 사전예약 운영툴 에디터에 사용되는 보상 모듈 개발 및 유지보수

• 다국어 대응 및 RTL(Right-to-Left)을 필요로 하는 국가에 따른 UI 대응 작업 수행

• Bot과 매크로에 대응하기 위한 Captcha 기능 개발 및 적용

• 기술 스택: vue3, pinia, typescript, vite, scss