yunchan/designpaca
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 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

301
apps/site/public/work/thursday-flowers/index.html Normal file
View file

@ -0,0 +1,301 @@
<!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="한 주에 한 번, 목요일에만 문을 여는 플로럴 스튜디오. 그 주에 좋은 꽃만 들여 주문받은 만큼만 만듭니다. 서울 서촌."
/>
<meta property="og:title" content="목요일의 화원 · 플로럴 스튜디오" />
<meta
property="og:description"
content="한 주에 한 번, 목요일에만 문을 여는 플로럴 스튜디오. 서울 서촌."
/>
<meta property="og:type" content="website" />
<meta property="og:image" content="./assets/flower-01.webp" />
<meta name="theme-color" content="#f8f6f0" />
<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" />
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ctext y='26' font-size='26'%3E🌿%3C/text%3E%3C/svg%3E" />
</head>
<body>
<a class="skip" href="#main">본문으로 건너뛰기</a>
<header class="site-head wrap">
<a class="wordmark" href="#main">
<span>목요일의</span> <span>화원</span>
</a>
<nav class="nav" aria-label="섹션">
<a href="#work">작업</a>
<a href="#thursday">목요일</a>
<a href="#subscribe">정기</a>
<a href="#visit">찾아오기</a>
</nav>
</header>
<main id="main">
<!--
히어로. 큰 사진 한 장을 깔지 않는다 — 그게 이 카테고리의 기본값이다.
크기도 비율도 다른 사진 넷을 공통 정렬선 없이 흩뿌리고,
그 사이 여백에 글자를 세로로 세운다. (R1: sarahwinward.com)
-->
<section class="hero" aria-labelledby="hero-h">
<div class="hero-inner wrap">
<div class="hero-text">
<p class="vertical hero-role reveal">플로럴 스튜디오 / 서울 서촌 / 2019</p>
<div class="hero-body">
<h1 id="hero-h" class="hero-h reveal">
그 주에 좋은 꽃만<br />들입니다
</h1>
<p class="lead hero-lead reveal" style="--delay: 120ms">
목요일 아침에 시장에서 그 주의 꽃을 고르고, 주문받은 만큼만 만듭니다.
남는 꽃이 없어서 시들 일도 없습니다.
</p>
<a class="btn hero-cta reveal" href="#contact" style="--delay: 200ms">
상담 신청하기
</a>
</div>
</div>
<div class="hero-photos">
<figure class="ph ph-a reveal" style="--delay: 80ms">
<img
src="./assets/flower-01.webp"
alt="흰 라넌큘러스와 작약, 유칼립투스로 묶은 꽃다발"
width="1086"
height="1448"
loading="eager"
fetchpriority="high"
/>
</figure>
<figure class="ph ph-b reveal" style="--delay: 260ms">
<img
src="./assets/flower-03.webp"
alt="꽃 한 송이의 꽃잎 결이 보이는 접사"
width="1086"
height="1448"
loading="lazy"
/>
</figure>
<figure class="ph ph-c reveal" style="--delay: 340ms">
<img
src="./assets/flower-02.webp"
alt="작업대 위에 놓인 꽃 줄기와 가위, 노끈"
width="1448"
height="1086"
loading="lazy"
/>
</figure>
<p class="vertical hero-tags reveal" style="--delay: 420ms">
주문 제작 / 정기 구독 / 공간 장식
</p>
</div>
</div>
</section>
<!-- 왜 목요일인가 — 이름이 곧 운영 방식이라는 것을 여기서 푼다 -->
<section id="thursday" class="section band" aria-labelledby="thursday-h">
<div class="wrap two">
<div class="two-text">
<h2 id="thursday-h">
일주일에 하루만 문을 엽니다
</h2>
<p>
수요일 밤에 경매가 끝나고, 목요일 새벽 시장에 그 주의 꽃이 나옵니다.
그날 좋은 것만 골라 그날 만듭니다.
</p>
<p>
나머지 엿새는 만들지 않습니다. 미리 사다 두면 파는 날까지 꽃이 기다려야
하고, 기다린 꽃은 이미 한 번 시든 꽃입니다.
</p>
<dl class="facts">
<div>
<dt>여는 날</dt>
<dd>매주 목요일 10:00–19:00</dd>
</div>
<div>
<dt>주문 마감</dt>
<dd>수요일 18:00</dd>
</div>
<div>
<dt>그 주 제작 수</dt>
<dd>최대 20건</dd>
</div>
</dl>
</div>
<figure class="two-photo">
<img
src="./assets/flower-05.webp"
alt="꽃 줄기를 가위로 다듬는 손"
width="1086"
height="1448"
loading="lazy"
/>
<figcaption class="label">목요일 아침, 손질</figcaption>
</figure>
</div>
</section>
<!-- 작업 — 사진이 설득의 주체다. 크기 차이가 리듬이다 -->
<section id="work" class="section" aria-labelledby="work-h">
<div class="wrap">
<p class="label">작업</p>
<h2 id="work-h">같은 꽃을 두 번 쓰지 않습니다</h2>
<p class="lead">
주에 따라 들어오는 꽃이 다르니 결과도 매번 다릅니다. 지난 작업을 그대로
다시 만들어 달라는 요청은 받지 않습니다.
</p>
</div>
<div class="wrap gallery">
<figure class="g g-1">
<img
src="./assets/flower-04.webp"
alt="창가 자연광이 드는 작업실, 양철 양동이에 담긴 꽃들과 나무 선반"
width="1600"
height="900"
loading="lazy"
/>
<figcaption>작업실 · 서촌</figcaption>
</figure>
<figure class="g g-2">
<img
src="./assets/flower-01.webp"
alt="흰색과 크림색 위주로 묶은 꽃다발"
width="1086"
height="1448"
loading="lazy"
/>
<figcaption>화이트 온 화이트 · 6월</figcaption>
</figure>
<figure class="g g-3">
<img
src="./assets/flower-02.webp"
alt="꽃 줄기와 가위, 노끈이 놓인 작업대를 위에서 본 모습"
width="1448"
height="1086"
loading="lazy"
/>
<figcaption>손질 전 · 목요일 오전</figcaption>
</figure>
</div>
<div class="wrap">
<p class="muted work-note">
더 많은 작업은
<a class="link" href="https://instagram.com" rel="noopener">인스타그램</a>에
주 단위로 올립니다.
</p>
</div>
</section>
<!-- 정기구독. 주 CTA(상담)와 경쟁하지 않게 아래쪽에 조용히 둔다 -->
<section id="subscribe" class="section band" aria-labelledby="sub-h">
<div class="wrap two two-reverse">
<div class="two-text">
<h2 id="sub-h">격주 목요일, 같은 자리에</h2>
<p>
사무실 응접실이나 매장 카운터처럼 꽃이 늘 있어야 하는 자리를 위한
것입니다. 격주로 그 주의 꽃을 가져다 놓고, 지난 것을 가져옵니다.
</p>
<p class="muted">
화병은 저희 것을 두고 씁니다. 자리와 조도를 먼저 보고 정하기 때문에
첫 회는 방문 상담으로 시작합니다.
</p>
<a class="btn btn-quiet" href="#contact">정기 상담 신청</a>
</div>
<figure class="two-photo">
<img
src="./assets/flower-03.webp"
alt="꽃잎의 결이 보이는 접사"
width="1086"
height="1448"
loading="lazy"
/>
<figcaption class="label">이번 주 · 라넌큘러스</figcaption>
</figure>
</div>
</section>
<!-- 문의 — 이 페이지의 유일한 주 CTA가 도착하는 곳 -->
<section id="contact" class="section contact" aria-labelledby="contact-h">
<div class="wrap contact-inner">
<p class="label">문의</p>
<h2 id="contact-h">무엇에 쓸 꽃인지부터 듣습니다</h2>
<p class="lead">
받는 분과 자리, 예산을 알려주시면 그 주에 가능한 것을 먼저 말씀드립니다.
가능하지 않은 주에는 그렇다고 말씀드립니다.
</p>
<ul class="contact-list">
<li>
<span class="label">전화</span>
<a class="link" href="tel:0212345678">02-1234-5678</a>
</li>
<li>
<span class="label">메일</span>
<a class="link" href="mailto:hello@thursday.flowers"
>hello@thursday.flowers</a
>
</li>
<li>
<span class="label">인스타그램</span>
<a class="link" href="https://instagram.com" rel="noopener"
>@thursday.flowers</a
>
</li>
</ul>
</div>
</section>
<!-- 찾아오기. 푸터를 따로 두지 않고 마지막 섹션이 그 역할을 한다 -->
<section id="visit" class="section visit" aria-labelledby="visit-h">
<div class="wrap visit-inner">
<div>
<h2 id="visit-h">서촌, 목요일에만</h2>
<address class="visit-address">
서울 종로구 자하문로 00길 00, 2층<br />
경복궁역 3번 출구에서 도보 8분
</address>
</div>
<p class="visit-note muted">
목요일 외에는 상주하지 않습니다. 다른 요일 방문은 미리 연락 주세요.
</p>
<p class="vertical visit-mark">목요일의 화원</p>
</div>
</section>
</main>
<script>
/*
등장 처리만 한다. 스크롤 이벤트는 쓰지 않는다 —
매 프레임 레이아웃을 강제하고 모바일에서 프레임이 무너진다.
한 번 보이면 유지한다: 이펙트를 끄면 보이고 켜면 사라지는 것은 폴백이 아니다.
*/
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>