프로젝트 배경
1. 문제점
- 기존 경매 정보 사이트는 방대한 데이터가 비정형적으로 노출되어 있어 사용자가 원하는 정보를 찾기 어려움
- 전문 용어나 복잡한 구조로 인해 초보 사용자의 접근 장벽이 높음
- 정보 간 우선순위가 불분명하여 시선 흐름이 혼란스럽고 이탈률이 높음
- 필터링 기능의 직관성이 떨어져 사용자가 반복적인 탐색을 해야 하는 구조
2. 프로젝트 목표
- 사용자가 원하는 정보를 쉽고 빠르게 탐색할 수 있는 UI/UX 설계
- 콘텐츠별 시각적 위계를 정리하여 정보의 구조화 및 시선 흐름 개선
- 초보자도 부담 없이 접근할 수 있는 직관적인 인터페이스 구현
- 다양한 조건으로 정보를 정렬할 수 있는 고도화된 필터/태그 시스템 구축
3. 주안점
- 많은 정보를 다룰수록 단순하고 명확한 UI가 중요하다는 원칙 하에 설계
- 사용자 시선 흐름을 고려한 콘텐츠 구획 및 반복 패턴 적용
- 정보 피로도를 줄이는 시각적 대비와 구조적 여백 활용
- 정보 탐색 동선을 최소화하는 인터랙션 구조 설계
- 신뢰감을 줄 수 있는 안정적이고 일관된 디자인 시스템 구축
- 기존 경매 정보 사이트는 방대한 데이터가 비정형적으로 노출되어 있어 사용자가 원하는 정보를 찾기 어려움
- 전문 용어나 복잡한 구조로 인해 초보 사용자의 접근 장벽이 높음
- 정보 간 우선순위가 불분명하여 시선 흐름이 혼란스럽고 이탈률이 높음
- 필터링 기능의 직관성이 떨어져 사용자가 반복적인 탐색을 해야 하는 구조
2. 프로젝트 목표
- 사용자가 원하는 정보를 쉽고 빠르게 탐색할 수 있는 UI/UX 설계
- 콘텐츠별 시각적 위계를 정리하여 정보의 구조화 및 시선 흐름 개선
- 초보자도 부담 없이 접근할 수 있는 직관적인 인터페이스 구현
- 다양한 조건으로 정보를 정렬할 수 있는 고도화된 필터/태그 시스템 구축
3. 주안점
- 많은 정보를 다룰수록 단순하고 명확한 UI가 중요하다는 원칙 하에 설계
- 사용자 시선 흐름을 고려한 콘텐츠 구획 및 반복 패턴 적용
- 정보 피로도를 줄이는 시각적 대비와 구조적 여백 활용
- 정보 탐색 동선을 최소화하는 인터랙션 구조 설계
- 신뢰감을 줄 수 있는 안정적이고 일관된 디자인 시스템 구축
프로젝트 성과
정보 구조 시각화
복잡하게 흩어져 있던 경매 정보를 박스형 레이아웃으로 시각화하여 가독성을 높이고, 사용자 이해도를 극대화하는 정보 구조를 완성함
사용자 탐색 동선 최적화
핵심 정보 위주로 시선을 유도하는 콘텐츠 배치와 태그 필터 기능으로 사용자의 탐색 경로를 단순화하고, 반복적 동선을 최소화함
반응형 인터페이스 설계
다양한 기기에서도 동일한 정보 탐색 경험을 제공하기 위해 반응형 UI 구조를 설계하고, 모바일에서도 정보를 빠르게 확인할 수 있도록 구현함
초보자 친화적 UI 구현
경매 초보자가 쉽게 이해할 수 있도록 필수 용어에 해석 요소를 추가하고, 시각 아이콘과 버튼 설계를 통해 접근성을 높이는 UI를 구현함
디자인 시스템 구축
컴포넌트 기반의 디자인 시스템을 구축하여 서비스 전반에 일관된 UI를 적용하고, 추후 확장성과 유지보수가 용이한 기반을 마련함
핵심 기능

경매 리스트 필터링 기능
지역, 날짜, 감정가, 면적 등 다양한 조건으로 경매 정보를 필터링할 수 있도록 설계하여, 사용자가 원하는 매물을 빠르게 탐색할 수 있는 구조로 구현함
진행 단계
Kick-off
2023.07.
경매 플랫폼의 타깃과 목적 정의, 사용자 유형 분석, 기존 정보 구조의 문제점 파악 및 경쟁사 리서치를 바탕으로 프로젝트 방향성을 설정함
Define – 기능 정의 및 콘텐츠 설계
2023.07.
사용자별 주요 액션 도출, 우선순위 정보 선정, 핵심 콘텐츠 구조 정의를 통해 전체 UX 흐름의 기획과 콘텐츠 정렬 기준을 설계함
Design – UI/UX 설계
2023.08.
Figma를 활용해 메인, 리스트, 상세 화면 중심의 화면 설계를 진행하고, 다양한 사용자 시나리오에 맞춘 필터, 정렬, 태그 UI를 구성함
디자인 시스템 정리, 컴포넌트 가이드 제작
2023.08.
전체 디자인 시스템을 정리하고, 주요 컴포넌트 가이드를 제작하여 개발 연동 단계에서의 효율성을 높이고 협업 일관성을 확보함
프로젝트 상세
1. 포트폴리오 소개
- 부동산 경매 정보를 제공하는 웹사이트의 UI/UX 디자인 프로젝트
- 정보량이 많은 경매 사이트의 특성을 고려하여 사용자 중심의 탐색 흐름 설계
- 초보자부터 투자 경험자까지 다양한 타깃을 고려한 정보 구조 구성
2. 작업 범위
- 정보 구조 기획 및 콘텐츠 우선순위 정의
- 메인 화면, 리스트 페이지, 상세 페이지 등 전체 화면 UI 디자인
- 필터 및 태그 기능 인터랙션 설계
- Figma 기반 프로토타입 제작 및 사용자 흐름 검증
- 디자인 시스템 구축 및 화면별 컴포넌트 정리
3. 주요 작업
- 복잡한 정보를 구획별로 분리한 박스형 레이아웃 적용
- 시선 흐름을 고려한 콘텐츠 배치 및 위계 구성
- 태그 필터 및 관심 매물 정렬 기능 UI 설계
- 모바일에서도 정보 손실 없이 작동하는 반응형 레이아웃 구성
- 경매 가이드, 공지사항 등 부가 정보 디자인 통일성 확보
4. 주안점
- 정보 피로도를 줄이기 위한 간결한 시각적 구조 설계
- 초보 사용자의 이해를 돕기 위한 직관적인 문구와 아이콘 사용
- 다양한 조건으로 정보 접근이 가능한 필터 및 탐색 구조 강화
- 반복적 사용 상황을 고려한 UI 패턴의 일관성 유지
- 안정성과 신뢰도를 고려한 컬러 톤과 레이아웃 디자인
- 부동산 경매 정보를 제공하는 웹사이트의 UI/UX 디자인 프로젝트
- 정보량이 많은 경매 사이트의 특성을 고려하여 사용자 중심의 탐색 흐름 설계
- 초보자부터 투자 경험자까지 다양한 타깃을 고려한 정보 구조 구성
2. 작업 범위
- 정보 구조 기획 및 콘텐츠 우선순위 정의
- 메인 화면, 리스트 페이지, 상세 페이지 등 전체 화면 UI 디자인
- 필터 및 태그 기능 인터랙션 설계
- Figma 기반 프로토타입 제작 및 사용자 흐름 검증
- 디자인 시스템 구축 및 화면별 컴포넌트 정리
3. 주요 작업
- 복잡한 정보를 구획별로 분리한 박스형 레이아웃 적용
- 시선 흐름을 고려한 콘텐츠 배치 및 위계 구성
- 태그 필터 및 관심 매물 정렬 기능 UI 설계
- 모바일에서도 정보 손실 없이 작동하는 반응형 레이아웃 구성
- 경매 가이드, 공지사항 등 부가 정보 디자인 통일성 확보
4. 주안점
- 정보 피로도를 줄이기 위한 간결한 시각적 구조 설계
- 초보 사용자의 이해를 돕기 위한 직관적인 문구와 아이콘 사용
- 다양한 조건으로 정보 접근이 가능한 필터 및 탐색 구조 강화
- 반복적 사용 상황을 고려한 UI 패턴의 일관성 유지
- 안정성과 신뢰도를 고려한 컬러 톤과 레이아웃 디자인





