UI 레이아웃 구성에 관한 일반화된 모델 구축
전문가가 아닌 일반 사용자들이 콘텐츠를 구성하고자 할 때 동작하는 방식의 토대를 정의하고자 함. 이 모델을 통해 아래와 같은 결과물을 쉽고 빠르게 만들 수 있어야 함.
홍보용 포스터
웹 홍보용 콘텐츠
웹 배 65A8
웹 팝업
이 결과물을 만들기 위해 아래 요구사항을 충족해야 함.
- 멘탈 모델과 최대한 유사: 콘텐츠를 봤을 때 직관적인 느낌으로서의 구조와 콘텐츠를 만들어가는 과정이 일치해야 함. 5살 아동에게 위 콘텐츠를 배껴서 그려라고 할 때 어떤 과정으로 그릴지를 계속해서 상상하자
- 반응형: 모든 콘텐츠는 컨테이너의 가로/세로 사이즈가 변동될 때 적절하게 배치되거나 크기가 조절되어야 함 (예: X 버튼은 전체 컨테이너의 우상단에 고정되어야 함.)
- 템플릿: 모든 콘텐츠는 템플릿 기반임. 템플릿은 콘텐츠를 생산하기 위한 일종의 틀이며, 템플릿 생산자(Creator)와 소비자(Consumer)가 뚜렷히 구별
- 생산자와 소비자의 에디터는 다를 수 있음. (템플릿과 콘텐츠, 각각 구성하고자 할 때 필요한 정보가 다름)
- 생산자는 템플릿에 의도와 제한을 추가함.
- 소비자는 템플릿의 의도에 맞게 콘텐츠를 구성해야 함.
- 소비자는 원한다면 템플릿을 수정할 수 있음.
- 콘텐츠의 배치: relative 혹은 absolute 하게 배치될 수 있음. 마찬가지로 멘탈 모델과 최대한 유사해야 함.
- Row
- Column
- Stack
- rust 로 만들어볼까?
- 다른 레이아웃 시스템을 배껴오자.
- "적당히"를 표현할 수 있는 수단 마련하기. 예를 들어 웹 배너는 화면이 좌우로 늘어날 때 콘텐츠는 가운데에 고정되어 있어야 하는데, 이를 쉽게 표현하기가 힘듬
- 각각의 요소는 인터랙티브할 수 있어야 함.
- 웹 상에서 잘 노출되어야 함.