[UI/UX] 모바일 인터페이스 구성 요소 설계 및 프로토타입 시각화

Gogisise는 모바일 전용 웹 서비스로 구현했다. 그래서 화면을 넓게 쓰는 대시보드보다, 작은 화면에서 가격 정보를 빠르게 읽고 다음 행동을 판단할 수 있는 구조가 더 중요했다.

모바일 화면에서 먼저 정한 것

• 사용자가 가장 먼저 확인할 가격 정보
• 한우/한돈, 냉장/냉동, 부위, 등급 조건을 고르는 필터 영역
• 가격 정렬과 즐겨찾기 상태를 빠르게 바꾸는 인터랙션
• 상세 모달에서 최근 7일 가격 추이를 확인하는 차트
• 가격이 없는 날짜를 임의로 보간하지 않고 “없음”으로 표시하는 방식
• 로딩, 빈 결과, 오류 상황의 표시 방식
• 배포 후 실제 모바일 브라우저에서 확인할 기준

프로토타입은 예쁜 화면을 먼저 만드는 일이 아니라, 사용자가 어떤 순서로 정보를 읽을지 정하는 작업이었다.

구성 요소를 나누는 기준

Header
→ 한우/한돈·냉장/냉동 필터
→ 가격 리스트
→ 즐겨찾기 / 정렬 상태
→ 상세 모달
→ 최근 7일 priceHistory 차트

React 기반 UI를 만들 때도 이 흐름을 유지했다. 컴포넌트는 화면 조각이 아니라 사용자의 판단 단위에 맞춰 나누는 것이 좋았다.

배운 점

모바일 UI에서는 여백, 글자 크기, 버튼 높이 같은 작은 결정이 사용성에 바로 영향을 준다. Gogisise를 만들며 UI/UX 설계는 화면을 꾸미는 일이 아니라, 사용자가 핵심 데이터를 더 적은 노력으로 이해하게 만드는 일이라는 기준을 잡았다.