30dc6687dd
All checks were successful
ci / build (push) Successful in 18s
홈에 있던 쇼케이스 섹션은 스크린샷 두 장을 카드에 넣고 각도를 준 것이었고,
눌러도 갈 곳이 없었다. 그림만 보여주고 끝나는 자리는 증거가 아니라 장식이다.
- /showcase 를 별도 페이지로 만들었다. 모자이크 그리드에 썸네일을 놓고
누르면 실제로 도는 사이트(/work/<slug>/)가 열린다.
- 사례 데이터를 src/data/work.ts 한 곳에 모았다. 항목 하나만 추가하면
그리드에 들어간다 — 페이지 코드는 건드리지 않는다.
- 첫 사례로 목요일의 화원(플로럴 스튜디오)을 넣고 실제 파일을
public/work/thursday-flowers/ 에 함께 싣는다.
- 홈에서 예전 섹션을 제거하고 내비를 /showcase 로 돌렸다.
본문 말투:
사이트 문장이 전부 반말이었고 일부는 내부 감사 로그처럼 읽혔다.
스킬 문서의 단정한 반말은 의도지만, 방문자를 향한 화면은 다르다.
제목은 단정문이 카피로서 힘을 가지므로 그대로 두고, 설명하는 문장과
명령형("~해라")을 전부 존댓말로 바꿨다. 실측 결과 홈·쇼케이스 모두 0건.
구현에서 걸린 것:
Base 레이아웃이 이미 <main class="page"> 를 제공하는데 새 페이지에서
또 감쌌다. 바깥 page 의 본문 칼럼(561px) 안에 안쪽 page 가 들어가
전 페이지가 좁아졌다 — 모자이크가 561px, 썸네일이 240px 이었다.
중첩을 걷어내자 1180px / 596px 로 돌아왔다.
301 lines
12 KiB
HTML
301 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="한 주에 한 번, 목요일에만 문을 여는 플로럴 스튜디오. 그 주에 좋은 꽃만 들여 주문받은 만큼만 만듭니다. 서울 서촌."
|
||
/>
|
||
<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>
|