미리보기

Futurism Labs는 AUM 3억 원에서 (25년 5월 기준)240억 원까지 성장한 가상자산 운용 스타트업입니다.

• 운용팀의 수기 자산 관리 프로세스를 웹 기반 대시보드로 전환하여 업무 효율성 극대화

• Next.js 기반 MVP 웹 서비스 기획·개발 및 유료 고객 확보 => 약 300만 원 수익 창출

• Git 세션 주도 및 백엔드 CI/CD 구축(GitHub Actions, AWS EB) => 리뷰/배포 효율 향상

Nbase Korea는 게임 SDK를 전문으로 개발하는 기술 중심 B2B 스타트업입니다.

• Next.js를 활용하여 서비스 소개 및 브랜드 신뢰도 향상을 위한 공식 랜딩 페이지 기획 및 제작

• UI 구조 설계부터 반응형 웹 구현까지 웹 페이지 전체 개발 프로세스 경험

• HTML/CSS/JavaScript를 활용한 퍼블리싱 및 사용자 접근성 개선에 기여

배포 URL : Web

Experience

• 월간 리포트 자동화 기능 구현

  • 월간 리포트 기능을 통해 리포트 생성 시간 480분 => 2분 (99.6% 감소)

  • 결과적으로 고객 응대 빈도 월 평균 30건 => 12건 (60% 감소)

• 트레이딩 봇 상태와 고객 데이터를 실시간 시각화하는 어드민 대시보드 개발

  • 폴링 기반 상태 갱신, 오류 탐지 및 모니터링 기능 구현

  • 4건 중 3건의 주요 이슈 선제 대응 => 운영 리스크 75% 감소

• 여러 도메인의 API 응답 데이터를 통합해 AUM 시각화 UI 구성

  • 커스텀 훅 및 테스트 가능한 계산 로직 분리

  • 재사용성과 유지보수성을 고려한 컴포넌트 구조 설계

• 비효율적인 수동 백엔드 배포 방식을 자동화

  • 기존 1인 개발 환경에서 zip 파일로 배포되던 백엔드 API를 직접 수정하며 협업 병목 존재

  • GitHub Actions 기반 CI/CD 파이프라인을 구축, 실수 방지 및 개발-배포 사이클 개선

  • 백엔드 개발자와 협업 기반 API 개선 및 실험 가능 환경 조성

• 4주간 Git 세미나 진행 및 코드 리뷰 문화 정착 지원

  • 협업 안정성과 배포 품질 향상에 기여

Tech Stack

Web: React TypeScript Tanstack-Query Tailwind CSS Zustand Vitest React-testing-library Restful API Fast API

Experience

• 한정된 리소스 내에서 UI 일관성과 개발 속도를 모두 확보하기 위해

  • Radix UI 기반 Headless 컴포넌트를 도입하고, Tailwind로 스타일 시스템을 구축

  • 핵심 컴포넌트를 문서화해 재사용성과 협업 효율을 높임

• CSR 기반의 빠른 프로토타이핑 환경에서 SEO 및 퍼포먼스 한계를 직접 경험

  • 실 배포 이후 검색 노출 누락과 LCP 지연 문제를 겪으며 SSR/SSG의 필요성을 체감

  • Next.js의 렌더링 전략과 성능 최적화 방식에 대해 스터디를 진행 중이며,

  • 향후 프로젝트에서 SSR 구조 설계와 Lazy Load, 메타 태그 최적화 등을 적용 의지

• GitBook 기반의 온보딩 가이드 및 기능별 문서화 주도

  • 비기술 사용자 이해도 향상 및 고객 지원 프로세스 효율화에 기여

Tech Stack

Web: Next.js (app router) TypeScript Tanstack-Query Tailwind CSS Storybook Rest API

Experience

• SEO를 위해 Next.js를 활용, 라우트별 Meta tag, Og tag 추가하여 라우트 하우스 기준, 80점 => 92점 향상

• 개발 생산성을 위해 tailwind.css를 활용하여 개발

Tech Stack

Web: React TypeScript Redux Tailwind CSS

기획 의도 및 프로젝트 소개

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

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

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

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

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

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

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

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

코드 리뷰 환경 개선

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

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

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

• 사내 연말 평가 피드백을 바탕으로 구조적 사고와 코드 품질 향상을 목표로 자발적으로 부트캠프 참여

• 클린 코드, FSD(Feature-Sliced Design), 테스트 기반 개발 등 이론과 실습을 병행하며 학습

• 학습 내용을 실무 프로젝트에 적용해 유지보수성을 고려한 컴포넌트 분리 및 테스트 코드 도입
  => 팀 코드 품질 향상과 리뷰 효율 개선에 실질적으로 기여

• 실무 수준의 협업 경험을 쌓기 위한 기반으로 해당 활동에 참여

• Figma 기반으로 Storybook 사용, UI 구현 흐름 정렬 및 디자이너 협업 강화

• REST API 명세 작성 및 백엔드와의 데이터 구조 설계 주도

• ESLint, Prettier, Husky로 코드 스타일 및 커밋 자동화 환경 구성