컴포넌트는 웹이나 내이티브앱 모두 기본적으로 css의 display: block; 과 같은 속성을 지니고 있다. 이름에서 알 수 있듯 블록 속성의 특징은 레고 블록처럼 위아래로 쌓이는 구조를 가지고 있는데, 기본적인 특징은 아래 3가지 정도로 추려볼 수 있다.

1. 화면(viewport width)을 꽉채우려는 성질
2. 필요한 만큼(컨텐츠의 높이) 만큼만 늘어나려는 성질
3. 블록처럼 아래(block 방향)로 차곡차곡 쌓이려는 성질

개발에서는 각 컴포넌트들을 불러온 후 나열 하기만하는 방식이 제일 단순하면서 깔끔한 방식이고, 컴포넌트의 순서를 바꾸거나 특정 상황에서 컴포넌트를 숨기거나 보여줄 때도 유리하다.

하지만 디자이너가 이런 구조를 고려하지 않고 디자인 가이드를 만드는데서 많은 구조적인 복잡함이 생긴다. 몇몇 케이스를 바탕으로 어떤 문제가 발생하는지, 그래서 디자인 컴포넌트는 어떤 구조로 만들어야 하는지 정리해보려고 한다.

1. 몇가지 지양해야 할 디자인 가이드 사례

1-1. 컴포넌트에 마진 적용 or 컴포넌트를 감싸고 있는 부모 엘리먼트에 패딩,간격을 적용한 경우

기껏 컴포넌트들을 구성해놓고 여러 컴포넌트를 구성하는 과정에서 또 패딩이나 간격을 주게되면 코드의 복잡도를 떠나 몇가지 문제가 발생한다.

1. 캐로셀 컴포넌트에서 좌우 마진(=부모 엘리먼트의 패딩) 영역만큼 캐로셀 아이템이 잘리고, 드래그 제스쳐도 안되는 현상. 캐로셀 컴포넌트에 overflow:visible; 처리를 하는 방법도 있긴 하겠지만, 컴포넌트 자체에 캐로셀 패딩을 두고, 해당 캐로셀 컴포넌트는 화면의 좌우를 다 쓰게 하는게 이 문제를 근본적으로 해결하는 방식임

2. 컴포넌트 혹은 엘리먼트마다 패딩을 다르게 써야할 때, 여러번(첫번째 이미지의 분홍+녹색 부분) 겹쳐서 적용해야 함. 근본적으로 화면의 좌우에서 떨어지는 간격은 컴포넌트의 패딩 하나만으로 조절하고, 상황에 따라 값을 다르게 써야할 경우 해당 컴포넌트에 조절가능한props (예를 들면, 3,6,9,12,18 등 3배수)로 두는 방식을 적용하면 됨.

네모와 원의 크기가 같아 보이게 하기 위해서 원을 좀 더 크게 적용하듯이, radius가 있는 네모의 경우에 radius의 정도에 따라 주변 엘리먼트(eg. 텍스트)를 들여쓰는 쪽이 시각적인 안정감이 생긴다.

1-2. 컴포넌트의 상하 패딩을 비대칭으로 할 경우

일정하게 필요한 간격은 아니지만 특정 상황에서 간격을 띄울 필요가 있을 때, 디자이너들이 비대칭적으로 상∙하패딩을 지정하는 경우가 꽤 많다. 하지만 이렇게 구현될 경우 컴포넌트의 순서를 바꾸거나 할 때 오른쪽 위 이미지처럼 문제가 발생한다. 우리가 구현하고자하는 간격은 결국 빈 공간이기 때문에 spacer(h+높이값)라는 컴포넌트를 만들어서 특정 위치에 채워넣거나, '특정 컴포넌트 아래는 spacer() 컴포넌트도 같이 추가한다'라는 조건을 만드는 방식으로 충분히 해결할 수 있다.

1-3. safeArea

간혹 NavigationBar, TabBar를 컴포넌트화해서 디자인할 때 safeArea(StatusBar, HomeIndicator) 영역을 미리 계산해서 특정값으로 padding을 정의하는 경우를 발견할 때가 있다. 심지어 디자인 컴포넌트에 StatusBar나 HomeIndicator를 넣어두는 경우도 있다. 하지만 StatusBar와 HomeIndicator의 경우 기종에 따라서 달라지기도 하고, 언제 없어지거나 생겨날 지 모르기 때문에 이런 방식은 위험하다.

그렇기 때문에 safeArea 영역을 제외한 대칭적인 padding을 가진 컴포넌트를 만든뒤, 위∙아래 중 safeArea가 있을 경우 그만큼 env(safe-area-inset-bottom) 을 padding으로 더하는 방식으로 정의하면 된다.

.btn {
  padding-bottom: calc(env(safe-area-inset-bottom) + 15px);
}

safeArea에 관한 좀 더 자세한 내용

1-4. 간격

viewport 사이즈를 꽉채우는 일반적인 컴포넌트일 때 auto layout을 auto로 배분하거나 안에 들어가는 텍스트를 hug content(텍스트 길이에 따라 가변)로 둘 경우 다음과 같은 상황에서 문제가 생긴다.

• 텍스트가 길어질 경우
• 컴포넌트의 width가 작아질 경우

그렇기 때문에 이런 컴포넌트 유형에서는 사이즈가 고정이거나 필요한 길이만큼 가변적이어야 하는 엘리먼트(eg. 버튼)를 제외하고는 fill container(css에서는 1fr, 100%, 등)로 지정 후 필요한 간격을 부여하는 방식으로 정의하는게 좋다.

좀 더 깊게 들어가면 display: flex;에서 flex-grow와 flex-shrink의 정도를 조절하는 방법도 있긴한데, 자세한 내용은 여기를 참고하면 좋을 것 같다.

가끔 좌∙우에 서로 다른 사이즈의 엘리먼트가 있고, 타이틀 텍스트 같은 엘리먼트를 중앙에 배치해야할 경우에는 타이틀 텍스트는 display: absolut;로 지정하고, 레이아웃 간격은 auto로 지정하는 방법 밖에 없긴하다.

2. 마무리

1) 커뮤니케이션 비용을 최소화하기 위한 위지윅한 개발, 2) 여러 환경과 변수들에 대한 대응이 매끄러우려면 디자인 컴포넌트 자체를 간결하고 확장성 있게 구성하는 방법이 제일 중요한 것 같다.

wrap이나 min/max width와 같이 더 다뤄야할 내용들도 많지만, 컴포넌트를 어떻게 구성해야 하는지 개념 정도만 이해하고 넘어가도 충분할 것 같아서 이정도에서 마무리하려고 한다.

(혹시나 틀린 내용이 있거나 더 좋은 개념이 있다면 의견 부탁드립니다)