왜 인터랙션 레이어는 분리해서 제작하는 게 좋을까?
박은서
디자인 이모저모
카테고리
- 디자인 시스템
컴포넌트의 베리언트를 활용해서 인터랙션을 표현한다면 어떤 불편함이 있을까요?
배경
국내외 디자인 시스템을 뜯어보던 중 인터랙션 레이어를 따로 컴포넌트로 제작하여, 메인 컴포넌트의 하위 컴포넌트로 적용해둔 사례를 발견했어요.
저는 지금까지 디자인 시스템을 제작하면서 컴포넌트의 상태값에 변화가 생길 경우 Variant 기능을 활용해 처리했는데요.
원티드 디자인 시스템을 참고하기 위해 꼼꼼히 뜯어보던 중 궁금증이 하나 생겼어요.
•
'왜 인터랙션 레이어를 따로 제작했을까?'
왜 인터랙션 레이어를 컴포넌트화 했을까?
원티드 디자인 시스템을 참고하였습니다.
원티드 디자인 시스템 중 버튼 컴포넌트
디자인 시스템에 관심이 있는 디자이너라면 한 번쯤은 들여다 봤을 원티드의 디자인 시스템!
저는 특히 하위 컴포넌트로 속해 있는 이 'Interaction' 컴포넌트에 호기심이 생겼는데요.
지금까지 저는 컴포넌트의 상태값을 전부 variant 로 처리하고 있었어요.
지금까지 제작해오던 컴포넌트 패널 구성
•
단순히 상태값에 따른 변화를 공통적으로 적용할 수 있기 때문일까?
•
저렇게 적용하면 컴포넌트 색상과 형태에 따라 예외 케이스가 발생하지 않을까?
라는 추측을 가지고만(...) 있었습니다.
논리적 상태와 인터랙션 상태는 달라요
그러다 우연히 25년 메이커 콜렉티브: 서울에서 발표되었던 구름의 vapor 발표 자료를 집중 탐구하게 되었습니다.
해당 자료에는 다음과 같은 정보가 나옵니다.
'props = variants' 원칙을 통해 디자인(variants)과 개발(props) 간의 일관성을 유지합니다.
또 이런 정보도 있습니다.
컴포넌트의 필수 요구사항은 '접근성 및 기본 기능, 논리적 상태, 시각 옵션, 인터랙션 상태, 콘텐츠'이다.
여기서 논리적 상태와 인터랙션 상태가 구분되어 있다는 것에 집중했습니다.
•
논리적 상태란?
◦
주로 개발 로직에 따라 결정되는 상태
◦
예시) disabled, selected, invailed, loading
•
인터랙션 상태란?
◦
유저의 상호작용에서만 발생하는 일시적인 피드백
◦
예시) hover, active, focus
•
얻은 정보
◦
지금까지 내가 상태값에 뭉쳐놓은 'default, hover, focus, disabled, selected'는 개발 로직에 따라 결정되는지, 아니면 유저의 상호작용에서 발생하는지에 따라 구분할 수 있다.
그렇다면 왜 구분하면 좋을까?
•
1) 개발자와의 협업에 도움이 됩니다.
◦
디자이너와 개발자의 시선 차이는 다양하게 발생하기 마련입니다. 디자이너에게는 하나의 'State'로 정의되었던 것들이, 개발자에게는 왜 하나로 뭉쳐둔 거지? 라는 생각이 들게 할 수 있어요. 디자인과 개발 사이 간격을 줄여가며 구현 과정을 더 자세히 이해할 수 있게 됩니다.
◦
인터랙션과 개발 로직을 구분해 가는 과정에서 더욱 컴포넌트에 대한 이해도가 높아지고, 반복되는 스타일을 하위 컴포넌트로 간편하게 처리할 수 있어요.
◦
그리고 디자인 시스템은 디자이너만 사용하는 방식으로 멈춰두었을 때 팀 전체의 효율이 떨어져요. 개발과의 자동 연동을 목표로 두고 있다면, 결코 무시할 수 없는 장점입니다.
•
2) 컴포넌트 상태값을 수정하거나 추가할 경우 간단해집니다.
◦
버튼의 hover 상태에서 사용하는 컬러를 gray/100 → gray/200 으로 변경한다고 하면, 인터랙션 레이어를 따로 컴포넌트화 했을 경우에는 해당 컴포넌트를 한 번만 수정하면 자동으로 공통적용됩니다. 그렇지만 컴포넌트 되지 않았을 때는 직접 하나하나 수정해야 하는 상황이 생겨요.
◦
동시에 인터랙션 레이어를 분리하여 하위 컴포넌트로 합성 컴포넌트를 제작하여, 작업 시 가독성이 훨씬(!) 좋아집니다.
▪
디자인 시스템을 제작하며 느끼는 것 중 가장 큰 한 가지는 다음과 같습니다. 개발과 디자인의 경계를 허물고 서로 이해해갈수록 얻을 수 있는 장점은 생각보다 많다!
앞으로는 이렇게
•
디자이너 입장에서는 단순히 스타일이 바뀌었기 때문에 상태값으로 구분했던 것들을 자세하게 뜯어보며 해당 상태가 단순 인터랙션 상태인지, 아니면 논리적 상태값인지 구분하며 작업하려고 합니다.
Subscribe to '박은서의 노트'
Subscribe to my site to be the first to receive notifications and emails about the latest updates, including new posts.
Join Slashpage and subscribe to '박은서의 노트'!
Join Slashpage and subscribe to '박은서의 노트'!
