190916 블로그 제작일지

TWICE 페이지

먼저, 로딩 레이어가 사라지는 애니메이션을 좀 손봤습니다.

아무래도 영상이 재생되면서 로딩 레이어가 사라지는데, scale을 변경하는 애니메이션은 브라우저에 부담이 생각보다 커서, 영상 디코딩하느라 바쁠 GPU를 위해 translateX를 사용한 애니메이션으로 변경했습니다.

가사집 페이지의 스크립트도 좀 손봐뒀습니다.

예전엔 가사집에서 가사를 열 때, 해당 가사를 통째로 복사해서 다른 엘리먼트에 붙여 넣어 보여주는 좀 이상한 방식을 사용해서 가사를 표시했는데, 이젠 복사 없이 해당 가사만 펼쳐서 보여주도록 작업했습니다.

댓글 아바타

Gravatar 기본 프로필 이미지를 변경했습니다.

댓글에 본인의 홈페이지를 입력하지 않았고, 입력한 이메일의 Gravatar 아바타가 기본 이미지라면 위 사진을 표시합니다.

add_filter( 'avatar_defaults', 'defaultAvatar' );
function defaultAvatar ($avatar_defaults) {
    $myavatar = '/images/2019/09/feelSpecial_momo.jpg';
    $avatar_defaults[$myavatar] = "ggan mo";
    return $avatar_defaults;
}

사용한 코드입니다.

구글링해보니 위 방법 말고도 기본 이미지 변경하는 방법이 꽤 있긴 있더라고요.

최근 댓글의 아바타는 지금까지 gravatar 아바타만 사용했는데, 이젠 사용자가 입력한 홈페이지가 있으면 해당 홈페이지의 파비콘(티스토리면 index.gif)을 표시하도록 변경했습니다.

인덱스 포스트

filter: blur는 정말 가끔이지만 렉이 걸려서 삭제했었는데, backdrop-filter를 걸어두고 opacity만 조절하면 렉이 사라지지 않을까 싶어 다시 한 번 시도해봤습니다.

아직까진 렉이 걸린 적이 한 번도 없지만, filter: blur도 정말 가뭄에 콩 나듯 렉이 걸리던 거라 시간을 좀 더 두고 판단해봐야 하지 싶습니다.

@supports (backdrop-filter: blur(1px)) {
    /* 지원할 때 */
}
 
@supports not (backdrop-filter: blur(1px)) {
    /* 지원하지 않을 때 */
}

대부분의 CSS 기술은 IE 말곤 제대로 적용돼서 신경 쓰지 않았지만, backdrop-filter는 최신 버전의 firefox에서도 작동하지 않는 기능이라, 위와 같이 지원할 때와 지원하지 않을 때 CSS를 다르게 적용되도록 해뒀습니다.

근데 분명히 MDN을 확인해보면 firefox도 지원한다고 적혀있는데, 이상하네요...

댓글 이모티콘

댓글을 달 때 조금 더 편하게 이모티콘을 넣을 수 있게 수정해보는 중입니다.

제일 오른쪽 버튼을 클릭하시면

위 창이 열립니다.

움짤(비디오긴 하지만)을 클릭하시면 창이 닫히며 댓글 창에 해당 움짤의 링크가 추가됩니다.
추후엔 조금 더 편한 첨부가 가능하도록, 예전처럼 :smile:을 입력하면 특정 이모티콘이 출력되는 것도 다시 작업해볼 예정입니다.

여담으로, 이모티콘 리스트에도 Masonry를 사용했습니다.

블로그엔 모든 이미지 로딩이 끝나면 한 번, 모든 컨텐츠 (글꼴 등)의 로딩이 끝나면 다시 한 번, 총 2번만 레이아웃을 재정렬합니다.

근데 이모티콘 리스트는 로딩 시간이 굉장히 길어서 위 방식을 사용하면 레이아웃이 제대로 잡히기까지 꽤 긴 시간이 소요돼서, 1초마다 한 번씩 레이아웃을 재정렬하고, 모든 이모티콘 로딩이 끝나면 레이아웃 재정렬을 멈추도록 해뒀습니다.