이번에 디자인 시스템 정리를 하면서 멘토님께 박스 스타일 같은 걸 컴포넌트로 만들어 두면 좋겠다는 조언을 들었다.
처음에는 나도 그냥 Box, Stack, Inline 같은 걸 만들면 되는 거 아닌가 생각했다. 화면마다 padding이나 gap이 조금씩 다르기도 했고, 비슷한 목록이나 폼도 여러 개 있었으니까. 한 번 만들어 두면 나중에 화면 만들 때마다 똑같은 스타일을 다시 맞추지 않아도 될 것 같았다
근데 실제로 KOSMO에 넣으려고 보니까 생각보다 애매했다.
겉으로 비슷한 목록 행도 역할이 다 달랐다. 어떤 건 설정으로 이동하는 버튼이고, 어떤 건 프로필 정보를 보여주는 항목이고, 어떤 건 눌렀을 때 selected 상태나 loading 상태까지 같이 바뀌어야 했다. padding과 gap은 비슷해도 divider, 색상, 긴 텍스트 처리, 접근성 역할은 다를 수 있었다.
이걸 전부 하나의 ListRow나 Box로 만들면 처음에는 편해 보여도 나중에 옵션이 계속 늘어날 거 같았다. divider는 이 경우에만, selected는 저 경우에만, padding은 또 따로… 이런식으로 되면 결국 공용화한 의미가 별로 없어질 수도 있고
그래서 이번에는 공용화도 다 같은 방식으로 하면 안 되겠다고 생각했다.
그냥 style 조합이면 되는 경우
row, gap, padding, radius처럼 화면을 만들 때 필요한 기본 조각은 기존 token을 그대로 조합하는 방식으로 두기로 했다.
여기까지는 굳이 React wrapper를 추가하지 않아도 된다. 이미 있는 View나 Pressable에 필요한 style을 붙이면 되고, Figma에서도 Auto Layout과 spacing variable로 표현할 수 있다
다만 같은 geometry가 여러 군데에서 계속 반복되면, 그때는 그냥 값을 복붙하지 않고 recipe로 묶는 쪽이 맞을 것 같았다.
예를 들어 목록을 쌓는 부모 layout이나 ActionMenu 바깥쪽처럼, 역할이 확실하고 여러 값이 같이 움직여야 하는 부분은 listStack, actionMenuSurface 같은 이름으로 관리하는 식이다.
처음에는 여기까지만 만들기로 했다. 폼, 카드, 목록, 모달을 한 번에 전부 공용화하려고 하면 또 너무 커질 거 같아서…
컴포넌트가 필요한 경우는 따로 있었다
반대로 Button, TextField, Modal처럼 구조와 상태까지 같이 반복되는 건 컴포넌트가 맞다.
이런 건 padding만 같은 게 아니라 pressed, focus, disabled, loading 같은 상태도 같이 관리해야 한다. 접근성 이름이나 실제 클릭 영역도 같이 봐야 하고, Storybook에서 상태별로 확인할 수 있어야 한다.
그래서 “공통화하려면 무조건 컴포넌트”가 아니라, 같은 계약을 어디까지 공유하는지에 따라 나누는 게 맞는 거 같았다.
- 값 조합만 같으면 token이나 recipe
- 구조와 동작까지 같으면 component
- Figma에서는 실제 반복 UI만 source component로 관리
- 저수준 Box나 Stack 자체는 굳이 component로 만들지 않기
처음에는 디자인 시스템을 정리한다는 게 공통 컴포넌트를 최대한 많이 만드는 일이라고 생각했던 것 같다. 근데 해보니까 비슷한 걸 억지로 묶는 것도 또 다른 예외를 만드는 일이였다.
그래서 지금은 “이걸 공용으로 만들 수 있나?”보다 “이걸 바꾸면 정말 같은 방식으로 같이 바뀌어야 하나?”를 먼저 보게 됐다.
아직 이 기준이 완전히 정리된 건 아니다. 디자인 시스템 작업 자체가 아직 안 끝났기도 하고… 그래도 적어도 다음에 비슷한 layout을 볼 때 무조건 새 컴포넌트부터 만들지는 않을 거 같다.
정리
- Box 스타일을 공용화하는 방법이 꼭 wrapper component만 있는 건 아니었다.
- 반복되는 geometry는 recipe로, 구조와 상태까지 같은 UI는 component로 관리하기
- Figma에서도 실제 UI component와 저수준 layout 규칙은 분리해서 보기.
- 공용화는 많이 만드는 것보다 나중에 같은 결정을 반복하지 않게 하는 쪽이 더 중요한 거 같다…