미리보기

사용기술 : Next.js, React, Typescript, Tanstack Query, TailwindCSS, Storybook, REST API, Flow

(주)퓨처리즘랩스는 가상 자산 운용 회사로서 AUM 5억에서 (25년 2월 기준) 190억까지 약 40배 이상 성장하고 있습니다. 고객이 늘어남에 따라 기존 수기로 관리하던 엑셀 데이터를 웹으로 이전하여 관리 및 분석 도구를 만드는 역할을 맡아 진행하였습니다. 

• 암호화폐 중개 거래 수수료 플랫폼 개발 및 어드민 대시보드 운영 (B2C) https://tetherguy.com

• 운용 고객 증가로 인한 수기 엑셀 관리 한계를 해결하기 위해 B2B 시각화 어드민 개발 및 운영, 고객·운용 팀 대상 실시간 데이터 조회 및 분석 기능 제공, 업무 처리 시간 50% 단축 (vision.ftrsm.io)

• 8주간 Git 세션 운영, PR 기반 코드 리뷰 문화 정착 및 배포 안정성 개선 (긴급 대응 빈도 50% 감소)

엔베이스 랜딩 페이지 개발

• SEO를 위해 Next.js를 활용, 라우트별 Meta tag, Og tag 추가하여 라우트 하우스 기준, 80점 => 92점 향상
• 개발 생산성을 위해 tailwind.css를 활용하여 개발
  운영중인 사이트 : https://www.nbase.io/

기획 의도 및 프로젝트 소개

• 기획 의도 : 목표 달성 과정의 재미를 주는 씨앗(목표) 키우기 웹 서비스

• 팀원 : 프론트엔드 1명, 백엔드 1명

• 기술 스택 : reactJs, typescript, react-query, tailwindCSS, framer-motion, sentry

• 깃허브 URL : https://github.com/aligo-ligo/seed-moa

• 배포 URL : https://www.seedmooa.com ( 서비스 종료 )

사용자 피드백을 통한 메인 페이지 사용자 경험 개선

• 문제 : 다수의 목표가 존재할 경우, 커러셀 UI 사용자 경험 저하

• 원인 : 여러개의 목표를 빠르게 확인하지 못하는 것이 원인

• 해결 방법 : 무한 스크롤 기능을 도입하여 사용자 경험 향상 및 성능 개선, 성능을 고려해 scroll 이벤트를 활용하기보다 IntersectionObserver를 활용

주도적으로 API 공통 오류 처리 방식을 구축

• ErrorBoundary, QueryErrorResetBoundary, onError 콜백을 활용해 구현

• 예상하지 못한 Query, Mutation, 정상적이지 않은 Query를 공통으로 처리해 개발 효율화

기획 의도 및 프로젝트 소개

• 기획 의도 : 축의금 선정의 어려움 해결을 위한 커뮤니티 웹 서비스

• 팀원 : 디자이너 2명, 프론트엔드 2명, 백엔드 2명

• 기술 스택 : next.js, typescript, react-query, tailwindCSS, storybook

• 깃허브 URL : https://github.com/dnd-side-project/dnd-10th-3-frontend

• 배포 URL : https://donworry.vercel.app ( 서비스 종료 )

친밀도 테스트 결과 페이지 LCP 단축

• 문제 : 테스트 완료 이후 3초의 로딩 존재, 로딩 이후 결과 페이지로 이동시 의문의 지연 시간 발생

• 원인 : 3초의 로딩 이후, 결과 페이지로 이동시키는 로직이 문제라고 판단

• 해결 방법 : LCP 1.5초에서 0.03로 단축, router.prefetch 매소드를 활용하여 로딩 중, 결과 페이지 서버 컴포넌트의 페이로드를 미리 다운로드하여 LCP 단축

코드 리뷰 환경 개선

• 문제 : 컴포넌트 코드 리뷰 시, UI 동작을 파악하는데 어려워 정확한 코드 리뷰가 불가

• 원인 : 테스트 코드의 부재로 파악

• 해결 방법 : github-action을 활용하여 PR 생성 시 스토리북 배포 URL을 Preview로 제공하여 컴포넌트 기능을 테스트할 수 있는 환경으로 개선

• FSD 과제를 통해 학습한 아키텍쳐를 사내 대시보드에 적용하여 일괄된 규칙을 부여하여 시스템 유지보수성 향상

• 구성원 : UI/UX 디자이너 2명, 프론트엔드 2명, 백엔드 2명

• 소개 : 8주간 진행하는 사이드 프로젝트로 사회적인 문제인 축의금 관련한 서비스를 기획부터 개발을 진행하였습니다. 158명의 유저 리서치 결과 테스트와 작은 커뮤니티가 필요하다는 가설을 세웠으며 기반으로 축의금 선정을 도와주는 재밌는 테스트와 무엇이든 물어볼 수 있는 투표 커뮤니티를 개발하였습니다.

• 기술 스택 : next.js, tailwindcss, tanstack-query, storybook, eslint, prettier, husky