201130 블로그 제작일지

벌써 내일이면 2020년도 12월을 맞네요.
최근 블로그의 업데이트 속도를 보면 이번 제작일지가 2020년 마지막 제작일지일 가능성도 약 20%가량 있지 않나 싶습니다.
2019년 결산 글을 적은 게 막 엊그제 같지도 않고 그리 오래된 것 같지도 않은 걸 보면 올해도 적당한 속도로 지나간 것 같네요.

블로그 이름 변경

막 거창하게 바꾼 건 아니고 <혼자 끄적이는 블로그>에서 <Marshall K의 블로그>로 변경했습니다.
이런저런 의미 담아서 바꿔볼까 싶었는데, 아무래도 블로그 명은 그냥 간단한 게 제일 좋아 보이더라고요.

'끄적이다'가 맞춤법에 맞지 않는 표현이라 내심 거슬리기도 했는데, 이제 그 짐은 덜었네요.

페이지 전환 효과

스크롤을 빠르게 위로 올려버리는 건 뭐가 휙휙 지나가서 다소 정신이 없어 보이기도 하고, 스크롤 이벤트 핸들러가 계속 작동해 인텔 내장 그래픽 등 그래픽 연산이 좋지 않을 땐 성능 저하로 연결되기도 했습니다.

더 나은 애니메이션이 없을까 한참 고민하다 드디어 하나를 골랐네요.
카드를 클릭하면 이미지가 커져 자연스럽게 배너가 되는 것도 꽤 좋아 보이긴 하지만, 링크가 전부 저런 형태인 것도 아니고 그래픽 연산은 더 많아질 수도 있을 것 같아 위 방식을 골랐습니다.

화면을 가리는 게 다소 별로일 수 있을 것 같긴 합니다만, 화면을 가려야 스크롤을 제일 위로 트랜지션 없이 올려버릴 수 있으니 선택지가 많이 없더라고요.
카메라 셔터 닫히는 효과를 구현하니 정신이 좀 없어서 그걸 굉장히 단순화해서 만들었습니다.

위 비디오는 네트워크를 강제로 느리게 해 찍었는데, 정상적인 네트워크에선 다시 열리는 속도가 셔터랑 엇비슷하지 않나 싶네요.

헤더

여전히 저게 헤더인 건 입에 붙진 않네요.
두 가지 변경이 있습니다.

배경 그래디언트의 색을 짙게 변경해 글자가 조금 더 잘 보이게 했습니다.

높이를 PC 또는 태블릿에선 550px, 모바일에선 500px로 고정해뒀습니다. (기존엔 60vh)

아바타

포켓몬스터 이미지에서 각종 마크업 언어, 개발 언어 등으로 변경했습니다.

모조리 제가 다룰 줄 아는 것으로만 구성하면 좋았겠지만, 아직 다룰 줄 아는 언어가 11개를 넘기진 못 해 제가 잘 다루지 못하는 언어(Rust, Go, C#)도 섞여 있습니다.
뭐 다룰 줄 알게 되면 그만 아니겠습니까.

비밀 댓글

SECRET만 표시되는 비밀 댓글이 밋밋하단 의견에 이런저런 장식을 추가해봤습니다.
어떻게 바꿀까 하다 2Pac의 Can't C Me가 생각나서 녹여봤습니다.

폰트 재변경

Noto Sans 못났다고 까놓고 다시 Noto Sans로 바꿨습니다.
전에 쓰던 폰트는 좀 굵어 혹여 가독성이 떨어질까 싶기도 하고, Noto Sans도 오래 보다 보니 나쁘지 않더라고요. 최적화도 잘 되어있기도 하고요.

위 스크린샷은 누가 블로그에 올려두셔서 주워왔습니다.
이걸 바로 알아보시고 스크린샷을 찍으셨다니…

캐릭터 추가

사촌 동생이 그려준 캐릭터를 404 페이지, 방명록에 추가했습니다.
곰, 사슴 등등 아주 많은 동물이 섞인 잡종 중의 잡종입니다.

스크롤 인디케이터 추가

지금까지 네비게이션에만 스크롤 인디케이터를 추가했었는데, To Top 버튼의 테두리에 인디케이터를 추가해봤습니다.
나름 귀엽기도 하고 괜찮네요.

키워드 메타 태그 추가

<meta name="keywords" content="<?php
    if (is_single()) {
        $tags = get_the_tags();
        $tagsString = '';
        if ($tags) {
            foreach ($tags as $tag) {
                $tagsString .= $tag->name.',';
            }
        }
        echo substr($tagsString, 0, -1);
    }
    else {
        echo '웹,HTML,CSS,Javascript,Typescript,PHP,Node.js,사진';
    }
?>">

크게 효과는 없는 태그라던데, 그렇다고 굳이 없을 이유도 없다기에 추가해봤습니다.
포스트에선 포스트에 추가해둔 태그가 출력되고, 아닌 페이지에선 블로그의 키워드가 출력됩니다.

기타

• 토스트 메시지가 제대로 표시되지 않던 오류 수정
• 예전에 사용하던 테마를 유저 설정에 추가해주는 코드 제거
• 댓글 알림이 간혹 모든 유저에게 전송되던 오류 수정
• 코드에 있던 각종 오타 수정 (eg. resposne → response)
• 수정되지 않았던 line height 모두 수정
• 아이유 이스터 에그 제거 : 방명록에서만 표시
• 파이어폭스에서 날짜가 제대로 출력되지 않던 오류 수정
• 익명으로 댓글을 달아도 유저 정보를 로컬에 저장하는 오류 수정
• svg 압축
• 홈 화면에 alt 태그가 없던 이미지들에 alt 태그 추가
• 비디오에도 지연 로딩 추가

하려다 접은 것

블랙 프라이데이라 아마존에서 삼성 970 evo plus를 50% 세일을 진행해 서버에 SSD를 달아볼까 하다가 동접자가 많은 게 아니면 크게 성능 향상이 없다는 소식에 접었습니다.
물론 1나노 초도 소중하긴 하지만, 24시간 돌아가는 서버에 ssd가 멀쩡히 살아있어 줄지 의문이더라고요. 쿨링도 추가로 해줘야 할거고, 백업 주기도 훨씬 짧게 해야 할 텐데, 이건 1나노초 아끼려다 잃을 게 더 많아 보여서 일단 접었습니다.
이미지 서버엔 SSD를 쓰니 메인 서버에 SSD가 그리 간절하지 않기도 하고요.