👇 변경 후
변경 사항
변경한 이유
왼쪽을 앨범 정보 영역, 오른쪽을 앨범 트랙 정보 영역이라 생각하고 제작함.
let trackTabs = [
{
label: 'list1',
value: 1,
component: Component1,
props: { props },
},
{
label: 'list2',
value: 2,
component: Component2,
props: { props },
},
{
label: 'list3',
value: 3,
component: Component3,
props: { props },
},
]
<script lang="ts">
export let items = []
export let activeTabValue = 1
function handleClick(tabValue: number) {
activeTabValue = tabValue
}
</script>
<ul style="display: flex;">
{#each items as item}
<li class={activeTabValue === item.value ? 'active' : ''}>
<span on:click={() => handleClick(item.value)}>{item.label}</span>
</li>
{/each}
</ul>
{#each items as item}
{#if activeTabValue == item.value}
<div>
<svelte:component this={item.component} {...item.props} />
</div>
{/if}
{/each}
앨범 상세 페이지는 앨범 > 앨범 상세 정보, 앨범의 곡 목록 > 곡 > 곡 상세 정보
를 모두 보여준다.
이런 계층 구조를 가졌는데 개편한 페이지에선 앨범 상세 정보와 곡 정보가 같은 depth를 가진다.
다른 depth로 존재해야 계층 구조를 잘 표현할 수 있지 않을까에 대한 의문이 제기됐다.
그리고 슬랙을 예로 들어, 슬랙은 왼쪽으로 갈수록 depth가 나타는 것처럼 왼쪽에서 오른쪽으로 계층을 표현한다. 그럼 앨범 상세페이지도 앨범이 왼쪽에, 곡 목록이 오른쪽에 있으면 곡 상세정보는 더 오른쪽에 있어야 계층 구조가 잘 표현됐다고 말할 수 있다.
물론 슬랙도 프로필과 스레드의 영역을 공유하고 있지만 그렇기에 슬랙 탭이 가끔 헷갈리는 거라 생각했다.
추가로 상세 정보가 마치 앨범의 상세 정보 (실제론 곡의 상세 정보임)로 보여 잘못 클릭할 수 있다는 문제가 있다.
앨범 상세 페이지의 레퍼런스는 유튜브 뮤직을 참고했다.
별도의 음원
이라는 사실이다. 프로젝트의 경우 다음 트랙 탭에 존재하는 데이터는 별도의 음원이 아닌 앨범에 속한 곡들이다.반드시 왼쪽 → 오른쪽 or 위 → 아래가 계층을 표현하라는 법은 없지만 그렇게 한 번 생각하기 시작하면 계층이 어지러울 때 같이 혼란스러울 수 있다는 점이다. → UX가 좋지 않음.
디자이너 선생님을 모시고 소견을 들어본 결과 많은 정보를 한 페이지에 보여줘야 해서 모든 정보를 잘 보이게 하는 건 안된다는 의견을 들었다. 따라서 선택지는 다음과 같다.
이 프로젝트를 주로 사용하는 분들은 서버 개발자분과, 플레이리스트 제작자분들인데 서버 개발자분의 의견을 들어보니 뭘로 가든 열수만 있으면 된다
라고 양보해주셨다.
우선 목적에 따라 현재 구조를 유지하되, 계층적인 문제가 해결된 건 아니라 사용하면서 헷갈리는 유저가 많아질 경우 b안을 채택하여 계층을 챙기고, 리스트를 하단으로 내리는 방식으로 변경하기로 했다.