복잡한 테이블 테두리, 피그마에서 깔끔하게

테이블 셀 작업 시 테두리가 2px로 중첩되는 문제, 이렇게 해결하세요.

피그마 테이블 테두리, 저처럼 고생하셨나요?

디자인 작업을 하다 보면 유독 테이블(표) 작업에서 골치를 겪었다. 특히 테두리 문제. 테두리를 inside 1px로 작업하면 셀이 만나면 2px가 되며 두께가 두배가 된다.. 이러한 경험을 겪은 사람들이 분명 있을 것이다. 그럼 center로 보더를 하자니.. 그럼 또 여러개의 테이블이 모였을 때 clip contents가 안된다.

나와 같은 문제를 겪는 디자이너가 분명 있을 것 같아, 이 문제를 해결하며 스터디한 내용을 기록해 본다.

1. 첫 번째 문제: 겹쳐서 2px가 되는 테두리

처음엔 나도 그랬다. 각 셀 컴포넌트에 1px짜리 inside stroke를 주는 게 가장 깔끔하며 흔히 사용하는 방법이였다. 하지만 셀들을 붙여 테이블을 만들고 나니, 셀과 셀이 만나는 모든 경계선이 2px로 두꺼워진다.

알고 보니 개발에서는 border-collapse라는 속성으로 이 문제를 해결한다고 한다.

(관련 링크 : https://developer.mozilla.org/ko/docs/Web/CSS/Reference/Properties/border-collapse)

쉽게 말해 인접한 테두리를 하나로 합쳐주는 기능이다. 여기서 아이디어를 얻었다. "피그마에서도 이 원리를 흉내 내면 어떨까?"

해결법: 'ㄴ'자 보더 각 셀 컴포넌트가 모든 테두리를 갖는 게 아니라, 오른쪽과 아래쪽에만 1px 테두리를 갖도록 만들었다. 이렇게 'ㄴ' 모양의 테두리를 가진 셀들을 오토레이아웃으로 쌓으면 모든 경계선이 깔끔한 1px로 맞춰진다. 위 셀의 아래쪽 보더가 바로 밑 셀의 위쪽 경계선이 되어주기 때문이다.

2. 두 번째 문제: 지저분한 '선택' 상태

테두리 문제를 해결하고 나니, 이번엔 셀을 '선택'했을 때가 문제였다. 처음엔 셀 컴포넌트에 Selected 베리언트를 추가해서 파란색 테두리를 주는 방식을 생각했다. 하지만 이 방식은 곧 더 큰 문제들을 가져왔다.

내가 겪은 문제점 시각적 오류: 셀 2개를 나란히 선택했다고 가정해 보자. 각 셀에 따로 테두리가 생기니, 두 셀이 만나는 가운데 부분에 불필요한 파란색 선이 생겼다. 원래 선택 영역은 외곽선만 깔끔하게 보이면 된다.

유지보수의 비효율: 이 문제를 해결하자고 '왼쪽 모서리용', '중간용', '오른쪽 모서리용' 베리언트를 다 만드는 건... 너무 잔업과 나의 손이 많이가며 작업 시간이 많이 든다. 유지보수가 불가능한 컴포넌트 작업 반복이 될 게 뻔했다.

따라서 내린 결론은 "셀이 스스로 선택 상태를 갖는 게 아니라, 테이블 위에 '선택 영역'이라는 투명한 레이어를 하나 씌우자" 였다.

해결법: '단일 오버레이' 배경은 없고 테두리만 있는 'Selection' 컴포넌트를 따로 만들었다. 그리고 셀을 선택할 땐, 이 'Selection' 컴포넌트 단 하나의 크기를 조절해서 원하는 영역 위로 덮어주는 것이다. 이렇게 하니 여러 셀을 선택해도 내부 경계선 없이 외곽선만 깔끔하게 표현되었고, 수많은 베리언트를 관리할 필요도 없어졌다. 유지보수가 훨씬 효율적으로 변했다.

정리하며

복잡해 보였던 테이블 테두리 문제는 결국 두 가지 아이디어로 해결할 수 있었다.

기본 테두리는 'ㄴ'자 보더로.

선택 상태는 '단일 오버레이'로.

이 방식은 피그마에서 시각적으로 매우 깔끔하뿐만 아니라, 레이어 정리도 용이하다. 혹시 나와 같은 고민을 하고 있었다면, 이 방법이 작은 도움이 되었으면 좋겠다.