혼재된 레거시 가이드와 복잡한 금융 정보를 정리해, 퇴직연금 기능 전반의 사용성과 운영 일관성을 개선한 프로젝트입니다.
퇴직연금 신규 기능은 기존 MTS 안에 추가되는 구조였기 때문에, 새로운 화면만 잘 만드는 것보다 기존 서비스와 자연스럽게 연결되는 기준을 세우는 것이 중요했습니다.
하지만 프로젝트 착수 당시에는 여러 디자인 가이드와 작업 방식이 혼재되어 있었고, 기능별 화면마다 정보 구조와 시각 규칙이 달라 사용자가 복잡한 금융 정보를 이해하는 데 불필요한 인지 비용이 발생할 수 있는 상황이었습니다.
이 프로젝트에서는 일정과 개발 환경을 고려하면서도, 퇴직연금 기능 전반에 적용 가능한 디자인 기준을 정리하고 정보 계층을 재구성하는 것을 핵심 목표로 삼았습니다.
기존 환경은 단순한 UI 개선으로 해결하기 어려운 구조적 문제가 있었습니다. 프로젝트 안에서는 크게 두 가지 문제가 반복적으로 나타났습니다.
모든 화면을 새롭게 갈아엎기보다, 일정과 개발 환경 안에서 가장 안정적으로 적용 가능한 기준을 먼저 정의했습니다.
기존 가이드 중 서비스 전반에 빠르게 적용 가능한 Type 1을 기준으로 삼고, 정보 계층·컬러·컴포넌트 규칙을 재정리했습니다. 반면, 미완성 상태의 Type 2 가이드나 실험적인 스타일은 일정 내 안정적인 배포를 위해 이번 범위에서는 제외했습니다.
🔒 실제 서비스 화면은 보안 이슈로 일부 재구성했으며, 아래 화면은 동일한 설계 원칙을 바탕으로 정보 계층과 컴포넌트 구조를 정리한 예시입니다.
상품명, 수익률, 위험도, 신청 조건처럼 판단에 필요한 정보를 우선순위에 따라 재배치하고, 보조 정보는 접힘/구분 영역으로 정리해 사용자가 핵심 정보를 먼저 파악할 수 있도록 했습니다.
수치 중심으로 나열되던 투자 정보를 상태 기반 그래프와 Semantic Color로 재구성해, 사용자가 위험도와 비중 상태를 빠르게 이해할 수 있도록 했습니다.
복잡한 금융 개념을 설명형 텍스트만으로 전달하기보다, 3D 이미지와 짧은 카피를 결합해 진입 장벽을 낮추고 CTA까지의 흐름을 단순화했습니다.
서비스 전반 디자인 일관성 확보
여러 가이드가 혼재된 환경에서도 모든 화면을 새로 만들기보다, 실제 배포 가능한 기준을 먼저 세우는 것이 중요하다는 점을 배웠습니다. Type 1 기반의 통합 규칙을 정리해 퇴직연금 기능 전반의 시각적 일관성과 운영 효율을 높였습니다.
Figma 기반 협업 체계 전환
XD와 Photoshop 중심의 작업 방식에서는 화면 간 변경 사항을 추적하고 공유하는 데 한계가 있었습니다. Figma를 협업 기준점으로 전환하고 Variables를 활용하면서, 대규모 화면에서도 라이트·다크 모드와 컴포넌트 수정 사항을 일관되게 관리할 수 있었습니다.
AI 활용 운영 효율화
AI 이미지를 단순 비주얼 제작 도구로 사용하기보다, 반복 제작 비용을 줄이고 서비스 톤에 맞는 이미지 스타일을 빠르게 확장하는 운영 방식으로 활용했습니다.
실사용 데이터 미확보
프로젝트는 설계와 배포 준비 단계까지 진행되었지만, 계약 종료로 인해 오픈 이후 사용자 행동 데이터를 직접 확인하지 못했습니다. 향후에는 클릭률, 전환율, 이탈 구간, 사용성 테스트 결과를 바탕으로 설계 가설을 검증하고 개선하는 과정까지 이어가고 싶습니다.
데이터 기반 설계 방어의 한계
외주사 PL로서는 클라이언트 내부 의사결정 구조 안에서 디자인 근거를 끝까지 설득하는 데 한계가 있었습니다. 이 경험을 통해 제품의 전체 맥락을 이해하고, 데이터와 사용자 피드백을 기반으로 의사결정에 참여하는 인하우스 프로덕트 디자이너로 성장하고 싶다는 방향이 더 명확해졌습니다.