201207 블로그 제작일지
개발 •
오랜만에 굉장히 신 나는 마음으로 제작일지를 작성합니다.
주체할 수 없는 아드레날린에 휩싸이는 기분…굉장히 오랜만이네요.
이미지 줌 효과
이미지를 클릭해보세요!
예전부터 medium을 보며 탐내던 기능인데, 1180px로 이미지의 너비 제한을 걸어두고 클릭하면 원본을 보여주는데, 이미지를 불러오기 전엔 크기를 알 수 없어 결국 x, y 좌표만 움직이는 애니메이션이 되는지라 시도도 안 해보고 마음 한 편에 담아만 두고 있었습니다.
매번 탐만 내다보니 이번에 구현이라도 한 번 해보자 싶어서 만들었는데, 생각보다 훨씬 예뻐서 그냥 x, y 좌표만 움직이더라도 이 방식을 쓰려 했는데…중요한 걸 깨달았습니다.
<img loading="lazy" width="1180" height="664" alt="홈 화면" class="wp-image-2521" sizes="(max-width: 1180px) 100vw, 1180px" src="https://img.marshallku.com/wp-content/uploads/2020/12/home-1180x664.png" srcset="https://img.marshallku.com/wp-content/uploads/2020/12/home-1180x664.png 1180w, https://img.marshallku.com/wp-content/uploads/2020/12/home-400x225.png 400w, https://img.marshallku.com/wp-content/uploads/2020/12/home-768x432.png 768w, https://img.marshallku.com/wp-content/uploads/2020/12/home-1536x864.png 1536w, https://img.marshallku.com/wp-content/uploads/2020/12/home.png 1920w">혹시 이미지를 불러오지 않고 이미지 원본 너비와 높이를 구할 방법이 바로 보이시나요?
맞습니다, srcset의 숫자w 값으로 원본까진 아니더라도 화면에 꽉 채우고도 남는 너비 값을 구할 수 있습니다.
/[0-9]+w/g 정규표현식을 이용해 srcset에 들어있는 너비 값들을 모으고, Array.prototype.reduce()를 통해 최댓값을 구합니다. 그다음 원본 이미지의 너비와 높이를 통해 비를 구하고, 비례식을 이용해 화면의 너비와 높이보다 이미지의 너비나 높이가 커지지 않게 하고, 마지막으로 이미지의 원래 너비와 상술한 과정으로 구한 최대 너비의 비를 구해 transform:scale()로 커지게 했습니다.
당연히 클릭한 작은 이미지를 잠깐 표시하다, 0.03초 뒤에 원본 이미지를 표시해 원본 이미지를 불러오는 동안엔 작은 이미지를 표시하게도 해뒀고요.
Project SPA 이후로 가장 마음에 드는 업데이트네요. 전체 블로그 업데이트 목록 중에서도 5위 안에 무조건 들어가지 않을까 싶습니다.
페이지 전환 효과
전에 쓰던 효과는 정신이 좀 없는 것 같아 다시 스크롤로 바꿨습니다.
스크롤 속도를 기존보다 조금 빠르게 하고, 배너와 메인 컨테이너(글 목록이나 본문 표시되는 영역)에 애니메이션을 추가했습니다.
추가로 동영상에서 보이듯 뒤로 가기 / 앞으로 가기를 해도 무조건 스크롤을 최상단으로만 올리던 예전과 달리 이젠 뒤로 가기 / 앞으로 가기를 하면 스크롤 위치를 기억해뒀다가 해당 위치로 스크롤 합니다.
내비게이션 바 카테고리
원랜 헤더 카테고리였는데 이름이 좀 많이 길어졌네요.
여하튼 선택된 카테고리를 표시하는 방법을 오른쪽 끝에 화살표를 하나 두는 것에서 사진에 보이는 것처럼 업데이트했습니다. 개인적으로 카테고리 이름 아래의 줄과 통일성도 생기고 훨씬 세련된 느낌이네요.
any 타입과 작별인사
사실 아직 한 두어 개 남아있긴 하지만, 그건 그냥 any로 두는 게 나은 것들이고, 귀찮아서 any로 뒀던 것 중 마지막인 블로그의 JSON 응답을 모두 interface로 정리했습니다.
기타
- 배너와 푸터에 표시되는 곡선 디자인 변경
- 댓글에서 블로그 주인의 링크를 클릭하면 고전적인 방식으로 페이지가 업데이트되던 오류 수정
- @types 폴더를 추가해 interface 등을 따로 관리
추가로 요즘 하고 있는 것
예전에 온라인에서 3D 사진전을 진행하는 걸 보니 꽤 괜찮더라고요.
한 번 저도 만들어보고 있는데, 벽은 통과할 수 없다는 아주 간단한 물리법칙을 구현하는 게 어찌나 힘들던지...사실 저것도 앞으로만 가서 그렇지 마우스 돌리거나 앞과 옆으로 번갈아 움직이며 비비면서 들어가면 아직도 벽을 통과합니다. 양자도약 같은 건 만들 생각이 전혀 없었는데 일어나고 있네요.
앞으로 벽 통과하는 버그가 생기는 게임을 욕하지 않기로 굳은 다짐을 하며 코드 수정 -> 벽에 부딪히기를 반복하는 중입니다. 한 5시간쯤 저러고 있으니 살짝 정신이 나갈 것 같더라고요.
언젠가 완성하게 되면 사진전으로 찾아뵙겠습니다.