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

안녕하세요, askare 님 👋

결론부터 말씀드리면 selected 상태는 보통 공통 스타일을 하나만 정의해 두고, 타입이나 스타일별로 따로 제작할 필요는 없습니다. (베리어블에는 있어서 사용하셔도 되긴 합니다만 구지 안하셔도 됩니다.)

즉, 강의에서처럼 selected는 하나만 두고 나머지는 selected=false 상태를 기준으로 제작하셔도 충분합니다.

사실 selected는 본질적으로 state(상태) 중 하나입니다.

다만 hover나 press처럼 순간적인 인터랙션 상태가 아니라, 구조적으로 의미를 가지는 상태라서 바깥으로 분리해 관리하게 된 것입니다.

또한 다른 컴포넌트에서도 유사하게 selected를 활용하기 때문에 일관성을 위해 따로 빼두었습니다.

selected 역시 경우에 따라 모든 상태(hover, focus, disabled 등)를 가질 수는 있습니다.

하지만 disabled 상태에서 hover가 적용되지 않듯, 꼭 모든 조합(selected-hover 등)을 따로 정의하지 않아도 괜찮습니다.

더 궁금하신 부분 있으면 질문주세요.

안녕하세요, 인프런 AI 인턴입니다. askare님께서 질문하신 내용에 대해 답변을 드리도록 하겠습니다.

질문의 핵심:

askare님께서 궁금해하시는 점은 아이콘 버튼의 selected 상태를 설정할 때, 여러 타입(primary, secondary, destructive)과 스타일(filled, outline, transparent)별로 각각 selected 상태의 버튼을 추가로 제작해야 하는지, 아니면 하나의 공통된 selected 버튼을 모든 타입과 스타일에 사용해도 되는지입니다.

관련 설명:

• Button Variants 사용 방법: 피그마에서 버튼을 디자인할 때, 다양한 타입과 스타일을 결합해 여러 변형을 만들 수 있습니다. selected 상태 역시 하나의 버튼 상태로, 이 상태는 일반적으로 대부분의 디자인에서 비슷한 색상과 스타일을 유지합니다. 즉, 모든 타입과 스타일에 대해 각각의 selected 상태를 만들 필요 없이 공통의 selected 상태를 설정하고 이 상태를 여러 버튼에 재사용하는 것이 일반적인 접근 방식입니다.

• Semantic Color: 디자인 시스템에서는 특정 상태를 표현하기 위한 색상 집합을 정리합니다. selected 상태에 대한 시멘틱 컬러가 한 가지 톤으로 설정되어 있다면, 이를 다양한 타입과 스타일에 동일하게 적용해 통일성을 유지할 수 있습니다. 다만, 실무에서 특수한 요구사항이 있는 경우, 일부 스타일에 대해 별도의 selected 스타일을 만들 수도 있습니다.

추가 참고 자료:

1. Variants를 활용한 버튼 디자인 자세한 버튼 디자인 시, Variants를 활용하는 방법을 설명한 사례입니다. 이를 통해 여러 상태를 어떻게 정의할 수 있는지를 학습할 수 있습니다.

2. 시멘틱 컬러 설정 각 상태 및 타입에 따른 색상 적용에 대한 자세한 설명이 포함된 답변으로, 시멘틱 컬러에 따라 어떻게 디자인 시스템을 구축하는지에 대한 도움이 될 것입니다.

askare님이 주신 질문에 대한 답변이 되었길 바랍니다. 시멘틱 컬러의 통일성과 Variants를 적절히 활용하여 일관성 있는 디자인 시스템을 구축하시길 바랍니다. 실무에서도 궁금증을 풀어나가며 다양한 접근 방법을 시도해 보시면 더 큰 도움이 될 것입니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.