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

feat(site): 쇼케이스를 별도 페이지로 분리하고 본문을 존댓말로 바꾼다
All checks were successful
ci / build (push) Successful in 18s
Details

Browse source 
홈에 있던 쇼케이스 섹션은 스크린샷 두 장을 카드에 넣고 각도를 준 것이었고,
눌러도 갈 곳이 없었다. 그림만 보여주고 끝나는 자리는 증거가 아니라 장식이다.

- /showcase 를 별도 페이지로 만들었다. 모자이크 그리드에 썸네일을 놓고
  누르면 실제로 도는 사이트(/work/<slug>/)가 열린다.
- 사례 데이터를 src/data/work.ts 한 곳에 모았다. 항목 하나만 추가하면
  그리드에 들어간다 — 페이지 코드는 건드리지 않는다.
- 첫 사례로 목요일의 화원(플로럴 스튜디오)을 넣고 실제 파일을
  public/work/thursday-flowers/ 에 함께 싣는다.
- 홈에서 예전 섹션을 제거하고 내비를 /showcase 로 돌렸다.

본문 말투:

  사이트 문장이 전부 반말이었고 일부는 내부 감사 로그처럼 읽혔다.
  스킬 문서의 단정한 반말은 의도지만, 방문자를 향한 화면은 다르다.
  제목은 단정문이 카피로서 힘을 가지므로 그대로 두고, 설명하는 문장과
  명령형("~해라")을 전부 존댓말로 바꿨다. 실측 결과 홈·쇼케이스 모두 0건.

구현에서 걸린 것:

  Base 레이아웃이 이미 <main class="page"> 를 제공하는데 새 페이지에서
  또 감쌌다. 바깥 page 의 본문 칼럼(561px) 안에 안쪽 page 가 들어가
  전 페이지가 좁아졌다 — 모자이크가 561px, 썸네일이 240px 이었다.
  중첩을 걷어내자 1180px / 596px 로 돌아왔다.
This commit is contained in:
Yun Chan 2026-08-21 08:36:35 +09:00
parent b92853bf2b
commit 30dc6687dd
16 changed files with 1555 additions and 75 deletions
Download patch file Download diff file Expand all files Collapse all files

4
apps/site/src/pages/en/index.astro
View file

@ -2,7 +2,6 @@
import Base from "../../layouts/Base.astro";
import Hero from "../../components/Hero.astro";
import Pipeline from "../../components/Pipeline.astro";
import Showcase from "../../components/Showcase.astro";
import Materials from "../../components/Materials.astro";
import Metrics from "../../components/Metrics.astro";
import Preflight from "../../components/Preflight.astro";
@ -20,7 +19,7 @@ import { en as c } from "../../i18n/content";
① 무엇인가 히어로 · 파이프라인
② 무엇을 아는가 SVG 필터 · 한글 조판
③ 정말 그런가 사례 · 수치 · 자기 감사 · 규칙
③ 정말 그런가 수치 · 자기 감사 · 규칙 (사례는 /showcase 로 뺐다)
④ 행동 설치
*/}
<Hero c={c.hero} ui={c.ui} />
@ -29,7 +28,6 @@ import { en as c } from "../../i18n/content";
<Materials c={c.materials} />
<Typography c={c.typography} />
<Showcase c={c.showcase} />
<Metrics c={c.metrics} />
<Preflight c={c.preflight} />
<Rules c={c.rules} />

4
apps/site/src/pages/index.astro
View file

@ -2,7 +2,6 @@
import Base from "../layouts/Base.astro";
import Hero from "../components/Hero.astro";
import Pipeline from "../components/Pipeline.astro";
import Showcase from "../components/Showcase.astro";
import Materials from "../components/Materials.astro";
import Metrics from "../components/Metrics.astro";
import Preflight from "../components/Preflight.astro";
@ -20,7 +19,7 @@ import { ko as c } from "../i18n/content";
① 무엇인가 히어로 · 파이프라인
② 무엇을 아는가 SVG 필터 · 한글 조판
③ 정말 그런가 사례 · 수치 · 자기 감사 · 규칙
③ 정말 그런가 수치 · 자기 감사 · 규칙 (사례는 /showcase 로 뺐다)
④ 행동 설치
*/}
<Hero c={c.hero} ui={c.ui} />
@ -29,7 +28,6 @@ import { ko as c } from "../i18n/content";
<Materials c={c.materials} />
<Typography c={c.typography} />
<Showcase c={c.showcase} />
<Metrics c={c.metrics} />
<Preflight c={c.preflight} />
<Rules c={c.rules} />

256
apps/site/src/pages/showcase.astro Normal file
View file

@ -0,0 +1,256 @@
---
import { Image } from "astro:assets";
import Base from "../layouts/Base.astro";
import BgPhoto from "../components/BgPhoto.astro";
import { WORK } from "../data/work.ts";
/*
쇼케이스. 소개 페이지 안의 섹션이 아니라 **별도 페이지**다.
홈에 있던 예전 섹션은 스크린샷 두 장을 카드에 넣고 각도를 살짝 준 것이었고,
들어갈 곳이 없었다 — 그림만 보여주고 끝나는 자리는 증거가 아니라 장식이다.
여기서는 타일을 누르면 **실제로 도는 사이트**로 들어간다.
타일 크기를 섞는다. 균일한 격자는 이 스킬이 금지하는 형태이고,
사례마다 중요도가 다른데 같은 크기로 두면 그 차이가 사라진다.
*/
const title = "사례 · designpaca";
const description =
"designpaca 파이프라인으로 만든 사이트들. 각 사례의 컨셉과 감수한 리스크, 실측값을 함께 적었습니다. 타일을 누르면 실제 사이트가 열립니다.";
---
<Base lang="ko" title={title} description={description}>
<section class="section intro has-bg" aria-labelledby="sc-h">
<BgPhoto variant="align" mode="fixed" opacity={0.85} />
<p class="eyebrow reveal">사례</p>
<h1 id="sc-h" class="reveal">파이프라인을 돌려서 나온 것들</h1>
<p class="lead intro-lead reveal">
모두 0단계부터 6단계까지 그대로 돌려서 나온 결과물입니다. 각 사례마다
<strong>감수한 리스크</strong>를 함께 적었습니다 — 그것이 없으면 안전하지만 잊히는 디자인이 됩니다.
</p>
<p class="muted intro-note reveal">
타일을 누르면 실제 사이트가 열립니다. 목업이 아니라 동작하는 페이지입니다.
</p>
</section>
<section class="section grid-section" aria-label="사례 목록">
<ul class="full mosaic">
{
WORK.map((w, i) => (
<li class:list={["tile", `tile-${w.size}`, "reveal"]} style={`--reveal-delay:${i * 80}ms`}>
<a class="tile-link" href={w.href}>
<span class="tile-shot">
<Image
src={w.shot}
alt={w.alt}
widths={[520, 900, 1440]}
sizes="(max-width: 820px) 92vw, 46vw"
loading={i === 0 ? "eager" : "lazy"}
/>
{w.shotAlt && (
<Image
class="tile-shot-alt"
src={w.shotAlt}
alt=""
widths={[520, 900, 1440]}
sizes="(max-width: 820px) 92vw, 46vw"
loading="lazy"
aria-hidden="true"
/>
)}
</span>
<span class="tile-body">
<span class="tile-head">
<span class="tile-name">{w.name}</span>
<span class="tile-kind muted">{w.kind}</span>
</span>
<span class="tile-concept">{w.concept}</span>
<span class="tile-risk">
<span class="risk-label">감수한 리스크</span>
{w.risk}
</span>
<span class="tile-metrics mono">
{w.metrics.map((m) => (
<span class="metric">{m}</span>
))}
</span>
</span>
</a>
</li>
))
}
</ul>
</section>
</Base>
<style>
/* .page 그리드는 base.css 가 준다. 여기서 다시 정의하면
main 칼럼이 본문 폭(--measure)에서 벗어나 전 페이지가 어긋난다. */
.intro {
padding-block: calc(var(--header-h) + var(--space-7)) var(--space-7);
}
/* 목록 페이지의 제목이라 홈 히어로만큼 클 이유가 없다.
h1 기본값(--display)은 여기서 세 줄로 접힌다. */
#sc-h {
font-size: clamp(2rem, 1.3rem + 2.4vw, 3.4rem);
max-width: 18ch;
}
.intro-lead {
margin-bottom: var(--space-4);
max-width: var(--measure);
}
.intro-note {
max-width: var(--measure);
}
.grid-section {
padding-block: 0 var(--space-8);
}
/* ── 모자이크 ────────────────────────────────────────
타일 크기가 섞인다. 사례마다 무게가 다른데 같은 크기로 두면
그 차이가 사라지고, 그때부터는 격자가 내용을 지운다. */
.mosaic {
list-style: none;
margin: 0;
max-width: 1180px;
margin-inline: auto;
padding: 0 var(--gutter);
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: var(--space-6) var(--space-5);
}
.tile {
margin: 0;
min-width: 0;
}
.tile-lg {
grid-column: span 6;
}
.tile-md {
grid-column: span 3;
}
.tile-sm {
grid-column: span 2;
}
.tile-link {
display: grid;
gap: var(--space-4);
color: inherit;
text-decoration: none;
}
/* 큰 타일은 그림과 글을 나란히 둔다. 세로로 쌓으면 화면을 통째로 먹는다 */
.tile-lg .tile-link {
grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
gap: var(--space-6);
align-items: center;
}
.tile-shot {
position: relative;
display: block;
overflow: hidden;
border-radius: var(--radius-md);
border: 1px solid var(--line);
background: var(--surface-2);
aspect-ratio: 16 / 10;
}
.tile-shot :global(img) {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center;
display: block;
}
/* 두 번째 컷은 위에 겹쳐 두고 호버에서 바꾼다.
스크롤이나 자동 전환으로 바꾸지 않는다 — 읽는 사람의 속도를 뺏지 않는다 */
.tile-shot-alt {
position: absolute;
inset: 0;
opacity: 0;
}
.tile-body {
display: grid;
gap: var(--space-3);
align-content: start;
}
.tile-head {
display: grid;
gap: var(--space-1);
}
.tile-name {
font-size: var(--step-1);
font-weight: var(--weight-medium);
}
.tile-kind {
font-size: var(--step-0);
}
.tile-concept {
color: var(--ink);
max-width: 34em;
}
.tile-risk {
display: grid;
gap: var(--space-1);
padding-top: var(--space-3);
border-top: 1px solid var(--line);
color: var(--ink-muted);
max-width: 38em;
}
.risk-label {
font-size: var(--step-0);
letter-spacing: var(--tracking-label);
color: var(--accent);
}
.tile-metrics {
display: flex;
flex-wrap: wrap;
gap: var(--space-2) var(--space-4);
font-size: var(--mono-size);
color: var(--ink-muted);
}
.metric + .metric::before {
content: "·";
margin-right: var(--space-4);
color: var(--line-strong);
}
/* ── 호버: 그림이 바뀌고 테두리가 선다 ─────────────── */
@media (prefers-reduced-motion: no-preference) {
.tile-shot :global(img) {
transition: opacity var(--dur-slow) var(--ease-soft);
}
.tile-shot {
transition: border-color var(--dur-quick) var(--ease-out);
}
.tile-link:hover .tile-shot,
.tile-link:focus-visible .tile-shot {
border-color: var(--accent);
}
.tile-link:hover .tile-shot-alt,
.tile-link:focus-visible .tile-shot-alt {
opacity: 1;
}
}
@media (max-width: 900px) {
.mosaic {
grid-template-columns: 1fr;
}
.tile-lg,
.tile-md,
.tile-sm {
grid-column: span 1;
}
.tile-lg .tile-link {
grid-template-columns: 1fr;
gap: var(--space-4);
}
}
</style>