yunchan/designpaca
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

feat(skill): 자율 검증 폐쇄 루프 내재화 — 0.6.0
Some checks failed
ci / build (push) Failing after 5s
Details

Browse source 
- 핵심 규칙 6: 완료의 정의는 게이트 통과. 사용자를 QA로 쓰지 않는다
- 5단계 기계 검사 4번째: design-gate 실행 의무화
- references/audit-gate.md: 사고-검사 매핑, SEO/meta 체크리스트, OS/브라우저 특성, 하니스 규칙
- tools/design-gate.mjs: 범용 게이트(메타/SEO·대비·수축·리듬·트랙·스케일×폭 + 옵션 L0/L3/L4, checks 깊은 병합)
- 리듬·트랙 불변식: 숫자 라벨 등폭·빈 셀 트랙 균일·등간격 — 시간표 자동배치 결함 재현 픽스처 검출, 앱 15뷰 통과(오탐 0)

feat(site): 관리 앱 2종 프로덕션 콘솔(v6→v18)

- 가온 학적부 9뷰·두레 수강신청 6뷰: shadcn 문법, Pretendard/Noto Serif/IBM Plex 폰트 전략, 볼드 금지(400/500/600), WCAG AA 대비 전면 교정, 한글 keep-all 조판
- LMS 필수 요소(알림 센터·공지·진도·평가 유형·출결 사유·학점 경고), 12명 기준 데이터 정합, SEO 구조(h1 유일·OG/twitter·og.png)
- 시간표 자동배치 결함 수리(명시적 격자 좌표)
- QA 게이트: L0 stylelint/html-validate · L1 단위 30 · L2 감사 61+불변식 · L3 시각회귀 30화면 · L4 WebKit · L5 키보드 탐색 — npm run verify 실패 시 배포 금지 체인
This commit is contained in:
Yun Chan 2026-08-22 21:22:05 +09:00
parent 78ddc8b61a
commit 72337b7ee0
226 changed files with 18212 additions and 380 deletions
Download patch file Download diff file Expand all files Collapse all files

289
apps/site/public/work/font-foundry/index.html Normal file
View file

@ -0,0 +1,289 @@
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>한성활자연구소 · 본문용 한글 활자</title>
<meta
name="description"
content="획의 장력과 여백의 비례. 본문 조판을 위해 설계한 한글 활자 두 종과 조판 시험대. 1000 UPM, 측정 가능한 자간과 행간."
/>
<meta property="og:title" content="한성활자연구소 · 본문용 한글 활자" />
<meta
property="og:description"
content="본문 조판을 위해 설계한 한글 활자와 조판 시험대."
/>
<meta property="og:type" content="website" />
<meta name="theme-color" content="#F5F1E8" />
<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/webfontworld/naver/MaruBuri.css"
/>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css"
/>
<link rel="stylesheet" href="./styles/main.css?v=2" />
<link
rel="icon"
href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' fill='%23F5F1E8'/%3E%3Crect x='8' y='8' width='16' height='16' fill='%23A63D2F'/%3E%3C/svg%3E"
/>
</head>
<body>
<a class="skip" href="#main">본문으로 건너뛰기</a>
<header class="site-head">
<div class="wrap head-inner">
<a class="wordmark" href="#main">한성활자연구소</a>
<nav class="nav" aria-label="섹션">
<a href="#typefaces">활자</a>
<a href="#bench">시험대</a>
<a href="#case">활자 케이스</a>
<a href="#order">구입</a>
</nav>
</div>
</header>
<main id="main">
<!--
스페시멘 히어로 — 파운드리의 첫 화면은 설명이 아니라 글자다.
'한' 한 글자를 페이지에서 가장 크게, 인주각과 함께.
-->
<section class="hero" aria-labelledby="hero-h">
<div class="wrap">
<p class="hero-kicker reveal">본문용 한글 활자 · 1000 UPM · 2018년 창립</p>
<h1 id="hero-h" class="hero-glyph reveal" style="--delay: 60ms" lang="ko" aria-label="한">한</h1>
<div class="hero-side">
<p class="hero-statement">
이 글자가 어디에 쓰이는지는 이 페이지 전체가 증명합니다. 우리는
제목용 활자를 만들지 않습니다 — 오래 읽어야 하는 본문의 활자만
만듭니다. 획의 장력, 자간의 균형, 행간의 숨을 그 단위(UPM)로
측정합니다.
</p>
<dl class="hero-facts reveal" style="--delay: 120ms">
<div>
<dt>서체</dt>
<dd>한성본문 · 한성제목</dd>
</div>
<div>
<dt>글자 수</dt>
<dd>11,172자 완성</dd>
</div>
<div>
<dt>단위</dt>
<dd>1000 UPM · 가변 웨이트 3종</dd>
</div>
</dl>
</div>
</div>
</section>
<!--
활자 두 종 — 스페시멘은 실제 문장으로. Lorem ipsum 은 활자시험의 반대다.
-->
<section id="typefaces" class="section" aria-labelledby="typefaces-h">
<div class="wrap">
<h2 id="typefaces-h">활자 두 종</h2>
<article class="typeface reveal">
<header class="typeface-head">
<h3>한성본문</h3>
<p class="muted">본문용 · 웨이트 400 · 16px에서 행간 1.8</p>
</header>
<p class="specimen" style="font-family: 'MaruBuri', serif">
아침 안개가 걷히기 전에 도랑물 소리가 먼저 들렸다. 글자는 종이 위에서
소리를 내지 않지만, 잘 짜인 활자는 소리 내어 읽게 만든다. 획이 닿는
각도와 글자가 서로 미는 힘을 천 번쯤 고쳐 썼다. 그 결과 이 문장이
밤늦게도 읽히는 것이다.
</p>
</article>
<article class="typeface reveal" style="--delay: 80ms">
<header class="typeface-head">
<h3>한성제목</h3>
<p class="muted">제목·표제용 · 웨이트 600 · 큰 짝에서 벌어짐 0</p>
</header>
<p class="specimen specimen-display" style="font-family: 'MaruBuri', serif">
활자는 붓의 속도를 기억한다
</p>
</article>
</div>
</section>
<!--
조판 시험대 — 이 페이지의 리스크이자 유일한 인터랙션.
슬라이더 세 개가 실제 본문에 즉시 반영된다. 라벨은 한국어, 값은 숫자로.
-->
<section id="bench" class="section band" aria-labelledby="bench-h">
<div class="wrap">
<h2 id="bench-h">조판 시험대</h2>
<p class="muted bench-lead">
자간과 행간, 글자 크기가 가독성을 어떻게 바꾸는지 직접 움직여 보세요.
아래 값은 권장값이 아니라 출발점입니다 — 용지 규격과 본문 길이에 따라
정답은 달라집니다.
</p>
<div class="bench">
<form class="bench-controls" aria-label="조판 설정">
<div class="control">
<label for="ctl-size">글자 크기 <output id="out-size" for="ctl-size">17</output></label>
<input type="range" id="ctl-size" min="13" max="26" step="1" value="17" />
</div>
<div class="control">
<label for="ctl-tracking">자간 <output id="out-tracking" for="ctl-tracking">0</output></label>
<input type="range" id="ctl-tracking" min="-5" max="10" step="1" value="0" />
</div>
<div class="control">
<label for="ctl-leading">행간 <output id="out-leading" for="ctl-leading">1.8</output></label>
<input type="range" id="ctl-leading" min="1.4" max="2.4" step="0.1" value="1.8" />
</div>
<button type="button" class="btn-reset" id="ctl-reset">권장값으로</button>
</form>
<div
class="bench-sample"
id="bench-sample"
style="font-family: 'MaruBuri', serif"
aria-live="polite"
>
활자의 역사는 글자를 찍는 기계의 역사가 아니라, 글자를 읽는 눈의
역사였다. 활자소의 식자공들은 하루에 만 글자를 짜면서 어느 글꼴이
눈을 덜 아프게 하는지 알고 있었다. 그 지식은 문서로 남지 않았고
손끝으로만 전해졌다. 이 시험대는 그 손끝의 판단을 누구나 해볼 수
있는 눈금으로 옮긴 것이다. 자간을 0에서 5로 옮겨 보라 — 문장이
늘어지는 것이 아니라 숨이 가빠지는 것을 느낄 것이다.
</div>
</div>
</div>
</section>
<!--
활자 케이스 — 연구소의 물성. 금속 활자와 인주.
-->
<section id="case" class="section" aria-labelledby="case-h">
<div class="wrap case-grid">
<figure class="case-photo reveal">
<img
src="./assets/metaltype.webp"
alt="나무 활자 케이스에 골라 담긴 금속 활자들 — 활자면이 위에서 빛을 받아 결이 보인다"
width="900"
height="1200"
loading="lazy"
/>
<figcaption>연구소 2층 · 금속 활자 케이스</figcaption>
</figure>
<div class="case-text">
<h2 id="case-h">금속에서 시작해<br />화면으로 끝난다</h2>
<p>
한성본문의 자간 규칙은 금속 활자의 '옆면 여백'에서 왔습니다. 납활자는
글자 바로 옆에 살이 붙어 있어서, 찍히는 글자 사이는 언제나 일정했고
그 일정함이 읽는 리듬이었습니다. 화면용 폰트는 그 살을 지울 수
있지만, 우리는 지우지 않았습니다.
</p>
<figure class="case-photo-b reveal" style="--delay: 80ms">
<img
src="./assets/inkstone.webp"
alt="연구한 먹이 고인 연적과 옆에 놓인 인주 연판"
width="1100"
height="825"
loading="lazy"
/>
<figcaption>먹을 갈고 인주를 찍는 자리 — 시험 인쇄 전</figcaption>
</figure>
</div>
</div>
</section>
<!--
구입 — 라이선스는 조판 단위로. 조용한 두 줄.
-->
<section id="order" class="section" aria-labelledby="order-h">
<div class="wrap order-grid">
<div>
<h2 id="order-h">구입</h2>
<p class="muted">
웹·출판·임베드 세 가지 라이선스만 있습니다. 사용 수를 세지 않습니다 —
조판되는 단위(도서 권수, 사이트 도메인, 기기)로 셉니다.
</p>
</div>
<div class="order-rows">
<div class="order-row">
<div>
<h3>웹</h3>
<p>도메인당 · 웨이트 전종 · 자체 호스팅 WOFF2</p>
</div>
<p class="order-price">140,000원</p>
</div>
<div class="order-row">
<div>
<h3>출판</h3>
<p>도서 권수당 · 인쇄+전자 동시</p>
</div>
<p class="order-price">220,000원</p>
</div>
</div>
<a class="btn" href="mailto:foundry@hanseong.kr">견적 문의</a>
</div>
</section>
</main>
<footer class="site-foot">
<div class="wrap foot-inner">
<p>한성활자연구소 · 서울 마포</p>
<p class="muted">foundry@hanseong.kr</p>
</div>
</footer>
<script>
/* 시험대 — 슬라이더 세 개가 본문 스타일을 직접 쓴다. 프레임당 레이아웃 없음. */
const sample = document.getElementById("bench-sample");
const ctl = {
size: document.getElementById("ctl-size"),
tracking: document.getElementById("ctl-tracking"),
leading: document.getElementById("ctl-leading"),
};
const out = {
size: document.getElementById("out-size"),
tracking: document.getElementById("out-tracking"),
leading: document.getElementById("out-leading"),
};
const defaults = { size: 17, tracking: 0, leading: 1.8 };
function apply() {
const px = ctl.size.value + "px";
const em = ctl.tracking.value / 100 + "em";
const lh = ctl.leading.value;
sample.style.fontSize = px;
sample.style.letterSpacing = em;
sample.style.lineHeight = lh;
out.size.textContent = ctl.size.value;
out.tracking.textContent = ctl.tracking.value;
out.leading.textContent = Number(ctl.leading.value).toFixed(1);
}
for (const input of Object.values(ctl)) {
input.addEventListener("input", apply);
}
document.getElementById("ctl-reset").addEventListener("click", () => {
ctl.size.value = defaults.size;
ctl.tracking.value = defaults.tracking;
ctl.leading.value = defaults.leading;
apply();
});
apply();
const io = new IntersectionObserver(
(entries) => {
for (const e of entries) {
if (!e.isIntersecting) continue;
e.target.classList.add("is-in");
io.unobserve(e.target);
}
},
{ rootMargin: "0px 0px -8% 0px", threshold: 0.05 },
);
for (const el of document.querySelectorAll(".reveal")) io.observe(el);
</script>
</body>
</html>