Github : https://github.com/marshall-ku/About-IU
Live : https://marshall-ku.com/IU/

소개

React.js와 친해지기 프로젝트 일환으로, 앞서 html, css, javascript로 제작한 트와이스 팬 페이지의 디자인을 기반으로 React로 아이유 팬 페이지를 제작했습니다.
팬 페이지 만들 대상을 고민하다, 로고를 중심으로 Home, About / Discography, Filmography로 두 개씩 대칭을 맞출 수 있는 아이유를 선택했습니다.

앨범 데이터 JSON으로 작업하면서 양이 워낙 많아 괜히 했나 생각도 잠깐 했긴 한데, 역시 다하고 보니 볼만하네요.

JSON 데이터는
디스코그래피 : https://marshall-ku.github.io/About-IU/data/album.json
필모그래피 : https://marshall-ku.github.io/About-IU/data/filmography.json
앨범 상세 : https://marshall-ku.github.io/About-IU/data/albums/{디스코그래피 목록에 적힌 이름(name)}.json

스크린샷

홈 화면입니다.

텍스트가 링처럼 돌아가고 스크롤을 내리면 최근 인스타그램 포스트를 보여줍니다.

프로필 페이지입니다.

개인적으로 좀 밋밋하다고 생각하는데, 이것저것 더 넣으려니 쓸데없이 몸집만 불리는 것 같아 일단 보류했습니다.

디스코그래피 페이지입니다.

화면에 보이는 성시경과의 듀엣곡처럼, 참여 곡이라도 아티스트에 아이유가 올라가 있으면 표기했습니다.
OST는 마음을 드려요처럼 따로 앨범이 나와 있으면 그 앨범을 표기했고, 바람꽃처럼 따로 나온 앨범이 없으면 모든 곡이 수록된 앨범을 사용하되, 아이유의 곡만 표기했습니다.

노래 대부분이 자동재생 되는데, 오래된 노래라 공식 채널에 동영상이 없으면 자동 재생이 안 됩니다.
제삼자가 올려도 정보에 유튜브가 음원을 표시해두면 공식 인증된 거라고들 하던데, 일단 확실치 않아 공식 채널에 올라온 곡만 자동 재생합니다.


노래 대부분이 자동재생 되는데, 오래된 노래라 공식 채널에 동영상이 없으면 자동 재생이 안 됩니다.
제삼자가 올려도 정보에 유튜브가 음원을 표시해두면 공식 인증된 거라고들 하던데, 일단 확실치 않아 공식 채널에 올라온 곡만 자동 재생합니다.

제작하면서 든 의문인데, 유튜브에 곡을 무슨 기준으로 올리는지 궁금하더라고요.

선덕여왕 OST (2009/09) => 있음
IU…IM (2009/10) => 없음
낙원 OST (2009/12) => 있음
첫사랑이죠 (2010/01) => OST만 올라오나 싶었는데 이것도 있음
(중략)
최고의 사랑 OST (2011/05) => 그럼 OST는 다 올라왔나 싶었는데 없음(좋아하는 노래라 뮤직비디오가 자동 재생되게 함)

뭐 하여튼…2012년 5월에 발매된 '스무 살의 봄' 기준으론 다 올라와 있습니다.

곡 상세 페이지입니다.

뮤직비디오가 있으면 좌측 앨범 이름 아래에 유튜브 아이콘이 표시됩니다. 클릭하시면 팝업으로 뮤직비디오가 뜹니다.

10초 되감기 , 일시 정지 / 재생, 10초 빨리 감기 버튼 만드느라 골머리 좀 앓은 부분입니다.
유튜브 플레이어 컴포넌트에서 만든 동영상을 곡 상세 페이지 컴포넌트에서 접근해야 하니…
그냥 유튜브 플레이어 정보를 window.player에 집어넣어 해결했습니다.

필모그래피 페이지입니다.

타임라인 형식으로 제작해봤습니다.
아래에 첨부된 이미지 / 비디오는 최대한 좋아하는 장면을 위주로 넣었습니다.
이렇게만 만들고 보니 밋밋한 감이 있어서, mix-blend-mode를 활용해 타임라인에 그래디언트를 넣어 봤습니다. 검은 배경에서 mix-blend-mode를 활용하려니 잘 안 되더라고요…울면서 작업했습니다.

profile

이메일은 공개되지 않습니다.

주의 : 비밀 댓글 사용 시 수정 기능을 이용할 수 있는 시간이 지나면 작성자도 내용 확인이 불가능합니다.
    loading