한 줄 요약
자주 쓰는 배치 규칙을 작은 부품으로 만들어 두면, 새 페이지는 부품을 조합하기만 하면 됩니다.
비유로 이해하기
조립식 가구는 같은 규격의 선반, 서랍, 문짝을 조합해 책장도 만들고 수납장도 만듭니다. 레이아웃도 몇 가지 부품만 잘 만들어 두면 대부분의 화면을 조립할 수 있어요.
예를 들어 스택(Stack)은 위아래로 같은 간격을 두고 쌓는 부품, 클러스터(Cluster)는 태그나 버튼처럼 옆으로 모였다가 넘치면 줄바꿈하는 부품입니다.
비교해 보기
- 매번 새로 만들기: 페이지마다 간격이 조금씩 달라지고, 수정할 곳이 많아집니다.
- 부품으로 조립하기: 간격 규칙이 한 곳에 있어서 한 번 고치면 전체가 같이 바뀝니다.
직접 실행해 보기
.stack 상자에 style="--space: 40px"를 넣어 보세요. 선반 사이 간격이 한 번에 바뀝니다. 클러스터에 칩을 몇 개 더 넣어 줄바꿈도 확인해 보세요.
GenerateBlocks에서는
GenerateBlocks에서는 잘 만든 섹션을 ‘패턴’으로 저장하거나 글로벌 스타일로 등록해 부품처럼 재사용할 수 있습니다. 이 글 하단의 시리즈 목록도 패턴 하나를 10편에 똑같이 넣은 거예요.