미리보기

주요 업무

IT 서비스 사업팀, 솔루션 사업팀의 Frontend 개발자로 근무하였습니다.

React 프로젝트의 전체 설계 및 구축, 개발을 담당했습니다. 주로 전세계 지도 기반 서비스를 개발하였고, 내비게이션 기반의 주문 서비스를 웹뷰로 개발한 경험이 있습니다.

팀원들과 함께 주도적으로 스터디를 진행하며, 프론트엔드 기술 선정 및 팀 내 기술을 전파하였습니다.

프로젝트 진행 시 Figma를 활용하여 기획자, 디자이너와 UI/UX 관련 피드백을 주고받았으며, 스타일 속성을 참고하여 프론트엔드 구현의 정확도를 높였습니다. Swagger를 통해 백엔드 개발자와 효율적으로 소통하며 개발을 진행하며, API 문서를 검토하고 테스트하여 백엔드 연동 과정에서의 오류를 최소화했습니다.

Github Projects의 칸반보드로 업무 및 일정을 관리하여 개발 생산성을 향상시켰습니다.

• 기술 스택

  • TypeScript, React, MUI, tanstack/react-query, zustand, Jotai, react-hook-form, zod, fomik, yup, i18next

  • Github, Figma

진행 프로젝트

• KT 품질측정 모니터링

  • 2025.03~진행중

  • 프론트엔드 개발 1명, 백엔드 개발 1명

• KT 수사기관

  • 2025.01~2025.02

  • 프론트엔드 개발 1명, 백엔드 개발 1명

• 현대 오토에버 Pickup Service POC

  • 2024.09~2024.12

  • PM 1명, 기획 & 디자인 1명, 프론트엔드 개발 2명, 백엔드 개발 1명, 웹 퍼블리셔 1명

• 현대 오토에버 Global Contents Provider Service

  • 2024.03~2024.09

  • 기획 & 디자인 1명, 프론트엔드 개발 4명, 백엔드 개발 2명, 웹 퍼블리셔 1명

• 현대 오토에버 Global Poi(Point of Interest) Search Service

  • 2024.01~2024.05

  • 기획 1명, 디자인 1명, 프론트엔드 개발 4명, 백엔드 개발 2명, 웹 퍼블리셔 1명

주요 업무

웹 팀의 웹 퍼블리셔로 근무하였습니다.

사이트, 로고, 인터랙티브 디자인과 프론트엔드 개발을 위주로 반응형 웹사이트 구축 및 사용자 경험 개선에 기여하였습니다.

• 기술 스택

  • JavaScript,

    jQuery,

    HTML,

    CSS,

    Photoshop

진행 프로젝트

• 코리아메쎄 전시 플랫폼

  • 2022.07~2022.09

  • 기획 & 디자인 1명, 백엔드 개발 1명, 웹 퍼블리셔 1명

• 제이에스씨텍 홈페이지

  • 2022.07

  • 개발 1명

KT에서 진행한 경찰용 수사기관 사이트입니다.

TypeScript로 점진적 마이그레이션을 진행하고 레거시 코드들을 리펙터링하였습니다.

사용 기술 : React, TypeScript, tanstack-query, zustand, MUI, react-hook-form, zod

참여 인원 : PM 1명, 프론트엔드 개발 1명, 백엔드 개발 2명

기여도 : 프론트 전체 기여

[구현 기능]

• react-hook-form을 사용해 멀티스텝 form, 동적 form 구현

• 위치 등록, 위치 조회, 공지사항, 등록 이력 조회, 사용 이력, 통계 관리, 권한 관리 페이지 구현

• 더 이상 지원하지 않거나 오래된 패키지들을 최신 패키지로 마이그레이션

• 새로 작성되는 코드는 TypeScript로 작성하여 점진적 마이그레이션 진행

[성과]

• 페이지네이션에 prefetch 기술을 적용하여 페이지 전환 속도 개선 및 사용자 경험 최적화

• 개발 서버의 HMR 기능을 활성화하여 개발 속도 향상

• TypeScript 도입을 통한 백엔드 API 통신 개선

  • 응답 타입을 강제하여 API 응답 오류를 조기에 발견

현대 오토에버 픽업 주문 서비스입니다.

내비게이션 어플리케이션의 웹 뷰로 서비스가 되는 사용자 서비스와 웹으로 접근하는 관리자 서비스로 나뉩니다.

팀 학습 이후 TypeScript를 도입한 프로젝트입니다.

사용 기술 : React, TypeScript, tanstack-query, zustand, jotai, MUI, react-hook-form, zod

참여 인원 : PM 1명, 기획 & 디자인 1명, 프론트엔드 개발 2명, 백엔드 개발 1명, 웹 퍼블리셔 1명

기여도 : 64% (150개 PR 중 96개)

[구현 기능]

• 사용자 서비스

  • JWT 토큰 방식의 인증 기능 구현

  • api 공통 error handler 구현

  • 네이티브 앱과 웹뷰 간 양방향 통신 인터페이스를 구축하여 실시간 알림 시스템 구현

  • 픽업 위치, 결제, 상품 옵션, 장바구니, 주문 정보 페이지 구현

  • 슬라이드, 페이드 인/아웃 애니메이션 효과 구현

  • 다크모드 디자인 구현

• 관리자 서비스

  • 세션 방식의 인증 기능 구현

  • 이미지 base64 인코딩 및 업로드 기능 구현

  • 주문/결제 목록, 내 정보, 카테고리 페이지 구현

  • 로그인 실패 로직 구현

[성과]

• 사용자 서비스

  • 장바구니 상품 삭제 시 API 처리 중에는 상품이 아직 화면에 남아있는 문제 => 낙관적 업데이트로 중복 삭제 방지와 더 나은 사용자 경험 제공

• 관리자 서비스

  • 이미지 디스크 캐싱으로 이미지 변경 시 최신 이미지로 표시되지 않는 문제 => 해시값을 기반으로 해결하여 최신 이미지 보장 및 사용자 혼란 제거

  • mutation key를 활용해 관련된 query들을 재요청할 수 있는 시스템을 구축해 개발 생산성 향상

  • 페이지네이션 prefetch 기술 도입으로 페이지 전환 속도 개선 및 사용자 경험 최적화

  • MUI Theme를 사용해서 일관된 스타일을 제공해 개발 생산성 향상 및 사용자 경험 제공

• 쿼리 응답 데이터를 캐싱하여 네트워크 요청 횟수 감소

• 타입스크립트 도입을 통해 컴파일 단계에서 오류를 발견하여 버그 발생률 감소 및 개발 생산성 향상

• 타입스크립트의 코드 자동완성 및 타입 추론으로 개발 생산성 향상

• 백엔드 API 응답 타입과 프론트엔드 타입을 일치시켜 협업 효율성 개선

현대 오토에버 지도 플랫폼 어드민 서비스입니다.

이전 프로젝트의 회고를 통해 팀 내의 컨벤션과 공통 컴포넌트에 대한 기준을 정했습니다.

사용 기술 : React, MUI, react-query, zustand, react-google-maps, formik, yup, Github

참여 인원 : 기획 & 디자인 1명, 프론트엔드 개발 4명, 백엔드 개발 2명, 웹 퍼블리셔 1명

기여도 : 45% (124개 PR 중 56개)

[구현 기능]

• JWT 토큰 방식의 인증 기능 구현

• 지도 마커 클러스터링 기능 구현

• 지도 기반 사고 진행 방향 폴리곤 시각화 구현

• 로그인, 회원가입, 사고, 과속, 주차, 검색 페이지 구현

• 반응형 디자인(데스크톱, 태블릿, 모바일) 구현

• 다크모드 디자인 구현

[성과]

• 지도 마커 리렌더링 최적화

• @react-google-maps/api 라이브러리를 최신 vis.gl/react-google-maps로 마이그레이션하여 지도 기능 추가 및 마커 렌더링 성능 개선

• 이전 프로젝트의 공통 컴포넌트를 리펙터링하여 코드 재사용성 증가 및 개발 생산성 향상

• 기획자와 개발 중인 화면을 공유하기 위해 기획자 PC에 개발환경을 세팅해야하는 문제 => ngrok을 활용해 기획자가 개발 중인 화면 실시간 확인

현대 오토에버 지도 검색 서비스입니다.

프로젝트 설계 및 구축을 담당하고 기술들을 선정했습니다.

React 학습을 위한 팀 스터디를 주도하여 팀원들의 기술 역량 강화에 기여했습니다.

사용 기술 : React, MUI, react-query, zustand, react-google-maps, i18next, formik, yup, Github

참여 인원 : 기획 1명, 디자인 1명, 프론트엔드 개발 4명, 백엔드 개발 2명, 웹 퍼블리셔 1명

기여도 : 33% (258개 PR 중 86개)

[구현 기능]

• JWT 토큰 방식의 인증 기능 구현

• i18next를 활용한 다국어 지원 시스템 개발

• OTP 및 이메일 인증 기능 구현

• 대시보드, 내 정보, 권한 관리, 권한 목록, 검색 관리, 통계, 로그인 이미지 관리 페이지 구현

• 반응형 디자인(데스크톱, 태블릿, 모바일) 구현

• 다크모드 디자인 구현

[성과]

• keepPreviousData를 활용한 페이지네이션 및 필터링 구현으로 화면 깜빡임 현상을 제거하여 사용자 경험 향상

• 중복 컴포넌트들을 공통화하여 개발 생산성 향상

• Figma의 코멘트 기능을 활용해 디자이너, 기획자와의 협업 효율성 개선

React로 개발한 개인 포트폴리오 사이트입니다.

사용 기술 : TypeScript, React, Redux, Styled, motion, es-toolkit, Github

참여 인원 : 개발 1명

[구현 기능]

• motion을 사용한 애니메이션 효과 구현

• vercel을 사용한 CI/CD 및 배포

• 상태관리 zustand에서 redux toolkit으로 변경

• styled를 사용한 사이트 디자인

• scroll spy 구현

• parallax scrolling 구현

• 반응형 웹 디자인

AI 화상 면접 연습 서비스입니다.

사용 기술 : React, TypeScript, react-query, recoil, emotion, aws amplify, Github

참여 인원 : 프론트엔드 개발 2명, 백엔드 개발 3명

기여도 : 33% (72개 PR 중 24개)

[구현 기능]

• WebRTC를 사용해 실시간 비디오 통신 구현

• socket 통신을 사용하여 사용자 간의 상태 공유

• aws amplify 배포

[성과]

• 파일을 청크 단위로 나누어 멀티 파트 방식으로 업로드하여 면접 녹화 영상 업로드 시간 단축 (85s => 62s)

• 영상 파일을 m3u8 형식으로 컨버팅하여 HTTP Live Streaming(HLS) 서비스를 구현하여 사용자가 타임라인 이동 시 로딩 속도를 단축 (1,830ms => 600ms)

• react-query 데이터 캐싱으로 네트워크 요청 횟수 감소

https://github.com/KKamjangE/KOREA_MESSE?tab=readme-ov-file

전시회 기획, 운영, 디자인, 마케팅 서비스를 제공하는 플랫폼입니다.

Figma를 통해 기획, 디자이너와 지속적으로 소통하며 UI/UX 디자인 세부사항을 조율하였습니다.

브랜드의 개성을 표현하고 사용자의 흥미와 몰입도를 높이기 위한 인터랙티브 디자인이 많습니다.

사용 기술 : JavaScript, HTML, CSS, jQuery, Figma

참여 인원 : 기획 & 디자인 1명, 웹 퍼블리셔 1명, 백엔드 개발 1명

[구현 기능]

• 전체적인 화면 퍼블리싱

• parallax scrolling 구현

• scroll progress bar 기능 구현

• swiper 기능 구현

• 전시회, 프로젝트, 뉴스 검색 기능 구현

• 대용량 트래픽이 아니면 안보셔도 됩니다! 선물하기 서비스 캐싱 전략

• 카카오의 Kubernetes가 Data Center 화재를 견디는 방법

• taxi-meter 개발기

• 글로벌 멀티플랫폼 게임의 어뷰징 차단하기

• 카카오페이는 어떻게 수천만 결제를 처리할까? 우아한 결제 분산락 노하우

• 카카오톡 펑 개발기