앨범 상세 페이지 UX 고도화

변경 사항

• 변경 사항
• 곡 리스트 위치를 하단에서 우측으로 이동.
• tab을 만들어 기존에 사이드바에 있던 정보를 tab 중 하나로 통합.
• 이에 따라 가사 등 다른 카테고리로 확장 용이.

• 변경한 이유
• 곡을 선택하면 사이드바와 하단 플레이어가 동시에 나와 화면이 지저분해짐.
• 가사 등 다른 데이터들을 보여주기 어려움.



왼쪽을 앨범 정보 영역, 오른쪽을 앨범 트랙 정보 영역이라 생각하고 제작함.

제작 과정

• tabs 컴포넌트 제작.
• 코드 그대로 tabs 목록에 들어갈 데이터를 전달하면 active시킬 value와 일치하는 컴포넌트를 보여주는 방식.
 

UX 고민

• 앨범 상세 페이지는 앨범 > 앨범 상세 정보, 앨범의 곡 목록 > 곡 > 곡 상세 정보를 모두 보여준다.
• 이런 계층 구조를 가졌는데 개편한 페이지에선 앨범 상세 정보와 곡 정보가 같은 depth를 가진다.
• 앨범 상세 정보 : 더보기 버튼을 누름.
• 곡 정보 : 곡 리스트에서 곡을 누름.
• 다른 depth로 존재해야 계층 구조를 잘 표현할 수 있지 않을까에 대한 의문이 제기됐다.
• 그리고 슬랙을 예로 들어, 슬랙은 왼쪽으로 갈수록 depth가 나타는 것처럼 왼쪽에서 오른쪽으로 계층을 표현한다. 그럼 앨범 상세페이지도 앨범이 왼쪽에, 곡 목록이 오른쪽에 있으면 곡 상세정보는 더 오른쪽에 있어야 계층 구조가 잘 표현됐다고 말할 수 있다.

• 추가로 상세 정보가 마치 앨범의 상세 정보 (실제론 곡의 상세 정보임)로 보여 잘못 클릭할 수 있다는 문제가 있다.

• 앨범 상세 페이지의 레퍼런스는 유튜브 뮤직을 참고했다.



• 레퍼런스로 삼으면서 한 가지 간과했던 사실이 있다.
• 다음 트랙에 존재하는 리스트는 별도의 음원이라는 사실이다. 프로젝트의 경우 다음 트랙 탭에 존재하는 데이터는 별도의 음원이 아닌 앨범에 속한 곡들이다.
• 그래서 유튜브 뮤직의 경우 이러한 ui가 계층에 있어 혼란을 주지 않았지만 이 프로젝트는 혼란을 줄 수 있다는 점이다.

• 반드시 왼쪽 → 오른쪽 or 위 → 아래가 계층을 표현하라는 법은 없지만 그렇게 한 번 생각하기 시작하면 계층이 어지러울 때 같이 혼란스러울 수 있다는 점이다. → UX가 좋지 않음.

결론 후보

• 탭을 앨범 아래로 내리자.
• 스크롤을 한 번 내려야 곡 목록을 볼 수 있다는 아쉬움이 있음.

• 상세 정보 탭은 곡을 클릭하지 않으면 앨범의 상세 정보를 보여주고, 곡을 클릭하면 곡의 상세 정보를 보여주자.
• 곡을 클릭하는 순간 앨범의 상세 정보가 곡의 상세 정보로 대체돼 곡 상세 정보를 더 이상 볼 수 없다는 문제가 있음.

• 곡 목록과 상세 정보가 같은 tab에 존재해 계층이 헷갈리는 거니 상세 정보는 사이드바로 빼자.
• 그럼 다시 플레이어와 사이드바가 동시에 나와 지저분해짐.

• 탭을 하나 더 확장해서 앨범 상세 정보와 곡 상세 정보를 모두 보여주자.
• 왼쪽을 앨범 영역, 오른쪽을 곡 영역으로 나누었는데 구분이 모호해짐.

결론

• 디자이너 선생님을 모시고 소견을 들어본 결과 많은 정보를 한 페이지에 보여줘야 해서 모든 정보를 잘 보이게 하는 건 안된다는 의견을 들었다. 따라서 선택지는 다음과 같다.
1. 곡 목록을 한눈에 보는 니즈가 많다 → 현재 구조 괜찮음.
2. 상세 정보를 더 많이 본다 → 목록을 앨범 정보 아래에 두고 곡을 클릭했을 때 상세정보가 우측에 바로 보이게 한다. (페이지 자체를 2분할로 구분하는 방식)

• 이 프로젝트를 주로 사용하는 분들은 서버 개발자분과, 플레이리스트 제작자분들인데 서버 개발자분의 의견을 들어보니 뭘로 가든 열수만 있으면 된다라고 양보해주셨다.

• 우선 목적에 따라 현재 구조를 유지하되, 계층적인 문제가 해결된 건 아니라 사용하면서 헷갈리는 유저가 많아질 경우 b안을 채택하여 계층을 챙기고, 리스트를 하단으로 내리는 방식으로 변경하기로 했다.