블로그 디자인 철학과 설계 기조

디자인은 블로그를 만들면서 가장 재미있었던 부분입니다. 디자인 과정에서 작업 영역 곳곳에 주석이나 댓글 형태로 생각을 남겼고, 테마가 완성된 시점에서 설계 기조와 판단 근거 위주로 정리했습니다.

디자인 철학

작은 규모의 성공

디자인에서 실수하기 쉬운 부분 중 하나는 디자인은 멋지고 새로워야 한다는 관념입니다. 남의 작품을 기계처럼 따라 찍어내기 싫은 마음은 당연히 누구나 있지만, 새로움은 그 자체로 양날의 검입니다. 익숙함의 힘은 무시할 수 없습니다. 진보적인 디자인은 멋지지만 학습 비용이 문제가 됩니다. 언어의 사회성과 같은 성질이 디자인에서도 있기 때문입니다. 관습을 벗어나는 건 일탈이고, 일탈은 그 자체로 나쁜 것은 아니지만 정당화되기까지의 난이도가 있습니다.

그런데 그러면서도 관습이란 이미 만들어진 아이디어입니다. 남의 아이디어에만 의존할 거라면 블로그를 새로 디자인할 것이 아니라 잘 써오던 테마를 계속 쓰고 남는 시간을 다른 곳에 쓰는 것이 더 낫습니다. 블로그를 만드는 것은 이전에 없던 개념을 만들어 쓰기 위함이기도 합니다.

이 테마는 두 가지 상충되는 맥락을 고려했습니다. 큰 틀은 널리 알려진 규범을 따르되 그 위에 구조적 창의성을 살짝 더하는 것을 목표로 했습니다. 화려한 연출이나 강조 효과는 생각만으로 접어두고 널리 알려진 문법을 먼저 따르면서도, 마냥 소심한 테마로 머무르지 않도록 주도적 변경점을 배치했습니다.

웹과 최소주의

AI 시대에서 사람은 점점 웹을 읽지 않습니다. 브라우저 자체적으로 내장된 AI 기반 요약 도구를 호출하거나 URL을 복사해 핵심을 요약해달라고 부탁하는 경우, 댓글로 글 작성자에게 이의를 제기하기 전에 옆에 놓인 AI에게 어떻게 생각하냐고 먼저 묻는 경우가 눈에 띄게 있습니다. 사용자의 태도와 웹의 의도가 서로 충돌하는 상황에서 사용자는 문제를 다르게 풀 도구가 있고 웹은 그걸 막을 능력이 없습니다. 이 맥락에서 체류율을 높이고자 하는 시도는 길거리 전단지 정도로 효용이 낮아지고 있습니다.

동시에 제 개인적으로도 웹은 피곤하다는 인상이 있습니다. 웹은 LLM 기반 서비스가 대중화되기 전부터 광고와 바이럴성 컨텐츠가 난무하는 공간이어왔고, 그렇게 극단적으로 보지 않더라도 “이건 읽어볼만한 글일까”, “뭘 읽어봐야 할까” 등 판단을 지속 요구하는 환경이 체류를 어렵게 만듭니다. 글 기고 매체로서 이 문제를 근본적으로 타파할 순 없지만, 사용자를 귀찮게 하는 문제는 고민해봐야 합니다.

두 맥락은 정보의 축약, 은닉, 소거를 고민하게 한 근거입니다. 물론, 최소주의는 자칫하면 그냥 빈 도화지가 되어버릴 수 있으므로 기능을 열외시키기 전에 열외할 이유를 다시 한 번 재고했습니다. 이곳에서 불편함을 느끼지는 않았으면 하는 바람에 따라, 정보는 제시하되 필요 이상으로 어필하지 않는다는 기조를 세웠습니다.

철학의 구현물

네비게이션 프레임

이 테마의 프레임은 그림, 사진 분야의 트릭을 웹에 적용한 결과입니다. 두 분야는 사람의 시선을 주제로 유도하기 위한 전략으로 색상대비, 채도대비, 프레임 효과 등을 사용합니다. 보통 그림의 전략은 그림에서, 사진의 전략은 사진에서 소비되지만 사실 둘은 서로 바꿔 써도 된다, 또 바꿔 써도 되는 만큼 웹에도 쓸 수 있다가 제 생각입니다. 그렇게 만들어진 프레임에 오늘날 블로그 테마가 제공하는 다크&라이트 모드 제어, RSS, 언어 변경 등의 기초기능을 버튼으로 통합했고, 모서리를 라운딩으로 보완해 네비게이션 영역을 만들었습니다.

콘텐츠 표시 영역을 물리적으로 줄이는 원리인 만큼 답답한 느낌이 들 수 있다는 점을 인지해, 존재감은 있되 눈에 띄지 않는 것을 목표로 우선 16px의 굵기를 주었습니다. 모바일에서는 아쉽지만 영역침범 비용이 너무 커서 일반적인 네비게이션 바로 동작하도록 만들었습니다.

포스트, 더 보기 카드

더 보기 버튼은 페이지네이션의 대안입니다. 페이지네이션은 으레 인쇄물, 문서와 같이 콘텐츠 묶음을 주소화하고, 각 주소마다 번호를 부여합니다. 이런 행정적 접근의 장점은 동작이 안정적이라는 것이고, 단점은 사용 경험이 딱딱하게 느껴질 수 있다는 겁니다. 더 보기 버튼은 후자를 개선하기 위한 접근입니다.

이는 청크 단위로 데이터를 나눈다는 점에서는 페이지네이션과 같지만, 핀터레스트 등 일부 SNS와 같이 인지 부담이 낮고 탐색 경험이 연속적인 장점이 있습니다. 특히 경험 연속성의 경우 그 속성이 퇴색되지 않도록 일반 포스트카드와 디자인을 통일했습니다. 사용자가 더 보기 버튼 위로 마우스 커서를 호버링하면 하단에서 글 미리보기가 올라오고, 누르면 페이지가 열립니다.

글 메타데이터

개인적으로 좋아하는 변경점입니다. 사용자는 이미 글을 선택해서 읽으러 들어왔는데, 거기서 메타데이터를 또 보여주는 것은 어색하다는 생각에서 출발해 만들어졌습니다. 메타데이터 자체는 글 신뢰도와 SEO의 관점에서 명시되어야 하지만 그 위치가 글 상단일 이유는 크게 없다는 생각입니다.

더불어 읽는데 5분 걸리는 글, 읽는데 30분 걸리는 글, 컴퓨터공학이나 에세이, 그림이라는 카테고리에 속하는 글…과 같이 성격을 규정하는 순간 본질이 멀어지게 된다는 약간의 철학도 반영했습니다. 본문보다 틀을 먼저 접함으로써 짧은 글은 가벼운 글로, 어떤 카테고리의 글은 그 카테고리다운 글로 읽히게 되고, 작성자를 포함해 글을 먼저 재단하게 되는 경우를 미연에 방지합니다.

두 관점을 반영한 결과가 글이 끝나는 지점으로 옮겨진 메타정보 란입니다. 독자는 그런 정보는 장막으로 가려진 상태에서 글을 읽게 되고, 글이 마무리되었을 때 추가 정보를 확인하게 됩니다. 일종의 엔딩크레딧이기도 판권지이기도 합니다.

강조 색상

이 테마는 무채색으로 차분한 분위기를 조성하는 것을 기본으로 하지만 사용자의 눈길을 끄는 신호이자 상호작용한 웹요소를 어필하기 위한 목적으로 딱 한 가지 유채색을 배치합니다. TOC의 활성화 헤더, 일부 버튼, 하이퍼링크 등에 적용됩니다. 테마 분위기가 너무 지루하게 느껴지지 않도록 방지하는 역할도 합니다.

아카이브

만들다 만 다른 테마

미실현된 아이디어

마치며

이제 Google Stitch, Figma Make, Framer, Webflow AI…등 다양한 디자인 도구가 있지만, 인공지능은 결국 다수 예시의 통계적 중앙값을 목표로 하는 도구입니다. 프롬프트를 더 정교하게 구성해볼 수는 있지만 역설적이게도 언어가 병목이 됩니다. 그런 환경을 고려하면 아직은 디자인을 위임하기보다는 대중적 평균 그 어딘가보다 아직은 개인이 앞서있을 필요가 있다는 생각이 들었고, 실제로 이 테마는 그 지점을 지향하며 만들어졌습니다. 제 기준으로는 결과가 나쁘지 않고 우선 이 방향이 맞겠다는 생각이 듭니다.