designpaca

여섯 단계

브리프 한 줄이 검증된 페이지가 될 때까지

각 단계에는 통과 조건이 있다. 통과하지 못하면 다음으로 가지 않는다. 아래는 실제로 이 스킬을 돌려 만든 커피 로스터리 랜딩에서 같은 브리프가 단계마다 무엇으로 변했는지다.

1. 브리프 게이트

   무엇을·누구에게·제약을 세 줄로 압축한다. 규모를 판정해 경로를 고른다.

   누구에게: 홈카페 3년차 이상. 산미와 로스팅 프로파일을 구분한다

2. 레퍼런스 조사

   실제로 존재하는 사이트 3개를 서로 다른 층위에서 고른다. 구조·톤·디테일.

   R2 = 독립 문학 출판사. 커피 업계 밖에서 톤을 가져온다

3. 방향 결정

   레퍼런스를 하나의 축으로 합성한다. 감수할 리스크를 하나 고른다.

   감상은 이름에만, 화면에는 수치만

4. 디자인 토큰

   코드를 쓰기 전에 숫자를 정한다. 성능 예산도 여기서 확정한다.

   --measure: 33em / --leading-normal: 1.7 / JS 예산 0KB

5. 구현

   레이아웃 → 재질 → 입체 → 모션 순서로. 이펙트를 다 꺼도 완성돼 있어야 한다.

   <h1>산미 8.5 · 바디 6.0 · 로스팅 라이트</h1>

6. 프리플라이트

   자기 결과물을 남의 것처럼 본다. 게이트 12개는 전부 '아니오'여야 한다.

   게이트 12/12 통과 · 슬롭 지문 0건 · 320px 오버플로 31px → 수정

여섯 단계 끝에 남는 것은 페이지 하나와 design.md 하나다. 다음 사람이 그 파일을 읽고 같은 결정을 이어간다.

이 페이지의 수치

카피만 고쳐서는 슬롭이 없어지지 않는다

문장을 다듬는 것으로 해결되는 것은 문장뿐이다. radius 어휘 수, 반투명 패널 개수, 타입 단계 수는 그대로 남는다. 그래서 이 페이지 자신의 형태 수치를 공개한다. 결과가 나쁘게 나와도 그대로 싣는다.

값은 프로덕션 빌드에서 측정한다. 아직 측정하지 않은 항목은 비워둔다 — 지어낸 숫자보다 구멍이 정직하다.

이 페이지를 만들며 실제로 걸린 것

남을 검사한 결과가 아니라 자신을 검사한 결과다.

• eyebrow 라벨이 6개 — 카운트 규칙 상한은 ceil(섹션 7 / 3) = 3개

  세 섹션만 남기고 나머지는 헤드라인만으로 구분했다. 라벨이 없어도 섹션은 읽힌다

• 스크롤 리빌에 clip-path 를 쓰려 했다 — 하드 게이트 8은 transform·opacity 만 허용한다

  덮개를 translateX 로 미는 방식으로 바꿨다. 보이는 결과는 같고, clip-path 보간 제약도 함께 사라졌다

• 구분선 색의 대비가 1.30:1 — 장식선으로는 괜찮지만 입력 테두리로 쓰면 WCAG 1.4.11(3:1) 위반

  6.11:1 짜리 별칭을 하나 더 두고 용도를 갈랐다. 새 색을 만든 게 아니라 팔레트 수는 그대로다

• 본문 컬럼이 960px — 우리가 정한 한 줄 길이(561px)를 넘는다

  그리드의 본문 폭을 --measure 로 바꿨다. 스킬 문서의 예시 코드도 같이 고쳤다

• 320px 에서 가로로 13px 넘쳤다 — 표를 overflow 컨테이너로 감쌌는데도

  grid item 의 기본 min-width 는 auto 라 콘텐츠가 부모를 밀어낸다. min-width:0 을 걸어야 overflow-x 가 실제로 작동한다

• 다크 밴드 안 버튼의 대비가 2.88:1 — 기준은 4.5:1

  밴드가 강조색만 반전시키고 그 위 글자색은 흰색 그대로였다. 반전 대응 토큰을 하나 더 두고 함께 바꿨다

• 스크롤을 끝까지 내려도 파이프라인 6단계 중 뒤 3개가 opacity 0 으로 남았다 — 이 페이지의 본체가 절반 사라졌다

  animation-range 의 cover 22% 에 페이지 하단 요소는 영영 도달하지 못한다. 이펙트를 끄면 보이지만 켜면 사라지는 것은 폴백이 있는 것과 다르다. 연출을 뺐다

일곱 건 모두 만들면서 걸린 것이고, 걸린 뒤에 고쳤다. 마지막 셋은 정적 검사로는 안 잡히고 320px 실렌더에서만 나왔다.

한글 조판

라틴 기준으로 만든 도구는 한글에서 멈춘다

영어권 디자인 도구는 한글 조판 규칙을 갖고 있지 않다. 9~11px 텍스트는 라틴에서 라벨이지만 한글에서는 읽을 수 없다. line-height 1.5는 라틴에서 표준이지만 한글에서는 답답하다.

가장 자주 깨지는 것은 줄바꿈이다. 기본값은 단어 중간에서 줄을 끊는다. 아래 두 문단은 같은 글자, 같은 폭, 같은 폰트다. 차이는 word-break 한 줄뿐이다.

• word-break: keep-all — 없으면 단어가 아무 데서나 잘린다
• line-height 1.6~1.8 — 라틴보다 넉넉하게
• 음수 자간 금지 — 한글은 이미 고정폭에 가까워 즉시 뭉개진다
• 한 줄 25~40자 — 라틴 기준 65~75자를 그대로 쓰면 너무 길다
• 한글 폰트를 지정하지 않는 것 자체가 완성도 미달 신호다

규칙마다 왜 그런지 적혀 있다

근거 없는 금지는 지켜지지 않는다. 사용자가 명시적으로 요구하면 규칙보다 그쪽이 이긴다.

레퍼런스 없이 시작하지 않는다

머릿속 기본값에서 출발하면 결과는 그 카테고리의 평균이 된다.

강조색은 하나다

두 개가 필요하다고 느끼면 위계 설계가 실패한 것이다.

대담함은 한 곳에만

두 곳에서 소리치면 둘 다 죽는다.

화려함은 4순위다

심사 배점이 Design 40 / Usability 30 / Creativity 20 / Content 10이다.

지어낸 수치를 쓰지 않는다

숫자 모양의 구멍은 정직하고, 지어낸 숫자는 신뢰를 깎는다.

이펙트를 다 꺼도 완성돼 있어야 한다

그 상태가 모든 폴백의 기반이다. 무너지면 이펙트가 구조를 대신하고 있는 것이다.