운영해보니 읽는 흐름이 더 중요했다

1편에서 브라우저에서 글을 쓰고 바로 반영되는 흐름은 어느 정도 정리했다.
그런데 며칠만 실제로 써보니 이번엔 읽는 쪽이 걸렸다.
블로그는 쓰는 도구이기도 하지만, 결국은 읽는 서비스이기도 했다.

출간 흐름이 돌아가기 시작하니 이번엔 읽는 쪽이 보였다.

접근성은 나중에 붙이면 꼭 삐걱거린다

솔직히 말하면, 나도 처음부터 접근성을 잘 챙긴 편은 아니었다.
일단 보이는 화면부터 만들고 싶었다.

그런데 블로그는 결국 콘텐츠 서비스다.
멋진 UI보다 먼저, 사용자가 지금 어디에 있고 무엇이 바뀌었는지 알아야 한다.

그래서 가장 먼저 손본 게 skip link였다.

<a href="#main-content" class="skip-link">본문으로 건너뛰기</a>

이건 전혀 화려하지 않다.
그래도 키보드 사용자 입장에서는 반복되는 헤더와 메뉴를 매번 다시 거치지 않고 본문으로 바로 들어갈 수 있다.

본문 자체도 포커스를 받을 수 있게 열어뒀다.

<main id="main-content" tabindex="-1">

링크로 이동은 됐는데 실제 포커스가 어딨는지 애매하면 이것도 반쪽짜리다.
이런 부분이 정리돼야 읽는 흐름도 덜 끊긴다.

네비게이션에는 aria-current도 넣었다.

aria-current={isActive(item.link) ? 'page' : undefined}

현재 위치를 보조기기에게 명확하게 알려주기 위해서다.
이건 디자인보다 상태 전달에 더 가까운 문제였다.

검색 쪽에는 aria-live="polite"를 붙였다.

<div aria-live="polite">...</div>

검색 결과 수가 바뀌어도 화면만 조용히 바뀌면 스크린 리더 입장에서는 맥락이 끊긴다.
그래서 이 부분도 같이 보완했다.

결국 접근성은 체크리스트보다,
이 UI에서 지금 무슨 일이 일어났는지 계속 설명해주는 일에 더 가까웠다.

마지막은 페이지 전환이었다.

문서를 읽는 서비스에서는 전환이 너무 딱 끊기면 생각보다 거슬린다.
읽다가 다른 글로 넘어갈 때, 사용자는 페이지를 바꾼다기보다 같은 공간 안에서 이동한다고 느끼는 편이 자연스럽다.

Astro를 쓰고 있었기 때문에 이 부분은 비교적 간단하게 넣을 수 있었다.

import { ViewTransitions } from 'astro:transitions';

<ViewTransitions />

이 기능이 좋았던 이유는 멋져 보여서가 아니었다.
페이지가 바뀌어도 같은 사이트 안에서 계속 읽고 있다는 감각을 만들기 쉬웠기 때문이다.

전환은 Lighthouse 점수처럼 바로 드러나는 항목은 아니다.
대신 글 목록에서 본문으로, 다시 다른 글로 이어질 때 받는 인상은 확실히 달라졌다.

이런 건 전부 눈에 확 들어오는 기능은 아니다.
그런데 블로그처럼 오래 읽는 서비스에서는 이런 층이 결국 완성도를 만든다.

이번 개선은 1편처럼 출간 구조를 다시 짜는 작업은 아니었다.
운영을 시작한 뒤에야 보이기 시작한 읽기 쪽 문제를 하나씩 줄여가는 작업에 가까웠다.

화려한 변화는 아니다.
그래도 블로그를 실제로 오래 읽게 만드는 건 이런 층이라고 생각한다.

결국 블로그는 글만 올리는 그릇이 아니다.
읽는 흐름을 얼마나 덜 끊기게 만들 수 있느냐도 기능이었다.