01 WOORI Financial Capital
프로젝트 배경
모바일 인수증 시스템 구축은 중고차나 렌터카 인수 과정에서 발생하던 복잡하고 아날로그적인 절차를 디지털로 전환하기 위한 프로젝트였습니다. 기존에는 고객이 종이 인수증을 수기로 작성하고, 이를 사진으로 촬영하거나 스캔해 지점에 전달해야 했고, 이 과정에서 이미지 누락, 전달 지연, 시스템 반영 지연 등 다양한 문제가 반복적으로 발생했습니다.
저는 이러한 비효율을 해결하기 위해 모바일 기반에서 누구나 쉽게 인수 절차를 완료할 수 있는 사용자 흐름을 재정의하고, UX 기획부터 UI 디자인, 퍼블리싱까지 전체 설계를 단독으로 담당했습니다. 특히 연령대가 높은 사용자도 무리 없이 사용할 수 있도록 터치 간격, 텍스트 가독성, 안내 문구 등 모바일 환경에 최적화된 UI 요소들을 정교하게 설계했고, 인증 후 전산 연동까지 이어지는 흐름을 구현해 고객 편의성과 내부 업무 효율을 동시에 개선할 수 있었습니다.
ux strategy
디지털 인수증 도입 프로젝트를 위한 UX 전략을 세웠습니다.
☑️ 문제 정의 및 목표
•
실물 인수증을 디지털화하여 고객이 모바일에서 직접 인증 및 서명할 수 있도록 개선
•
인증된 데이터와 이미지를 전산 시스템에 자동 업로드
•
지점 담당자가 별도 수기로 확인하지 않아도 간편하게 확정 처리 가능
•
렌트상품 실행까지 소요 시간을 평균 1~3일 단축, 수익 조기 인식 가능
✓
고객 만족도 향상뿐 아니라, 내부 업무 효율화와 계약 실행 속도 개선이라는 전사적 이익 실현이 목표였습니다.
• 인증된 데이터와 이미지를 전산 시스템에 자동 업로드
• 지점 담당자가 별도 수기로 확인하지 않아도 간편하게 확정 처리 가능
• 렌트상품 실행까지 소요 시간을 평균 1~3일 단축, 수익 조기 인식 가능
✓ 고객 만족도 향상뿐 아니라, 내부 업무 효율화와 계약 실행 속도 개선이라는 전사적 이익 실현이 목표였습니다.
As-is
사용자의 관점
서면 작성으로 시간 소요
작성 과정시 오류발생 가능성 높음
이용을 위해 지점을 방문해야 하는 번거로움
to-be
사용자의 관점
모바일로 간편하고 빠르게 작성 가능
실시간 확인으로 오류 최소화
지점 방문 없이 어디서든 서비스 이용 가능
As-is
지점/업무 관점
수작업 처리로 업무 비효율
데이터 관리와 추적이 어려움
업무 속도가 느려 고객 대기 시간 증가
to-be
지점/업무 관점
디지털화로 업무 간소화 및 효율 증가
자동 기록으로 데이터 관리 용이
처리 속도 향상으로 고객 만족도 상승
☑️ 주요 업무 및 기여
사용자 흐름 재정립
고객, 딜러, 내부 직원 등 다양한 이해관계자의 사용 시나리오를 분석하고, 모바일 인증 → 정보 확인 → 전산 연동 → 확정 처리까지 자연스럽게 이어지는 흐름으로 UX를 재설계했습니다. 기존에는 사용자마다 다른 경로로 정보를 전달받아 혼선이 있었던 반면, 본 프로젝트에서는 각 역할별 행동 동선을 명확히 정의하고, 이를 UX 흐름에 구조적으로 반영했습니다.
UI/UX 설계
20~60대 다양한 연령층이 사용하는 만큼, 복잡한 오프라인 문서를 단순하고 직관적인 모바일 인터페이스로 변환하는 데 중점을 두었습니다. 특히 디지털 환경에 익숙하지 않은 중장년층 사용자도 무리 없이 사용할 수 있도록, 터치 영역, 안내 문구, 설명 순서를 세심하게 조정했습니다.
•
폰트 크기, 색상 대비, 버튼 간격 등 가독성과 접근성 고려
•
스텝 인디케이터 도입 → 단계별 흐름을 명확히 인지할 수 있도록 구성
•
지점 담당자가 별도 수기로 확인하지 않아도 간편하게 확정 처리 가능
•
체크박스 기반 더블체크 UX → 중요한 사항을 반복 확인할 수 있도록 설계
✓
고객 만족도 향상뿐 아니라, 내부 업무 효율화와 계약 실행 속도 개선이라는 전사적 이익 실현이 목표였습니다.
• 인증된 데이터와 이미지를 전산 시스템에 자동 업로드
• 지점 담당자가 별도 수기로 확인하지 않아도 간편하게 확정 처리 가능
• 렌트상품 실행까지 소요 시간을 평균 1~3일 단축, 수익 조기 인식 가능
✓ 고객 만족도 향상뿐 아니라, 내부 업무 효율화와 계약 실행 속도 개선이라는 전사적 이익 실현이 목표였습니다.
퍼블리싱 및 구현
디자인 제작뿐 아니라 HTML/CSS 퍼블리싱을 직접 수행하여, 기획 의도와 실제 구현 결과물 간의 완성도와 일관성을 확보했습니다
•
기존 시스템 구조 분석 후, 기존 클래스와 충돌이 없도록 네이밍 전략 수립
•
사내 디자인 시스템과 공통 컴포넌트를 활용
•
Aria-label, role 등 웹 접근성 고려, 모바일 기기별 반응형 레이아웃 구현
•
체크박스 기반 더블체크 UX → 중요한 사항을 반복 확인할 수 있도록 설계
✓
고객 만족도 향상뿐 아니라, 내부 업무 효율화와 계약 실행 속도 개선이라는 전사적 이익 실현이 목표였습니다.
• 인증된 데이터와 이미지를 전산 시스템에 자동 업로드
• 지점 담당자가 별도 수기로 확인하지 않아도 간편하게 확정 처리 가능
• 렌트상품 실행까지 소요 시간을 평균 1~3일 단축, 수익 조기 인식 가능
✓ 고객 만족도 향상뿐 아니라, 내부 업무 효율화와 계약 실행 속도 개선이라는 전사적 이익 실현이 목표였습니다.
As-is
지점/업무 관점
수작업 처리로 업무 비효율
데이터 관리와 추적이 어려움
업무 속도가 느려 고객 대기 시간 증가
to-be
지점/업무 관점
디지털화로 업무 간소화 및 효율 증가
자동 기록으로 데이터 관리 용이
처리 속도 향상으로 고객 만족도 상승
ux concept
UX 전략과 사용자들의 연령대를 고려하여 누구나 사용하기 쉽고 편리하게 구성했습니다.
① 신속하고 직관적인
디지털 인터페이스
종이 인수증을 디지털화하여 빠르고 간편하게 작성 및 처리 가능.
② 단계별 진행 상태 표시
사용자가 작성 과정을 명확히 인지할 수 있도록 직관적인 단계 표시
③ 모바일 최적화
디지털화된 인수증을 어디서나 작성 및 제출 가능하도록 반응형 UI 제공
Design System
기존 디자인 가이드 시스템을 활용하여 UI를 제작함으로써 디자인의 일관성을 유지하고, 사용자가 익숙한 경험을 제공할 수 있도록 하였으며, 개발과의 협업을 원활하게 진행할 수 있도록 하였습니다
TYPOGRAPHY
우리금융캐피탈
디자인 가이드
확인해보기
Light
Regular
Blod
KR
Noto Sans KR
가독성과 전달력이 뛰어난 노토산스는 우리금융캐피탈의 기본 한글 서체입니다.
EN
Roboto
로보토는 구글 공식 서체로 다양한 환경에서 최적화된
우리금융캐피탈의 영문 기본 서체입니다.
color System
#1056C3
#D0E9FC
Primary
Gray scales
#1490EF
#1056C3
#D0E9FC
Gray scales
color System
Primary
#1490EF
#1056C3
#D0E9FC
#1056C3
Gray scales
#D0E9FC
Gray scales
ux concept
UX 전략과 사용자들의 연령대를 고려하여 누구나 사용하기 쉽고 편리하게 구성했습니다.
① 신속하고 직관적인
디지털 인터페이스
종이 인수증을 디지털화하여 빠르고 간편하게 작성 및 처리 가능.
② 단계별 진행 상태 표시
사용자가 작성 과정을 명확히 인지할 수 있도록 직관적인 단계 표시
③ 모바일 최적화
디지털화된 인수증을 어디서나 작성 및 제출 가능하도록 반응형 UI 제공
ux strategy
디지털 인수증 도입 프로젝트를 위한 UX 전략을 세웠습니다.
As-is
TO-BE
사용자의 관점
사용자의 관점
서면 작성으로 시간 소요
모바일로 간편하고 빠르게 작성 가능
작성 과정시 오류발생 가능성 높음
실시간 확인으로 오류 최소화
서비스 이용을 위해 지점을 방문해야 하는 번거로움
지점 방문 없이 어디서든 서비스 이용 가능
지점/업무 관점
지점/업무 관점
수작업 처리로 업무 비효율
디지털화로 업무 간소화 및 효율 증가
데이터 관리와 추적이 어려움
자동 기록으로 데이터 관리 용이
업무 속도가 느려 고객 대기 시간 증가
처리 속도 향상으로 고객 만족도 상승
ux strategy
디지털 인수증 도입 프로젝트를 위한 UX 전략을 세웠습니다.
UX Strategy
모바일 인수증 도입 프로젝트를 위한 UX 전략을 세웠습니다.
☑️ 문제 정의 및 목표
• 실물 인수증을 디지털화하여 고객이 모바일에서 직접 인증 및 서명할 수 있도록 개선
• 인증된 데이터와 이미지를 전산 시스템에 자동 업로드
• 지점 담당자가 별도 수기로 확인하지 않아도 간편하게 확정 처리 가능
• 렌트상품 실행까지 소요 시간을 평균 1~3일 단축, 수익 조기 인식 가능
✓ 고객 만족도 향상뿐 아니라, 내부 업무 효율화와 계약 실행 속도 개선이라는 전사적 이익 실현이 목표였습니다.
As-is
TO-BE
사용자의 관점
사용자의 관점
서면 작성으로 시간 소요
모바일로 간편하고 빠르게 작성 가능
작성 과정시 오류발생 가능성 높음
실시간 확인으로 오류 최소화
서비스 이용을 위해 지점 방문해야 하는 번거로움
지점 방문 없이 어디서든 서비스 이용 가능
지점/업무 관점
지점/업무 관점
수작업 처리로 업무 비효율
디지털화로 업무 간소화 및 효율 증가
데이터 관리와 추적이 어려움
자동 기록으로 데이터 관리 용이
업무 속도가 느려 고객 대기 시간 증가
처리 속도 향상으로 고객 만족도 상승
☑️ 주요 업무 및 기여
사용자 흐름 재정립
고객, 딜러, 내부 직원 등 다양한 이해관계자의 사용 시나리오를 분석하고, 모바일 인증 → 정보 확인 → 전산 연동 → 확정 처리까지 자연스럽게 이어지는 흐름으로 UX를 재설계했습니다. 기존에는 사용자마다 다른 경로로 정보를 전달받아 혼선이 있었던 반면, 본 프로젝트에서는 각 역할별 행동 동선을 명확히 정의하고, 이를 UX 흐름에 구조적으로 반영했습니다.
UI/UX 설계
20~60대 다양한 연령층이 사용하는 만큼, 복잡한 오프라인 문서를 단순하고 직관적인 모바일 인터페이스로 변환하는 데 중점을 두었습니다. 특히 디지털 환경에 익숙하지 않은 중장년층 사용자도 무리 없이 사용할 수 있도록, 터치 영역, 안내 문구, 설명 순서를 세심하게 조정했습니다.
• 폰트 크기, 색상 대비, 버튼 간격 등 가독성과 접근성 고려
• 스텝 인디케이터 도입 → 단계별 흐름을 명확히 인지할 수 있도록 구성
• 지점 담당자가 별도 수기로 확인하지 않아도 간편하게 확정 처리 가능
• 체크박스 기반 더블체크 UX → 중요한 사항을 반복 확인할 수 있도록 설계
퍼블리싱 및 구현
• 디자인 제작뿐 아니라 HTML/CSS 퍼블리싱을 직접 수행하여, 기획 의도와 실제 구현 결과물 간의 완성도와 일관성을 확보했습니다
• 기존 시스템 구조 분석 후, 기존 클래스와 충돌이 없도록 네이밍 전략 수립
• 사내 디자인 시스템과 공통 컴포넌트를 활용
• aria-label, role 등 웹 접근성 고려, 모바일 기기별 반응형 레이아웃 구현
ux concept
UX 전략과 사용자들의 연령대를 고려하여 누구나 사용하기 쉽고 편리하게 구성했습니다.
1
신속하고 직관적인
디지털 인터페이스
종이 인수증을 디지털화하여 빠르고 간편하게 작성 및 처리 가능.
2
단계별 진행 상태 표시
사용자가 작성 과정을 명확히 인지할 수 있도록 직관적인 단계 표시
3
모바일 최적화
디지털화된 인수증을 어디서나 작성 및 제출 가능하도록 반응형 UI 제공
Design System
기존 디자인 가이드 시스템을 활용하여 UI를 제작함으로써 디자인의 일관성을 유지하고, 사용자가 익숙한 경험을 제공할 수 있도록 하였으며, 개발과의 협업을 원활하게 진행할 수 있도록 하였습니다
TYPOGRAPHY
우리금융캐피탈
디자인 가이드
확인해보기
Light
Regular
Blod
KR
Noto Sans KR
가독성과 전달력이 뛰어난 노토산스는 우리금융캐피탈의 기본 한글 서체입니다.
EN
Roboto
로보토는 구글 공식 서체로 다양한 환경에서 최적화된 우리금융캐피탈의 영문 기본 서체입니다
color System
Primary
#1490EF
#1056C3
#D0E9FC
Gray scales
ui Design
기존 디자인 가이드 시스템을 활용하여 UI를 제작해 디자인의 일관성을 유지하고, 고객과 딜러의 편의성을 극대화하기 위해 인수증을 모바일 환경에서 처음으로 제공하였습니다.
모바일 인수증 프로세스
기여도 : 기획,디자인,퍼블리싱 100%
프로그램: xd, Illustrator , visual studio code
STEP 01
본인 확인
STEP 02
차량 정보 확인
STEP 03
차량 상태 확인
STEP 04
차량 인수 확인
STEP 05
인수증 작성 완료
STEP 06
완료
UI DESIGN 01
한눈에 확인 가능한 차량 및 인수 정보
기존 종이 인수증을 모바일 환경으로 전환하여, 사용자가 한눈에 차량 정보와 인수 정보를 확인할 수 있도록 구성하였습니다. 차량 모델, 등록 번호, 주요 계약 사항 등을 직관적인 UI로 제공하여 빠르게 정보를 확인할 수 있습니다.
UI DESIGN 02
체크박스를 통한 더블체크 기능 제공
사용자가 직접 체크박스를 선택하여 필수 확인 항목을 점검할 수 있도록 설계하였습니다. 이를 통해 인수 과정에서 중요한
정보를 다시 한번 검토할 수 있으며, 체크한 항목은 시스템에 자동 저장되어 인수 과정의 신뢰도를 높였습니다.
UI DESIGN 03
스텝 인디케이터 적용
단계별 진행 상황을 시각적으로 안내하기 위해 스텝 인디케이터를 적용하였습니다. 이를 통해 사용자는 현재 진행 단계와
남은 절차를 쉽게 파악할 수 있으며, 단계별 안내를 따라 자연스럽게 다음 단계로 이동할 수 있도록 구성하였습니다.
UI DESIGN 04
마지막 안내사항 제공
인수 완료 후, 최종적으로 확인해야 할 안내 사항을 사용자에게 명확하게 전달합니다. 이를 통해 인수 과정에서 놓칠 수 있는 중요한 정보를 제공하고, 사용자가 원활하게 차량을 인수할 수 있도록 설계하였습니다
모바일 인수증 프로젝트 결과
모바일 인수증 도입 이후 달라진 점과 주요 성과를 정리했습니다.
지점 지원 업무 간소화 및 효율성 향상
수작업을 줄이고 자동화 시스템을 도입하여 운영 효율과 직원 생산성을 높였습니다.
렌트 선급 확정 기간 단축 및 수익 조기 실현
인수 절차를 간소화하여 렌트 선급 확정 기간을 단축하고, 계약 진행 속도를 높여
수익 실현 시점을 앞당겼습니다.
디지털 전환 및 사용자 편의성 강화
모바일 환경에서 인수 절차를 처음 도입하여 언제 어디서나 진행할 수 있도록 했으며, 직관적인 UI/UX 설계를 통해 사용자의 부담을 최소화하였습니다.
데이터 오류 감소 및 신뢰도 높은 인수 절차 구축
자동 검증 시스템을 도입해 데이터 오류를 줄이고, 계약 및 인수 과정의 신뢰도를 높여 사용자와 기업 간 원활한 업무 처리가 이루어지도록 개선하였습니다.
ui Design
UX 전략과 사용자들의 연령대를 고려하여 누구나 사용하기 쉽고 편리하게 구성했습니다.
모바일 인수증 프로세스
기여도
기획,디자인,퍼블리싱 100%
프로그램
xd, Illustrator , visual studio code
STEP 01
본인 확인
STEP 02
차량 정보 확인
STEP 03
차량 상태 확인
STEP 04
차량 인수 확인
STEP 05
인수증 작성 완료
STEP 06
완료
UI DESIGN 01
한눈에 확인 가능한 차량 및 인수 정보
기존 종이 인수증을 모바일 환경으로 전환하여, 사용자가 한눈에 차량 정보와 인수 정보를 확인할 수 있도록 구성하였습니다. 차량 모델, 등록 번호, 주요 계약 사항 등을 직관적인 UI로 제공하여 빠르게 정보를 확인할 수 있습니다.
UI DESIGN 02
체크박스를 통한 더블체크 기능 제공
사용자가 직접 체크박스를 선택하여 필수 확인 항목을 점검할 수 있도록 설계하였습니다. 이를 통해 인수 과정에서 중요한
정보를 다시 한번 검토할 수 있으며, 체크한 항목은 시스템에 자동 저장되어 인수 과정의 신뢰도를 높였습니다.
UI DESIGN 03
스텝 인디케이터 적용
단계별 진행 상황을 시각적으로 안내하기 위해 스텝 인디케이터를 적용하였습니다. 이를 통해 사용자는 현재 진행 단계와 남은 절차를 쉽게 파악할 수 있으며, 단계별 안내를 따라 자연스럽게 다음 단계로 이동할 수 있도록 구성하였습니다.
UI DESIGN 04
마지막 안내사항 제공
인수 완료 후, 최종적으로 확인해야 할 안내 사항을 사용자에게 명확하게 전달합니다. 이를 통해 인수 과정에서 놓칠 수 있는 중요한 정보를 제공하고, 사용자가 원활하게 차량을 인수할 수 있도록 설계하였습니다
