미리보기
기본 정보
제네시스랩에서 대규모 인원이 몰리는 대기업 공채 시즌 영상면접 서비스를 4년간 운영하며 대규모 트래픽에서 안정적인 서비스를 제공하는 경험을 있습니다. 이 경험을 바탕으로 안정적인 서비스를 만들어 나가는데 기여하고 싶습니다. 20명 내외의 스타트업이 90여명의 조직으로 성장하는 동안 마주하는 다양한 문제들을 해결한 경험이 있습니다. 팀 회의에서 의견을 내고, 팀과 조직에게 주어진 미션을 코드, 문서로 해결하는것을 좋아합니다. 사내 스터디/세미나를 통해 동료 개발자들과 지식을 공유하는 것을 즐깁니다. <개발 생산성과 테스트 코드> 세미나를 주최하고 운영했습니다.
기술 스택
React, TypeScript, Next.js, Node.js, react-query, zustand, Jest, msw, Cypress, express.js, Redux, 프롬프트엔지니어링
경력
주)제네시스랩
웹프론트엔드개발자 | 개발실
2020.11. ~ 2024.11. (4년 1개월)
사내 레거시 프로젝트의 기술스택을 변경하여 처음부터 끝까지 개발
서비스 리뉴얼을 진행하면서 redux, redux-saga 를 사용하는 기술스택을 react-query, zustand로 변경하고 라이브러리 버전등을 최신화 하여 안정적으로 서비스 운영.
테스트 코드의 필요성을 제기하며 도입하여 유닛 테스트부터 E2E 테스트 까지 도입
유닛테스트(jest) 를 시작으로 컴포넌트 테스트(testing-library/react), E2E 테스트 (cypress)를 도입하여 서비스의 안정성과 리팩토링시 버그를 빠르게 발견할 수 있는 환경 마련.
Mock Server 를 구성하여 E2E 테스트 중 API를 호출했을 때에도, 정상적인 서비스 진행이 가능한지 확인하여 UX에 변화가 없는지 확인하는 플로우 구축.
영상면접 서비스의 고질적인 이슈 해결
영상면접 서비스 일부 사용자에게서 영상 데이터가 일부 누락된 채로 업로드 되는 현상 존재
웹 브라우저의 메모리 누수가 원인이었고, 디버깅을 통해 메모리 누수 이슈 해결하여 오랜시간 남아있던 이슈를 해결
서비스 운영상 지속적인 문의가 사라졌고, 상/하반기 채용 시즌 유저가 N배로 증가하는 상황에서도 CS 문의 없이 운영기여
서비스 운영중 치명적인 에러 발생시 빠르게 알 수 있도록 자동화
팀에 들어오는 요청중 버그로 인해 진행이 안될 때, 운영팀에서의 요청이 와야 버그상황임을 인지하는 상황.
주요 함수에서 에러 발생시 슬랙 알림을 연동하여 개발자가 먼저 발견하여 수정할 수 있도록 환경 구축하여 작업에 드는 의사소통 비용을 최소화함.
B2C 서비스에서 빠른 버그대응으로 유저의 불편함을 최소화
사내 개발자를 위한 '명언 알리미' 서비스 개발
개발위인(?) 들의 명언을 DB에 저장하여 일정 시간마다 슬랙 채널에 알림을 주는 Express 서버 운영.
코드를 작성하는 개발자들에게 더 좋은 코드를 만들기 위한 노력을 고취시키는 목적으로 개발
짝 프로그래밍을 도입하여 개발 역량 강화
동료 개발자와 짝 프로그래밍을 시도하여 서로의 역량을 강화함.
같은 기능이라도 다르게 작성할 수 있는 안목 확장.
사내 NPM 라이브러리 개발
같은 도메인에 있는 프로젝트들 끼리 사용하는 공통 함수, 변수 들을 저장할 수 있는 사내 라이브러리를 개발함.
프로젝트 마다 파편화 되어 있는 기능 / 잠재적 버그를 취합하여 통합 관리할 수 있는 환경 구축
포트폴리오
프로젝트
뷰인터 HR 응시 서비스 (지원자용)
제네시스랩
2020.11. ~ 진행 중
1. 개요
고객사(대기업, 공공기관)에 지원한 응시자가 AI 영상면접 촬영을 위한 서비스 입니다.
MediaStream API 와 하드웨어(카메라, 마이크)를 이용한 영상 촬영 및 응답 시스템을 구축하였으며, 동시 접속자 수 5000명 이상을 안정적으로 대응하는 프로젝트를 수행했습니다.
2. 나의 역할
뷰인터 HR 응시 서비스 웹 1인 개발
3. 주요 업무
프로젝트 개발 초기부터 참여했으며, 기술스택, 라이브러리 등 서비스에 사용되는 기술을 검토하여 개발 진행했습니다.
4. 기술 스택
React 18
Vite
React-query
zustand
jest
cypress
MSW
5. 성과 및 결과
결과요약
성공적인 서비스 운영으로 4년 동안 107개 고객사 누적
2023년 서비스 리뉴얼을 진행하여 뷰인터HR v2.0 출시
서비스 리뉴얼 (기술 스택 변경, UI 변경)
redux → zustand
redux-saga → react-query
jest, cypress, MSW 테스트 코드 적용
Sentry, Datadog, Slack 을 통한 실시간 버그 감지 기능
관련 링크
사내 기술 블로그 투고
AI 영상면접: 완벽한 녹화를 위한 비법 (프론트엔드 편)
6. 회고
자원을 많이 사용하는 하드웨어 기기 특성상 예상하지 못할 버그에 대응할 필요가 많았음. 메모리 누수를 발견하여 지원자의 정상적인 응시가 가능하도록 개선한 경험이 있음. - 메모리 누수 디버깅 문서
트래픽이 몰리는 서비스이기 때문에, 오류로 인한 응시 지연 문제가 발생하면 치명적이기 때문에, 공채 시즌에는 실시간 대응이 가능하도록 운영한 경험이 좋았음.
리뉴얼 회고 일지
영상면접 서비스 개발 일지 (1) - 영상면접 서비스 개발 일지 (2) - 영상면접 서비스 개발 일지 (3) - 영상면접 서비스 개발 일지 (4)
7. 비주얼 자료
자기소개
안녕하세요, 저는 김영준입니다. 웹 프론트엔드 개발자로 TypeScript, React, Next.js, React-Query, Zustand, Express, Node.js 등 다양한 프론트엔드 및 백엔드 기술 스택을 다루며 안정적이고 직관적인 사용자 경험을 제공하기 위해 노력하고 있습니다.
핵심 역량
UX 개선을 위한 문제 해결 능력
프로젝트 진행 중 희귀하게 발생하는 문제들을 추적하고 해결한 경험이 있습니다. 특히 ‘브라우저 메모리 누수’ 문제를 장시간의 분석 끝에 해결하면서, 사용자 경험을 대폭 개선한 바 있습니다. 문제 해결 과정에서 얻은 인사이트를 통해 다양한 프로젝트에서도 높은 수준의 품질을 유지하는 데 기여하고 있습니다.MediaStream 프로젝트 유지보수 경험
MediaStream을 다루는 프로젝트(뷰인터HR 영상면접)를 4년간 유지보수하며 쌓은 경험이 있습니다. 특히 하드웨어와 관련된 이슈가 많은 프로젝트에서 다양한 문제를 해결해 왔으며, 이를 통해 관련 기술에 대한 이해를 갖추고 있습니다.레거시 프로젝트 리뉴얼 경험
오래된 서비스를 최신 기술 스택과 UI로 리뉴얼한 경험이 있습니다. 이 과정에서 신기술 도입 시 발생할 수 있는 버그를 방지하기 위해, 단위 테스트부터 E2E 테스트까지 테스트 코드를 도입했습니다. 이를 통해 코드 안정성과 서비스 품질을 높이는 성과를 이루었습니다.
저는 개발의 본질이 사용자 경험을 높이는 데 있다고 생각합니다. 그리고 개발자의 개발경험도 중요하다고 생각합니다. 다른 개발자가 보더라도 읽고 사용하기 쉬운 코드를 작성하고 있습니다.
그동안 쌓아온 경험과 기술을 바탕으로, 더 나은 UX를 제공하는 서비스를 만들고 싶습니다!
교육
고려대학교 대학원
대학원(석사) | 기계공학과
2019.03. ~ 2019.08. | 중퇴
청주대학교
대학교(학사) | 바이오메디컬학과
2013.03. ~ 2019.02. | 졸업
자격증
정보처리기사
한국산업인력공단
2023.11.