AI 알고리즘에 대응하는 블로그 콘텐츠 구성 방법 멀티미디어 활용 전략

단순히 정보를 나열하는 정적인 블로그는 더 이상 방문자의 마음을 붙잡기 어렵습니다. 이제는 감성과 경험 중심의 동적 블로그, 그리고 다양한 감각을 자극하는 멀티미디어 블로그로의 전환이 필요한 시점입니다.

특히 AI 기반 검색 환경에서는 단순한 텍스트보다 공감과 체험을 유도하는 콘텐츠가 더 높은 평가를 받으며, 사용자는 정보를 찾는 것이 아니라 콘텐츠를 느끼는 감성 방향으로 이동하고 있습니다. 이런 흐름에 발맞추지 않는다면, AI 검색 알고리즘에서의 트래픽 손실은 피할 수 없는 블로그의 현실이 될 것입니다.

정적 블로그에서 멀티미디어 블로그 : 자동 음악재생 기능으로 체험 중심 콘텐츠 만들기

이러한 변화 속에서 블로그 생존 전략으로 떠오르고 있는 것이 바로, 블로그에 멀티미디어 요소를 적용하는 것도 하나의 방법이 아닐가 생각합니다. 특히, 구현이 간편하고 서버 부담도 적은 음악 자동 재생 기능은 방문자의 체류 시간을 자연스럽게 늘려주는 효과적인 방법 중 하나입니다.

이번 글에서는 SoundCloud API와 Intersection Observer를 활용하여, 스크롤 위치에 따라 자동으로 음악이 재생되고 중단되는 스마트한 오디오 플레이어를 구현하는 방법을 자세히 소개합니다.

이제, 정적인 블로그를 넘어서 감성적인 동적 블로그로 진화할 시간입니다.

SoundCloud 소개

SoundCloud는 전 세계 아티스트와 청취자를 연결하는 세계 최대 규모의 오디오 플랫폼 중 하나입니다. 2007년 독일 베를린에서 설립된 이 플랫폼은 음악을 제작하고 공유하는 창작자들에게 열린 공간을 제공하며, 기성 아티스트뿐 아니라 인디 뮤지션, DJ, 팟캐스터, 오디오 크리에이터에게도 큰 사랑을 받고 있습니다.

• 음악 제작자: 쉽고 빠르게 곡을 업로드하고, 전 세계 사용자에게 자신의 사운드를 알릴 수 있습니다.
• 청취자: 최신 유행 음악부터 마이너한 인디 트랙까지 다양한 오디오 콘텐츠를 실시간 스트리밍으로 감상할 수 있습니다.
• 블로거나 크리에이터: 오디오 콘텐츠를 웹사이트나 블로그에 쉽게 삽입할 수 있어 몰입감 있는 멀티미디어 환경을 구성할 수 있습니다.

주요 특징

• 무제한 업로드: 유료 이용 시 거의 무제한의 트랙 업로드 가능
• 임베드 기능: 웹사이트나 블로그에 플레이어 삽입 가능
• 댓글 기능: 특정 시간대에 댓글을 달 수 있어 실시간 피드백 가능
• 청취 통계 제공: 재생 횟수, 좋아요, 지역별 청취 분석 등 데이터 기반 마케팅 가능
• 모바일 앱 제공: iOS 및 Android 앱으로 언제 어디서나 음악 제작 및 청취 가능

일반 청취자 기준 무료 사용 가능

기능	무료 여부	설명
음악 스트리밍	가능	수백만 개의 곡을 무료로 청취 가능
모바일/웹앱 이용	가능	iOS, Android, 웹 모두 무료 이용 가능
플레이리스트 만들기	가능	좋아하는 곡들을 모아 플레이리스트 구성 가능
블로그에 임베드(삽입)	가능	iframe 방식으로 자유롭게 삽입 가능
광고 없음	불가능	무료 계정은 광고가 포함됨

핵심 기능 요약

• SoundCloud API 기반 음악 재생
• 스크롤 진입 시 자동 재생 / 벗어나면 일시정지
• 중복 로딩 방지 및 웹 성능 최적화
• SEO 친화적인 구조 유지 (비동기 방식)

왜 이런 방식이 필요한가요?

음악 플레이어는 방문자의 감정에 긍정적인 영향을 주지만, 무조건 자동 재생되면 사용자 불편을 초래할 수 있습니다. 또한, 페이지 초기 로딩 속도를 느리게 하거나 검색엔진 인덱싱에 악영향을 줄 수 있습니다. 이를 보완하기 위해 다음과 같은 SEO 전략을 적용했습니다.

방법	설명
Intersection Observer	뷰포트에 해당 요소가 70% 이상 들어올 때만 음악 재생
SoundCloud API	안정적인 음악 스트리밍 및 이벤트 제어
Lazy Load 방식	페이지 하단까지 스크롤할 때에만 플레이어 DOM 삽입
SEO 최적화	플레이어는 HTML iframe으로 삽입되며 검색엔진 파싱에 방해되지 않음

코드 설명과 구현

div id="music"/div
!-- SoundCloud API 필수 로드 --
script src="https://w.soundcloud.com/player/api.js"/script

이후 자바스크립트에서 IntersectionObserver를 사용하여 .music 요소가 화면에 70% 이상 보일 때만 SoundCloud iframe을 생성하고 자동 재생합니다.

// DOMContentLoaded 시점에 실행
document.addEventListener('DOMContentLoaded', function() {
...
const observer = new IntersectionObserver((entries) = {
entries.forEach(entry = {
if (entry.isIntersecting && entry.intersectionRatio = 0.7) {
// 뷰포트 안에 충분히 들어온 경우 재생
if (!isPlayerCreated) {
createPlayer();
} else if (widget) {
widget.play();
}
} else {
// 벗어났을 때 정지
if (widget) {
widget.pause();
}
}
});
}, { threshold: 0.7 });
...
});

위 코드 작동 방식 설명

1. 페이지가 로드되면 #music 요소를 관찰합니다.
2. 사용자가 해당 요소까지 스크롤하면 iframe을 생성하여 SoundCloud 오디오를 삽입합니다.
3. 플레이어가 준비되면 자동으로 음악이 재생됩니다.
4. 사용자가 영역을 벗어나면 음악은 자동 일시정지됩니다.

SoundCloud 음악 재생 방식 예시

아래는 코드가 있는 구간이 자동으로 음악이 재생되는 구간입니다.

이 구간에는 SoundCloud 음악 플레이어가 동적으로 생성되며, 방문자가 이 위치까지 스크롤하면 자동으로 음악이 재생됩니다.
반대로, 사용자가 이 영역을 벗어나면 음악 재생이 자동으로 일시 정지되어 사이트 이용에 방해가 되지 않습니다.

이러한 방식은 블로그 퍼포먼스를 유지하면서 방문자의 체류 시간을 늘리는 데 효과적이며, 모바일 환경에서도 자연스럽게 작동합니다.

음악재생 플레이어가 노출된 지점에 코드 적용

div id=”music”/div

Souncloud 사이트 방문 후 원하는 곡을 Share 버튼으로 코드 복사 후 아래 코드에 적용합니다. 코드에 적용하기 힘들 경우 아래 코드 변환기로 변환 후 복사해서 붙여 넣으시면 됩니다.

변환지우기
복사

전체 적용 코드

상단 입력란에 변경하고자 하는 음악 주소를 입력한 후 변경 버튼을 누르면 자동으로 음악이 변경됩니다.

div
input type="text" id="soundcloudInput" style="width: 80%;" placeholder="SoundCloud 주소를 입력하세요" /
button id="convertBtn"변경/button
/div

div id="music" style="margin-top: 20px;"/div

script src="https://w.soundcloud.com/player/api.js"/script
script
document.addEventListener('DOMContentLoaded', function () {
const musicDiv = document.getElementById('music');
const input = document.getElementById('soundcloudInput');
const btn = document.getElementById('convertBtn');
let widget = null;
let playerCreated = false;

const defaultURL = 'https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/2090861070&auto_play=false&visual=true&buying=false&sharing=false';

let lastURL = localStorage.getItem('soundcloudURL') || defaultURL;

input.value = decodeURIComponent(getUrlParam(lastURL, 'url') || '');

const observer = new IntersectionObserver(entries = {
entries.forEach(entry = {
if (entry.isIntersecting && entry.intersectionRatio = 0.7) {
if (!playerCreated) {
createPlayer(lastURL);
} else if (widget) {
widget.play();
}
} else {
if (widget) {
widget.pause();
}
}
});
}, {
threshold: 0.7,
rootMargin: '0px 0px -100px 0px'
});

observer.observe(musicDiv);

function createPlayer(url) {
if (playerCreated) return;

const iframe = document.createElement('iframe');
iframe.id = 'sc-widget';
iframe.width = '100%';
iframe.height = '300';
iframe.style.border = 'none';
iframe.allow = 'autoplay';
iframe.src = url;

musicDiv.innerHTML = '';
musicDiv.appendChild(iframe);

playerCreated = true;

const checkReady = setInterval(() = {
if (typeof SC !== 'undefined') {
clearInterval(checkReady);
widget = SC.Widget(iframe);
widget.bind(SC.Widget.Events.READY, function () {
widget.play();
});
widget.bind(SC.Widget.Events.ERROR, function (e) {
console.error('재생 오류:', e);
});
}
}, 100);
}

function getUrlParam(fullUrl, paramName) {
try {
const urlObj = new URL(fullUrl);
return urlObj.searchParams.get(paramName);
} catch {
return null;
}
}

btn.addEventListener('click', () = {
const userInput = input.value.trim();
if (!userInput) {
alert('SoundCloud 주소를 입력해주세요.');
return;
}

fetch(`https://soundcloud.com/oembed?format=json&url=$encodeURIComponent(userInput)}`)
.then(res = res.json())
.then(data = {
const parser = new DOMParser();
const doc = parser.parseFromString(data.html, 'text/html');
const iframe = doc.querySelector('iframe');
if (iframe && iframe.src) {
let newSrc = iframe.src
.replace('&auto_play=true', '&auto_play=false')
.replace('&show_comments=true', '&show_comments=false')
.replace('&show_user=true', '&show_user=false')
.replace('&show_reposts=true', '&show_reposts=false')
.replace('&sharing=true', '&sharing=false');

localStorage.setItem('soundcloudURL', newSrc);
lastURL = newSrc;

playerCreated = false;
createPlayer(lastURL);
} else {
alert('올바른 SoundCloud 주소가 아닙니다.');
}
})
.catch(() = alert('주소 정보를 불러오는 중 오류가 발생했습니다.'));
});
});
/script

SEO에 미치는 영향은?

• 이 방식은 검색엔진 최적화(SEO)에 좀더 안전합니다.
• 음악 플레이어는 JavaScript로 동적으로 생성되므로, 크롤러가 콘텐츠에 방해받지 않습니다.
• meta 태그, title, alt, 구조화 데이터 등 SEO의 핵심 요소와 충돌하지 않습니다.
• 방문자가 선택적으로 들을수 있어 접근성 문제를 최소화 합니다.

추가 팁

• 다양한 음악을 사용하고 싶다면 SoundCloud의 트랙 ID만 바꿔주면 됩니다.
• 재생 대신 auto_play=false로 설정하고 사용자가 클릭하도록 유도할 수도 있습니다.
• 다크 모드 또는 테마와의 통합을 고려하여 visual=false로 설정하면 깔끔한 인터페이스를 만들 수 있습니다.

SoundCloud와 Intersection Observer를 함께 활용하면, 사용자의 행동에 반응하는 스마트한 음악 재생 기능을 손쉽게 구현할 수 있습니다. 이 기능은 블로그에 동적인 멀티미디어 요소를 더함으로써, 방문자에게 더욱 풍부하고 감성적인 경험을 제공합니다. 특히 사용자가 해당 영역까지 스크롤했을 때만 음악이 자동으로 재생되고, 화면에서 벗어나면 자동으로 정지되도록 구성할 수 있어 불필요한 리소스 낭비를 줄일 수 있습니다.

이러한 방식은 방문자의 체류 시간을 자연스럽게 늘리는 데 효과가 있으며, 블로그 브랜드에 대한 인상도 더욱 긍정적으로 형성하는 데 도움이 됩니다. 무엇보다 페이지 로딩 속도나 검색 최적화(SEO)에 별다른 영향을 주지 않으면서도 정적 블로그를 동적 멀티미디어 콘텐츠로 적용할 수 있는 매우 간단하고 효율적인 방법입니다.