[블로그 구축기] 네이버 서치어드바이저 연동과 '짖는 강아지' 마스코트 달기

🚀 [블로그 구축기] 네이버 서치어드바이저 연동과 ‘짖는 강아지’ 마스코트 달기

오늘은 수익형 블로그의 기술적 기반을 다지고, 방문자 경험(UX)을 위한 인터랙티브 요소를 추가한 과정을 기록합니다.

오늘은 블로그의 검색 유입(SEO)을 위한 필수 설정과 함께, 방문자들에게 소소한 즐거움을 줄 수 있는 특별한 기능을 직접 코딩하여 적용해 보았습니다. 클라우드웨이즈(Cloudways) 서버 설정부터 자바스크립트 API 활용까지, 오늘 진행한 작업을 정리합니다.

1. 네이버 서치어드바이저 소유권 확인 (Cloudways 이슈)

구글뿐만 아니라 국내 트래픽 확보를 위해 네이버 서치어드바이저 등록을 진행했습니다. 하지만 제가 사용하는 클라우드웨이즈(Cloudways) 호스팅은 보안상 웹 기반 ‘파일 매니저’를 기본 제공하지 않아 HTML 확인 파일을 올리는 데 약간의 이슈가 있었습니다.

문제: 네이버 제공 HTML 파일을 서버 루트(public_html)에 업로드해야 함.
해결: SFTP(FileZilla)를 사용하거나, 워드프레스 플러그인 WP File Manager를 잠시 설치하여 해결.
결과: 파일 업로드 후 네이버 소유권 확인 즉시 완료! (보안을 위해 사용한 플러그인은 작업 후 바로 삭제했습니다.)

2. SEO를 위한 고유주소(Permalink) 최적화

검색 엔진 로봇(Bot)이 내 글의 내용을 URL만 보고도 파악할 수 있도록 주소 체계를 변경했습니다.

❌ 변경 전: dailypickstoday.com/?p=123 (의미 없는 숫자)
✅ 변경 후: dailypickstoday.com/%category%/%postname%/ (카테고리/글제목)

이렇게 설정하면 구글이 사이트 구조를 이해하는 데 훨씬 유리합니다. 기존 글이 있다면 리다이렉트가 필요하지만, 초기 단계라 과감하게 변경했습니다.

3. 오늘의 하이라이트: ‘지능형 골든 리트리버’ 구현 🐶

블로그가 너무 딱딱해 보이지 않도록 우측 하단에 귀여운 골든 리트리버 에이전트를 심었습니다. 단순히 이미지만 떠 있는 게 아니라, JavaScript와 워드프레스 REST API를 활용해 상황에 따라 똑똑하게 반응하도록 구현했습니다.

🛠️ 구현된 주요 기능

시간대/기기 인지: “상쾌한 아침!”, “모바일로 보고 계시네요!” 등 상황에 맞는 인사.
실시간 최신글 추천: API를 통해 방금 올라온 최신 포스팅 제목을 가져와서 강아지가 직접 추천.
광클 방지 (이스터 에그): 강아지를 5번 이상 빠르게 클릭하면 얼굴이 빨개지며 “으르렁” 소리를 내고 화를 냄 (재미 요소).

[적용된 코드 로직 일부]

// 1. WP REST API로 최신글 미리 로딩
fetch('/wp-json/wp/v2/posts?per_page=10').then(...)

// 2. 광클 감지 및 으르렁 모드(Rage Mode)
if (clickCount >= 5) {
    playSound(growlAudio); // 으르렁 소리 재생
    msg.innerText = "그만 찌르세요! 💢"; // 화난 메시지
    bubble.style.border = "3px solid red"; // 빨간색 경고
}

💡 오늘의 인사이트

수익형 블로그라고 해서 기계적으로 글만 쓰는 것이 아니라, 이런 인터랙티브 요소(Interactive Element)를 추가하니 블로그에 생동감이 돕니다. 방문자들이 강아지를 눌러보며 제 글을 한 번이라도 더 클릭하게 되길 기대해 봅니다.

#워드프레스 #Cloudways #네이버서치어드바이저 #SEO #자바스크립트 #블로그꾸미기 #골든리트리버

English version: Read this article in English

[블로그 구축기] 네이버 서치어드바이저 연동과 ‘짖는 강아지’ 마스코트 달기