인프런 커뮤니티 질문&답변
작성한 질문수
Icon 버튼 Inverse와 관련하여 문의드립니다.
작성
·
34
1
안녕하세요. 항상 강의 잘 듣고 있습니다! : )
아이콘 등록하는 방법 강의에 관련하여 질문드립니다.
아이콘이 포함된 버튼의 인터렉션에 색상 반전되는 부분이 있어서 아이콘 강의 들으면서 해결은 했는데 정확한 이유도 함께 이해하고 싶어서 문의드립니다.
강의 17:10 부분입니다.
1. 임의 아이콘 생성
2. Icon placeholder
3. Component
4. Variant 추가
5. Size property : md-24px, sm-16px, lg-32px, xl-40px (Scale 설정)
6. md-24px 아이콘 Instance > Frame > Component 24px
7. Component 40px 생성
8. Component 24px > Instance swap
9. 각각 Instance 생성
10. Icon placeholder 색상을 Instance swap이랑 동일한 색상으로 변경
11. Component 24px 버튼 부분 Primary, 아이콘 부분 Inverse 색상으로 변경
12. Component 24px의 Instance > Reset all changes
13. 그 다음 Instance swap을 해야 색상이 변경됨.
Q1. Component 24px 예시에는 icon placeholder의 색상을 맞춰주셨는데
Component 48px 예시에는 왜 직접 success 색상으로 바꿔주셨나요?
Override 개념이랑 조금 헷갈리는 것도 있어서 설명 부탁드릴게요.
Q2. Icon placeholder는 아이콘 기본 색상으로 맞춰주고 하는 이러한 과정을
위 순서대로 해야하는 이유가 정확히 어떤 이유인지가 궁금합니다.
Q3. Icon placeholder에서 나온 아이콘을 각 component 24/48px은
새로운 버튼으로 만든 컴퍼넌트인데 이 관계가 어떻게 되는건지 이해가 안되어서요.
Q4. Reset all changes 버튼은 정확히 이 과정에서 어떤 역할일까요?
Q5. 이 과정이 없으면 inverse가 적용이 되지 않는다면 Instance swap으로 아이콘을 변경해도 아이콘 색상을 유지하고 싶으면 정확히 Icon placeholder와 Instance swap한 아이콘 색상을 동일하게 맞추고
Inverse로 바꾼 것을 다시 reset하는 일련의 과정이 항상 필요한 것일까요?
잘 부탁드립니다.
감사합니다.
답변 1
0
질문 주셔서 감사합니다.
질문을 꼼꼼하게 적어주셔서 답을 찾는데, 정말 도움이 되었습니다. 저도 영상을 다시 보면서 확인해 보았는데요, 하나씩 정리드리겠습니다.
Q1. 24px과 48px 예시에서 색상이 다르게 적용된 이유
아이콘 placeholder는 항상 기본 아이콘 색상과 동일하게 맞추면 좋습니다. 그 위에서 컴포넌트 내부 인스턴스 색상을 override 하여 상황에 맞게 바꾸는 거죠. 질문에서는 24px 색상을 맞춰주셨다고 했는데, 실제 강의에서는..
24px 예시는 inverse(흰색) 으로 변경
48px 예시는 success(초록색) 으로 변경
이렇게 하면 내부 레이어 이름이 동일할 경우, 컴포넌트 인스턴스 내에 아이콘이 다른 걸로 바뀌어도 색상은 동일하게 따라옵니다.
Placeholder 컴포넌트 아이콘 색상 = 기본 색상
모든 아이콘 컴포넌트 = 기본 색상으로 시작
컴포넌트 내 24px 인스턴스 = inverse로 override
컴포넌트 내 48px 인스턴스 = success로 override
이 구조라야 instance swap 후에도 정상적으로 색상이 따라옵니다.
Q2. 왜 이 순서대로 해야 하나?
저도 여러 시행착오를 겪어 보았는데, 이 방식이 가장 안정적이고 관리하기 쉽습니다. 다양한 방법이 있긴 하지만, 이게 Figma 커뮤니티와 튜토리얼에서도 권장되는 방법입니다. 다른 방법은 오히려 더 복잡하고 관리가 어렵습니다. 다른 방법에 대한 것은 영상 보다는 블로그 글로 나중에 안내해드리겠습니다.
Q3. Placeholder와 24/48px 컴포넌트 관계
제가 설명을 더 친절하게 했어야 했는데요.
icon placeholder = 베이스 아이콘 컴포넌트
이 내부 프로퍼티는 24px, 40px 이렇게 나누고 이거는 단순히 필요해 따라 스위칭하기 좋도록 만들었습니다. 반드시 이렇게 만들 필요는 없습니다.
24px/40px 컴포넌트 = 버튼 같은 상위 컴포넌트
이 내부 레이어 중에 icon placeholder 인스턴스가 존재합니다. 이는 이 상위 컴포넌트가 인스턴스로 바뀌었을 때, 다른 아이콘으로 변경할 수있도록 도와줍니다.
즉, placeholder가 기본을 잡아주고, 그 안에 들어간 인스턴스들이 swap될 때도 이 속성을 따라가게 됩니다.
Q4. Reset all changes 기능 역할
이 기능은 인스턴스에 적용된 override를 모두 초기화해서 원래 placeholder 기본값으로 되돌립니다.
저의 경우 보통 두 가지 상황에 사용합니다:
인스턴스가 잘못 바뀌어서 원래 컴포넌트와 똑같이 돌리고 싶을 때
컴포넌트 변경이 일어났는데, 인스턴스가 이를 제대로 반영하지 않았을 때
강의에서는 제가 아이콘 색을 바꿨는데 의도대로 적용되지 않으면, placeholder에서 색을 다시 수정하고 돌아왔을 때 reset을 눌러야 정상적으로 따라오게 됩니다.
Q5. Inverse 적용 문제와 과정 필요성
이 과정은 위에서 세팅만 제대로 하면 문제가 생기지 않습니다.
Override를 제대로 이해하지 못하고 사용하시면 영상에 나오듯이 매번 아이콘 스왑하고 Inverse값을 적용해주어야 합니다. 제가 강의에서 언급한대로 따라하시면, 이 과정을 순조롭게 이루어집니다.
도움이 되셨으면 감사합니다.
질문에 대한 답이 모호하거나 팔로우업 질문이 있으시면 언제든지 남겨주세요.
감사합니다!