Vue Commerce Platform 신세계프라퍼티
Starfield Mall
Vue 서비스 운영·마이그레이션·신규 구축
스타필드 모바일 서비스를 운영하면서 Vue 3로 전환하고 수원·애비뉴 그랑서울·빌리지 운정 사이트를 구축했습니다.
- 기간
- 다름 2020.05–2021.06 · 플립 2022.08–현재
- 역할
- Frontend Developer · 운영·리뉴얼·신규 구축
Starfield MallVue Service Operations & Migration
At a glance
프로젝트 요약
다름에서 운영하던 서비스를 플립커뮤니케이션즈 입사 후 다시 맡았습니다. 기존 서비스의 리뉴얼과 새 지점 사이트 구축도 함께 진행했습니다.
- 클라이언트
- 신세계프라퍼티
- 기간
- 다름 2020.05–2021.06 · 플립 2022.08–현재
- 담당
- Frontend Developer · 운영·리뉴얼·신규 구축
- 기술
- Vue 2·3, TypeScript, Vite, Vuex, Pinia, REST API
Problem
필요했던 작업
Vue 2 서비스를 운영하면서 Vue 3로 옮기고 새 지점의 사이트도 만들어야 했습니다.
Ownership
맡은 일
로그인과 이벤트 화면을 수정하고 운영 오류에 대응했습니다. Vue 2→3, Vuex→Pinia 전환과 웹 측 브리지 연동도 맡았습니다.
Decision
구현 방법
기능별로 코드를 옮기면서 기존 동작을 확인했습니다. Vuex mutations를 제거하고 Pinia store/action에서 상태를 바꾸도록 수정했습니다.
Outcome
작업 결과
Vue 3·TypeScript·Vite로 수원(2023.10–2024.01), 애비뉴 그랑서울(2025.07–2025.10), 빌리지 운정(2025.09–2025.12)을 구축했습니다.
01 · Problem
프로젝트 배경
2020.05–2021.06에는 다름 소속으로 신세계프라퍼티·플립커뮤니케이션즈·다름이 함께 진행한 스타필드 운영에 참여했습니다. 플립커뮤니케이션즈 입사 후 2022.08부터 같은 서비스를 다시 맡고 있습니다.
Vue 2 모바일 서비스의 로그인과 이벤트 화면을 수정했습니다. UI를 개선하고 운영 중 발생한 오류에도 대응했습니다.
2025.10–2025.12 리뉴얼 때 Vue 2를 Vue 3·TypeScript·Vite로 옮기고 상태 관리를 Vuex에서 Pinia로 바꿨습니다.
스타필드 수원(2023.10–2024.01), 스타필드 애비뉴 그랑서울(2025.07–2025.10), 스타필드 빌리지 운정(2025.09–2025.12)은 Vue 3·TypeScript·Vite로 구축했습니다.
외부 데이터는 클라이언트에서 직접 호출하지 않고 백엔드 REST API로 받았습니다. 앱 개발자가 제공한 네이티브 인터페이스에 맞춰 웹 측 호출과 응답을 연결했습니다.
02 · Ownership
맡은 역할
Frontend Developer · 운영·리뉴얼·신규 구축
- 다름 소속 운영 참여(2020.05–2021.06), 플립 소속 재담당(2022.08–현재)
- 모바일 서비스의 로그인·이벤트 화면 수정과 운영 오류 대응
- 2025.10–2025.12 Vue 2→3 마이그레이션과 Vuex→Pinia 전환
- 수원 2023.10–2024.01 · 애비뉴 그랑서울 2025.07–2025.10 · 빌리지 운정 2025.09–2025.12 구축
- 백엔드 REST API 연동과 공통 컴포넌트 개발
- 네이티브 인터페이스에 맞춘 웹 브리지 호출·응답 처리
03 · Decisions
구현 방식
Vuex에서 Pinia로 상태 관리 변경
Vuex의 mutations를 제거했습니다. 상태를 바꾸는 코드는 Pinia store/action으로 옮겨 변경 경로를 확인할 수 있게 했습니다.
기능별로 나눠 Vue 3 전환
각 기능의 기존 동작을 확인한 뒤 화면과 상태 관리 코드를 나눠 옮겼습니다. 바꾼 코드가 다른 기능에 미치는 영향도 함께 살폈습니다.
웹 측 브리지 호출과 응답 구현
네이티브 개발자가 제공한 인터페이스에 맞춰 웹 화면의 호출과 응답 처리를 연결했습니다. 네이티브 코드 개발은 담당 범위가 아니었습니다.
04 · Evidence
작업 내역
이 프로젝트에서 수정하거나 새로 만든 기능입니다.
주요 작업
- 운영 중인 Vue 2 코드와 데이터 확인
- 로그인 기능, 월 단위 이벤트, UI 개선과 운영 오류 대응
- 2025.10–2025.12 Vue 3 마이그레이션과 Vuex→Pinia 상태 관리 전환
- 수원·애비뉴 그랑서울·빌리지 운정의 Vue 3 화면과 기능 구축
- 백엔드 REST API 응답 데이터를 화면에 표시
- 네이티브 인터페이스에 맞춘 웹 측 호출·응답 처리
- 반복되는 UI를 공통 컴포넌트로 분리하고 기존 코드 리팩터링
05 · Outcome
작업 결과
- Vue 2 모바일 서비스를 Vue 3·TypeScript·Vite로 전환
- Vuex mutations를 제거하고 Pinia store/action으로 상태 관리 변경
- 수원·애비뉴 그랑서울·빌리지 운정 신규 사이트 구축
- 백엔드 REST API 연동과 웹 브리지 호출·응답 구현
06 · Screens
주요 화면
화면을 누르면 크게 볼 수 있습니다.
07 · Workflow
작업 순서
보통 다음 순서로 작업합니다.
요청 내용 확인
기획서와 디자인을 읽고 바꿀 내용을 확인합니다. 운영 중인 서비스는 기존 코드도 함께 살펴봅니다.
화면과 데이터 확인
여러 화면에서 쓸 컴포넌트와 페이지별 상태를 구분합니다. 필요한 API와 예외 처리도 이때 확인합니다.
기능 개발
프로젝트의 코드 작성 방식과 API 규격에 맞춰 화면과 기능을 만듭니다.
동작 확인
화면 크기와 입력 상태를 바꾸며 동작을 확인합니다. QA에서 발견한 문제와 운영 중 받은 피드백을 반영합니다.