Layout

사용 시기

/impeccable layout은 기술적으로 틀린 것은 없지만 숨 쉬는 것도 없는 페이지를 위한 것입니다. 어디나 같은 패딩, 단조로운 카드 그리드, 끝에서 끝까지 이어지는 콘텐츠, 크기에만 의존하는 계층. 레이아웃이 “어딘가 이상한데” 왜인지 말로 표현할 수 없을 때 사용하세요.

좋은 트리거: “모든 것이 답답해 보여요”, “벽처럼 읽혀요”, “어디부터 봐야 할지 모르겠어요”.

작동 방식

스킬은 5가지 레이아웃 차원을 검사합니다:

1. 간격: 간격 스케일이 일관적인지, 아니면 무작위 13px 갭이 있는지, 관련 요소가 그룹 내에서는 조밀하게 그룹 간에는 넉넉하게 묶여 있는지, 리듬이 전혀 없는지.
2. 시각적 계층: 시선이 2초 내에 주요 액션에 닿는지, 계층이 실제 일을 하고 있는지 아니면 모든 것이 소리치고 있는지.
3. 그리드와 구조: 기반 그리드가 있는지 아니면 무작위인지, 요소가 베이스라인에 정렬되어 있는지.
4. 리듬: 페이지가 조밀한 간격과 넉넉한 간격을 번가아 사용하는지, 아니면 모든 것이 균일한지.
5. 밀도: 레이아웃이 답답한지 낭비적인지, 밀도가 콘텐츠 유형에 맞는지.

수정은 보통 간격 스케일 재구축, 비대칭 도입, 단조로운 그리드를 히어로와 보조 요소가 있는 혼합 레이아웃으로 붕괴시키고, 주요 액션에 실제 공간을 부여하는 작업을 포함합니다.

직접 해보기

/impeccable layout the settings page

일반적 변경:

• 간격 스케일 8 / 16 / 24 / 48 / 96px로 통일
• 섹션 구분 48px, 행 갭 16px, 폼 필드 그룹 8px
• 주요 액션을 폼 흐름에서 분리하고 32px 버퍼 부여
• 장식적 보더 제거, 간격 기반 그룹핑으로 교체
• 사이드바와 메인 컬럼 비율 재조정(280 / flex vs 25 / 75)

주의 사항

• arrange와 distill 혼동하기. 문제가 너무 많은 것이라면 먼저 /impeccable distill을 실행하세요. Layout은 이미 올바른 구성을 정렬하는 것입니다.
• 부서진 그리드를 복구할 것으로 기대하기. 페이지에 그리드가 전혀 없다면 arrange가 하나를 만들 것입니다. 다만 diff가 예상보다 클 것이라는 점을 알아두세요.
• 계층 판정 무시하기. Arrange가 “주요 것이 없다”고 말하면 어떤 간격 작업으로도 해결되지 않습니다. 레이아웃 조정이 아닌 콘텐츠 결정이 필요합니다.