• 고정 수익형 펀드 상품 UX 기획단계 참여 및 신규 개발
• 3가지(Quant, Spot, Earn) 펀드 상품 결제 기능 및 UI 공용 컴포넌트 개발
  • 문제 진단: 기존 펀드 결제 input 컴포넌트 UX의 문제점들을 진단하여 문서화. 이후 기획자 및 디자이너와 논의한 뒤 사업팀에 전달하여 UX 정책 수정
  • 성과: 펀드 결제 기능 고도화 이후 Google Analytics 구매 이벤트 302% 증가 및 펀드 상품 총 투자금 108.2% 증가
• 펀드 스케줄에 따른 UI 상태 관리 공용 클래스, 메서드를 통해 개발 생산성 향상
  • Quant 상품 준비/구독/운영/정산 상태 관리 로직 개발하여 펀드 마켓과 디테일 페이지의 UI 일관성 유지
  • Spot 상품 구매/판매/취소 상태 관리 로직 개발
• 표시 규칙 정책에 따른 수치 데이터 가공 공용 로직 개발하여 정확한 정보 전달
  • Stat 컴포넌트 디자인 시스템 라이브러리에 추가 개발 및 숫자 가공 로직 개발하여 생산성 개선
• 디테일 페이지의 댓글 기능을 공용 컴포넌트로 추상화하여 레거시 코드의 복잡성 개선
  • 댓글 기능 고도화 이후 활성 사용자 15%, 댓글 참여 이벤트 65% 증가
  • 적절한 상태관리와 react-query(v4) 도입으로 레거시 컴포넌트의 props drilling과 api 호출 시 런타임 에러 해결
• 마켓, 펀드 상품 디테일 페이지 사용자 경험 향상을 위한 성능 개선
  • SSR에서 ISR로 전환 및 prefetch 적용하여 lighthouse score 67 -> 95 - 100으로 개선
  • 페이지 전체 로딩 속도를 약 70% (1.312s -> 399ms) 개선하여 사용자 경험을 개선
  • 알고리즘 상품 디테일 페이지 : LCP 80% (2.1 -> 0.4s) CLS 35% (0.416 -> 0.063) 개선
  • 매뉴얼 상품 디테일 페이지 : LCP 50% (1.8 -> 0.8s) , CLS 76% (0.762 -> 0) 개선
  • 초기 로딩의 hydration 단계를 81% 단축 (1s -> 189.58ms)
  • 펀드 데이터 업데이트 시간에 맞춰 API 호출하도록 적절한 캐싱으로 최적화
  • 번들링 사이즈 최적화 및 fallback, skeleton ui 개발
  • React-Query 도입 및 레거시 코드를 함수형으로 전환하여 개발 생산성 향상
• 펀드 마켓과 펀드 결제 컴포넌트 모바일 기기 반응형 작업으로 사용성 개선
• 펀드 디테일 페이지의 share, favorite, pdf download 구현하여 사용자 경험 강화
• Circle CI와 Vercel을 이용한 자동 배포 환경 구축 및 구축 방법 문서화로 협업 강화
• Jest를 통한 유닛, 통합 테스트 코드를 작성하여 초기 개발 단계에서 버그 방지
  • 펀드 결제 프로세스 테스트 커버리지 0 -> 90.19%로 개선
  • CircleCI 배포 스크립트를 작성하여 자동 테스트 환경 구축
• 백엔드 OAuth 중앙 인증 서버로 도입으로 프론트 대응
• 인증 로직 및 에러 바운더리 개선
  • 문제 진단: 예외처리가 제대로 되지 않아 특정 페이지 전체의 ui가 깨지는 버그 발견. 특정 api의 상태코드 200 에러 응답과 예외처리가 누락된 클라이언트 코드를 파악함.
  • 해결: Axios Interceptor의 에러 핸들러와 상태코드 200 에러의 예외처리 로직을 추가하여 중앙화. react-error-boundary, QueryErrorBoundary를 도입하여 에러 전파를 효율적으로 관리. 에러 toast 및 에러 fallback 컴포넌트 노출하도록 개선.
  • 인증 토큰 만료시 Refresh 토큰 재요청 로직 개선. 인증 요청과 동일한 refresh 요청의 후속 처리 함수를 추상화하고, async await를 도입하여 Promise 콜백 지옥을 해결함.
  • 에러 바운더리 개발 전 dev plan 작성하여 문서화하여 팀원들과 공유. 이 과정에서 api 200 에러를 파악하여 문서화
  • 예외처리 정책이 부재한 특정 에러를 파악한 뒤, 기획자와 협업하여 예외처리 공용 정책 개선 및 문서화

• 리브랜딩과 함께 Next.js로 마이그레이션.
  • 서버사이드 렌더링 도입 및 세미나와 문서화를 통해 팀원 숙련도 향상에 기여
• 마이 월렛 페이지의 유저 환전, 송금 기능 구현 및 리팩터링을 통한 코드 개선
• 커뮤니티 페이지 고도화 작업 이후 활성 사용자 15%, 참여 이벤트 65% 증가
  • 댓글 구글 번역을 통해 글로벌 사용자 커뮤니티 개선
  • 댓글 공용 컴포넌트 재사용 및 react-query 도입하여 레거시 코드 유지 보수성 개선
  • 댓글 삭제, 신고하기, 이미지 및 gif 업로드로 사용성 개선
• 다국어 대응: 운영 팀과 협업하여 6개 언어를 지원하여 글로벌 사용자 접근성 향상
  • next-i18next 사용하여 서버사이드 다국어 적용
  • Next.js 기반 다국어 라우팅 지원
• Trader 사용자의 펀드 관리 대시보드 및 펀드 생성 사이트 별도 도메인으로 구축
  • 펀드를 운영하는 Trader 유저가 상품을 등록할 수 있는 Create Strategy 페이지 개발
  • 사용자가 생성한 상품을 모니터링 및 관리 할 수 있는 Strategy List 페이지 개발
  • Circle ci를 통한 배포 관리 및 유지 보수
• 백오피스 개발: Coinvestor와 펀드 상품 관리를 위한 관리자 페이지 개발을 맡아, 운영팀과 Trader, Affiliate 사용자 레벨이 이용할 수 있도록 개발 및 유지보수했습니다.
  • 퀀트 펀드 상품의 정산 이력을 관리하는 'Quant History' 페이지 개발
  • 퀀트 상품의 위험 지표를 모니터링하고 설정할 수 있는 'Monitoring' 페이지 개발
  • Affiliate 사용자를 관리하는 User Management 개발
  • 레거시 코드 리팩터링: react-query 도입, 컴포넌트 추상화 및 props 구조 개선하여 deps 낮추는 등 복잡성을 낮추어 코드 유지 보수성 개선

• 공용 UI 라이브러리 개발 및 리팩터링으로 월별 평균 Bugfix PR 42.1% 감소
  • tailwind CSS의 custom utility classes로 디자인 시스템과 동일한 스타일 대응
  • getSize, getColor 등 공용 utils 추상화 및 사용하지 않는 props와 컴포넌트 구조 개선하여 개발 효율성 및 성능 개선
• 모달, 버튼 등 재사용성 높은 컴포넌트 개발하여 개발 시간 30% 절감
• Storybook을 활용한 디자인 시스템 개발로 디자이너와의 효율적인 협업 강화
• 모바일 기기에 최적화된 반응형 공용 UI 컴포넌트 개발

• 코딩 컨밴션 세미나를 주도적으로 진행한 이후 문서화하여 팀에 공유
• 팀에서 합의한 코딩 컨밴션으로 lint rule 적용 및 추후 팀원들에게 피드백을 받아 수정

팀 협업 및 기여

• dev plan과 온보딩 문서화 및 세미나를 정착하여 기술 문화 개선을 주도했습니다.
• UI test 영상을 첨부하는 등 꼼꼼하게 PR 작성을 작성합니다.
• 코드 리뷰로 잠재적 버그 탐지 및 활발한 논의를 통해 코드를 개선한 경험이 있습니다.
• 개발 초기 단계의 리뷰에 참여해 프로젝트의 UX를 함께 개선했습니다.
• Figma, Confluence 등 각종 문서를 기반으로 디자이너, 기획자와 협업했습니다.

• 통합 지갑을 위한 모바일 마이 페이지 리뉴얼
• 마이페이지 내 암호화폐, nft 지갑 컴포넌트 개발
• Wallet 공용 UI 컴포넌트 개발

• 유저 정보, 이벤트, 블로그, 익명 게시판 포스트 관리 페이지 개발 및 유지 보수
• 이벤트 게시글 post, edit, delete 기능 개발
• 유저, 포스팅 검색 필터링, 검색 기능 구현
• 관리 페이지의 템플릿 공용 컴포넌트 개발 및 개선