profile

김민규

프론트엔드 엔지니어 김민규입니다.
React와 TypeScript를 주력으로 사용합니다.

기술 및 역량

  • JavsScript ES6+ 문법에 익숙하며 주로 TypeScript로 개발합니다.
  • NextJS + Graphql을 주로 사용하고 있습니다.
  • 기본적으로 HTML5을 이용한 시맨틱 마크업 개발에 능숙하며, CSS/SCSS를 이용해 스타일링합니다.
  • Relay를 사용하여 data fetching과 rendering을 분리한 render as fetch 패턴 사용에 능숙합니다.
  • Headless기반의 사내 디자인 시스템을 구축, 운영 경험이 있습니다.
  • gtag, Airbirdge, Datadog 등의 매트릭 로깅 SaaS를 앱에 통합하여 의미있는 데이터를 창출해본 경험이 있습니다.
  • 여러 차례 사내 문화나 프론트엔드 개발에 대한 인사이트를 공유하기 위해 사내 발표를 해본 경험이 있습니다.
  • Agile 개발 프로세스에 익숙합니다.
  • Git을 사용해 버전관리를 하는 것에 능숙하며 사내 브랜치/PR/코드리뷰 규칙을 준수합니다.
  • 영어로 문서를 읽고 이해하는데 어려움이 없습니다.

커리어

2021.08 ~ 2024.02 : 주식회사 지엔터프라이즈

비즈넵 제품

비즈넵 환급 서비스 및 파트너사 임베딩 프로젝트

주식회사 지엔터프라이즈의 메인 BM으로서, 사업자 대상 경정청구 환급 서비스인 비즈넵 환급 서비스를 개발하고, 이를 롯데카드, 카카오뱅크, 케이뱅크와 협업하여 임베딩한 프로젝트를 수행하였습니다. 이 프로젝트에서는 다음과 같은 주요 업적을 달성하였습니다.

최대 100억 신청액 기록 및 환급 서비스 개발

  • 주식회사 지엔터프라이즈의 핵심 BM인 환급 서비스를 월 최대 100억 신청액을 지원하도록 개발하였습니다.
  • 사용자 편의성을 고려하여 로그인, 본인정보 입력, 카카오 및 네이버 인증, 소득 조회, 환급계좌 입력, 신고 등 다단계 절차를 원활하게 진행할 수 있는 UI/UX를 설계하였습니다.

모듈화된 UI Component 개발

  • 각각의 UI Component 요소가 필요한 데이터를 독립적으로 선언하도록 개발하여 코드 응집도를 향상시키고 부모-자식 간 결합도를 최소화하여 유지보수 용이성을 확보하였습니다.

다양한 파트너사 임베딩

  • 롯데카드, 카카오뱅크, 케이뱅크와의 협업을 통해 비즈넵 환급 서비스를 각 파트너사에 임베딩하여 제공하였습니다.

react-hook-form을 통한 데이터 관리

  • 기존 state로 관리하던 form 데이터를 react-hook-form을 활용하여 효과적으로 관리하도록 개발하여 코드의 가독성을 높이고 유지보수를 용이하게 하였습니다.

클라이언트와 백엔드 간 협업

  • 백엔드 개발팀과 긴밀한 협업을 통해 클라이언트에 필요한 관심사만을 받도록 Schmea 설계를 주도하였습니다.
  • GraphQL Scalar Type을 제안하여 개발의 효율성과 유지보수성을 높였습니다.

환급 전환율 A/B 테스트 설계 및 구축

  • 도메인 간 세션 연동 방식을 활용하여 환급 전환율 A/B 테스트를 설계하고 구축하였습니다.

웹앱 트래픽 모니터 및 트러블슈팅

  • 웹앱의 트래픽을 모니터링하고 문제 상황을 신속하게 파악하여 대응하는 역할을 수행하였습니다.
  • 모니터링 도구와 로그 분석을 활용하여 사용자들의 환경 및 행동을 파악하고, 서비스 이용 중 발생할 수 있는 이슈를 사전에 예측하여 대응하였습니다.
  • 서비스의 안정성과 성능을 최적화하기 위해 지속적으로 모니터링하고 개선사항을 도출하였습니다.

각종 OS 및 브라우저 대응 및 플로우 분기처리

  • 다양한 운영체제(OS)와 브라우저에서 웹앱이 원활하게 작동하도록 대응하였습니다.
  • 각 OS와 브라우저별로 호환성을 검증하고, 발생 가능한 문제점을 사전에 예방하며, 사용자 경험을 향상시키는 작업을 수행하였습니다.
  • 서로 다른 환경에서의 사용자 편의성을 고려하여 플로우 분기처리를 설계하였습니다.
  • 앱 환경일 경우, 카카오톡을 통한 간편인증 앱스킴 URL을 처리하도록 개발하였습니다.
  • 해당 URL을 인식하여 앱으로 연결하고, 인증 흐름을 지원하여 사용자가 더욱 편리하게 인증을 진행할 수 있도록 하였습니다.

타 앱의 런타임 통합 개발

  • SSO, 약관 등의 다른 앱들을 iframe으로 런타임 통합 개발하여 효율적인 사용자 경험을 제공하였습니다.

PD 및 PM과의 적극적 커뮤니케이션

  • 주도적인 역할을 수행하며 프로젝트의 효율성을 높이기 위해 제품 디자이너 및 프로젝트 매니저와 긴밀한 커뮤니케이션을 하여 프로젝트 흐름을 간소화하였습니다.

네이버 글레이스 연동    2022.04 ~ 2022.05

제휴사인 네이버 스마트플레이스와 비즈넵 자산 데이터를 연동하기 위한 임베딩 서비스입니다.

  • 네이버를 통해 넘어온 신규 유저어와 기존 비즈넵 유저를 구분하여 각각의 flow를 개발하였습니다.
  • 유저의 사업체 연동, 홈택스, 여신협 데이터 연동을 위한 flow를 개발하였습니다.
  • 신규 연동 시 환영 animation을 개발하였습니다.
  • framer motion을 사용하여 유려한 애니메이션을 지닌 랜딩 페이지를 개발하였습니다.
  • 데이터 연동 상태를 실시간으로 확인할 수 있는 폴링 로직을 구현하였습니다.
  • 다양한 제휴처에서 들어온 경우 다른 UI를 보여주기 위해 ssg를 사용하여 빌드타임에 정적으로 페이지를 생성하여 LCP를 개선 하였습니다.
  • 더 나은 UX 플로우를 위해 디자이너와 기획자와 함께 꾸준히 커뮤니케이션하며 적극적으로 개선하였습니다

1분 친구초대 이벤트 프로모션    2023.01 ~ 2023.02

프리랜서 대상으로 환급을 받을 수 있는 서비스입니다. 친구초대 이벤트 서비스를 담당했습니다.


비즈넵 Core    2022.06 ~ 2023.02

제품 개발자가 제품에 집중할 수 있게 DX 개선을 위한 사내 모듈을 개발합니다.

사내 디자인시스템을 구축 및 운영하였습니다.

개발자와 디자이너간의 커뮤니케이션 비용을 줄이고 일관된 디자인을 유지하기 위해 사내 디자인 시스템을 구축 및 운영하고 있습니다.

  • Headless기반의 컴포넌트 개발로 형태와 기능을 분리하여 개발하였습니다.
  • Storybook을 사용하여 컴포넌트를 문서화하였습니다.
  • npm module로 배포하여 changeset (opens in a new tab) 이란 버전관리시스템과 + Github Action을 활용하여 버전관리를 하였습니다.

Growth Hacking

gtag, Airbirdge, Datadog 등의 매트릭 로깅 SaaS를 앱에 통합하여 의미있는 데이터를 창출해본 경험이 있습니다.

  • 각종 로깅 SaaS를 모듈화하여 유저 정보 수집 및 다양한 이벤트 로깅을 하였습니다.
  • 수집된 데이터를 기반으로 Datadog을 사용하여 데이터 시각화를 하였습니다.
  • 각종 이벤트를 기반으로 각종 프로젝트에서 다양한 직군의 요구사항 및 가설 증명을 위한 A/B 테스트를 도입, 진행하였습니다.

비즈넵 백오피스 콘솔

비즈넵 서비스 전반을 관리하기 위해 내부 인원이 사용하는 콘솔을 개발하였습니다.

  • 사업체 데이터 연동 관리 기능 구현 하였습니다.
  • 사내 백오피스 사용자 관리 기능 구현 하였습니다.
  • 데이터 테이블 정렬, 검색 기능 구현 하였습니다.
  • 쿠폰 조회 및 생성 기능 구현 하였습니다.
  • 기타 사내 구성원들의 요구사항 우선순위 정리 후 지속적인 관리 및 기능개발 하였습니다.

교육사항