강의

멘토링

커뮤니티

인프런 커뮤니티 질문&답변

허이짜님의 프로필 이미지
허이짜

작성한 질문수

[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기

텍스트 필드(Text Field) ✅

인풋 텍스트필드에서는 왜 'interactive/bg' 배리어블을 활용하지 않는 것인가요?

작성

·

14

0

버튼과 같이 '클릭' 액션이 있는 인터랙티브한 부분에는 bg/interactive 그룹에 있는 컬러를 사용하는 것으로 이해하고있는데
Text field의 bg는 그냥 일반형 컬러를 사용하는 것으로 보입니다.

강의상에서 빠른 제작을 위해 시적 허용...? 을 하신 것이죠?

실제 현업에서 사용할때는 interactive 컬러와 일반 컬러를 구분해서 사용해줘야할 것 같다는 생각이 드는데, 이것은 제 일차적인 생각이고

interactive라는 그룹을 색상 자체가 변동되는 (Hover, Press 액션이 있는) 컬러들의 그룹이라고 가정하면, 해당 텍스트 필드에서는 배경의 변화가 없으니 interactive가 아닌 컬러그룹을 사용하신 것인가? 라는 생각도 듭니다.

물론 정답은 없겠고, 사용하려는 방향과 정책에 따라 다들 다르겠지만 강의에서는 어떤 의도로 사용하셨는지가 궁금합니다

답변 1

0

볼드 UX님의 프로필 이미지
볼드 UX
지식공유자

허이짜님 안녕하세요.

말씀해주신 것처럼 강의에서 제공된 토큰(베리어블) 구조 관점에서 텍스트 필드 안에 있는 요소들은 모두 interactive 컬러를 사용하는 것이 좋습니다.

 

제가 작업할 때는, (말씀해주신대로) 사용자가 보았을 때 시각적으로 상태가 변하는 요소들에만 interactive 컬러를 적용했습니다. 제 텍스트 필드의 경우에는 배경색이 상태에 따라 변하지 않기 때문에 interactive 값을 따로 적용하지 않았습니다.

 

이런 선택을 한 이유는, 작업을 하다 보면 예외 케이스가 생기게 되고, 그때마다 값을 추가하다 보면 불필요하게 갯수가 늘어날 수 있기 때문입니다. 그래서 기본적인 기준만 두고, 나머지는 상황에 맞게 확장할 수 있도록 하였습니다.

 

강의에서는 이러한 기준으로 설명드렸지만, 제가 현재 회사 실무/사이드 프로젝트에서는 오히려 interactive 개념을 아예 제거하고 더 슬림하게 사용합니다. 결국에는 회사 내 디자이너·동료분들과 협업하면서 상황에 맞게 선택하시고, 강의에서 제공되는 것은 하나의 예시로 봐주시면 될 것 같습니다.

 

감사합니다.

볼드 드림!


 

허이짜님의 프로필 이미지
허이짜

작성한 질문수

질문하기