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

release: v0.11.0

Browse source
This commit is contained in:
Yun Chan 2026-09-12 15:28:46 +09:00
parent 3c39a1731d
commit 45ba92ea82
45 changed files with 1459 additions and 1887 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -3,287 +3,165 @@
<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="본문 조판을 위해 설계한 한글 활자와 조판 시험대."
/>
<title>한성활자연구소 · 읽는 리듬을 만드는 활자</title>
<meta name="description" content="문장으로 확인하는 한글 조판. 마루 부리와 Pretendard의 역할을 비교하고 글자 크기·자간·행간을 직접 조절해 보세요." />
<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"
/>
<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=3" />
<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="#bench">조판해 보기</a>
<a href="#case">활자 케이스</a>
<a href="#order">구입</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 class="hero-rail">
<div class="hero-intro">
<div>
<p class="eyebrow">한글 타입 스튜디오</p>
<h1 id="hero-h">읽는 리듬을<br />만드는 활자.</h1>
</div>
<div class="hero-note">
<p>글자는 모양만으로 읽히지 않습니다. 문장 안에서 어떤 폭으로 서고, 얼마나 가까이 호흡하는지가 읽는 시간을 바꿉니다.</p>
<a class="text-link" href="#bench">조판해 보기 <span aria-hidden="true">↓</span></a>
</div>
</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 class="specimen-stage" data-kind="body">
<p class="stage-label">가상 서체 기획 · 화면은 마루 부리와 Pretendard로 구현</p>
<p class="hero-specimen" aria-hidden="true">글의 결</p>
<div class="baseline" aria-hidden="true"></div>
<div class="stage-footer">
<div class="type-switch" role="group" aria-label="표본 글꼴 선택">
<button type="button" class="type-choice" data-kind="body" aria-pressed="true">본문</button>
<button type="button" class="type-choice" data-kind="title" aria-pressed="false">제목</button>
</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로 옮겨 보라 — 문장이
늘어지는 것이 아니라 숨이 가빠지는 것을 느낄 것이다.
<p id="type-status" class="type-status" aria-live="polite">본문 표본 · Pretendard · 또렷한 문장 폭</p>
</div>
</div>
</div>
</section>
<section id="typefaces" class="section" aria-labelledby="typefaces-h">
<div class="wrap">
<div class="section-head">
<p class="eyebrow">두 가지 읽기 방식</p>
<h2 id="typefaces-h">같은 문장이<br />다른 속도로 읽힌다.</h2>
</div>
<div class="comparison">
<article class="typeface">
<header class="typeface-head">
<h3>본문</h3>
<p class="muted">Pretendard · 작고 긴 문장에 필요한 명료한 골격</p>
</header>
<p class="specimen specimen-body">아침 안개가 걷히기 전에 도랑물 소리가 먼저 들렸다. 글자는 종이 위에서 소리를 내지 않지만, 잘 짜인 활자는 소리 내어 읽게 만든다.</p>
</article>
<article class="typeface typeface-title">
<header class="typeface-head">
<h3>제목</h3>
<p class="muted">마루 부리 · 표제에서 멈춤과 여백을 만드는 결</p>
</header>
<p class="specimen specimen-display">아침 안개가 걷히기 전에 도랑물 소리가 먼저 들렸다. 글자는 종이 위에서 소리를 내지 않지만, 잘 짜인 활자는 소리 내어 읽게 만든다.</p>
</article>
</div>
</div>
</section>
<section id="bench" class="section band" aria-labelledby="bench-h">
<div class="wrap">
<div class="bench-heading">
<div>
<p class="eyebrow">조판 시험대</p>
<h2 id="bench-h">읽는 호흡을<br />직접 맞춰 보세요.</h2>
</div>
<p class="muted bench-lead">크기는 문장의 밀도를, 자간은 낱글자 사이의 공기를, 행간은 다음 줄로 넘어가는 속도를 바꿉니다. 하나씩 움직여 같은 문장이 어떻게 달라지는지 비교해 보세요.</p>
</div>
<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">17px</output></div><input type="range" id="ctl-size" name="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">0em</output></div><input type="range" id="ctl-tracking" name="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" name="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-reading">
<p id="bench-caption" class="bench-caption">마루 부리 · 17px · 자간 0em · 행간 1.8</p>
<div class="bench-sample" id="bench-sample" aria-live="polite">활자의 역사는 글자를 찍는 기계의 역사가 아니라, 글자를 읽는 눈의 역사였다. 활자소의 식자공들은 하루에 만 글자를 짜면서 어느 글꼴이 눈을 덜 아프게 하는지 알고 있었다. 그 지식은 문서로 남지 않았고 손끝으로만 전해졌다. 이 미리보기는 그 판단을 눈으로 비교할 수 있게 옮긴 것입니다. 자간을 0에서 5로 바꾸면 문단의 호흡과 줄 길이가 어떻게 달라지는지 확인할 수 있습니다.</div>
</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 class="case-photo">
<img src="./assets/metaltype.webp" alt="나무 활자 케이스에 골라 담긴 금속 활자들 — 활자면이 위에서 빛을 받아 결이 보인다" width="900" height="1200" loading="lazy" />
<figcaption>생성 이미지 · 금속 활자 케이스의 관찰 장면</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/metaltype.webp"
alt="빛을 받은 금속 활자와 정렬된 활자 케이스"
width="1100"
height="825"
loading="lazy"
/>
<figcaption>활자 폭과 여백을 비교하는 편집 자리</figcaption>
<p class="eyebrow">활자 케이스</p>
<h2 id="case-h">금속에서 시작해<br />화면에서 읽힌다.</h2>
<p>이 가상 기획은 금속 활자의 옆면 여백을 관찰의 출발점으로 삼습니다. 납활자는 글자 바로 옆에 살이 붙어 있어, 찍히는 글자 사이가 일정했습니다. 이 화면에서는 그 일정함이 문장 안의 자간과 행간에 어떤 리듬을 만드는지 살펴봅니다.</p>
<figure class="case-photo-b">
<img src="./assets/metaltype.webp" alt="빛을 받은 금속 활자와 정렬된 활자 케이스" width="1100" height="825" loading="lazy" />
<figcaption>생성 이미지 · 활자 폭과 여백을 보는 편집 장면</figcaption>
</figure>
</div>
</div>
</section>
<!--
구입 — 라이선스는 조판 단위로. 조용한 두 줄.
-->
<section id="order" class="section" aria-labelledby="order-h">
<section id="order" class="section band" aria-labelledby="order-h">
<div class="wrap order-grid">
<div>
<h2 id="order-h">구입</h2>
<p class="muted">
웹·출판·임베드 세 가지 라이선스만 있습니다. 사용 수를 세지 않습니다 —
조판되는 단위(도서 권수, 사이트 도메인, 기기)로 셉니다.
</p>
<p class="eyebrow">가상 서체 기획</p>
<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 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>
<a class="btn" href="#bench">조판해 보기</a>
</div>
</section>
</main>
<footer class="site-foot">
<div class="wrap foot-inner">
<p>한성활자연구소 · 서울 마포</p>
<p class="muted">foundry@hanseong.kr</p>
</div>
</footer>
<footer class="site-foot"><div class="wrap foot-inner"><p>한성활자연구소 · 가상 서체 기획</p><p class="muted">화면의 글꼴은 마루 부리와 Pretendard로 구현했습니다.</p></div></footer>
<script>
/* 시험대 — 슬라이더 세 개가 본문 스타일을 직접 쓴다. 프레임당 레이아웃 없음. */
const specimenStage = document.querySelector(".specimen-stage");
const choices = document.querySelectorAll(".type-choice");
const typeStatus = document.getElementById("type-status");
const typeMessages = { body: "본문 표본 · Pretendard · 또렷한 문장 폭", title: "제목 표본 · 마루 부리 · 여백이 보이는 획의 대비" };
choices.forEach((choice) => choice.addEventListener("click", () => {
const kind = choice.dataset.kind;
specimenStage.dataset.kind = kind;
choices.forEach((button) => button.setAttribute("aria-pressed", String(button === choice)));
typeStatus.textContent = typeMessages[kind];
}));
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 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;
sample.style.fontSize = ctl.size.value + "px";
sample.style.letterSpacing = ctl.tracking.value / 100 + "em";
sample.style.lineHeight = ctl.leading.value;
out.size.textContent = ctl.size.value + "px";
out.tracking.textContent = ctl.tracking.value / 100 + "em";
out.leading.textContent = Number(ctl.leading.value).toFixed(1);
document.getElementById("bench-caption").textContent = `마루 부리 · ${ctl.size.value}px · 자간 ${ctl.tracking.value / 100}em · 행간 ${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();
});
Object.values(ctl).forEach((input) => 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>