구글 블로그스팟 팁들 정리-모바일 주소 문제 해결 (?m=1) 등

구글 블로그인 blogspot은 모바일 기기로 접속하면 주소가 달라진다. 정확히는 기본적인 주소가 뒤에 ?m=1이라는 문자가 붙은 주소로 바뀐다.

놔둬도 블로그에 해롭지는 않지만 보기에 거슬린다는 큰 문제가 있어서 가능하다면 제거하는 게 좋겠는데, 일반적인 리디렉션으로는 해결할 수 없다. 해 봤자 모바일 기기에서는 다시 ?m=1이 붙은 주소로 돌아오는 무한반복에 빠져 페이지 접속이 안 될 뿐.

그래서 일반적인 리디렉션이 아니라 약간 다른 방법이 필요하다.

?m=1을 제거하기 (JS)

  //<![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() }
  // otakurestart.com
  //]]>
 

위 코드를 HTML 편집에서 헤드(head) 태그 제일 앞에 붙여 넣으면 끝. 물론 코드를 <script> 태그로 감싼 뒤에 넣어야 한다.

특별한 것은 없고 단순히 주소에서 ?m=1이 발견되면 현재 경로의 슬래쉬(/) 다음의 내용만 추출해서 브라우저 기록을 교체하는 것이다. location.pathname은 기본 경로 외에 해쉬-프래그먼트(#) 등의 잡다한 것이 없는 상태가 반환되므로 신경 쓸 것도 없다.

일반적인 리디렉션인 meta refresh 등은 새로운 주소로 이동하는 거라서 결국은 브라우저의 새로 고침이 발생한다는 단점이 있지만, history.replaceState()를 사용하면 브라우저의 기록을 바꾸는 것 뿐 실제로 ‘이동’하는 것은 아니어서 새로고침이 발생하지 않는다.

약간의 주의점이라면 replaceState()로 바꾸는 새로운 주소는 현재 경로와 같은 곳에 있어야 한다는 점이다. (History.replaceState() – MDN)

축소된 코드

만약 코드를 극도로 짧게 만들고 싶다면 아래와 같이 조건문을 생략할 수도 있다.

  //<![CDATA[
  // 모바일 주소 문제
  const getPath = location.pathname;
  const setReplaceUrl = getPath.slice(getPath.lastIndexOf("/")+1);
  history.replaceState('', '', setReplaceUrl);
  // otakurestart.com
  //]]>
 

이렇게 하면 언제나 코드가 실행되긴 하지만 PC 접속처럼 주소에 ?m=1이 없다면 아무 일도 일어나지 않는다. 주소 기록이 교체되어도 어차피 똑같은 내용이니 변화가 보이지 않는 것이다.

그리고 예제에서는 코드가 잘려 보이지 않게 하려고 getPath라는 상수를 사용하고 있지만, 실제로 자바스크립트를 적용할 때는 해당 상수 없이 location.pathname을 바로 사용하면 딱 두 줄로 코드가 끝난다. 더 줄이려면 history.replaceState() 내부에서 계산하도록 만들면 되는데, 그럼 한 줄로 끝낼 수도 있다.

단점

history.replaceState()는 페이지 새로고침이 없다는 장점이 있지만 역시 단점도 있다. 자바스크립트를 사용하다보니 즉시 반응이 아니라 실행 시 어쩔 수 없이 딜레이가 약간 생기는데, 기기 성능이 낮을 수록 더 눈에 띄고 또 페이지 스크롤 값이 변하는 문제도 있다.

상세하게 이야기하자면 모바일에서 블로그를 방문한 사람이 페이지가 열린 즉시 스크롤을 쭉 내렸을 경우 history.replaceState()로 주소를 바꿈과 동시에 스크롤이 약간 상단으로 이동해 버린다는 의심이 있다. 기기 성능 문제인지 모바일 화면에서만 발생하고 PC화면에서는 발생하지 않았다.

접속(일반주소) -> 리디렉션(모바일주소) -> 브라우저 기록 교체까지 3단계나 거치기 때문으로 보이는데, 성격이 급한 사람은 아마 화를 내면서 나가버릴지도 모른다.

  //<![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() }
  // otakurestart.com
  //]]>
 

화면 크기만 바꾼 뒤 단순히 새로고침 할 때 해쉬 주소를 그대로 유지하도록 코드를 변경해서 만들어 보면 해당 문제가 잘 드러난다. 해쉬 주소에 따라 위치가 변경되긴 하지만 해당 제목 부분이 화면 최상단이 아니라 약 250~500px 정도 아래로 내려와 있다.

근본적으로는 모바일 접속 시 ?m=1이 붙은 주소로 바꿔버리는 blogspot의 문제긴 하지만, 방문자 입장에서는 누구 잘못이든 간에 ‘이 블로그는 문제있다’고 느끼게 된다는 점이 중요하다.

물론 이런 식으로 화면 크기만 바꾼 뒤 새로고침 하는 것은 거의 존재하지 않을 만큼 드문 경우겠지.

그리고 페이지 접속 시 처음 0.5초 동안의 초기 스크롤은 대략 100px 내외니까 큰 문제는 아닐지도 모르고, 스크롤 시점이 빠르다는 것은 화면이 빨리 뜬다는 뜻이니 그만큼 기기 성능이 좋아서 처리가 빨리 되었다면 역시 문제가 느껴지지 않을 수도 있겠다.

이것도 리디렉션 취급?

지금은 데이터가 사라져서 확인이 안 되는데, history.replaceState()로 주소의 ‘?m=1’을 제거하던 기간에 구글 서치콘솔에서 모바일 주소를 리디렉션 페이지로 잡은 것 같다.

방법이야 어쨌든 다른 주소에 접근해서 그런가? canonical 주소는 여전히 ?m=1이 없는 원본을 가리키고 있었으니 문제는 없겠지만, 혹시나 하는 마음이 들어 불안한 것도 사실이다.

아무래도 실제 운영 중인 블로그에 적용하기 전에 테스트 블로그를 만들어서 장기간 관찰을 해 봐야 할 것 같다. 그런데 과연 그만한 가치가 있을지는 회의적이다.

반응형 사이트가 일반적이지 않을 때 만들어진 기능 같은데, 테마의 모바일 설정에서 휴대기기 접속 시 데스크톱 테마를 표시하도록 지정하거나 반대로 모바일 테마를 보이게 선택해도 없어지지 않는다.

 

1. 자신의 페이지뷰 집계 방지

티스토리는 자체적으로 걸러주는 것 같은데, 블로그스팟은 어떤 옵션을 켜지 않으면 자신이 블로그 게시물을 봐도 페이지뷰에 집계가 된다.

이를 막고 싶으면 통계 메뉴에 들어간 뒤 스크롤을 맨 아래로 내려서 '자체 페이지뷰 추적 관리' 를 클릭한다.

 

 

그리고 '이 블로그에서 내 페이지뷰를 추적하지 않습니다.' 에 체크한다. 이렇게 하면 현재 브라우저에 한해서 내 페이지뷰가 집계되지 않는다.

하지만 시크릿 모드 상태에서 켰거나, 다른 브라우저로 접속할 경우 이 옵션은 초기화되어 버린다. 여러 개의 브라우저로 블로그에 접속할 거라면, 일일이 브라우저마다 이 옵션을 켜줘야 한다. 번거롭게도...

 

 

2. 블로그스팟의 본문 치환자

티스토리에서 본문 치환자는 '##_article_rep_desc_##' 였다. 그럼 블로그스팟에서는 뭘까?

구야비의 Feedify 스킨 기준으로...

 

<data:post.body/> 이다.

이 태그가 2개 있다면, 아래쪽의 태그가 진짜다. 위쪽 태그는 주변을 수정해도 반영되지 않는 걸 확인했다.

어느 쪽이 반영되는 태그인지 확인해보려면, 해당 태그 밑에다 '테스트테스트' 라고 쓰고 저장한 뒤, 블로그 게시물을 열어서 '테스트테스트'가 출력되면 그쪽이 반영되는 태그라고 생각하면 된다.

 

 

3. 게시물 수정 링크

티스토리는 게시물 수정 버튼이 있는데, 블로그스팟은 없기 때문에 따로 만들어줘야 한다.

인터넷을 돌아다니면서 겨우 작동이 되는 코드를 찾아냈다. (링크)

 

javascript:window.open("https://www.blogger.com/blog/post/edit/블로그 고유번호/"+document.body.innerHTML.match(/\/feeds\/([A-Z0-9]+)\/comments\/default/i)[1]);

블로그 고유번호는 자기 블로그스팟의 '글' 메뉴로 들어가면 주소에 '엄청나게 긴 숫자' 가 있는데, 바로 그걸 말하는 것이다.

 

 

자기 블로그의 숫자로 바꿔준 후, 블로그 상단 메뉴 등에 링크를 걸어놓으면 된다.

 

 

4. 메인 페이지(대문) 생성 / 유입로그 기능 추가.

현재 사용중인 구야비의 Feedify 스킨은 홈 화면에 모든 게시물이 나오게 하고 있다. 그러면 '비공개' 라벨이 걸린 게시물도 같이 노출되므로 이를 차단할 필요가 있다. 대문용 페이지를 생성해서 블로그 접속 시에 띄우도록 하자.

 

새 게시물을 작성한다. 제목은 그냥 '홈페이지' 로 쓰려다가... 사실상 대문 용도로 쓰게 될 것이니 블로그 제목을 넣는다.

그리고 퍼머링크는 'home.html' 으로 지정되도록 하고, HTML 모드에서 다음과 같은 태그를 붙여넣었다.

(아래 코드는 구야비의 Feedify 스킨에서만 작동되며, 다른 스킨은 호환되지 않습니다.)

 

<style>
 .entry-header.p-eh.has-meta,
 .feedify-pro-blog-post-comments.is-visible,
 .post-nav-older-link,
 .post-nav-newer-link,
 .entry-labels
  {
display: none;
}
</style>
<span style="color: black; display: inline-block; font-size: 48px; line-height: 60px; margin-bottom: 30px;"><b>오른쪽의 카테고리 메뉴에서 보고 싶은 것을 고르시오.</b></span><br />

붙여넣은 뒤 이미지도 하나 첨부하고 게시 누른다.

그리고 퍼머링크가 home.html으로 정확히 지정된 걸 확인한 뒤, 설정의 '맞춤 리디렉션' 으로 간다.

(다른 주소로 지정되면 초안으로 돌린 뒤 정확히 지정될 때까지 계속 한다. 언더바 꼼수를 잘 활용하도록 하자.)

 

 

맞춤 리디렉션에서 '추가' 누른 뒤 올린이에 '/' 한번 치고, 받는 사람에 아까 등록한 대문 페이지를 입력하고 확정 - 확인 누른다.

그 후 다시 항목을 선택해서 슬래시 하나를 제거하고 확인 누른다. 그리고 저장 눌러서 빠져나온다.

 

 

이러면 블로그 홈 화면이 대문 페이지로 바뀌게 된다.

하지만...

 

나중에 알게 된 바에 의하면, 그냥 HTML 편집에서 'title-wrap main-title' 을 검색하고 (구야비 Feedify 스킨 기준) 두번째로 검색된 해당 태그의 바로 윗 줄에 태그를 입력하면 되었다. 굳이 대문용 게시물을 따로 만들면서 리디렉션 할 이유가 없었던 것이다.

(그리고 title-wrap main-title의 div 태그를 주석 처리한 뒤, '레이아웃 - 블로그 게시물 - 기본 페이지에 표시되는 게시물 수' 를 0으로 하면 대문에는 게시물 목록이 뜨지 않게 된다.)

 

 

구글 드라이브에 들어가서 'Google 스프레드시트' 를 클릭한다.

 

 

일단 스프레드시트의 이름부터 바꾼다.

 

 

그런 다음 '확장 프로그램' - 'Apps Script' 클릭한다.

 

 

Apps Script 페이지가 열리면 이것도 이름부터 변경한다.

대충 '유입로그 기록' 이라고 정하자.

 

 

그 후 메모장 파일에 있는 코드를 몽땅 복사해서 붙여넣는다. 그리고 저장 (디스켓) 버튼 누른다.

(메모장의 코드는 참조한 블로그에서 가져왔으며, 일부 코드는 작동 오류가 있어서 수정했다.)

 

 

 

 

 

저장됐으면 함수 목록에서 'setup' 을 선택하고 '실행' 버튼 누른다.

 

 

'권한 검토' 누른다.

 

 

고급 설정 어쩌구 클릭한 뒤 '~(으)로 이동 (안전하지 않음)' 클릭한다.

 

 

'허용' 누른다.

 

 

이렇게 하면 스크립트 실행에는 성공한다. 이제 배포만이 남았다.

 

 

화면 오른쪽 위에 있는 '새 배포' 누른다.

 

 

톱니바퀴 누르고 '웹 앱' 선택한다.

 

 

'새 설명' 에는 대충 입력하고, '다음 사용자 인증 정보로 실행' 에는 '나' 를 선택하고, '액세스 권한이 있는 사용자' 는 '모든 사용자' 로 지정한다. 그리고 '배포' 누른다.

 

 

'액세스 승인' 클릭한다.

 

 

아까와 비슷한 과정이다. '~Advanced' 클릭하고 'Go to ~ (unsafe)' 클릭한다.

 

 

'Allow' 누른다.

 

 

그 후 '웹 앱'의 URL을 복사해서 메모장에 붙여넣어둔다.

그리고 창을 닫는다.

 

 

참고로 유입로그 저장일자는 기본값인 3일 그대로 두었다. 티스토리도 유입로그를 최근 3일까지만 보존하기 때문이다.

변경하고 싶으면 값을 바꾼 뒤, 저장 - setup 선택 - 실행 - 배포(업데이트)... 뭐 그런 식으로 해주면 반영이 될 것이다.

이제 시간마다 로그 기록을 판별해서 지울지 말지 결정하게 해주는 트리거를 작동시켜야 한다. 왼쪽 메뉴에서 '트리거' 를 클릭한다.

 

 

처음 들어오면 환영 메시지가 뜨는데, 대충 아무 공백이나 클릭한다.

 

 

화면 오른쪽 아래의 '트리거 추가' 버튼을 클릭한다.

 

 

실행할 함수는 'cleanUp' , 트리거 기반 시간 유형은 '시간 단위 타이머', 시간 간격은 '2시간마다' 로 하고 오른쪽 아래의 '저장' 버튼을 누른다.

 

 

트리거 목록에 'cleanUp' 이 들어갔으면 잘 만들어진 것이다.

 

 

이제 블로그스팟 메뉴의 '테마 - HTML 편집' 에 들어가서 아래 메모장의 코드를 <head> 밑에다 붙여넣는다.

단, 그냥 무턱대고 붙여넣으면 안되고, 일부 코드는 자기에게 맞게 수정해서 넣도록 한다. (블로그 주소나 아까 메모장에 복사했던 주소 말이다.)

다 붙여넣었으면 저장 디스켓을 눌러서 블로그에 반영한다.

 

블로그스팟_유입로그만들기_테마HTML태그.txt

0.00MB

 

 

 

다시 유입로그 스프레드시트로 돌아온 뒤, 1행에  'Timestamp', 'path', 'title', 'referrer' 라고 적는다.

 

 

그리고 다른 사이트에 자신의 블로그스팟 주소를 링크하고, 링크를 클릭해서 접속한다.

접속 후에 바로 스프레드시트를 확인하러 간다. 기록이 생기면 성공적으로 기능이 도입된 것이다. 

 

 

이제 Timestamp가 있는 A열 전체를 선택하고, '서식 - 숫자 - 날짜 시간' 을 선택해준다.

그리고 A열의 셀 너비를 늘려주면 시,분,초 단위까지 모두 볼 수 있게 된다.

 

 

마지막으로 화면 우측 상단의 '공유' 버튼을 눌러서 '링크가 있는 모든 사용자' 로 모드를 바꾼 다음, '링크 복사' 를 누른다.

그리고 복사된 주소를 자기만 볼 수 있는 페이지(비공개 게시물 등)에다 링크 걸어둔다.

이렇게 하면 앞으로 해당 링크를 클릭했을때 바로 유입로그를 확인할 수 있게 되니까 편해진다.

 

 

5. 콘텐츠 경고 우회 스크립트

블로그스팟은 경고창을 다는 조건으로 성인물까지도(!) 게시할 수가 있다. 물론 구글 기준에 의해 허용된 범위만 올릴 수 있고, 블로그 메뉴에서 관련 옵션을 켜줘야 한다. (링크)

 

그러나 해당 옵션이 켜진 블로그는, 연령 확인 때문에 반드시 구글에 로그인해야 접속할 수 있다. (옵션에서 연령 확인 없이 접속하게 할 수도 있지만, 대부분의 블로그는 기본값으로 켜져있다.)

따라서 비로그인으로도 이를 우회할 수 있는 방법을 여기에 팁으로 작성해둔다.

 

(※ 이 방법은 나중에 막힐 수도 있습니다.)

5-1. Tampermonkey 부가기능을 설치한다. (링크)

5-2. 아이콘을 클릭하고 '새 스크립트 만들기' 를 클릭한다.

5-3. 미리 생성된 내용은 싹 지우고, Github 링크의 스크립트를 모두 복사해서 붙여넣는다.

5-4. @match http:// 밑 줄에다...

// @match https://*.blogspot.com/*

를 추가하고 '파일 - 저장(디스켓 모양)' 누른다.

5-5. 접속해 본다. 그래도 경고 화면이 뜨면 '뒤로 가기' 를 해본다.

 

 

6. 이미지 / 동영상 업로드 제한 크기

(2023년 7월 기준)

 

* 이미지

사실상 무제한이다. 6102x6102 png 이미지를 업로드했는데도 구글 드라이브의 용량에 포함되지 않았다.

그러나 업로드된 이미지를 다시 다운로드 받으면 용량이 줄어든 채로 받게 된다. 약간의 화질 열화는 감수해야 되는 것 같다.

 

* 동영상

기존의 정보에 오류가 있어서 다시 정정한다.

용량은 100MB 까지만 업로드된다. (100MB를 초과한 영상은 최대 파일 크기 초과 오류가 뜬다.)

해상도는 100MB만 초과하지 않으면 1440p 영상도 업로드가 된다.

러닝타임은 100MB만 초과하지 않으면 24분짜리 영상도 업로드가 된다. (15분을 초과하면 오류가 뜨는 줄 알았는데 아니었다.)

코덱은 H264 코덱까지만 가능하다. (H265 코덱은 업로드에 성공해도 영상이 재생되지 않는다.)

조건을 만족하면 업로드가 이루어지고, 구글 드라이브의 용량에 포함되지 않는다.

그러나 재생 시 화질은 360p와 720p만 선택할 수 있다.

 

 

7. 줄 간격을 줄이는 방법

구야비 Feedify 스킨은 <p> 태그의 줄 간격이 너무 벌어져 있다. 이를 수정할 필요가 있다.

 

 

테마 - HTML 편집에서 '.post-body p' 로 검색하고, margin-bottom을 25px에서 2px로 바꾸고 저장한다.

 

 

그러면 줄 간격이 줄어들면서 본문이 좀 더 깔끔해지게 된다.

 

 

8. 나눔고딕으로 폰트 변경 (PC에 설치된 경우에만 폰트 출력)

 

 

테마 - HTML 편집에 들어가서 <head> 태그 밑에 나눔고딕 폰트 태그를 넣는다.

원래는 웹폰트 방식으로 설정하였으나, CLS 문제 때문에 어쩔 수 없이 컴퓨터에 설치된 경우에만 나눔고딕 폰트로 출력되도록 조치한다.

 

<!-- 나눔고딕 -->
<style>
@font-face {
    font-family: 'Nanum Gothic'; 
    font-style: normal;
    font-weight: 400;
    src: local('NanumGothic');
}

@font-face {
    font-family: 'Nanum Gothic'; /* Nanum Gothic Bold x */
    font-style: normal;
    font-weight: 700;
    src: local('NanumGothicBold');
}

@font-face {
    font-family: 'Nanum Gothic'; /* Nanum Gothic ExtraBold x */
    font-style: normal;
    font-weight: 800;
    src: local('NanumGothicExtraBold');
}

@font-face {
    font-family: 'Nanum Gothic'; /* Nanum Gothic italic x */
    font-style: italic;
    font-weight: 400;
    src: local('NanumGothicItalic');
}
</style>

 

 

(구야비 Litespot 스킨 기준)

그런 다음 아랫쪽 CSS Variables의 :root 로 가서 --어쩌구-font 라고 써있는 항목에 모두

 

'Nanum Gothic', 

 

을 추가해준다. 그리고 $가 붙은 것은 맨 뒤로 보내거나 삭제한다. (잘 모르겠으면 위의 스샷을 참고)

 

 

9. 폰트어썸 비활성화

폰트어썸은 유튜브, 페이스북의 아이콘을 넣을 수 있는 좋은 기능이지만, 이것이 모바일 페이지 로딩 속도에 영향을 주니 아쉽지만 비활성화 해야 한다.

fontawesome.min.css 라고 검색한 뒤 나오는 b:tag 태그를 주석처리해 준다.