블로그를 새로 꾸몄습니다

한동안 블로그를 열 때마다 조금씩 아쉬웠다. 글은 계속 쌓이는데 첫 화면은 몇 년 전의 모습 그대로였고, 프로젝트와 글이 한 공간에 있다는 느낌도 약했다. 기능을 더 붙이는 것보다 지금 있는 것들을 잘 보여주는 일이 먼저라는 생각이 들었다.

이번에 가운데의 작은 캐릭터를 만든 이유도 비슷했다. Hollow Knight를 할 때 느꼈던 조용하고 또렷한 실루엣이 오래 남아 있었지만, 그 모습을 따라 만들고 싶은 것은 아니었다. 내 사이트를 열었을 때만 보이는, 작지만 표정이 있는 시작점을 갖고 싶었다. Grok Imagine으로 여러 방향의 이미지를 만들어 보며 눈과 귀, 여백이 다른 표정들을 훑었고, 그중 가장 단순한 인상을 골랐다. 마지막으로 QuiverAI의 arrow-1.1 모델을 이용해 SVG로 정리했다. 작은 파비콘부터 첫 화면의 마크까지 같은 형태가 또렷하게 남도록 만드는 과정이었다.

그래서 이번에는 사이트를 처음부터 다시 바라봤다. 화려한 요소를 추가하기보다는 여백과 글자의 크기, 페이지 사이의 흐름을 정리했다. 결과적으로 조금 조용하고, 대신 오래 봐도 덜 피곤한 블로그가 됐다.

첫 화면은 더 단순하게

홈에서는 내가 무엇을 하는 사람인지와 어디로 가면 되는지만 남겼다. 가운데에 둔 작은 아이콘을 시작점으로 삼고, 소개 문장과 링크를 한 호흡으로 이어지게 했다. 검은색과 흰색을 기본으로 두고 장식은 최대한 줄였다.

처음에는 뭔가를 더 넣어야 화면이 채워질 것 같았다. 그런데 몇 번 덜어내고 나니 오히려 이름과 문장이 더 잘 보였다. 빈 공간도 이제는 비어 있는 게 아니라 화면의 일부처럼 느껴진다.

글을 읽는 공간답게

블로그 목록은 연도와 제목, 날짜가 한눈에 들어오도록 다시 배치했다. 검색은 꼭 필요한 만큼만 남겼고, 글 상세 페이지에서는 제목과 본문 사이의 간격을 넉넉하게 잡았다. 글을 찾는 순간보다 읽기 시작한 뒤의 리듬을 더 중요하게 생각했다.

모바일에서도 같은 인상을 유지하고 싶었다. 화면이 좁아지면 요소를 억지로 줄이는 대신 자연스럽게 쌓이도록 했다. 제목이 길어져도 어색하게 잘리지 않고, 날짜나 링크가 본문을 밀어내지 않게 했다.

다른 페이지도 같은 결로

Showcase와 Resume도 별개의 템플릿처럼 보이지 않도록 손봤다. 상단 내비게이션, 제목의 크기, 콘텐츠가 시작되는 위치를 맞추고, 각 페이지의 성격은 내용으로 드러나게 했다.

Showcase는 작은 실험들을 차분하게 둘러볼 수 있는 목록으로 바꿨다. Resume는 아직 채워지는 중인 페이지라서, 빈 공간을 억지로 채우기보다 지금의 상태를 그대로 보여주기로 했다.

화면이 바뀌는 순간까지

디자인을 바꾼 뒤에는 완성된 화면만큼이나, 화면이 바뀌는 순간도 신경 쓰게 됐다. 블로그 목록과 글 상세, Showcase, Resume의 로딩 화면을 각각 다시 만들었다. 페이지가 늦게 열릴 때 전혀 다른 회색 박스가 나타나면, 그 짧은 순간에도 사이트가 두 개로 나뉘어 보이기 때문이다.

글 상세의 스켈레톤에는 뒤로 가는 자리, 제목 두 줄, 날짜, 소제목과 본문 리듬을 넣었다. 배치 순서는 실제 글과 같다.

모바일에서는 긴 제목이 화면 가까이까지 차도록 폭을 따로 조정했다. 블로그 목록도 연도 네 묶음과 글 세 개씩을 미리 보여 주어, 로딩이 끝난 뒤 목록의 높이가 갑자기 늘어나는 느낌을 줄였다. Showcase와 Resume 역시 제목과 목록의 시작점이 완성 화면과 겹치도록 맞췄다.

실제 화면을 겹쳐 본 스켈레톤

감으로 맞췄다고 끝내지 않았다. 같은 글의 완성 화면과 로딩 화면을 동일한 뷰포트에서 겹쳐 보고, 제목·날짜·본문이 시작되는 위치를 비교했다. 아래 이미지는 그때의 데스크탑과 모바일 오버레이다. 어두운 바가 스켈레톤이고, 그 아래에 실제 글의 리듬이 겹쳐 있다.

데스크탑

태블릿·모바일에서도 확인했다

태블릿

모바일

맞추는 과정도 남겼다

글 상세의 여백과 뒤로 가는 링크를 줄이던 과정, 그리고 원래 디자인을 되돌린 뒤 다시 비교한 화면도 남겨 두었다. 한 장만 보면 비슷해 보여도, 같은 화면을 여러 번 겹쳐 보면 어떤 수정이 실제 리듬을 회복했는지 더 잘 보인다.

나머지 조정 과정 보기

전체 로딩 상태를 한 번에 보기

페이지 하나만 맞추는 것으로 끝내지 않고, 네 페이지의 로딩 상태를 화면 크기별로 한 장에 모아 비교했다. 작은 화면에서도 제목과 목록의 시작점이 예상한 곳에 머무는지 확인하기 좋았다.

태블릿·모바일 콜라주도 보기

로딩 중이라고 해서 사이트의 첫인상이 잠깐 사라질 필요는 없었다. 바로 쓸 수 있는 고양이 마크는 회색 사각형 대신 먼저 보여 주고, 읽기 보조 도구에는 아직 준비 중이라는 상태도 전달하고, 움직임을 줄이는 설정에서는 펄스까지 멈춘다. 짧은 대기 시간까지 이 사이트의 분위기 안에 남아 있으면 좋겠다.

마지막 6픽셀

마지막에는 고양이 마크가 각 페이지에서 정말 같은 곳에서 시작하는지도 확인했다. 눈으로만 비교하면 충분할 것 같았는데, Home이 Blog·Resume·Showcase보다 6픽셀 아래에 있었다. 그래서 같은 크기의 첫 화면을 반투명하게 겹쳐 봤다. 왼쪽이 조정 전, 오른쪽이 조정 후다.

결국 Home의 상단 여백만 6픽셀 손봤다. 이제 마크가 있는 네 페이지에서는 같은 좌표에서 시작한다. 이런 차이는 설명하지 않으면 대부분 알아채지 못하지만, 페이지를 오갈 때 느껴지는 결에는 분명히 남는다.

드래그할 때도 보이게

화면을 읽는 방식도 조금 다듬었다. 다크 모드에서는 괜찮았지만 라이트 모드에서 글자를 드래그하면 어디까지 선택했는지 거의 보이지 않았다. 밝은 테마에는 차분한 회색 선택 색을 따로 넣고, 다크 테마는 기존의 대비를 유지했다. 긴 글에서 문장을 복사할 때 사소하지만 분명히 달라지는 부분이다.

탭 아이콘도 테마를 따른다

고양이 마크는 어두운 배경에서 흰색 계열로 부드럽게 바뀌고, 브라우저 탭의 파비콘도 같은 마크를 밝고 어두운 테마에 맞춰 바꾼다. 한 화면 안의 색만 맞추는 대신, 마우스로 드래그할 때와 탭을 여러 개 열어둘 때까지 같은 인상을 이어 가고 싶었다.

아직 다 끝난 건 아니지만

이번 작업을 하면서 디자인은 새로운 것을 더하는 일보다, 무엇을 남길지 고르는 일에 가깝다는 생각이 들었다. 모든 페이지가 같은 색과 같은 모양일 필요는 없지만, 한 사이트 안에 있다는 느낌은 공유해야 했다.

아직 다듬을 곳은 남아 있다. 글이 더 쌓이면 목록의 밀도가 어떻게 달라지는지, 실제 기기에서 다크 모드가 어떻게 느껴지는지도 계속 살펴볼 예정이다. 그래도 지금은 누군가에게 “요즘 이런 걸 만들고 있어요”라고 보여주기 좋은 상태가 됐다.