Carbonsaurus Frontend

2023.08 ~ 2025.01

탄소회계 서비스 사용자 가이드 문서화

상황: 복잡한 탄소회계 서비스 이해를 돕는 문서 필요
과제: 탄소회계 서비스 사용자 가이드 문서화
행동 1: 기획, 디자인 없이 간단한 UI UX 개발
행동 2: Nextra, Vercel 사용하여 배포 (Link)
결과: 탄소회계 서비스에 대한 진입장벽을 낮추는 데 기여

Scope 1,2 탄소 배출량 계산기 개발

상황: 탄소회계 서비스를 도입하기 전에 정확한 탄소 배출량 계산을 경험 해볼 수 있는 계산기 개발
과제: 직관적인 UI와 정확한 탄소 배출량 계산 기능 제공
행동 1: 기획, 디자인 없이 간단한 UI UX 개발
행동 2: 업종, 연소 별 배출계수 JSON 정의
행동 3: useReducer를 사용하여 탄소 배출량 계산 로직 구현
행동 4: Nextra, Vercel 사용하여 배포 (Link)
결과: 빠른 기간 내에 고객들이 탄소회계 서비스에 쉽게 접근할 수 있는 도구 제공

Frontend Monorepo 적용

상황: 4개 Application을 Monorepo 구조로 통합하여 코드 재사용성, 관리 효율성, 개발 생산성 향상 필요
과제: 라이브러리 버전 관리를 일원화하고 API 타입 자동 생성 및 코드 재사용성 개선
행동 1: 약 70개 페이지의 local build cache를 위해 Turborepo 적용
행동 2: pnpm의 catalog 기능을 활용하여 라이브러리 버전 관리
행동 3: openapi-typescript를 적용하여 API 변경 사항이 발생할 때마다 수작업 없이 최신 타입 반영
행동 4: 공통 UI, Util을 분리시켜 코드 재사용성 개선
결과: Frontend 코드 재사용성, 관리 효율성, 개발 생산성을 향상시켜 서비스 개발 속도 향상

탄소회계 Scope1,2 e2e test 자동화

상황: 탄소회계의 복잡한 의존성 관리 및 크롤링 기능 신뢰성 확보 필요
과제: 시스템 신뢰성을 높이기 위해 Scope1,2 주요 기능들에 대한 e2e 테스트, 크롤링 테스트를 설계하고 자동화하여 팀원들이 실시간으로 테스트 결과를 확인할 수 있는 환경 구축
행동 1: Scope 1, 2 데이터의 주요 처리 흐름, 크롤링 기능을 분석하여 약 70개 테스트 시나리오 도출
행동 2: Playwright를 활용해 테스트를 자동화하고 실행 결과를 추적할 수 있는 report HTML 생성
행동 3: GitHub actions cron job 활용하여 평일 8시 report HTML을 Netlify에 배포하고 스크립트를 추가하여 인증 적용
행동 4: 테스트 결과를 Slack 채널로 전송
결과 1: 크롤링 기능의 실패를 사전에 감지하여 데이터 수집 안정성 확보
결과 2: 신규 기능 개발 시 기존 시스템과의 의존성 충돌 여부 검증

배출량 통계, 사용량 통계, 누락 활동자료 집계 기능 개발

상황: 재설계된 DB 및 기획에 맞춰 API 개발 • 프론트엔드 개발
과제: 사내 리소스 부족으로 백엔드, 프론트엔드 모두 처리
행동 1: Nest.js 기반 API 개발 및 쿼리 작성
행동 2: Next.js + tanstack-query 기반 table UI를 통해 배출량 통계, 사용량 통계, 누락 활동자료 개발
행동 3: 무거운 쿼리 연산을 최소화하기 위해 windowing을 적용하여 사용자 viewport 영역만 API 호출하도록 개선
행동 4: tanstack-query refetchOnMount 옵션을 해제하여 네트워크 호출 최소화
결과: Windowing 적용 전과 비교해 테스트 데이터 1000개 기준 브라우저 메모리 사용량을 약 30% 감소시켰으며, 모든 사업장의 통계를 한 번에 계산하지 않고 화면에 보이는 사업장만 API 호출하여 최적화

크롤링 페이지의 안정성을 위한 QA 자동화

상황: 한전, 도시가스, 지자체 수도 페이지와 같은 공공기관 웹사이트가 오전 9시, 오후 1시경 사용자들이 몰리는 시간대에 페이지가 켜지지 않는 문제가 자주 발생하여 데이터 수집이 원활하지 않았음. 이로 인해 QA 담당자의 테스트 부담 증가
과제: 크롤링 페이지의 작동 여부를 확인할 수 있는 자동화된 QA 시스템을 구축
행동 1: broken-link-checker를 통한 페이지 내의 깨진 링크를 자동으로 검출
행동 2: GitHub Actions를 사용하여 평일 오전 9시 30분, 오후 1시 30분 11개 페이지를 2.5분 내에 테스트 완료되도록 cron job을 설정
행동 3: 테스트 결과를 Slack 채널로 전송
결과: 페이지 안정성 문제를 조기에 파악하고, 신속하게 대응할 수 있었으며 QA 담당자의 테스트 부담 감소

전체 서비스 리뉴얼

상황: 서비스가 특정 산업에만 대응할 수 있어, 다양한 산업에 범용적으로 사용하기 어려운 상황
과제: 서비스의 범용성을 높이기 위해 Tier 구분, 자체 배출계수, 직접 입력 배출계수, Scope3 카테고리 별 배출계수를 적용하여 특정 산업에 구애받지 않고 사용할 수 있는 탄소 회계 서비스를 개발
행동 1: Tier 구분 및 다양한 배출계수 모델을 통합하여 모든 산업에서 적용 가능한 범용적인 탄소 회계 서비스를 개발
행동 2: 자체 배출계수, 직접 입력 배출계수, Scope3 카테고리 별 배출계수를 적용하여 유연한 데이터 입력과 분석
결과: 탄소회계 서비스가 다양한 산업에 적합하게 리뉴얼되어, 특정 산업에 국한되지 않고 폭넓은 범위에서 활용

산업통상자원부 철강산업 탄소 발자국 산정 시스템 표준화 과제 선정에 기여 (5.5억)

정보통신산업진흥원 유망 SaaS 개발∙육성 지원 사업 선정에 기여 (4억)

pre-A 투자 유치에 기여 (비공개)

ErrorBoundary, Slack Webhook 적용하여 에러 추적

상황: 에러 추적 시스템을 적용하여 실시간으로 에러를 추적하고 개선할 필요
과제: 사용자가 에러 UI를 볼 때, 환경 정보, URL, 컴포넌트 명, 오류 메시지를 Slack Webhook을 통해 알림 기능을 구현
행동: ErrorBoundary 사용하여 에러 발생 시 대체 UI 제공 및 Slack Webhook 호출
결과: 에러 발생 시 Slack으로 실시간 모니터링할 수 있게 되어, 에러 대응 속도 개선

Front-End 코딩 컨벤션 정의

상황: 팀 내에서 일관된 코딩 스타일과 디자인 시스템 유지 필요
과제: 컨벤션 정의로 코드 품질 향상 및 일관성 확보
행동 1: React 및 TypeScript에 대한 코딩 컨벤션을 문서화
행동 2: Atomic design 정의 및 컴포넌트 디자인 원칙 문서화
행동 3: MUI 스타일 가이드 문서화
결과: 일관된 코딩 스타일과 디자인 시스템을 통해 코드 품질과 유지보수성 개선

Design System 구축

상황: 디자이너 및 비개발 직군과의 원활한 소통을 위해 일관된 디자인 시스템을 구축하고, 이를 쉽게 접근하고 확인
과제: Storybook을 기반으로 디자인 시스템을 구축하고, Chromatic을 통해 배포
행동 1: 컴포넌트 디자인 원칙 문서화
행동 2: Storybook을 사용하여 디자인 시스템 구성
행동 3: github actions를 통한 Storybook build, Chromatic 배포
행동 4: 배포된 Chromatic URL을 PR comment로 추가
결과: 디자이너 및 비개발 직군과의 UI 소통 창구 역할, PR에서 디자인 시스템을 쉽게 확인할 수 있도록 개선

환경부 온실가스 및 에너지 사용량 명세서 PDF 생성, 수정, 다운로드, 반응형 PDF viewer

상황: 고객사에서 환경부 온실가스 및 에너지 사용량 명세서를 PDF로 생성, 수정, 다운로드할 수 있는 기능 요구
과제 1: Back-end에서 PDF 파일을 관리
과제 2: PDF viewer 개발
과제 3: 수정 폼 제공
과제 4: 명세서에 첨부 가능한 사업장 에너지 흐름도 이미지 제공
행동 1: PDF viewer 개발
행동 2: 명세서와 유사한 UI를 제공하는 Form을 개발
행동 3: tree JSON 기반 에너지 흐름도 UI 컴포넌트 개발
행동 4: HTML to Image 기능 개발
결과: 고객사 요구에 맞게 온실가스 및 에너지 사용량 명세서를 PDF로 생성, 수정, 다운로드할 수 있게 됨

UI UX 개선

상황: POC 고객사들의 다양한 UI/UX 개선 요구 사항
과제 1: Image crop 기능 개발로 이미지 업로드 UI UX 개선 및 이미지 파일 용량 축소
과제 2: File Drag & Drop 적용을 통한 파일 업로드 UI UX 개선
과제 3: scroll overflow된 콘텐츠에 흐림 효과를 적용하여 Scroll UI UX 개선
과제 4: 유효성 검사 결과를 알 수 있도록 Form validation UI UX 개선
과제 5: layout Shift 제거를 위해 Skeleton Loading UI 적용
과제 6: page depth 제거를 위해 Dialog UI로 변경
과제 7: 배출 시설 간 상하위 관계 표현을 위해 MUI tree table 적용
과제 8: 뒤로 가기 시 페이지 유지를 위해 Query string으로 페이지 정보 저장 및 불러오기 적용
행동: 다양한 UI UX 개선 과제를 수행하여 POC 고객사들의 요구 사항을 반영
결과: UI UX 개선 작업을 통해 사용자 경험 향상 및 흐림 효과를 선언형으로 제공하는 react-fog 오픈 소스 개발

반응형 금융권 배출량 (Scope3 Category15) 프로토타입 개발

상황: M자산운용사, I자산운용사 고객이 보유한 부동산 자산의 탄소 배출량을 관측
과제: 부동산 자산 입주사의 에너지 사용량을 제외하고 자산운용사의 에너지 사용량을 측정 및 탄소 배출량을 관측할 수 있는 서비스 개발 요구
행동: 기획, 개발, QA를 포함하여 약 4주 만에 프로토타입 서비스 완성
결과: 고객사와 POC 진행하며 추가 개발하였으나 고객사 내부 사정으로 계약은 성사되지 못함. 그러나 팀이 빠르게 결과물을 제작하고 검증하는 과정을 통해 팀원들의 탄소 회계 도메인에 대한 이해를 높이는 데 기여

CI / CD 자동화 및 PR template 적용

상황: AWS App Runner를 사용하는 과정에서 잦은 빌드 에러가 발생하여 배포 지연
과제: CI/CD 파이프라인을 자동화하여 빌드 에러를 줄이고, PR 템플릿을 적용하여 리뷰 프로세스를 개선
행동 1: Husky 활용하여 pre commit lint 자동화
행동 2: Husky 활용하여 commit message lint 자동화
행동 3: Husky 활용하여 pre push build test 자동화
행동 4: GitHub Actions 활용하여 AWS ECR로 docker image push를 자동화
행동 5: PR template 체크리스트 적용
결과: 잦은 빌드 오류 개선 및 빌드 시간을 9m에서 6m으로 30% 감축

Excel 업로드 기능 개발

상황: 고객사들이 기존에 관리하던 Excel 파일을 서비스에 업로드할 수 있는 기능 필요
과제: 사업장, 배출시설, 활동 자료, 차량 운행 기록부 Excel 파일을 서비스에 업로드 및 저장
행동: 업로드된 Excel 파일에서 데이터를 추출하고, 서비스의 데이터 구조에 맞게 변환 및 데이터 검증
결과: 기존 Excel 파일을 서식만 변경하여 업로드할 수 있게 되었으며, 데이터 등록 효율성을 개선하여 사용자 경험을 향상

TIPS 선정에 기여 (5억)

반응형 탄소회계 (Scope 1, 2, 3) MVP 개발

상황: 고객사에게 영업할 수 있는 수준의 반응형 탄소 회계 솔루션을 신속히 개발
과제: 시장에서 차별화될 수 있는 Scope 1, 2, 3의 탄소 배출량을 포괄하는 MVP를 개발하고, 이를 통해 영업 기회를 창출
행동: 도메인 이해, 반응형 UI 설계, 데이터 시각화에 중점을 두고 사업장, 배출시설, 활동자료, 통계 기능 개발
결과: 대기업 고객사들과 POC 및 파트너십 논의, TIPS 투자 유치

반응형 관리자 페이지 개발

상황: 고객사 회원가입 요청을 이메일과 수작업으로 처리하던 기존 방식 개선
과제: 고객사 회원가입 요청을 검토하고 수락 및 거절할 수 있는 관리자 페이지를 개발
행동: 모바일 기기로도 사용 가능한 반응형 UI UX 개발
결과: 수작업 오류 개선

Gluwa Agilegrowth