172 lines
12 KiB
HTML
172 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="문장으로 확인하는 한글 조판. 마루 부리와 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="./styles/fonts.css?v=20260912all" />
|
|
<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=20260912all" />
|
|
<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="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 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>
|
|
<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">같은 문장, 서로 다른 결.</h2>
|
|
</div>
|
|
<p class="comparison-note">크기·행간·폭을 맞췄습니다. 서체마다 글자가 보이는 크기는 다를 수 있습니다.</p>
|
|
<div class="comparison">
|
|
<article class="typeface">
|
|
<header class="typeface-head">
|
|
<h3>Pretendard</h3>
|
|
<p class="muted">본문용 산세리프</p>
|
|
</header>
|
|
<p class="specimen specimen-body">아침 안개가 걷히기 전에 도랑물 소리가 먼저 들렸다. 글자는 종이 위에서 소리를 내지 않지만, 잘 짜인 활자는 소리 내어 읽게 만든다.</p>
|
|
</article>
|
|
<article class="typeface typeface-title">
|
|
<header class="typeface-head">
|
|
<h3>MaruBuri</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"><label for="ctl-font">글꼴</label><select id="ctl-font" name="font"><option value="display">마루부리</option><option value="body">Pretendard</option></select></div>
|
|
<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>
|
|
<p class="bench-disclaimer">아래 문단은 역사 사실을 설명하는 글이 아닌 조판 견본글입니다.</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">
|
|
<img src="./assets/metaltype.webp" alt="나무 활자 케이스에 골라 담긴 금속 활자들 — 활자면이 위에서 빛을 받아 결이 보인다" width="900" height="1200" loading="lazy" />
|
|
<figcaption>생성 이미지 · 금속 활자 케이스의 관찰 장면</figcaption>
|
|
</figure>
|
|
<div class="case-text">
|
|
<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 band" aria-labelledby="order-h">
|
|
<div class="wrap order-grid">
|
|
<div>
|
|
<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>
|
|
<a class="btn" href="#bench">조판해 보기</a>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
<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 = { font: document.getElementById("ctl-font"), 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 = { font: "display", size: 17, tracking: 0, leading: 1.8 };
|
|
const fontNames = { display: "마루 부리", body: "Pretendard" };
|
|
function apply() {
|
|
sample.style.fontFamily = ctl.font.value === "display" ? "var(--font-display)" : "var(--font-body)";
|
|
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 = `${fontNames[ctl.font.value]} · ${ctl.size.value}px · 자간 ${ctl.tracking.value / 100}em · 행간 ${Number(ctl.leading.value).toFixed(1)}`;
|
|
}
|
|
Object.values(ctl).forEach((input) => { input.addEventListener("input", apply); input.addEventListener("change", apply); });
|
|
document.getElementById("ctl-reset").addEventListener("click", () => { ctl.font.value = defaults.font; ctl.size.value = defaults.size; ctl.tracking.value = defaults.tracking; ctl.leading.value = defaults.leading; apply(); });
|
|
apply();
|
|
</script>
|
|
</body>
|
|
</html>
|