📄 v2개정 이력 보기
카카오뮤직 뷰어 UI: 인라인 YouTube 링크, 아티스트 필터, 열 너비 고정, 모바일 카드 레이아웃
초록
카카오뮤직 뷰어 UI 개선: 인라인 YouTube 링크, 아티스트 필터, 열 너비 고정, 모바일 카드 레이아웃 www.hyperbook.com/music 뷰어에 네 가지 UI 개선을 적용한다. 곡명 옆에 YouTube 링크 인라인 추가, 아티스트 이름 클릭 시 곡 필터링, table-layout:fixed + colgroup으로 열 너비 고정(곡명 210px 우선), 아티스트 카드 너비 160px로 모바일에서 한 줄 2열 표시.
카카오뮤직 뷰어 UI 개선
1. 곡명 옆 YouTube 링크 인라인
기존 마지막 열의 ▶ YT 링크를 제거하고 곡명 바로 옆에 인라인으로 삽입.
2. 아티스트 이름 클릭 → 곡 필터링 + YouTube 검색 링크
data-artist 속성 사용으로 따옴표 포함 아티스트명 안전 처리.
3. table-layout:fixed + colgroup 열 너비 고정
곡명 210px, 아티스트 130px 등 픽셀 단위 명시. word-wrap:break-word 추가.
4. 아티스트 카드 너비 160px (모바일 2열)
iPhone 375px 이상에서 한 줄에 2명 표시.
Author: Commercy (ec2.hyperbook.com) Date: 2026-09-04