네 번의 시도
티스토리 블로그 스킨을 직접 만들면서 자잘한 문제를 많이 만났는데, 그중 가장 시간을 많이 잡아먹은 게 있습니다.
별것 아닌 작업이었습니다.
본문 첫 이미지 한 장을 안 보이게 하는 것.
설명부터 짧게 드리면 이렇습니다. 제 블로그는 글 상세 페이지 맨 위에 큰 키비주얼이 깔립니다. 600px 높이의 풀와이드 이미지요. 그 아래로 본문이 시작됩니다. 그런데 티스토리는 본문에 있는 이미지를 대표 이미지로 지정하면 키비주얼로 끌어다 씁니다.
저는 글 안에 이미지를 잘 안쓰는 편이라서 많은 글들이 상단에 키비주얼 이미지를 하나 넣고 끝이죠.
그래서 본문에 이미지를 넣으면 같은 키비쥬얼 이미지가 위에 큼지막하게 나오고, 본문 안에서 또 한 번 나옵니다. 같은 이미지가 두 번 보이는 거죠. 이 두 번째 노출을 CSS로 숨기는 작업이었습니다.
별것 아닌 작업이었습니다. 라고 말했지만 별것 아닌 작업이 아니었습니다.
1차 시도 - img:first-child
가장 단순한 가설로 시작했습니다. 본문 안에서 첫 번째로 등장하는 이미지를 숨기면 되겠죠. CSS에서 첫 번째 자식을 잡는 건 :first-child니까, 본문 영역 안의 첫 번째 이미지를 그렇게 잡으면 된다고 생각했습니다.
.frme-article-body img:first-child {
display: none;
}
적용했습니다.
그리고 안 됐습니다.
이미지가 그대로 두 번 보였어요.
이유는 조금만 생각해보면 당연했습니다. 티스토리는 본문 안에서 이미지를 그냥 <img> 태그로 두지 않습니다. <figure>로 한 번 감싸거나, <p> 태그 안에 넣거나, 글마다 구조가 다릅니다. 제가 잡은 img:first-child는 "이미지 태그 자체가 부모의 첫 자식인 경우"를 찾는 거였는데, 실제로는 이미지가 다른 태그 안에 들어 있어서 첫 자식이 아니었던 거죠.
2차 시도 - figure:first-of-type
티스토리가 이미지를 <figure class="imageblock">으로 감싼다는 걸 알아냈습니다. 그러면 figure를 잡으면 되겠죠. 본문 안 첫 번째 figure를 숨기는 선택자로 다시 짰습니다.
.frme-article-body figure.imageblock:first-of-type {
display: none;
}적용했습니다.
또 안 됐습니다.
이때 좀 답답했습니다. 왜 안 되는지 감이 안 잡혔어요. 클로드에게 SOS를 쳤더니 추측으로 더 시도하지 말고 진짜 구조를 보자고 했습니다. 본문에서 그 첫 이미지를 우클릭해서 검사를 누르고, 개발자 도구 화면을 캡처해서 보내달라고요.
캡처를 보냈습니다.
빈 <p>라는 복병
캡처를 본 클로드가 답을 알려줬습니다. 본문은 <div class="contents_style">로 시작하는데, 그 안 맨 처음이 빈 <p></p>였습니다. 그 다음에 <figure class="imageblock">이 나오는 구조였습니다.
<div class="contents_style">
<p></p>
<figure class="imageblock">
<img src="...">
</figure>
...
</div>즉 본문의 첫 자식은 figure가 아니라 빈 p였던 겁니다.
티스토리 에디터가 글을 저장할 때 본문 맨 앞에 빈 단락을 하나 자동으로 끼워 넣는 모양입니다.
왜 그러는지는 모르겠어요. 아무튼 그래서 제 선택자들이 다 빗나간 거였습니다.
3차 시도 - 빈 <p> 다음의 <figure>
이제 진짜 구조를 알았으니 정확히 겨냥할 수 있었습니다.
"빈 <p> 바로 다음에 오는 <figure class="imageblock">"을 숨기는 선택자로 다시 짰습니다.
.frme-article-body .contents_style > p:empty + figure.imageblock {
display: none;
}적용했습니다.
또 안 됐습니다.
이쯤 되니까 좀 화가 났습니다. 분명히 구조를 정확히 봤는데 왜 안 되는 거지.
다시 한 번 클로드에게 개발자 도구 캡처를 보냈습니다.
그리고 클로드의 답을 보고서야 마지막 문제가 보였습니다. 본문 영역의 진짜 구조는 이랬습니다.
<div class="frme-article-body">
<div class="tt_article_useless_p_margin contents_style">
<p></p>
<figure class="imageblock">...</figure>
...
</div>
</div>.frme-article-body 안에 바로 .contents_style이 있는 게 아니라, 사이에 한 단계 더 들어가 있었습니다. 그리고 .contents_style이 단독 클래스가 아니라 tt_article_useless_p_margin contents_style이라는 두 개 클래스를 함께 가진 div였죠. 그래서 제가 짠 선택자가 깊이를 잘못 잡고 있었고, 거기다 CSS 우선순위 문제까지 겹쳐서 적용이 안 됐을 가능성이 컸습니다.
4차 시도 - :first-of-type + !important
마지막 시도입니다. 자손 결합자로 깊이 상관없이 잡고, !important로 우선순위를 강제로 끌어올렸습니다.
그리고 강력 새로고침으로 브라우저 캐시까지 비웠습니다.
.frme-article-body .contents_style figure.imageblock:first-of-type {
display: none !important;
}됐습니다.
본문에서 첫 이미지가 사라졌습니다.
키비주얼에만 한 번 나오고, 본문은 두 번째 이미지부터 시작했습니다. 처음 의도한 그대로의 화면이 마침내 나온 것이죠.
참고로 짚어드리면, .frme-article-body는 제 블로그가 FRME이기 때문에 붙은 클래스 이름입니다.
본인 블로그에 적용하실 때는 이 부분을 본인 블로그의 본문 영역 클래스 이름으로 바꾸셔야 합니다.
클래스 이름이 모르시겠으면 본문 영역에서 개발자 도구를 열어보세요. 본문을 감싸고 있는 큰 영역의 <div class="..."> 를 찾으면 됩니다. 거기 적힌 클래스 이름으로 바꿔 쓰시고 CSS에 추가하시면 똑같이 본문에 등록한 첫 이미지가 노출되지 않습니다.
다른 어떤 것 보다 이미지를 본문 최상단에 등록하셔야 하고요.
별것 아닌 작업이 별것이었습니다
작업이 끝나고 나서 좀 허탈했습니다. 이미지 한 장 숨기는 데 네 번을 시도했습니다.
시간으로 따지면 한 시간이 훌쩍 넘었을 겁니다.
그 한 시간 동안 제가 한 일을 요약하면 이렇습니다.
CSS 선택자를 짜고, 안 되니까 가설을 바꾸고, 또 안 되니까 진짜 구조를 보고, 그러고도 안 되니까 우선순위를 강제로 올리고, 캐시를 비웠습니다. 결국 한 줄짜리 CSS 규칙이 화면 위에 정확히 작동하는 데 한 시간이 넘게 걸린 거죠.
제가 프론트엔드 개발자가 아니라서 그렇습니다. 개발자였다면 첫 번째 시도에서 빈 <p>의 가능성을 떠올렸을 거고, 두 번째 시도에서 우선순위 문제까지 같이 잡았을 겁니다. 한 줄로 끝났을 일입니다.
그런데 저는 PM입니다. 디자인 의사결정은 빠르게 하지만, CSS는 잘 모릅니다. 그래서 스택오버플로우, 레딧 뒤지듯이 클로드에게 물어보고, 안 되면 또 물어보고, 개발자 도구를 캡처해서 보여주고, 그러면서 한 시간을 보냈습니다.
그러면서 좀 웃겼습니다. 제가 매일 회사에서 디자이너와 개발자한테 디렉션을 주는 사람인데, 정작 한 줄짜리 CSS는 네 번 시도해야 잡는다는 사실이요. 평소에 프론트엔드 개발자가 "이거 한 줄만 바꾸면 되는데요"라고 말할 때, 그 한 줄을 위해 그가 어떤 시도를 했는지 저는 제대로 몰랐던 겁니다.
오늘 그걸 한 번 느꼈습니다. 한 줄을 정확히 맞추는 일이 얼마나 다층적인지.
가설을 세우고, 빗나가고, 진짜 구조를 보고, 다시 짜고, 그러고도 캐시 때문에 또 빗나가고, 강제로 우선순위를 올리는 그 과정.
그게 매일 누군가가 하고 있는 일이라는 것을요.
저와 비슷한 처지에 있는 분들이 이 시행착오를 한 시간 단축하시는 데 도움이 됐으면 좋겠습니다.
본업이 아닌 영역에서 한 시간을 헤맨 정직한 기록입니다.
별것 아닌 작업이 사실 별것이었습니다.
끝.