[global-nomad - 4] 체험 신청 모달 UI 개선 데이터 종속성에 따른 필터 재배치

체험 신청 내역 모달을 구현하던 중, 전달받은 디자인 시안의 컴포넌트 배치에 어색함을 느꼈다. 코드를 작성하며 데이터 흐름을 살펴보니 기존 구조는 사용자의 인지 흐름과 맞지 않는다고 판단했다.

결과적으로 디자인 시안의 배치를 임의로 수정하여 구현했다. 변경 전후 비교는 다음과 같다.

Before (기존 시안)	After (개선된 UI)
상태 탭 ➔ 예약 시간 ➔ 리스트	예약 시간 ➔ 상태 탭 ➔ 리스트

디자인 시안을 변경하면서까지 배치를 수정한 근거는 두 가지다.

1. 데이터의 논리적 흐름 (Top-Down)

데이터 흐름상 '예약 시간'은 상위 필터고, '상태 탭(예약/승인/거절)'은 선택된 시간에 종속되는 하위 필터다.

시간을 먼저 선택해야 그 시간에 해당하는 탭별 카운트 숫자와 하단 리스트가 결정된다. 즉, 데이터의 종속성을 UI에 그대로 반영하려면 상위 필터인 시간을 먼저 배치하는 Top-Down 방식이 자연스럽다.

2. 시선 이동 최적화와 인지적 마찰 감소

기존 디자인(탭 ➔ 시간 ➔ 리스트)에서는 사용자가 하단의 '예약 시간'을 변경할 경우, 그에 따른 결과(상단 탭의 카운트 숫자 변화)를 확인하기 위해 시선을 다시 위로 올려야 한다.

결과를 확인하기 위해 시선이 역행하는 과정에서 인지적 마찰(Friction)이 발생한다. 필터 설정(상단)에서 결과 확인(하단)으로 이어지는 단방향 시선 흐름을 구축해야 사용자의 피로도를 줄이고 직관성을 높일 수 있다.

마무리

디자인 시안을 그대로 구현하는 것이 가장 빠른 길일 수 있다. 하지만 프론트엔드 개발자는 데이터를 직접 다루면서 시안의 논리적 허점을 가장 먼저 발견할 수 있는 위치에 있다.

UI 배치를 데이터의 종속성과 일치시켰을 때 사용자의 인지 부하가 가장 적다는 것을 확인했다. 단순히 주어진 시안을 만드는 것을 넘어, 데이터 흐름에 맞는 합리적인 UX를 고민하고 구조를 개선하는 방향을 선택했다.