미리보기

• 주식 모으기 서비스

  • React SPA 구조를 Next.js App Router로 마이그레이션하여 초기 로딩 속도(FCP) 60% 개선 및 TBT 최적화

• 계좌 자산/수익률 서비스

  • 자산 및 수익률 데이터 조회하는 통합 SSR 서비스 구축

  • 서버 컴포넌트(RSC)를 활용해 대규모 트래픽(일 100만 건 이상) 환경에서 클라이언트 번들 크기를 줄이고 데이터 정합성 확보

• 투자왕 랭킹 및 모의 투자 서비스

  • 랭킹 시스템 및 모의 투자 서비스의 신규 설계부터 운영까지 전 과정 주도

  • FSD(Feature-Sliced Design) 아키텍처 적용으로 코드 응집도를 높이고, 서비스 종료 시 발생할 수 있는 유저 이탈 방지를 위해 안정적인 트랜지션 처리

• 웹뷰 스킴 빌더

  • 인앱 웹뷰 환경의 복잡한 스킴(Scheme) 생성을 자동화하는 스킴 빌더 개발

  • 반복적인 수동 작업 프로세스를 혁신하여 업무 소요 시간 83% 단축(60분 → 10분) 및 휴먼 에러 방지

• 초대 이벤트 및 사전예약 모듈화

  • 신규 유저 유입을 위한 초대 및 사전예약 이벤트 시스템 템플릿화

  • 각 게임 IP별 커스텀 대응이 가능한 JSON 기반 UI 주입 구조를 설계하여, 이벤트 페이지 제작 리소스를 절감하고 신규 고객 8% 유입 증대에 기여

• 공통 모듈 패키지 개발

  • 게임 공식 홈페이지 표준화를 위한 공통 UI 패키지(NCUI) 개발

  • 재귀적 설계를 통한 N-Depth 대응 탭 컴포넌트, 커스텀 이벤트 콜백이 포함된 공통 모달 등 고가용성 모듈 4종 구현으로 팀 내 개발 생산성 향상

• Lovebeat & Blade & Soul 2 홈페이지 개발

  • 메인 IP 공식 홈페이지 리뉴얼 및 운영 주도

  • Legacy 코드(JSP/SVN)를 최신 스택(React/Git)으로 전환하는 아키텍처 설계를 담당

  • Webpack 빌드 최적화 및 이미지 최적화를 통해 페이지 초기 로딩 속도 개선

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

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

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

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

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

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

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

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

초보자도 주식을 쉽게 투자할 수 있도록 적립식으로 투자할 수 있는 서비스

서비스 이관 및 성능 개선

• 페이 레포지토리에서 증권 레포지토리로 서비스 이전

• Next.js App Router 마이그레이션 및 Streaming SSR 도입

• Suspense를 활용한 데이터 페칭 우선순위 제어로 초기 로딩 성능(FCP) 60% 개선 및 유저 이탈률 감소

웹뷰 환경 최적화

• 웹뷰 요청 헤더에서 기기 정보(다크모드 여부, 시스템 높이, 다이나믹 폰트 등)를 파싱 처리 후 Context API에 저장

• Middleware 단계에서 기기 정보를 주입하여 클라이언트 렌더링 전 테마/폰트 설정을 완료해 깜빡임 현상 제거

서버 상태 관리 단일화

• tanstack-query의 Hydration Boundary를 활용해 서버-클라이언트 간 데이터 직렬화 비용을 절감하고, 초기 진입 시 불필요한 API 추가 호출(Waterfall) 제거

• 중복 로직 제거 및 코드 복잡도 감소, 개발자 경험(DX) 개선 (관련 글)

주식 모으기(적립식 투자) 기능 개발

• 모으기 생성 화면에 유저 데이터 기반 중심 A/B 테스트 API 연동

• 약정 검증 로직을 간소화하고, 약정 유효성 검증 함수 / 직렬 검증 함수를 분리해 유지보수성 향상

전자서명 공통화

• 복잡한 전자서명-본 요청 시퀀스를 추상화하여, 비즈니스 로직과 보안 로직의 관심사 분리

• 전자서명과 본 요청이 결합된 복잡한 비동기 시퀀스를 커스텀 훅으로 캡슐화하여, UI 컴포넌트에서는 비즈니스 로직의 흐름(Flow)에만 집중할 수 있는 환경 구축

개발 생산성 향상

• MSW(Mock Service Worker) + Storybook을 활용한 컴포넌트/기능 단위 개발 환경 구축

• SSR 및 서버 컴포넌트 환경에서도 MSW를 통해 Streaming SSR이 동작하도록 커스텀 구현

계좌에 따른 현재 자산 및 수익률을 조회할 수 있는 서비스

성능 및 아키텍처 최적화

• 일일 100만 건 이상 트래픽 처리 서비스에 SSR + 서버 컴포넌트를 적용하여 클라이언트 자바스크립트 번들 크기 감소

• Streaming SSR을 활용해 변동성이 큰 자산/수익률 데이터를 단계적으로 렌더링함으로써, LCP 지표 개선 및 사용자 이탈 방지

개발자 경험(DX) 개선

• 서버 컴포넌트 및 Streaming SSR 사용 시 발생한 불편 사항 개선 (관련 글)

• Next.js의 fetch와 tanstack-query 혼용 시 불편을 해결하기 위해 FetchBoundary 컴포넌트 개발

데이터 시각화 및 UX 고도화

• 서버 컴포넌트 환경에서 활용 가능한 Deferred 스켈레톤 로딩 컴포넌트 적용하여, 데이터 로딩 중에도 레이아웃 시프트(CLS) 없이 안정적인 UI 제공

• visx 라이브러리를 활용하여 기간별 계좌 수익률을 한눈에 파악할 수 있는 수익률 라인 차트 개발

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

아키텍처 및 코드 품질 개선

• FSD(Feature-Sliced Design) 아키텍처 도입 후, 과도한 추상화로 인한 생산성 저하라는 트레이드오프를 분석하여 팀 컨벤션에 맞는 폴더 구조로 재설계(Refactoring)

• 서비스 안정성을 위해 영역별 Error Boundary를 세밀하게 적용하여, 특정 API 에러가 전체 화면의 Fallback으로 이어지지 않도록 방어 로직 구축

UI/UX 성능 최적화 및 안정화

• Pull To Refresh 기능을 디바이스별 특성에 맞춰 트러블슈팅하고, 복잡한 터치 이벤트를 안정화하여 네이티브 앱 수준의 조작감 제공 (관련 글)

  • CSS transform 기반 GPU 가속과 requestAnimationFrame을 활용하여 스크롤 및 애니메이션 성능 최적화 (60fps 유지)

• search params를 활용한 동적 UI 렌더링 제어 모듈을 개발하여, 화면 진입 경로에 따른 맞춤형 화면 분기 처리

실험 및 데이터 기반 개선

• A/B 테스트를 통해 UI 변경에 따른 유저 행동 데이터를 분석하고, 유의미한 지표를 보인 Winning(승자)를 최종 적용하여 서비스 고도화

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

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

• JSON 스키마 주입 방식을 도입하여 코드 수정 없이 데이터 설정만으로 각 게임 IP(리니지, 아이온 등)별 맞춤형 UI/UX 대응

• Google Analytics(GA) 커스텀 이벤트 태그 설계를 통해 유저 유입 경로 및 초대 수락 전환율 등 비즈니스 데이터 트래킹 기반 마련

• i18n(국제화) 적용을 통해 북미, 대만 등 10개국 이상의 다국어 서비스 대응 프로세스 표준화

범용적인 초대 이벤트 모듈화 작업

• 신규/복귀 유저 초대, 목표 인원 달성형 등 다양한 이벤트 타입을 수용할 수 있는 공통 로직 개발

• 컴포넌트 단위의 모듈화를 통해 보상 지급, 코드 등록, 공유하기 등 핵심 기능을 블록처럼 조합 가능하도록 구현

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

• 서비스에 사용되는 모든 영역(보상, 초대하기 영역, 초대 코드 등록 영역, 상단 영역 등) 개발

  • 게임마다 다르게 사용 가능하도록 Json을 주입하여 쉽게 커스텀할 수 있는 컴포넌트 설계

• 초대 서비스만의 컴포넌트를 구축하여, 디자인 적용 및 퍼블리싱 단계를 간소화하고 일관된 유저 경험 제공

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

패키지 배포 및 버전 관리 체계 구축

• Git Tags를 활용하여 Versioning 및 S3를 통한 버전별 정적 패키지 관리 진행

재활용 가능한 UI 컴포넌트 설계 및 리팩토링

• N-Depth 대응 재귀 탭(Tab) 컴포넌트: 하드코딩된 3-Depth 구조를 재귀 호출 방식으로 전면 리팩토링하여, 무한한 깊이의 메뉴 구조에도 대응 가능한 확장성 확보

• 대표 캐릭터 컴포넌트 설계: 게임 데이터와 연동되는 '인게임 대표 캐릭터 변경 모듈' 개발 및 유지보수를 통해 공통 기능의 일관성 유지

• 공통 모달(Modal) 컴포넌트 설계: SweetAlert2의 편리한 사용성을 벤치마킹하여 alert, confirm, toast 등 다양한 형태의 모달을 명령형/선언적 방식으로 모두 지원하도록 개발

  • 필수적인 props를 모두 제공하고, 이벤트 콜백을 제공하여 예측 불가능한 케이스 대응

폐쇄망에서 관리되던 코드 리뉴얼 작업 리드

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

  • 러빗툰, 뮤직리스트, 패션, 초보자 가이드 등 메인 페이지들을 담당하고 전체 아키텍처 설계를 담당

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

• JSP 코드를 React 기반 리뉴얼 작업 진행

• API 캐싱 최적화 및 서버 상태 효율적으로 관리하기 위해 React-Query를 도입

• Webpack 커스텀 진행 (관련 글)

  • Thymeleaf로 개발된 페이지에 임포트할 정적 번들 파일(js, css)를 빌드하기 위해 Webpack 커스텀 Config 작성

  • 번들 용량 최적화를 위한 다이나믹 임포트, 이미지 최적화를 진행하여 500kb 내외로 용량 조절

스터디 멤버를 직접 모집하고 스터디장으로서 활동

• 총 6권의 개발 도서 스터디 운영 및 진행 완료

• 매주 온라인으로 스터디 내용을 발표하며 다양한 토론을 진행하며 개발적인 시야 확장

구름톤 univ에서 진행한 해커톤의 프론트엔드 멘토로 참여했습니다.

• 해커톤 진행 과정에서 마주한 인증 오류 및 구현 어려움에 대해 멘토를 진행