feat: strengthen design skill and refresh all showcases

packages/skill/references/presets/editorial.md

@@ -6,15 +6,15 @@
 
 - 콘텐츠(글·사진·작업물)가 실제로 있고 그것이 설득의 주체일 때
 - 브랜드·미디어·포트폴리오·럭셔리·문화 기관
-- **쓰지 마라**: 기능이 많은 제품, 전환이 목적인 랜딩, 데이터 밀도가 높은 화면
+- 기능이 많은 제품·전환 랜딩·데이터 밀도 화면도 콘텐츠의 읽기 리듬과 인쇄 어휘가 과업을 돕는지 검토한다. 정보 입력·비교·반복 행동이 주역이면 이 프리셋의 여백·서체·이미지 비중을 그 역할에 맞게 줄이거나 다른 구조를 택한다.
 
 ## 결정
 
 ### 타이포그래피
 - 세리프 또는 고대비 산세를 주역 후보로 둔다. 대상 언어의 glyph·작은 크기·긴 읽기에서 더 잘 작동하는 쪽을 선택한다.
-- 비율 **1.333~1.618** — 헤드라인과 본문의 차이를 크게 벌린다
+- 비율 **1.333~1.618**은 헤드라인과 본문 차이를 검토하는 출발 후보다. 실제 언어·폭·위계에서 필요한 차이를 확인해 정한다.
 - 본문 `--measure`는 상대적으로 좁은 값에서 시작하고, 라틴 60~68자·한글 25~35자는 후보 범위로만 쓴다. 글꼴·언어·확대 상태의 실제 문단으로 확정한다.
-- 웨이트는 2개면 충분(Regular + 하나). 굵기로 소리치지 않는다
+- Regular + 하나는 관리하기 쉬운 시작점이다. 역할·언어·실제 위계가 더 많은 웨이트를 요구하면 전송량과 렌더를 확인해 추가한다.
 
 | 슬롯 | 무료 | 유료 | 한글 |
 |---|---|---|---|
@@ -24,11 +24,11 @@
 ### 색
 - 종이 같은 따뜻한 배경과 순백 모두를 콘텐츠·이미지·브랜드 대비로 비교한다. `#fbfaf8`, `#f7f5f0`은 출발값 후보일 뿐이다.
 - 잉크는 순흑과 근접색을 실제 대비·주변 이미지·긴 읽기에서 비교한다.
-- 강조 역할이 필요하면 **한 색을 작게** 쓴다. 강조색이 없어도 되며, 링크·인용·페이지 번호의 구분은 대비·밑줄·위치로도 만들 수 있다.
+- 강조색의 면적은 역할과 실제 대비로 정한다. 넓은 specimen field나 이미지 배경도 브랜드·위계·접근성을 지지하면 쓸 수 있으며, 링크·인용·페이지 번호는 대비·밑줄·위치로도 구분할 수 있다.
 
 ### 간격
 - **여백이 콘텐츠다.** 섹션 간격을 본문 간격의 5~6배까지 벌려도 된다
-- 비대칭을 적극적으로 — 본문을 그리드 왼쪽 2/3에 두고 오른쪽을 비우거나, 캡션을 여백에 흘린다
+- 초점·균형·내용 군집에 도움이 될 때 비대칭을 검토한다 — 본문을 그리드 왼쪽 2/3에 두고 오른쪽을 비우거나, 캡션을 여백에 흘릴 수 있다
 - 이미지는 본문 폭을 넘어가게(`wide`/`full`) 두어 리듬을 만든다
 
 ### 재질 (`svg-filters.md`)
@@ -43,13 +43,13 @@
 
 ## 흔한 실패
 
-1. **세리프를 썼는데 여백이 좁다** → 세리프는 숨 쉴 공간이 없으면 그냥 답답해진다
-2. **강조색을 넓게 칠했다** → 에디토리얼의 색은 점이지 면이 아니다
-3. **모든 이미지를 같은 크기로 넣었다** → 크기 차이가 리듬이다
-4. **본문 폭이 넓다** → 이 프리셋에서 가장 자주 나오는 실패
-5. **한글에 라틴 세리프만 지정** → 한글이 시스템 기본으로 떨어져 전부 무너진다
+1. **세리프의 실제 글자·행간·정보 밀도를 보지 않고 여백만 좁혔다** → 대표 문단과 캡션에서 획·속공간·줄 추적을 확인한다
+2. **색면이 본문·행동과 경쟁하거나 대비를 깨뜨린다** → 면적·인접색·읽기 상태에서 다시 비교한다
+3. **이미지 역할을 보지 않고 같은 크기만 반복했다** → 시퀀스·비교·크롭의 역할을 확인해 크기 변주가 필요한지 정한다
+4. **본문 폭이 넓어 줄 추적이 어려워진다** → 실제 문단·언어·확대 상태에서 measure를 다시 정한다
+5. **한글 fallback을 확인하지 않았다** → 의도한 fallback인지 glyph·위계·줄바꿈을 실제 렌더에서 확인한다
 
-## 리스크 후보 (2단계에서 하나 고른다)
+## 리스크 후보 (2단계에서 필요할 때 하나 고른다)
 
 - 히어로에 이미지 없이 **타이포그래피만**
 - 본문 폭을 극단적으로 좁히고 여백에 주석을 흘리기