말만 하면 뚝딱이야 - 블로그 디자인을 매거진 레이아웃으로 갈아엎기

손볼 때가 됐지

이 블로그를 처음 만든 게 7월 초야. 그땐 HTML이 뭔지도 몰라서 AI 조카가 만들어주는 화면을 보며 오, 이게 되네 하고 감탄만 했지.

그렇게 벌써 두 달이 조금 안 되는 시간이 흘렀는데 이게 익숙해서 몰랐는데 영 불편하더라고.

그중 제일 불편했던 건 최근 글이 죄다 카테고리에 묶여 있었던 거야.

「최근 글」이라는 딱지가 붙은 하이라이트 카드도 있었는데 사실 이게 최근 글은 아니었거든. 나흘 전 글이 그대로 앉아 있더라고.

글을 끝까지 읽고 나면 나가는 문이 네 개나 됐어. 옆에는 「함께 읽으면 좋은 글」, 아래엔 「다른 글 더 보기」, 그 밑에 이전글 다음글, 마지막엔 카테고리 딱지들. 어디로 가라는 건지 나도 모르겠더라.

그리고 첫 화면이 통째로 내 자기소개였어. 「코드 한 줄 몰라도 괜찮아, 일단 만든다」라는 큰 문장이 화면 절반을 차지하고 있었지.

만들 땐 그게 멋있어 보였거든. 두 달 지나 다시 보니까 독자가 제일 먼저 보는 자리를 내 소개말이 차지하고 앉아 있는 거였어. 정작 포스트는 안 보이는 형태였어.

애드센스 거절 뒤에 시작한 블로그 꾸미기

근데 이걸 왜 하필 지금 손댔냐면 애드센스 때문이야.

지난주에 구글 애드센스에 신청했다가 「가치가 별로 없는 콘텐츠」라는 사유로 거절당했어(ㅠㅠ). 그 얘긴 내 블로그가 가치가 없다고?에 따로 적어뒀어.

아무튼 거절 통지를 받고 이것저것 손보던 중이었지. 게임을 다른 주소로 옮기고 글을 보강하고 그러다 홈을 열었는데 앞에 적은 그 불편함이 눈에 밟혔어.

광고를 붙이든 말든 독자가 글을 못 찾는 집이면 소용없잖아. 거절당한 것도 속이 쓰린데 홈까지 마음에 안 드니 이참에 다 뒤집자 싶더라고.

티스토리나 네이버처럼 블로그 스킨을 골라 입히는 구조가 아니라서 화면을 직접 짜야 했어. 손이 더 가는 대신 마음에 안 드는 데가 있으면 그 한 줄만 고칠 수 있는 방식이지.

숫자로 재보니 최신 글이 3.1화면 아래에 있었다

불편하다는 건 나만 아는 느낌이라 녀석한테 검토를 해보라고 시켰어. 데스크톱에서 최신 글까지 얼마나 스크롤을 해야 보이는지 말이야.

"삼촌, 3.1화면이야. 그 전에 지나쳐야 하는 카드가 24장이고 첫 화면에 온전히 보이는 글은 1편이야."

무슨 말인진 모르겠는데 느낌은 오잖아. 원인도 같이 알려줬는데 진열대 순서가 코드에 고정으로 박혀 있어서 날짜와는 아무 상관이 없었어.

최신 글은 자기 카테고리 차례가 올 때까지 아래에서 기다리고 있었던 거지.

「최근 글」 카드가 나흘째 옛 글을 걸고 있던 것도 같은 뿌리였어. 그 카드는 글 파일에 표시를 하나 달아서 지정하는 방식이었어. 이건 사실 하이라이트라고 내가 원하는 글을 전면에 내보이는 건데 우선은 그냥 최신 포스트를 올리는 걸로 수정했어. 나중에 비슷한 기능을 추가하면 좋을 것 같아.

홈 맨 위에 크게 걸리는 대표 자리를 잡지에선 리드라고 부르는데 그 자리를 날짜가 가장 최근인 글이 자동으로 차지하게 바꿨지.

**접힘(fold)**이라고 이 녀석이 해준 얘긴데 이게 재미있더라고. 화면을 내리기 전에 보이는 영역이 얼마나 중요한지 실제로 잰 연구가 있다는 거야.

이 기사는 10년이 더 된 얘기기는 한데 참고할 만한 내용인 거 같아.

the 100 pixels just above the fold were viewed 102% more than the 100 pixels just below the fold.

📄 출처 · Nielsen Norman Group, The Fold Manifesto

접힘 바로 위 100픽셀을 바로 아래 100픽셀보다 두 배 넘게 본다는 거야. 하필 그 금싸라기 땅에 그닥 궁금하지도 않을 내 자기소개가 자리잡고 있었어.

머릿속엔 있는데 말로는 안 나오더라

고치자고 해놓고 내가 던진 말이 이거였어.

"유튜브나 뉴스 보면 홈페이지 기가 막히게 만들던데."

"삼촌, 그렇게 말하면... 아니 됐다."

"..."

실제로 저렇게 말하진 않았는데 그런 느낌이 들었다고 할까? 그래도 녀석은 충실하게 그 말을 받아서 뉴스 사이트랑 개발자 블로그를 뒤져왔어. 더 버지, 스매싱 매거진, CSS 트릭스, 조시 코모. 그걸 참고해서 웹디자인 시안을 세 개 만들어 왔지.

보자마자 아니라는 생각부터 들었어.

"내가 원하는 디자인이 아니야."

"그럼 뭔데? 아니 됐다."

"..."

문제는 그다음인데 말이야. 그럼 뭘 원하냐고 물으면 나도 딱 부러지게 답을 못 하겠는 거야. 머릿속엔 분명히 그림이 있는데 그게 말로 안 나와.

이거 나만 그런 거 아니지? 미용실 가서 자연스럽게 해달라고 손짓만 하다가 나오는 그 기분이랑 똑같았어.

녀석 잘못은 아니야. 이 녀석은 뭘 시켜도 일단 성실하게 하거든. 조사도 멀쩡했고 시안도 깔끔했지. 다만 어디를 보고 오라는 말을 내가 못 해준 거야.

이 녀석이 따로 조사를 돌리는 중에 나도 인터넷을 뒤지다가 잡지 사진들을 보게 됐는데 그게 좀 괜찮더라고.

"매거진 형식으로 가보자."

매거진 레이아웃, 잡지가 답이었다

방향이 잡히니까 그다음은 빨랐어. 참고할 만한 이미지를 주고 이런 느낌으로 해보자라고 요청했고 녀석이 이런저런 부품을 가져왔지.

같은 뼈대에 겉모습만 다른 시안 두 개를 받았어. 하나는 기존 크림색을 유지한 것, 다른 하나는 종이를 흰색으로 올리고 검은 괘선을 세운 것.

나는 아래쪽을 골랐어. 신문 제호처럼 글자를 바짝 붙여놓은 게 마음에 들었거든. 이름도 그래서 「잉크 프레스」라고 하나 봐.

모서리를 0으로 눕히면서 재밌는 얘길 들었어. 둥글기를 지정한 이름이 열여덟 군데에서 불려 다니고 있어서 이름을 바꾸면 그게 더 큰 공사라는 거야. 그래서 이름은 그대로 두고 값만 0으로 눌렀어.

음, 그러면 안 돼지. 그래. 잘한다.

홈 문구를 지웠더니 그 자리가 채워졌다

내가 걸렸던 게 하나 더 있었어. 홈에 소개 문구가 꼭 있어야 하나 싶었거든. 한번 문제 삼으니까 그게 계속 눈에 밟히는 거야. 왜 무심코 앞사람 콧털을 봤는데 그 다음부터 콧털만 보이는 거 말이야.

녀석이 조사해온 사이트 다섯 곳을 다시 보니 공통점이 있었어. 다섯 곳 다 로고와 메뉴 다음이 바로 기사였고 브랜드 문장은 한 줄도 없었어. 개인 블로그인 조시 코모조차 그림만 두고 문장은 안 뒀다더라고.

"잡지에서 정체성을 지는 건 소개 문장이 아니라 제호야."

문장을 지우고 제호를 키웠더니 그 자리가 자연스럽게 채워졌어. 지운 문구는 버리지 않고 소개 페이지로 옮겼어. 거기 원래 있던 문장보다 이게 나았거든.

발행한 글 서른두 편이 새 배경색을 거부했다

바탕을 크림에서 거의 흰 종이로 올리려는데 녀석이 제동을 걸었어.

"삼촌, 본문에 들어간 설명 그림이 서른두 장인데 전부 옛 크림 배경으로 구워져 있어. 바탕만 바꾸면 글마다 크림색 사각형이 도드라져."

우리는 이미 발행한 글은 웬만하면 안 건드린다는 규칙을 세워뒀어. 색 하나 바꾸겠다고 지난 글 서른두 편을 헤집는다는 게 나도 내키지 않았고. 그러니 답이 셋이었지.

누가 봐도 여기선 3번이지. 그림 둘레에 얇은 괘선을 둘러서 「의도된 판」으로 보이게 수정했어.

잉크 프레스에선 괘선이 원래 칸을 나누는 언어라 오히려 맞아떨어졌어. 손볼 것도 CSS 한 줄로 해결됐지.

세는 김에 곁가지도 하나 나왔어. 서른두 장 중 여섯 장은 또 다른 색이었고 세 장은 옛 잉크색 바탕이더라는 거야. 그림들이 그만큼 옛 팔레트에 물려 있었던 거지.

같은 일을 네 군데서 하고 있었다

글 하단 얘기야. 다음 글로 보내는 장치가 네 개나 겹쳐 있었어.

그중 이전글 다음글을 빼버렸어. 어차피 시리즈가 이어지니까 그 일은 글 맨 위에 붙는 순서표가 이미 하고 있었거든.

넷이 하던 일을 하나가 하니까 화면도 깔끔해지고 보여줄 수 있는 글은 두 편에서 여섯 편으로 늘었어.

광고 자리는 잡아두되 비워뒀다

애드센스가 계기였으니 광고 자리도 같이 봤어. 아직 승인이 안 났으니 코드는 안 넣고 자리만 표시해뒀지.

구글이 배치에 대해 공개한 문서가 있었거든.

This audit ensures that ads take up no more than 30% of the page vertically. A ratio greater than 30% has been found to negatively impact user experience.

📄 출처 · Google Publisher Ads Audits, Viewport Ad Density

광고가 페이지 세로의 30%를 넘으면 사용자 경험을 해친다는 얘기야. 다만 이건 계정을 제재하는 정책이 아니라 권고라고 하더라고.

자리는 둘로 잡았어. 사이드바 목차 아래 하나, 글 하단 목록 위 하나. 본문 한가운데는 지금 구조로는 자리가 안 나왔어.

그런데 이거 떡 줄 사람은 생각도 안 하고 있는데 김칫국만 드링킹하고 있는 거 아닌가 몰라.

수정안 여섯 개, 그리고 원래 죽어 있던 두 가지

다 됐다길래 서버를 열어서 직접 봤어. 그런데 여섯 군데가 눈에 걸리더라.

• 태그라인이 제호 바로 아래 붙어서 머리가 두꺼워진 것
• 굵은 괘선이 「새로 올라온 글」 글자를 덮친 것
• 발행 정보가 메뉴 바로 밑이라 메뉴의 일부처럼 읽힌 것
• 글 하단 판이 회색이라 우리 것 같지 않은 것
• 소개 페이지의 검은 판이 굳이 필요 없던 것
• 카테고리 페이지만 아직 상자를 색으로 칠하고 있던 것

전부 기능이 아니라 어긋남이야. 코드로 잡히는 게 아니라 눈에 걸리는 종류라 이건 사람이 봐야 나오더라고.

"판 색이 회색인 게 마음에 안 들어. 우리 시그니처 색깔이 있잖아."

그런데 손보는 김에 둘이 더 나왔어. 이번에 만든 게 아니라 원래부터 어긋나 있던 것들이었지.

하나는 글 옆 목차가 대표 이미지 오른쪽 끝보다 안으로 들어가 있어서 균형이 안 맞아 보인다는 것.

그리고 다른 하나가 좀 어이없었는데

"삼촌, 목차에서 지금 읽는 절을 표시해주는 기능이 CSS는 다 있는데 그걸 켜주는 코드가 없어. 한 번도 작동한 적이 없었어."

"만들어놓고 스위치를 안 달았다는 거지?"

"그렇게 됐어."

"자랑이다. 자랑이야."

개편을 안 했으면 모를 뻔했네.

홈페이지 디자인 고치는 순서 여섯 단계

한 바퀴 다 돌고 나서야 순서가 좀 보였어. 처음부터 알았으면 시안 세 개를 버릴 일도 없었을 텐데 말이야.

먼저 수정할 곳을 문장으로 적었어. 뭔가 별로다로는 안 돼. 예를 들면 '최신 글이 어디 있는지 안 보인다'까지는 적어야 고칠 게 정해지더라고.

그다음이 레퍼런스인데 이게 시안보다 먼저야. 기가 막히게라는 말은 지시가 아니잖아. 마음에 드는 사이트를 직접 열어서 보여주는 게 말로 설명하는 것보다 훨씬 빨랐어.

색이랑 글꼴은 뼈대를 잡고 나서 봤고 이미 올린 글이 새 디자인과 어울리는지도 살폈어.

다 됐다는 말을 들어도 눈으로 봐야 해. 이상한 곳이 꼭 있거든.

그래서 어떻게 됐냐

첫 화면에 소개를 빼고 포스트로 채웠어. 왼쪽에 최신 글 한 편이 크게 눕고 오른쪽에 그다음 네 편이 번호를 달고 서 있어.

바꾸기 전 마지막 검수를 했고 내부 링크 1587개를 녀석이 전부 훑었는데 깨진 데는 없었고 모바일 폭에서 가로로 삐져나온 것도 없었어.

이걸 고쳤다고 없던 손님이 갑자기 오진 않겠지만 유입은 개편하기 훨씬 전부터 바닥이었고 그 원인은 디자인이 아니라 다른 데 있거든. 그건 따로 파는 중이야.

이거 참, 새삼스레 또 놀랍네. 말로만 했는데 홈페이지가 새단장을 마쳤어. 이러니 내가 요즘 딴데로 안 새고 이 녀석과 매일 놀고 있는 거겠지만 말이야.

P.S. 이 블로그를 맨 처음 만든 얘기는 코딩 없이 홈페이지 만들기에 있어. 두 달 사이에 뭐가 달라졌는지 나란히 보면 재밌을 거야.