DEV.

이택우 경력 기술서

contact :[email protected]
이력서블로그깃허브포트폴리오

경력

(주)비씨랩스

프론트엔드 엔지니어

2022.11 ~ 2024.07

사용기술Typescript, Next.js (Pages router), Recoil, Tanstack-Query, TailwindCSS, Next-i18next, Jest, CircleCI, Github Actions, Storybook

프로젝트

신규 프로젝트 Earn 및 반응형 개발

2024.01 ~ 2024.07

참여 인원 2명

고정 수익형 펀드 상품인 Earn의 마켓과 결제 기능을 기획 단계부터 참여하여 개발했습니다.

  • 공용 결제 UI/UX의 잦은 요구사항 변경에 대응하기 위한 합성 컴포넌트 패턴을 적용하고, 상태 의존성을 줄여 컴포넌트 간 결합도를 낮췄습니다.
  • 결제 기능의 안정성을 높이기 위해 테스트 코드 작성과 자동화를 도입했습니다.

역할

  • Earn 마켓 리스트 페이지, 디테일 페이지 및 멀티 모달 Form 결제 기능 담당
  • 펀드(Earn, Quant) 마켓 리스트, 디테일 페이지와 UI 라이브러리의 모달 등 주요 컴포넌트 반응형 담당
  • Jest shard와 CircleCI를 활용한 테스트 자동화 구축

성과

  • 기존 데스크탑 중심에서 Mobile First 접근으로 전환하여 모든 디바이스에서 일관된 사용자 경험 제공
  • max-width 기반의 브레이크포인트를 min-width 전환하여 반응형 레이아웃 대응
  • Earn과 Quant의 결제 모달을 공용 컴포넌트로 추상화하여 재사용성 향상
  • Jest와 React Testing Library를 활용한 결제 관련 기능 테스트 커버리지 90% 달성
  • CircleCI에서 테스트 병렬화를 통한 CI/CD 파이프라인 최적화

메인 서비스 고도화 및 성능 개선

2023.04 ~ 2023.12

참여 인원 2명

리브랜딩 이후 팀 인원이 감소(5명→2명)한 상황에서 메인 서비스의 성능 개선과 코드 품질 향상을 주도했습니다.시간과 인력이 제한된 상황에서 효율적으로 업무를 관리해야 했습니다. 따라서 기능 스프린트와 FE 리팩터링 세션 을 분리하고, 신규 기능 개발과 기술 부채 해결을 병행하도록 업무 분담을 주도했습니다. 리팩터링 기간에는 기술 부채가 되는 문제를 정의하고, 구조적인 해결에 집중했습니다.

역할

  • 메인 서비스 Coinvestor의 결제 프로세스와 Spot, Quant 두가지 펀드 디테일 페이지를 메인으로 담당
  • 펀드의 마켓 리스트및 디테일 페이지, 소셜 피드, 랜딩, 마이 페이지 추가 기능 개발 및 유지보수

성과

  • 기술 부채 해결 및 개발 생산성 개선
  • 중복 구현된 로직과 UI를 정리하여 코드베이스 최적화
  • 일관된 Tanstack Query 도입을 통한 서버 상태 관리 개선
  • 중앙화된 에러 처리 시스템 구축
  • 디자인 시스템 UI 컴포넌트의 일관성 및 재사용성 개선
  • 도메인별로 중복 구현된 컴포넌트들의 사용성과 유지보수 현황을 분석하여 공통화
  • 컴포넌트의 반응형 대응과 커스텀 설정(사이즈/패딩)을 확장하여 재사용성 강화
  • 다국어 대응 next-i18next를 활용해 6개 언어 지원으로 글로벌 접근성 향상

문제 해결

문제

펀드 디테일 페이지의 느린 초기 로딩 속도와 성능 이슈로 인한 사용성 저하

분석

  • 시간이 지남에 따라 증가하는 데이터로 인해 서버사이드에서 API 호출의 통신 지연
  • 페이지에 부합하지 않은 서버사이드 렌더링(getServersideRendering) 방식 채택
  • 서버 상태 업데이트 주기에 맞는 적절한 캐싱과 최적화 전략의 부재

해결 및 성과

  • 전체 페이지 로딩 속도 70% 개선 (1.312s → 399ms)
  • FCP: 1s → 86.12ms, LCP: 2.1s → 0.4s, CLS: 0.416 → 0.063, Hydration: 1s → 189.58ms
  • ISR 전환: 서버 상태 변화가 적은 영역을 정적 렌더링으로 전환 뒤 적절한 revalidate 주기 설정
  • 컴포넌트 단위로 정적 렌더링 여부를 분석하여 하이브리드 렌더링 도입
  • 서버 상태 업데이트 주기와 빈도, SEO 포함 여부를 고려하여 서버사이드 API 호출 여부를 개선
  • Tanstack Query를 통한 서버 상태 변경 주기에 맞는 캐싱 및 Prefetch 전략 구현

배운 점

Next.js 서버사이드 렌더링 페이지 개선하기

문제

토큰 만료로 인해 발생하는 클라이언트 상태와 인증 상태 불일치 및 전역으로 에러 전파

원인 분석

  • 중복된 로직의 파편화된 예외처리로 코드 예측 가능성의 저하
  • 컴포넌트 단위의 에러 바운더리 미적용으로, 특정 에러 발생 시 페이지 전체가 error.tsx로 리다이렉션되고, fallback UI가 표시되지 않는 사용자 경험 문제 발생
  • HTTPOnly 쿠키로 관리되는 인증 토큰과 클라이언트 상태가 비동기화되는 문제가 있었고, 토큰 재발급 로직이 에러 처리와 혼재되어 유지보수의 어려움
  • Axios 인터셉터의 인증 로직에서 await와 .then/.catch의 혼용으로 인해 비동기 호출 실패가 제대로 처리되지 않거나 예외가 누락됨

해결 및 성과

  • 인증 토큰과 클라이언트 상태를 동기화하도록 인터셉터 로직을 try-catch 문으로 일관되게 리팩토링
  • React-error-boundary와 QueryErrorResetBoundary를 사용해 에러 바운더리를 도입
  • 에러 발생 시 fallback UI를 제공하고, 프로덕션 환경에서 특정 에러 코드에 대한 Slack 알림 기능 추가
  • 기획팀과 협업해 누락된 예외 처리 케이스를 식별하고, Fallback UI 제공으로 사용자 경험 개선

공용 UI 라이브러리 개발 및 개선

2023.04 ~ 2024.07

참여 인원 4명

FE팀이 2명으로 줄어가는 과정에서 우선 순위에 밀려 관리가 미흡했습니다. 코드 일관성 부족으로 인해 사용성과 유지보수성이 저하되었으며, 이 문제가 전이되고 있음을 파악했습니다. props와 컴포넌트 구조의 비일관성 문제로 사용성 저하되어 중복 컴포넌트가 증가하는 등 라이브러리가 제대로 활용되지 못했습니다. 이를 해결하기 위해 FE 리팩터링 세션 동안 꾸준히 개선을 이어갔습니다. 이후, 디자인 시스템 업데이트와 디자인 토큰 적용으로 확장성과 유지보수성을 강화했습니다.

역할

  • 비일관적인 props 네이밍(ex: props명의 onClick/handleClick)과 타입을 분석하여 인터페이스 표준화
  • React.forwardRef로 모든 컴포넌트 래핑하여 불필요한 ref 래퍼 컴포넌트 제거
  • getSize, getColor 등 공용 유틸을 추가하여 산재된 스타일링 로직 일관성 개선
  • 디자인 시스템 업데이트에 따른 신규 토큰을 Tailwind 유틸로 확장 구현

성과

  • UI 컴포넌트 표준화와 품질 개선으로 디자인 라이브러리 관련 Bugfix PR 월 평균 42.1% 감소
  • Modal, Alert, Toast, Badge 등 주요 컴포넌트에 width, padding 등 커스텀 props 추가로 유연성 강화
  • getSize, getColor 등 공용 유틸리티 함수를 설계해 코드 간소화 및 일관성 강화
  • Dialog, Alert 등 주요 컴포넌트의 forwardRef 적용으로 DOM 조작 유연성 확보
  • 키보드 인터랙션과 접근성 속성을 추가하여 사용자 경험 개선
  • 브레이크포인트(680px, 1024px) 기준으로 Mobile First 반응형 UI 구현

Next.js 마이그레이션 및 리브랜딩

2023.01 ~ 2023.04

참여 인원 5명

PlayV에서 Coinvestor로 리브랜딩하면서 메인 서비스 전반을 Next.js로 마이그레이션했습니다. 담당 페이지에 서버사이드 렌더링을 도입하였고, 개발 생산성 향상을 위해 공용 컴포넌트와 유틸리티를 설계했습니다.

역할

  • Quant/Spot 펀드 디테일 페이지와 펀드 상태 관리 공용 유틸 담당
  • 펀드 상품 결제 기능 및 결제 UI 공용 컴포넌트 구현
  • 서버사이드 렌더링 도입 및 팀 세미나/문서화 주도

성과

  • UI 상태 관리 효율화: 펀드 스케줄 관리 공용 클래스/메서드 개발
  • API 데이터에서 펀드 스케줄에 따른 UI 상태 관리 유틸 사용하여 4개 페이지에서 재사용
  • 펀드 상품 결제 기능과 멀티 페이지 모달 결제 UI 설계 및 구현
  • SSR 도입과 관련한 팀 세미나 주도 및 문서화를 통해 팀 숙련도와 협업 효율성 강화
  • 댓글 기능 모듈화 및 Feed 페이지에 재사용 가능한 구조로 개선
  • react-query의 useInfiniteQuery 도입으로 API 데이터 관리 로직을 간소화하여 유지보수성 개선
  • 댓글 기능에 Google 번역 API를 연동해 글로벌 사용자 커뮤니티 활성화 및 접근성 향상

신규 기능 개발 Quant Trading Room

2022.12 ~ 2023.01

참여 인원 2명

트레이더 유저를 위한 별도 도메인에서 Quant 펀드 생성과 관리 대시보드를 개발했습니다. 펀드 스케줄에 따른 UI 상태 관리와 상품 정보 입력, 자료 업로드 등 트레이더가 필요한 핵심 기능을 구현했습니다.

역할

  • 펀드 상품의 등록을 위한 폼과 펀드 상품 관리 리스팅 페이지 구현
  • 날짜 기반 펀드 스케줄 미리보기 테이블, 프로필 사진 및 pdf 업로드 기능 개발

성과

  • 트레이더가 직접 Quant 펀드를 생성하고 관리할 수 있는 기능 추가
  • 날짜 기반 스케줄링 데이터를 시각화하여 펀드 운영 일정 관리 효율화
  • 트레이더 유저가 펀드 생성부터 운영까지 전체 라이프사이클을 관리할 수 있는 대시보드 제공

백오피스 관리자 페이지 개발

2022.11 ~ 2022.12

참여 인원 1명

멀티 도메인 서비스를 관리하는 백오피스 페이지를 개발 및 유지보수 했습니다.

역할

  • 펀드 수익률 현황과 정산 대시보드 기능 구현
  • 퀀트 상품의 위험 지표 모니터링 및 설정 페이지 구현

성과

  • 정확한 수치 데이터 표시와 효율적인 정산 UI 구현으로 운영 효율성 향상
  • 위험 지표 실시간 모니터링으로 펀드 운영 안정성 강화

코인고스트

프론트엔드 엔지니어

2022.06 ~ 2022.08

사용기술Typescript, Next.js (pages router), Recoil, SWR, Styled Components

참여 인원 1명

암호화폐와 NFT 자산을 통합 관리할 수 있는 모바일 지갑 신규 프로젝트에 참여했습니다

역할

  • 통합 지갑을 위한 모바일 마이페이지 리뉴얼 및 암호화폐/NFT 지갑 컴포넌트 개발
  • 마이페이지 내의 자산 관리 UI 공용 컴포넌트 담당
  • 암호화폐와 NFT를 하나의 인터페이스에서 통합 관리할 수 있는 지갑 관련 공용 컴포넌트 개발로 일관된 UX 제공 및 유지보수 개선

백오피스 관리자 시스템 개발 및 유지보수

2022.06 ~ 2022.07

참여 인원 1명

역할

  • 유저 정보, 이벤트, 블로그, 익명 게시판의 관리 페이지 개발
  • 관리자 페이지의 템플릿 공용 컴포넌트 개선 및 유지보수

성과

  • 유저와 포스팅 데이터의 필터링/검색 기능 및 이벤트 게시글 CRUD 구현
  • 공용 템플릿 컴포넌트화로 운영팀의 업무 효율성 및 개발 생산성 향상