200224 블로그 제작일지

홈 화면 슬라이더 디자인

쓸데없이 뭐가 많은 느낌이라 글 요약이랑 더 보기 버튼을 삭제했는데, 뭘 너무 많이 걷어냈나 싶네요.

조만간 디자인을 대폭 손보지 않을까 싶습니다.

SVG 로고 제작

PNG로 만든 로고를 SVG로 리마스터했습니다.
SVG 애니메이션도 쓸 수 있고, 화질에 더는 구애받지 않고 사용할 수 있습니다!

악성 봇 차단

IP나 Referrer 등을 확인해 악성 봇을 차단하기 시작했습니다.
Apache Ultimate Bad Bot Blocker를 활용했습니다.
위 리포지토리에서 제공하는 리스트에 제 블로그에 들어오는 악성 봇을 계속 추가하고 있습니다.

제 메인 컴퓨터랑 서버 컴퓨터가 한 달간 업로드한 데이터양이 250GB길래 뭔가 문제가 있다 싶어서 추가했는데, 일주일간 60GB 정도 찍히는 걸 보니 그냥 제 업로드량이 많나 봅니다.

그래도 스팸 댓글은 눈에 띄게 줄었습니다.
하루에 10개도 넘던 게 이제 이틀에 하나쯤 들어오네요.

403 에러 페이지 추가

지금까진 잘못된 경로를 접속했을 때만 403 오류를 출력했는데, 이젠 IP나 Referer로도 차단하니, 아무런 문제 없는 유전데도 차단당할 여지가 있습니다(물론 0에 수렴할 정도의 확률이지만, 없는 건 아니니까요).
그래서 403 페이지를 이 코드펜을 참조해 만들었습니다.

html 페이지를 /var/www/html에 추가하고 ErrorDocument를 이용해 해당 페이지를 보여주려 했는데,
403 에러 발생 => ErrorDocument (html 파일) 요청 => 다시 403 에러
이런 문제가 생겨서 그냥 error.marshallku.com로 리다이렉트되도록 설정해뒀습니다.

해당 페이지는 GitHub Pages를 이용해 만들었습니다.
어디다 올려둬야 고민했는데, GitHub Pages도 커스텀 도메인을 사용할 수 있더라고요.

Crontab 수정

매일 오전 4시 반에 서버 컴퓨터가 재부팅되던 걸 매주 화요일 4시 반으로 수정했습니다.
대신 매일 오전 4시 15분에 캐시 메모리를 초기화하도록 설정해뒀습니다.

답글 편하게 달기

답글 버튼을 클릭하면 입력창이 해당 댓글 아래로 이동합니다.
답글을 다는 게 거의 저뿐이긴 한데, 아무튼 편합니다.

아직은 바닐라로도 감당 가능한 수준이긴 하지만, 댓글과 답글을 다는 부분이 이제 꽤 유기적으로 움직여서, 이 부분만 React로 짜볼까 싶네요.

랜덤 댓글 프로필

프로필 이미지가 없는 사용자한테 일괄적으로 태연 사진만 표시하는 건 뭔가 이상한 것 같아 랜덤으로 다양한 이미지가 출력되도록 업데이트했습니다.
적당한 이미지 없나 둘러보다 Pokemon Go 아이콘 팩을 발견해 여기서 이미지 몇 개 빼다가 제작했습니다.

add_filter('pre_option_avatar_default', 'defaultAvatarRand');
function defaultAvatarRand ($value) {
  return '/images/2020/02/poke'.rand(1 , 12).'.png';
}

위 코드를 functions.php에 추가하시면 설정 > 토론의 아바타 > 기본 아바타에 레트로 (생성됨)이란 항목이 추가됩니다.
선택하시면 프로필 사진이 없는 사용자에 한해 랜덤 이미지를 출력하실 수 있습니다.

그냥 일반적인 프로필 이미지 추가하듯이 pre_option_avatar_default가 아닌 avatar_defaults에 필터를 추가하면 랜덤으로 여러 이미지를 출력하는 게 아니라 하나만 출력하니 반드시 pre_option_avatar_default를 사용하셔야 합니다.

헤더 카테고리 디자인

고인 물은 썩기 마련이니, 고인 디자인도 썩을까 싶어 바꿔봤습니다.

색상이 변경되는 것보단 밑줄을 긋는 애니메이션을 표시하는 게 훨씬 직관적이고 깔끔하긴 한데, 작업물 카테고리처럼 하위 카테고리가 많아지면 좀 정신 사납더라고요.
보다 보면 금방 적응되긴 한데, 개선할 방향이 있나 고민을 좀 해봐야 하지 싶습니다.

Lazy Loading 개선

클라이언트 사이드에서 이미지 로딩을 취소하려니 한계가 많습니다.
크로미움 기반의 브라우저에서만 작동하지만, loading="lazy"란 속성을 추가해 브라우저에서 이미지 로딩을 차단할 수 있도록 해뒀습니다.

function lazyLoad($content) {
    global $post;
    if ($post->post_type != "page" && !checkBot()) {
        $content = preg_replace("/<img(.*?)(src=|srcset=)(.*?)>/i", '<img$1$2$3 loading="lazy">', $content);
    }
    return $content;
}
add_filter('the_content','lazyLoad');

사용한 코드입니다.
예전에 올린 src를 data-src로 바꿔주던 함수와 같습니다.

이미지 애니메이션 삭제

스크롤 내리다 뷰포트에 이미지 들어오면 표시되던 애니메이션을 삭제했습니다.
별 의미 없이 성능만 갉아 먹고 보기만 불편하게 하는 건 하지 말자는 교훈을 얻는 계기가 되었습니다.

원본 이미지 표시 오류 수정

특정 이미지를 클릭했을 때, 원본 이미지를 출력하지 못하고 이미지가 깨지던 오류를 수정했습니다.

PHP 7.4 업데이트

저번에 실패한 PHP 버전업에 성공했습니다.
성능이 소폭 향상되었고, 화살표 함수 등도 사용 가능해졌습니다.
한층 더 친숙해졌네요.

깔끔하게 PHP 7.3도 제거했는데, 여전히 php -v는 php 7.3.14로 표시되긴 합니다.

네임서버 변경 (취소됨)

Cloudflare의 네임 서버로 블로그의 네임 서버를 지난 목요일쯤 수정했었습니다.
보안도 강화에도 도움이 많이 된다기에 옮겼는데, 옮기고 보니 속도가 확 느려진 기분이더라고요.

개발자 도구 켜서 보니 TTFB(Time To First Byte, 브라우저가 처음 웹사이트를 화면에 뿌려주는 데까지 걸린 시간)가 평소엔 평균 150ms쯤이었는데, 800ms를 넘기더라고요.
어떻게 하면 두 자리로 떨어뜨릴 수 있나 고민하는 중인데 6배라니…
도무지 참을 수 없어 원래 쓰던 네임 서버로 다시 돌려놨습니다.
- 위 과정에서 잠깐 네임 서버 설정이 초기화되어 사이트 접속이 불가능했습니다.

메일 서버 구축 (반쯤 실패)

SPF와 DKIM 설정까지 끝냈는데, 여전히 메일은 스팸 함에 박힙니다. 😭