미리보기

관리자 시스템 및 이커머스 사이트의 프론트엔드 개발을 담당하였습니다.

PpbStudios 관리자 시스템 번들 사이즈 최적화로 초기 로딩 속도 75% 개선

• 관리자 시스템 프로젝트가 이커머스 사이트 프로젝트와 결합되어 있어 불필요하게 매우 큰 번들 사이즈(20MB)가 발생하여 초기 로딩 속도가 매우 느려 사용자 경험을 저하시키는 문제가 있었습니다.

• 두 프로젝트의 코드베이스를 분리하고 각 시스템에 필요한 컴포넌트와 기능만 포함하도록 리팩토링했습니다.

• Tree-shaking, 코드 스플리팅, 레이지 로딩 등의 최적화 기법을 적용하고 불필요한 컴포넌트와 라이브러리 임포트를 제거하여 번들 사이즈를 5MB로 75% 감소시켰습니다.

• 패키지 매니저를 npm에서 pnpm으로 마이그레이션하여 의존성 관리 효율화와 함께 빌드 시간을 40초 단축했습니다.

레거시 시스템 현대화를 위한 PpbStudios 관리자 시스템 Nuxt3 마이그레이션 주도

• 기존 Vue2 기반 관리자 시스템이 기술 부채 누적과 확장성 제한으로 신규 기능 개발 속도가 저하되는 문제가 있었습니다.

• Nuxt3, TypeScript, Composition API 기반의 아키텍처로 전환하는 마이그레이션 계획을 수립하고 팀을 리드하여 성공적으로 완료했습니다.

• Options API에서 Composition API로 전환하며 비즈니스 로직을 재사용 가능한 컴포저블 함수로 분리하여 코드 구조를 개선했습니다.

• 점진적 마이그레이션 전략을 수립하여 서비스 중단 없이 핵심 기능부터 단계적으로 전환하고, 기존 기능의 안정성을 유지했습니다.

• 마이그레이션을 통해 코드베이스 감소, 페이지 로딩 시간 개선 등 가시적인 성과를 달성했습니다.

멤버십 시스템 운영을 위한 관리자 플랫폼 신규 개발

• 기존에 존재하지 않던 멤버십 시스템의, 효율적인 운영 및 관리를 위한 전용 관리자 플랫폼 신규 개발이 필요했습니다.

• Vue3, TypeScript, Vite 기반으로 멤버십 데이터 관리, 회원 정보 조회, 혜택 설정, 통계 분석 등의 핵심 기능을 구현했습니다.

• Composition API와 Pinia를 활용하여 비즈니스 로직과 UI를 명확히 분리함으로써 향후 기능 확장과 유지보수가 용이한 구조를 확립했습니다.

이커머스 사이트 무한스크롤 최적화 및 속도개선

• 이커머스 사이트의 상품 목록 페이지에서 무한스크롤 사용 시 DOM 요소가 계속 늘어남에 따라 메모리 사용량 증가와 렌더링 성능 저하 현상이 발생했습니다.

• Vue Virtual Scroller 라이브러리를 도입하여 가상 스크롤링 방식으로 전환하고, 사용자 뷰포트에 보이는 영역의 요소만 실제로 렌더링되도록 개선하였습니다.

실시간 스마트팜 장비제어, 센서 데이터 시각화 및 모니터링 대시보드 구축

• 농가에서 발생하는 방대한 양의 센서 데이터를 의미 있는 정보로 변환하고 직관적으로 표현해야 하는 과제가 있었습니다.

• MQTT 프로토콜을 활용하여 온도, 습도, 조도, 풍량 등 다양한 환경 데이터를 실시간으로 수집하여 농작물 생육 환경을 종합적으로 모니터링할 수 있는 대시보드를 개발했습니다.

• 센서 데이터 모니터링과 연계하여 장비(관수, 환기, 조명 등)를 원격으로 제어할 수 있는 인터페이스를 개발했습니다.

• Vue.js 기반 사용자 인터페이스 개선 및 신규기능을 구현하였습니다.

• Spring Framework 기반 RESTful API 설계 및 구현하였습니다.

2017년 부산에서 열리는 지방기능경기대회 웹 디자인 및 개발 기능부문에 참여하여 은상을 수상하였습니다.

2016년 부산에서 열리는 지방기능경기대회 웹 디자인 및 개발 기능부문에 참여하여 동상을 수상하였습니다.