레이아웃
레이아웃 (Layout)
공간 레이아웃(spatial layout)은 체계적인 비주얼 디자인의 출발점이에요. 전통적인 그래픽 디자인과 다른 점은, UI 인터페이스의 레이아웃 공간이 역동적이고 체계적인 관점에 기반해야 한다는 거예요. 우리는 건축가 르 코르뷔지에(Le Corbusier)의 건축 윤리에서 영감을 받아 UI 디자인에서 역동적인 공간 질서를 탐구했고, '질서의 아름다움(beauty of order)' 원칙에 기반해 Ant Design의 인터페이스 레이아웃을 형성했어요. 이로써 디자이너가 합리적 아름다움을 갖춘 공간 레이아웃을 만들 수 있게 됐죠.
출처: 문서
본문
비주얼 시스템에서 레이아웃 시스템을 정의할 때, 다음 5가지 관점에서 시작할 것을 제안해요.
- 통일된 캔버스 크기 (Unified Canvas Dimension)
- 적응 (Adaptation)
- 그리드 단위 (Grid Unit)
- 래스터 (Raster)
- 공통 스케일 (Common Scales)
통일된 디자인 보드 크기 (Unified Design Board Dimension)
커뮤니케이션 비용을 최소화하려면 조직 내에서 디자인 보드의 크기를 통일하는 것이 필요해요. 예를 들어, Ant Design 팀의 통일된 디자인 보드 너비는 1440이에요.
적응 (Adaptation)
디자인 과정에서 디자이너는 적응(adaptation)의 개념도 세워야 해요. 시스템이 적응되어야 하는지 여부는 구체적인 상황에 따라 결정되고, 어떤 블록들이 동적 레이아웃을 필요로 하는지 같은 것들이요. 통계에 따르면 주류 화면 해상도에는 1920, 1440, 1366이 포함되고, 일부 기기는 여전히 1280 해상도를 사용해요.
Ant Design의 두 가지 대표적인 적응 유형:
1. 좌우 레이아웃 (Left-Right Layout)
좌우 레이아웃 디자인 스킴에 흔히 사용돼요. 일반적인 방식은 왼쪽 내비게이션 바를 고정하고 오른쪽 작업 영역을 동적으로 확장·축소하는 거예요.
2. 상하 레이아웃 (Top-Bottom Layout)
상하 레이아웃 디자인 스킴에 흔히 사용돼요. 양쪽 여백 영역의 최소값을 정의하는 방식이에요. 여백 영역이 한계값에 도달한 후에는 중간 메인 콘텐츠 영역을 동적으로 확장·축소해요.
위는 단순한 두 가지 적응 아이디어일 뿐이에요. 완벽한 적응 프로그램을 실제로 설계하려면 디자이너가 프런트엔드 관점, 평면 구성 관점, 상호작용 관점을 모두 가져야 해요.
그리드 단위 (Grid Unit)
Ant Design은 그리드 시스템을 사용해 비주얼 시스템의 질서를 구현해요. 그리드의 기본 단위는 8로, 짝수 사고(ideas)와도 맞고 대부분의 주류 디스플레이 기기와도 맞아요. 그리드 시스템 사고는 디자이너가 레이아웃 공간에서 디자인 결정을 빠르게 내리도록 돕고, 디자이너와 개발자 사이의 커뮤니케이션을 단순화해 줘요.
래스터 (Raster)
Ant Design은 24그리드 아키텍처를 사용해요. 1440 상하 레이아웃 구조를 예로 들면, 너비 1168의 콘텐츠 영역이 24개 그리드로 나뉘어요. 페이지에서 그리드의 Gutter 값을 설정해서, 브라우저가 일정 범위 안에서 확대·축소될 때 그리드의 컬럼 너비도 그에 따라 확대·축소되지만 Gutter의 너비는 항상 고정돼요.
개발자에게 그리드는 동적 레이아웃을 구현하는 방법이지만, 디자이너의 그리드 이해는 그래픽 디자인의 그리드에서 비롯돼요. 관점의 차이는 편차를 낳고 궁극적으로 비주얼 복원도(visual restoration)에 영향을 주며, 커뮤니케이션 비용을 늘려요.
Ant Design의 디자이너는 엔지니어와의 커뮤니케이션에서 다음 4가지를 염두에 둬요.
- 동적 레이아웃 영역의 명확한 정의
- 항상 짝수를 사용하려고 노력
- 중요한 숫자(Gutter, Column)의 전달
- 블록을 정의할 때 항상 시작 컬럼과 끝 컬럼 사용
공통 스케일 (Common Scales)
AntFin의 프로젝트는 다양한 유형, 심지어 다른 규모(orders of magnitude)의 많은 제품을 아우러요. 다양한 레벨의 디자이너가 페이지 레이아웃을 설계할 때 일관성과 유사한 리듬을 갖도록 돕고, 디자인 언어를 통일하며 복원 손실을 줄이기 위해, Ant Design은 UI 공통 스케일 개념을 제안했어요. 많은 실무 경험에서 UI 레이아웃 결정의 치수로 쓸 수 있는 배열 세트를 추출했어요. 모든 숫자는 8의 배수이고 역동적인 리듬감을 가져요. 검증 결과, 이것은 레이아웃 디자인의 더 빠르고 더 나은 디자인 결정을 이루는 데 도움을 줘요.
영감이지, 제한이 아니다 (Inspiration, But Not Limitation)
레이아웃 공간에서 Ant Design의 결과물은 디자인 출력을 제한하는 것이 아니라, 디자이너가 더 잘하도록 안내하는 거예요. 두 8배 배열은 순열과 조합으로 무수한 가능성을 만들 수 있지만, "단순히 순열을 적용하는 것"과 "정말 잘 설계된 것" 사이에는 차이가 있어요. 아름다움을 추구하면서 사용 가능성(availability)도 고려해야 해요. 우리는 여전히 합리적이면서도 우아한 디자인 시스템을 이루는 길 위에 있어요. 엔터프라이즈급 애플리케이션 인터페이스 레이아웃에는 아직 탐구할 것이 많아요.