From 61fb0cdcfa4eee6a06451d6feaa9e0288cc705e3 Mon Sep 17 00:00:00 2001 From: Yun Chan Date: Thu, 20 Aug 2026 21:56:01 +0900 Subject: [PATCH] =?UTF-8?q?=EC=B9=B4=ED=94=BC=EB=A5=BC=20=ED=98=9C?= =?UTF-8?q?=ED=83=9D=20=EC=A4=91=EC=8B=AC=EC=9C=BC=EB=A1=9C=20=EA=B3=A0?= =?UTF-8?q?=EC=B9=98=EA=B3=A0,=20=ED=95=84=ED=84=B0=20=EB=8D=B0=EB=AA=A8?= =?UTF-8?q?=EB=A5=BC=20=EC=8B=A4=EB=AC=B4=20=EC=86=8C=EC=9E=AC=EC=97=90=20?= =?UTF-8?q?=EA=B1=B4=EB=8B=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 지적 세 가지를 전부 확인했고 실제 결함도 하나 나왔다. 1. 재료 섹션 h2 가 아무것도 전달하지 않았다 '표면은 CSS 가 정하고, 공간은 GPU 가 맡는다' 금칙어도 없고 치환 테스트도 통과하는데 독자가 얻는 게 없다. 구현 이야기를 대구로 포장한 것이었다. -> '텍스처 200KB 를 300바이트가 대신한다' 카피라이팅 방법론(so you can 테스트 / 6~12단어 / 검증 가능한 수치)을 찾아 적용했다. 우리 antipatterns 의 카피 절은 금지 목록뿐이라 이런 문장을 못 잡는다 — 작법 절을 새로 넣었다. 2. 필터 데모가 줄무늬였다 필터가 무엇을 하는지는 보이지만 왜 쓰는지는 안 보인다. 각 필터를 실제로 걸리는 자리로 옮겼다. 그레인 -> 매끈한 그라디언트 (없으면 밋밋하다는 대비) 굴절 -> 글자 (유리 뒤가 실제로 휘는 것) 듀오톤 -> 사진풍 면 (한 팔레트로 묶이는 것) 타일마다 '언제 쓰는가' 한 줄을 추가했다. 3. 그레인 필터가 아무 효과도 못 내고 있었다 feComposite in='SourceGraphic' in2='soft' operator='over' 는 원본을 노이즈 위에 올린다. 노이즈가 통째로 가려진다. 에러도 경고도 없이 조용히 죽는다. feBlend overlay 로 바꾸고 baseFrequency 0.9 -> 0.62. 섹션 간 검은 띠도 고쳤다. 파이프라인 캔버스가 섹션 패딩(112px) 아래에서 시작해 히어로 배경이 끝난 자리와 사이에 200px 이 비었다. 스킬 antipatterns.md 카피 작법 — 금지 목록만으로는 못 잡는 실패 svg-filters.md 데모는 실무 소재에 · feComposite 입력 순서 함정 --- apps/site/src/components/Hero.astro | 8 +-- apps/site/src/components/Materials.astro | 65 +++++++++++++++++++---- apps/site/src/components/Pipeline.astro | 23 +++++++- apps/site/src/i18n/content.ts | 56 ++++++++++--------- packages/skill/references/antipatterns.md | 34 ++++++++++++ packages/skill/references/svg-filters.md | 47 ++++++++++++++++ 6 files changed, 192 insertions(+), 41 deletions(-) diff --git a/apps/site/src/components/Hero.astro b/apps/site/src/components/Hero.astro index c625e94..93068ca 100644 --- a/apps/site/src/components/Hero.astro +++ b/apps/site/src/components/Hero.astro @@ -55,10 +55,10 @@ const { c, ui } = Astro.props; position: relative; isolation: isolate; overflow: clip; - min-height: min(78dvh, 46rem); + min-height: min(72dvh, 42rem); display: grid; align-content: center; - padding-block: calc(var(--header-h) + var(--space-6)) var(--space-7); + padding-block: calc(var(--header-h) + var(--space-6)) var(--space-6); } /* ---- 배경 ------------------------------------------------ */ @@ -72,8 +72,8 @@ const { c, ui } = Astro.props; /* 아래로 갈수록 지운다. black 은 색이 아니라 마스크 알파다. 없으면 히어로 하단에서 배경이 가로선으로 뚝 끊겨 다음 섹션과 두 장의 종이처럼 보인다. */ - -webkit-mask-image: linear-gradient(to bottom, black 0%, black 82%, transparent 100%); - mask-image: linear-gradient(to bottom, black 0%, black 82%, transparent 100%); + -webkit-mask-image: linear-gradient(to bottom, black 0%, black 97%, transparent 100%); + mask-image: linear-gradient(to bottom, black 0%, black 97%, transparent 100%); } .hero-fallback, .hero-canvas, diff --git a/apps/site/src/components/Materials.astro b/apps/site/src/components/Materials.astro index 2dfd10b..7d2f48d 100644 --- a/apps/site/src/components/Materials.astro +++ b/apps/site/src/components/Materials.astro @@ -26,8 +26,11 @@ const { c } = Astro.props; { c.tiles.map((t, i) => (
  • - +

    {t.name}

    +

    {t.use}

    {t.how}

    {t.cost}

    • @@ -43,13 +46,20 @@ const { c } = Astro.props;