Technical Career History
기술경력서
김선 · 프론트엔드 개발자 (4년차) · GitHub @LunaSeonKim
근거 기반아래 작업 내역과 커밋 수치는 실제 GitHub 커밋 기록(TEAM-Livit 조직, 총 5,050 커밋 — 본인 계정 2개 합산)에 근거하며, 서비스 이용 기업 수는 운영 데이터 기준입니다.
Tansolution — 기업용 탄소회계 SaaS 플랫폼
기업의 온실가스 배출량을 산정·관리·보고하는 B2B SaaS. 기획 단계부터 참여.
기간 기획 2022.12 – 2023.04 · 개발 2023.04 – 2026.05
역할 프론트엔드(고객사 담당자용 웹) + 서버 일부
기여 3,883 커밋 · 9명 중 2위
주요 작업
제품 기능
- 배출량 관리 핵심 화면 — 배출원 등록 폼과 목록·조건별 필터링 개발. 담당자가 한 번에 수십 건을 입력하는 상황을 위해 제출 큐를 두어 연속 저장 시 유실·중복을 막음
- 대시보드·데이터 시각화 — 연도별 배출량과 지분율 반영 계산(equity ratio)에 더해 MACC(한계저감비용), SBTi 감축목표, 감축 시나리오 시뮬레이션 등 도메인 특화 차트 구현. 차트–테이블 하이라이트를 연동해 숫자에서 원인으로 파고드는 탐색 흐름 구성
- OCR 증빙 문서 처리 UI — 월 수십 건의 배출량 데이터를 증빙 문서와 대조해 수기 입력하던 작업을, 인식 결과를 문서 옆에 띄우고 썸네일이 검토 항목에 맞춰 자동 줌·이동하도록 만들어 '입력'에서 '확인'으로 전환
- 보고서 시스템 — 배출량 기본 보고서를 포함해 사회 부문·안전보건·건설·에너지·SBTi 등 7종 개발. 인쇄 전용 레이아웃으로 PDF 출력까지 지원하고 국문·영문 양쪽 대응
확장 · 운영
- 제품 영문화(i18n) — 해외 고객 대응을 위해 2024.12부터 제품 전반을 영문화. 로그인·배출량 등록·보고서·대시보드에서 초대·MFA 이메일 템플릿까지 확장했고, 배출계수 목록은 한글·영문 우선순위를 반영한 커스텀 정렬로 처리
- 협력사·조직 관리 — Scope 3(공급망) 배출량 수집을 위한 협력사 등록·데이터 요청 기능. 법인·사업자등록번호 유효성 검사와 요청 메일 분기를 붙이고, 조직 계층은 트리 테이블로 다룸
- 인증·보안 — 이메일 기반 다중 인증(MFA) 구현: 토큰 발급·검증, 시도 횟수 제한, 만료 토큰 처리까지. 관련 메일 템플릿을 국문·영문으로 대응
- 성능·안정성 — 배출량 목록 무한 스크롤, 라우트 단위 lazy loading과 청크 로드 실패 시 재시도(retryLazy), 연료 단위 변경의 낙관적 업데이트, ErrorBoundary 도입
기획 · 고객 대응 · 서버
- 초기 기획 참여 — 개발 착수 전(2022.12~2023.04) 기능정의서, 회원가입 프로세스 레이아웃, 기능명세서, DB 모델링 등 기획 산출물 작성에 참여
- 대기업 고객 대응 — 삼성·DRB 등 고객사별 요구사항 반영 및 커스터마이징 (커밋 이력 기준)
- 서버 사이드 — server/src(TypeScript) 수정 다수, API와 화면을 오가며 기능 단위로 완결성 있게 개발. 모노레포 구조로의 서버 리팩터링 참여
ReactJavaScript / TypeScriptMUIRedux ToolkitApollo ClientApexCharts
LCA-Project — 전과정평가(LCA) 솔루션
제품 전과정평가(Life Cycle Assessment) 신규 솔루션. 최신 스택으로 구축하며 테스트·문서화 문화까지 함께 조성.
기간 2026.04 – 진행 중
역할 프론트엔드 + 서버 API 일부
기여 243 커밋
주요 작업
- 스프레드시트형 편집 그리드(sheet-grid) — 셀 편집 모드 전환 시 키보드 제어권 복구, IME(한글 입력)·Space·Delete 키 진입 처리 등 정교한 입력 UX
- 평가계수 관리 — 흐름-DB 연결 검수 드로어, 편집/진행률 훅, 고객사(금호) 양식 xlsx 다운로드 + 진행률 표시
- 분석 결과 화면 — GTG 트리 테이블(커넥터·sticky 스크롤·정렬), 결과 트리/표/차트 통합 뷰. 트리 통과선 렌더링을 TreeGuideCell로 공용화
- 디자인 시스템 구축 — Figma 디자인을 UI 프리미티브 10종(button·chip·combobox·Field 등)과 다이얼로그·알림 시스템으로 코드화. 타이포그래피·형태 토큰을 파일로 분리해 스케일 체계를 세우고, chip은 variant/tone/size 3축으로 설계해 조합만으로 쓰이게 함
- 품질·문서화 — Vitest + Testing Library + MSW 단위 테스트와 실행 리포트. ADR로 아키텍처 결정을 남기고(feature folder 패턴 채택 등), 산정 로직 원천 분석·작업 로그를 문서로 남겨 인수인계 가능한 상태 유지
TypeScriptReactViteTailwind CSSRadix UITanStack TableEChartsGraphQL CodegenExcelJSreact-virtualsonnerVitestMSW
iM뱅크 프로젝트 — 금융권 ESG 서비스
은행의 기업 고객이 ESG 간이진단을 받고 리포트와 리워드까지 받는 웹 서비스. 모바일용·데스크톱용 화면을 각각 두고 접속 기기에 따라 분기하며, 기업당 담당자 1명이 참여합니다.
기간 2025.09 – 2026.04
역할 프론트엔드
기여 329 커밋 · 4명 중 2위
운영 배포 후 누적 이용 기업 약 800곳 (기업당 담당자 1명 · 2026.08 기준)
주요 작업
- ESG 간이진단(Quick Check) — 문항 응답·저장 플로우 전반. 앞선 답변에 따라 뒤 문항을 걸러내는 조건부 분기와 자동 응답 처리, 잠긴 챕터 접근 차단, 진행률 바 단계 표시
- 중단 지점 이어하기 — 세션 스토리지에 진행 상태를 남겨 재방문 시 이어하기 모달을 띄우고, 이탈·뒤로가기·비정상 접근은 안내 모달과 리다이렉트로 처리
- 휴대폰 본인인증 — 인증 타이머와 코드 입력 자동 포커스, 전화번호에 하이픈을 자동 삽입하면서도 커서 위치가 튀지 않도록 보정. 리워드 선택→인증 화면은 카드 전환 애니메이션으로 연결
- 리워드·기프티쇼 연동 — Giftishow API로 쿠폰 발급·상품 관리·잔액 조회를 붙이고, 리포트 완료 시 리워드 모달과 쿠폰 자동 발송 처리. 리워드가 기업당 1명에게만 나가는 구조라 수령 자격 확인과 진입 조건 분기를 함께 설계
- PDF 리포트 — 표지·로고를 포함한 ESG 분석 리포트 컴포넌트 개발, iOS·Android 각각의 다운로드 방식 분기 처리
- 기기별 대응 — 접속 기기에 따라 진입 화면을 나누고 데스크톱 전용 레이아웃을 별도 구성. 삼성 브라우저의 뒤로가기 동작 차이를 분기 처리하고, 반응형 훅 기반으로 스크롤·모달·플로팅 버튼 동작과 모바일 호버 스타일을 보정
- 인증·세션 — JWT + GraphQL 인증 구현. 토큰 저장소를 localStorage에서 sessionStorage로 옮기고 AuthGuard·useAuth 훅으로 인증 상태를 일원화, 임시 사용자(isTemp) 분기 처리
- 전역 에러·운영 — GraphQL 에러를 한곳에서 받는 ApolloErrorSnackbar, 청크 로드 실패 시 재시도(retryLazy), Google Analytics 페이지뷰 추적
- 도메인 로직 — 배출량 계산 보정(도시가스 LPG→LNG 계수 수정), 온실가스 계산기 화면, 사업자등록번호 검증 UI, 캐릭터 모달 등 인터랙션
ReactMUIRedux ToolkitApollo ClientAuth0 / JWTreact-pdf
Tanso — 탄소 절감 챌린지 서비스 (B2B2C)
기업·지자체가 도입하고 소속 직원이 직접 참여하는 탄소 절감 챌린지 서비스. 직원의 출퇴근·업무 이동을 기록해 탄소 감축량으로 환산합니다. 참여자 화면(client)과 관리자 화면(admin)으로 나뉩니다.
기간 기획 2022.12 – 2023.04 · 개발 2025.03 – 2026.04
역할 프론트엔드
기여 344 커밋
주요 작업
- 지도 기반 이동 경로 기록 — 장소 검색과 최근 검색 기록, 자주 가는 장소·즐겨찾기로 출발지와 목적지를 잡고, 경유지를 넣고 빼면 지도 위 경로가 다시 그려지도록 구성. 경로 전체가 한 화면에 담기도록 지도 중심과 축척을 자동 조정(fitBounds)하고, 바텀시트와 지도를 함께 다루는 모바일 인터랙션 설계
- 이동수단 3종 통합 — 생성 방식이 제각각인 도보·차량·해외 출장을 하나의 기록 흐름으로 통합. 차량은 등록 차량·차종을 골라 경로를 만들고, 해외 출장은 공항 목록으로 처리. 도보 경로는 별도 최적화 작업 진행
- 기록을 배출량 데이터로 연결 — 그린 경로를 일별 이동 이력(TransportHistories)으로 변환해 날짜별로 조회·수정하게 하고, 이동 거리와 수단이 탄소 감축량 산정으로 이어지도록 단위 환산 로직을 바로잡음
- 챌린지 — 챌린지 생성 폼(날짜 검증·에러 처리), 챌린지 캘린더와 D-day 표시, 일별 챌린지·챌린지 피드 화면
- 공통 컴포넌트·테마 — React Hook Form과 결합한 날짜 입력(RHFDate·RHFDatePicker), 커스텀 데이트 피커·기간 선택기·날짜 슬라이더 제작. 타이포그래피 variant와 버튼·체크박스·입력 테마 오버라이드 정의, 스낵바 라이브러리 전환
- 인증 흐름 — Apollo Client 레벨 토큰 제거/갱신(refreshToken), 로그아웃 시 상태 초기화
- 알림 — Firebase FCM 푸시 연동과 알림 권한 설정 화면, 이메일 템플릿
- 초기 기획 참여 — 개발 착수 전(2022.12~2023.04) 관리자 기능정의서, 참여자 정보·후기 관리 화면 기획 산출물 작성에 참여
ReactMUIApollo Client지도 APIFirebase FCMRedux Toolkit
회사 랜딩 사이트 (국문 / 영문)
국문 2024.10 – 2026.04 · 81 커밋 · 기여율 약 81% (사실상 단독 운영)
영문 2023.08 – 2024.02 · 42 커밋
주요 작업
- i18n 구축 — Next.js App Router +
[locale] 라우팅으로 한/영 사이트 구축
- 페이지 전반 — 홈·회사소개·제품·인사이트·뉴스·콘택트 페이지 구축. 회사소개는 GSAP(ScrollTrigger·ScrollSmoother·SplitText)으로 sticky 풀페이지 스크롤과 텍스트 분할 애니메이션 구성
- 반응형 — useResponsive 훅을 만들어 헤더·푸터부터 각 페이지까지 모바일 대응, 로딩 컴포넌트·토스트 정비
- SEO — 파비콘, 메타데이터, Open Graph 이미지·URL 처리
- 안티봇 — 콘택트 폼 허니팟 + 타임스탬프 검증 구현
Next.js (App Router)TypeScriptTailwind CSSRadix UIGSAPnext-intlSCSSMUI (영문)
광명시 프로젝트
기간 2024.11 – 2024.12 (단기)
역할 메인 개발자
기여 68 커밋
주요 작업
- 단기 구축 — Next.js + GraphQL 웹 서비스를 한 달여 만에 구축: 인증(privateRoute), 게시물·이력 관리, 약관·개인정보 페이지
- 계정·권한 — 계정 정보 수정과 비밀번호 변경, 회원 목록과 사용자 권한 관리 화면, 탈퇴 처리
- 컴포넌트 — 정렬·페이지네이션을 갖춘 커스텀 테이블, 폼·모달·토스트, 파일 업로드(S3 createPresignedPost)
- 서버 — GraphQL 리졸버 일부 직접 작성(auth, history, post)과 예외 처리
Next.jsTypeScriptGraphQLSCSSAWS S3
E2E 테스트 자동화 (Tester)
기간 2024.12 – 2025.11
기여 56 커밋
주요 작업
- 시나리오 자동화 — Playwright 기반 Tansolution 주요 플로우 커버: 배출량 등록(Scope 3 포함), 목록 필터·등록 현황 검증, 파일 업로드·다운로드, 회원가입·비밀번호 재설정, 계정 전환 및 국가 전환
- 테스트 데이터 설계 — 국가별·IPCC 계수별로 테스트 데이터를 구조화하고, 제품 버전에 맞춰 테스트 파일을 디렉터리로 분리해 회귀 테스트 관리
- 안정화 — 빈 데이터 상태 예외 처리, 다운로드 이벤트 대기 방식 개선, 타임아웃 튜닝(120초) 등 플레이키 테스트 제거
- 실험 — MCP 연동 테스트(mcp_tester 브랜치)
TypeScriptPlaywright
종합 역량 요약
| 핵심 도메인 | 탄소회계·ESG (Scope 1~3 배출량 산정, 공급망 데이터 수집, MACC·SBTi 감축 시나리오, LCA, 금융권 ESG) — 3년 이상 도메인 지식 축적 |
|---|
| 주력 | React/Next.js 기반 B2B 실무자용 웹·대시보드, 폼·테이블·차트 중심의 데이터 집약적 UI |
|---|
| 폭 | 기획 산출물 작성, 디자인 시스템 구축, MFA 인증·보안, 랜딩 사이트 단독 운영, 서버 GraphQL API 작성, E2E 자동화까지 커버 |
|---|
| 일하는 방식 | 단위 테스트(Vitest·MSW)와 ADR 문서화 병행, 고객사 커스터마이징 대응 경험. Claude Code·Cursor 등 AI 협업 개발 도구를 실무 워크플로에 적극 활용 |
|---|
