본문으로 건너뛰기

문서

읽기 화면의 문서는 명조 다섯 등급으로 쓰고, 글은 페이퍼 한 장(카드 높이 · 지붕 모서리) 위에 놓입니다.

명조는 다섯 등급에만 쓰고 표 · 라벨 · 버튼 · 메타는 고딕입니다. 콘텐츠와 UI 가 서체로 갈립니다. 명조는 화면 언어가 아니라 콘텐츠 언어를 따릅니다. 문서를 감싼 요소에 lang 이나 data-doc-lang 을 둡니다.

여백 카드(질문 · 제안)는 페이퍼 밖, 바닥 위에 놓습니다. 페이퍼도 카드라서 그 안에 카드를 또 두지 않습니다. 넓은 화면에서는 오른쪽 260 칸, 좁은 화면에서는 페이퍼 아래로 내려갑니다.

쓰는 경우
사양 · 회의록 · 보고서처럼 긴 글을 읽고 편집하는 화면. 마크다운 렌더(W2)도 같은 클래스를 씁니다.
쓰지 않는 경우
버튼 · 라벨 · 배지에 명조를 쓰지 않습니다. 위첨자 각주 대신 문단 뒤 '참고' 줄과 끝의 출처 목록을 씁니다. 왼쪽 세로 강조선 인용 · 한 · 일 글자의 음수 자간과 대문자를 쓰지 않습니다.

import

/* globals.css — 클래스는 @uyoolabs/ui/css 안의 css/carton/brand.css 에 있다 */
@import "@uyoolabs/ui/css";

// 루트 layout — 문서를 그리는 앱만, 콘텐츠 언어의 명조를 import 한다
import "@uyoolabs/ui/fonts/doc-ko";

견본

이 열에서는 좁은 배치(제목 27 · 안쪽 32/28 · 여백 카드 아래)입니다. 넓은 배치는 픽스처 brand-doc 에 있습니다.

3분기 회의 운영 개선안

김서연 · 결제팀 · 2026-10-22 14:30 수정

1회의는 25분으로 시작한다

새 회의의 기본 길이를 30분에서 25분으로 줄인다. 남는 5분은 다음 회의로 옮겨 가는 시간이고, 회의록은 그 안에 채널에 올린다.

녹화한 회의는 AI 요약을 문서 맨 위에 붙이고, 요약의 문장마다 원래 발언으로 가는 링크를 단다.

30분 회의가 늘 35분에 끝났다. 끝나는 시간이 정해지면 안건이 짧아진다.박도윤 · 9월 회고

참고회의 길이를 줄인 다른 팀의 사례는 운영 노트 12호에 있다.

2회의 유형별 목표

표 1. 9월 한 달, 결제팀 회의 61건(출처 1)
유형지금 평균목표회의록 올림
주간 점검34분25분92%
설계 검토52분45분71%
1:128분25분40%
  1. 결제팀 회의 기록, 2026-09-01 – 09-30
  2. 운영 노트 12호 「회의 길이 줄이기」

등급 다섯

v1 의 @utility 와 일반 클래스 두 벌을 일반 클래스 하나로 합쳤습니다.

클래스서체 · 크기쓰는 곳v1
uyoo-doc-title제목 명조 700 · 34/1.25(좁은 폭 27)문서 제목. 문서 하나에 하나(읽기 화면에서 h1)doc-title
uyoo-doc-section + uyoo-doc-num제목 명조 700 · 19/1.4절 · 최상위 항목doc-section
uyoo-doc-statement본문 명조 400 · 17 / 한 1.75 · 일 1.8 · 영 1.65문장doc-statement
uyoo-doc-note본문 명조 · 15.5/1.55여백 카드의 질문 · 인사 · 한 줄 요약doc-note
uyoo-doc-quote + uyoo-doc-cite본문 명조 · 14/1.6 · 파인 면 · 바깥에 건 따옴표다른 사람의 말doc-quote
콘텐츠 언어명조서체 진입점
한국어마루 부리 400 · 600(본문) · 나눔명조 700(제목)@uyoolabs/ui/fonts/doc-ko
日本語BIZ UDP명조(본문) · Noto Serif JP 700(제목)@uyoolabs/ui/fonts/doc-ja
EnglishNoto Serif(본문) · Noto Serif Display 700(제목)@uyoolabs/ui/fonts/doc-en

마크업

페이퍼 · 등급 · 고딕 칸(표 · 참고 · 출처) · 여백 카드 · 도착 glow

<div className="uyoo-doc">                     {/* 좁으면 data-layout="stack" 으로 여백 카드를 아래로 */}
  <article className="uyoo-paper" lang="ko">     {/* 명조는 콘텐츠 언어: lang 또는 data-doc-lang="ko|ja|en" */}
    <div className="uyoo-paper-measure">         {/* 본문 폭 680(영어 612) */}
      <h1 className="uyoo-doc-title">3분기 회의 운영 개선안</h1>
      <section className="uyoo-doc-block">
        <h2 className="uyoo-doc-section"><span className="uyoo-doc-num">1</span>회의는 25분으로 시작한다</h2>
        <p className="uyoo-doc-statement">…</p>
      </section>
      <blockquote className="uyoo-doc-quote">…<cite className="uyoo-doc-cite">박도윤 · 9월 회고</cite></blockquote>
      <p className="uyoo-doc-ref"><b>참고</b><span>…</span></p>
      <table className="uyoo-doc-table">…<td className="num">34분</td>…</table>
      <ol className="uyoo-doc-sources">…</ol>
    </div>
  </article>
  <aside className="uyoo-margin" aria-label="질문">  {/* 여백 카드는 페이퍼 밖(카드 안에 카드를 두지 않는다) */}
    <div className="uyoo-margin-card">
      <p className="uyoo-margin-card-kicker">질문 · 적용 범위</p>
      <p className="uyoo-doc-note">이 기준을 다른 팀 채널에도 적용합니까?</p>
      <div className="uyoo-margin-card-actions">…</div>
    </div>
  </aside>
</div>

// 문서 안 링크로 이동했을 때: 대상 문단에 포커스를 주고 glow 를 한 번 켠다
target.tabIndex = -1;
target.focus();
target.classList.add("uyoo-doc-glow");

키보드

문서는 article, 제목이 그 안의 h1(W1 결정 #40), 절 제목 h2, 여백 카드는 aside(aria-label), 출처는 ol 입니다.

키동작
Tab문서 안 링크와 여백 카드의 버튼을 문서 순서대로 지난다. 여백 카드의 버튼은 해당 문단 바로 뒤에 온다
Enter (문서 안 링크)대상 문단으로 이동해 포커스를 주고 glow 를 한 번 켠다(1.6초)

v1 의 .paper · .margin-card · .doc-* · --doc-* · --paper 와 Tailwind 유틸리티(bg-paper · rounded-paper · shadow-paper)가 어디로 갔는지는 docs/migration/v2-brand.md 에 있습니다.