한 시간 동안, 엉뚱한 곳을 고쳤다
티스토리 블로그에 영상을 하나 넣으려던 것뿐이었습니다.
글에 유튜브 영상 하나, 본문 폭에 맞춰 시원하게.
제가 원하는 건 그게 전부였고, 5분이면 될 줄 알았습니다.
다른 글에서도 이실직고한 바 있으나, 다시 한 번 밝혀두면 저는 개발자가 아닙니다.
이런 건 보통 다른 친절한 티스토리 블로거들이 써둔 글을 한참 뒤져서, 그분들이 찾아낸 방법을 그대로 가져다 씁니다.
오늘도 그랬습니다. 그리고 새벽 한 시까지 붙들고 있었습니다.
시도 1. 유튜브 임베드 코드를 가져와 폭만 바꾸기
우선 티스토리 블로그 에디터 메뉴에는 영상 입력 메뉴가 없습니다.
그래서 검색해봤습니다. '티스토리 블로그에 유튜브 임베드하기' 라는 개성없는 키워드로요.
어느 블로거가 알려준 대로 유튜브 영상의 공유하기 → 퍼가기 메뉴에서 나오는 임베드 코드를 복사했습니다.
그리고 폭 값만 제 블로그에 맞게 880px로 바꿨습니다.
높이는 알아서 계산돼 나오겠거니 했습니다.
<iframe width="880"
src="https://www.youtube.com/embed/-vZqEveE2t0?si=…"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>결과는 예상했던 크기의 20%만 한 영상이었습니다. 비율은 멀쩡했는데, 크기가 작았습니다.
폭을 880px로 키웠으니 영상도 그만큼 커질 줄 알았는데, 높이가 따라오지 않았습니다.
(이후 코드부터는 title·allow 같은 공통 속성은 […]로 줄이겠습니다.)
시도 2. 검색했더니 없는 기능을 알려줬다
다시 검색 했습니다. 예전 글 중에는 에디터 상단의 플러그인 → Youtube 동영상 첨부 기능을 쓰면 된다는 설명이 여럿 있었습니다. 반가운 마음에 메뉴를 열었는데, 제 에디터엔 그런 플러그인이 없었습니다. 그 글이 쓰인 시점의 티스토리와 지금의 티스토리가 달랐던 거죠.
누군가에겐 정답이었던 방법이, 저에겐 존재하지도 않는 방법이었습니다.
시도 3. 그럼 비율 상자로 감싸자
그래서 직접(이라고 쓰고 또 검색해서) 손봤습니다.
폭이 바뀌어도 비율이 유지되도록, 영상을 비율 고정 상자로 감쌌습니다. 반응형 영상의 정석이라 불리는 방법입니다.
<div style="position:relative; width:100%; aspect-ratio:16/9;">
<iframe src="https://www.youtube.com/embed/-vZqEveE2t0" […]
style="position:absolute; top:0; left:0; width:100%; height:100%; border:0;"></iframe>
</div>여전히 작게 나왔습니다. 정석대로 했는데 더 나아지지도 않았습니다. 비슷한 방법을 속성만 바꿔가며 몇 번 더 시도했지만, 결과는 크게 다르지 않았습니다.
시도 4. 복잡한 거 말고 숫자로 박자
머리를 비우고 단순하게. 16:9 실제 픽셀값인 880×495를 그대로 박고, 모바일을 위해 폭만 줄어들게 했습니다.
<iframe width="880" height="495" src="https://www.youtube.com/embed/-vZqEveE2t0" […]
style="max-width:100%; border:0;"></iframe>드디어 크기는 제대로 나왔습니다.
그런데 이번엔 좌우가 잘렸습니다. 폭은 화면에 맞춰 줄어드는데 높이는 495px에 박혀 있으니, 박스가 16:9보다 세로로 길어지고, 유튜브가 그 박스를 채우면서 좌우를 잘라낸 거였습니다.
시도 5. 높이도 같이 줄게 했는데도
원인을 알았으니 됐다 싶어, 폭이 줄면 높이도 비율대로 줄어들도록 속성을 더했습니다.
<iframe width="880" height="495" src="https://www.youtube.com/embed/-vZqEveE2t0" […]
style="max-width:100%; height:auto; aspect-ratio:16/9; border:0;"></iframe>여전히 잘렸습니다. 무슨 짓을 해도 같은 자리에서 같은 만큼 잘렸습니다.
사실 이 사이에도 검색으로 주워온 방법을 몇 번 더 넣었다 뺐다 했습니다. 다 적자니 부끄러워서 줄입니다.
분명한 건 저는 계속 코드를 조금씩 바꾸고, 저장하고, 새로고침하고, 또 바꾸고 있었다는 겁니다.
코드는 맞는 것 같은데, 화면은 계속 틀렸습니다.
그제서야 멈췄다
손을 멈추고 다른 걸 의심했습니다.
코드 말고, 코드가 들어가 있는 자리를요.
검사 도구로 찍어보니 제가 넣은 코드는 멀쩡했습니다. 문제는 그 코드를 감싸고 있는 상자였습니다.
에디터의 HTML 삽입 기능은 제가 쓴 코드를 본문에 그대로 넣는 게 아니라, 별도의 칸에 가둬서 보여주고 있었습니다.
그리고 그 칸의 비율은 제가 손댈 수 없는 영역이었습니다.
작게 나온 것도, 잘린 것도 전부 같은 이유였습니다. 저는 한 시간 내내 그 상자 안쪽만 고치고 있었던 겁니다.
정작 잘린 건 상자 자체였는데, 그 안에서 가구 배치만 바꾸고 있었던 셈입니다.
해결은 허무했다
그 기능을 안 쓰면 됐습니다.
정교해 보이던 HTML 삽입을 버리고, 영상 주소를 본문에 그냥 붙여넣었습니다.
그것도 embed가 아니라 watch가 붙은 주소창에 있는 바로 그 평범한 주소로요.
https://www.youtube.com/watch?v=-vZqEveE2t0
붙여넣고, 커서를 주소 끝에 둔 채로 엔터를 한 번 쳤습니다.
그러자 영상이 상자도 없이, 코드도 없이 본문에 그대로 떠올랐습니다.
본문 영역 폭에 맞춰 알아서 늘어났고, 잘리지도 않았습니다.
제가 한 시간 동안 코드로 만들어내려던 그 모습 그대로요.
엔터 한 번에.
오늘 배운 것
저는 오늘 코딩에 대해 배운 것이 하나도 없습니다.
대신 다른 걸 배웠습니다.
화면이 이상할 때, 우리는 보통 내 것부터 의심합니다.
내가 쓴 코드, 내가 만든 문서, 내가 짠 기획. 그래서 그걸 계속 고칩니다.
고치고, 저장하고, 확인하고, 또 고칩니다.
그런데 가끔은 고장 난 게 내 것이 아닐 때가 있습니다.
내 것이 들어가 있는 자리, 내가 손댈 수 없는 틀, 누군가 미리 정해둔 상자가 문제일 때가요.
그리고 한 가지 더.
제가 그렇게 열심히 주워온 답들은, 사실 다 다른 사람의 상황에 맞는 답이었습니다.
어떤 블로거의 임베드 코드는 그 블로거의 화면에서 맞는 것이었고(티스토리 블로그의 기본 테마인 오디세이의 텍스트 본문 영역 가로 값은 640px 이고, 유튜브 임베드 코드는 기본 값이 560px 입니다. 얼추 맞아 떨어지는것이죠), 옛 글의 플러그인은 옛 티스토리에서 되는 것이었습니다. 정작 제 문제는 제 설정에만 있었으니, 누구의 글에도 제 답은 처음부터 없었던 셈입니다.
남의 정답을 빌려오는 동안엔, 내 문제를 들여다볼 시간이 그만큼 줄어듭니다.
그래도 그 모든 시도가 통째로 낭비는 아니었다고 굳이 우겨봅니다.
하나하나가 원인을 지워줬으니까요. 답을 맞히지 못하는 동안 답이 아닌 것들을 줄이고 있었던 셈입니다.
그러니 다음에 또 무언가를 한참 고치고 있는데 도무지 나아지지 않는다면 한 번쯤 손을 멈추고 물어보려 합니다.
내가 지금 고치는 이게, 정말 고장 난 부분인가.
끝.