123d9fc5a8
stylelint 도 html-validate 도 "var(--x) 를 썼는데 --x 가 어디에도 없다"를 잡지 못한다. 미정의 변수는 선언 전체를 무효로 만드는데 콘솔 에러가 없어 조용히 남는다. 검사기를 심자마자 v0.9.1 의 실제 결함이 나왔다. 게이트 신설 - tools/integrity.mjs — L0 무결성. CSS 커스텀 프로퍼티 참조, 상대경로, 한글 조판 필수 규칙(keep-all·한글 폰트 지정), 슬롭 지문, 스크롤 리스너를 검사. verify.mjs 체인에 편입해 실패 시 배포를 막는다. 폴백이 있는 var(--x, 기본값) 은 선택적 주입이므로 미정의로 세지 않는다. - tools/showcase-audit.mjs — 320/390/768/1440 실렌더 감사. 가로 스크롤·오버플로· 컨트롤 줄바꿈·대비 AA·왼쪽 인셋·h1 개수·히어로 줄 수·깨진 이미지·콘솔 에러. 반투명 배경을 합성해 대비를 재고, WebGL 페이지를 위해 swiftshader 로 렌더한다. - html-validate 대상을 두 페이지에서 public/work 전체로 넓혔다. 수리한 결함 - 미정의 변수 64건: --dur-fast·--radius-xs 가 정의된 적이 없어 cask-archive, cheongon-care, materia-interior 의 transition 선언이 통째로 무효였다. 새 토큰을 만들지 않고 기존 --dur-quick·--radius 로 매핑했다 — 토큰을 늘리면 radius 어휘가 4종이 되어 하드 게이트 3에 걸린다. - 한글 조판: lumina-optics·pulsegate·synapse-bci 가 word-break: keep-all 없이 IBM Plex Sans 만 지정해 한글이 시스템 기본으로 떨어지고 있었다. 같은 계열의 IBM Plex Sans KR 을 스택에 넣고 keep-all 을 추가했다. - 슬롭 지문 19건: text-transform: uppercase 로 만든 영문 대문자 eyebrow 를 한글 문장으로 바꾸고, 대문자용으로 잡아둔 넓은 자간과 모노 서체도 되돌렸다. - 하드 게이트 9: materia-interior/hannam-duplex.html 의 100vh → 100dvh. 이 파일은 어디서도 참조되지 않으면서 인라인 hex 까지 갖고 있어 토큰 기반으로 다시 썼다. - 접근성 11건: label 하나가 output 과 input 둘에 걸리던 것 5건(font-foundry, lumina-optics), dl > div > div > dt 4건(muwol-coffee), div 에 붙은 aria-label 2건(overtone-sound, pulsegate). 측정기 자체의 오류 둘도 고쳤다 — 눈에 보이지 않는 .sr-only 를 대비 실패로 잡던 것과, overflow-x: auto 상자 안의 넓은 표를 오버플로로 잡던 것. 재는 도구가 틀리면 통과도 실패도 의미가 없다.
289 lines
12 KiB
HTML
289 lines
12 KiB
HTML
<!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">
|
|
<div class="control-head"><label for="ctl-size">글자 크기</label><output id="out-size" for="ctl-size">17</output></div>
|
|
<input type="range" id="ctl-size" min="13" max="26" step="1" value="17" />
|
|
</div>
|
|
<div class="control">
|
|
<div class="control-head"><label for="ctl-tracking">자간</label><output id="out-tracking" for="ctl-tracking">0</output></div>
|
|
<input type="range" id="ctl-tracking" min="-5" max="10" step="1" value="0" />
|
|
</div>
|
|
<div class="control">
|
|
<div class="control-head"><label for="ctl-leading">행간</label><output id="out-leading" for="ctl-leading">1.8</output></div>
|
|
<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>
|