210205 블로그 제작일지

이미지 줌 효과

배경색 변경

기존엔 배경에 블로그의 배경 색이 깔렸는데, 이젠 이미지에 사용된 색의 평균값이 들어갑니다.
HTML5 Canvas를 활용해 이미지를 분석해서, 구글 포토에 올린 이미지들은 여전히 블로그의 배경색이 깔립니다.

이 Stackoverflow 글을 참고하시면 이미지를 분석하는 다양한 방법을 참고하실 수 있습니다.

모바일에선 줌 효과를 볼 수 없어 아쉬웠는데, 이젠 모바일에서도 눈에 띄는 효과가 생겼습니다.

하나 단점은, 안 그래도 이미지의 현재 위치, 이상적인 크기, 화면 중앙에 오기까지 움직여야 하는 거리 등 계산할 게 많아 기기가 하는 일이 많거나 많이 예민한 상태면 애니메이션이 바로바로 나타나지 않는 게 느껴질 때가 있는데, 이미지에 사용된 색상을 분석까지 해야 하니 바로바로 뜨지 않는단 느낌이 강해질까 두렵네요.
제 데스크탑 기준으로 이미지 분석이 가장 이상적으로 작동했을 때 16ms 정도가 소요되고, 사양이 안 좋은 기기들 오랜만에 켜서 테스트해봐도 이상적으로만 작동해주면 크게 문제가 되지 않는데, 화면이 전환된 직후 등의 상황에선 확실히 바로바로 뜨지 않는단 느낌이 강하게 들더라고요.
혹여 이 방법이 별로 안 좋다고 느껴지시면, 피드백해주시면 감사히 받겠습니다.

오류 수정 및 미약한 최적화

기존엔 picture태그에 이미지를 추가해 줌 효과를 표시했으나, 이젠 body가 끝나는 부분에 이미지를 추가하도록 했습니다.

줌 될 picture 태그들에 position: relative를 추가할 필요도 없고, 요즘 크롬에 position: relative 요소 아래에 position: absolute 요소, 혹은 그 자식 요소에 transform을 변경하면 덜컹거리며 움직이는 오류가 있던데 그 오류도 해결할 수 있습니다. 또한, 애니메이션도 극도로 미약하게나마 성능을 향상하는 방법입니다.

무엇보다 덜컹거리질 않으니 보기 좋네요.

시간 표시 오류 수정

드디어 iOS 사파리에서도 시간이 '2일 전'처럼 제대로 표시됩니다.
클라이언트에서 시간 변경하려니 잡다한 오류가 워낙 많아서 그냥 서버에서 변경해서 보내버리고 있었기에 큰 문제는 없었지만, 아무튼 오랫동안 골치던 오류 잡으니 속이 시원하네요.

2021-02-03 22:54+0900을 2021-02-03T22:54+0900으로 수정하니 깔끔하게 인식합니다.

메가 메뉴 렌더링 오류 수정

크롬 88버전 업데이트 이후에 메가 메뉴가 활성화되면 상단 네비바의 렌더링이 깨지는 오류가 발생했습니다.
상단 네비바에 추가한 backdrop-filter때문이었는데, CSS만으론 backdrop-filter를 제거하는 것 외엔 해결할 방도가 없어 :hover를 자바스크립트에서 처리하게 하였습니다.

CSS가 할 수 있는 거 JS에 넘기는 건 개인적으로 선호하지 않는데, 어쩔 수가 없네요.

기타

• class를 모두 제거했습니다.
• 숨긴 이미지를 클릭하면 이미지가 드러남과 동시에 줌 되던 오류를 수정했습니다.
• 글 공유 버튼의 css 선택자를 다듬었습니다.
• positoin: relative를 최대한 없애고 있습니다.
• 원고지 디자인을 삭제했습니다.
• 더는 svg를 webp로 변환하지 않습니다.