배너 이미지

200728 About IU 제작일지

최종 수정일 : (1년 전)

이 정도면 완성했다 싶어 배포를 시작했는데, 항상 배포를 시작하고 보면 고쳐야 할 게 눈에 보입니다.
이래서 다들 알파 테스트, 베타 테스트 거치고 출시하나 봅니다.

홈 페이지

홈 페이지

인스타그램 피드를 외부 페이지로 옮기니 홈 페이지는 정말 아무것도 볼 게 없는 페이지가 되어버렸습니다.
조금이라도 단조로움을 깨보려고 뮤직비디오가 무작위로 재생되게 했습니다.
우측 하단에 음소거 토글 버튼도 추가했습니다.
또, 흰 글자가 잘 안 보일 경우를 대비해 글자에 그림자도 추가했습니다.

로더 추가

로더

로딩이 긴 유튜브 페이지나 인스타그램 페이지에서 데이터를 불러오기 전까지 텅 빈 화면만 출력하는 건 좀 이상한 것 같아 로더를 추가했습니다.
디스코그래피와 필모그래피 페이지에도 추가는 했습니다만, 짧게 깜빡이고 지나가는 수준이라 도는 걸 감상하긴 힘드네요.

유튜브 페이지

유튜브 페이지

유튜브 내용을 긁어오는 페이지를 외부 서버에서 제 서버로 변경했습니다.
유튜브 자체가 좀 느리다 보니 빨라진 게 체감은 딱히 안 되지만, 소폭의 로딩 속도 향상이 있습니다. 또한, 이제 모든 제목이 한글로 출력됩니다.

가사집 페이지

뮤직비디오를 감상하며 가사를 볼 수 있게 작업해봤습니다.
뮤직비디오를 팝업으로 띄운 상태에서 스크롤을 아래로 내리면 비디오가 중앙에서 가장자리로 옮겨가고, 어둡던 배경이 투명해집니다. 위로 올리면 원상 복구되고요.
배경은 색상만 투명해진 거라, 빈 곳을 클릭하면 뮤직비디오가 꺼지는 건 마찬가지입니다.

SEO 최적화

SEO 최적화

제목, 메타 태그 등을 서버에서 렌더링해 링크를 공유했을 때 조금 더 직관적으로 링크의 내용을 보여줍니다.
(이전까진 제목, 설명은 About IU에 미리 보기 사진은 아이유 이전 트위터 프로필 사진 고정이었습니다.)

배운 게 도둑질이라 PHP로 작업했습니다.
이미 서버에서 돌아가는 언어라 서버에서 작업하기 편하기도 하고요.


profile

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다

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