배경 국내외 디자인 시스템을 뜯어보던 중 인터랙션 레이어를 따로 컴포넌트로 제작하여, 메인 컴포넌트의 하위 컴포넌트로 적용해둔 사례를 발견했어요. 저는 지금까지 디자인 시스템을 제작하면서 컴포넌트의 상태값에 변화가 생길 경우 Variant 기능을 활용해 처리했는데요. 원티드 디자인 시스템을 참고하기 위해 꼼꼼히 뜯어보던 중 궁금증이 하나 생겼어요. '왜 인터랙션 레이어를 따로 제작했을까?' 왜 인터랙션 레이어를 컴포넌트화 했을까? 원티드 디자인 시스템을 참고하였습니다. 디자인 시스템에 관심이 있는 디자이너라면 한 번쯤은 들여다 봤을 원티드의 디자인 시스템! 저는 특히 하위 컴포넌트로 속해 있는 이 'Interaction' 컴포넌트에 호기심이 생겼는데요. 지금까지 저는 컴포넌트의 상태값을 전부 variant 로 처리하고 있었어요. 단순히 상태값에 따른 변화를 공통적으로 적용할 수 있기 때문일까? 저렇게 적용하면 컴포넌트 색상과 형태에 따라 예외 케이스가 발생하지 않을까?

앱 한 줄 소개 투두메이트는 오늘의 할 일 목록을 작성하고, 친구와 공유하며 서로 응원해 줄 수 있는 앱입니다. 발견한 불편함 문제 요약: 체크리스트의 카테고리 공개설정 범위를 변경하는 간단한 행동을 할 때마다 바텀시트의 '확인' 버튼을 눌러야 하는 것이 불편해요. 기능 경로 우측 상단 더보기 버튼 클릭 - 카테고리 관리 수정하려고 하는 카테고리를 클릭합니다. 공개설정 - '전체 공개'로 설정되어 있는 부분을 클릭합니다. 변경하려고 하는 범위를 선택하고, '확인' 버튼을 누릅니다. 왜 불편했을까? 상황 및 조건 여러 개의 카테고리를 한 번에 공개 설정을 수정하려고 합니다. 이때, 공개 설정을 수정했을 경우 1) 하단의 '확인' 버튼을 누르지 않거나 2) 해당 바텀 시트가 닫히고 우측 상단에 '확인' 버튼을 누르지 않으면 변경된 설정이 적용되지 않아요. 공개 설정 범위를 수정하고, '확인' 버튼을 누르지 않은 상태에서 해당 모달을 이탈하게 될 경우 수정한 조건이 저장되지 않습니다. 공개 설정 범위를 수정하고, 페이지의 우측 상단에 위치한 '확인' 버튼을 누르지 않고 이탈하게 될 경우 수정된 조건이 저장되지 않습니다. PC 앱이기 때문에 바텀 시트 하단에 위치한 '확인' 버튼을 1번 누르고, 우측 상단에 위치한 '확인' 버튼을 다시 한 번 더 누르는 과정이 마우스 커서의 이동 경로상 멀어요. 1) 공개 설정 드롭다운을 클릭하고 → 2) 공개 설정 변경 바텀시트에서 수정하고 → 3) 바텀 시트 하단의 '확인' 버튼을 누르고 → 4) 리스트에 변경된 조건을 눈으로 확인하고 → 5) 페이지 우측 상단의 '확인' 버튼을 누르는 과정이 번거로워요. 카테고리의 설정 범위를 수정하는 건 간단한 행동이었기 때문에 번거롭다! 라고 느꼈을 것이라고 추측합니다.