190916 블로그 제작일지
개발 •
![190916 블로그 제작일지](https://cdn-t.marshallku.com/images/images/2019/09/twice-로딩.png)
TWICE 페이지
![](https://cdn-t.marshallku.com/images/images/2019/09/twice-%EB%A1%9C%EB%94%A9.png)
먼저, 로딩 레이어가 사라지는 애니메이션을 좀 손봤습니다.
아무래도 영상이 재생되면서 로딩 레이어가 사라지는데, scale을 변경하는 애니메이션은 브라우저에 부담이 생각보다 커서, 영상 디코딩하느라 바쁠 GPU를 위해 translateX를 사용한 애니메이션으로 변경했습니다.
![](https://cdn-t.marshallku.com/images/images/2019/09/%EA%B0%80%EC%82%AC%EC%A7%91-1.png)
가사집 페이지의 스크립트도 좀 손봐뒀습니다.
예전엔 가사집에서 가사를 열 때, 해당 가사를 통째로 복사해서 다른 엘리먼트에 붙여 넣어 보여주는 좀 이상한 방식을 사용해서 가사를 표시했는데, 이젠 복사 없이 해당 가사만 펼쳐서 보여주도록 작업했습니다.
댓글 아바타
![](https://cdn-t.marshallku.com/images/images/2019/09/%EB%8C%93%EA%B8%80-%EC%95%84%EB%B0%94%ED%83%80.png)
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;
}
사용한 코드입니다.
구글링해보니 위 방법 말고도 기본 이미지 변경하는 방법이 꽤 있긴 있더라고요.
![](https://cdn-t.marshallku.com/images/images/2019/09/%EC%B5%9C%EA%B7%BC-%EB%8C%93%EA%B8%80-%EC%95%84%EB%B0%94%ED%83%80.png)
최근 댓글의 아바타는 지금까지 gravatar 아바타만 사용했는데, 이젠 사용자가 입력한 홈페이지가 있으면 해당 홈페이지의 파비콘(티스토리면 index.gif)을 표시하도록 변경했습니다.
인덱스 포스트
![](https://cdn-t.marshallku.com/images/images/2019/09/%EB%B8%94%EB%9F%AC.png)
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도 지원한다고 적혀있는데, 이상하네요...
댓글 이모티콘
댓글을 달 때 조금 더 편하게 이모티콘을 넣을 수 있게 수정해보는 중입니다.
![](https://cdn-t.marshallku.com/images/images/2019/09/%EC%9D%B4%EB%AA%A8%ED%8B%B0%EC%BD%98-%EB%B2%84%ED%8A%BC.png)
제일 오른쪽 버튼을 클릭하시면
![](https://cdn-t.marshallku.com/images/images/2019/09/%EC%9D%B4%EB%AA%A8%ED%8B%B0%EC%BD%98.png)
위 창이 열립니다.
움짤(비디오긴 하지만)을 클릭하시면 창이 닫히며 댓글 창에 해당 움짤의 링크가 추가됩니다.
추후엔 조금 더 편한 첨부가 가능하도록, 예전처럼 :smile:을 입력하면 특정 이모티콘이 출력되는 것도 다시 작업해볼 예정입니다.
여담으로, 이모티콘 리스트에도 Masonry를 사용했습니다.
블로그엔 모든 이미지 로딩이 끝나면 한 번, 모든 컨텐츠 (글꼴 등)의 로딩이 끝나면 다시 한 번, 총 2번만 레이아웃을 재정렬합니다.
근데 이모티콘 리스트는 로딩 시간이 굉장히 길어서 위 방식을 사용하면 레이아웃이 제대로 잡히기까지 꽤 긴 시간이 소요돼서, 1초마다 한 번씩 레이아웃을 재정렬하고, 모든 이모티콘 로딩이 끝나면 레이아웃 재정렬을 멈추도록 해뒀습니다.