이 사이트 EP2 — work를 지우고 4대 축을 세운 하루

카테고리는 콘텐츠 개수가 아니라 사이트의 주장이어야 한다

원래 홈 화면은 work 카테고리별로 사업이 몇 개씩 있는지 세어서, 개수가 0보다 큰 카테고리만 화면에 보여주는 구조였다. 코드로 보면 이렇다.

당장은 문제없어 보이는 로직이다. 하지만 이 방식은 사이트의 첫 화면 구성을 데이터베이스에 등록된 사업 개수에 종속시킨다. 사업을 하나 추가하거나 카테고리를 바꾸면 홈 화면의 항목 수와 순서가 그때그때 달라진다. 그런데 홈에서 정말 보여주고 싶었던 건 투자와 글쓰기처럼 사업 데이터베이스에 아예 속하지 않는 축이었다. work 카운트 로직으로는 이 두 가지를 넣을 방법이 없었다.

그래서 카운트 기반 렌더링을 걷어내고 pillars라는 고정 배열을 만들었다. 홈은 이제 이렇게 그 배열을 그대로 순회한다.

카운트를 제거하니 코드가 짧아진 것보다 더 중요한 변화가 있었다. 홈 화면의 순서와 구성이 이제는 데이터가 아니라 내가 정한 우선순위를 그대로 반영한다. 투자, 프로덕트·개발, 커머스·브랜드, 퍼스널·이야기라는 4대 축은 사업이 몇 개 등록됐는지와 무관하게 항상 같은 자리에 같은 순서로 뜬다. 데이터가 늘어도 홈의 구조는 흔들리지 않는다.

async function getWorkCounts() {
  try {
    const all = await listPublicBusinesses();
    return workCategories.map((category) => ({
      category,
      count: all.filter((item) => item.category === category).length,
    })).filter((group) => group.count > 0);
  } catch {
    return workCategories.map((category) => ({ category, count: 0 }));
  }
}

{pillars.map((pillar, index) => (
  <Link
    className="story-row"
    href={pillar.href}
    key={pillar.key}
    {...(pillar.external ? { target: "_blank", rel: "noreferrer" } : {})}
  >
    <span className="story-number">{String(index + 1).padStart(2, "0")}</span>
    <div className="story-name">
      <small>{pillar.english}</small>
      <h2>{pillar.label}</h2>
    </div>
    <span className="story-arrow" aria-hidden="true">→</span>

소프트웨어와 창작을 하나로 묶은 건 구분이 무의미해졌기 때문이다

기존 work 카테고리는 소프트웨어·AI와 창작·실험을 따로 나눴다. 이번에 이 둘을 프로덕트·개발이라는 하나의 라벨로 합쳤다. 관리자 화면의 옵션 목록도 그만큼 줄었다.

두 카테고리를 나눌 때는 아마 소프트웨어와 창작 작업의 성격이 다르다고 봤을 텐데, 실제로 등록해보니 그 경계가 실무에서 계속 애매했던 것 같다. 카테고리가 분류를 위한 분류가 되면 관리자 화면에 옵션을 고르는 순간마다 판단 비용만 늘어난다. 반대로 커머스·브랜드는 성격이 명확히 다르니 그대로 남겼다. 통합은 단순화를 위한 단순화가 아니라, 실제로 구분이 작동하지 않는 축을 없앤 결과다.

const workCategoryOptions: { value: BusinessInput["category"]; label: string }[] = [
  { value: "commerce", label: "커머스 · 브랜드" },
  { value: "product", label: "프로덕트 · 개발" },
];

사업 상세 페이지 타이포는 숫자를 강조하던 방식에서 정보를 읽기 쉽게 만드는 쪽으로 바꿨다

사업 상세 페이지의 분야, 현재 단계 같은 메타 정보는 원래 34px에서 54px까지 커지는 큰 숫자 타이포로 표시됐다. dt는 10px짜리 작은 라벨, dd는 거대한 값이라는 구조였다. 이번에 이걸 라벨-값이 한 줄에 나란히 놓이는 목록 형태로 바꿨다.

메타 정보는 숫자 지표가 아니라 텍스트 라벨이다. 분야가 뭔지, 현재 단계가 뭔지는 시각적으로 강조할 대상이 아니라 빠르게 읽고 지나갈 정보다. 큰 폰트로 존재감을 키우는 대신 라벨과 값을 같은 줄에 두고 크기를 줄이니, 페이지를 훑을 때 필요한 정보가 오히려 더 잘 들어온다.

같은 날 아니모라는 이름을 ANIMAUX HÉRITIERS로 바꾸고 AI 디자인 에이전시를 새 사업으로 등록했다. 이 두 가지는 별도의 이야기라기보다는, 위에서 다룬 카테고리 재편과 타이포 정리가 실제로 새 데이터를 넣었을 때 잘 작동하는지 확인하는 과정에 가까웠다. 헤더의 카테고리 노출 방식을 손본 것도 같은 맥락의 자잘한 후속 작업이었다.

.business-detail-hero dt {
  flex: none;
  color: #8fa4af;
  font: 700 10px/1 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.business-detail-hero dd {
  margin: 0;
  text-align: right;
  font-size: 20px;
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -.01em;
}