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시간쯤 저러고 있으니 살짝 정신이 나갈 것 같더라고요.

언젠가 완성하게 되면 사진전으로 찾아뵙겠습니다.