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

- 크롤링 페이지 안정성을 위한 QA 자동화 시스템을 구축하여 테스트 효율성을 향상

- 탄소 회계 서비스를 전체적으로 리뉴얼하여 다양한 산업에 적용 가능하도록 개선

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

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

- pre-A 투자 유치에 기여

- ErrorBoundary와 Slack Webhook을 활용한 에러 실시간 모니터링

- Dynamic import를 통해 초기 로딩 속도 개선 및 프론트엔드 코딩 컨벤션을 정의

- Storybook 디자인 시스템을 구축하여 디자인-개발 간 소통 개선

- 환경부 온실가스 명세서 관련 PDF 생성, 수정, 조회 기능을 개발

- UI/UX 개선 작업을 통해 전반적인 서비스 사용성을 향상

- CI/CD 파이프라인 자동화로 개발 프로세스의 효율성을 증대

- TIPS 선정에 기여 (5억)

- 반응형 탄소회계 MVP를 개발하여 대기업 고객사들과의 POC 및 파트너십 논의를 진행

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

상황: 재설계된 DB 및 기획에 맞춰 API 개발 • 프론트엔드 개발

과제: 사내 리소스 부족으로 백엔드, 프론트엔드 모두 처리

행동 1: Nest.js 기반 API 개발 및 쿼리 작성

행동 2: Next.js + tastack-query 기반 table UI를 통해 배출량 통계, 사용량 통계, 누락 활동자료 개발 및 Windowing을 적용하여 대량 데이터의 렌더링 성능을 최적화

결과: windowing 적용 전과 비교하여 테스트 데이터 1000개 기준 브라우저 메모리 사용량을 약 30% 감소

- 크롤링 페이지의 안정성을 위한 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으로 실시간 모니터링할 수 있게 되어, 에러 대응 속도 개선

- Lazy/Dynamic import를 통한 번들 사이즈 개선

상황: 초기 로딩 시 JavaScript 번들 사이즈가 크고, 불필요한 코드가 포함

과제: Dialog 컴포넌트를 동적으로 로드하고 불필요한 import를 줄여서 첫 번째 로딩 시 JavaScript 파일 크기를 축소

행동: dynamic import를 사용하여 Dialog 컴포넌트를 클라이언트 사이드에서 필요할 때만 로드하도록 설정

결과: 초기 로딩 시 JavaScript 번들 사이즈가 약 20% 축소되어 페이지 로딩 속도가 개선 (70개 이상 Dialog)

- Front-End 코딩 컨벤션 정의

상황: 팀 내에서 일관된 코딩 스타일과 디자인 시스템 유지 필요

과제: 컨벤션 정의로 코드 품질 향상 및 일관성 확보

행동 1: React 및 TypeScript에 대한 코딩 컨벤션을 문서화

행동 2: Atomic design 정의 및 컴포넌트 디자인 원칙 문서화

행동 3: MUI 스타일 가이드 문서화

결과: 일관된 코딩 스타일과 디자인 시스템을 통해 코드 품질과 유지보수성 개선

- Storybook 기반 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 개선 작업을 통해 사용자 만족도 및 유지보수성이 향상됨

- 반응형 금융권 배출량 (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: Husky 활용하여 pre push e2e (playwright) test 자동화

행동 5: GitHub Actions 활용하여 AWS ECR로 docker image push를 자동화

행동 6: PR template 체크리스트 적용

결과: husky와 GitHub Actions를 활용하여 사전 검증 및 자동화된 배포 프로세스를 구축한 결과, 빌드 오류가 줄어들고 배포 속도가 빨라졌으며, 코드 품질이 향상되어 PR 과정에서의 수정이 감소

- Excel 업로드 기능 개발

상황: 고객사들이 기존에 관리하던 Excel 파일을 서비스에 업로드할 수 있는 기능 필요

과제: 사업장, 배출시설, 활동 자료, 차량 운행 기록부 Excel 파일을 서비스에 업로드 및 저장

행동: 업로드된 Excel 파일에서 데이터를 추출하고, 서비스의 데이터 구조에 맞게 변환 및 데이터 검증

결과: 기존 Excel 파일을 서식만 변경하여 업로드할 수 있게 되었으며, 데이터 등록 효율성을 개선하여 사용자 경험을 향상

- TIPS 선정에 기여 (5억)

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

상황: 고객사에게 영업할 수 있는 수준의 반응형 탄소 회계 솔루션을 신속히 개발

과제: 시장에서 차별화될 수 있는 Scope 1, 2, 3의 탄소 배출량을 포괄하는 MVP를 개발하고, 이를 통해 영업 기회를 창출

행동: 도메인 이해, 반응형 UI 설계, 데이터 시각화에 중점을 두고 사업장, 배출시설, 활동자료, 통계 기능 개발

결과: 대기업 고객사들과 POC 및 파트너십 논의, TIPS 투자 유치