동료 찾기 페이지 UI/UX 개선

들어가며

이번 글에서는 WeCode 프로젝트의 동료 찾기 페이지를 개선하면서 겪었던 문제와 해결 과정을 정리합니다. 데스크톱 기준으로 괜찮아 보였던 레이아웃이 실제로 사용해보니 불편한 점들이 드러났습니다. 모바일에서 어떤 문제가 있었고, 어떻게 개선했는지 공유해보려 합니다.

문제 배경

처음 만든 동료 찾기 페이지는 데스크톱 중심의 사이드바 레이아웃으로, 왼쪽에 프로필 등록과 필터, 오른쪽에 프로필 카드가 배치되어 있었습니다. 문제는 내 프로필 접근성이었는데, 프로필이 생성 순으로 정렬되어 등록자가 많아질수록 내 프로필을 찾기 위해 스크롤하거나 수정 버튼을 눌러야 했습니다.

모바일에서의 문제

또한, 모바일 화면에서는 사이드바가 화면의 절반 넘게 차지하여 등록된 프로필을 확인하기엔 문제가 있고 개선 여지가 있었습니다. 사이드바 레이아웃은 데스크톱에서는 적합한 UI였지만, 모바일로 확인해보니 문제가 드러나기 시작했습니다.

문제점 정리

• 내 프로필 접근성 떨어짐
• 모바일 화면에서 사이드바를 사용하기엔 비효율적

어떻게 개선해 나갈지

처음에는 데스크톱 중심 사이드바 구조가 충분하다고 생각했지만, 모바일에서는 위 → 아래로 읽기 좋은 간결한 레이아웃이 필요하다고 판단했습니다. 사이드바는 이 흐름을 방해했고, 기기별로 따로 레이아웃을 관리하면 유지보수도 복잡하고 반응형 처리 효율도 떨어진다고 생각했습니다.

결국, 사용자의 자연스러운 읽기 흐름을 유지하고, 내 프로필 접근성을 높이며, 데스크톱과 모바일에서 동일한 구조를 재사용할 수 있고, 개발 복잡도까지 줄일 수 있는 수직 레이아웃 전환이 가장 합리적이라는 결론에 도달했습니다.

개선 과정

프로필 미등록 상태

주요 변경 사항

• 사이드바 제거하고, 상단에 프로필 등록과 필터 재배치
• 프로필 미등록 상태일 때 → 프로필 등록 표시

프로필 등록 상태

프로필 등록 후에는 동일한 영역이 내 프로필 카드로 전환되어,
페이지 상단에서 내 프로필 정보를 확인할 수 있습니다.

모바일 반응형 처리

3. 개선 결과

• 페이지 들어가자마자 등록된 내 프로필이 상단에 보임
• 데스크톱과 모바일 간 일관된 레이아웃 반응형 처리

3-1 친구 찬스

개선 작업을 끝내고 친구한테 피드백을 부탁했습니다.

친구의 솔직한 반응

• 사람이 글을 읽을때 1. 위에서 아래로 2. 좌에서 우로 읽기때문에
• 1이 먼저 충족 되니까 포지션, 직무, 경력이 더 잘 보인다.

3-2 여기서 문득 든 생각

동료 찾기 페이지에서 프로필 등록 시 정보 필드가 더 늘어나고 기능이 확장되는 것과 유저가 늘어 데이터가 쌓인다면 다시 사이드바 레이아웃을 고려해볼 수도 있을 것 같습니다.

사용자 입장에서는 여러 후보를 비교하며 “우리 팀에 핏이 잘 맞는 사람”을 빠르게 찾고 싶어질 텐데, 이런 상황에서는 사이드바가 조건을 바꿔가며 탐색하기에 유리하다고 생각이 들었습니다.

그래서 현재는 수직 레이아웃이 가장 단순하고 적합하지만, 기능이 점점 늘어난다면 사이드바가 좋은 선택지가 될 가능성도 있다고 생각했습니다.

마치며

작은 화면부터 먼저 생각하기

처음부터 모바일 화면을 먼저 고려했더라면 이런 삽질을 피할 수 있었을 것 같습니다. 이번 개선 작업을 통해 깨달은 점은, 작은 화면부터 설계하면 정보의 우선순위와 레이아웃 구조를 자연스럽게 단순화할 수 있으며, 그 결과 데스크톱까지 확장할 때 불필요한 수정이나 반복 작업을 줄일 수 있다는 것입니다.