이 사이트 EP4 — 홈 화면에서 글이 있던 자리를 바꾼 이유

자기소개보다 글을 먼저 보여주기로 한 이유

오늘 가장 신경 쓴 부분은 홈 화면의 순서다. 이전에는 최근 글 목록이 화면 아래쪽, 내가 하는 작업 분야를 소개하는 섹션보다 뒤에 있었다. 오늘 그 둘의 순서를 바꿔서 글 목록을 위로 올렸다.

이유는 단순하다. 누군가 이 사이트에 처음 들어왔을 때 궁금한 건 "이 사람이 뭘 하는 사람인가"보다 "이 사람이 실제로 뭘 써왔나"일 가능성이 크다고 봤다. 자기소개 문구는 내가 나를 설명하는 말이고, 글 목록은 내가 실제로 만들어낸 결과물이다. 방문자 입장에서는 후자가 더 믿을 만한 정보다. 옷장을 정리할 때 계절별로만 나눠두면 당장 뭘 입을지 찾기 어려운 것처럼, 화면 구성도 내가 편한 순서가 아니라 보는 사람이 먼저 확인하고 싶은 순서로 다시 짜야 했다.

같은 맥락에서 목록에 보여주는 글 개수도 세 개에서 다섯 개로 늘렸다. 최근 활동이 있다는 걸 보여주려면 세 개는 조금 부족하다고 느꼈다.

임시 데이터를 남겨두는 게 오히려 더 위험했다

이전 코드에는 데이터베이스에서 글을 못 불러올 때를 대비해 미리 파일 안에 박아둔 글 목록을 대신 보여주는 장치가 있었다. 서비스가 완전히 멈추는 것보다는 낫다는 생각에 넣어둔 안전장치였다.

그런데 오늘 다시 보니 이 장치가 오히려 문제였다. 실제 글 목록이 비어 있는 상황과 데이터베이스 연결이 끊긴 상황을 구분하지 못하고 둘 다 같은 임시 목록을 보여주고 있었기 때문이다. 즉 진짜 문제가 생겨도 화면은 멀쩡해 보여서, 오히려 문제를 놓치기 쉬운 구조였다.

이제는 데이터를 불러오는 데 실패하면 그냥 빈 목록을 돌려준다. 화면이 비어 보이는 게 답답할 수는 있지만, 적어도 실제 상태를 숨기지는 않는다. 문제가 있으면 문제가 있는 것처럼 보이는 게, 문제를 감추고 있는 것보다 낫다는 판단이다.

async function getLatestPosts() {
  try {
    const published = await listPublishedPosts({ limit: 5 });
    return published.map((post) => ({
      slug: post.slug,
      title: post.title,
      summary: post.excerpt ?? "",
      date: formatPublishedDate(post.publishedAt),
      category: categoryLabels[post.category],
    }));
  } catch {
    return [];
  }
}

완성 안 된 글은 링크가 없어도 주소로 새어나갈 수 있다

이번에 함께 손본 게 임시저장 상태 글의 노출이다. 사이트 안에서는 완성된 글만 목록에 걸어두지만, 임시저장 글도 결국 어딘가에 저장은 되어 있는 상태라 주소를 직접 입력하면 열릴 수 있는 여지가 있었다. 목록에 안 보인다고 해서 완전히 막힌 게 아니라는 뜻이다.

오늘은 글 상세 화면과 주제별 목록 화면 양쪽에서, 공개로 표시되지 않은 글은 아예 접근 자체가 안 되도록 처리했다. 목록에서 숨기는 것과 주소로도 못 들어오게 막는 것은 다른 문제라는 걸 다시 확인한 셈이다. 초안은 초안대로 편하게 써두고 싶은데, 그게 공개 상태와 뒤섞이면 나중에 어느 게 발행됐는지조차 헷갈릴 수 있어서 이 구분은 계속 신경 써야 하는 부분이다.

그 외에 상단 메뉴에 글 목록으로 바로 가는 링크를 하나 추가했고, 화면에 실제로 렌더링된 결과를 확인하는 테스트도 한 줄 늘렸다. 코드가 문법적으로 맞는지보다 사람이 실제로 보는 화면이 의도한 대로 나오는지를 확인하는 쪽에 더 가깝다.

무엇을 먼저 보여줄지, 무엇을 완전히 숨길지는 코드를 짜는 순서가 아니라 화면을 보는 사람의 순서로 정해야 한다는 게 오늘 다시 확인한 원칙이다.