Divider는 어떻게 표현하는 게 좋을까?
디자인과 개발 사이 간극을 줄이기 위한 여정
피그마에서는 Divider 형태를 표현하는 여러 가지 방법이 존재합니다. 어떤 표현방법이 더 나을지 고민해보며 챙겨봤던 장단점을 정리해볼까 합니다.
'Divider'라는 것은 단어에서도 유추하실 수 있듯이 특정한 단락과 단락, 컨텐츠와 컨텐츠간의 구간을 나누는 일종의 구분선을 이야기합니다. 근데 문득 구글에 검색해보니 우리가 흔히 알던 '콤파스'를 디바이더라고 부르는 모양이더라구요.
너도 디바이더구나! 반가워!그럼 본론으로 돌아와서! 디바이더를 그리는 여러 가지 방법에 대해 이야기해 보겠습니다.
가장 간편한 첫 번째,
높이가 1px인 Rectangle을 길게 그리는 것입니다.
세상 쉬운 방법이죠..! 피그마를 쓰는 디자이너 입장에서의 접근성도 가장 좋은 방식이라고 생각하는데요.
레이아웃 사이에 자유자재로 집어넣을 수 있고, Auto-layout을 이용하면 배열 사이사이에도 쉽게 넣어줄 수 있습니다. 확대를 쪼금만 잘하면 마우스로도 잘 클릭할 수 있기도 하구요.
하지만 아무래도 높이라는 정보를 가지고 있는 레이어이기 때문에, 원치 않는 계산을 하게 될 수 있습니다.
저는 디자인을 하면서 주로 8px 그리드 원칙을 유지하려고 노력하는데, 특정한 컴포넌트를 제작할 때 이러한 디바이더가 중간에 끼어들게 되면 짝수로만 표현되던 규칙이 깨지게 되어 묘한 불-편함을 마주하는 상황이 있어서 동일하게 8px 그리드 원칙을 활용하시는 분들께는 단점이 될 수 있겠습니다.
두 번째,
1px인 Line을 그리는 것입니다.
이 방식도 Rectangle과 마찬가지로 객체를 그리는 방식이지만, 높이라는 정보 대신 Stroke의 굵기를 조정해주는 방식으로 두께를 제어합니다. 이 방식은 Auto-layout을 이용해서 배열에 넣어주더라도, 픽셀을 차지하지 않기 때문에 짝수 픽셀을 유지하며 디자인을 진행할 수 있죠.
높이를 차지하지 않지만, 대신 border로써 보여져야 하기 때문에, 어느 방향으로든 1px의 침범이 생기게 됩니다.
예를 들어, 24px 높이의 Table row가 있을 때, 이 사이에 디바이더를 Line 형태로 집어넣게 되면 23px의 row들을 가진 테이블이 되겠지요. 때로는 이 1px의 차이 때문에 미묘하게 내부 컨텐츠의 정렬이 틀어져 보이게 되는 케이스가 종종 있어서 주의가 필요하겠습니다.
앞서 소개한 형태로 특정한 레이어를 만들어 내는 것 외에도 방법이 존재하는데요,
세 번째,
Drop Shadow 효과를 1px 하단으로 주는 것입니다.
이러한 방식은 이미 만들어진 프레임이 있는 경우에 유용할 수 있는 방식인데요, 프레임 하단에 drop shadow 효과를 이용하면 따로 divider 레이어를 만들어 내지 않더라도 쉽게 이용할 수 있는 방식입니다. 피그마에서도 이 효과를 Effect style로 저장하여 쓸 수 있기 때문에 쉽게 적용할 수 있죠.
다만 이 방식은 프레임에 적용 시에 프레임의 fill color가 비어있으면 effect가 적용되지 않기 때문에 해당 프레임에 임의의 컬러를 0.001%의 오퍼시티로 fill 해주는 식으로 트릭을 사용해야 합니다.
또한 프레임 단위로만 디자인을 하지 않고 객체를 놓을 경우에는 디바이더를 일괄적으로 그릴 수 없다는 점이 있겠습니다.
사실 이러한 방식의 트릭을 사용했던 이유는 아마도 기존까지 Figma에서 각각의 방향에 stroke를 줄 수 없었기 때문에 사용되던 트릭이라고 생각했는데요...
네 번째,
이제는 최근 피그마에서 추가된 Individual stroke 기능을 이용해 디바이더를 표현할 수 있게 되었습니다.
각각의 방향에 Border를 추가할 수 있기 때문에 프레임에 drop shadow를 이용하는 것과 동일한 방식으로 표현할 수 있습니다. 대신 drop-shadow를 이용하는 경우에는 레이어 뒤쪽으로만 효과가 적용되기 때문에 바깥쪽으로만 디바이더를 표현할 수 있는데, 이 기능을 이용하면 안쪽으로도 디바이더를 그릴 수 있게 됩니다.
이 기능에도 여전히 프레임 단위를 묶어서 쓰지 않을 때에는 사용할 수 없다는 단점은 동일하지만, 오퍼시티를 채워 넣는 트릭은 사용하지 않아도 되니 세 번째 방법보다는 더 나을 수 있겠습니다.
그렇다면 어떤 방법이 가장 좋은 방법일까요?
모든 디바이더를 하나의 방법만으로 통일해 사용하기는 쉽지 않을 거 같습니다. Auto-layout과 엮여서 사용할 때, 프레임 단위로 묶인 작업물이 아닐 때 등 다양한 디자인 케이스가 존재하기 때문에, 또한 디바이더의 형태가 이렇게 하나만 있지 않는 경우 등등이 있기에 위에 소개드린 방법들을 잘 섞어서 써야 되겠습니다.
디자인 시스템을 만들고 있는 조직이라면 재사용성 또한 무시하지 못하는 포인트가 될 것 같습니다. 디바이더를 컴포넌트로 만들거나, 혹은 Effect style로 관리하는 게 더 편할 수도 있겠죠?
앞서 부제로 소개 드린 것처럼, 실제로 개발로 반영될 때에도 이 디바이더를 어떻게 구현하는지 방식이 각각 다를 수 있기 때문에 개발자분들과 함께 align을 맞춰보고, 장단점을 따져 볼 수도 있겠습니다.
여러분은 디바이더를 어떻게 그리고 계신가요? 소개드린 방법 외에도 새로운 표현 방식이 있다면 알려주세요!
