안녕하세요, 기술 전환과 시스템 혁신을 주도하는 프론트엔드 개발자
박혜원입니다.
3개월간 Vue에서 React로의 대규모 마이그레이션 프로젝트를
성공적으로 완수하며, 단순한 기술 전환을 넘어 전체 시스템의 성능
최적화와 코드 안정성 향상을 이끌어냈습니다. 이 과정에서 클린
아키텍처를 참고한 FSD 구조 정립, React-Query와 Zustand를 활용한
상태 관리 개선, 그리고 팀 내 코드 컨벤션 수립을 통해 유지보수성을
크게 향상시켰습니다.
특히 기존 Vue 기반 랭킹 추적 기능을 React 환경에서 재설계하면서, 비동기 흐름과 데이터 정합성 문제를 해결하고 animate.css를 활용해 기존 사용자 경험을 100% 재현했습니다. 이러한 경험을 통해 기술적 변화를 사용자 경험의 개선으로 연결시키는 능력을 기를 수 있었습니다.
특히 기존 Vue 기반 랭킹 추적 기능을 React 환경에서 재설계하면서, 비동기 흐름과 데이터 정합성 문제를 해결하고 animate.css를 활용해 기존 사용자 경험을 100% 재현했습니다. 이러한 경험을 통해 기술적 변화를 사용자 경험의 개선으로 연결시키는 능력을 기를 수 있었습니다.
010-7228-3662
ph.1dnjs@gmail.com
2004.06.14
기술 스킬
FrontEnd
HTML5
SCSS
JavaScript(ES6)
TypeScript
Vue.js
React
TanStack-Query
Zustand
Flutter
Dart
BackEnd
DBeaver
Postman
DevOps
Git
GitHub Actions
Collaboration
Figma
Swagger
Notion
Slack
Jira
Linear
경력
(주) 문리버
2022.08 - 2025.03
아이템스카우트 프론트엔드 개발자
Vue to React 마이그레이션 및 랭킹 기능 재구축
Vue 차트 vue-echarts로 리팩토링 및 필터/다운로드 기능 추가
백오피스 개발, FCM 알림, IndexedDB 검색 이력 관리 구현
NDA 프로젝트 모바일 프론트엔드 개발
카카오 로그인 연동, 로그인 토큰 관리
지도 조작 및 커스텀 마커 구현
다양한 스크롤 레이아웃 개발
스크린 구조화, 컴포넌트 관리
프로젝트
Vue.js 기반 아이템스카우트 웹 서비스를 React로 마이그레이션
약 3개월
기존 Vue 코드베이스는 컴포넌트 간 의존도가 높고 재사용성이 낮아
유지보수가 어려웠습니다. 신규 기능 도입 시에도 구조적 한계로 인해
기술적 부채가 누적되고 있었습니다.
React로 마이그레이션하면서 클린 아키텍처를 참고한 FSD 구조를
정립하고, 공통 UI 컴포넌트를 shadcn/ui, clsx, tailwind-merge
기반으로 설계해 일관된 디자인 시스템을 구축했습니다.
팀 내 코드 컨벤션이 확립되면서 신규 기능 개발 속도가 향상됐고,
구조적 일관성 덕분에 신규 인원의 온보딩 속도도 크게
단축되었습니다. 마이그레이션을 통해 페이지 로딩 속도와 렌더링
효율도 눈에 띄게 개선되었습니다.
React
React-Query
Zustand
shadcn/ui
clsx
tailwind-merge
Vue 기반 키워드 상세 페이지 차트 영역 전면 리팩토링
약 2주
기존 차트 기능은 DOM 조작에 의존해 비효율적이며, 사용자 요청이
증가하면서 렌더링 지연 및 기능 오류가 빈번히 발생했습니다.
vue-echarts를 도입해 클라이언트 렌더링 로직을 개선하고, 데이터
가공·표현을 명확히 분리하였습니다. 필터링, 엑셀/이미지 다운로드 등
실사용자 니즈 기반 기능을 추가했습니다.
기능 확장성과 UX가 크게 향상되었으며, 대량 데이터를 다룰 때도
안정적인 퍼포먼스를 유지해 사용자 만족도가 증가했습니다.
Vue
vue-echarts
운영자 전용 백오피스 시스템 전체 프론트엔드 설계 및 구현
약 1주
운영자가 사용하는 관리자 기능이 산재돼 있고, 기존 UI가 일관성이
없으며 접근성이 떨어졌습니다.
/admin 라우트를 기반으로 로그인, 권한 검증 등 인증 흐름을 새로
설계하고, 2:8 투 콜럼 UI로 정보 집중도를 높였습니다. 테마 적용과
공통 컴포넌트 기반 설계를 병행했습니다.
운영자의 업무 효율이 개선됐고, 신규 기능 추가 시에도 기존 구조를
그대로 활용할 수 있어 생산성이 높아졌습니다. 다양한 브라우저에서
일관된 동작을 보장해 QA 기간도 단축되었습니다.
React
Zustand
Tailwind CSS
shadcn/ui
FCM 기반 알림 기능 구현
약 2주
웹 알림 기능이 없거나 수동 메시지로 대체되며 사용자 참여 유도가
부족했습니다.
Firebase Cloud Messaging을 도입해 사용자별 웹 푸시 토큰을
관리하고, 실시간 알림 UI를 구현했습니다.
주요 이벤트 발생 시 즉시 알림이 가능해졌고, 사용자 반응률이
향상되었습니다. 알림 설정 기능으로 불필요한 알림을 제어할 수 있어
사용자 만족도도 향상되었습니다.
Vue
Firebase Cloude Messaging
실시간 랭킹 추적 페이지 구현
약 2주
유저가 등록한 키워드에 대한 랭킹을 수동으로 조회해야 했고, 최근
검색 내역이 저장되지 않아 반복 입력의 번거로움이 있었습니다.
키워드 기반으로 실시간 랭킹을 자동 조회하는 기능을 설계하고,
idb-keyval을 활용해 IndexedDB에 최근 검색 기록을 저장하도록
구현했습니다.
UX가 향상되어 사용자 이탈률이 줄었고, 반복 검색 시 평균 30% 이상
빠른 응답 속도를 기록했습니다.
Vue
idb-keyval
박리다매 무인가게 | 사이드 프로젝트
2022.02 ~ 2022.06
무인 매장에서 키오스크 기기가 없어도 웹과 모바일 바코드 스캐너로
사용자가 키오스크의 기능을 이용할 수 있는 서비스를 개발했습니다.
키오스크 웹을 React 기반으로 개발하면서 useRef를 활용해 DOM을
유연하게 제어하고, 상태 관리에 집중했습니다. 앱은 ML Kit과
CameraX로 바코드 인식 기능을 구현했습니다.
웹-앱 연동과 테스트 자동화 환경을 구축하며 전체 시스템 아키텍처를
주도했고, UX 측면에서도 사용자 친화적인 흐름을 설계하는 경험을
얻었습니다.
React
Kotlin
ML Kit
CameraX
Java
AWT
Swing
DSMS | 사이드 프로젝트
2021.10 ~ 2021.11
중소 매장을 운영하는 사용자들이 복잡한 매출 데이터를 쉽게 시각화할
수 있도록 돕기 위해 Java 기반 데스크탑 앱을 개발했습니다.
Java의 Graphics API를 사용하여 매출 데이터를 직관적으로 보여주는
그래프 UI를 구현하고, 월/주 단위의 필터링 기능을 제공했습니다.
비개발자 사용자도 쉽게 이해할 수 있는 시각화 결과물을 제공하며,
피드백을 통해 UI 개선과 코드 구조화에 대한 경험을 쌓았습니다.
Java
AWT
Swing
활동
2024 Songdo Devfest
24.12.21
소프트웨어 개발 원칙(DRY, KISS), 문제 해결 기법(Fishbone Diagram),
컴포넌트 설계 패턴 등 다양한 세션을 수강하며 실무 관점을
넓혔습니다.
코드 단순화, 구조적 문제 정의, 재사용 가능한 UI 설계에 대한
인사이트를 얻고 실무 적용 방향을 고민하게 된 계기였습니다.
항해99 플러스
25.03 ~ 25.06
프론트엔드 5기
JS & React 딥다이브, 클린 코드, 테스트 코드, 성능 최적화에 대해
학습하고 다양한 개발자들과의 경험을 공유할 수 있었습니다.
교육 & 수상내역
미림여자정보과학고등학교
20.03 ~ 23.02
뉴미디어 소프트웨어과
STAC 2021 생활정보부문
21.04 ~ 21.10
우수상
단체 여행 시 안전관리와 소통이 보다 쉬워지도록 지도를 통한 위치 공유,
일정 공유 등의 서비스를 제공하는 APP 기획