야하오 월드

티스토리 블로그 키우기 어떻게 해야할까? [구글 애드센스 수익화]

코딩일레븐 — Wed, 6 Aug 2025 17:09:22 +0900

네이버 블로그를 10년 넘게 운영중이다.

9천 명 이상의 구독자가 생겼고 그동안 무려 2.4천 건의 게시물을 올렸다.

몇 년전 일이지만 네이버 메인에도 여러번 올라갔었는데,

그때 노출수가 늘면서 구독자와 수익이 뻥 튀었었다.

돈 안 되기로 유명한 네이버 애드포스트 수익이 메인에 노출된 후 며칠 동안 120만원!

(물론 그때뿐이다...)

야하오의 말랑한 기록 : 네이버 블로그

야해서 야하오 아님

blog.naver.com

네이버 블로그 구경은 위 링크로.

체계적으로 한 것은 아니지만 그래도 해봐서

네이버 블로그는 어떻게 키우는지 알 것 같은데,

티스토리는 도통 잘 모르겠다.

어떤 글을 올려야 할까!?

네이버 블로그는 다른 블로그 돌아다니며 댓글 달고,

서로 이웃 신청하고 오면 답방도 가며 키워 나가는데

티스토리도 그런가? 흠냐

올 초 최초로 네이버 블로그 애드 포스트, 쿠팡 파트너스 수익을 공개하는 포스팅을 했었다.

주변에 궁금해하시는 분들도 있고, 블로그 처음 하시는 분들에게 동기부여도 할 겸.

애드포스트 vs 쿠팡 파트너스 수익 공개

돈을 벌겠다고 시작한 네이버 블로그는 아니지만 블로그를 하다 보면 광고비 등 부수입이 생기게 된다. 내...

blog.naver.com

많지도 적지도 않은 수준의 수익이 매일 나고는 있다.

귀엽지만 없는 것보다는 나은 수준. 허허

그런데 갑자기 구글 애드센스 수익을 내보고 싶어졌다.

아니 사실 예전부터...

티스토리 뿐 아니라 사이드 프로젝트로도

달러를 벌어보고 싶다 ㅋㅋ

그래서 오늘부터 티스토리도 열심히 해보고

사이드 프로젝트로 열심히 해보려고 한다.

티스토리 블로그 어떻게 키우는 지 알려주실분 ㅜㅜ

인프런에서 날아온 선물

코딩일레븐 — Wed, 22 May 2024 13:49:07 +0900

인프런에서 거의 매년 스승의 날 선물을

보내주는 것 같다.

다른 지식공유자에 비하면 별로 한 것도 없는데

감사하네 ㅜㅜ

인프런과 인프러너의 성장은

모두 지식공유자 덕분입니다.

라니...

저도 항상 인프런 응원합니다!

인프런 덕분에 강의도 해보고.

먼저 제안 주셔서 이게 될까?

내가 할 수 있을까?

고통스럽게 첫 강의를 내놨던 기억이 난다.

너무 품질이 떨어져서 나중에 리뉴얼을 했었다.

강의를 통으로 새로 만들었음.

몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편] | 코딩일레븐 - 인프런

코딩일레븐 | 짧은 시간에 실무에서 가장 많이 사용하는 인터랙티브 스킬을 알려드립니다., 몇 줄의 코딩으로 인터랙티브 사이트를 개발해보자! [사진] [사진] 웹 인터랙티브 페이지 개발의 핵

www.inflearn.com

아예 새로 만들었던 첫 강의

명함 꽂이? 스탠드?

담당자분들은

이런 굿즈를 매년 만드느라 고민 꽤 하시겠다.

귀엽다.

책상 위에 올려놔야지~

복근 부셔~!

인터랙티브 개발 실무 끝장내기 [역량 강화편] | 코딩일레븐 - 인프런

코딩일레븐 | 실무에서 사용하는 인터랙티브 JS, CSS 노하우를 아낌없이 공개합니다., 웹 인터랙션, 더 쉽고 + 더 창의적으로! 내 손으로 만드는 트렌디한 UX. [사진] 단순 서비스 구현을 넘어 트

www.inflearn.com

Three.js 3D 인터랙티브 바로 시작하기 | 코딩일레븐 - 인프런

코딩일레븐 | 실무에서 Three.js를 바로 사용할 수 있도록 커리큘럼을 구성했습니다!, 2D를 넘어 3D를 다루면 개발이 더 재밌어집니다!Three.js로 입체적인 컨텐츠 개발 함께해요. 활용도 높은 Three

www.inflearn.com

과연 네 번째 강의를 만들 수 있을까?

마음은 있는데, 몸이 안 움직이네 ㅜㅜ

필름 사진 같은 후지필름 xt2 스냅

코딩일레븐 — Mon, 29 Apr 2024 15:06:10 +0900

별생각 없이 찍어도 이렇게 예쁘게 나와주네.

앉아서 개발만 하지 말고 자리에서 일어나자!

후지 xt2 정말 괜찮다.

나도 나왔네.

브라우저, 윈도우 창 크기 구하기 [innerHeight outerHeight 차이 window.resize() 사용방법]

코딩일레븐 — Mon, 29 Apr 2024 14:48:10 +0900

프론트 개발을 하다 보면 윈도우 크기를 구해야 할 상황이 많이 생긴다.

css로 100vh 나 100% 를 사용해서 해결할 때도 있지만

width는 되는데 (100vw) height는 안 되는 경우도 있다.

window.innerHeight와 outerHeight도 헷갈릴 경우가 있어서

기록을 해둔다.

window.outerHeight, window.outerWidth

- 탭, 주소창 포함한 브라우저 전체 크기

window.innerHeight , window.innerWidth

- 탭, 주소창 제외한 딱 보이는 영역의 크기

- 이걸 더 많이 사용!

출처 :  https://developer.mozilla.org/en-US/docs/Web/API/Window/innerHeight

outerHeight 보다는 innerHeight가 구하고 싶은

window 화면 크기에 더 가깝다.

const updateSize = () => {
  console.log(window.innerHeight, window.outerHeight)
  //높이 비교
}

updateSize();
window.addEventListener("resize", updateSize);

//window.resize()를 사용하여 테스트해보자.

innerHeight, innerWidth 사용은 주로 window.resize() 와 함께 사용하게 된다.

예를 들어 아래와 같이 브라우저 width크기에 맞춰 그래프를

다시 그려줘야하는 상황. 반응형 작업시 특히 사용 많이 함.

window.resize 가 발생할 경우 d3를 다시 그려주는 함수를 넣어야한다.

이 페이지 에서 확인 가능.

chatGPT 에게 물어봐도 이렇게 답해준다. ㅎㅎ

[javascript] 백분율 구하기, 프로그레스 바 구현 방법

코딩일레븐 — Thu, 25 Apr 2024 15:52:19 +0900

생각보다 자주 사용하게 되는

자바스크립트로 백분율 구하기.

예를 들어 선거결과를 나타낼 때도 사용한다.

개표율, 득표율 등 퍼센트 많이 사용한다.

javascript 백분율 구하는 방법

const calculatePercentage = (part, whole) => {
    return (part / whole) * 100;
};

console.log(calculatePercentage(10, 100) + "%"); //10%
console.log(calculatePercentage(50, 100) + "%"); //50%
console.log(calculatePercentage(1536, (66583+60473+1536)) + "%"); //1.194475550578574%

기호 3번 무소속 김정현 후보의 득표율은 1.194475550578574% 다.

아주 길고 지저분... 정확하지만 가독성이 떨어진다.

후보 세 명의 득표를 전부 더해서 계산한 것. (66583+60473+1536)

백분율 소수점 자르기

const calculatePercentage = (part, whole) => {
    return Math.ceil((part / whole) * 100); //정수로 리턴
};
console.log(calculatePercentage(1536, (66583+60473+1536)) + "%"); //2%


const calculatePercentage = (part, whole) => {
    return ((part / whole) * 100).toFixed(2); //소수점 두자리까지 리턴
};
console.log(calculatePercentage(1536, (66583+60473+1536)) + "%"); //1.19%

Math.ceil() (소수점 올림) -> 2% 반환

toFixed(2) (소수점 두 자리) -> 1.19%로 반환

//util.js
export const calculatePercentage = (part, whole) => {
    const percentage = ((part / whole) * 100).toFixed(1);
    return percentage;
};


import { calculatePercentage } from "../util/util";
//이런식으로 로드해서 사용중

워낙 자주 사용하다보니 이렇게 util.js로 만들어놓고

땡겨서 사용하고 있다.

퍼센트 무지하게 많이 사용한 페이지.

우리 국회 언제 바꿀래? 청년 • 여성, 2024 총선 챌린지 선거 결과

22대 국회의원선거 결과를 전해드립니다.

pages.newstapa.org

프로그레스 바 구현 방법

그 외에도 프로그레스 바를 구현한다던가 scrollTop 값을 이용해서

페럴렉스 스크롤 인터랙티브를 만들 수도 있다.

See the Pen 프로그레스 바, 백분율 by KIHWAN CHUN (@yahao2512) on CodePen.

스크롤 값에 따른 프로그레스 바 구현을 해봤는데,

특별히 어려운 것은 없는데, 헷갈릴만한 부분은

const progressBar = document.querySelector(".progressBar");
const numText = progressBar.querySelector("p");

window.addEventListener("scroll", function (e) {
	const scrollTop = document.documentElement.scrollTop;
	const documentHeight = document.body.offsetHeight - window.innerHeight;
    	//문서 전체 길이에서 window 화면 높이만큼을 빼줬다.
    
	const per = Math.ceil((scrollTop / documentHeight) * 100); //정수로 100분율 구하기
    
	progressBar.style.width = `${per}%`; //바 퍼센트 넣어주기
	numText.innerText = `${per}%`; //텍스트 넣기
});

전체 화면 길이 (문서 길이) - 브라우저 창 크기(높이)

이 부분일텐데, - window.innerHeight 를 빼고

테스트해보면 차이가 느껴질 것이다.

(퍼센트가 100까지 안 나옴)

몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편] | 코딩일레븐 - 인프런

www.inflearn.com

스크롤 이벤트를 이용한 인터랙티브 강의 추천

[javascript] 스크롤 원하는 위치로 부드럽게 이동 offsetTop scrollTo() behavior사용방법, scrollTop 이동

코딩일레븐 — Thu, 25 Apr 2024 11:24:16 +0900

검찰의 금고를 열다

프론트 개발을 하다 보면 위와 같이 스크롤 이동을 해야 할 일이 있다.

첨부한 페이지 말고도 종종 사용을 하는데

"어떻게 했더라?" 하면서 예전 소스를 열어보는 나를 위해

그냥 정리좀 해둔다 ㅋㅋ

gif 실제 페이지 링크

방법은 여러가지인데, 순수 javascript를 이용한 방법만 남겨둔다.

스크롤(scroll) 맨 위로 이동 시키기

window.scrollTo(0,0);
//scrollTo(x좌표, y좌표)

맨 위로 버튼을 누르면 띡 이동을 시켜버리는 방법

스크롤 부드럽게 이동하는 방법

window.scrollTo({
	top: 0,
	left: 0,
	behavior: "smooth" //스크롤 효과 속성
});

behavior 옵션

- auto: 띡 이동

- smooth : 부드럽게 이동

출처 - https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior

원하는 페이지 위치로 이동하는 방법

const offsetTop = Document.querySelector("이동을 원하는 녀석").offsetTop;
//offsetTop(y 좌표) 구해서 넣어주면 부드럽게 페이지가 이동한다. 

window.scrollTo({
    top: offsetTop,
    left: 0,
    behavior: "smooth"
});

offsetTop 을 이용해서 y 값을 구해와서 사용하면 된다.

See the Pen updown by KIHWAN CHUN (@yahao2512) on CodePen.

샘플을 만들어봤다. 참고해서 사용하시길.

gsap을 이용하면 더 쫀득하게 움직임을 줄 수 있고

실무에서도 가끔 사용을 하기는 했지만,

바쁜 세상이니 간단하게 사용하는 방법을 더 추천하고 싶다.

출처 - https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo

[javascript] 정확한 1초 구하기. 정확한 타이머 만들기, requestAnimationFrame 사용 방법

코딩일레븐 — Wed, 24 Apr 2024 16:23:16 +0900

1초마다 함수를 실행을 시켜야 한다면

setInterval() 사용해도 큰 무리는 없다.

let countNum = 0;

setInterval(() => {
	countNum += 1;
	console.log(countNum);
}, 1000);

적당히(?) 잘 돌아가지만

더 정확하게 1초마다 함수를 실행시켜야 할 때가 있다.

예를 들면 60초짜리 게임의 카운트를 센다던가...

정확하게 딜레이 없이 딱 맞아야 하는 경우가 꽤 있을 텐데

setInterval은 딜레이가 생겨서 아래와 같이 해결했었다.

let prevTime = new Date().getTime();
let countNum = 60; //60초

function render() {
	let ts = new Date().getTime();

	if (ts >= prevTime + 1000) {
		prevTime = new Date().getTime();
		countNum -= 1;
		console.log(countNum + "초 남았다!");
        
        //여기서 함수 실행
	}

	requestAnimationFrame(render);
    //반복 시켜줌
}

requestAnimationFrame(render);

requestAnimationFrame()

애니메이션 구현을 위한 최적화 API를 사용하여

1초에 60번(Frame) 실행시켜주고 prevTime 보다

현재 시간이 1초만큼 크거나 같으면 실행!

간단하게 구현해봤다.

See the Pen 정확한 1초 by KIHWAN CHUN (@yahao2512) on CodePen.

무엇보다 브라우저 탭 이동시 타이머가 멈추기 때문에

전력 소모도 덜 된다. 게임이라면 멈춰있겠지?

정확한 1초 구현을 위해서 requeastAnimationFrame()을

사용해 보시기를~

명동 카페 몰또에서 바라본 명동 성당

코딩일레븐 — Mon, 22 Apr 2024 18:05:49 +0900

티스토리를 개설하고 처음으로 올리는 포스팅.

명동 카페 몰또에서 촬영한 사진.

이런 식으로 맥락 없이 사진 일기를 기록해보려 한다.

에스프레소 커피바에 왔으니 에스프레소 한 잔.

사진 촬영은 리코GR로 했다.

오래된 리코GR 1이지만 날이 좋아서 사진이 아주 잘 나왔다.

충분히 현역으로 사용할만하다.

명동 성당뷰 정말 환상적이었다.

외국인이 많아서 더 외국 느낌도 났었고.

평일 명동 성당.

미사가 진행되지 않아 사진도 촬영할 수 있었다.

아무리 날이 좋아도 리코 GR로

흔들림 없는 실대 사진은 쉽지 않았다.

네이버 블로그와 다른 맛을

느껴보고자 티스토리를 개설했는데,

아직은 차이점을 잘 모르겠다.

자주 올려봐야지~

새로운 시작

코딩일레븐 — Mon, 22 Apr 2024 16:51:26 +0900

개발 블로그를 끄적여 보려고 개설했다.