이 문제는 크롬, 특히 모바일 크롬에서 심각하게 나타나는 문제다.

내 휴대폰으로 내 블로그를 우연히 확인해 보다가 심각한 오류를 발견했다.

큰 사이즈의 플리커 이미지가 넘쳐 보이는 것이다.

이 문제로 인해 가로스크롤이 길게 생겼고,

그 큰 사이즈라는게 말이 큰 사이즈지 실제로는 가로 1000픽셀짜리 그림이었기 때문에

그보다 더 큰 사이즈가 요구되는 데스크탑 스크린샷(Full HD: 1920px)같은 경우에는

더 심각하게 문제가 될 상황이었다.

*

이런 문제는 모바일 가독성에도 심각한 영향을 줄 뿐 아니라

구글 SEO에도 부정적 영향을 주기 때문에 긴급하게 고칠 필요성이 있다.

특히 스마트폰의 이용량이 전체 매체 이용량의 80%나 되는 최근 유저들의 경향,

그리고 그 모바일 중에 특히 우리나라의 경우 안드로이드 사용자가 90% 정도이고 그 사람들 대부분은 크롬을 쓸 것으로 예측되기 때문에

어림잡아도 전체 이용자의 60% 이상은 이런 가독성 문제를 겪을 거라는 것을 예측할 수 있다.

상황이 이렇기 때문에 이는 빨리 바로잡아야 하는 이슈가 된다.

*

수정 전의 모습이다. 이건 PC라서 덜 심각해보이는 거고, 모바일, 특히 스마트폰에서는 문제가 더 심각해진다.

문제는 이 코드를 분석해 봤더니, 워드프레스에서 플리커로 사진을 넣을 때 자체적으로

인라인으로 width값과 height값을 때려박는다는 것이다.

추측컨데 워드프레스 자체적으로 플리커 이미지를 넣을 때 이런 자바스크립트 코드가 들어갈 것으로 추정된다.

이 추측이 사실이라면, 적게는 해당 테마(Geologist – Yellow)를 사용하는 모든 사용자,

많게는 모든 워드프레스 블로그 사용자가 겪을 문제다.

*

문제는 내가 wordpress.com 상의 프리미엄 요금제라는 것이다.

이는 워드프레스 자체의 자바스크립트를 내가 수정하는 게 사실상 불가능하다는 의미다.

그렇다면 CSS 코딩 만으로 이 문제를 해결할 수 있을까?

결론적으로 말하면 해결할 수 있다. 그러니까 이 블로그에 글을 썼을 것이다.

코딩으로 찾아내서 적용하는 데 딱 30분 걸렸고, 지금은 글을 쓰기 위해 조금 더 작업을 하다보니 시간이 조금 더 걸리게 되었다.

*

프론트엔드 계열의 문제이기 때문에 브라우저 개발자모드에서 바로 인라인으로 CSS를 때려박아서 실시간으로 변화를 확인할 수 있다.

내가 처음 구상한 CSS 해결 방법은 다음과 같다.

max-width:85vw;
max-height:fit-content;
block-size:fit-content;

이 방법대로 CSS를 적용해보기로 한다.

그런데 예감이 불길하다. 맨 마지막 코드가 빨간색으로 처리된다.

마지막 코드는 워드프레스 CSS에서 지원하지 않는 코딩 기법일 것이다. 왠지 적용이 안될 것 같다.

불길한 내 예감이 적중했다.

맨 마지막 코드가 적용되지 않았기 때문에, 결과론적으로 이미지 사이즈가 틀어졌다.

이래서는 안 된다. 또다른 가독성 문제가 생기기 때문이다.

뿐만 아니라 디자인적으로도 보기 안좋다. 다른 방법이 필요하다.

결국 해결했다.

max-width:85vw;
height:fit-content;

해법은 max-height가 아닌 height에 fit-content를 먹이는 것이다.

*

이 코딩기법에는 한가지 주의사항이 있다.

미디어쿼리를 넣어서 모바일에만 이 코드가 적용되도록 해줘야 한다.

미디어쿼리가 없다면 데스크탑에서도 이 코딩이 적용될 것이고,

그 결과 디자인적으로 보기싫은 결과가 나올 것이다.

Full HD PC 화면에서 width가 85vw면 얼마나 보기 싫겠는지 생각해보라.

*

결론적으로 이 부분에 대한 해결책은 다음과 같다.

@media (max-width: 599px) {
	main .wp-block-embed-flickr img {
		max-width: 85vw;
		height: fit-content;
	}
}

위의 값 중 85vw의 경우 본인의 스킨의 모양에 맞게 조금씩 값을 수정해줘도 괜찮다.

단지 내가 지금 사용하고 있는 워드프레스 스킨의 경우 85vw 값이 보기좋았을 뿐이다.

*

– 2022년 11월 10일 연습내용 –

– 블로그 썸네일은 flaticon에서 제공받았습니다. –

2022년 11월 10일 작성.