워드프레스닷컴에 아무런 처리를 하지 않은 상태에서 인스타그램 컨텐츠를 넣으면 모바일에서 가로스크롤이 생긴답니다. 이 경우 사용자 경험에도 안 좋지만, 무엇보다 SEO 점수를 많이 깎아먹는답니다. 저는 실제로 이런 경우 때문에 구글 콘솔에서 경고 메시지를 받은 적이 있습니다. 이런 부분은 소스코드를 수정해서 해결해야 하는 부분입니다.
문제는 이 소스코드가 인스타그램의 iframe 기능으로 제공되는 것이고, 따라서 인스타그램에서 자체적으로 제공되는 기능이라 인라인 소스코드를 바꿔서 해결이 안 된다는 점입니다. 이 경우 워드프레스 스킨의 추가CSS 기능을 활용하여 CSS를 강제로 입혀서 문제를 해결해야 합니다.
워드프레스닷컴의 추가CSS를 삽입하는 기능이 프리미엄 요금제 이상에서 가능하기 때문에, 당연히 무료 요금제에서는 이런 기능을 활용할 수 없답니다. 따라서 워드프레스닷컴의 무료 요금제를 활용하는 경우 인스타그램의 소스코드를 삽입하면 이런 SEO 문제의 불리함을 안고 가야 한다는 이야기가 되겠습니다.
현재 제 블로그 (zoahaza.blog) 의 소스코드입니다. 이들 중 일부에 인스타그램 컨텐츠를 삽입할 때 가로스크롤 문제를 해결하는 소스코드가 들어 있습니다.
main p, main h1, main h2, main h3, main h4, main h5, main h6, main li {
word-break: break-all;
}
.entry-featured-image {
border-top: 1px solid #333;
border-bottom: 1px solid #333;
position: relative;
height: 20vh;
overflow: hidden;
}
.entry-featured-image img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.entry-featured-image::after {
display: none;
}
.site-logo-link img {
width: 150px;
height: 150px;
}
.wp-block-embed-instagram .embed-instagram iframe[style] {
min-width: 100px !important;
}
@media (max-width: 599px) {
#main .wp-block-embed-flickr img {
max-width: 75vw;
height: fit-content;
}
.entry-featured-image {
height: 10vh;
}
}
주의할 점이 있다면, 인라인 소스코드의 방식이 워드프레스닷컴의 테마(스킨)에 따라 조금씩 달라질 수 있으므로, 워드프레스닷컴이라고 무조건 이 소스코드를 복사 + 붙여넣기 해서 이 문제를 해결할 수 없을지도 모릅니다. 따라서 이런 경우 문제를 해결하기 위해 약간의 html, css 지식이 있어야 합니다.
<html>
<head>
http://jquery-3.6.0.min.js
<style>
#space{
width: 100%;
height: 100%;
display:block;
overflow:hidden;
scroll:no;
}
div{
position:absolute;
display: block;
animation-name:scale_box;
animation-duration:10s;
animation-iteration-count:1;
border-radius:50%;
transform: translate(-50%, -50%);
background-color:#fff;
}
div.black{
width:0px;
height:0px;
background-color:#000;
}
@keyframes scale_box{
0%{
width:0px;
height:0px;
opacity:1;
}
100%{
width:2000px;
height:2000px;
opacity:0;
}
}
</style>
</head>
<body id="space">
<script>
var spot=$('#space');
var toggleColor = new Array(0,0,0,0,0);
var spotNumber=0;
var ponder = new Array();
var colorR;
var colorG;
var colorB;
var ToggleSN = 0;
spot.click(function(event){
// 색상 생성
colorR=Math.floor(Math.random()*127);
colorG=Math.floor(Math.random()*127);
colorB=Math.floor(Math.random()*127);
// spot 제어
if (spotNumber >= 5){
clearInterval(ponder[spotNumber]);
spotNumber=0;
}
x = event.pageX;
y = event.pageY;
spotNumber++;
ponderMaker(x, y, colorR, colorG, colorB);
});
function ponderMaker(x, y, colorR, colorG, colorB){
ponder[spotNumber-1] = setInterval(function(){
var circle=$("<div>", {
css: {
top: y,
left: x,
backgroundColor: 'rgb('+colorR+','+colorG+','+colorB+')'
},
}).appendTo("#space");
if ((toggleColor[spotNumber-1])%2 == 0){
circle.css("background-color", "white");
}
toggleColor[spotNumber-1]++;
console.log(spotNumber, toggleColor[spotNumber-1], ToggleSN);
}, 1000);
}
</script>
</body>
</html>
*
2. 수정 후 소스코드
<html>
<head>
http://jquery-3.6.0.min.js
<style>
#space{
width: 100%;
height: 100%;
display:block;
overflow:hidden;
scroll:no;
}
div{
position:absolute;
display: block;
animation-name:scale_box;
animation-duration:10s;
animation-iteration-count:1;
border-radius:50%;
transform: translate(-50%, -50%);
background-color:#fff;
}
div.black{
width:0px;
height:0px;
background-color:#000;
}
@keyframes scale_box{
0%{
width:0px;
height:0px;
opacity:1;
}
100%{
width:2000px;
height:2000px;
opacity:0;
}
}
</style>
</head>
<body id="space">
<script>
var spot=$('#space');
var toggleColor = new Array(0,0,0,0,0);
var ponder = new Array();
var colorR;
var colorG;
var colorB;
var ToggleSN = 0;
let spotNumber=0;
spot.click(function(event){
// 색상 생성
colorR=Math.floor(Math.random()*127);
colorG=Math.floor(Math.random()*127);
colorB=Math.floor(Math.random()*127);
x = event.pageX;
y = event.pageY;
spotNumber++;
if (spotNumber >= 5){
clearInterval(toggleColor[spotNumber]);
spotNumber=0;
}
ponderMaker(x, y, colorR, colorG, colorB, spotNumber);
});
function ponderMaker(x, y, colorR, colorG, colorB, spotNumber2){
toggleColor[spotNumber2-1] = setInterval(function(){
var circle=$("<div>", {
css: {
top: y,
left: x,
backgroundColor: 'rgb('+colorR+','+colorG+','+colorB+')'
},
}).appendTo("#space");
if ((toggleColor[spotNumber2-1])%2 == 0){
circle.css("background-color", "white");
}
toggleColor[spotNumber2-1]++;
}, 1000);
spotNumber2++;
}
</script>
</body>
</html>
*
3. 결론
변수 선언을 let으로 선언해야 할 것으로 var로 선언해서 문제가 생겼다고 판단한 초반의 생각은 들어맞지 않았습니다. 그보단, 다른 영역의 함수에 넘겨줘서 다르게 처리해야 할 변수를 전역변수로 퉁쳐서 처리한 게 문제였다는 것을 발견했습니다.
결국 이 문제를 해결했고, 소스코드는 의도한 대로 정상 동작하게 만들었습니다. 다만, 컴퓨터 사양의 한계로 배열을 5개까지 만들 수밖에 없어서 그 이상의 변수가 들어가면 값이 꼬일 수 있다는 게 한가지 문제이긴 합니다만, 컴퓨터 사양의 한계이므로 어쩔 수 없어서 그냥 놔뒀습니다.
좀 더 좋은 사양의 컴퓨터에서 제대로 동작되길 바란다면, 배열 한계값을 늘려서 처리하시기 바랍니다. (자세한 사항은 해당 동영상 참고)
*
4. 향후 계획
chatGPT에 해당 소스코드의 분석을 의뢰하였고, 제대로 분석하는 것을 확인했습니다. 나중에 chatGPT를 활용해서 좀 더 나은 코딩 방향을 찾아볼 예정입니다.
디지털 창작물 정리보관소 