hi098123 Tistory Tip

스킨 편집을 되돌리는 방법 (초기화)

hi098123 — Sat, 25 Feb 2023 12:44:26 +0900

스킨을 잘못 편집한 경우 되돌릴 방법은 거의 없습니다.

하지만 방법은 몇 가지가 있습니다.

주로 CSS를 자유롭게 다루지 못하는 초보자가 겪을 수 있는 상황인데 몇 가지 방법을 소개해보려고 합니다.

초기 스킨의 CSS를 활용

처음 등록한 스킨의 CSS는 아래의 방법으로 저장가능합니다.

티스토리 관리자 페이지에 접속합니다.
"꾸미기" - "스킨 변경"에 들어갑니다.
"다운로드"를 누르면 사용중인 스킨의 초기버전이 다운로드 됩니다.

초기 업로드한 스킨을 사용하면 중간에 바꾼 변경작업들이 모두 날라가니 주의해야합니다.
많이 바꾸지 않았다면 이 방법을 권장합니다.

Google 색인된 데이터를 이용한 방법 (3시간 이내에만 가능)

구글에 "site:블로그 주소"를 검색합니다.
먼저 개발자도구(F12)를 켠 뒤
"더보기" - 저장된 페이지를 접속합니다.
style.css를 찾아서 cache에서 로딩되었는지 확인합니다. (회색으로 disk cache 또는 memory cache 가 아니라면 복원 불가)
클릭하여 response에서 style.css를 전부 복사 후(Ctrl + A & Ctrl + C) 스킨편집에서 붙여 넣으면 브라우저에 남아있는 캐시버전으로 복원할 수 있습니다.

이 정도가 가능한 방법이며, 색인 데이터는 html 구조뿐으로 구글서버에 style.css가 남아있지는 않습니다.
브라우저에 남아있는 캐시버전으로 사용하는 방법으로 브라우저에 캐시가 남아있지 않다면 이용불가능한 방법입니다.

따라서 무엇을 바꾸는지 잘 이해하고 있는 경우가 아니라면 변경사항 백업을 잘 해두시는것을 권장드립니다.

[2022년 11월] 티스토리 변경사항에 따른 유저 스크립트 소스 변경 필요사항

hi098123 — Wed, 23 Nov 2022 19:56:35 +0900

기존 DOMContentLoaded로 작동하던 코드는

document.addEventListener('DOMContentLoaded', function);

앞으로는 readystatechange에서 확인해야 안전합니다.

document.addEventListener('readystatechange', function(event) {
    if(document.readyState=='complete'){
    	//기존 function
    }
}

티스토리 UI관련 코드들이 모두 defer(IE9+)형태로 변경되어, 비동기로 로딩되어 실행되는데..

비동기로 실행되는 UI변경은 DOMContentLoaded이후에도 실행되어 충돌가능성이 있습니다.

hi098123 Tistory Tip 소개

hi098123 — Mon, 24 Jan 2022 17:37:19 +0900

주로 티스토리 팁을 올리는 블로그입니다.

사실 티스토리팁을 올리는건 애드센스 수익은 거의 안됩니다.

IT분야는 원래 수익이 낮고 + 애드센스를 게시하는 분들이라 광고 안누르는 습관이 있어서 더 그렇습니다.

사실 비영리에 가깝게 운영하려고 만든 블로그에요.

수익이 안되니 비슷한 블로그를 운영하는 사람이 적고, 금방 그만 두더라고요.

저는 원래 목적이 수익이 아니니 가볍게 글을 작성하고 있습니다.

어디서도 알려주지않는 여러 커스터마이징 방법을 누구나 조금만 배우면(html, css 편집 가능한 수준이라면) 활용할 수 있는 글을 주로 올리려고 하고 있습니다.

필요한 기능이 있다면 댓글에 남겨주시면, 시간날때 작성하고 있습니다.

티스토리 에디터 html 코드 넣기

hi098123 — Mon, 24 Jan 2022 00:36:59 +0900

생긴지는 한두달 된 기능인것 같은데, 따로 홍보도 없고 안내도 없어서 이번에 이걸 사용해서 글을 작성한 김에 내용을 소개하려고 한다.

티스토리 HTML블럭

티스토리 에디터의 고질적인 단점.

html코드를 수정후 기본모드에서 편집시 일부 코드가 사라진다.

처음 봤을때 이걸 방지하려고 만든 기능임을 짐작했다.

조금전 작성한 글에서 이 기능을 사용했는데 결과는 아래와 같다.

에디터상의 코드

<figure id="code_1642950967836" data-source="&lt;style&gt;
figure&gt;a[href*=&quot;//www.youtube.com&quot;]:before, figure&gt;a[href*=&quot;//youtube.com&quot;]:before, figure&gt;a[href*=&quot;//youtu.be&quot;]:before{
	position: absolute;
    content: '';
    width: 68px;
    height: 48px;
    top: 50%;
    left: 50%;
    margin-left: -34px;
    margin-top: -24px;
    background-image: url(&quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='100%25' version='1.1' viewBox='0 0 68 48'%3E%3Cpath d='M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z' fill='rgba(33,33,33,.7)'%3E%3C/path%3E%3Cpath d='M 45,24 27,14 27,34' fill='%23fff'%3E%3C/path%3E%3C/svg%3E&quot;);
}
figure&gt;a[href*=&quot;//www.youtube.com&quot;]:hover:before, figure&gt;a[href*=&quot;//youtu.be&quot;]:hover:before, figure&gt;a[href*=&quot;//youtube.com&quot;]:hover:before{
	background-image: url(&quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='100%25' version='1.1' viewBox='0 0 68 48'%3E%3Cpath d='M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z' fill='%23f00'%3E%3C/path%3E%3Cpath d='M 45,24 27,14 27,34' fill='%23fff'%3E%3C/path%3E%3C/svg%3E&quot;);
}
&lt;/style&gt;" data-ke-type="html">

결과로 출력되는 코드

<style>
figure>a[href*="//www.youtube.com"]:before, figure>a[href*="//youtube.com"]:before, figure>a[href*="//youtu.be"]:before{
	position: absolute;
    content: '';
    width: 68px;
    height: 48px;
    top: 50%;
    left: 50%;
    margin-left: -34px;
    margin-top: -24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='100%25' version='1.1' viewBox='0 0 68 48'%3E%3Cpath d='M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z' fill='rgba(33,33,33,.7)'%3E%3C/path%3E%3Cpath d='M 45,24 27,14 27,34' fill='%23fff'%3E%3C/path%3E%3C/svg%3E");
}
figure>a[href*="//www.youtube.com"]:hover:before, figure>a[href*="//youtu.be"]:hover:before, figure>a[href*="//youtube.com"]:hover:before{
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='100%25' version='1.1' viewBox='0 0 68 48'%3E%3Cpath d='M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z' fill='%23f00'%3E%3C/path%3E%3Cpath d='M 45,24 27,14 27,34' fill='%23fff'%3E%3C/path%3E%3C/svg%3E");
}
</style>

원리라고 하면 이런것 같다.

에디터가 코드블럭은 안건듦
코드블럭 내에 사용자 입력 html 데이터를 별도로 저장
글을 열람시에는 서버에서 처리되어 html데이터를 그대로 출력

이런 기능은 잘 만든것 같다.

https://tistory.hi098123.com/36 이런 글에서의 html 본문 코드 활용을 이젠 좀 더 쉽게 할 수 있겠습니다.

티스토리 이미지 유튜브 링크 꾸미기

hi098123 — Mon, 24 Jan 2022 00:19:20 +0900

흔히 유튜브를 공유할때 퍼가기 기능을 이용해서 공유를 합니다.

그러나, 이렇게 공유시 유튜브 리소스를 로딩하여 사이트 속도가 약간 저하될 수 있는데

사이트 내에서 영상을 재생해야하는 경우 위 방법을 어쩔수 없지만 사용해야됩니다.

유튜브로 이동하여 시청하게 할 때

이 글은 사이트(또는 티스토리 블로그) 외부로 나가 유튜브에서 시청하도록 하는 경우에만 해당됩니다.

HTML구조가 아래와 같을때

(일반적인 티스토리 이미지 구조)

figure
- a
  - img

CSS를 아래와 같이 설정합니다.

figure>a[href*="//www.youtube.com"]:before, figure>a[href*="//youtube.com"]:before, figure>a[href*="//youtu.be"]:before{
	position: absolute;
    content: '';
    width: 68px;
    height: 48px;
    top: 50%;
    left: 50%;
    margin-left: -34px;
    margin-top: -24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='100%25' version='1.1' viewBox='0 0 68 48'%3E%3Cpath d='M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z' fill='rgba(33,33,33,.7)'%3E%3C/path%3E%3Cpath d='M 45,24 27,14 27,34' fill='%23fff'%3E%3C/path%3E%3C/svg%3E");
}
figure>a[href*="//www.youtube.com"]:hover:before, figure>a[href*="//youtu.be"]:hover:before, figure>a[href*="//youtube.com"]:hover:before{
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='100%25' version='1.1' viewBox='0 0 68 48'%3E%3Cpath d='M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z' fill='%23f00'%3E%3C/path%3E%3Cpath d='M 45,24 27,14 27,34' fill='%23fff'%3E%3C/path%3E%3C/svg%3E");
}

미리보기

유튜브에 스펀지가 떠있길래 이걸로 테스트해봤다.

이미지에 유튜브 링크를 걸면 아래처럼 보이게 된다. (현재 유튜브 공유 디자인과 동일)

이미지 링크 설정방법

이미지를 올리고
유튜브 링크(사진 오른쪽에서 두번째)를 건다.

티스토리 접은글 꾸미기

hi098123 — Wed, 12 Jan 2022 18:45:05 +0900

접은글

티스토리의 접은글 문구를 바꾸고 싶은데 못바꾸시는 분들 많을것으로 생각됩니다.

CSS 코드만으로 접은글에 들어갈 문구를 바꿀 수 있습니다.

원리를 보면 기존 글자는 배경색으로 만들어서 안보이게 만들고(또는 font-size:0과 같이 만들고 :before 기능을 이용해서 글자를 넣는 방법입니다.)

div[data-ke-type='moreLess'] a.btn-toggle-moreless, #tt-body-page div[data-ke-type='moreLess'] a.btn-toggle-moreless{
	color:transparent; /*또는 font-size:0*/
}
div[data-ke-type="moreLess"].open>a.btn-toggle-moreless:before {
    content: 'x'; /* 닫기 대신 쓸 문구 */
    color: #909090; /*또는 font-size:16px (원래 크기)*/
}
div[data-ke-type="moreLess"]>a.btn-toggle-moreless:before {
    content: '★'; /* 더보기 대신 쓸 문구 */
    color: #909090; /*또는 font-size:16px (원래 크기)*/
}

color:transparent 인 경우가 좀 더 여러 사용자가 쓰기 좋을것 같아서 예로 들었고요.

(글자크기는 다양하지만, 배경이 단색인 블로그가 많기 때문에)

예를들어 아래와 같은 코드를 적용가능합니다.

이 블로그에는 이미 다른방식으로 적용되어있어 적용하진 않았습니다.

div[data-ke-type='moreLess'] a.btn-toggle-moreless, #tt-body-page div[data-ke-type='moreLess'] a.btn-toggle-moreless{
	color:transparent;
}
div[data-ke-type="moreLess"].open>a.btn-toggle-moreless:before {
    content: '\e911\20\c228\ae30\ae30';
		font-family:'xeicon';
    color: #909090;
}
div[data-ke-type="moreLess"]>a.btn-toggle-moreless:before {
    content: '\e910\20\d3bc\ce58\ae30';
		font-family:'xeicon';
    color: #909090;
}

영문 + 숫자를 제외한 문자는 유니코드 인코딩을 해주셔야됩니다. (참고)

아래의 툴을 이용해서 변환가능합니다. (평문탭에 입력후 유니코드탭으로)

https://t.hi098123.com/codec

인코딩 / 디코딩

인코딩과 디코딩용 도구입니다.

t.hi098123.com

2021.12.31~2022.01.02 티스토리 접속장애

hi098123 — Sat, 1 Jan 2022 23:20:25 +0900

티스토리에서 접속장애가 발생했다. (진행중이다.)

접속장애가 발생한 서비스는 티스토리 블로그, 관리페이지 등이다.

티스토리 구조는 아래와 같을것으로 예상되는데

티스토리 프록시 (openresty)
- 티스토리 메인
- 티스토리 관리 페이지
- 티스토리 블로그(PC)
- 티스토리 블로그(모바일)
  - DB

PC버전 블로그와 관리페이지에서 문제가 발생하였다.

504 Timeout이니 PC버전 블로그와 관리페이지와 프록시 서버와 통신이 정상적으로 안되고 있는 상황으로 추정된다.

특정 코드가 계속 점유율을 잡아먹고 있거나, 잘못 설정된 규칙 때문에 처리를 못하는등..

모바일 블로그(티스토리주소/m)와 내부 데이터처리(reaction 등)은 정상적인것으로 보아 DB쪽 문제는 아닌것으로 보이고

PC블로그 서버가 문제가 있는것으로 예상된다.

다만, 모바일 주소로 이동시킬순 없는게 검색결과는 대부분 모바일 주소가 아닌게 올라가 있고

504 Timeout 오류가 뜨면 뒤로가기 할 가능성이 매우 높다.

대응을 좀 잘해줬으면 좋겠다. 아니면 이전하게 301 redirect 지원해주던가

2022-01-02 추가
장애 시간
- 2021년 12월 31일 오후 6시경 ~ 8시 20분경
- 2022년 1월 1일 밤 9시 35분경 ~ 11시 5분경
- 2022년 1월 2일 오후 6시 25분경 ~ 11시 5분경
장애 범위
- 블로그 접속 지연 및 이용 장애(일시적인 과도한 트래픽 발생)

티스토리 방명록 버그

hi098123 — Mon, 27 Dec 2021 19:28:03 +0900

오류 발생 대상

/manage/setting/comments 에서 아래의 설정시

한 화면에 1개라면 모든 티스토리 블로그에서 방명록 페이징 오류가 발생한다.

구현 방법

1. 한 화면에 1개로 설정

한 화면에 1개로 설정후 방명록 3페이지에서 2페이지 이동은 불가하다.

이 내용은 작성일 기준으로 추후 수정될 수 있음

<a href='/guestbook?time=' class="num"><span>1</span></a>
<a href='/guestbook?time=' class="num"><span>2</span></a>
<a  class="num"><span class="selected" >3</span></a>
<a href='/guestbook?time=여기는 정상' class="num"><span>4</span></a>

이 코드는 방명록 페이징 코드로 방명록은 작성일을 기준으로 페이지를 나누는데, 내부 로직에 버그가 있다.

2. 고의로 버그를 만드는 법

한 화면에 2개로 설정후에는 (1, 2), (3, 4), (5, 6) 이렇게 묶이는데

time값이 4를 가리켜 (4, 5)가 한페이지에 잡히면 3페이지로 여겨지고

(1), (1), (4, 5), (5, 6) 로 묶이는데 문제가 동일하게 발생한다.

카카오의 일처리

역시 한번에 하지 않는다.

큰 문제는 아니어서 굳이 또 제보할것 같진 않다.

"티스토리의 더 나은 광고를 위한 안내" 공지 대응하기

hi098123 — Mon, 29 Nov 2021 19:29:03 +0900

원글은 https://notice.tistory.com/2608 이곳에 있습니다.

[중요] 티스토리의 더 나은 광고를 위한 안내

광고의 품질은 콘텐츠의 소비와 직결됩니다. 구글 서치콘솔의 환경보고서에서 "더 나은 광고 표준 위배로 인한 광고 필터링" 안내 메시지가 있었습니다. 구글 크롬 정책상 루트도메인 단위로 표

notice.tistory.com

설명이 조금 미흡하다 보니, 블로거들이 댓글로 다시 문의하네요.

화면의 30퍼센트 면적 초과?

브라우저에서 f12를 눌러 콘솔(Console)에서 다음 코드를 실행하면 화면 면적의 몇 퍼센트인지 확인 가능합니다.

대부분의 자동 광고 사용유저와 글자 수 1000자당 1~2개를 넣는 블로거라면 문제없습니다.
PC에서 3000자에 15개 넘게 넣어야 간당간당한 것 같습니다.

다만, 모바일에서는 화면에 비해 큰 광고가 뜨기 때문에 PC에서 15%를 넘긴다면 모바일은 30%를 초과할 수도 있습니다.

(function() {
    var d=document.querySelectorAll('ins.adsbygoogle,img[src*="ads-partners.coupang.com"],iframe[src*="ads-partners.coupang.com"],ins.kakao_ad_area,iframe[name^="dableframe-"]'),
        dm=0;
    for(var i = 0; i < d.length; i++){
        dm+=d[i].offsetWidth*d[i].offsetHeight;
    }
    var hi098123_dmp=parseFloat((dm*100/(document.body.scrollWidth*document.body.scrollHeight)).toFixed(2)),
        f='font:2em Arial;font-weight:bold;';
    if(hi098123_dmp>30){
        f+='color:#f44336'
        console.log('%c광고 면적(경고) : '+hi098123_dmp+'%',f)
    }else{
        f+='color:#555'
        console.log('%c광고 면적 : '+hi098123_dmp+'%',f)
        console.log('※ 광고 면적은 모바일/태블릿/PC에서 다를 수 있습니다.')
    }
})()

실행 결과

정상 범위(좌측 결과)와 경고 범위(우측 결과)

위의 코드로 (광고면적 / 전체 화면 면적)을 구합니다.

모바일 화면에서 30%를 안 넘기도록 모바일 환경이라면 광고를 몇 개 빼는 방법으로 개선하셔도 됩니다.

더 나은 광고와 상충되는 구글 광고 기본 옵션?

써도 됩니다.

이번 공지는 구글로부터 경고에 따른 조치로 애드센스에서 기본적으로(또는 실험적으로) 제공하는 옵션은 따로 문제 제기하는 경우가 없습니다.

'ads.txt 파일 문제' 해결을 위해 애드센스 연동이 필요한 이유?

hi098123 — Fri, 29 Jan 2021 16:05:05 +0900

먼저, 해외 블로그인 (blogspot, github) 등은 sellers.json에 주소 입력시 잘 입력되는것을 확인 할 수 있습니다.

Sellers.json 바로알기

Sellers.json이 한동안 공지가 뜨고 다들 어떻게 하면 알림이 사라지는지만 생각하고 정확한 정보는 놓쳤을것 같아서 글을 작성하게 되었습니다. 구글은 정보를 투명하게 공개하는게 좋다고 안내

hi098123-skin.tistory.com

반면 *.tistory.com은 자동으로 tistory.com으로 수정되며, 정상적으로 등록이 안되는것을 확인 가능합니다.

sellers.json은 루트 도메인을 입력하도록 되어있고, ads.txt는 루트 도메인의 최상단 디렉터리에 업로드하게 되어있습니다.

별도 예외처리에 의해 다음의 해외블로그 도메인은 루트 도메인으로 봅니다.

*.blogspot.com/ads.txt
*.github.io/ads.txt

때문에 이러한 블로그 서비스는 루트에 있는 ads.txt라고 인식하여 이용가능하지만

(ads.txt는 루트 도메인에 있어야됩니다. https://루트도메인/ads.txt)

*.tistory.com/ads.txt 는 인식 불가합니다.

이는 구글의 정책에 tistory.com이 미달하였거나 별도의 블로그 도메인 관련 과정이 없지 않았나 추정됩니다.

다른방법은 없나요?

있습니다. 블로그 2차도메인을 blog.소유하신주소.com 으로 설정하고,

소유하신주소.com/ads.txt를 별도의 서버로 접속가능하게 만드신다면

구글의 정책을 만족하기 때문에 정상적으로 작동가능합니다.

카카오의 희망사항?

Adhost를 연동하면 수익분배가 가능합니다.

티스토리 '애드센스 연동' 낱낱이 파헤치기

티스토리에는 애드센스 계정 연동이라는 기능이 몇 달전 생겼습니다. 최근에는 많은 티스토리 블로그에서 적용한 모습입니다. 이 연동이라는게 어떤 작업으로 연동이 되는것인지 낱낱이 파헤

hi098123.tistory.com

유저가 아무것도 안해도 지원가능한 방법

iabtechlab.com/wp-content/uploads/2017/09/IABOpenRTB_Ads.txt_Public_Spec_V1-0-1.pdf

Ads.txt스펙을 확인해보았더니, 4.5번 문단에 다음과 같은 방법 또한 지원가능합니다.

먼저, https://tistory.com/ads.txt 에 등록된 아이디 리스트를 나열하면 되며

# https://tistory.com/ads.txt

subdomain=https://hi098123-skin.tistory.com
subdomain=https://등록된아이디.tistory.com

...

이 경우 서버의 rewrite rule을 이용하여 각 아이디 도메인에 ads.txt를 설정가능합니다.

2차도메인 사용중인 경우에도 루트도메인인 경우 별도 rewrite rule 생성하여 처리가능

예를 들자면, https://hi098123-skin.tistory.com/ads.txt가 유효함

이 방법은 Google에서도 안내하는 방법으로 "ads.txt 파일이 하위 도메인에서 호스팅되는 경우"에 나와 있습니다.

Ads.txt FAQ - AdSense 고객센터

도움이 되었나요? 어떻게 하면 개선할 수 있을까요? 예아니요

support.google.com

공식적인 방법으로 할수있는게 두가지나 있는데도 수익분배를 생각하고 Adsense Host API 연동쪽으로 가려하는것 같습니다.

티스토리 댓글 차단 팁

hi098123 — Wed, 27 Jan 2021 21:55:13 +0900

티스토리를 운영중이라면 댓글 차단 한번쯤 이용해보셨을 수 있습니다.

어떻게 차단할지 감이 안잡히시거나, 작성자 차단/IP 차단 무엇을 해야될 지 모르겠다면 이 글을 읽어주세요.

댓글 차단

방법1

댓글 차단은 티스토리 관리페이지의 댓글·방명록 -> 댓글 관리 및 방명록 관리에서 가능합니다.
댓글 목록에 마우스를 올려보면 차단버튼이 있습니다.
작성자 차단과 IP차단을 선택할 수 있습니다.

방법2

댓글 차단은 티스토리 관리페이지의 댓글·방명록 -> 설정에서 또한 가능합니다.
스팸필터에서 IP 차단, 사이트 차단, 본문, 이름을 차단가능합니다.

각 필터에 대해 알아봅시다.

IP 필터링 : 입력한 값(리스트)과 정확히 일치하는 IP의 댓글을 차단합니다.
(특정 IP의 방문 차단이 아님)
사이트 필터링 : 티스토리 댓글에는 사이트(홈페이지)를 입력할 수 있습니다.
예를 들어 (누군가의 블로그).tistory.com을 차단하면 차단한 블로그가 대표 블로그라서 링크가 포함될 때 댓글이 필터에 의해 차단됩니다.
본문 필터링 : 특정 단어를 차단 할 수 있습니다.
유일하게 잘 활용중인 기능입니다.
작성자 필터링 : 특정 작성자명을 차단합니다.
동명이인도 같이 차단됩니다.

자세히 알아본다면 필터는 허접하다는게 느껴질겁니다.

작성자 필터링이라고 해도 이름 차단이고, IP필터링이라고 해도 바꾸면 그만이고..

그래서 제가 티스토리 댓글은 승인모드로 사용중입니다.

제가 차단을 활용중인 방법

먼저, 작성자 차단은 하지 않습니다.

동명이인이 같이 차단될 수 있기 때문입니다.

IP차단은 가끔 사용합니다. 다만, 1달 정도후에 차단해제하는 편입니다.

대부분의 가정에서 사용중인 PC는 IP가 계속 변하기 때문에 굳이 유지 하지 않습니다.

댓글을 승인모드로 활용합니다. 승인 모드로 사용시 각종 문제를 막을 수 있습니다.

티스토리 댓글이 검색에 영향을 줄까요?

티스토리 댓글이 검색에 영향을 줄까?라는 생각을 한두 번 해봤을 수 있습니다. 티스토리 블로거라면 궁금할 주제일수있는데, 과연 어떨까요? 검색엔진에 댓글이 영향? 각 검색엔진에 댓글이 검

hi098123-skin.tistory.com

자동광고 일부 제거하기

hi098123 — Sun, 24 Jan 2021 17:03:38 +0900

애드센스 자동광고는 애드센스 코드가 삽입된 페이지중, 제외 설정한 페이지를 빼고 자동으로 광고가 삽입되는 옵션입니다.

자동광고 제거는 제가 운영중인 웹사이트중 대략 2개정도만 사용할 정도로 자주쓰이는 설정이 아니지만, 꼭 필요한 유용한 옵션입니다.

자동광고 제거에는 두가지 방법이 있습니다.

정확히 URL을 지정
설정할 URL을 포함

이걸 잘 활용하면, 아래와 같은 일을 할 수 있어요.

결제 페이지등 광고가 불필요한 페이지에 광고제거
특정 서브도메인 자동광고 해제
특정 카테고리 ( URL에 카테고리가 포함될 때 : example.com/category명/글번호 ) 광고제거

자동광고 제어법

먼저 애드센스 관리페이지의 "광고" - "개요" 에 접속합니다.
사이트 기준에서
원하는 도메인에 연필모양의 수정버튼이 있습니다. 클릭합니다.
우측의 "광고 설정" 탭에서 "페이지 제외"에 "관리"버튼을 클릭하세요.
여기에서 페이지 제외는 자동 광고 페이지 제외를 의미합니다. (관련 공식 문서)
제외 추가를 눌러주세요.
원하시는 주소의 자동광고를 차단할 수 있습니다.

활용방법

여기서 문서의 끝은 아닙니다. 이제 방법을 활용해볼 차례입니다.

먼저 URL 규칙을 알아보죠.

지원되지 않는 URL
페이지 제외를 추가할 때 올바른 URL을 입력해야 합니다. 자동 광고는 프래그먼트(예: www.example.com/page#top) 또는 매개변수(예: www.example.com/page?q=target)를 포함하는 URL을 지원하지 않습니다.

규칙

매개변수 또는 # 해시를 포함하지 않습니다.
example.com을 넣으면, [www.example.com, example.com] 두개에 적용됩니다.
(서브도메인을 특정하지 않았다면 www도 같이 자동적용)
차단 규칙이 자동광고 설정중 가장 우선순위로 적용됩니다.
1시간 이내에 천천히 적용됩니다.
자동광고를 제외하는 옵션으로 페이지에 삽입되어있는 광고는 뜹니다.

특정 서브도메인 자동광고 제거방법

URL에 서브도메인명을 작성하고 이 섹션의 모든 페이지(URL 포함)를 선택하면 1시간 이내에 적용됩니다.

특정 카테고리 자동광고 제거

주소에 카테고리명이 표시되어있고 특정 카테고리 자동광고를 제거하려면 아래의 예시처럼 가능합니다.

URL을 포함하는 주소의 자동광고 제외 관리를 이용한 응용방법입니다.

sub1.example.com/category/1
sub1.example.com/category/2
sub1.example.com/category/abc

이 경우 위와같은 URL에서 자동광고가 삽입되지 않습니다.

티스토리 글 읽기 API 문제점 (해결완료)

hi098123 — Sat, 28 Nov 2020 21:03:21 +0900

2021년 12월 재확인 : 현재는 해결된 문제입니다!

티스토리에는 여러 기능을 쉽게 할 수 있는 API가 존재하는데 글 읽기시 문제점이 하나가 있습니다.

원본과 다르다는 점인데, 영향이 크기때문에 활용이 불가한(Deprecated) API가 아닌가 싶습니다.

티스토리 API는 관리가 잘 안되는 점이 문제입니다.

뭐가 문제인가?

글의 콘텐츠가 그대로 표시되지 않습니다.

때문에 백업등 작업시 불편을 겪거나 제대로 된 결과가 나오지 않을수 있습니다.

{
  "tistory":{
    "status":"200",
    "item":{
      "url":"http://oauth.tistory.com",
      "secondaryUrl":"",
      "id":"1",
      "title":"티스토리 OAuth2.0 API 오픈!",
      "content":"안녕하세요 Tistory API 입니다.<br><br>이번에 Third-party Developer 용 <b>Tistory OAuth 2.0 API</b> 가 오픈됩니다.<br>Tistory 회원이라면, 여러분의 모든 app에 자유롭게 활용하실 수 있습니다.<br><br><div class="\"imageblock" center\"="" style="\"text-align:" center;="" clear:="" both;\"=""><img src="\"https://t1.daumcdn.net/cfile/tistory/156987414DAF979922\""></div><br><p></p>많은 기대와 사랑 부탁드립니다. <br> ",
      "categoryId":"0",
      "postUrl":"http://oauth.tistory.com/1",
      "visibility":"0",
      "acceptComment":"1",
      "acceptTrackback":"1",
      "tags":{
        "tag":["open", "api"]
      },
      "comments":"0",
      "trackbacks":"0",
      "date":"1303352668"
    }
  }
}

위는 공식문서에 나온 예시인데.

tistory -> item -> content 의 결과중 티스토리 치환자로 나오는(이미지 등) 결과가 제대로 표시되지 않습니다.

이런 이유로 백업프로그램등 지원이 어렵고, 여러 다른 프로그램 지원도 어려울 것으로 보입니다.

정확히 어떤 문제인가?

글 작성	티스토리 페이지	새 글쓰기 방식 렌더링
글 작성	티스토리 API	과거 글쓰기 방식 렌더링

-> 이렇게 우측방향으로 처리되는데, 티스토리 API는 이전 글쓰기 방식으로 작성되고 처리됩니다.

때문에 이미지처리도 이상하게 결과가 나옵니다.

혹시나 백업 프로그램이나 글을 읽어서 수정등 글 읽기 API가 필요한 경우 먼저 문의해서 고쳐진후 시도하시는게 편할겁니다.

언제 고쳐질지는 모르겠네요.

티스토리 이미지를 Avast가 차단한다?

hi098123 — Mon, 23 Nov 2020 22:48:56 +0900

어제 티스토리 이미지가 Avast백신으로 부터 차단된다는 의견을 보았습니다.

당연히 Avast가 잘못 차단한것으로 보이는데, 방법은 Avast가 블랙리스트를 제거하거나 티스토리에서 다른 url으로 이동하는 방법도 있습니다.

티스토리같은 블로그 단점이 같은 도메인을 사용하기 때문에 일부 제재해야될것을 전체로 받는경우가 가끔있는것 같습니다.

저는 Avast백신을 안써서 잘 모르겠는데 이렇게 해결될거같다면 댓글남겨주세요.

이 문제는 해결 되었습니다.

문의도 해놓았었는데 공식적으로 답장이 왔습니다.

다음카카오는 알고 있을까요?

다음(daum.net)의 메인에서도 img1.daumcdn.net을 사용하는데요.

어베스트 백신이 img1.daumcdn.net을 차단한 이후일것으로 추정되는데, 일부 이미지를 img2.daumcdn.net로 바꿨습니다.

사용자가 할 수 있는 방법은 뭐가 있을까요?

딱히 없을것 같지만, 방법은 있겠습니다.

이미지 주소를 변경하여 이미지를 로딩하고
안내 메시지로 사용자에게 안심을 시켜주면

이 두가지를 하면 될 것 같습니다.

어떻게 쉬운방법 없을까요?

<script src="https://cdn.jsdelivr.net/gh/hi098123/tistory2/dist/tistory-avast2.js"></script>

위의 코드를 스킨을 편집하여 HTML내에 붙여넣으시면, 이미지 주소를 변경하여 이미지를 로딩시켜주고.

안내 메시지로 사용자에게 안심을 줄수있습니다.

페이지 상단에 표시되는 안내메시지

img1.daumcdn.net은 다음카카오의 이미지서버입니다.

Avast백신을 사용하시나요? 최근 업데이트로 다음(daum.net)의 메인에서도 일부 이미지가 차단될 수 있습니다.

이런 문구를 6초간 페이지 상단에 보여주게 됩니다.

img1.daumcdn.net을 차단하면?

공감 서비스도 제대로 안되더라고요. 공감 기능은 t1.daumcdn.net에서 리소스를 불러오는데.

내부 리소스에 img1을 포함하고 있지 않나 싶습니다.

사용 예시

head나 body 둘중에 한곳에 넣으시면됩니다.

<html>
<head>
	...
    <!-- head 하단에 넣거나 -->
    <script src="https://cdn.jsdelivr.net/gh/hi098123/tistory2/dist/tistory-avast2.js"></script>
</head>
<body>
	...
</body>
</html>

<html>
<head>
	...
</head>
<body>
	...
    <!-- body 하단에 넣어주세요 -->
    <script src="https://cdn.jsdelivr.net/gh/hi098123/tistory2/dist/tistory-avast2.js"></script>
</body>
</html>

Sellers.json 바로알기

hi098123 — Sat, 21 Nov 2020 06:57:03 +0900

Sellers.json이 한동안 공지가 뜨고 다들 어떻게 하면 알림이 사라지는지만 생각하고

정확한 정보는 놓쳤을것 같아서 글을 작성하게 되었습니다.

설명이 되어있는데 뭔말인지 알아듣기 어렵다.

구글은 정보를 투명하게 공개하는게 좋다고 안내를 합니다.

개인 또는 업체 이름을 나열하는 것이 좋습니다. (구글)
개인 (또는 업체) 이름을 나열하는 것이 좋습니다. (실제 해석)

괄호로 묶인것과 안묶인것은 인식에 차이를 가져올 수 있습니다.

Sellers.json은 어떤 파일이고 어떤 정보를 공개하고 있을까요?

알고 계실까요? 아마 여기에서 처음 알게 될 것입니다.

Sellers.json의 존재 이유

애드센스를 하다보면 차단관리에서 특정 광고를 차단하거나 특정 게시자를 차단가능합니다.

제 경우 가끔 특정 게시자를 차단하기도 하는데, 그 이유는 다양합니다.

이렇게 게시자만 차단가능하면 안되죠.

광고주도 특정 사이트에 올라가는게 싫을겁니다.

광고주가 특정 사이트 (또는 게시자) 정보를 확인하여 차단할 수 있게 만들어주는 기능입니다.

파일의 구조

seller_id [형태 : pub-****************]
광고 게시자의 pub 아이디입니다.
is_confidential [형태 : 1 또는 값없음]
판매자 정보 공개 여부입니다. (1 일때는 공개하지 않음)
seller_type [형태 : string]
- PUBLISHER
  사이트 승인을 받은 경우
- INTERMEDIARY
  영상, 게임용 애드센스 제품이용
- BOTH
  영상 또는 게임용 광고와 사이트 광고를 사용중인 계정
name
계정 소유주의 이름입니다.

판매자 정보 공개 여부(is_confidential 값)에 따라 공개 비공개가 결정됩니다.
domain
계정 소유주의 도메인입니다.

판매자 정보 공개 여부(is_confidential 값)에 따라 공개 비공개가 결정됩니다.

알고 계셨나요?

계정 소유주의 이름은 정산받는 계좌(실명)으로 처리됩니다.
실제로 광고주들에게 tistory.com도메인은 표시되지 않습니다.
*.github.io, *.blogspot.com 등 해외 서비스에는 각 도메인의 하위에도 적용이 됩니다.

즉, 원래 이곳에는 tistory.com이 아닌 하위도메인인 hi098123-skin.tistory.com으로 적용되어있어야 됩니다.

tistory.com은 하위도메인으로 써도 지워진다. (구글 애드센스 버그)

도메인 이름은 URL을 소유하고 있음이 확인될 때까지 sellers.json에 표시되지 않을 수도 있습니다.
도메인은 계정이 '기밀'로 설정되어 있거나 웹사이트가 없는 경우에도 생략될 수 있습니다.

tistory.com은 공개되지 않는데 이유로는 티스토리 블로거가 해당 도메인을 소유하고 있음이 확인되지 않기때문입니다.
예를들어, hi098123-skin.tistory.com 이렇게 실제 블로그 주소를 입력해야하지만, 애드센스 페이지에서 지원하고 있지 않습니다.(티스토리 도메인관련 애드센스 버그)

이런 이유로 tistory.com으로 공개만 했다면 내부용으로 해놓는것과 거의 유사합니다.

왜냐하면, 광고주 입장에서는 게시자의 이름 몇자는 중요하지 않은데, 도메인에 따라 선택여부를 가를수는 있기 때문입니다.

결국 이러한 버그로 애드센스에서는 hi098123-skin.tistory.com과 같은 실제도메인이 아닌 tistory.com도메인은 Sellers.json에 등록되지 않기 때문에 이점을 얻을 수 없습니다.

내부용으로만 해놓아도 이름공개여부만 제외하고 동일하게 적용됩니다.

아마도 알림 메시지가 뜨니까 없애는데에만 급급해서 자세한 정보를 알지 못했었을것 같네요. (저도 그랬었고 오랜만에 이것저것 하다가 살펴봤더니 알던것과 다른게 보이네요.)

요즘에 구글 애드센스에서 tistory.com 도메인 관련 오류가 많이 나는것 같은데 애드센스 시스템상에 관련 내용이 누락된게 아닌가 싶습니다.

blogspot, github만 블로그는 아니라고~

오류처럼 보이는 메시지가 떠도 똑같다고~

이 정보를 알게된 후 저는 내부공개로 돌리고 저 메시지는 닫기를 눌러 지워버렸습니다.

기타 정보

Sellers.json을 확인해보니 한국인이 6,145명(정보를 공개한 개인 기준, 한국어 이름 기준) 있는것으로 확인됩니다.

애드센스 전체 게시자는 1,284,793명 이네요.

70억명 인구 기준 0.01%만이 애드센스 광고를 게시하고 있습니다.

애드센스의 pub코드는 오름차순이 아닌 랜덤이다? (확인중)

확인중인데 시간 순서가 아닌 정황이 있고 실제 그렇다고 볼수있는 증거가 있어서 확인중이긴합니다만 맞는것 같습니다.

순서대로 0,1,2 오르는게 아닌 유튜브 영상고유번호처럼 랜덤 생성인것으로 보입니다.

오늘 오후 6시경 발생한 애드센스 광고 문제

hi098123 — Fri, 13 Nov 2020 19:11:39 +0900

오늘 오후 6시경 애드센스에 광고가 안뜬다고 하는 글이 나타났습니다.

원인은 구글이 밝히지 않는 이상 정확히 알 수 없으나, 사용자가 표면적으로 보았을때 원인이 무엇인지 추측을 해보겠습니다.

다만, 해결은 구글이 아닌이상 불가합니다.

먼저, 확인해 볼 사항.

애드센스는 *.tistory.com이 아닌경우 정상적으로 표시되고 있습니다.
제가 운영하는 별도의 페이지에도 정상적으로 표시가 되고 있었습니다.

리소스에 문제가 있나?

리소스를 확인해 본 결과 문제점 1개를 탐지했습니다.

(GET) https://partner.googleadservices.com/gampad/cookie.js?domain=hi098123-skin.tistory.com&callback=_gfp_s_&client=ca-pub-*************&cookie=ID%3D****************

응답 (Response):
_gfp_s_({})

정상응답시에는?
_gfp_s_({"각종":"로딩 데이터들","이 곳을 통해":"전달"})

지금 광고가 안뜨는 모든 페이지는 cookie.js 리소스를 로딩하지 못하고 있습니다.

바로 cookie값에 ID가 들어가고 실제 필요한 그 뒷부분의 **********(개인정보라서 마스킹 처리) 내용이 제대로 전달되고 있지 않은 이유로 보입니다.

이 리소스 로딩이 실패하여 광고 로딩정보를 불러오지 못합니다.

원래 이 리소스의 역할은 ID=**************** 의 내용을 불러오는 역할이지만, 순서가 꼬여 이곳에 전달되지 않아도 될 값이 포함되어 전달된 문제로 보여집니다. (이후 정밀 검사로 남아있던 정보가 전달되는것으로 확인됨)

실제 정상적으로 로딩되는 사이트의 경우 cookie.js로딩을 하지 않거나,
쿼리스트링으로 cookie 값을 전달하지 않았습니다.

cookie.js에서 광고 게시자, 페이지 방문자 정보를 서버에 입력하고, 광고 세션을 생성하는것으로 예상됩니다.

그 다음, integrator.js에서 해당 정보를 이용해 광고 정보를 서버로부터 불러옵니다.

이런 과정으로 광고가 로딩되는데, *.tistory.com의 경우에는?

(애드센스 버그 1) cookie.js 에서 integrator.js로 광고 세션 정보를 전달하지 않습니다.

(애드센스 버그 2) 결국 광고 로딩에 실패하고, 새로고침시 cookie.js는 남아있던 이전 세션값을 전송하지만(쿼리스트링 : cookie) 반환되는 정보는 없습니다.

이런 결과로 볼때 문제는 티스토리가 아닌 구글 애드센스에 있는것으로 보입니다.

결과적으로 애드센스는 광고 대신 아래의 코드를 반환하는데, 이는 권한이 없는 사이트에서 요청등 광고가 표시될수없을때 나오는 메시지입니다.

<!DOCTYPE html><html><head><script>window.top.postMessage('{"msg_type":"resize-me","key_value":[{"key":"r_nh","value":"0"},{"key":"qid","value":"***********"}],"googMsgType":"sth"}', '*');</script><script>window.top.postMessage('{"msg_type":"adsense-labs","key_value":[{"key":"settings","value":"[\\\"ca-pub-**************\\\",[[1]]]"}],"googMsgType":"sth"}', '*');</script></head></html>

제일 유력한 버그로는 tistory.com 도메인을 티스토리 블로그가 아닌 일반 도메인으로 판단하는식의 버그가 아닌가 추정됩니다.

이 정도 내용은 수박 겉 핥기식이라서 자세한 내부 사정을 알 수 없습니다.
자세한 내용은 구글의 공지 또는 공식문서로 확인해주시기 바랍니다.

이 글은 외부로 드러나는 표면적인 내용을 토대로 추측한 글 입니다.

티스토리 스킨 변경사항, 광고 치환자

hi098123 — Sun, 8 Nov 2020 14:08:02 +0900

12일 전, 티스토리 스킨 관련 문서가 변경되었습니다.

수익 메뉴 관련하여 치환자가 새로 생겼는데, 무엇이 바뀌었나 알아봅시다.

공통 광고치환자

revenue_list_upper : 블로그 홈/목록 상단
revenue_list_lower : 블로그 홈/목록 하단

위의 두 가지 항목이 추가되었습니다.

<html>
<head>
  <title>hi098123 Tistory Tip</title>
</head>
<body id='tt-body-page'>
<s_t3>
  <header>
    <h1><a href="https://hi098123-skin.tistory.com/">hi098123 Tistory Tip</a></h1>
    <!-- 블로그 홈/목록 상단 치환자 -->
    


    <!-- blog_menu사용 -->
    
  툴(Tools)


    <!-- 메뉴 직접 구성 -->
    <ul class="blogMenu">
      <li><a href="https://hi098123-skin.tistory.com/rss">RSS구독</a></li>
      <li><a href="https://hi098123-skin.tistory.com/tag">태그</a></li>
      <li><a href="https://hi098123-skin.tistory.com/guestbook">방명록</a></li>
    </ul>    
  </header>

  <section class="sidebar"> 
    <!-- blog_image 사용 -->
    <div class="blogInfo">
      <div class="blogImage"> </div>
      <div class="blogDesc">제작한 스킨 배포와, 티스토리 스킨 수정과 여러 코드에 대해 다룹니다.
남들이 주로 다루지않는 팁들을 많이 소개하려고 합니다. <span class="userID">hi098123</span></div>
    </div>

    <!-- image 사용 -->
    <div class="blogInfo">
      <div class="blogImage"><img src="https://tistory1.daumcdn.net/tistory/4083998/attach/37bf3c1c8e444cf3be63715a9fbabb44"></div>
      <div class="blogDesc">제작한 스킨 배포와, 티스토리 스킨 수정과 여러 코드에 대해 다룹니다.
남들이 주로 다루지않는 팁들을 많이 소개하려고 합니다. <span class="userID">hi098123</span></div>
    </div>
  </section>

    <!-- 블로그 홈/목록 하단 -->
    
</s_t3>
</body>
</html>

사용 예시는 위와 같고, 블로그 홈 화면의 광고를 관리하는것으로 보입니다.

아마도 적용되는 광고를 치환하는 예시인것 같습니다.

문서가 그닥 친절하지 않아서 + 저는 수익 메뉴를 연동하지 않아서

따로 설명드릴수있는 내용이 없을것 같습니다.

이 내용을 잘 아시는 분은 댓글로 남겨주세요.

티스토리에서 리스트 활용법

hi098123 — Fri, 6 Nov 2020 12:35:16 +0900

티스토리에서 글을 쓸때 저는 <ul><ol><li>리스트 태그를 많이 사용합니다.

주된 이유로는 검색엔진이 받아들이기 쉬운 태그여서 그냥 글로 풀어쓰는것 보다 좋기 때문입니다.

로봇은 1., 2.과 같이 의미없는 글을 싫어하기도 합니다. 대신에 <ol>태그를 사용하면 로봇의 이해도 쉬워집니다.

Google에서 스니펫에 올라가는 경우 <ul><ol><li>태그의 내용을 우선적으로 색인하기도 합니다.

리스트 기본 활용법

그냥 순서대로 글을 쓴 뒤 리스트를 눌러 리스트를 생성하거나, 리스트를 누른 뒤 내용을 추가 할 수 있습니다.

글을 드래그합니다.
상단 글 메뉴에서 리스트를 누릅니다.
완성!

리스트 중급 활용법

리스트 안에 리스트를 넣고 싶다면 어떻게 할까요?

일단 리스트를 생성하고
글을 선택하고 키보드의 Tab키를 누르면 리스트의 자식으로 만들 수 있습니다.
키보드의 Tab키를 누르면~

* 반대의 경우는 Shift+Tab으로 자식리스트를 복구시킬수 있습니다.
Tab을 이용하여 자식리스트를 만든 예

티스토리 버그

여기에서 또 티스토리 버그가 있습니다. 에디터 버그 또는 기본 스타일 버그로 고칠방법은 여러가지 입니다.

다음과 같이 disc스타일 내부에 decimal스타일을 적용하는경우 에디터에서는 다음과 같이 보이게 되고

티스토리 글에서는 다음과 같이 표시됩니다.

버그가 발생하는 이유로는 CSS의 우선순위 때문입니다.

ul[data-ke-list-type='disc'] li{
	list-style-type: disc;
}

위의 코드는 아래의 inline style보다 우선순위가 높습니다.

<ol style="list-style-type: decimal;" data-ke-list-type="decimal">
  <li>1-1</li>
  <li>1-2</li>
</ol>

때문에 ul안에 ul이 있을때 잘못 적용되는 버그를 제거하려면 아래의 내용을 제거해야 작동합니다.

data-ke-list-type="*"

왜 이런 비공식적 방식을 사용하는지는 모르겠네요. 여기에 글만 써도 버그는 수정하는것 같아 따로 제보하진 않았습니다.

이 버그도 매우 오래전부터 있던 버그입니다.

버그가 고쳐지면 아래 내용이 정상적으로 표기될겁니다.

여기는 점
1. 여기는 숫자 1
2. 여기는 숫자 2

리스트 고급 활용법

리스트안에 저는 주로 글이나 이미지를 더 넣어서 작성하는데, HTML로 직접 편집하셔야 됩니다.

따로 에디터에서 지원되지 않습니다.

HTML 글 작성이 가능하신 경우에만 가능하고 HTML편집이 가능하다면 이미 가능한 방법이기 때문에 따로 방법을 소개하진 않겠습니다.

저는 주로 방법을 소개할때 많이 씁니다. 리스트와 함께 이미지가 있다면 읽기 더 편하더라고요.

티스토리 업데이트 이후 변화들?

hi098123 — Thu, 5 Nov 2020 20:52:23 +0900

daumcdn.net 속도 변화?

기존에 KT망을 이용했는지 안했는지 잘 기억이 나지 않는데(ISP로 Kakao Corp.만 있었던걸로 기억, Dreamline Co. 회선) 현재는 KT망, 다우기술망이 추가되어 있습니다.

이것 때문인지 최근 서버 다운이후 재부팅하여 빨라진것인지는 정확히 알수없으나, 속도가 빨라졌습니다.

컨텐츠 전송속도이므로 망과 관련이 있을것으로 보입니다.

기존에는 CloudFlare의 ICN 한국 엣지서버와 통신속도가 비슷했으나, 요즘에는 두배정도 더 빠른것으로 확인이 됩니다.

왼쪽부터 1번은daumcdn.net, 2번과 3번은 kakaocdn.net

같은 용량의 같은 이미지처리속도가 서버처리(TTFB)는 비슷하지만, Content Download속도는 차이가 있습니다.

여러번 캐시 무시 새로고침 시도하였을때 서버처리속도는 3~5ms정도로 비슷했으나, 네트워크 처리는 항상 daumcdn이 더 빨랐다.

daumcdn이외에도 티스토리도 체감상 빨라졌습니다.

내부 구조가 효율적으로 변경되었거나, 새로운 메모리 캐싱정책등 별도 기술을 이용한게 아닌가 추정됩니다. 아니면 JSP기반에서 Node.js등 내부 기술변동이 있었을수도 있습니다.

이는 티스토리 관리페이지가 Node.js로 운영되고 있음을 확인하였고, 티스토리도 바뀔수있다는 이유로 추정해보았습니다.

티스토리 서버는 Nginx가 프록시로 통신을 담당하고 있으므로 정확한 내부 기술은 직접 밝히지 않는 이상 알 수 없습니다.

공식 블로그들의 이전

카카오 계정으로 옮기는 시기인데, 이와 연관이 있는지는 모르겠으나..

안철수 연구소(Ahnlab) 공식 블로그 asec.ahnlab.com가 워드프레스(Automattic)로 이전했습니다.
CJ 공식블로그 blog.cj.net가 워드프레스(Amazon AWS)로 이전했습니다.

다른 서비스 소개

공식 블로그, 사이트를 운영할때 요즘에는 굳이 워드프레스를 이용하지 않고 Node.js 기반의 정적 컨텐츠 블로그를 많이 운영합니다.

이런 기능을 제공하는 대표적인 회사로는 Netlify가 있으며, 이러한 서비스는 원하는대로 코드를 작성가능하고 페이지 속도가 매우 빠른게 장점입니다.

블로그와 같이 한번 생성하여 자주 변하지 않는것은 무거운 워드프레스 보다, 요즘에는 가벼운 서비스들이 많이 존재합니다.

Netlify에서는 100GB 트래픽을 무료로 제공하고, 글로벌 서비스로 한국과 가까운 서버는 일본에 있습니다.
Vercel에서도 마찬가지로 100GB 트래픽을 무료로 제공하고, 글로벌 서비스인데 한국서버가 존재합니다.
Github Pages에서는 10GB 트래픽에 제한은 유연하게 제공하고, Fastly CDN에서 제공합니다.
ICN(인천)서버를 자주 주지는 않는것 같습니다. 저는 도쿄,하네다 등 일본서버로 접속이 됩니다.
CloudFlare의 workers를 이용하여 Node.js를 이용가능합니다 $5~
Firebase의 10GB 트래픽 무료, Node.js 무료는 중단 예정입니다.

이와 같은 서비스들의 단점으로는 프로그래밍을 할줄 알아야 적용이 가능하다는 점 입니다.

대신 자유도가 더 높기 때문에 최적화 작업도 할 수 있고, 원하는 서버제공자등 모든것을 원하는대로 수정할 수 있습니다.

한국에서는 ICN(인천)서버를 잘 주지 않아 좋지 않으나 CloudFlare에서 워드프레스 호스팅을 유료로 제공하는 서비스가 있습니다.

출시한지 얼마 안되긴 했으나 캐시 정책 덕분에 다른 워드프레스보다 처리과정이 훨씬 더 좋습니다.

변하지 않는 글등 컨텐츠를 캐시하고 방문자에 따라 로그인 부분등 일부만 재생성하는 방식으로 처리합니다.

네이버 웹마스터도구 HTML 구조 문제???

hi098123 — Sun, 1 Nov 2020 15:19:15 +0900

최근 네이버 웹마스터 도구의 사이트 구조 항목에 상태가 문제가 있다는 글을 몇개 본적 있는데, 별로 신경쓰지 않았다가 생각보다 많은사람이 문제가 있다고 하는것 같아 제 블로그중 한개를 들어가봤습니다.

역시나 동일하게 표시되네요.

HTML 구조 문제?

평상시라면 html 구조상에 문제였을것입니다.

예를들어 head태그 끝이 없다던지 body태그가 여러개라던지...

그런데 2020/10/30쯤 부터 문제가 있다고 표시되는경우는 네이버의 서버문제입니다.

문제가 있다는 페이지들을 html 분석해봤는데 전혀 문제가 없기 때문입니다.

Microsoft Edge의 개발자 도구가 제일 표준에 민감한데 저는 제일 마지막으로 검토할 때 Microsoft Edge 개발자 도구를 이용해서 표준 문제가 있는지 확인하고, IE를 이용해서 구버전 브라우저 지원여부를 검토합니다.

그런데 Microsoft Edge 개발자 도구를 이용해도 html 구조상 문제는 발견하지 못했습니다.

또한, 네이버 웹마스터 도구에는 모든 사이트가 문제있다고 표시됩니다.

이 두가지 사항을 고려하면 네이버에 문제가 있다라는 결론이 나오게 됩니다.

최근 나타난 문제라면, 운영중인 사이트의 문제는 없으니 안심하시고 일시적인 네이버 서치어드바이저 문제로 수정까지 기다리셔야 될 것 같습니다.

최근 수집요청이 안된다고 하는등 내부 변동사항이 많이 있는것 같습니다.

네이버 웹마스터도구가 작동안된적은 이전에도 가끔있었던 일로 시간지나면 알아서 해결이됩니다.

때문에 걱정 안하셔도 될 문제로 보입니다.

가장 최근에 수집요청 오류는 악성 사용자들의 수집요청 DDOS 같은 방식으로 며칠동안 문제가 있었던 적 있습니다.

티스토리 수익관리 기능에 대해 알아봅니다.

hi098123 — Wed, 28 Oct 2020 03:47:37 +0900

티스토리에 2020-10-27 업데이트로 수익메뉴가 신설되었습니다.

관리페이지 수익 메뉴

별도의 HTML수정없이 편하게 연동하는데 카카오는 의미를 두고 있습니다.

새로운 기능

수익 예측하기

수익 메뉴에 들어가면 카카오 AdFit광고를 홍보하며, 수익예측기능을 제공합니다.

수정전 수익 예상페이지

일 방문수를 1,000~500,000 까지 조절하여 예상 연수익을 예측해볼수 있습니다.

여기에는 한가지 맹점이 있습니다. 맨 처음에서는 AdFit내용이 적혀 사용자로 하여금 애드핏 수익예측으로 착각하게끔 만들어져 있습니다.

의도된부분이 아닐까 의심되며, 실제 "내 블로그 수익 예측하기"에서는 연동플랫폼, 광고 수에 따라 실제 수익과 차이가 날 수 있습니다. 라고 안내합니다.

단가를 계산해보니 평균 애드센스 RPM(1,000조회수 당 수익)을 조금 넘는 수치가 연간으로 계산되어 보여집니다.

따라서 저 예상 수치는 애드센스(90% 이상)+애드핏(10% 미만)의 수익이 합산되어 추정하는 계산기라고 볼수있을것입니다.

애드센스 평균 수익률은 애드센스 메인(소개/가입페이지)에 소개되어있습니다.

이 글이 작성된 이후 변동사항이 있습니다.

수정된 수익 예상 페이지

방문수에 곱해지는 값이 많이 줄었습니다. 최저가 21배 줄었고 최고가 3.6배 줄었습니다.

기존	수정 후
887.414 ~ 1353.259	41.509 ~ 367.284

애드핏 수익 예측 할때는 수정 후 최저점이상(1방문당 0.11원 이상)으로 보면 될것 같고

애드센스 수익은 기존 범위 최저점 이하(1방문당 2.43원 이하)로 계산하면 될것 같습니다.

혹시 이 수치가 계속 바뀐다면?
전날까지의 연동된 계정 수익률의 평균으로 기능을 제공하는걸까요?

+ 수정)
매일같이 변경되는걸로 보아 직전날까지의 통계를 활용해 예상 수익을 보여주는것 같습니다.

광고 연동

다양한 광고를 연동할 수 있습니다. 그 중 가장 관심이 있을것 같은 애드센스만 소개하겠습니다.

애드센스

티스토리 데이터를 조회할 수 없습니다. 계속 조회가 안 될 경우 고객센터로 문의해 주세요. 오류는 애드블럭을 이용하는 경우 애드센스 관련 데이터 로딩에 실패하여 발생하는 오류로 자신의 관리페이지를 화이트리스트하여 해결할 수 있습니다.

애드센스 연동시 주의사항

애드센스를 연동하는경우 애드센스 플러그인을 이용할 수 없고 제거됩니다.

저는 이 플러그인으로 다른기능도 병행하고 있어 수익기능을 연동하지 않았습니다.

간단하고 깔끔한 제목 CSS로 꾸미기

hi098123 — Sun, 25 Oct 2020 08:26:59 +0900

제목을 간단하고 깔끔하게 꾸며보고자 합니다.

여러 디자인이 있겠지만 아래와 비슷한 느낌으로 꾸며보고자 합니다.

제목

CSS 코드

border-left 값으로 왼쪽 엣지를 꾸밀것이고
background-color로 배경색상을 줄것이고
padding으로 내부 여백을 줄것입니다.

border-left

저는 PC, Mobile 모두 5px이 깔끔해보여서 5px으로 설정해보았습니다.

border-left: 5px solid #FF9800;

background-color

원하는 색상을 입력하시면 됩니다.

background-color: #FFF3E0;

padding

내부 여백입니다. 저는 10px이 깔끔한것 같아 10px으로 설정하였습니다.

padding: 10px;

미리보기

제목 미리보기

h2{
	padding: 10px;
    border-left: 5px solid #F44336;
    background-color: #FFEBEE;
}

제목 미리보기

h2{
	padding: 10px;
    border-left: 5px solid #9c27b0;
    background-color: #F3E5F5;
}

제목 미리보기

h2{
	padding: 10px;
    border-left: 5px solid #673AB7;
    background-color: #EDE7F6;
}

제목 미리보기

h2{
	padding: 10px;
    border-left: 5px solid #3f51b5;
    background-color: #e8eaf6;
}

제목 미리보기

h2{
	padding: 10px;
    border-left: 5px solid #2196f3;
    background-color: #e3f2fd;
}

제목 미리보기

h2{
	padding: 10px;
    border-left: 5px solid #009688;
    background-color: #e0f2f1;
}

제목 미리보기

h2{
	padding: 10px;
    border-left: 5px solid #4caf50;
    background-color: #e8f5e9;
}

제목 미리보기

h2{
	padding: 10px;
    border-left: 5px solid #8BC34A;
    background-color: #f1f8e9;
}

제목 미리보기

h2{
	padding: 10px;
    border-left: 5px solid #FFEB3B;
    background-color: #fffde7;
}

제목 미리보기

h2{
	padding: 10px;
    border-left: 5px solid #ffc107;
    background-color: #fff8e1;
}

제목 미리보기

h2{
	padding: 10px;
    border-left: 5px solid #ff9800;
    background-color: #fff3e0;
}

제목 미리보기

h2{
	padding: 10px;
    border-left: 5px solid #ff5722;
    background-color: #FBE9E7;
}

제목 미리보기

h2{
	padding: 10px;
    border-left: 5px solid #795548;
    background-color: #EFEBE9;
}

제목 미리보기

h2{
	padding: 10px;
    border-left: 5px solid #607D8B;
    background-color: #ECEFF1;
}

안내사항

다양한 색상 조합을 예시로 들었는데 이런 조합외에도 어울릴만한 색상이 있을것이니 찾아서 적용하시면됩니다.
h2 부분은 CSS Selector 부분으로 CSS Selector 문법으로 원하는 태그를 지정하시면 됩니다.

광고 렌더링에 실패했습니다.

hi098123 — Fri, 16 Oct 2020 01:35:16 +0900

애드센스를 관리하면서 처음 본 오류인데 "광고 렌더링에 실패했습니다."라는 오류가 떳습니다.

광 고 렌더링에 실패했습니다. 오류

파이어폭스 브라우저를 이용했는데, 브라우저에서 광고를 차단하는 기능과 충돌이 있는것으로 예상하고 살펴보았는데 구글측에서의 문제인 정보로딩 API부분 문제로 예상이 됩니다.

(어떤 의미냐면 구글 서버쪽의 문제로 광고 정보를 불러오지 못하고 있습니다.)

오류가 났다가 몇 분뒤에 정상적으로 표시되고를 반복하고 있는것으로 보아,

또 다음페이지로 넘기면 불러와 지는것으로 보아 이에 따른 해결방법은 하나가 있습니다.

기존의 대 화면이 아닌 작은화면으로 하나씩 처리하면 일부 문제있는 광고정보 이외에 처리가 가능합니다.

구글에서도 알려주지 않는 임시 해결방법

먼저 원래 화면대로 차단관리를 합니다.(렌더링 문제 발생시 다음페이지로 이동합니다.)

큰 화면에서 모든 페이지에 렌더링 문제가 발생하면 적은 개수만 화면에 보이게끔 화면크기를 줄입니다.

일부 광고 정보를 0으로 불려와지던데, 이때 페이지에 있는 광고 대부분이 실패하는것으로 확인되어 광고 개수를 적게 로딩하면 일부 정상적인 광고가 로딩되는 것을 확인하여 작성한 임시 해결방법입니다.

* 추후 구글에서 공식안내가 있을수 있으며, 이 글은 구글의 공식문서가 아닙니다.

저는 이렇게 광고 모두 검토완료했습니다.

100개 이상 광고 검토 30여개 실패 (큰 화면)
새로고침
화면에 2개 광고로 12개 실패
새로고침
화면에 1개 광고로 모두 성공

애드센스 크롤러 Mediapartners-Google

hi098123 — Wed, 14 Oct 2020 18:14:45 +0900

Mediapartners-Google

저는 최근에 티스토리나 워드프레스등 다른 제품에 의존하지 않고 순수 php,html로만 사이트를 제작하여 애드센스를 승인 받았습니다.

배포후 2주만에 승인을 받긴했는데 오늘 서버로그를 보다가 특이한게 있어서 글을 작성하게 되었습니다.

서버 로그중 일반 사용자가 사이트에 접속한 로그가 발생하고,

몇 초후 같은 페이지를 항상 구글 애드센스의 크롤러인 "Mediapartners-Google"이 방문을 하는점이었습니다.

티스토리 이외에 애드센스 운영은 처음이기도 하고 사용자 방문후 몇 초 이내 크롤러가 방문하여 확인하는것을 보고 대단하다고 생각되었습니다.

전 세계 애드센스 사용량을 생각하면 구글 서버에도 부담이 많이 갈텐데 말이죠.

당연히 이렇게 크롤링을 해두면 애드센스측의 로그 분석에도 도움이 될것이고, 이런 방식으로 애드센스가 크롤링을 하는지는 몰랐기 때문에 신기하여 작성한 글입니다.

Mediapartners-Google을 막으면?

애드센스 광고를 게시할 수 없습니다. 애드센스 관리페이지에서 크롤링오류가 발생할 수 있습니다.

jsdelivr CDN 이용하기

hi098123 — Wed, 14 Oct 2020 01:06:14 +0900

jsdelivr CDN

jsdelivr은 전세계적으로 이용할 수 있고, 해외에서 접근하기 어려운 중국에서도 빠른속도로 제공할 수 있습니다.

전세계적으로 빠른속도를 제공할 수 있는 이유로는 jsdelivr을 사용하면, 여러 CDN중에서 가까운(또는 가장 빠른)곳에서 파일을 전송하게 됩니다.

전 세계 서버위치

제공 과정

먼저 DNS가 이중화 되어있습니다.

그리고 CDN을 통하는데 Cloudflare, Fastly, StackPath, QUANTIL중에 가장 빠른 위치로 접속하게 됩니다.

만약에 이 4개 네트워크가 마비시, 아마존 S3서버를 통하게됩니다.

매우 안정적이고 빠를수밖에 없는 구성입니다.

한국에서는

jsdelivr은 한국에 서버가있는 Cloudflare와 StackPath로 부터 데이터를 전송하게 됩니다.

티스토리 업로드와 속도비교?
티스토리와 로딩 속도는 비슷합니다.
다만, 캐시 설정에 차이가 있어 웹브라우저에서는 티스토리(daumcdn)는 30분마다 재로딩, jsdelivr은 12시간마다 재로딩을 하게됩니다.
당연히 12시간 마다 재로딩을 하는게 속도측면에서 더 좋습니다.
또한 jsdelivr은 한국에 두 회사에서 분산하여 제공하고 있기 때문에 더 안정적입니다.
DNS까지 따지면 두 회사가 추가되고 Cloudflare와 StackPath이 모두 접속불가한 상황이 되어도 원본서버로 연결되기 때문에 더 안정적입니다.

위에 Cloudflare와 StackPath이 모두 접속불가한 상황이라는 가정은 전세계 인터넷의 50% 이상이 마비된 상황입니다.

이용 약관

중요한 내용으로 jsDelivr 사용은 개인 및 상업용 모두 무료입니다. 라는 내용이 될것 같습니다.

다만, 이미지 CDN용으로 + 대용량 파일전송용으로 이용시 약관위반입니다.

using jsDelivr is free for both personal and commercial use
using jsDelivr as a storage for all uploaded images

jsDelivr - A free, fast, and reliable CDN for Open Source

Supports npm, GitHub, WordPress, Deno, and more. Largest network and best performance among all CDNs. Serving more than 80 billion requests per month. Built for production use.

www.jsdelivr.com

주의할 점

작성일 기준으로 Github나 NPM 저장소 특정버전 용량이 50MB를 넘으면 파일전달에 실패하고 오류안내가 뜹니다.

Package size exceeded the configured limit of 50 MB.

타당한 프로젝트라면, jsDelivr에 문의하여 제한을 늘릴수 있고, 대부분의 경우는 용량을 줄여서 이용해야됩니다.
최초 로딩시 시간이 좀 걸립니다.
안정성을 위해 아래의 과정을 거쳐서 전달되는데 중간 서비스들이 많아 최초로딩에 시간이 걸립니다.
- 최초로딩 과정
  1. 코드 저장소(Github/NPM)
  2. Amazon AWS
  3. jsDelivr 원본 서버
  4. CDN(CloudFlare, Fastly, Stackpath, QUANTIL)
  5. 사용자
- 한번 로딩된 이후로는, 이미 CDN에 캐싱되었다면?
  1. CDN(CloudFlare, Fastly, Stackpath, QUANTIL)
  2. 사용자
- CDN에 캐싱안된 경우?
  1. jsDelivr 원본 서버
  2. CDN(CloudFlare, Fastly, Stackpath, QUANTIL)
  3. 사용자
실제 사용할 코드고 코드변경이 없을 예정이라면 release버전을 꼭 이용하세요.
release버전으로 올리면, 캐시시간이 6시간이 아닌 거의 무한으로 올라가서 항상 캐시가 되어버립니다.

활용 방법

Github 활용법

깃허브에 레포지토리를 생성한 이후 CDN에 올리고 싶은 파일을 올립니다.
다음의 경로로 접근가능합니다.
https://cdn.jsdelivr.net/gh/깃허브아이디/레포지토리/파일경로

아래의 예시 깃허브에서 dist폴더의 jquery.min.js파일에 접근하려면

https://cdn.jsdelivr.net/gh/jquery/jquery/dist/jquery.min.js 이렇게 url이 생성됩니다.

jquery/jquery

jQuery JavaScript Library. Contribute to jquery/jquery development by creating an account on GitHub.

github.com

알고있을 내용

URL에 한번 접속(최초접속)시 파일이 캐시됩니다. (= 처음에 깃허브에서 불러오므로 느림)
기본적으로 12시간동안 캐시되므로 변경사항이 바로 적용되지 않음에 주의하세요.

추가 활용법

https://cdn.jsdelivr.net/gh/jquery/jquery@3.2.1/dist/jquery.min.js 과 같이 레퍼지토리명 뒤에 버전정보 기입가능
- @latest
- @3.2.1
- @a503c69
- @a503c691dc06c59acdafef6e54eca2613c6e4032

6자리 커밋코드 또는 풀코드 모두 활용가능합니다.

버전을 이용하면 캐시되지 않은 url이므로 새로 캐시하게 되어 기존 버전에 급하게 업데이트가 필요시 버전정보를 이용할 수도 있습니다.

NPM 활용법

NPM에 빌드한 이후 다음의 경로에서 파일을 불러올 수 있습니다.

https://cdn.jsdelivr.net/npm/package@version/file

역시 버전정보는 필수가 아닙니다.

추가 활용법

위와 동일하게 버전정보를 입력가능합니다.

티스토리 '수익' 메뉴 신설

hi098123 — Mon, 12 Oct 2020 14:40:11 +0900

수익 창출 관리기능을 곧 선보인다고 합니다.

공지를 보자마자 업데이트 후 문제될 점들이 몇개 보이는군요.

미리 예상될 주의해야될 점을 알아보고, 무엇이 바뀌는지 알아봅시다.

바뀌는 점

블로그 관리에 '수익'이라는 메뉴가 신설됩니다.
각 플랫폼 관리 메뉴에서 최근 수익 추이을 확인하고, 광고를 설정할 수 있습니다.
에디터에서도 본문 중간에 광고를 추가할 수 있도록 변경됩니다.

기대되는 기능입니다.

어떤 점이 좋아지나요

구글과의 업무 협의를 통해 'ads.txt 문제'를 해결했습니다. 애드센스를 연동하면 바로 해결됩니다.
심사부터, 광고 설정, 수익 확인까지 티스토리에서 바로 가능합니다.
복잡한 스크립트나 html 편집 없이도 on/off 버튼 클릭만으로 보다 편하게 광고를 설정할 수 있습니다.

1. ads.txt 문제는 2차 도메인에서만 발생하는 문제입니다.
2. 심사단계부터 연동되어 티스토리 관리페이지에서 된다니 많이 협력한것 같네요.
3. 이 기능이 연동을 강조하며 html 편집을 제거한다면 문제가 발생할수 있을것입니다.

기존 수익 플러그인

새로운 수익메뉴 연동시 기존의 플러그인이 연동해제됩니다.

수익 메뉴를 선보임과 동시에 플러그인의 신규 사용 설정은 불가능한 점 참고해 주세요.

앞으로 위의 플러그인 사용이 불가하다고 안내합니다. 본문 상단 하단에 html코드를 입력하는 플러그인은 필요하다고 봅니다.

모든 글에 일괄적으로 넣어줄(티스토리 모바일전용 페이지는 스킨 적용이 안되므로) 방법이 없어지는게 아닌가 싶네요.

저는 일단 바로 연동하지 않고 조금 지켜볼 예정입니다.

언제 사용할 수 있나요?

2020년 10월 내에 선보일 수 있도록 열심히 준비중이랍니다.

[사전 안내] 수익 창출을 위한 기능이 곧 찾아갑니다.

안녕하세요. 티스토리팀입니다. 지난 2020년 하반기에 달라지는 티스토리 공지에서 말씀드린 대로 '수익 창출 기능'을 곧 선보입니다. 어떤 모습인가요? 1. 블로그 관리에 '수익'이라는 메뉴가 신�

notice.tistory.com

2020-10-08 티스토리 서버 오류

hi098123 — Thu, 8 Oct 2020 16:15:31 +0900

오늘 티스토리 이용이 일시적으로 정상적으로 불가했습니다.

일반적으로 이런 오류는 서버쪽 네트워크가 불안정하거나, 디도스등 큰 대역폭 공격을 받거나 서버 부하가 감당이 안되거나 내부 소프트웨어 오류로 응답이 어려운 경우일수 있습니다.

티스토리 포럼에 글이 올라왔는데, 15시54분 이전부터 불안정했습니다.

지금은 크게 불안정하지는 않은것을보면 오류부분을 수정한게 아닌가 추정됩니다.

16:18쯤에는 불안정하지만 접속이 되긴 하였고, 지금(16:20)은 안정적으로 접속되는것으로 보아 오류가 수정되지 않았나 예상됩니다.

티스토리 댓글이 검색에 영향을 줄까요?

hi098123 — Sun, 4 Oct 2020 18:35:53 +0900

티스토리 댓글이 검색에 영향을 줄까?라는 생각을 한두 번 해봤을 수 있습니다.

티스토리 블로거라면 궁금할 주제일수있는데, 과연 어떨까요?

검색엔진에 댓글이 영향?

각 검색엔진에 댓글이 검색되는지 확인해보면됩니다.

제가 확인해본 바로는 댓글의 내용도 검색에 반영됩니다.

이 사실을 알게 된 후에는 티스토리 댓글을 승인 모드로 변경해두었습니다.

어떻게 알게 되었나?

어떤 사람이 댓글을 단 이후 해당 검색어로 유입이 급격히 늘은 긍정적인 사례가 있었는데, 이 계기로 알게 되었던 경우입니다.

이를 통해 알수있던 사실은 블로그내 모든 컨텐츠가 저장되어 검색결과에 반영됩니다.

때문에 댓글 관리도 잘해줘야 검색 최적화에 도움이 됩니다.

쓸모있는 댓글 선별하기

주제와 연관된 질문답변은 공개된 댓글로 작성된게 좋습니다.
일반적이지 않거나 연관이 없는 댓글은 표시하지 않는게 좋습니다.

그렇다고 너무 다 정리할 필요는 없고 긍정적인 댓글등은 표시해두고,

질문 답변을 본문 수정을 통해 추가하는 등 더 좋은 방법을 연구해보셔도 될것같네요.

간혹 내용과 연관되는데 비밀댓글로 달린경우 내용을 본문에 추가정리해주는게 긍정적인 방향이 아닐까 생각합니다.

글을 수정하라? 페이지의 인기가 높아지고 있습니다

페이지의 인기가 높아지고 있습니다 최근 구글 서치 콘솔로부터 받은 메일의 문구입니다. 페이지 뷰가 평소 대비 1,000% 향상되었음을 안내하고 있습니다. 이러한 상승 추세에는 다음과 같은 ��

hi098123-skin.tistory.com

티스토리 댓글 승인 모드로 바꾸기

티스토리 관리페이지에서 "댓글 방명록"의 "설정"에 들어갑니다.
댓글을 승인후 표시합니다로 변경합니다.

'평가 중인 계정' 게시 제한조치란?

hi098123 — Sun, 27 Sep 2020 07:46:17 +0900

문서화가 잘 안되어있고, 설명에 부족한점이 많아 의문이실 수 있습니다.

구글 일부 문서는 해석이 필요한 경우가 있습니다.

(알고보면 보이는데, 모르고 보면 이해가 안되는 문서가 종종 있습니다.)

광고 게재가 제한되었습니다 - 평가 중인 계정

이는 예시화면으로 구글의 문서에서는 아래와 같이 안내합니다.

평가 중인 계정
트래픽 품질을 평가하는 동안 계정에서의 광고 게재가 일시적으로 제한됩니다. Google에서 트래픽을 계속 모니터링함에 따라 이 한도가 자동으로 검토 및 업데이트됩니다. 소요 시간은 예측할 수 없습니다.

취할 수 있는 조치
사이트 트래픽을 평가하는 동안 콘텐츠와 잠재고객을 계속 구축하세요. 또한 애드센스 프로그램 정책을 준수하세요.
조치를 취하는 동안에도 계정 전체에 계속 액세스할 수 있고 정책 센터에서 계정 수준 시정 조치에 대한 세부정보를 볼 수 있습니다. 계정이 애드센스 프로그램 정책을 준수하도록 항상 주의를 기울여 주시기 바랍니다.

핵심은 트래픽 품질에 있습니다.

이와 유사한 문제로 무효트래픽 게재 제한조치가 있습니다.

트래픽 품질 문제

예를 들어, 이런 상황을 가정해보겠습니다.

A씨는 애드센스에 승인되었습니다.
기쁜 나머지 작성했던 글을 수정하며 광고를 직접 페이지를 열어보며 넣고 있습니다.
평가 중인 계정 문제로 게시가 제한됩니다.

분명 위의 상황에서 정지사유가 있습니다.

바로 2번 직접페이지를 열어보며 광고를 넣는 행위가 무효트래픽으로 문제가 된것입니다.

무효트래픽

무효 트래픽은 의도적으로 광고주의 비용 또는 게시자의 수입을 늘리기 위한 클릭이나 노출을 말합니다.

처음 등록했다면, 여러페이지 광고를 보는것만으로 문제가 당연히 될 수 있습니다.

사용자가 별로 없어 내 웹브라우저에 광고가 표시되는게 페이지 전체 광고 로드중 90% 이상을 차지한다면?

애드센스측에서 모니터링할때 문제있는 상황으로 검토해야할것입니다.

Adsense: 아니 어떤사람이 전체 광고 뷰의 N%이상이네? 일단 자동 검토 걸고, 직원 검토시켜야지

이런식으로 일시 수익정지를 받게되면 대부분 사람이 검토한 이후 풀리게 됩니다.

사람의 처리 속도는 한계가 있어 길면 1달이 걸릴수도 있습니다. (1달을 조금 더 넘길수도 있습니다.)

이를 방지하기 위해

방법 1. 티스토리 글에 직접 수정을 하는게 아닌 플러그인을 이용하는 방법이 있습니다.

티스토리 애드센스 플러그인

방법 2. 애드블럭으로 내 광고를 차단합니다.

사이트맵 관련 구글 문서 오류

hi098123 — Sat, 26 Sep 2020 04:06:34 +0900

오류 발견 계기

최근에 큰 사이트맵이 필요한 다른 사이트를 새로 개설했는데 사이트맵 관련하여 오류가 여러번 나길래 공식문서상 규칙을 모두 지켜도 오류가 나더군요. 공식문서상에 잘못된 부분을 확인하였습니다.

구글은 사이트맵 제한을 크기 50MB이하와 URL 50,000개 이하로 제한한다고 안내합니다.

이 의미는 두가지 조건을 모두 충족해야한다는 의미입니다.

영어문서에서도 이와 유사하게 설명되어있습니다.

무엇이 잘못되었는가?

실제로 구글의 사이트맵 제한은 크기 10MB이하 그리고 URL 50,000개 이하입니다.

50MB라면 이것저것 많은 태그들을 사용가능하지만 10MB라면 url과 추가로 태그 하나정도 더 쓸수밖에 없는 양입니다.

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://hi098123-skin.tistory.com</loc>
    <lastmod>2020-09-25T23:25:41+09:00</lastmod>
    <priority>1.0</priority>
  </url>
  <url>
    <loc>https://hi098123-skin.tistory.com/category</loc>
  </url>
  <url><loc>https://hi098123-skin.tistory.com/tag</loc></url>
  <url><loc>https://hi098123-skin.tistory.com/guestbook</loc></url>
</urlset>

사이트맵이란?

XML구조에서 urlset 안에 url들이 들어가서 사이트 내에 존재하는 주소를 나타내는 파일입니다.

오류를 해결하려면?

실제는 10MB(10,485,760 bytes) 제한이 있으므로 50,000개 주소를 포함하는 사이트맵을 생성하려면

urlset
- url
  - loc

이러한 구조를 지니던가..

urlset
- url
  - loc
  - lastmod

이러한 구조만 지니면 될 것 같습니다.

복잡한 구조를 가지면 50,000개 url일때 10MB를 넘길수가 있더라고요.

원하는 태그를 작성하고, url개수를 조절하는 방법도 있습니다.

여기에서 url 개수는 XML의 <url>태그 개수를 의미합니다.

애드센스 승인대란?

hi098123 — Wed, 23 Sep 2020 13:47:35 +0900

승인대란?

오늘 애드센스 승인을 쉽게 해준다는 글을 보았습니다.

그러고 나서 원 출처가 어디인지 찾아보았더니 네이버 카페 "애드센스 스쿨" 이더군요.

현재 이 카페의 자유게시판에는 글 0~1개도 승인이 된다 등의 글들이 있습니다.

그러나 약관상 승인취소가 될 수 있습니다. 다음은 구글 애드센스 약관의 일부입니다.

구글은 경고 또는 사전 통지 없이 언제든지, 귀하의 무효 활동 또는 애드센스 정책을 미준수 등의 사유로 귀하의 계정에 대한 향후 지불금 지급을 일시적으로 중지하거나, 서비스 사이트의 참여를 중지 또는 종료하거나, 또는 귀하의 계정을 중지 또는 종료할 권한을 보유합니다.

아마도 취소사유는 "애드센스 정책 미준수 - 가치있는 인벤토리 콘텐츠 없음"이 되지 않을까 예상됩니다.

글 0개~1개가 승인될 가능성은 희박하기 때문에 일시적인 오류로 보이며 재검사가 진행될것 같습니다.

이 문제로 신청했다고, 계정밴을 당하진 않을겁니다.

이러한 정보를 모르고 일반적인 절차로 신청했다가 승인되었을수도 있으니까요.

왜 이런 오류가 발생했을까요?

애드센스는 원래 *.tistory.com을 개별 도메인 단위로 인식하는데 아마도 서비스내 변경사항으로 *.tistory.com으로 신청은 가능하나, 원래의 설계와 달리 이를 www.tistory.com로 인식하여 처리하는것이 아닌가 추정됩니다.

tistory.com 하위도메인에는 다양한 컨텐츠가 있으며 이를 동일 사이트로 취급하여(하위 도메인 추가와 같은개념) 바로 승인이 나는게 아닌가 생각됩니다.

글이 없는데도 승인이 된다는것은 있을수가 없는일이므로 아마도 이 예상이 맞을것같습니다.

그렇기 때문에 09/22 ~ 오류수정전까지 승인된 대부분의 티스토리 블로그는 승인이 번복되어 취소될 가능성이 있을것으로 예상됩니다.

10/02 애드센스 승인 대란 종료로 보입니다.

정확한 내용은 추후 구글에서 공지할것으로 예상되는데.. 승인이 필요하면 신청해 두시되 나중에 취소될수도 있음을 감안하시고 신청하시면 될 것 같습니다.

물론 번복을 안할수도 있습니다. 판단은 구글이 하기 나름이니까요.

오류임을 인지하고도 악용하는 행위는 강력히 제재받을 수 있음을 안내드립니다..

[중요] 티스토리 API의 Implicit 방식의 제거 이유?

hi098123 — Wed, 23 Sep 2020 08:40:41 +0900

티스토리에는 OPEN API라는 기능이 있습니다.

외부 프로그램에서 티스토리에 글을 작성하거나, 수정등 티스토리 활용을 도와주는 기능입니다.

최근(2020-09-02)에 Implicit 인증방식이 제거되었던 이유는 바로 보안문제 때문이었습니다.

어떤 보안 문제가 있었나?

악의적인 해커는 여러분의 티스토리 글을 모두 스팸으로 바꾸거나 모두 삭제하거나 스팸글을 새로 작성 할 수 있었습니다.

현재는 임시로 Implicit 방식을 제거하여 방지가 되나, 사용자가 모르고 클릭하는 경우 문제가 발생할 수 있습니다.

아래 링크에 자세히 설명하였으며, 확장프로그램등 방화벽으로 API관련 주소를 막으면 전혀 문제가 없습니다.

티스토리 이미지에 링크걸기

hi098123 — Sat, 19 Sep 2020 13:43:41 +0900

티스토리 에디터에서 이미지에 링크를 거는 기능 다들 알고 계셨나요?

아래의 이미지에는 hi098123-skin.tistory.com으로 이동하는 링크가 걸려있습니다.

hi098123-skin.tistory.com 링크?

이미지에 링크 거는 방법

이미지를 클릭합니다.
이미지 정렬 옆에 링크버튼이 있습니다.
클릭하신 후 원하시는 링크 주소를 입력하시면 연결됩니다.

HTML 구조

일반 이미지

##_Image|kage@MzDPN/btqI07DcNEn/06IvC56UE3DDGoiBMguZWK/img.png|alignLeft|data-origin-width="0" data-origin-height="0" data-ke-mobilestyle="widthContent"|||_##

<figure
	class="imageblock alignLeft"
	data-origin-width="0"
    data-origin-height="0"
    data-ke-mobilestyle="widthContent">
    	<span 
        	data-url="https://blog.kakaocdn.net/dn/MzDPN/btqI07DcNEn/06IvC56UE3DDGoiBMguZWK/img.png"
            data-lightbox="lightbox"
            data-alt="">
            	<img src="https://blog.kakaocdn.net/dn/MzDPN/btqI07DcNEn/06IvC56UE3DDGoiBMguZWK/img.png"
                	srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FMzDPN%2FbtqI07DcNEn%2F06IvC56UE3DDGoiBMguZWK%2Fimg.png"
                    data-origin-width="0"
                    data-origin-height="0"
                    data-ke-mobilestyle="widthContent">
		</span>
</figure>

링크가 포함된 이미지

##_Image|kage@b9w6gt/btqI8ffcf1f/vwNCV2P6MGVOCW8KCoqeoK/img.png|alignLeft|data-origin-width="0" data-origin-height="0" data-ke-mobilestyle="widthContent"|hi098123-skin.tistory.com 링크?|https://hi098123-skin.tistory.com/|_blank_##

<figure
	class="imageblock alignLeft"
    data-origin-width="0"
    data-origin-height="0"
    data-ke-mobilestyle="widthContent">
    	<a href="http://hi098123-skin.tistory.com" target="_blank">
        	<img src="https://blog.kakaocdn.net/dn/b9w6gt/btqI8ffcf1f/vwNCV2P6MGVOCW8KCoqeoK/img.png"
            	srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fb9w6gt%2FbtqI8ffcf1f%2FvwNCV2P6MGVOCW8KCoqeoK%2Fimg.png"
                data-origin-width="0"
                data-origin-height="0"
                data-ke-mobilestyle="widthContent">
		</a>
		<figcaption>hi098123-skin.tistory.com 링크?</figcaption>
</figure>

<a>태그로 <img>태그를 감싸고 있음을 알 수 있습니다.

이미지 클릭시에 링크가 동작하도록 되어있고 설명부분은 클릭해도 변화가 없을것으로 보입니다.

<figcaption>태그는 이미지 설명이 있고 없고의 차이입니다.

보안문제?

링크 noopener 보안문제가 발생할 수 있으나, 이 보안문제는 그렇게 큰 문제는 아닙니다.

관련 내용 : hi098123-skin.tistory.com/19#rel

티스토리 신 에디터에서 링크를 새탭으로 만들때 기본적으로 rel="noopener"가 있어서 신경을 쓴건가 했는데 여기에는 자동으로 입력되지는 않네요.

서버에서 치환하는 내용이므로, 티스토리측에서 수정하면 전부 적용될 수 있는 내용인것으로 여겨집니다.

티스토리 링크 미리보기, 투명이미지 버그 고치기

hi098123 — Sat, 19 Sep 2020 13:32:37 +0900

티스토리 링크 미리보기

티스토리에 링크를 걸고 링크 문장에서 엔터를 치면 아래와 같은 미리보기가 뜹니다.

1번 이미지

2번 이미지

위의 두 사진에서 차이가 보이시나요?

1번 이미지는 기본형태고, 2번 이미지는 이 글에서 소개할 내용을 적용한 이후의 이미지 입니다.

네 그렇습니다. 기본형태에서 티스토리 아이콘이 겹쳐보이네요.

이는 썸네일 이미지가 투명배경일때 발생하는 버그입니다.

투명 이미지 버그 고치기

투명색상 썸네일인경우 미리보기 이미지가 겹쳐보이는 문제가 발생하는데 위의 상황을 말끔히 없애줄 단 한줄의 코드가 있습니다.

관리 페이지에서 "꾸미기" - "스킨 편집"에 들어갑니다.
HTML 편집에 들어갑니다.
CSS에 들어가서 다음의 코드를 입력하시고 적용을 눌러 설정을 저장합니다.
실제 적용 예시

코드는 아래와 같으며 복사가능합니다.
```
figure[data-ke-type='opengraph']:not([data-og-image=""]) .og-image:before{background-image:none!important}
```
이미지가 있다면, data-og-image에 값이 있다는점을 고려해서 썸네일 이미지가 존재한다면 티스토리 이미지가 겹쳐보이지 않게 티스토리 아이콘 부분을 지우는 CSS코드입니다.

네이버) 웹표준을 준수하는 상위 1% 사이트 입니다.

hi098123 — Sat, 19 Sep 2020 09:14:07 +0900

네이버 웹마스터 도구를 보시면 "웹표준을 준수하는 상위 N% 사이트 입니다." 라는 문구를 보실 수 있을 겁니다.

몇 주만에 들어가 봤는데 만든지 한 달 갓넘은 이 블로그가 상위 1%가 되어있네요.

기념으로 각 항목에 대해 알아봅시다.

네이버 사이트 최적화

위와 같은 항목들이 있습니다. 아래에서 자세히 설명합니다.

검색 로봇 수집

robots.txt
robots.txt는 티스토리에서 기본적으로 작성되어있습니다.

때문에 티스토리 사용자라면 오류가 없다면, 이 항목은 항상 통과일수밖에 없습니다.
로봇 메타 태그
```
<meta name="robots" content="all" />
```
위와 같은 태그를 포함하고 있으면 됩니다. 설정하지 않아도 기본값입니다.
사이트맵

티스토리에서 자체적으로 사이트맵을 생성해주기 때문에 티스토리주소/sitemap.xml 을 제출하시면 됩니다.
수집 현황
이 항목은 처음시작했거나, 콘텐츠에 문제가 있을때 느낌표 표시가 뜰 수 있습니다.

수집이 잘 되고 있는지를 알려줍니다.

콘텐츠 관리

사이트 제목
HTML의 title 태그의 설정값이 괜찮은지 표시됩니다.

주의할 점
- 모든 페이지에 중복되는 제목태그 (예: 블로그명만 표시)
- 너무 짧아서 설명이 안되는 경우
사이트 설명
```
<meta name="description" content="내용 요약">
```
위와 같은 HTML코드입니다. 내용을 요약해서 검색엔진에 나타냅니다.
Open Graph 제목
```
<meta property="og:title" content="페이지 제목" >
```
위와 같은 HTML코드입니다. 제목을 링크공유에 나타냅니다.
Open Graph 설명
```
<meta property="og:description" content="내용 요약" >
```
위와 같은 HTML코드입니다. 내용을 요약해서 링크공유에 나타냅니다.

사이트 구조

HTML 구조
HTML 구조상에 오류가 있는지 나타냅니다.

태그가 제대로 안닫혔거나, 잘못된 태그사용시 느낌표가 뜰 수 있습니다.
링크 관리
HTML <a>태그가 아닌방식의 링크가 있다면 느낌표가 뜰 수 있습니다.

자바스크립트 방식의 링크라면 검색엔진에 분석되지않으므로 주의.
모바일 사용성
모바일에서 사용성이 좋은지 나타냅니다.

티스토리는 스킨에 따라 사용성이 좋은스킨과 안좋은 스킨이 있습니다.

사이트 활성화

웹 페이지 생산
수집 원활 여부를 나타냅니다.

시작하지 얼마 안되었거나, 콘텐츠 가치가 없을때 느낌표 표시가 뜰 수 있습니다.
사이트 평판
이미 가치있다고 판단된 사이트로 부터 링크가 걸려있다면, 평판이 올라갑니다.

티스토리의 경우 *.tistory.com 기본주소 사용시 기본주소끼리는 링크 영향을 주지 않습니다.

글을 수정하라? 페이지의 인기가 높아지고 있습니다

hi098123 — Sat, 19 Sep 2020 08:53:48 +0900

페이지의 인기가 높아지고 있습니다

최근 구글 서치 콘솔로부터 받은 메일의 문구입니다. 페이지 뷰가 평소 대비 1,000% 향상되었음을 안내하고 있습니다.

이러한 상승 추세에는 다음과 같은 이유가 있을 수 있습니다.

페이지 콘텐츠 수정
페이지에서 다루는 인기 주제에 대한 관심 상승

위의 사례는 콘텐츠를 수정한 경우!

콘텐츠라 하면 글입니다. 1년 전에 작성했던 글이 마음에 안 들어 수정하고 내용을 추가했더니 조회수가 1,000% 향상되었습니다.

약간의 향상을 기대하긴 했는데 기대 이상으로 효과가 나왔네요..

무엇을 수정했나?

흔하게 떠도는 루머로 글을 수정하면 안좋다?라는 말을 들어본 적 있을것입니다.

저는 여러 프로그램을 개발해보면서 검색 알고리즘이 그럴리 없다고 생각했으며,

알고리즘은 당연히 이걸 좋아하겠지라고 생각한 두 가지를 수정해봤습니다.

HTML 구조변경

기존의 HTML구조는 단순 문서였습니다. 가독성이 나쁘게 쓰인 건 아니지만 HTML가독성(로봇이 읽기)이 좋은 글은 아니었습니다.

이 글의 구조를 로봇이 이해하기 쉬운 구조로 변경해보았습니다.

관련 글 hi098123-skin.tistory.com/18

내용 추가하기

기존 내용에 덧붙여서 함께 필요한 정보를 추가해봤습니다.

기존 내용만 보면 잘 이해가 안 된다면, 문서 하나를 더 찾아봐야 될 내용을 조금 더 쉽게 써서 누구나 볼 수 있게 작성하였습니다.

생각보다 성과가 좋네요

일주일째 1,000% 향상된 뷰를 달성한 글 1개가 일 500+가 나와주고 있네요.

위의 수정사항 두 가지를 보면 수정 전과 후를 비교할 때 당연히 수정 후의 문서가 더 좋다고 판단할 것입니다.

만약, 글을 수정 후 글의 순위가 떨어지는 것은 글을 잘못된 방향으로 수정한 경우라고 볼 수 있습니다.

마음만 같아서는 수정하고 싶은 글이 한두개가 아닌데 바빠서 남겨두는 게 아쉽네요.

제가 생각하는 가치있는 게시글의 조회수는 글 1개당 일 50+정도라고 봅니다.

블로그를 시작한지 얼마되지 않았다면 게시글당 일 50+ 조회수는 어렵습니다.

지금 보고 계시는 이 블로그도 만든지 한달이 조금 지난 블로그라 조회수는 얼마 안됩니다.

일단은 평판을 쌓는 일부터 차근차근 시도해보세요.

제가 주로 작성하는 스타일은 장기적인 컨텐츠로 지속적인 유입이 있을만한 글을 위주로 다룹니다.

저는 장기적 수익화를 지향하고 있으며 글은 가끔씩 쓰고 있습니다.

애드센스, 효율적으로 돈 벌기

애드센스를 수익 목적으로 하는 사람들이 있는데 제 의견으로 블로그는 돈이 안됩니다. 꾸준히 페이지 뷰가 1만 이상은 나와야 돈이 좀 되는데 블로그중 이 정도의 컨텐츠를 갖고있는 경우는 적

hi098123-skin.tistory.com

카카오계정 티스토리 계정연동하기

hi098123 — Fri, 11 Sep 2020 18:32:35 +0900

공지사항에서 6달 후 부터는 기존의 이메일방식 로그인이 중단된다고 안내합니다.

불편을 겪지않게 연동하는방법은 어떤방법이 있을까요?

카카오 계정 연동방법

연동방법으로는 두가지 방법이 있습니다.

기존 사용하던 카카오 아이디로 연동하기
새로 만든 아이디로 발급하기

티스토리 공지사항에서는 아래와 같이 안내하고 있습니다.

유의하실 점
연결한 티스토리 계정과 카카오계정을 분리하거나 변경할 수 없습니다.
티스토리 계정을 연결할 때, 카카오톡 앱에서 사용하는 카카오계정 혹은 가장 자주 사용하는 카카오계정을 티스토리 계정에 연결해주세요.

Q. 카카오계정에 연결하면, 사용 중인 카카오톡에 티스토리 정보가 공개되나요?
A. 카카오계정에 연결하시더라도, 티스토리의 어떠한 정보도 카카오톡에 공개되지 않습니다.
또한 카카오톡 관련한 정보 역시 티스토리 블로그에 전혀 공개되지 않습니다.

Q. 2개 이상의 티스토리 계정을 사용 중입니다. 모두 하나의 카카오계정에 연결할 수 있나요?
A. 1개의 티스토리 계정은 1개의 카카오계정에 연결됩니다.
2개 이상의 티스토리 계정을 1개의 카카오계정에 연결하는 것은 불가능합니다.
여러 개의 티스토리 계정을 계속해서 사용하시려면, 티스토리 계정 수에 맞게 카카오계정에 추가로 가입해주세요.
카카오계정 가입은 아래의 링크에서 가능합니다.
- 카카오계정 가입 바로가기

그렇다면 대안이 있습니다.

사용하던 카카오 아이디에 연결시 여러 불편함이 있을 수 있으므로 계정을 새로 만드는 방법을 이용한다면, 기존과 동일하게 이용할 수 있습니다.

티스토리 이메일 계정마다, 새로 아이디를 만들어서 연동한다면 추가적인 문제없이 이용가능합니다.

카카오 계정 생성방법

카카오 계정 가입하기에 들어갑니다.
이메일있음 또는 없음(생성하기)을 누르면 가입 절차가 시작됩니다.
이용약관에 동의하고 다음으로 넘어갑니다.
가입할 정보를 입력하고 이메일 인증을 완료하면 가입가능합니다.

만약 이메일 인증시 아래와 같은 `올바르지 않은 접근입니다.처음부터다시시도해주세요.` 오류가 뜬다면? 이미 해당 이메일로 아이디가 있는경우일수도 있습니다. 또는 한 ip에서 이메일 인증 시도가 많을때일수도 있습니다.
다음을 눌렀다면 가입이 완료됩니다.

이렇게 가입을 마쳤다면 나중에 안내될 연동절차를 이용하면 됩니다.

카카오 계정 연동하기

카카오 계정 연동하기 버튼을 누릅니다.
- 연동버튼은 로그인시
- 계정정보에서
- 계정 관리 페이지에서 버튼이 있습니다.
카카오계정 전환을 시작합니다.

만약 로그인이 안되어있다면? 회원가입을 하고 오시면 동일하게 진행됩니다.
카카오계정 전환을 시작합니다.
저는 헷갈리지 않도록 기존 이메일 아이디와 동일하게 카카오 계정을 생성하여 연동하였습니다.
카카오계정 전환이 완료되었습니다.

티스토리 글 URL (숫자, 문자) 설정하기

hi098123 — Thu, 10 Sep 2020 17:04:05 +0900

티스토리의 글은 두 종류로 URL 사용 가능합니다.

숫자 주소 <https://hi098123-skin.tistory.com/59>
문자 주소 <https://hi098123-skin.tistory.com/entry/티스토리-글-URL-숫자-문자-설정하기>

설정 방법

관리 페이지에서 관리-블로그에 들어갑니다.
주소 설정에서 원하는 주소형태로 사용가능합니다.

티스토리 신규스킨 오디세이(Odyssey) 리뷰

hi098123 — Thu, 10 Sep 2020 01:17:50 +0900

전체적인 평을 하자면 괜찮다고 평가할 수 있을 것 같습니다.

각종 주제, 버그, 최적화 등에 대해 전반적으로 다뤄보고자 합니다.

작성일 2020-09-10 기준으로 작성될것이며, 버그 부분은 추후 티스토리가 인지했다면 수정될 수 있습니다.

먼저 주로 관심있을 애드센스에 대해 다뤄봅시다.

애드센스

평점 : ★★★★★

애드센스에 최적화 되어있나는 광고가 게시되었을 때 문제 될 점이 없어야 되고, 광고 게시 위치가 적절해야 됩니다.

모두 문제없이 최적화가 잘 되어있는 스킨입니다.

검색

평점 : ★★★★☆

최적화가 되어있습니다. 100% 확신할 수는 없으나 제가 확인한 바로는 네이버 블로그 탭에도 들어갈 수 있는 스킨입니다.

하지만, 버그성으로 문제 되는 태그가 있습니다. 단순 버그라고 보기에는 너무나도 큰 문제입니다.

<meta name="robots" content="noindex, nofollow, noarchive, nosnippet, noodp, notranslate, noimageindex" />

이 코드 때문에 수집이 정상적으로 안될 수 있습니다. (실제 사용시 이 HTML 태그를 제거해야 됩니다.)

이 태그로 검색 통누락 현상이 발생가능합니다.

이 문제는 티스토리측에서 스킨을 수정하여 수정되었습니다.
(이미 적용된 스킨도 티스토리에서 수정작업을 한걸로 보입니다.)

버그

검색 기능

검색 기능을 티스토리 기본값이 아닌 스킨에서 설정한 값으로 작동합니다.

스킨 설정에 오류가 있습니다.

common.js 중… requestSearch 함수

function requestSearch(className){
    try{
        window.location.href = '/search/' + encodeURI(document.querySelectorAll(className)[0].value);
        return false;
    }catch(e){

    }
}

이 함수에 잘못된 점은 encodeURIComponent가 아닌 encodeURI를 사용했기 때문입니다.

Javascript) encodeURI, decodeURI, encodeURIComponent, decodeURIComponent

Uri encode & decode 한글과 같은 데이터를 표기할때 사용되기도하고 데이터 송수신에 주로 사용된다. encodeURI encodeURI("A"); A encodeURI("한"); %ED%95%9C encodeURI("&"); & encodeURIComponent : 추가로 U..

hi098123.tistory.com

encodeURIComponent와 encodeURI의 차이는 위의 링크에서 확인 가능합니다.

검색에서 잘 안쓰이긴 하지만 <?> 같은 URIComponent를 검색하면 검색어에 제대로 반영되지 않습니다.

기존 코드는 정규식 replace를 씁니다.

function looseURIEncode(string) {
    return string = (string = (string = string.replace(new RegExp("%","g"), "%25")).replace(new RegExp("\\?","g"), "%3F")).replace(new RegExp("#","g"), "%23")
}

정규식 replace는 느리고 encodeURIComponent 브라우저 내장 함수를 사용하면 해결될 문제입니다.

SEO

<meta name="robots" content="noindex, nofollow, noarchive, nosnippet, noodp, notranslate, noimageindex" />

위에서 언급한 내용입니다. 이 태그가 있다면 페이지 수집을 거부합니다.

주 검색엔진인 구글, 네이버, 다음 등에 수집을 거절합니다.

모든 페이지에 적용되므로, 모든 페이지를 검색엔진이 수집하지 않고, 결국 모두 누락될 수 있습니다.

수정 방법

관리페이지에서 "스킨 편집"에 들어갑니다.
html편집에 들어갑니다.
meta name="robots" 한줄을 제거하면 해결됩니다.

이 버그는 개발용으로 쓰던 태그가 남아있던걸로 추정됩니다.

이 문제는 티스토리측에서 스킨을 수정하여 수정되었습니다.
때문에 이 방법을 적용할 필요가 없습니다.

최적화

Google폰트

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Noto+Sans+KR:400,500,700&amp;subset=korean">

구글 폰트 CDN으로부터 Noto Sans KR 폰트를 불러옵니다.

구글 폰트 CDN은 한국 서버가 없어서 일본, 싱가포르, 홍콩 서버등에서 리소스를 로딩합니다.

약간 로딩 시간이 느릴 수 있습니다.

원래 폰트 로딩이 오래 걸리는데 최적화를 위해서는 한국 서버가 있는 CDN을 쓰는 게 좋습니다.

하지만 구글 폰트는 소스나 서버 설정이 최적화가 되어있어 웬만한 서비스보다는 좋습니다.

한국 서버에 똑같은 설정으로 캐시가 된다면, 훨씬 빠르게 폰트 로딩이 가능할 겁니다.

SNS 연동

기능을 사용하지 않는다면, 사이드바에서 제거하세요.

SNS관련 모듈이 로딩됩니다. (안쓰는 리소스는 제거하는게 로딩 최적화에 도움이 됩니다.)

이미지 크게 보기(Light TT EX) 플러그인 켜고 끄기?

hi098123 — Fri, 4 Sep 2020 23:20:40 +0900

티스토리에는 이미지 크게 보기(Light TT EX) 플러그인 켜고 끄기에 오류가 있었습니다.

기능을 꺼놔도 동작하고 기능을 켜놔도 아무런 변화가 없던 플러그인인데요.

이미지 크게 보기(Light TT EX) 플러그인 (우측은 관련 코드)

티스토리의 필수리소스로 플러그인 설정여부와 관계없이 코드가 삽입되어 실행되었기 때문에 ON/OFF를 선택할 수 없는 문제가 있었습니다.

아마도 몇 달 이내에 고쳐질 문제가 아닐까 생각됩니다.

최근 문제를 인식하고 수정하겠다는 메일을 받았기 때문에 얼른 기능을 끄고싶어 글을 작성하게 되었습니다.

끄고싶던 이유는 리소스 로딩시간이 길던 필수리소스로 이 기능만 끄면 로딩속도가 매우 향상될 수 있을것 같기 때문입니다.

또한 이미지는 HTML의 <img>태그가 아닌 티스토리 치환자로 적용되기 때문에 티스토리에서 몇가지 설정만 진행한다면, 타 블로그 서비스인 Medium 처럼 lazy load를 쉽게 적용가능하지 않나 싶었습니다.

이 또한 건의했기 때문에 언젠가는 적용되지 않을까 기대하고 있습니다.

Lazy load를 적용하게 되면 아마 서버부담이 많이 줄어 더 좋아지지 않을까 싶네요.

사용자에서도 빠르게 로딩이 가능하니까 더 좋고요.

한 개 더 바라는 점은, Lazy load와 함께 <picture>태그를 이용해 webp로 인코딩 된 이미지를 표시한다면 jpg, gif같은 컨텐츠 전송 대역폭 또한 획기적으로 최적화가 가능하며, 로딩속도가 훨씬 빨라질수 있을것입니다.

크롬에서 티스토리 알림이 안 뜨고, 공지가 안 보인다면?

hi098123 — Fri, 4 Sep 2020 21:16:26 +0900

크롬에서 접속시 티스토리 알림이 안 뜨고, 공지가 안 보이더군요.

최근 며칠간 이런 문제가 있었던것 같은데 분석해서 글을 써봤습니다.

알림이 안뜨고

공지가 안뜨는 현상?

티스토리 알림 기능

https://www.tistory.com/accio/notification/list?from=0

티스토리의 알림은 위의 주소에서 로그인된 정보를 이용해서 알림 리스트를 불러오고

https://www.tistory.com/accio/notification/new

위 주소를 이용해서 주기적으로 폴링(주기적으로 체크하는 방식 : 티스토리는 1분마다 갱신한다.)하여 알림 정보를 불러옵니다.

티스토리 공지 기능

https://www.tistory.com/accio/notices

공지는 위의 주소에서 불러옵니다.

{"status":200,"desc":"OK","data":[{"active":"Y","title":"[안내] 2020년 하반기 달라지는 티스토리","url":"https://notice.tistory.com/2547"}]}

결과는 이렇게 정보를 불러옵니다.

안되는 이유?

접속 정보

Response Headers를 보면 set-cookie 헤더가 없다는것을 확인가능합니다.

Request Headers에는 cookie헤더를 통해 세션정보를 전달하는데, 서버에서 확인 못함으로 이해 가능합니다.

이것으로 SameSite 쿠키 문제임을 알수있습니다.

SameSite 쿠키 문제란?

간단하게는 다른 도메인과 쿠키를 전송하지 못하는 구글 크롬의 보안 정책입니다.

현재는 크롬에만 적용된 정책이지만 다른 브라우저도 기본값으로 적용예정에 있습니다.

쿠키를 통해 로그인된 정보를 확인하는데 이것이 불가하여 발생하는 오류입니다.

어떻게 해결하나?

보안설정을 낮추는 방법이 있지만 저는 권장하지 않으며 설명하지 않을것입니다.

티스토리측에서 문제를 확인해서 수정하는방법 밖에 없습니다.

지금 당장은 SameSite 쿠키가 큰 보안 위협이 되지는 않지만, 그럼에도 보안기능을 끄는건 좋지 않습니다.

크게 불편한건 아니므로 포럼등 www.tistory.com 주소로 접속시 정상적으로 뜨므로 포럼주소나 티스토리 메인 주소에서 몇가지 기능을 쓰시면 될 것 같습니다.

애드센스 사이트에 웹 캐시 및 기타가 무엇인가요?

hi098123 — Wed, 2 Sep 2020 00:01:37 +0900

웹 캐시(webcaches)를 설명하기전에 캐시(cache)를 먼저 설명하고 설명을 해보고자 합니다.

캐시는 좀더 빠르게 꺼낼수있는 곳에 임시 보관하는것을 의미합니다.

실생활로 예를 들자면, 내가 주로쓰는 물건을 내 손이 닿는곳에 둬서 필요할때 바로 잡아서 쓸수있는 상황을 예시로 들 수 있겠습니다.

임시로 복사해두고 쓰는 형태라고 보시면 좋을겁니다.

보통은 성능향상등 목적이 있습니다.

웹 캐시(webcaches)

웹 캐시(webcaches)란?

웹 캐시(webcaches)란 그렇다면 어떤걸까요?

구글에서 임시로 페이지를 복사해서 사용자에게 제공하는건 두가지정도가 있습니다.

바로 "저장된 페이지" 기능과 "번역된 페이지" 기능입니다.

또한, 구글이 지원하지 않는것으로 접속한 경우도 기타에 포함됩니다.

저장된 페이지

구글 저장된 페이지 기능

구글 검색에서 저장된 페이지는 접속이 안되거나, 이전 페이지를 불러오고 싶을때 사용가능합니다.

https://webcache.googleusercontent.com/search?q=cache:8wWjRbggDPIJ:https://hi098123-skin.tistory.com/+&cd=1&hl=ko&ct=clnk&gl=kr

주소를 보면 webcache.googleusercontent.com 으로 webcache 단어를 포함하고 있습니다.

번역된 페이지

이 페이지 번역하기 기능

번역으로 들어와도 애드센스에는 웹 캐시 및 기타로 분류됩니다.

https://translate.google.com/translate?hl=ko&sl=en&u=<url>

주소에는 번역전 언어와 번역할 언어, 주소등이 있습니다.

iframe에서 로드

iframe에서 로드를 시도할 경우, 기타로 분류됩니다.

iframe로드로 광고 게시는 정책위반이지만

티스토리 블로그는 외부에서 iframe으로 로드안되니 안심하세요.

보통은 여기에 해당하지 않습니다.

복사된 컨텐츠

누군가 복사해서 광고 코드를 복제해간 경우 기타로 분류되고,

애드센스에서 사이트주소가 알림되며 본인의 활동이 맞는지 질의합니다.

광고가 실제로 게시되지는 않으니 안심하세요.

이 분류가 있는 이유?

실제페이지가 아닌 페이지에서도 광고가 표시됩니다.

제가 여러번 번역페이지로 접속해봤는데 번역 페이지는 광고가 뜨지 않는것으로 추정됩니다.

당연히 iframe과 복사된 컨텐츠에서는 광고가 표시되지 않으며, 수익이 나지 않습니다.

저장된 페이지에서는 광고가 정상적으로 뜹니다.

때문에 수익이 발생할 수 있습니다.

그러나 접속자가 많지 않기에 수익이 많이 나진 않을겁니다.

티스토리 "기타 SNS" 유입? 유튜브 유입?

hi098123 — Mon, 31 Aug 2020 22:24:10 +0900

티스토리 통계 페이지에는 SNS로부터 유입된 내용도 확인이 가능합니다.

SNS 유입이라고 하면 초보자들은 대형 서비스로부터 내 글이 링크될 일이 없다고 생각하시기도 하는데요.
보통은 SNS 사용자들이 링크를 걸은 경우입니다.

티스토리 SNS 유입

기타 SNS 유입 사실은?

알고 있던건 오래전부터였는데기타 SNS 유입은 대부분 유튜브 유입입니다.

통계를 보시면 아시겠지만 어느 블로그든 유튜브 유입은 0이실 겁니다.

이 글이 작성된 이후 티스토리에서 확인을 했는지 유튜브 유입이 정상집계됩니다.

유튜브 링크 분석

https://www.youtube.com/redirect?q=<URL>
    &redir_token=<발급된 토큰>
    &event=<링크 위치>

유튜브의 링크는 표시와 달리 링크 주소에 도달하기 전에 한단계를 추가적으로 거칩니다.

주소는 표시된 내용과 다르게 링크할 수 있습니다.

https://hi098123-skin.tistory.com/ (실제는 https://hi098123-skin.tistory.com/53)

사용자가 링크 클릭
youtube.com/redirect?q=url 으로 이동
url으로 이동

왜 이런 과정을 거치나요?

링크를 모니터링하기위해 한단계를 더 거쳐서 기록하는겁니다.
보통은 이렇게 링크를 기록하거나, 원본 주소를 숨겨주기도 합니다.

원본 주소는 어떻게 숨겨지나요?

타 사이트에서 통계(유입기록)등을 보면, 유입경로로 youtube.com/redirect? 로 주소가 있다면,

실제 주소인 youtube.com/watch?v= 주소를 알 수 없습니다.

근데 왜 유입에 안잡히나요?

저도 자세히는 알 수 없습니다. 버그로 추정됩니다.

티스토리 시스템상 youtube.com/watch? 또는 youtu.be/ 를 경유해야만 유입으로 체크하는걸로 추측됩니다.

아마도 youtube.com 또는 youtu.be를 이용할 때 유입으로 체크되도록 변경되야할것 같습니다.

비슷하게 Redirect 주소를 사용하는 서비스

트위터

t.co 유입경로는 무엇인가요?

t.co는 SNS서비스중 하나인 트위터의 단축 URL서비스입니다. 일반적 단축 URL서비스와는 조금 다른게 트위터에 링크를 하게되면 주소가 t.co로 변경되는 구조입니다. 아마 이런식으로 링크를 분석하

hi098123.tistory.com

마크다운 글 쓰기 : 티스토리 편

hi098123 — Sat, 29 Aug 2020 19:45:52 +0900

티스토리 새 글쓰기에서 지원하지만, 잘 안쓰이는 기능이 있습니다.

바로 마크다운 글 작성 모드인데요.

티스토리 마크다운 기능

마크다운 버튼을 누르면 아래와 같은 메시지가 뜹니다.

마크다운 모드에서는 일부 지원되지 않는 기능이 있습니다.
전환하시겠습니까?

마크다운 모드에서 일부 지원 안함 메시지

여기에는 이유가 있습니다. 마크다운 모드에서 지원하지 않는 기능들이 있어서 그렇습니다.

마크다운은 표준이 없는 기술로 기본적인 틀이 있지만 조금씩 다릅니다.

때문에 아래 지원하지 않는 예시도 일부 사이트에서는 지원되도록 문법을 수정하기도 가능합니다.

마크다운 모드에서 지원하지 않는 대표적인 기능들은 글자 색상 변경, 같은 문단의 글자 크기 변경 등이 있습니다.

이미지 넣기등은 가능하고 제목, 리스트, 코드블럭 등 작성또한 가능합니다.

티스토리 마크다운에서는 이 글 마지막에 소개하는 [x]기능을 이용할 수 없습니다.

마크다운의 장점은 글작성에 필수로 필요한 기능만 있어서 틀이 깔끔한 글이 완성되는 점 입니다.

실제로 마크다운으로 글을 작성하면 SEO최적화에도 도움이 됩니다.

그렇다고 잘 모르는데, 힘들게 마크다운으로 작성할 필요는 없습니다.
기본적으로 사용하는 틀만 보고, 어떻게 글을 작성해야 좋은지 이해하기만 해도 됩니다.
기본모드로 글을 써도 결과는 똑같이 나옵니다.

마크다운 적용 예시

티스토리 포럼

이렇게 티스토리 포럼에도 글 작성을 할때 마크다운 글 쓰기가 가능합니다.

티스토리 포럼에서 글을 작성할때. 제목, 리스트, 이미지, 링크 등을 작성가능합니다.

github의 readme 작성시

깃허브의 README 파일 작성시 마크다운 문법이 사용됩니다.

마크다운 문법을 알아보자

제목 작성법

# 제목 1 (h1)
## 제목 2 (h2)
### 제목 3 (h3)
#### 제목 4 (h4)
##### 제목 5 (h5)
###### 제목 6 (h6)

제목 1-2 (h1)
======

제목 2-2 (h2)
------

HTML의 h1~h6 태그를 #을 이용해서 표시 가능합니다.

미리보기

목차 (List : 리스트)

HTML의 <li>,<ol>기능을 마크다운에서 사용가능합니다.

1. 순서 O
  - 순서 x
  - 순서 x
1. 순서 O
  1. 순서 O
  1. 순서 O
1. 순서 O

- 순서X 기호
  - 마이너스
  * 별
  + 플러스

미리보기

1. 2. 3. 등으로 순서를 표시할수도있고

-, *, + 로 순서 없는 목차를 표시할수도 있습니다.

자식 목차를 만들려면 작성시 Tab(탭) 버튼을 눌러 띄우면 됩니다.

링크

링크는 HTML <a>태그로 보면 됩니다.

[Google](https://google.com)

[NAVER](https://www.naver.com)

[hi098123 SKIN](https://hi098123-skin.tistory.com)

<a>태그의 target="_blank" 속성으로 새탭으로 열기는 마크다운 문법상 지원되지 않습니다.

미리보기

Google

NAVER

hi098123 SKIN

저는 링크를 걸때 새 탭으로 열기를 주로 사용하지만 markdown에서는 그러한 설정이 불가합니다.

이미지

HTML의 <img>태그처럼 쓰입니다.

![대체 텍스트](URL "타이틀")

<img src="URL" alt="대체 텍스트" title="타이틀">

이렇게 매칭된다고 보시면 됩니다.

타이틀은 hi098123-skin.tistory.com/29 설명을 보실 수 있습니다.

코드 블럭

코드블럭은 `code` 또는 ```code``` 으로 작성할 수 있습니다. ( ` 은 키보드의 숫자 1 옆에 있습니다.)

`getHtml()`

```js
const editor = new Editor(options);
```

` 하나만 사용시 인라인 코드블럭으로 작성되고 ``` 세개 사용시 특정언어를 지적하거나 자동 지정할 수 있습니다.

위의 예시는 js(자바스크립트)를 지정했습니다.

미리보기

인용구

인용구는 > 로 표현가능합니다.

> See the table below for default options
> > More API information can be found in the document

두번 쓰면 두번 적용됩니다. 띄어쓰기가 되어야 적용됩니다.

미리보기

표 작성

표 또한 작성가능합니다.

| name | type | description |
| --- | --- | --- |
| el | `HTMLElement` | container element |

| 는 \ 위치에 있습니다.

맨 처음과 마지막 | 는 지워도 됩니다.

name | type | description
--- | --- | ---
el | `HTMLElement` | container element

--- 는 th와 td 구분용으로 사용된 코드입니다.

name | type | description
:--- | :---: | ---:
el | `HTMLElement` | container element
좌측 정렬 | 가운데 정렬 | 우측 정렬

정렬 방향을 : 를 이용해 설정할 수 있습니다.

미리보기

수평(hr)

HTML의 hr태그 또한 이용가능합니다.

---
(마이너스)

***
(별표)

___
(언더바)

미리보기

체크박스

체크박스는 [ ] 또는 [x] 로 표현합니다.

[x] React
[x] Vue
[ ] Ember

체크박스 적용 예시, 문서 작성용도로 주로 쓰이기 때문에 input checked가 아닌 그냥 체크 표시만 나온다.

미리보기

이 기능은 작성일 기준 티스토리에서 지원하지 않는 기능입니다.

그냥 [ ], [x]로 표기됩니다.

tui editor으로 미리보기

tui editor은 네이버NHN 에서 제작한 오픈소스 문서편집기 입니다.

https://nhn.github.io/tui.editor/latest/examples/example01-editor-basic.html

티스토리 포럼

티스토리 포럼에도 마크다운으로 글 작성이 가능합니다.

위의 소개내용으로 포럼에 글을 써보세요.

애드센스 "글자 수" 루머

hi098123 — Fri, 28 Aug 2020 20:28:26 +0900

애드센스를 허가받는 일명 애드고시를 하며 여러 정보를 보다 보면 제일 많이 보이는 게 글자 수입니다.

글자 수가 과연 얼마나 영향을 줄 수 있을까요?

많이 보이는 루머, "글자 수 1000자"

관련 글들을 보다 보면, 글자 수 1000자를 맞춰야 된다며 글자 수를 늘리는 방법을 소개하기도 합니다.

글자 수는 큰 영향이 없고 어떤 주제를 어떻게 풀어가는지가 중요합니다.

글자 수 200자로 애드센스 승인받을 페이지를 만들 수도 있습니다.

당연히 이 정도 글자수로 키워드 랭킹 1위도 가능합니다.

Google 검색에 높은 순위를 받을 만한 글이 바로 애드센스가 좋아하는 글이 됩니다.

Google 검색에 대해서는 이전에 풀어쓴 글이 있으니 글을 다 읽고 확인해보세요.

블로그 검색 알아보기 - 구글 편

구글은 검색이 주 서비스 제품이라 검색에 대한 가이드라인 및 원칙이 방대하며 구체적입니다. 이런 원칙들 덕분에 알고리즘이 대체로 거의 변화없이 좋은 품질의 검색결과를 낼 수 있으며 변�

hi098123.tistory.com

Google 알고리즘은 꽤 정확합니다.

Google은 검색에 20년 이상의 노하우가 있고, 지속적으로 발전해왔습니다.

Google에서 검색하는 일명 "구글링"을 하면 못 찾을 정보가 없듯이 (원하는 정보를 몇 단어 작성만으로 찾아줍니다.)

이게 얼마나 대단한것인지 감이 안 잡힐 수도 있습니다.

인터넷에 웹문서는 셀 수 없이 많은데,
거의 다 구글에 등록되어있고 이중에 사용자가 필요로 하는 정보를 1초 이내에 찾아서 보여줍니다.

왜 Google 검색 이야기를 했냐면,

사용자가 필요로 하는 정보를 찾는 능력 = 불필요한 문서를 걸러내는 능력이기 때문입니다.

이렇게 Google은 검색 알고리즘을 20년 이상 보완해왔으며, 사용자가 필요로 하는 문서를 분석하는 능력이 있습니다.

때문에, 불필요한 단어를 넣는 건 의미가 없습니다.

문서 앞 뒤로 여는 말, 맺음말은 검색에 영향을 안 줄 가능성이 큽니다.

마찬가지로 단순히 문장을 늘린다고 같은 문장을 길게 쓰는 것도 영향을 주기 어렵습니다.

그냥 글자 수만 늘리는 행동은 스팸글으로 판단될 가능성만 키울 수 있습니다.

(물론 단순히 글자 수만 늘린다고 스팸글로 분류되지는 않습니다.)

실제로 도움이 되는 요소

검색어에 키워드가 포함되어 있으면!

당연히 글에 검색어가 포함되어있다면 점수가 높을 수밖에 없습니다.

많은 키워드를 포함하게 만들면 가산점이 있습니다.

그런데, 알고리즘상 순위를 의도적으로 올리고자 키워드 반복을 한다고 판단되면 스팸글로 처리될 수도 있습니다.

주제가 명확한 블로그라면!

특정 주제로 꾸준히 글을 써왔다면, 해당 주제를 처음 쓴 블로그보다. 당연히 우선순위가 높습니다.

사용자가 좋아하는 글이라면!

현재 필요한가? (낡아서 버려야 되는 문서를 제외)
2020년에 "윈도우" 검색어가 "윈도우 95" 같은 정보를 찾지는 않을 것입니다.

"mp3" 검색어에서 "mp3 플레이어"를 찾지는 않을 것 (플레이어 앱이나 파일은 찾을 수 있다.)
페이지의 우수한 사용자 환경
광고가 너무 많거나, 일부 환경(IE, 구형 모바일 기기 등)에서 접속을 못하면 순위가 낮게 잡힐 수 있습니다.
페이지가 도움이 되었는가?
방문시간과 정보를 얻지 못해 유사 검색어를 계속 찾는가 등의 지표가 활용될 수 있습니다.

모바일 기기에서 보기 편한가?

요즘은 구글 검색의 대부분이 모바일에서 이뤄집니다.

트렌드에 맞게 모바일에 편의성을 고려합니다.

모바일에서 보기 편해야 검색순위에 도움이 됩니다.

CSS Selector로 외부링크 선택하기

hi098123 — Fri, 28 Aug 2020 12:08:05 +0900

CSS를 보통은 초보자가 배우고 쓰기 때문에 CSS Selector OOO 선택하기 시리즈로 글을 써볼까합니다.

이 글은 링크(<a>)중 외부링크만 선택하는 방법입니다. 선택에 앞서 기초내용부터 한번에 다룹니다.

때문에 잘 몰랏어도 한번 정독하면 사용할 수 있을것입니다.

CSS의 외부링크 선택법

사실 저는 초보자를 위한 글을 잘 쓰지 못합니다.

그냥 방법을 순차적으로 쓸것인데요. 공부에는 도움이 되지는 않아도 실제 쓸때는 도움은 될겁니다(?)

먼저, 태그 선택법

a{text-decoration: none;}

Selector 자리에 태그명을 입력한다면 입력한 태그가 선택된다.

위의 코드는 a태그를 선택하여 스타일로는 글자 꾸미기 = none 를 줬다.

둘째, Attribute 선택방법 (속성 선택자)

a[href="https://hi098123-skin.tistory.com/"]{color:red}

이번엔 특정한 Attribute를 선택해봤다.

이렇게 설정한다면 https://hi098123-skin.tistory.com/ 의 색상은 빨간색이된다.

아래에서 속성선택자에 대해 자세히 설명해봅니다.

[attribute]

특정 attirbute를 가지는 경우를 선택한다.

p[class]{color:red}

<p>선택 안됨</p>

<p class="hi098123">선택 됨</p>
<p class="hi098123-skin">선택 됨</p>

[attribute=value]

특정 attribute가 value와 정확히 일치하는 경우

a[href="https://hi098123-skin.tistory.com/"] {color: green;}

<a href="https://hi098123-skin.tistory.com/">선택되어 초록색이 됨</a>

[attribute~=value]

특정 attribute안에 value를 정확히 포함 하는 경우

다른데에서 정확히 포함이라는 단어를 쓰는지는 모르겠는데 이렇게 표현해봤다. 아래 예시를 보면 무슨의미인지 알수 있을것입니다.

p[class~="hi098123"]{color:lime}

<p>선택 안됨</p>

<p class="hi098123">선택 됨</p>
<p class="aa hi098123">선택 됨</p>

[attribute|=value]

조금 설명하기 복잡하다. attribute가 정확히 value이거나 value로 시작하면서 -(하이픈)으로 연결되어있어도 된다.

p[class|="hi098123"]{color:#424242}

<p class="hi098123">선택됨</p>
<p class="hi098123-skin">선택됨</p>
<p class="hi098123-aa">선택됨</p>

<p class="hi098123 skin">선택 안됨</p>

[attribute^=value]

attribute가 value로 시작하는 경우 선택한다.

p[class^="hi098123"] { color: red; }

<p class="hi098123">선택됨</p>
<p class="hi098123-skin">선택됨</p>
<p class="hi098123-aa">선택됨</p>
<p class="hi098123 skin">선택됨</p>

<p class="skin hi098123">선택 안됨</p>

[attribute$=value]

$는 정규식에서 끝부분을 의미하는데 CSS에서도 비슷한 의미를 가진다.

attribute가 value로 끝나는 경우 선택한다.

p[class$="hi098123"] { color: red; }

<p class="hi098123">선택됨</p>

<p class="hi098123-skin">선택 안됨</p>
<p class="hi098123-aa">선택 안됨</p>
<p class="hi098123 skin">선택 안됨</p>

<p class="skin hi098123">선택됨</p>
<p class="skin-hi098123">선택됨</p>

[attribute*=value]

value를 포함하는 경우 선택합니다.

p[class*="hi098123"] { color: red; }

<p class="hi098123">선택됨</p>
<p class="hi098123-skin">선택됨</p>
<p class="hi098123-aa">선택됨</p>
<p class="hi098123 skin">선택됨</p>
<p class="skin hi098123">선택됨</p>
<p class="skin-hi098123">선택됨</p>

<p class="skin">선택 안됨</p>

셋째, :not() 이용방법

a:not([href="https://hi098123-skin.tistory.com/"]) { color: blue; }

이번엔 반대로 https://hi098123-skin.tistory.com/ 주소가 아닌경우 파란색으로 설정한다.

https://hi098123.tistory.com/ 이렇게 표시된다.

이걸 모두 사용하면?

a{
	/* 전체 링크를 선택하여 스타일을 넣는다. */
}
a[href*="//hi098123-skin.tistory.com/"],a[href^="/"],a[href^="./"],a[href^="#"] {
	/* 내부 링크를 선택하여 스타일을 넣는다. */
}

이런식으로 CSS에서 선택자를 활용할 수 있습니다.

CSS 선택자로 외부링크만 선택이 불가하기 때문에 모든 링크를 외부로 보고

a 태그중(링크중에) 주소에 특정 주소를 포함하지 않는 경우를 선택하는 방법입니다.

/, # 으로 시작하는 주소는 내부링크임.
*= 으로 자신의 주소 링크를 넣어야 완전히 작동한다.

Attribute 여러개를 합쳐서 not 할수있는 방법이 없어서 이렇게 선택하면 됩니다.

일부러 https: 부분(스키마라고 불립니다.)은 제거합니다. 혹시나 http나 https등 다를수도 있기 때문이고요.

외부 링크를 external link라고도 부르는데 아래의 아이콘은 많이 본 적 있을겁니다.

external icon

외부링크임을 표시할 때 이런 아이콘은 CSS 셀렉터를 이용해 넣어줄 수 있습니다.

a:after { background:url("/icon/external-link.png") no-repeat;}

a[href*="//hi098123-skin.tistory.com/"]:after,
a[href^="/"]:after,a[href^="./"]:after,a[href^="#"]:after {
	background:none;
}

이렇게 아이콘 이미지를 넣는 방법도 있지만, 폰트기반의 아이콘을 넣는 방법도 있습니다.

애드센스, 효율적으로 돈 벌기

hi098123 — Tue, 25 Aug 2020 19:20:50 +0900

애드센스를 수익 목적으로 하는 사람들이 있는데 제 의견으로 블로그는 돈이 안됩니다.

꾸준히 페이지 뷰가 1만 이상은 나와야 돈이 좀 되는데 블로그중 이 정도의 컨텐츠를 갖고있는 경우는 적기 때문입니다.

부가가치를 재생산 할 수 있는 컨텐츠가 아니라면 작성자가 만든 만큼 영향을 끼치는데 애드센스가 큰 돈을 주지는 않습니다.

동일 시간이라면 알르바이트가 돈이 더 되지요.

그렇다면, 애드센스로 돈을 벌고자 하면 어떤걸 해야될까요?

제 의견은 아래와 같으나 광고 시장은 매우 넓기 때문에 다른 생각과 다른방법으로 잘 벌고 계신분들도 있을겁니다.

반대되는 의견이 있으시다면 댓글로 작성해주셔도 됩니다.

글에서 다루지 않았는데, 궁금하신점이 있으셔도 댓글남겨주셔도 됩니다.

구글 애드센스

장기적 수익화

장기적 수익을 노린다면 좋습니다. 컨텐츠는 한번 생성하게 되면 서버에서 저장된 이상 무한으로 복사되어 보여질 수 있습니다.

이러한 장점을 활용한다면, 동일시간에 알바로 버는 돈 보다 가성비가 좋아집니다.

한번 안정화 시킨다면, 더 이상 글을 안써도 꾸준히 돈이 들어오니까요.

이와 반대되는 단기적 수익화로는 실시간 인기 검색어, 매일 글쓰기(다음 최적화) 등이 있습니다.

블로그를 일로 하시는 분들은 단기 수익화와 장기 수익을 병행하는데 주로 단기수익에서 많이 벌며 계속 일해야되고 저품질로 날려먹기 쉽습니다.

네이버, 구글 검색 상단을 노린다면 장기 수익화가 가능한데

네이버가 우리나라에서 광고효과(트래픽, 클릭률)가 매우 좋은데 티스토리블로그를 상단에 잘 안띄워주므로 구글도 같이 노려보는게 좋습니다.

장기적 트래픽 측면에서는 구글 > 네이버 > 다음 순으로 좋으며, 수익 측면에서는 네이버가 제일 좋습니다.

Daum 검색을 버려야하는 이유

장기적 측면에서 Daum 검색은 알고리즘이 안 좋고 사용자도 적어서 버려야 됩니다.

Daum 검색에 의존시 블로그 글을 매일써야 유입이 생기는 현상이 발생할 수 밖에 없습니다.

바로, 최신 글 우선 노출 정책 때문인데요.

카카오가 새로 검색엔진을 만들지 않는 이상 Daum 검색은 포기하시는게 좋습니다.

(잘 되면 잘되는거고~ 라는 마음가짐?)

장기적 측면에서 최상은 구글입니다. 네이버는 1년만 상단에 있어도 좋다고 생각됩니다.

구글에서는 순위가 떨어지기 어렵습니다.

유저가 생산해주는 컨텐츠

만약 티스토리에서 광고를 필수로 넣는다면 단순히 생각해보면 티스토리는 큰 돈을 벌 수 있을겁니다.

(물론 유저 반감으로 떠나는등 복잡한 계산을 해봐야 알겠지만 여기서 설명하고 싶은건 이런건 아닙니다.)

나무위키, 피쿠(이상형 월드컵) 등은 유저들이 컨텐츠를 생산합니다.

유저들이 생산한 컨텐츠로 애드센스 수입이 생긴다면 매우 가성비가 좋을겁니다.

커뮤니티 사이트도 비슷할수 있는데 여기는 애드센스 정책에 맞지 않는 게시글을 조심해야 됩니다.

초기 승인 받기도 어렵고요. 가치있는 컨텐츠를 미리 넣어야 승인이 되지만 커뮤니티는 일반적으로 애드센스가 평가하기에 가치있는 컨텐츠가 아닐 가능성이 높습니다.

물론, 단점도 있습니다. 꾸준히 모니터링을 해줘야됩니다.

애드센스 정책에 맞지 않는 페이지에서는 광고가 뜨지 않거나 제재를 받을 수 있습니다.

그래도 컨텐츠를 만드는것보다는 삭제, 수정하는게 더 쉽습니다.

엄격한 키워드를 조심

구글은 일부 키워드에 엄격합니다. 방문자의 돈을 쓰게 만드는 등 방문자에게 피해가 될 수 있는 키워드를 엄격히 다룹니다.

때문에 몇몇 글에서만 광고가 안뜨는 블로그들도 있을겁니다.

돈을 쓰게 만드는 키워드

보험, 대출, 투자 등 방문자가 돈을 쓰게 만드는 키워드에 엄격합니다.

블로그의 신뢰도등이 종합적으로 고려되는데,

기준 미달이라면 검색순위에 표시되지 않거나 페이지내에 광고가 표시되지 않을수 있습니다.

광고주가 원하는 주제의 글

제가 운영중인 사이트중 남들에 비해 방문자수 대비 10배 이상 수익이 나는 사이트가 있습니다.

(이 사이트에 광고는 상단 광고 1개와 자동광고뿐입니다.)

광고주 맞춤 주제는 도움이 될 수 밖에 없습니다.

예를들어 여행블로그라고 할때, 비슷한 글이어도 여행가고 싶다는 느낌이 더 들게 글을 쓴다면, 여행사 광고에 도움이 될 것 입니다.

검색엔진 순위

상단에 위치할수록 CPC가 오르기 때문에 검색엔진이 판단하기에 좋은(가치있는)글을 작성하는게 중요합니다.

검색엔진 순위가 높아질수록 수익은 급격히(CPC * VIEW) 오르게 됩니다.

티스토리 2차 도메인 연결하는 법

hi098123 — Mon, 24 Aug 2020 10:03:21 +0900

티스토리에는 2차 도메인 설정이 가능합니다.

설정중 연결이 안 되거나, SSL 발급이 안 되는 등 오류가 발생할 수 있습니다.

오류가 왜 발생했는지, 어떻게 해결되는지도 다룹니다.

티스토리 2차 도메인 연결

어떻게 할수있나요?

만약, 이렇게 뜬다면?

도메인의 설정 정보를 확인할 수 없습니다. DNS 서비스의 설정 정보를 다시 확인해주세요.

DNS 설정은 이렇게 이해하시면 쉽습니다.

DNS(Domain Name Service : 전화번호부와 유사)는 도메인을 ip와 매칭 시켜줍니다.

google.com은 2020-08-24 기준 따라 다음의 ip를 가집니다.
172.217.12.174 (미국)
172.217.175.110 (한국에서 접속하는 일본 서버 중 하나)

이외에도 많습니다.

DNS를 등록해서 도메인과 서비스가 연결되었더라도 전 세계가 있는 DNS 서버끼리 통신을 통해 모든 서비스가 접속 가능하려면 30초~1일 정도의 시간이 필요합니다.

클라우드플레어에서 최초 등록 시 DNS에 몇 초 이내에 배포 완료합니다.
다른서비스는 보통 2시간 정도가 소요됩니다.

이 글에서는 쉽고 빠르게 등록하기위해 클라우드 플레어 DNS를 사용할것입니다.

클라우드 플레어 DNS 사용하는 방법

클라우드 플레어에 로그인합니다.
사이트 추가 버튼을 클릭합니다.
등록한 주소를 입력하고
이후 나오는 네임서버를 "도메인 구입업체" 관리 페이지의 네임서버 수정에서 고칩니다.

네임서버 주소를 .ns.cloudflare.com 2개 주는데 등록업체의 관리 페이지에서 입력후 저장하시면 됩니다.
입력을 완료했다면, 다시 돌아와서 확인 이후 등록됩니다.
이제 등록이 되었다면 관리자 페이지로 들어가서 DNS 설정에 들어가실 수 있습니다.
형식에서 CNAME을 클릭합니다.
이름에 @을 입력 시 설정됩니다. (www나 blog 등을 입력해서 blog.example.com과 같은 주소를 사용하고 싶다면 blog를 입력하시거나 원하는 문자를 입력하시면 됩니다.)
hi098123-test.ga

제가 권장드리는 설정은 CNAME으로 이름에는 원하는 걸 적고(@, blog, www 등) blog.tistory.com을 대상에 적는 방법입니다.

blog.hi098123-test.ga
저장을 누르면 일반적으로 30초 이내 전 세계 저장되어 티스토리에서 도메인 등록을 할 수 있습니다.
연결 완료
보안 접속 인증서는 티스토리에서 발급하며, 보통 1일 이내 발급됩니다.

DNS가 잘 등록되었는지 확인하는 방법

https://dnschecker.org/ 에 들어가셔서 A레코드로 등록하셨다면 A레코드 검색을, 본문처럼 CNAME으로 등록하셨다면 CNAME으로 검색을 하시면 됩니다.

DNS Checker - DNS Check Propagation Tool

Check DNS Propagation worldwide. DNS Checker provides name server propagation check instantly. Changed nameservers so do a DNS lookup and check if DNS and nameservers have propagated.

dnschecker.org

왼쪽 사진은 다른 DNS로 연결한 직후, 오른쪽 사진은 클라우드플레어 DNS 등록 직후입니다.

오른쪽에서 정상적으로 연결된것을 확인할 수 있습니다. (왼쪽은 대략1시간 후 완료되었습니다.)

오른쪽 상태가 되어야 티스토리에 등록할 수 있습니다.

주의할 점

티스토리 도메인이 마음에 안든다고 무료도메인은 사용하지 마세요.

무료도메인은 언제든 종료될 수 있으며, 블로그 도메인이 바뀌는것은 검색엔진에 매우 큰 영향을 줍니다.

백링크 사이트 이용하면 안되는 이유

hi098123 — Sat, 22 Aug 2020 18:34:07 +0900

블로그나 사이트를 운영 중이라면 백링크에 대해 들어 본 적 있을 것입니다.

백링크는 신뢰할만한 사이트에서 링크되어 같이 신뢰할만한 사이트임을 파악하는 지표입니다.

중요한 건 신뢰할만한 사이트에 링크가 되어야 합니다.

예를 들어 IT기술 블로그(A)라면 유명 IT기업 블로그(B)에서 특정 기술을 서술하면서 IT기술 블로그(A)를 링크했다면,
IT기술 블로그(A)의 신뢰도는 높다고 판단 가능할 것입니다.

그런데 특정 블로그를 새로 만들어서 의미 없이 링크만 했다면 그다지 영향이 없어야 맞습니다.

네. 검색엔진은 의미 없는 링크에 점수를 주지 않습니다.

구글의 검색이 문서를 자세하게 공개하고 있으므로 구글을 기준으로 설명합니다.

구글의 기본 원칙

구글의 기본 원칙 中

구글이 기본 원칙을 살펴보게 되면, 속임수를 쓰지 말라고 작성되어있습니다.

아래의 질문을 스스로 해보세요

사용자들에게 도움이 될까?
검색 엔진이 없어도 이 행동을 하게 될까?

위 내용을 보면 백링크 사이트를 의미함을 알 수 있습니다.

이러한 행위는 어뷰징 행위로 검색 순위조작을 하려는 시도는 검색엔진이 엄격히 차단하고자 하는 행동입니다.

Google에서는 이러한 가이드라인을 하나 이상 위반하는 사이트에 직접 조치를 취할 수 있습니다.
문제가 되는 부분을 해결하고 나면 사이트 재검토 요청을 제출할 수 있습니다.

직접 조치는 스팸 문서로 분류하여 노출을 제한하는 등의 직접적 차단 조치를 의미합니다.

결론

백링크 사이트는 영향이 0 이거나 음수(-)가 될 수밖에 없습니다.

제 생각에 대부분의 검색엔진은 영향이 적은 숫자 음수 값으로 추정됩니다.

신뢰할 수 있는 사이트로부터 연결된 링크는 가치 있습니다.

플러스(+) 요소가 없기 때문에 이용 안 하는 게 좋습니다.

백링크 사이트는 검색엔진에서 블랙리스트 요소입니다.

이런 걸로 순위를 오를 수 있다면 프로그래밍이 가능한 모든 사람은 사이트를 무한으로 만들어서 백링크를 연결할 수 있을 것입니다.

하지만 백링크가 무한이어도 영향이 0에 가깝거나 음수기 때문에 헛고생하는 게 됩니다.

참조

티스토리 크롬 지도 첨부가 안되는 이유?

hi098123 — Fri, 21 Aug 2020 19:23:25 +0900

티스토리에서 크롬브라우저로 지도첨부가 안되는 오류가 있습니다.

티스토리 지도 첨부하기

첨부 버튼을 누르면 글 작성 페이지에 첨부가 되어야하는데 안되는 오류인데요.

일단 왜 안되는지 분석을 해보고 해결방법을 알아보고자 합니다.

일반 유저는 지도 첨부하는 법을 봐주세요

지도 첨부 과정

GET https://attach.map.daum.net/

POST https://<ID>.tistory.com/manage/posts/attachMap

window 객체를 통해 전달?

다음지도 첨부 페이지에서 티스토리 주소로 어떤 정보를 첨부하면되는지 전송한다.

그런데 첨부가 안되는 이유는 <ID>.tistory.com으로 전달시 크로스 도메인이라 tistory.com의 쿠키를 사용하지 않는다.

쉽게말하자면

일반 크롬에 로그인했지만 만약, 시크릿모드로 접속시 로그아웃이 되어진 상태입니다.

이렇게 로그아웃 된 상태로 첨부해야될 정보를 보낸다? 라고 이해하면 될 것 같습니다.

이렇게 로그인 이슈 때문에 문제가 발생하며, 아래와 같이 로그인을 시도하고 /manage/posts/attachMap로 아무정보를 전달하지 않고 접속시도하기 때문에 첨부가 안되고 글 관리 페이지로 접속됩니다.

GET https://attach.map.daum.net/

POST https://<ID>.tistory.com/manage/posts/attachMap

GET https://www.tistory.com/auth/login/?redirectUrl=https%3A%2F%2F<ID>.tistory.com%2Fmanage%2Fposts%2FattachMap

GET https://<ID>.tistory.com/manage/posts/attachMap

지도 첨부하는 법

https://map.kakao.com/에서 원하는 위치를 정하고 내보내기를 누른다.
세가지 방법으로 지도 공유를 할 수 있다.
- 이미지 저장하기 방법
  카카오맵 이미지 저장하기
  
  이미지를 저장한 후 기존 이미지 첨부방법대로 첨부하여 글을 작성한다.
- HTML 태그 복사 방법
  카카오맵 HTML태그 복사하기
  
  HTML태그를 복사하여 글작성의 HTML편집을 이용해 코드를 넣는다.
  
  원하는 위치에 HTML으로 넣어주시면 됩니다.
- 다른 브라우저 사용방법
  파이어폭스 최신버전에서도 지도 첨부는 잘 동작하는 것으로 확인되나, 크롬에서만 문제가 있는것으로 확인됩니다.
  
  크롬이 편하다면 불편하겠지만 다른브라우저로 지도를 첨부하고 -> 비공개 저장 후 크롬에서 편집하시면 될 것 같습니다.

티스토리에 해결 방법 제안

tistory.com 도메인에서 지도 첨부서비스를 운영하는 방법
iframe간 통신을 이용하는 방법 (댓글, 구독도 같은 방법으로 해결가능)

제일 좋은 방법은 <ID>.tistory.com에 /comment/<entry-num> 경로(Path)를 이용해 댓글 HTML을 2차 도메인에도 그대로 연동하고, 구독정보도 비슷하게 전달하는 방법으로 보입니다.

<ID>.tistory.com에 /manage/posts/attachMap을 attach.map.daum.net에서 Iframe으로 로드해서 데이터를 전달하는 방법을 추천드립니다.

세션 정보등을 보내는게 아닌, 처리할 데이터만 iframe에서 전달받아 처리하면 Client에서 데이터 처리시 보안에 문제가 없습니다.

하지 말아야 할 행동

chrome://flags/#same-site-by-default-cookies에서 samesite 쿠키 보안설정을 제거하는 방법

제발 이런 기본 보안설정을 불편을 이유로 해제하지 말아주세요.

구글의 보안 전문가들이 사용자의 보안을 지켜주기위해 고심끝에 적용한 기능으로 일시적으로 보안이 서비스에서 불편을 겪겠지만 서비스에서 어렵지 않게 보안을 강화하여 사용할 수 있는 대안책이 있습니다.

보안전문가들이 설계한 내용을 마음대로 바꾸지 말아주세요!!