프론트엔드 개발자

안제민

안녕하세요!🖐️ 기록과 소통을 좋아하는 안제민입니다.
경험을 기록하고 공유하는 것을 좋아합니다.
커뮤니케이션이 생산성과 협업에 도움이 되기에 항상 원활한 커뮤니케이션을 위해 노력합니다.

협업 지향

학습 지향

효율적

커뮤니케이션

자기 주도적

<ul><li>대용량 트래픽이 아니면 안보셔도 됩니다! 선물하기 서비스 캐싱 전략</li><li>카카오의 Kubernetes가 Data Center 화재를 견디는 방법</li><li>taxi-meter 개발기</li><li>글로벌 멀티플랫폼 게임의 어뷰징 차단하기</li><li>카카오페이는 어떻게 수천만 결제를 처리할까? 우아한 결제 분산락 노하우</li><li>카카오톡 펑 개발기</li></ul>

if kakao AI 2024 컨퍼런스

웹디자인 기능사

전자계산기 기능사

LinkedIn

Velog

Github

포트폴리오

KT에서 진행한 경찰용 수사기관 사이트입니다.TypeScript로 점진적 마이그레이션을 진행하고 레거시 코드들을 리펙터링하였습니다.사용 기술 : React, TypeScript, tanstack-query, zustand, MUI, react-hook-form, zod참여 인원 : PM 1명, 프론트엔드 개발 1명, 백엔드 개발 2명기여도 : 프론트 전체 기여[구현 기능]<ul><li>react-hook-form을 사용해 멀티스텝 form, 동적 form 구현</li><li>위치 등록, 위치 조회, 공지사항, 등록 이력 조회, 사용 이력, 통계 관리, 권한 관리 페이지 구현</li><li>더 이상 지원하지 않거나 오래된 패키지들을 최신 패키지로 마이그레이션</li><li>새로 작성되는 코드는 TypeScript로 작성하여 점진적 마이그레이션 진행</li></ul>[성과]<ul><li>페이지네이션에 prefetch 기술을 적용하여 페이지 전환 속도 개선 및 사용자 경험 최적화</li><li>개발 서버의 HMR 기능을 활성화하여 개발 속도 향상</li><li>TypeScript 도입을 통한 백엔드 API 통신 개선<ul><li>응답 타입을 강제하여 API 응답 오류를 조기에 발견</li></ul></li></ul>

KT 수사기관

현대 오토에버 픽업 주문 서비스입니다.내비게이션 어플리케이션의 웹 뷰로 서비스가 되는 사용자 서비스와 웹으로 접근하는 관리자 서비스로 나뉩니다.팀 학습 이후 TypeScript를 도입한 프로젝트입니다.사용 기술 : React, TypeScript, tanstack-query, zustand, jotai, MUI, react-hook-form, zod참여 인원 : PM 1명, 기획 &amp; 디자인 1명, 프론트엔드 개발 2명, 백엔드 개발 1명, 웹 퍼블리셔 1명기여도 : 64% (150개 PR 중 96개)[구현 기능]<ul><li>사용자 서비스<ul><li>JWT 토큰 방식의 인증 기능 구현</li><li>api 공통 error handler 구현</li><li>네이티브 앱과 웹뷰 간 양방향 통신 인터페이스를 구축하여 실시간 알림 시스템 구현</li><li>픽업 위치, 결제, 상품 옵션, 장바구니, 주문 정보 페이지 구현</li><li>슬라이드, 페이드 인/아웃 애니메이션 효과 구현</li><li>다크모드 디자인 구현</li></ul></li><li>관리자 서비스<ul><li>세션 방식의 인증 기능 구현</li><li>이미지 base64 인코딩 및 업로드 기능 구현</li><li>주문/결제 목록, 내 정보, 카테고리 페이지 구현</li><li>로그인 실패 로직 구현</li></ul></li></ul>[성과]<ul><li>사용자 서비스<ul><li>장바구니 상품 삭제 시 API 처리 중에는 상품이 아직 화면에 남아있는 문제 =&gt; 낙관적 업데이트로 중복 삭제 방지와 더 나은 사용자 경험 제공</li></ul></li><li>관리자 서비스<ul><li>이미지 디스크 캐싱으로 이미지 변경 시 최신 이미지로 표시되지 않는 문제 =&gt; 해시값을 기반으로 해결하여 최신 이미지 보장 및 사용자 혼란 제거</li><li>mutation key를 활용해 관련된 query들을 재요청할 수 있는 시스템을 구축해 개발 생산성 향상</li><li>페이지네이션 prefetch 기술 도입으로 페이지 전환 속도 개선 및 사용자 경험 최적화</li><li>MUI Theme를 사용해서 일관된 스타일을 제공해 개발 생산성 향상 및 사용자 경험 제공</li></ul></li><li>쿼리 응답 데이터를 캐싱하여 네트워크 요청 횟수 감소</li><li>타입스크립트 도입을 통해 컴파일 단계에서 오류를 발견하여 버그 발생률 감소 및 개발 생산성 향상</li><li>타입스크립트의 코드 자동완성 및 타입 추론으로 개발 생산성 향상</li><li>백엔드 API 응답 타입과 프론트엔드 타입을 일치시켜 협업 효율성 개선</li></ul>

현대 오토에버 Pickup Service POC

현대 오토에버 지도 플랫폼 어드민 서비스입니다.이전 프로젝트의 회고를 통해 팀 내의 컨벤션과 공통 컴포넌트에 대한 기준을 정했습니다.사용 기술 : React, MUI, react-query, zustand, react-google-maps, formik, yup, Github참여 인원 : 기획 &amp; 디자인 1명, 프론트엔드 개발 4명, 백엔드 개발 2명, 웹 퍼블리셔 1명기여도 : 45% (124개 PR 중 56개)[구현 기능]<ul><li>JWT 토큰 방식의 인증 기능 구현</li><li>지도 마커 클러스터링 기능 구현</li><li>지도 기반 사고 진행 방향 폴리곤 시각화 구현</li><li>로그인, 회원가입, 사고, 과속, 주차, 검색 페이지 구현</li><li>반응형 디자인(데스크톱, 태블릿, 모바일) 구현</li><li>다크모드 디자인 구현</li></ul>[성과]<ul><li><a target="_blank" rel="noopener noreferrer nofollow" href="https://velog.io/@ajm0718/Tanstack-Query-%EC%A7%80%EB%8F%84-%EB%A7%88%EC%BB%A4-%EB%A0%8C%EB%8D%94%EB%A7%81-%EC%B5%9C%EC%A0%81%ED%99%94%ED%95%98%EA%B8%B0">지도 마커 리렌더링 최적화</a></li><li>@react-google-maps/api 라이브러리를 최신 vis.gl/react-google-maps로 마이그레이션하여 지도 기능 추가 및 마커 렌더링 성능 개선</li><li>이전 프로젝트의 공통 컴포넌트를 리펙터링하여 코드 재사용성 증가 및 개발 생산성 향상</li><li>기획자와 개발 중인 화면을 공유하기 위해 기획자 PC에 개발환경을 세팅해야하는 문제 =&gt; ngrok을 활용해 기획자가 개발 중인 화면 실시간 확인</li></ul>

현대 오토에버 Global Contents Provider Service

현대 오토에버 지도 검색 서비스입니다.프로젝트 설계 및 구축을 담당하고 <a target="_blank" rel="noopener noreferrer nofollow" href="https://velog.io/@ajm0718/%EB%A6%AC%EC%95%A1%ED%8A%B8-%ED%9B%85%EC%9D%84-%ED%99%9C%EC%9A%A9%ED%95%9C-%EB%A7%88%EC%9D%B4%ED%81%AC%EB%A1%9C-%EC%83%81%ED%83%9C-%EA%B4%80%EB%A6%AC-%ED%9B%84%EA%B8%B0">기술들을 선정</a>했습니다.React 학습을 위한 팀 스터디를 주도하여 팀원들의 기술 역량 강화에 기여했습니다.사용 기술 : React, MUI, react-query, zustand, react-google-maps, i18next, formik, yup, Github참여 인원 : 기획 1명, 디자인 1명, 프론트엔드 개발 4명, 백엔드 개발 2명, 웹 퍼블리셔 1명기여도 : 33% (258개 PR 중 86개)[구현 기능]<ul><li>JWT 토큰 방식의 인증 기능 구현</li><li>i18next를 활용한 다국어 지원 시스템 개발</li><li>OTP 및 이메일 인증 기능 구현</li><li>대시보드, 내 정보, 권한 관리, 권한 목록, 검색 관리, 통계, 로그인 이미지 관리 페이지 구현</li><li>반응형 디자인(데스크톱, 태블릿, 모바일) 구현</li><li>다크모드 디자인 구현</li></ul>[성과]<ul><li>keepPreviousData를 활용한 페이지네이션 및 필터링 구현으로 화면 깜빡임 현상을 제거하여 사용자 경험 향상</li><li>중복 컴포넌트들을 공통화하여 개발 생산성 향상</li><li>Figma의 코멘트 기능을 활용해 디자이너, 기획자와의 협업 효율성 개선</li></ul>

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

React로 개발한 개인 포트폴리오 사이트입니다.사용 기술 : TypeScript, React, Redux, Styled, motion, es-toolkit, Github참여 인원 : 개발 1명[구현 기능]<ul><li>motion을 사용한 애니메이션 효과 구현</li><li>vercel을 사용한 CI/CD 및 배포</li><li>상태관리 zustand에서 redux toolkit으로 변경</li><li>styled를 사용한 사이트 디자인</li><li>scroll spy 구현</li><li>parallax scrolling 구현</li><li>반응형 웹 디자인</li></ul>

포트폴리오 사이트

<a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/krafton-jungle-AI-InterviewMate/AI-InterviewMate-FE/tree/main">AI 화상 면접 연습 서비스</a>입니다.사용 기술 : React, TypeScript, react-query, recoil, emotion, aws amplify, Github참여 인원 : 프론트엔드 개발 2명, 백엔드 개발 3명기여도 : 33% (72개 PR 중 24개)[구현 기능]<ul><li>WebRTC를 사용해 실시간 비디오 통신 구현</li><li>socket 통신을 사용하여 사용자 간의 상태 공유</li><li>aws amplify 배포</li></ul>[성과]<ul><li>파일을 청크 단위로 나누어 멀티 파트 방식으로 업로드하여 면접 녹화 영상 업로드 시간 단축 (85s =&gt; 62s)</li><li>영상 파일을 m3u8 형식으로 컨버팅하여 HTTP Live Streaming(HLS) 서비스를 구현하여 사용자가 타임라인 이동 시 로딩 속도를 단축 (1,830ms =&gt; 600ms)</li><li>react-query 데이터 캐싱으로 네트워크 요청 횟수 감소</li></ul>

인터뷰메이트

<a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/KKamjangE/KOREA_MESSE?tab=readme-ov-file">https://github.com/KKamjangE/KOREA_MESSE?tab=readme-ov-file</a>전시회 기획, 운영, 디자인, 마케팅 서비스를 제공하는 플랫폼입니다.Figma를 통해 기획, 디자이너와 지속적으로 소통하며 UI/UX 디자인 세부사항을 조율하였습니다.브랜드의 개성을 표현하고 사용자의 흥미와 몰입도를 높이기 위한 인터랙티브 디자인이 많습니다.사용 기술 : JavaScript, HTML, CSS, jQuery, Figma참여 인원 : 기획 &amp; 디자인 1명, 웹 퍼블리셔 1명, 백엔드 개발 1명[구현 기능]<ul><li>전체적인 화면 퍼블리싱</li><li>parallax scrolling 구현</li><li>scroll progress bar 기능 구현</li><li>swiper 기능 구현</li><li>전시회, 프로젝트, 뉴스 검색 기능 구현</li></ul>

코리아메쎄 전시 플랫폼

<h3>주요 업무</h3>IT 서비스 사업팀, 솔루션 사업팀의 Frontend 개발자로 근무하였습니다.React 프로젝트의 전체 설계 및 구축, 개발을 담당했습니다. 주로 전세계 지도 기반 서비스를 개발하였고, 내비게이션 기반의 주문 서비스를 웹뷰로 개발한 경험이 있습니다.팀원들과 함께 주도적으로 스터디를 진행하며, 프론트엔드 기술 선정 및 팀 내 기술을 전파하였습니다.프로젝트 진행 시 Figma를 활용하여 기획자, 디자이너와 UI/UX 관련 피드백을 주고받았으며, 스타일 속성을 참고하여 프론트엔드 구현의 정확도를 높였습니다. Swagger를 통해 백엔드 개발자와 효율적으로 소통하며 개발을 진행하며, API 문서를 검토하고 테스트하여 백엔드 연동 과정에서의 오류를 최소화했습니다.Github Projects의 칸반보드로 업무 및 일정을 관리하여 개발 생산성을 향상시켰습니다.<ul><li>기술 스택<ul><li>TypeScript, React, MUI, tanstack/react-query, zustand, Jotai, react-hook-form, zod, fomik, yup, i18next</li><li>Github, Figma</li></ul></li></ul><h3>진행 프로젝트</h3><ul><li>KT 품질측정 모니터링<ul><li>2025.03~진행중</li><li>프론트엔드 개발 1명, 백엔드 개발 1명</li></ul></li></ul><ul><li>KT 수사기관<ul><li>2025.01~2025.02</li><li>프론트엔드 개발 1명, 백엔드 개발 1명</li></ul></li></ul><ul><li>현대 오토에버 Pickup Service POC<ul><li>2024.09~2024.12</li><li>PM 1명, 기획 &amp; 디자인 1명, 프론트엔드 개발 2명, 백엔드 개발 1명, 웹 퍼블리셔 1명</li></ul></li><li>현대 오토에버 Global Contents Provider Service<ul><li>2024.03~2024.09</li><li>기획 &amp; 디자인 1명, 프론트엔드 개발 4명, 백엔드 개발 2명, 웹 퍼블리셔 1명</li></ul></li><li>현대 오토에버 Global Poi(Point of Interest) Search Service<ul><li>2024.01~2024.05</li><li>기획 1명, 디자인 1명, 프론트엔드 개발 4명, 백엔드 개발 2명, 웹 퍼블리셔 1명</li></ul></li></ul>

<h3>주요 업무</h3>웹 팀의 웹 퍼블리셔로 근무하였습니다.사이트, 로고, 인터랙티브 디자인과 프론트엔드 개발을 위주로 반응형 웹사이트 구축 및 사용자 경험 개선에 기여하였습니다.<ul><li>기술 스택<ul><li>JavaScript, jQuery, HTML, CSS, Photoshop</li></ul></li></ul><h3>진행 프로젝트</h3><ul><li>코리아메쎄 전시 플랫폼<ul><li>2022.07~2022.09</li><li>기획 &amp; 디자인 1명, 백엔드 개발 1명, 웹 퍼블리셔 1명</li></ul></li><li>제이에스씨텍 홈페이지<ul><li>2022.07</li><li>개발 1명</li></ul></li></ul>