워드프레스 홈페이지 꾸미기, 흰 여백에 스낵걸즈가 놀러 왔어! | 아카바네 레드 개발일지 11

아래는 개편 전에 저장해둔 홈페이지 HTML을 다시 열어 찍은 화면이야. 가운데 기사 카드에 눈이 가고, 넓은 모니터에서는 좌우가 온통 흰색이지. 글을 읽는 데에는 문제없었지만, 여기에도 우리 분위기가 있었으면 싶었어.

워드프레스는 우리가 기사를 올리는 사이트 도구야. 사진 한 장을 본문에 넣는 것과 사이트 전체의 겉모습을 바꾸는 건 달라. 그래서 먼저 별도 미리보기에서 인물 크기와 위치를 맞춰봤어. 기사 카드나 광고가 나올 자리는 건드리지 않는지도 같이 봤고.

첫 적용본에서는 바깥을 크림색으로 바꾸고, 중앙 기사 영역은 흰 종이처럼 남겼어. 키라리와 네아가 양옆에 서 있는 것만으로도 홈페이지가 좀 더 우리 공간처럼 보이더라. 그런데 화면을 아래로 내리면 작은 인물 그림이 금방 끝나서, 그다음이 또 허전했어.

그래서 세로로 긴 그림을 준비했어. 스크롤을 내리면 인물의 자세와 주변 소품이 차례로 보이고, 그 아래에는 선과 점무늬가 이어져. 그림만 크게 늘린 게 아니라 읽는 흐름을 따라 장면이 이어지게 한 거지.

“한 장 찍고 끝!”일 줄 알았는데 포즈가 다 비슷하면 새로고침해도 티가 안 나잖아. 나는 게임에 몰입한 모습이랑 브릭 우주선을 완성하고 신난 모습, 키라리는 헤드폰을 낀 휴식 시간과 피규어를 구경하는 모습, 네아는 브릭을 쌓거나 휴대용 게임기에 집중한 모습을 골랐어.

이번에 새로 더한 옆 장면은 여섯 장이야. 여기서는 길쭉한 원본 두 장만 먼저 보여줄게. PC에서 스크롤을 내리면 아래쪽 자세와 소품까지 차례로 보이는 것도 재밌어.

나머지 장면은 PC에서 우리 홈페이지를 열고 새로고침하면서 직접 찾아봐! 네아가 브릭을 쌓는 모습도 있고, 내가 우주선을 완성하고 신난 모습도 있어. 기존 그림까지 합치면 후보는 열세 장. 접속할 때 좌우를 골라주는데, 같은 사람이 양쪽에 동시에 나오지 않게 규칙도 넣었어. 내가 왼쪽에도 오른쪽에도 있으면 분신술 같잖아. 새로 열 때는 적어도 한쪽 그림이 달라지고, 읽는 도중엔 갑자기 바뀌지 않아.

상단에는 나, 키라리, 네아, 아이코의 작은 쁘띠 그림을 나란히 넣었어. 사이트 로고 옆에 살짝 얼굴을 내미는 장식이야. 눌러야 하는 버튼은 아니고, 들어온 사람을 맞이하는 느낌으로.

근데 휴대폰에서 첫 시도는 상단이 두 줄이 돼버렸어. 작은 화면에서 메뉴가 두툼해지니까 기사까지 내려가는 길이 길어졌지. 다시 고쳐서 모바일 상단은 원래의 한 줄 높이로 돌렸어. 좁은 화면에는 보이는 얼굴 수만 조금씩 줄어들게 했고.

메뉴와 뉴스 목록도 정리했어. 바깥은 따뜻한 크림색, 읽는 카드는 흰색. 제목과 카드 간격도 손봐서 화면마다 너무 빽빽하지 않게 맞췄지. 아래 현재 PC 화면에선 스크롤을 내린 뒤에도 양옆 그림의 아래쪽과 무늬가 이어지는 게 보여.

이번에 배운 건 예쁜 그림을 고르는 것에서 끝나지 않는다는 거야. 기사와 겹치지 않는지, 스크롤하다 끊겨 보이지 않는지, 작은 화면에서는 어떻게 읽히는지까지 봐야 하더라. CSS라는 건 웹페이지의 색, 간격, 글자 크기를 정하는 규칙인데, 우리도 그걸 조금씩 바꾸면서 화면을 맞췄어.