게슈탈트로 레이아웃 잡기

레이아웃이란?

공간 안에 어떻게 배치, 배열 할지를 정하는 것을 레이아웃이라고 합니다. 우선적으로 만들기 전에 어떤 식으로 레이아웃을 잡을지를 정해야 게슈탈트를 이용해서 만드는데 효율적입니다.

데스크톱과 모바일에서 어떻게 보일 지 레이아웃을 정해보았습니다.

이렇게 짠 후에는 어떻게 해야할까요?

박스와 컬럼

게슈탈트에는 레이아웃을 잡는 방법이 2가지 있습니다. Box와 Column입니다. Box에는 column이라는 속성이 있습니다. 0~12의 값을 넣으면 됩니다. Column에는 span이라는 속성이 있고 똑같이 여기에 0~12사이의 값을 넣으면 됩니다. 직관적으로 생각하시면 편합니다. 전체 차지하는 부분중에서 12는 전체를, 1은 1/12를 뜻합니다. 가져야 하는 공간안에서 숫자만큼의 넓이를 가집니다. 

박스와 플렉스박스

Box 컴포넌트에는 Column이라는 속성도 있지만 display라는 속성도 있습니다. 여기서 flex를 설정하고 배치를 할 수 있습니다. 얼마만큼의 공간을 차지하느냐는 Box의 column과 Column의 span을 이용하시고, 공간 안에 어떻게 배치할 것인가는 flex를 이용하시면 됩니다.

코드를 보시면 Box와 Heading, Text를 가져와서 박스로 레이아웃을 짜고 flex를 통해 배치했습니다. 일단은 이미지는 나중으로 미뤄두고 제목 부분만 만들어봤습니다. 박스 속성에 display 값을 flex를 주지 않으면 일반적인 블록형태로 배치됩니다. 즉 안의 컨텐츠들이 같은 줄에 놓이지 않고 아래로 쌓인다는 의미죠. 잊지말고 넣어주시고, justifyContent와 alignItems 속성을 주시기 바랍니다.(당연히 flex를 주지 않으면 flex와 관련된 속성들이 작동하지 않습니다.) 전체화면은 회색으로 감싸고 그 안에 컨텐츠 부분들은 최대 너비를 960px로 주었습니다. maxWidth={960}을 수정하면 최대너비가 수정됩니다.

기기에 따라 다른 값을 줄 수도 있습니다.

어떤 속성들은 기기에 따라 다른 값들을 줄 수 있습니다. 가령 Box 컴포넌트에 direction을 봐주세요.

direction 밑에 sm, md, lg가 붙은 것들이 보이시죠?

저런식으로 나눠져 있는 것들은 기기에 따라 다른 값들을 줄 수 있습니다. 가령 direction만 설정하면 모바일에서든 데스크톱에서든 똑같은 값으로 유지됩니다. 하지만 smDirection(또는 direction)은 column으로, mdDirection은 row로 설정하면 기본적으로는 column이지만 md에 속하는 태블릿 또는 그보다 큰 기기들은 row가 설정됩니다.

게슈탈트의 한계점

디자인도 마음에 들고 레이아웃을 잡는 방법도 여타 프론트엔드 프레임워크와 비슷해 익히기 쉽습니다. 그러나 줄 수 있는 값에 한계가 있다는 점에는 약간의 불만이 있습니다. 가령 색깔의 경우엔 할 수 있는 색들이 정해져있습니다.

이외의 색은 사용할 수 없습니다.

박스의 경우 그래도 선택권이 좀 있지만, 버튼 등에는 더 적은 색만 사용할 수 있습니다. 일부러 의도된 것이기야 하겠지만 좀 더 선택권이 늘어났으면 좋겠습니다.

다음 포스팅에서는 레이아웃안에 이미지들을 넣어보도록 하겠습니다.

공감은 제작자에게 큰 힘이 됩니다.