FRONTEND DEVELOPER · CAREER PORTFOLIO

사용자 경험과 서비스 구조를 함께 고민하는 프론트엔드 개발자

React, Next.js를 중심으로 여행 플랫폼의 신규 서비스 구축, 레거시 마이그레이션 및 운영 서비스 고도화를 경험했습니다. 새로운 기술과 도메인을 빠르게 학습해 실제 서비스에 적용하고, 사용자 경험과 운영 안정성을 함께 고려한 프론트엔드 개발을 지향합니다.

김하림1999년생서울시 강남구 역삼동harim990309@naver.com01049110309

Resume ↗Portfolio ↗GitHub ↗

김하림Frontend Developer4년차 프론트엔드 개발자

Core Competencies

React / Next.js 서비스 구축

React와 Next.js를 활용한 신규 서비스 구축부터 실제 운영·유지보수까지 경험했습니다. App Router, Server/Client Component, Middleware, SSR, 상태 Hydration을 실제 서비스 문제 해결에 활용합니다.

Vue 레거시 → React 전환

Vue2/Nuxt.js 운영 경험을 기반으로 기존 기능을 분석하고 Next.js + TypeScript 구조로 마이그레이션했습니다.

복잡한 API 데이터 구조화

서비스별 상이한 데이터와 상태를 공통 모델로 정규화하고, 기획·디자인·API 사이의 스펙 차이를 조율합니다.

UI/UX 이해와 협업

디자인 전공과 퍼블리싱 실무 경험을 바탕으로 로딩, 반응형, 인터랙션 등 사용자 경험을 개발 단계에서 함께 검토합니다.

운영까지 고려하는 개발

신규 개발뿐 아니라 실제 운영 서비스의 CS와 장애 대응을 경험했습니다. 중복 API 요청 방지, Health Check, Slack 예약 알림 등 운영 과정에서 발생하는 문제를 개발적으로 해결하는 것에도 관심을 가지고 있습니다.

Work Experience

2023.04 - 현재

㈜네이처모빌리티

Frontend Developer · 연구원 → 선임연구원

2023년 4월 연구원으로 입사해 여행 플랫폼 찜카(ZZIMCAR)의 신규 서비스 구축, Nuxt.js 레거시 운영 및 Next.js 전환, 서비스 고도화를 담당했습니다. 업무 성과를 인정받아 2026년 1월 입사 동기 중 유일하게 선임연구원으로 승진했습니다.

2022.04 - 2022.07

㈜유아이네트웍스

Publisher · 주임/팀원

React 기반 스마트시티 애플리케이션과 React Native 프로젝트의 전체 퍼블리싱 및 디자인 검토를 담당했습니다.

Projects

2026.06 - 현재

찜카 통합 마이페이지 구축 및 고도화

Next.js 15React 19JavaScript/TypeScriptJotaiTailwind CSSApp Router

상세 보기

기존 Vue/Nuxt.js 기반 마이페이지를 Next.js 환경으로 전환하면서 국내·해외 렌터카, 국내·해외 항공, 숙박, 택시, 버스 등 7개 여행 상품의 예약 경험을 하나의 마이페이지로 통합했습니다.

KEY IMPACTAI 활용으로 개발 일정 60% 단축

OpenAI Codex를 코드 탐색과 반복 구현에 활용해 개발 생산성을 높였습니다. 출석체크 기능의 UI·API 연동부터 검수·배포까지 예정 5일 대비 2일 만에 완료하여 예정 일정을 60% 단축했습니다.

기존 Vue/Nuxt.js 기반 기능을 Next.js 15 + React 19 기반으로 전환하고 신규 기능을 포함한 서비스 구조 재설계
7개 여행 상품의 서로 다른 예약 데이터와 상태를 공통 모델로 정규화하고 상품별 카드 컴포넌트 설계
예약 상태·이용 기간·상품 유형 필터와 URL Query Parameter를 동기화하여 조회 조건 유지
무한 스크롤과 요청 상태 제어를 적용하여 중복 API 요청 및 요청 경합 방지
회원·비회원 예약 조회를 지원하고 비회원 상세 진입 시 서비스별 인증 토큰 발급·연계 흐름 구현
일반·소셜 회원 유형에 따라 비밀번호·휴대폰·소셜 인증으로 분기되는 회원정보 수정 프로세스 개발
쿠폰 조회·필터·정렬·일괄 다운로드, 포인트 내역, 출석체크 및 누적 보상 기능 개발
Android/iOS WebView Bridge와 Jotai를 연계하여 앱 환경, 디바이스 상태, 알림 설정 처리
공통 Fetch 모듈과 TypeScript 타입을 구성하고 Middleware에서 API Token 발급·갱신 처리
개발 전 API 요청·응답 구조를 검토하고 필요한 데이터 형태를 백엔드에 제안하여 기획-API-UI 스펙 조율

2025.04 - 현재

국내렌터카 웹 서비스 유지보수 및 기능 개선

Next.js 15React 19JavaScriptTailwind CSSPortOneNaver Pay

상세 보기

차량 탐색부터 예약·결제, 예약 확인까지 이어지는 국내렌터카 핵심 사용자 흐름의 프론트엔드 유지보수와 기능 개선을 담당했습니다.

Next.js App Router 기반 국내렌터카 서비스의 메인, 차량 목록, 차량 상세, 예약·결제, 예약 조회 화면 유지보수
차량 상세 및 예약·결제 화면의 PC UI 구축과 디자인 QA를 수행하고 모달·필터·스크롤·스켈레톤 인터랙션 개선
회원·비회원 예약 상세 화면을 구현하고 차량, 운전자, 인수·반납, 약관, 결제 및 환불 정보를 API 데이터와 연동
기존 PortOne 결제 흐름에 Naver Pay를 연동하고 테스트 계정 노출 조건 및 결제 불가 안내 팝업 구현
상품 우선순위와 차량 정렬 로직을 개선하고 신차 필터, 연식 표기, 4륜구동·Apple CarPlay 등 차량 옵션 확장
예약 및 차량 상세 API의 에러 코드별 사용자 안내를 적용하고 비회원 예약 취소·로그아웃·환불 금액 등 운영 오류 수정
네이버 광고 유입 프로모션 배너, 금융사 결제 혜택, FAQ 및 카시트 안내 등 운영·마케팅 요청 대응

2025.01 - 2025.12

제휴사용 아웃링크 페이지 구축

Next.jsJavaScriptTailwind CSSREST API제휴사 연동

상세 보기

10개 제휴사의 요구사항과 서비스 스펙에 맞춰 로그인·결제 방식 및 사용자 흐름이 서로 다른 제휴사용 아웃링크 사이트를 구축했습니다.

KEY IMPACT제휴사별 구조 분리로 변경 영향 범위 격리

기존에는 한 파일 안에서 제휴사별 조건을 분기해 한 제휴사의 기능을 수정해도 전체 제휴사를 다시 검수해야 했고, 변경 사항이 다른 제휴사 오류로 이어지기도 했습니다. 공통 기능과 제휴사별 로직을 분리한 이후에는 수정 영향이 해당 제휴사에만 한정됐으며, 다른 제휴사에서 연쇄 오류가 발생하지 않았습니다.

Next.js 기반으로 10개 제휴사별 전용 아웃링크 페이지 및 사이트 구축
제휴사별 로그인 방식과 회원 인증 조건에 맞는 진입 및 인증 흐름 구현
제휴사마다 다른 결제 수단과 결제 가능 조건을 반영한 예약·결제 프로세스 개발
브랜드, 메뉴 노출, 이동 경로 및 안내 문구 등 제휴사별 화면 요구사항 적용
제휴사 스펙을 분석하고 백엔드·외부 개발자와 API 및 연동 방식을 조율
공통 기능은 재사용하면서 제휴사별 차이를 분리해 확장 가능한 구조로 구성

2024.07 - 현재

해외렌터카 예약 서비스 신규 구축 및 운영 고도화

Next.js 14React 18JavaScriptTailwind CSSJotaiGoogle Maps APIAWS AmplifyGAGTM

상세 보기

해외렌터카 검색부터 차량 선택, 예약·결제, 예약 완료 및 조회까지 이어지는 사용자 여정을 초기 개발 단계부터 구축하고 운영 안정화와 UI/UX 개선을 담당했습니다.

KEY IMPACT신규 서비스 구축부터 운영 안정화까지 담당

해외렌터카 서비스 구축 이후 GA/GTM, 예약 건별 Slack 알림, Health Check 등 운영에 필요한 기능까지 확장했습니다. 화면 구현에 그치지 않고 CS 대응과 장애 탐지까지 고려해 실제 운영 단계의 안정성을 높였습니다.

Next.js App Router 기반으로 검색, 차량 선택, 상세, 예약·결제, 예약 완료 및 조회까지 전체 예약 흐름 구축
국가·도시·영업소 API를 연동한 지역 선택과 날짜·시간 캘린더, 다른 지역 반납, 운전자 연령 및 최근 검색 조건 구현
차량 가격·옵션·연료·결제 조건·무료 취소·공급사·영업소 필터와 정렬 기능 구현
PC와 모바일의 구조 및 노출 순서가 다른 화면을 하나의 반응형 컴포넌트 구조로 설계
차량·보험·추가 옵션·결제 금액·대여 조건·취소 규정 화면과 Google Maps 기반 영업소 위치 모달 구현
회원·비회원 예약, 휴대전화 인증, 입력값 검증, 약관 동의 및 예약 요청 API 연동
온라인·현장·부분 현장 결제와 쿠폰·포인트·보험료·환불액·취소 수수료 표시 로직 구현
재검색 시 URL·검색 조건·필터 상태를 동기화하고 중복 클릭 및 중복 예약 방지 로직 적용
API 누락값과 빈 배열 등 예외 상황을 처리하고 협력사 API 스펙과 실제 응답 차이를 백엔드와 조율
GA/GTM 사용자 행동 데이터 수집, 예약 건별 Slack 알림 API 및 Health Check API 적용
서비스 V2 리뉴얼, 다국어 오픈 및 운영 과정의 UI/UX 개선

2024.03 - 2024.06

찜카 서비스 Next.js 마이그레이션

Next.jsTypeScriptJotaiTailwind CSSTurborepo

상세 보기

Vue2/Nuxt.js 기반 찜카의 메인, 이벤트, 공지사항 영역을 Next.js + TypeScript 환경으로 전환했습니다.

KEY IMPACTSSR과 상태 Hydration으로 초기 로그인 UI 개선

프레임워크 전환 과정에서 발생한 로그인 UI Flickering을 서버 회원정보 선조회와 초기 Atom Hydration 구조로 해결했습니다.

Vue2/Nuxt.js 기반 메인·이벤트·공지사항을 Next.js + TypeScript로 마이그레이션하고 데이터 조회 및 렌더링 구조 재구성
Middleware에서 회원 정보를 선조회하고 초기 Atom 상태에 Hydration하여 로그인 상태 반영 전 로그아웃 UI가 노출되던 Flickering 문제 개선
Turborepo 기반 프로젝트에서 공통 UI 및 서비스별 코드를 관리하고 Next.js 환경에 맞는 구조로 전환

2024.01 - 현재

통합 여행·모빌리티 플랫폼 운영 및 서비스 고도화

Nuxt.jsVue.jsJavaScriptREST APIAWS S3GTM반응형 UI

상세 보기

Nuxt.js·Vue.js 기반 통합 여행 플랫폼에서 국내외 항공·렌터카, 카셰어링, 마이페이지 및 예약 내역을 유지보수하고 서비스와 제휴 기능을 지속적으로 고도화했습니다.

KEY IMPACT새로운 기술 스택에 적응하며 운영 안정성과 제휴 확장성 개선

React 중심의 경험에서 처음 접한 Vue.js·Nuxt.js 2를 업무와 병행해 학습하고 국내외 항공·렌터카 운영에 바로 투입됐습니다. 이후 실제 예약·인증 오류를 개선하고 다양한 B2B/B2C 제휴 요구사항을 서비스 구조에 반영하며 운영 대응 역량을 확장했습니다.

국내외 항공·렌터카, 카셰어링, 마이페이지 및 통합 예약 내역 기능 유지보수
국내항공에 LG 라이프케어 복지몰을 연동하고 복지포인트 조회·사용, SMS 인증, 예약·결제·취소·환불 프로세스 구현
통합 예약 내역에 해외항공 및 해외렌터카 데이터를 연동하고 회원·비회원 조회와 서비스별 상세 페이지 이동 로직 구현
해외항공 서비스의 PC·모바일 진입 경로, 비회원 인증 및 예약 조회, 예약 상태·상세 화면 연동
해외렌터카 예약 내역의 PC·모바일 UI와 데이터를 연동하고 기존 서비스에서 V2 서비스로 전환
예약 중복 호출, 예약 취소 무한 로딩, 회원 약관·본인인증, 결제·환불 금액 오류 등 운영 이슈 개선
서비스 및 이벤트 오픈 일정 데이터를 AWS S3 JSON으로 관리하는 구조 적용
농협카드·항공·렌터카 등 다양한 제휴 프로모션 페이지 개발
SSG, LG 라이프케어, 베네피아 등 B2B/B2C 제휴사별 로그인, 메뉴 노출, 예약·결제 및 이동 경로 분기 처리
API URL·응답 스키마·제휴사 판별값 변경과 서비스별 문구·항공사 로고·반응형 UI 유지보수
검색엔진 비노출 처리와 GTM 설치 및 집계 테스트

2024.01 - 2024.10

찜카 해외항공 서비스 구축

Nuxt.jsVue.jsJavaScriptHTMLCSSREST API

상세 보기

해외항공 신규 서비스의 전체 UI와 회원·비회원 예약 경험을 구현하고 외부 항공 시스템 협력사 연동을 지원했습니다.

KEY IMPACT외부 협력사 연동을 포함한 신규 서비스 오픈

회원·비회원 예약 조회부터 외부 항공 시스템의 토큰 및 데이터 연동까지 조율하며 신규 해외항공 서비스의 사용자 흐름을 구축했습니다.

해외항공 서비스 전체 페이지 UI 구현
로그인 및 회원·비회원 예약 조회 기능과 메인·메뉴 서비스 진입 기능 개발
예약 상태 및 상세 화면을 API 데이터와 연동하고 PC·모바일 UI 대응
외부 항공 시스템 협력사와 토큰 및 개발 스펙 조율
협력사 개발 결과물을 검수하고 UI 수정 지원
항공 예약 이메일 템플릿을 구현하고 브라우저·메일 환경별 UI 이슈 대응

2023.07 - 2023.12

스타렌터카

Next.jsTypeScriptReduxStyled CSS

상세 보기

Next.js 기반 렌터카 웹 서비스의 프론트엔드 개발을 담당했습니다.

KEY IMPACTNext.js 첫 실무 도입부터 서비스 구축까지

React 기반 개발 경험을 바탕으로 Next.js를 처음 학습해 Pages Router 기반 렌터카 서비스를 구축했습니다. Redux도 함께 적용하며 새로운 기술 스택을 실제 프로젝트에 도입했고, 이후 Next.js 기반 서비스 개발을 지속적으로 담당하는 기반을 만들었습니다.

Next.js + TypeScript 기반 웹 서비스 프론트엔드 개발
Redux를 활용한 전역 상태 관리
반응형 UI 및 예약 서비스 화면 구현

2022.04 - 2022.07

부천시 스마트시티 · Hooxi

ReactReact NativeJSPBootstrapFigma

상세 보기

퍼블리셔로서 웹·앱 화면 구현과 디자인 검토 경험을 쌓았습니다.

KEY IMPACT 새로운 기술 스택인 React·React Native 학습 후 1주 만에 실무 투입

입사 당시 React와 React Native 실무 경험이 없었지만 입사 직후 학습해 1주 만에 프로젝트 업무에 투입됐습니다. 이후 React 기반 스마트시티 앱과 React Native 프로젝트의 전체 퍼블리싱을 수행하고 실제 서비스 출시까지 경험했습니다.

부천시 스마트 시티패스 애플리케이션 내 '깨끗한 마을' 전체 퍼블리싱
JSP + Bootstrap 기반 관리자 페이지 전체 퍼블리싱
Hooxi React Native 프로젝트 전체 퍼블리싱
Figma 기반 디자인 및 기획 검토

Tech Stack

Frontend

ReactNext.jsTypeScriptJavaScriptVue.jsNuxt.js

State / UI

JotaiReduxTailwind CSSStyled CSSBootstrap

Infra / Tools

AWS AmplifyAmazon S3JenkinsGitGAGTM

Collaboration

FigmaPhotoshopIllustratorREST API

Journey

EDUCATION · EXPERIENCE · ACTIVITY

1011121314151617181920212223

해외경험

어학연수 · 필리핀

I CAN ACADEMY

오전 8시부터 오후 6시까지 TEPS, TOEFL, 회화 등을 공부했습니다.

2010.10 - 2011.02

고등학교

미림여자고등학교

자율형사립고등학교 · 대한민국 서울

2015.03 (입학) - 2018.02 (졸업)

대학교

한국공학대학교 (구 한국산업기술대학교)

학사

공학계열 · 디자인공학부 미디어디자인공학전공 (주전공)

평점 3.57 / 4.5

2018.03 (입학) - 2022.02 (졸업)

동아리활동

FEEL

드럼

교내 축제 및 행사 공연

2018.03 - 2020.02

교내활동

디자인학부 학생회 D-DAY

홍보부 부원

행사 포스터 제작

2020.03 - 2021.02

교내활동

한국산업기술대학교 온라인 졸업전시회

팀원

웹사이트 기획·디자인·퍼블리싱, SNS 콘텐츠 기획·디자인, 도록 디자인·제작

2021.05 - 2021.11

기타

한국예술종합학교 G'arts

디자이너

‘언어의 정원’ 웹사이트 일부 기획, 웹디자인 및 로고 디자인

2021.07 - 2022.01

교육이수

웹 풀스택 개발자 양성 과정

SK Planet

2022.09 - 2023.03

Additional Information

SPECIALTY & HOBBIES

특기

셀프 네일아트

취미

유튜브 시청컴퓨터 게임강아지 산책요리

LICENSE

자동차 운전면허 2종 보통

등급 미제출

발급기관: 경찰청
등록번호: 11-18-016043-30
취득일: 2018.04.10

About Me

저는 디자인과 서비스 경험을 이해하면서 기술적으로 문제를 해결하는 프론트엔드 개발자입니다. 디자인을 전공한 뒤 퍼블리싱을 거쳐 프론트엔드 개발자로 성장하면서 기획, 디자인, 개발의 각 단계가 실제 서비스에서 어떻게 연결되는지를 경험했습니다.

현재는 여행 플랫폼 찜카에서 React, Next.js, TypeScript를 중심으로 신규 서비스 구축과 기존 Vue/Nuxt.js 서비스의 마이그레이션 및 운영을 담당하고 있습니다. 여러 여행 상품의 서로 다른 예약 데이터를 하나의 경험으로 통합하거나, 회원 상태에 따른 초기 렌더링 문제를 서버 데이터와 상태 Hydration 구조로 해결하는 등 문제의 원인을 구조적으로 파악하고 해결해 왔습니다.

기획서, 디자인, API가 서로 맞지 않는 상황을 단순히 전달받은 범위의 문제로 두지 않습니다. 필요한 데이터 구조를 정리해 백엔드와 협의하고 사용자 경험상 필요한 로딩·인터랙션을 제안하는 등 프로젝트 완성도를 높이기 위해 능동적으로 참여합니다.

특정 프레임워크를 사용하는 개발자에 머무르기보다 서비스의 구조와 사용자 경험을 이해하고, 팀과 함께 더 나은 해결 방법을 만들어낼 수 있는 프론트엔드 개발자로 성장하고자 합니다.

How I Work

구조적으로 문제 해결하기

로그인 상태가 늦게 반영되어 로그아웃 UI가 순간적으로 노출되던 문제를 서버 회원정보 선조회와 Atom Hydration 구조로 개선했습니다. 빠르게 증상만 수정하기보다 렌더링 흐름과 상태 전달 과정을 파악해 근본 원인을 해결합니다.

다음 사람이 수정하기 쉬운 코드

읽기 쉽고 역할이 명확하며 수정 범위와 사이드 이펙트가 적은 코드를 중요하게 생각합니다. 무조건적인 재사용보다 PC·모바일 구조와 변경 가능성을 고려해 통합과 분리를 판단합니다.

직접 만들며 학습하기

새로운 기술은 문서로만 익히지 않고 직접 구현해 봅니다. PWA와 FCM을 적용한 서비스, WebSocket 실시간 채팅, NestJS 인증 API 등을 만들어 기술의 동작 방식과 활용 가능성을 확인했습니다.

AI를 개발 생산성 도구로 활용하기

AI를 단순 코드 생성 도구가 아닌 코드 탐색, 반복 작업, 구현 검토를 위한 개발 도구로 활용합니다. OpenAI Codex를 실제 업무에 적용해 일정을 단축했으며, 생성된 결과는 직접 검토하고 서비스 구조와 요구사항에 맞게 수정합니다.