01 / 04/통신 · B2C · 운영
LG Uplus — 서비스 운영
Vue.js 기반 대기업 통신 서비스 운영 프로젝트 입니다. 홈 가입신청 페이지 리뉴얼, 단통법 폐지 대응 UI 개편, 레거시 코드 유지보수까지 — 사용자 접점이 되는 화면의 비즈니스 로직을 안정적으로 개선했습니다.
Vue.jsNuxtFrontend 운영운영 이슈 대응
사이트 보기 ↗프로젝트 기간
2025.05 —
현재 진행중
역할
Frontend
5명 규모 팀(자사 내)
프로젝트 개요
Vue.js 기반의 LG Uplus 통신 서비스 환경에서 공통 컴포넌트와 기존 구조를 유지하며, 서비스 안정성을 최우선으로 두고 정책 변경 및 UI 개편에 따른 기능 개발과 운영 이슈를 대응했습니다. 홈 가입신청 페이지, 마이페이지 등 사용자 접점이 높은 화면을 중심으로 UI와 비즈니스 로직을 점진적으로 개선했습니다.
주요 작업 상세
1
UI 개편(팝업 → Select Box)으로 변경된 API 응답 구조를 분석, 기존 수정·삭제 로직을 재사용할 수 있도록 데이터 구조를 설계하여 신규 UI에 적용
이슈
- 홈 가입 페이지 전면 개편으로 UI(팝업 → Select Box)와 API 응답 구조가 동시에 변경됨
- 기존 삭제·수정 로직을 변경할 경우, 관련된 여러 기능에 영향이 커 재사용이 어려운 상황 발생
해결
- API 응답을 공통 데이터 형태로 한 번 가공하는 레이어를 두고, Select·수정·삭제 컴포넌트가 동일한 구조를 사용하도록 개선
- UI가 변경되더라도 데이터 처리 로직을 다시 작성할 필요가 없도록 했고, 기존 수정·삭제 로직은 인터페이스를 유지한 채 참조 데이터만 새 모델 기준으로 교체해 재사용
2
가입 플로우 내 2~3개 컴포넌트에 분산된 ValidationObserver 호출 로직을 ref기반 공통 함수로 통합 → 가입 완료 시점의 유효성 검사를 한곳에서 제어, 이후 validation 추가 및 수정시 변경 지점 1곳으로 축소
이슈
- 가입 플로우 내 각 컴포넌트에서 Validation 로직이 개별적으로 처리되고 있었고, 인풋 하단 에러 메시지 방식으로 UX가 구성되어 있어 가입 완료 시 전체 유효성 검사를 한 번에 제어하기 어려운 구조.
- 이로 인해 검증 누락 가능성이 있었고, validation 변경 시 여러 컴포넌트를 함께 수정해야 하는 문제가 있었음.
해결
- 알럿 기반 UX로 변경되면서, ref를 활용해 전체 validation을 한 번에 실행하는 공통 함수를 구성. 이를 통해 가입 완료 시점의 유효성 검사를 단일 진입점에서 제어하도록 개선
- 이후 validation 정책이나 UX 변경도 해당 함수 한 곳만 수정하면 반영되도록 구조를 단순화
3
신규 서비스 출시 전 예외 케이스 사전 발견 및 스펙 재설계 제안
구현
- 가입 플로우 전반을 검토하여 기획 단계에서 누락된 예외 케이스 발견
- 기획서 수정 및 API 스펙 재설계 제안으로 출시 후 오류 사전 차단
Next Project
한양대학교 인터칼리지 - 신규 구축