팔레트 테스트 — 모든 요소가 모이는 곳

이 글은 별하늘 아카이브의 모든 본문 요소를 한자리에 모아 두기 위한 테스트 페이지다. 라이트 모드의 따뜻한 베이지 종이 위에서, 그리고 다크 모드의 미드나잇 별하늘 위에서 — 두 풍경 모두에서 글이 어떻게 호흡하는지 살필 수 있다. 텍스트는 길어질수록 정직하다. 짧은 한 줄로는 드러나지 않는 자간, 행간, 양끝 정렬의 결이 긴 단락 안에서 비로소 보이기 시작한다.

헤딩과 본문의 위계

문서의 뼈대는 헤딩이 만든다. 같은 굵기, 같은 크기의 글자가 늘어선 페이지는 정보의 우열이 사라진 평면이다. 다음의 세 단계는 글의 골격이 어떻게 짜이는지 보여 준다.

두 번째 단계의 제목

이 단계의 헤딩은 이탤릭으로 흘러간다. 명조체의 세로획이 비스듬히 기울며 본문 사이에 작은 호흡을 만든다.

가장 안쪽의 제목

세 번째 단계는 단정하게 자리잡는다. 너무 무겁지 않게, 너무 가볍지도 않게.

강조의 여러 방식

본문 안에는 다양한 강조가 섞여 있다. 굵은 글씨로 핵심을 짚고, 이탤릭으로 결을 살리고, 취소선으로 거두어들이고, 밑줄 친 형광펜처럼 mark 태그로 단어를 떠올리게 한다. 이 모두가 한 단락 안에서 부딪히지 않고 흘러갈 수 있어야 한다.

링크는 또 다른 강조다. 별하늘 아카이브의 홈으로 돌아가거나, 외부의 어떤 페이지로 빠져나갈 수도 있다. 링크 위에 커서를 올리면 밑줄이 좌에서 우로 자라난다.

키보드 단축키는 다른 폰트의 옷을 입는다. 저장하려면 Ctrl + S, 검색은 Cmd + K.

인용

사소한 것은 모두 사라지고 중요한 것만 남는다. 이 한 줄은 이 블로그의 디스크립션이기도 하다. 인용구는 본문에서 한 발 물러서서, 다른 누군가의 목소리를 잠시 빌려 온 자리다. 좌측의 색 띠가 그 경계를 표시한다.

두 번째 단락의 인용은 이어지는 호흡을 보여 준다. 인용은 길어질 수 있고, 그 안에서도 한 문장 한 문장의 무게가 달라질 수 있다.

목록

순서가 중요하지 않은 항목은 작은 가로획이 가리킨다.

• 첫 번째 항목
• 두 번째 항목, 약간의 부연 설명이 따라붙을 수도 있다
• 세 번째 항목
  • 들여쓰기된 하위 항목
  • 또 하나의 하위 항목

순서가 중요할 땐 숫자가 든다.

1. 어떤 일은 먼저
2. 다음 일은 그 다음
3. 중첩된 순서는 알파벳으로 이어진다
   1. 두 번째 단계는 a, b, c…
   2. 또 하나의 항목
      1. 세 번째 단계는 로마 숫자 소문자로
      2. i, ii, iii…

코드

본문 사이에 작은 inline code가 끼어들 수 있다. 변수 이름이나 함수 이름, 짧은 명령어를 가리킬 때 쓴다. 인라인 코드는 본문보다 살짝 작고, 옅은 색 박스 안에 자리잡는다.

긴 코드는 별도의 블록으로 분리된다. 블록 좌상단에는 ●●● 점이 찍혀 작은 창처럼 보인다.

// 별하늘 아카이브의 팔레트 토큰
const palette = {
  light: {
    background: "#ece5dc",
    foreground: "#2d342d",
    accent: "#455f17", // 누그러진 올리브
    point: "#6e1d28", // 누그러진 버건디
  },
  dark: {
    background: "#08111c", // 미드나잇 틸
    foreground: "#c5d3dc", // cool light blue-gray
    accent: "#5fa3b8", // 청록 별빛
    point: "#e8c184", // 올드 별빛
  },
} as const;

function pickPoint(mode: "light" | "dark"): string {
  return palette[mode].point;
}

# 개발 서버 실행
npm run dev

# 프로덕션 빌드
npm run build

# 배포
npm run deploy

구분

긴 글은 가끔 호흡을 끊어야 한다. 구분선은 단순한 가로획이 아니라, 가운데에 작은 § 표시가 떠 있다.

---

쉬어 가는 자리. 다음 절로 넘어가기 전, 마지막으로 가장 정보 밀도가 높은 요소 — 테이블을 둔다.

테이블

토큰	라이트	다크	용도
background	#ece5dc	#08111c	페이지 기본 배경
background-subtle	#e4dccf	#0f1a2a	카드·코드블록
foreground	#2d342d	#c5d3dc	본문
foreground-strong	#0f2509	#e8f0f5	제목·강조
accent	#455f17	#5fa3b8	카테고리·TOC·active
point	#6e1d28	#e8c184	링크·mark·인용구
border	rgba(.., 0.12)	rgba(.., 0.10)	미세 구분선

홀수 행과 짝수 행의 배경이 다르고, 행 위에 마우스를 올리면 옅은 포인트 색이 깔린다. 가로 스크롤이 필요하면 자연스럽게 떨어지도록 되어 있다.

이미지

이미지는 본문 흐름에 끼어들 때 가운데 정렬로 떨어진다. 마우스를 올리면 살짝 떠오른다.

캡션이 필요한 이미지는 <figure> 안에 묶여 figcaption과 함께 나타난다.

마무리

여기까지 내려왔다면 한 글 안에서 등장할 수 있는 거의 모든 요소를 한 번씩 마주친 셈이다. 이 페이지의 목적은 미려한 콘텐츠가 아니라 검증이다 — 두 모드 사이에서 글이 자연스럽게 호흡하는지, 강조가 강조답게 작동하는지, 정보의 위계가 무너지지 않고 서 있는지.

문제가 보이면 토큰을 손볼 차례다. 토큰 하나의 변화가 페이지 전체로 퍼져 나가는 것을 — 이 페이지가 가장 정직하게 보여 줄 것이다.