블로그 스타일 규칙

목적: 보기 좋게 꾸미는 것보다 기록을 읽고, 자료를 찾고, 예제를 사용하는 일이 편해야 합니다. 다른 사이트의 외형을 재현하기 위한 문서가 아닙니다.

현재 적용한 기준

항목 기준 관리 위치
색상 바탕·글자·보조·구분선·옅은 면을 공통 변수로 사용. 밝은/어두운 테마 모두 제공 assets/main.scss의 :root, html[data-theme="dark"]
본문 Pretendard Variable 400. 일반 UI 16px, 읽는 본문 데스크톱 18px·모바일 17px, 본문 줄 높이 1.75 --font-sans, --body-size, --prose-size
굵게 제목·표 헤더·문장 안 강조에 700. 메뉴·설명·메타 정보는 400 제목 선택자, strong, th
고정폭 코드·날짜·자동 번호는 Monoplex KR 400. 일반 한글 낱말은 본문 글꼴 --font-mono, .prose-word
페이지 제목 홈·목록·글 제목은 공통 크기·줄 높이 1.3·자간 사용 --title-size, --title-leading, --title-tracking
섹션 제목 섹션·프로젝트·자료 제목·본문 h2는 공통 크기·줄 높이 1.4·자간 사용 --section-size, --section-leading, --section-tracking
항목 제목 목록·경력 제목·본문 h3는 데스크톱 20px·모바일 18px --item-size
보조 정보 메뉴·날짜·번호·분류 라벨 12px, 설명·푸터·표 14px. 날짜·번호만 고정폭, 라벨·설명은 본문 글꼴 --meta-size, --support-size
읽는 폭 Notes·Readlog 본문과 글 헤더·구분선은 최대 760px. 왼쪽 정렬 유지 --reading-width, .post, .prose
Library 폭 설명·문단·제목·미리보기는 최대 760px로 왼쪽 정렬. 분류 페이지의 표·코드는 사용 가능한 폭을 사용 .reference-description, .reference-preview, .reference-card .prose
글 시작 여백 데스크톱 위 패딩 56px·헤더 위 32px, 모바일 32px·24px .post, .post-header
여백과 구분선 데스크톱 콘텐츠 좌우 여백은 55px. 모바일은 화면 폭에 따라 20–38px. 큰 섹션 구분선은 화면 전체 폭 --pad, 각 섹션의 테두리
줄바꿈 전체 word-break: keep-all. 코드는 원래 줄을 유지하고 블록 안에서 가로 스크롤. 긴 URL과 인라인 코드만 넘침 방지 예외 html, pre, .prose a
모바일 글자 760px 이하에서 제목·섹션은 clamp(), 본문은 17px 유지. 1000px 이하에서 메뉴·목록 구조 전환 모바일 타이포그래피 변수와 미디어 쿼리
메뉴 소개 위치 이름과 제목이면 충분할 때 설명 문장을 붙이지 않음 각 페이지, 분류 레이아웃
아이콘 이동·복사·테마 같은 실제 기능을 표현. 장식 마크는 추가하지 않음 헤더와 복사 버튼
코드 구문별 색상, 복사 아이콘, 성공 체크 표시. 어두운 테마에서도 구별 가능해야 함 .highlight, .copy-icon
본문 링크 본문에서 링크임을 식별할 수 있게 밑줄 사용 .prose a
동작 홈·테마·메뉴·복사 버튼의 터치 영역 최소 44×44px. 메뉴·돌아가기 링크 높이 최소 44px. 키보드 초점 표시, 결과 문구 제공 --tap-size, 버튼, 상태 메시지
모션 동작 결과를 설명하는 데 사용. 움직임 줄이기 설정을 존중 prefers-reduced-motion
실험 예외 Headsup 같은 실험은 컴포넌트 내부에서만 스타일을 바꿈. 전역 제목·본문·메뉴를 바꾸지 않음 Shadow DOM

Headsup의 버튼은 참고 동작과 형태를 맞추기 위해 Geist Variable 500을 사용하는 명시적 예외입니다. 터치 높이는 공통 최소 44px을 따릅니다. 예외를 사이트 전체의 기본값으로 확장하지 않습니다.

앞으로 정해 볼 후보 — 아직 전체 적용하지 않음

  1. 콘텐츠로 검증한다. 새 레이아웃은 실제 글 3개, 자료 3개를 넣고 판단한다. 빈 공간을 채우기 위한 슬로건·설명 문장은 만들지 않는다.
  2. 숫자를 늘리기 전에 기존 값을 찾는다. 새 간격·크기·색상이 필요하면 먼저 기존 변수를 재사용한다. 반복되는 값만 공통 변수로 승격한다.
  3. 역할에 따라 폭을 정한다. 읽는 글은 편안한 한 단 폭, 작업 도구와 미리보기는 필요한 폭을 사용한다. 모든 페이지를 억지로 같은 레이아웃에 넣지 않는다.
  4. 작은 화면도 실제로 확인한다. 모바일에서는 제목·메뉴·코드가 가로로 페이지를 밀어내지 않는지 확인한다. 글자를 지나치게 작게 줄이지 않고, 단어 사이 줄바꿈과 모바일 여백을 함께 조절한다.
  5. 유용한 자료와 장난을 함께 허용한다. Library는 실용성만으로 입장 자격을 정하지 않는다. 다만 각 예제는 무엇을 하는지 짧게 설명하고 바로 시험할 수 있어야 한다.

변경할 때 확인