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

feat: strengthen design skill and refresh all showcases
Some checks failed
ci / build (push) Has been cancelled
Details

Browse source
This commit is contained in:
Yun Chan 2026-09-12 18:16:33 +09:00
parent 69e5cc1efd
commit e09d4efb1c
257 changed files with 8196 additions and 2374 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -10,9 +10,9 @@
<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="./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=3" />
<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>
@ -37,7 +37,7 @@
<h1 id="hero-h">읽는 리듬을<br />만드는 활자.</h1>
</div>
<div class="hero-note">
<p>글자는 모양만으로 읽히지 않습니다. 문장 안에서 어떤 폭으로 서고, 얼마나 가까이 호흡하는지가 읽는 시간을 바꿉니다.</p>
<p>글자는 모양만으로 읽히지 않습니다. 문장 안에서 어떤 폭으로 서고, 얼마나 가까이 호흡하는지 직접 관찰해 보세요.</p>
<a class="text-link" href="#bench">조판해 보기 <span aria-hidden="true">↓</span></a>
</div>
</div>
@ -59,20 +59,21 @@
<div class="wrap">
<div class="section-head">
<p class="eyebrow">두 가지 읽기 방식</p>
<h2 id="typefaces-h">같은 문장이<br />다른 속도로 읽힌다.</h2>
<h2 id="typefaces-h">같은 문장, 서로 다른 결.</h2>
</div>
<p class="comparison-note">크기·행간·폭을 맞췄습니다. 서체마다 글자가 보이는 크기는 다를 수 있습니다.</p>
<div class="comparison">
<article class="typeface">
<header class="typeface-head">
<h3>본문</h3>
<p class="muted">Pretendard · 작고 긴 문장에 필요한 명료한 골격</p>
<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>제목</h3>
<p class="muted">마루 부리 · 표제에서 멈춤과 여백을 만드는 결</p>
<h3>MaruBuri</h3>
<p class="muted">명조 계열 세리프</p>
</header>
<p class="specimen specimen-display">아침 안개가 걷히기 전에 도랑물 소리가 먼저 들렸다. 글자는 종이 위에서 소리를 내지 않지만, 잘 짜인 활자는 소리 내어 읽게 만든다.</p>
</article>
@ -86,10 +87,11 @@
<p class="eyebrow">조판 시험대</p>
<h2 id="bench-h">읽는 호흡을<br />직접 맞춰 보세요.</h2>
</div>
<p class="muted bench-lead">크기는 문장의 밀도를, 자간은 낱글자 사이의 공기를, 행간은 다음 줄로 넘어가는 속도를 바꿉니다. 하나씩 움직여 같은 문장이 어떻게 달라지는지 비교해 보세요.</p>
<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>
@ -97,6 +99,7 @@
</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>
@ -147,20 +150,22 @@
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 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 = { size: 17, tracking: 0, leading: 1.8 };
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 = `마루 부리 · ${ctl.size.value}px · 자간 ${ctl.tracking.value / 100}em · 행간 ${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));
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); 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>