INSIGHT LOG

Project Overview

모바일 이커머스 플랫폼의 결제 단계에서 사용자 경험(UX) 데이터를 분석하고, 최종 구매 전환율을 극대화하기 위해 이탈 요인을 탐색하고 개선안을 설계했습니다.

Key Friction Identified

• 복잡한 입력 양식: 결제 프로세스 진입 시 요구되는 입력 필드가 많아 피로도를 유발했습니다.
• 인증 절차 병목: 본인 인증 및 결제 수단 등록 과정에서의 시각적 안내 부족으로 이탈이 집중되었습니다.
• 불친절한 에러 피드백: 오류 발생 시 위치나 해결책을 명확히 제시하지 않아 세션을 포기했습니다.
• 결제 수단 다변화 부족: 간편결제 옵션의 부재로 모바일 환경에서의 결제 편의성이 저하되었습니다.

Design Improvements

기존 5단계의 결제 단계를 3단계의 싱글 페이지 결제 프로세스(Single Page Checkout)로 단순화하고, 인라인 입력 유효성 검사(Inline Validation)와 실시간 에러 안내를 도입했습니다. 또한 모바일 간편결제 시스템과의 연동 동선을 최적화했습니다.

A/B Test Results

• 사용성 평가 지수 (SUS): 기존 58점에서 개선 후 84점으로 비약적 향상
• 결제 완료 속도: 평균 120초에서 45초로 62.5% 감소
• 구매 전환율 (Conversion Rate): 최종 구매 완료율 기존 대비 +24.3% 증가

Test Overview

포트폴리오 리뉴얼 과정에서 8명의 대표 사용자를 대상으로 태스크 기반 네비게이션 사용성 테스트를 진행하여, 인터랙션 및 정보 구조(IA) 관점의 인지적 마찰 요인을 추적했습니다.

Cognitive Friction Findings

• 용어 혼동: 사용자들이 'Works'와 'Archive' 메뉴의 차이를 명확히 인지하지 못해 헤매는 현상이 발견되었습니다.
• 필터 빈 상태 피드백 부재: 아카이브 페이지에서 다중 필터 선택 시 검색 결과가 없는 화면(Empty State)에 도달했을 때 되돌아가거나 필터를 리셋할 수 있는 안전장치가 부족했습니다.
• 포커스 인지 저하: 모바일 및 키보드 인터랙션 시 활성화 상태를 시각적으로 명확하게 드러내는 초점(Focus) 피드백이 약해 조작 편의성이 떨어졌습니다.

Optimization & Fixes

결과가 존재하지 않는 필터 조합을 자동으로 차단 및 비활성화하는 스마트 필터(Smart Filter) 로직을 도입하였으며, 사용성 피드백을 기반으로 메뉴 네비게이션 명칭 및 시각적 대비(포커스 링, 트랜지션 모션 지속시간)를 전면 수정하였습니다.

Archive Overview

글로벌 프리미엄 테크 기업 및 하이엔드 디자인 하우스의 웹 인터페이스를 정밀 분석하여, 공통적으로 발견되는 시각 법칙 및 디자인 시스템 패턴을 기록하고 아카이빙합니다.

Visual & UI Patterns

• 타이포그래피 계층화: 디스플레이 폰트로는 볼드하고 장식성이 강한 서체(예: Syne)를 사용하고, 정보 본문은 고도로 다듬어진 고딕 서체(예: Inter)를 배치하여 극적인 시각적 대비를 꾀합니다.
• 1px 테두리 프레임: 콘텐츠를 명확한 경계로 분할하되 두께를 1px로 극도로 얇게 제어하고, 대비가 낮은 보더 라인 컬러를 사용하여 깔끔하고 정돈된 룩을 완성합니다.
• 글래스모피즘(Glassmorphism): `backdrop-filter: blur(16px~20px)`를 활용한 부드러운 반투명 유리 질감을 활용하여 레이어 간의 깊이감과 공간감을 정교하게 연출합니다.
• 시네마틱 모션: 빠르고 정교하게 제어되는 베지에 곡선(`easeOutExpo` 등)과 `will-change` 속성을 적용하여 사용자 조작에 민감하고 유려하게 반응하는 마이크로 인터랙션을 설계합니다.

Analysis Overview

글로벌 프리미엄 사이트 5곳을 선정하여 렌더링 성능 지표와 마우스 무브/스크롤 시 발생하는 애니메이션 랙(Lag) 현상을 벤치마킹하고 웹 사이트의 60fps 최적화 가이드를 수립했습니다.

Technical Metrics & Optimizations

• Core Web Vitals (LCP, CLS): 초기 로딩 속도 향상 및 렌더링 지연 방지를 위해 리소스를 분석하고 최적화 기법을 도입했습니다.
• 리플로우(Reflow) 방지: 레이아웃 배치를 변형하는 요소(`top`, `left`, `margin` 등)의 애니메이션을 지양하고, 브라우저 합성 레이어를 태우는 `transform: translate3d`와 `will-change` 속성을 적극 활용하여 프레임 드랍을 원천 차단했습니다.
• 지연 실행(Lazy Evaluation): `IntersectionObserver` API를 활용하여 사용자가 뷰포트에 진입할 때에만 애니메이션 연산과 컴포넌트를 동작시키고 이미지 로딩을 지연시킴으로써 메모리 과부하를 최적화했습니다.
• 바닐라 JS 활용: 무거운 타사 라이브러리 사용을 전면 배제하고 경량의 순수 자바스크립트로 인터랙션을 직접 핸들링하여 메인 스레드 부하를 제어했습니다.