KYUL

문제 Problem발매작은 음원 사이트에, 영상은 유튜브에, 공연 소식은 인스타그램과 블로그에 흩어져 있어 아티스트의 활동을 한눈에 볼 곳이 없었습니다.

해결 Solution발매작과 수록곡, 영상, 공연을 수집 스크립트로 모아 데이터로 만들고, 인스타그램 게시물과 블로그 글은 수집기가 주기적으로 가져와 관리자의 발행 대기에 쌓이도록 했습니다. 수록곡은 미리듣기를 바로 재생할 수 있고, 멜론·애플 뮤직·스포티파이·유튜브 뮤직·벅스로 이어지는 듣기 링크를 머리줄에 두었습니다.

결과 Result모든 기록이 한 화면에서 발매 순으로 읽히고, 새 소식은 관리자가 확인만 하면 올라갑니다.

과제 Task장식 없이 정보 자체가 디자인이 되는 아카이브

아이디어 Insight글자 크기를 하나로 두고 들여쓰기와 번호로 위계를 만들었습니다. 디스코그래피는 커버 크기를 화면 폭에 맞춰 계산해 격자가 항상 꽉 차고, 항목을 누르면 서랍이 열리듯 상세가 전환됩니다. 커버에 마우스를 올리면 뮤직비디오가 있는 곡은 영상이, 없는 곡은 커버가 화면 전체 배경으로 번져 오릅니다.

결과 Result밤 한 톤의 하늘 배경 위에 읽는 리듬이 일정한 목록형 아카이브가 되었습니다. PC에서는 부드러운 스크롤과 링크 위에서 모양이 바뀌는 커서를 더했습니다.

내용 Description소개 문구는 해석이나 감상을 덧붙이지 않고 발매 정보와 아티스트 본인의 말만 씁니다. 아티스트가 블로그에 공개한 개인적인 이야기는 사이트 문구로 끌어오지 않는다는 기준을 두었습니다.

해결 Solution성능이 낮은 기기에서 커버 호버 때 배경이 끊기던 문제를 프레임 측정으로 원인을 찾아 고쳤고, 스크롤 중에는 호버를 잠시 끄며, 사파리에서는 브라우저 특성에 맞게 스크롤 방식을 바꿉니다. 글꼴은 사이트와 데이터에 쓰인 글자만 남겨 가볍게 만들었습니다. 관리자 페이지에서 발매작·영상·공연·문구를 직접 고치고, dev·stage·production 세 환경은 GitHub Actions로 자동 배포됩니다.