마이데이터 - UX/UI Review
Case Study · UX/UI Review

마이데이터

출간일·

데이터 기반 서비스의 신뢰와 효율을 높이는 정보 설계, 일관된 UI 시스템, 성능과 접근성 개선에 대한 인사이트를 요약했습니다. 본 리뷰는 공개 이미지와 화면 흐름을 바탕으로 작성되었습니다.

더블루캔버스와 함께 상담하기
마이데이터 메인 화면 대표 이미지
대표 화면 스크린샷(썸네일 t.jpg는 본문에 노출하지 않습니다)

프로젝트 개요

마이데이터 서비스는 방대한 개인 데이터의 안전한 수집·통합·활용을 전제로 하며, 신뢰 가능한 정보 구조와 투명한 피드백이 사용자 가치의 핵심을 이룹니다. 본 리뷰는 공개된 정적 이미지를 중심으로 사용자 여정을 추정하고, 온·오프보딩, 대시보드 가독성, 권한/보안 안내, 추천 및 알림 체계를 포괄적으로 점검했습니다. 또한 데이터 기반 UI에서 빈번하게 발생하는 용어 비일관성, 카드/표 컴포넌트의 밀도 문제, 반응형 처리에서의 계층적 붕괴 등 실무 이슈를 실제 개선안과 함께 정리했습니다. 본문은 실행 가능한 체크리스트를 중심으로, 팀이 바로 적용할 수 있는 설계 원칙과 인터랙션 패턴을 제안합니다.

핵심 키워드: 데이터 신뢰성 · 정보 구조 · 일관된 UI 컴포넌트 · 접근성/SEO

정보구조(IA)와 내비게이션

데이터 서비스의 IA는 크게 수집(연결) · 분석(정규화) · 활용(추천/리포트) 흐름으로 이어집니다. 내비게이션은 이 세 가지 축을 인지 부하 없이 안내해야 하며, 용어와 아이콘, 강조 색상 체계가 동일한 의미를 안정적으로 전달해야 합니다. 메뉴는 최대 2레벨로 단순화하고, 3레벨 이상은 문서형 TOC 또는 상단 컨텍스트 탭으로 치환하여 스크롤 맥락에서 탐색이 가능하도록 구성하는 것이 유리합니다. 카드/표 혼합 레이아웃에서는 우선순위 기준(금융/보안 경고, 미완 결합 계정, 추천 액션)을 위로 끌어올리고, 상세는 점진적 공개(progressive disclosure)로 전개하여 정보 밀도를 제어합니다. 검색과 필터는 결과 수, 적용 필터 칩, 재설정 버튼을 한 영역에 결합해 반복 사용 흐름을 단축합니다.

브랜딩/비주얼 디자인

마이데이터 맥락에서 신뢰·안정성은 색과 타이포, 레이아웃 리듬으로 체감됩니다. 기본 색상은 대비비(4.5:1 이상)를 확보하되, 경고/주의/성공 상태 색을 명확히 분리해 의미 오류를 차단합니다. 본문의 행간은 1.6~1.8, 카드 패딩은 16~24px 범위에서 일관성을 유지하고, 모바일에서는 그리드 열 수를 1~2로 축소해 스캔 경로를 단순화합니다. 아이콘은 스트로크 두께와 코너 반경을 통일하고, 데이터 뱃지/칩 컴포넌트는 라벨과 상태 점(dot)을 함께 표현해 시각적 구분을 빠르게 돕습니다. 이미지 활용 시에는 핵심 UI가 잘 드러나도록 크롭하고, 캡션으로 화면 맥락을 보강해 검색·공유 시에도 의미가 유지되도록 구성합니다.

가이드 포인트: 대비/가독성 · 상태 색 분리 · 리듬 있는 여백 · 일관된 아이콘

인터랙션/사용성

온보딩에서는 연결해야 할 계정/기관의 예상 소요 시간과 권한 범위를 미리 안내하고, 단계별로 진행률다음 액션을 명확히 제시해야 이탈을 줄일 수 있습니다. 대시보드의 추천 영역은 개인화 지표(최근 변화, 이슈 레벨, 예상 절감 효과)와 함께 빠른 실행 버튼을 제공해 반복 사용을 유도합니다. 표/그래프는 뷰 전환 탭으로 연결하고, 행 선택 시 슬라이드 패널로 상세를 보여주는 패턴을 적용하면 페이지 이동 없이 흐름을 유지할 수 있습니다. 입력/업로드는 비동기 검증과 에러 복구 경로(되돌리기, 초안 저장)를 제공하여 실패 비용을 낮춥니다. 모션은 120~200ms 범위의 미세 전환으로 한정하고, 상태 변화는 색/아이콘/텍스트를 함께 사용하여 지각적 확실성을 높입니다.

퍼포먼스/SEO 개선

핵심 웹 지표를 개선하려면 이미지 최적화와 코드 분할이 효과적입니다. 대표 이미지는 WebP/AVIF 제공을 고려하되, 원본은 보존하고 lazy-loading으로 초기 페인트를 가볍게 만듭니다. 번들 크기는 라우트 단위 분할과 아이콘 스프라이트/동적 임포트를 통해 감소시키고, 폰트는 한글 서브셋·swap 전략으로 플래시를 줄입니다. 메타/오픈그래프, 구조화 데이터, 의미 요소(h1, nav, main, section, figure/figcaption)를 정돈하면 검색 및 SNS 공유 품질이 향상됩니다. 접근성 측면에서는 포커스 순서와 명확한 버튼 라벨, ARIA 라이브 리전, 키보드 트랩 방지가 중요합니다. 또한 에러 페이지/빈 상태 UI에 해결 경로를 내장하면 이탈 최소화에 기여합니다.

실행 체크: 이미지 포맷/지연 로드 · 번들 분할 · 서브셋 폰트 · OG/메타/시맨틱

마무리 및 더블루캔버스

마이데이터와 같은 데이터 중심 제품은 신뢰, 효율, 명료함이 곧 경쟁력입니다. 본 리뷰는 이미지 기반 분석으로 핵심 과제를 정리했고, 팀이 바로 적용할 수 있는 IA 단순화, 상태/우선순위 설계, 대시보드 리듬, 접근성/SEO 체크리스트를 제안했습니다. 보다 구체적인 화면 설계, 프로토타입 제작, 디자인 시스템 수립, 측정/실험(AB 테스트)까지 이어지는 통합 지원이 필요하다면 아래 링크로 문의해 주세요. 더블루캔버스는 실제 실행을 전제로 한 전략·설계·크리에이티브·개발 협업을 통해, 성과 중심의 제품 개선을 지원합니다.

The Blue Canvas 살펴보기