기존 회원
조직 소개보다 최신 Issue와 기사 접근을 우선한다.
D01
01 · Decisions승인된 방향과
승인된 방향과
가역적 기본값.
확정된 제품 방향과 미정 항목을 분리한다. 미정 항목은 작업을 멈추지 않도록 Provisional 기본값을 사용한다.
기사 읽기
Hero와 첫 섹션의 가장 강한 CTA다.
D02
V2 Canonical
기사 URL, SEO, 공유와 전체 원문을 소유한다.
D03
제목 제한 없음
문자 수 제한·강제 ellipsis·고정 높이를 쓰지 않는다.
D04
Responsive 기본값
4 / 8 / 12열 mobile-first grid로 시작하고 실제 콘텐츠 QA 후 조정한다.
Missing image
선택 이미지면 영역 제거, 필수 이미지면 발행 차단. 공개 플레이스홀더는 사용하지 않는다.
V3 content
V2 CMS 원문 + V3 presentation metadata의 분리 모델을 사용한다.
02 · Grid & Space
4 → 8 → 12 columns.
Grid는 장식 기준이 아니라 긴 한국어 콘텐츠가 무너지지 않는 재배치 계약이다.
Mobile · 320–7674 columns
Gutter 16–20 · Gap 16–20 · 단일 열 기사
Tablet · 768–10238 columns
Gutter 24 · Gap 20 · 카드 4/8
Desktop · 1024+12 columns
Max 1200–1320 · Gap 24 · 카드 4/12
4px
space-18px
space-216px
space-424px
space-532px
space-648px
space-764px
space-896px
space-9숫자보다 역할을 사용한다
Inline
4–12Stack
8–32Component
24Section
48–96브라우저 기본 margin 대신 Stack 규칙으로 제목·문단·이미지의 수직 리듬을 통제한다.
03 · Typography원문을 자르지 않는
원문을 자르지 않는
에디토리얼 타입.
제목은 길이를 제한하지 않는다. 타입 크기와 레이아웃이 실제 콘텐츠에 적응해야 한다.
Display XL · Serif · 48–72
일터와 신앙을 잇는 우리의 아주 길고 구체적인 이야기
Heading XL · Sans · 28–36
한국CBMC 회원이 현장에서 경험한 변화와 배움
리드는 기사 본문으로 자연스럽게 이어지는 충분한 줄간격과 최대 720px의 읽기폭을 사용한다.
본문은 모바일에서도 16px 미만으로 내려가지 않는다. 한글은 단어 단위 줄바꿈을 우선하고, 긴 영문 식별자만 안전하게 나눈다. 카드 높이를 맞추기 위해 제목이나 요약을 임의로 자르지 않는다.
04 · Components
Anatomy before styling.
컴포넌트마다 목적, semantic HTML, 데이터, 변형, 상태, 반응형, 접근성 계약을 함께 정의한다.
일터 이야기 · 선택 영문 Kicker
제목의 길이에 제한을 두지 않고 전체 문장을 그대로 보여주는 기사 카드
요약 역시 고정 높이나 자동 말줄임표 없이 콘텐츠에 맞춰 확장한다.
media?kicker?titledek?meta
No-image variant
이미지가 선택 요소이면 빈 박스를 남기지 않고 텍스트 중심 카드로 바꾼다
공개 화면에 이미지 준비 중, 깨진 아이콘, 랜덤 대체 사진을 표시하지 않는다.
kicker?titledek?meta
동작에 맞는 element
이동은 링크, 상태 변경은 버튼. 모든 조작 영역은 최소 44px이다.
버튼만으로 처음부터 끝까지 읽는다
Swipe와 책 모서리는 선택 보조다. 모바일 이전/다음 버튼은 항상 발견 가능해야 한다.
사람과 일터
4 / 12 페이지
4 / 12 페이지
05 · States보이는 상태와
보이는 상태와
의미 상태를 함께.
색상만 바꾸는 것이 아니라 semantic HTML, aria, 문구와 다음 행동을 함께 정의한다.
Default기본 surface와 text
Focus visible3px ring + 3px offset
Currentaria-current + 라벨
Disabled실제 조작 차단 + 이유
Loadinglayout shift를 줄이는 skeleton
Success아이콘·문구·다음 행동
Error재시도 또는 안전한 이동
Reduced motion즉시 전환, 현재 위치 유지
MVP 제외: 검색, 다중 필터, Issue Archive 전용 화면. 그러나 Loading·Empty·Error·Unavailable은 MVP에서도 필수다.
06 · TemplatesV2는 운영,
V2는 운영,
V3는 특집 읽기.
페이지마다 컴포넌트 순서, 필수 데이터, 반응형 geometry와 오류 상태를 계약한다.
최신 Issue → 대표 기사
BrandHeader → IssueMasthead → FeaturedStory → Story Grid → Participation → Footer
Canonical full story
ArticleHeader → Body 720px → Figures/Quotes → Related → CTA
Same content, special theme
Issue identity → Spread/Stack → Buttons → Progress → V2 canonical link