블로그스팟 모바일 URL ?m=1 간단 제거 방법
블로그스팟 고질병 ?m=1
구글 블로그인 blogspot은 모바일 기기로 접속하면 주소가 달라져요. 정확히는 기본적인 주소가 뒤에 ?m=1이라는 문자가 붙은 주소로 바뀌죠.
놔둬도 블로그에 해롭지는 않지만 두가지 문제, 짧은 순간이지만 리디렉션이 발생하고, 보기에 거슬린다는 문제가 있어요.
가능하다면 제거하는 게 좋겠는데, 일반적인 리디렉션으로는 해결할 수 없다는 문제가 있어요. 해 봤자 모바일 기기에서는 다시 ?m=1이 붙은 주소로 돌아오는 무한반복에 빠져 페이지 접속이 안 될 뿐이고요.
그래서 일반적인 리디렉션이 아니라 약간 다른 방법, 트릭이 필요해요.
?m=1을 제거하는 스크립트 (JS)
<script>
//<![CDATA[
// 모바일 주소 문제
const chkMblUrl = location.href.includes("?m=1") ? 1:0;
const getPath = location.pathname;
const setReplaceUrl = getPath.slice(getPath.lastIndexOf("/")+1);
function repHistory() { history.replaceState("", "", setReplaceUrl); }
if(chkMblUrl) { repHistory() }
// maidvsai.com
//]]>
</script>간단하게 보자면 위 코드를 HTML 편집에서 헤드(head) 태그 제일 앞에 붙여 넣으면 끝이에요.
특별한 것은 없고 단순히 주소에서 ?m=1이 발견되면 현재 URL의 마지막 슬래쉬(/) 이후 내용만 추출해서 브라우저 기록을 교체하는 거죠.
location.pathname은 기본 경로(path) 외에 해쉬-프래그먼트(#) 등 잡다한 것 없는 상태가 반환되므로 딱히 신경 쓸 것도 없어요.
흔히 사용하는 meta refresh를 이용한 리디렉션은 새로운 주소로 이동하는 것이라 페이지 새로 고침이 발생한다는 단점이 있지만, history.replaceState()를 사용하면 브라우저의 기록을 바꾸는 것 뿐 실제로 '이동'하는 것은 아니어서 새로고침이 발생하지 않는 장점이 있어요.
다만, 약간의 주의점이 있어요. 새로운 주소는 같은 경로에(same origin) 있어야 한다는 점이에요.
replaceState()는 도메인 주소 뒤의 현재 경로 자체는 그대로 두고 경로 뒷부분을 지정한 문자열로 바꾸는 기능이거든요. 그래서 현재 경로에 존재하지 않는 파일명(주소)을 사용하면 방문자가 직접 새로고침 시 없는 페이지로 연결되면서 404 not found가 떠요.
축소된 코드
만약 코드를 극도로 짧게 만들고 싶다면 아래와 같이 조건문을 생략할 수도 있어요.
<script>
//<![CDATA[
// 모바일 주소 문제
const getPath = location.pathname;
const setReplaceUrl = getPath.slice(getPath.lastIndexOf("/")+1);
history.replaceState('', '', setReplaceUrl);
// maidvsai.com
//]]>
</script>이렇게 하면 언제나 코드가 실행되긴 하지만 PC 접속처럼 주소에 ?m=1이 없다면 아무 일도 일어나지 않아요. 주소 기록이 교체되어도 어차피 똑같은 내용이니 변화가 보이지 않는 거죠.
예제에서는 코드가 잘려 보이지 않게 하려고 getPath라는 상수를 사용하고 있지만, 실제로 자바스크립트를 적용할 때는 해당 상수 없이 location.pathname을 바로 사용하면 딱 두 줄로 코드가 끝나요.
더 줄이려면 history.replaceState() 내부에서 계산하도록 만들면 되는데, 그럼 한 줄로 끝낼 수도 있고요.
대신 모바일이 아니라도 언제나 실행중이라서 주소 끝 슬래시 상태에 따라 오류 가능성 있으니 주의하셔요.
문제점1: 스크롤 튐
history.replaceState()는 페이지 새로고침이 없다는 장점이 있지만 역시 단점도 있어요.
자바스크립트를 사용하다보니 즉시 반응이 아니고 실행 시 어쩔 수 없이 딜레이가 약간 생기는데요, 기기 성능이 낮을 수록 더 눈에 띄고 또 페이지 스크롤 값이 변하는 문제가 있었어요.
더 자세하게는, 모바일에서 블로그를 방문한 사람이 페이지가 열린 '즉시' 스크롤을 쭉 내렸을 경우 history.replaceState()로 주소를 바꿈과 동시에 스크롤이 약간 상단으로 이동해 버린다는 의심이 있어요.
<script>
//<![CDATA[
// 모바일 주소 문제
const chkMblUrl = location.href.includes("?m=1") ? 1:0;
const getPath = location.href;
const setReplaceUrl = getPath.replace("?m=1","").slice(getPath.lastIndexOf("/")+1);
function replaceUrl() { history.replaceState("", "", setReplaceUrl); }
if(chkMblUrl) { replaceUrl() }
// maidvsai.com
//]]>
</script>화면 크기만 바꾼 뒤 단순히 새로고침 할 때 해쉬 주소를 그대로 유지하도록 코드를 변경해서 만들어 보면 해당 문제가 잘 보여요. 해쉬 주소에 따라 위치가 변경되긴 하지만 해당 제목 부분이 화면 최상단이 아니라 약 250~500px 정도 아래로 내려와 있더라고요.
기기 성능 문제인지 모바일 화면에서만 발생하고 PC화면에서는 발생하지 않았고, 일관되지 않았기에 정확한 원인이나 조건은 확인하지 못했어요.
접속(일반주소) -> 리디렉션(모바일주소) -> 브라우저 기록 교체까지 3단계나 거쳐서 그럴 수도 있고요, 브라우저가 화면을 다시 그리는 과정에서 타이밍 꼬인 것도 의심되지만 역시 확실한 것은 아니에요.
근본적으로는 모바일 접속 시 ?m=1이 붙은 주소로 바꿔버리는 blogspot의 문제긴 하지만, 방문자 입장에서는 누구 잘못이든 간에 '이 블로그는 문제있다'고 느끼게 된다는 점이 중요하죠.
물론 이런 식으로 화면 크기만 바꾼 뒤 새로고침 하는 것은 거의 존재하지 않을 만큼 드문 경우일 거예요.
그리고 페이지 접속 시 처음 0.5초 동안의 초기 스크롤은 대략 100px 내외니까 큰 문제는 아닐지도 모르고요.
스크롤 시점이 빠르다는 것은 화면이 빨리 뜬다는 뜻이니, 그만큼 기기 성능이 좋아서 로딩이 빠르다면 역시 방문자는 아무 문제도 못 느낄 수도 있고요.
문제점2: 리디렉션 취급?
지금은 데이터가 사라져서 확인이 안 되지만, history.replaceState()로 주소의 '?m=1'을 제거하던 기간에 구글 서치콘솔에서 모바일 주소를 리디렉션 페이지로 잡은 것 같아요. (2022년 확인)
원래는 리디렉션 페이지가 아니라 '적절한 표준 태그가 포함된 대체 페이지' 상태로 분류되었어요.
방법이야 어쨌든 다른 주소에 접근해서 그럴까요? canonical 주소는 여전히 ?m=1이 없는 원본을 가리키고 있었으니 문제는 없겠지만, 혹시나 하는 마음이 들어 불안한 것도 사실이에요.
아무래도 실제 운영 중인 블로그에 적용하기 전에 테스트 블로그를 만들어서 장기간 관찰을 해 봐야 할 것 같은데요, 문제는 과연 그만한 가치가 있을지는 회의적이란 거죠.
스크립트에 간단한 조건문을 추가하여 구글 봇이면 패스할 수도 있지만, 역시 '이렇게까지 해야 하느냐?'라는 의문이 생겨요.
그냥 보기싫다는 문제가 제일 큰건데, 이걸 굳이 불안함을 품고 쿼리 스트링을 떼어내야 하느냐는 회의감 섞인 의문이에요.
결론: 구글이 문제다
구글이 ?m=1 이걸 쉽게 제거할 수 있도록 해 주면 좋겠지만, 블로그스팟에서 지원하지 않으니 블로거들이 머리를 싸매도 결론은 나오지 않는 도돌이표예요.
강제 리디렉션 하나 끄는 것이 그렇게 어려운지...
반응형 사이트가 일반적이지 않을 때 만들어진 기능 같은데, 테마 설정에서 휴대기기 접속 시 데스크톱 테마를 표시하도록 지정하거나 반대로 모바일 테마를 보이게 선택해도 없어지지도 않아요. 모양만 있지 실제로는 아무 효과도 없는 좀비 코드더라고요.
블로그스팟이라는 서비스 자체는 망할 일은 없겠지만, 그래도 돈이 안되니 방치중인 서비스잖아요? 개선 가능성도 별로 없으니 이래저래 고민만 깊어가네요.