공통 컴포넌트 설계 및 개발 표준 정비

• 모달·팝업·입력 폼 등 공통 UI 컴포넌트를 설계하고 국민지갑 내 28개 서비스에 적용·운영했습니다.
• props·slot·emit 사용 규칙을 정의하고, 서비스별 요구사항을 옵션과 슬롯 구성으로 반영할 수 있도록 재사용 구조를 정비했습니다.
• Vuetify 컴포넌트를 KB 디자인 가이드에 맞게 래핑해 화면 간 스타일과 동작을 일관되게 유지했습니다.
• 팝업 호출·상태 관리와 입력 폼의 유효성 검사·에러 메시지 처리를 공통화해 화면별 중복 로직을 줄였습니다.
• 포커스 이동·키보드 조작·스크린리더 대응을 공통 컴포넌트에 반영하고, 사용 가이드를 문서화해 신규 투입 인력이 동일한 기준으로 개발하도록 지원했습니다.

성과공통 컴포넌트 재사용을 통해 신규 화면 개발 공수를 1MM에서 0.5MM으로 약 50% 절감했습니다.

국민지갑 메인 UI 개편

• 기획·디자인 담당자와 메인 화면 구조 및 서비스 노출 우선순위를 협의하고 UI 개편을 주도했습니다.
• 진입 시 일괄 호출하던 서비스별 API를 영역 단위로 분리하고, 초기 화면에 필요한 영역을 우선 조회하도록 변경했습니다.
• 서비스 카드·배너 등 메인 구성 요소를 공통 컴포넌트로 분리해 신규 서비스 영역을 추가하기 쉬운 구조로 정비했습니다.
• 스켈레톤 UI를 적용해 데이터 로딩 중에도 화면 구조가 유지되도록 개선했습니다.

성과초기 진입 시 불필요한 API 호출과 렌더링 부담을 줄이고, 메인 화면 구성 요소의 재사용성을 높였습니다.

KB 계열사 SSO 인증 연계

• 국민지갑의 첫 계열사 SSO 연계인 KB Pay 연동을 담당하고, 계열사 담당자와 인증 흐름 및 앱·웹 인터페이스를 협의했습니다.
• 계열사 제공 스크립트로 앱 기능을 호출하고, 앱에서 전달받은 로그인 토큰을 KB 표준 SSO 인증 흐름에 연계하는 프론트엔드 로직을 구현했습니다.
• KB Pay 연계 시 정립한 방식을 바탕으로 리브똑똑, KB손해보험, KB증권 M-able, KB키위뱅킹, 리브넥스트까지 연계를 확장했습니다.
• 계열사별 컨트롤러를 구성해 서로 다른 네이티브 연동 코드를 분리하고, 각 앱에서 제공하는 기능을 정리했습니다.
• 파일 첨부·카메라 및 사진 접근·새 창 열기 등 하이브리드 웹앱 구동에 필요한 앱 설정 항목을 적용 가이드로 문서화했습니다.

성과KB 계열사 앱 6종에 국민지갑 SSO 로그인을 연계하고, 후속 연계에 재사용할 수 있는 컨트롤러 구조와 적용 절차를 마련했습니다.

GLN 해외결제 UI/UX 개선 및 결제 로직 리팩토링

• CPM·MPM 분기와 QR 팝업 중심으로 구성된 복잡한 결제 흐름을 개선했습니다.
• 결제 방식 선택을 스위치 UI로 통합하고, 선택 상태에 따라 화면과 결제 흐름을 제어하도록 리팩토링했습니다.
• QR 팝업을 메인 페이지 내 컴포넌트로 통합해 렌더링 계층을 단순화하고, 카드형 UI를 공통 컴포넌트로 구성했습니다.
• QR 스캔·코드 추출·백엔드 전달·응답 데이터 가공·결제 결과 반영으로 이어지는 프론트엔드 처리 흐름을 정리했습니다.
• 잔액 부족 시 충전 절차로 연결되도록 결제 흐름을 개선하고, 불필요한 중복 호출과 예외 처리 구조를 정비했습니다.

성과개편 전후 비교 결과, 결제 화면 페이지 이탈률이 약 15% 감소했습니다. (넷스루 DataStory 집계)

기차예매 선물하기 기능 개발

• KTX·SRT 승차권을 예매하는 국민지갑 기차예매 서비스에 선물하기 기능을 개발했습니다.
• 기존 비회원 구매 기반의 예매 구조를 확장하기 위해 국민지갑 고유 식별자(ID)로 승차권을 매핑하는 연계 방식을 설계했습니다.
• 승차권 매핑 방식을 프론트엔드·백엔드 인터페이스에 반영하고, 선물하기 화면과 프론트엔드 로직을 구현했습니다.
• 고객 피드백을 반영해 선물하기 UI/UX와 기능 요구사항을 조율했습니다.

성과선물하기 기능 도입 후 승차권 페이지의 사용자 유입률이 기존 대비 약 20% 늘었습니다.

Vue 3 마이그레이션 진행 중

• Vue 2.6 기반 서비스를 Vue 3.5, Vuex 4, Vue Router 4, Vuetify 3, Vite 환경으로 전환하고 있습니다.
• Webpack 4에서 Vite로 빌드 환경을 전환하고 애플리케이션 구동을 확인했습니다.
• 기존 vue-class-component 기반 컴포넌트를 vue-facing-decorator 기반 클래스 문법으로 전환하고 있습니다.
• 마이그레이션 도구의 처리 과정을 분석·사전 점검(dry run)·변환·검증 단계로 나누고, 단계별 리포트를 남기도록 설계했습니다.

협업 및 운영

• 주간 스크럼과 고객사 협의를 통해 요구사항 및 개발 우선순위를 조율했습니다.
• 운영 중 발견한 중복 코드와 복잡한 서비스 로직을 지속적으로 리팩토링했습니다.