Carbonsaurus Frontend

2023.08 ~ 2025.01

온보딩 경험 개선

• 탄소회계에 익숙하지 않은 사용자의 초기 진입 과정에서 제품 이해 부족과 사용 흐름 파악 어려움으로 온보딩 개선 필요성을 주도적으로 제안하고 대표 및 PM을 설득
• Nextra 기반 사용자 가이드를 도입해 제품 전반의 기능을 문서화하고 사용자가 스스로 학습할 수 있는 온보딩 환경 구축
• Mermaid를 활용해 탄소회계 전반의 개념을 흐름 중심으로 시각화하여 사용자 이해를 돕는 온보딩 콘텐츠 구성
• 업종·연료별 배출계수 기반 탄소 배출량 계산기를 개발하여 실제 데이터 입력 없이도 제품을 체험할 수 있는 사전 경험 제공

Frontend Monorepo 적용

• 공통 UI, 테마, 설정 파일이 분산 관리되면서 수정 누락 및 서비스 간 UI 불일치가 발생하는 문제를 정의하고 Monorepo 구조를 적용하여 공통 UI, 테마, 설정 파일을 패키지로 분리하여 변경 사항을 중앙에서 관리하고 서비스 간 일관성 확보
• Storybook 컴포넌트를 Chromatic에 배포하여 디자이너와 UI를 공유하고 변경 사항을 사전에 검증할 수 있는 협업 환경 구축

테스트 자동화 및 서비스 안정성을 주도적으로 개선

• Scope 1, 2 기준 핵심 사용자 플로우에 대한 Playwright 기반 E2E 테스트 70개 시나리오를 구축하여 약 70% 수준으로 커버리지를 확보하고 평일 오전 8시에 자동 실행되도록 구성하여 사용자 사용 시간 이전에 주요 기능 이상 여부를 사전 검증
• 공공기관 크롤링 페이지의 접속 불안정 시간대(9시, 13시)를 분석하여 해당 시간 기준으로 상태 점검을 자동화
• GitHub Actions과 Slack을 연동하여 테스트 결과를 실시간으로 공유하고 장애 발생 시 빠르게 대응할 수 있는 모니터링 체계 구축

서비스 리뉴얼 및 통계 기능 개발

• Tier 기반 구조 및 배출계수 모델 변경에 따른 서비스 리뉴얼 과정에서 통계 관련 기능을 담당
• 리뉴얼된 DB 구조를 이해하기 위해 직접 쿼리를 작성하고 리뷰를 통해 개선하며 DB 구조에 대한 이해도를 높임
• 부모 데이터 조회 시 하위 데이터를 모두 함께 요청하던 구조를 개선하여 화면에 보이는 영역의 데이터만 렌더링하고 해당 항목의 하위 데이터만 요청하도록 변경하여 초기 로딩 시 과도한 API 호출을 줄이고 데이터 조회 효율 개선

API Design First 기반 협업 프로세스 구축 및 OpenAPI 타입 자동화

• 프론트엔드와 백엔드가 Code First로 개발되면서 API 명세 불일치 및 협의되지 않은 변경이 발생하는 문제를 정의하고 API Design First 방식으로 전환하여 개발 전 스펙을 함께 정의하고 Swagger 문서를 배포하는 협업 프로세스를 주도적으로 구축
• OpenAPI 스펙 기반으로 프론트엔드 타입을 자동 생성하도록 구성하여 API 변경 시 타입 불일치 문제를 사전에 방지하고 개발 생산성 및 협업 효율 개선

CI/CD 자동화 및 배포 프로세스 개선

• AWS App Runner 단독 배포 환경에서 발생하던 Next.js 빌드 실패 및 빌드 병목 문제를 해결하기 위해 GitHub Actions 기반 CI/CD 파이프라인과 Docker(ECR) 이미지 빌드/배포 구조 적용
• Docker 레이어 캐시를 활용해 반복 빌드 시 불필요한 단계를 제거하고 배포 시간을 약 10분 → 6~7분 수준으로 단축

제품 성과

• Scope 1·2·3 및 Tier 1·2·3를 포함한 탄소회계 Carbontrack Web 출시
• 금융사 부동산 자산 대상 Scope3 Category15 배출량 MVP Web 출시
• Pre-A 투자 유치
• 산업통상자원부 철강산업 탄소발자국 표준화 과제 선정 (5.5억)
• 정보통신산업진흥원 SaaS 육성 사업 선정 (4억)
• TIPS 선정 (5억)