디자인시스템 문의

안녕하세요 이샘님 😀

Q1. 버튼의 상태가 너무 반복되는 것 같습니다.

A1. 버튼 컴포넌트를 만들고 거기에 상태값을 입력해야 하는건 당연합니다. 그럼 여기서 한가지 확인해야할 사항이 "왜 그렇게 많고 다양한 버튼을 만들어야 하는가?" 인것 같아요.

variant는 하나의 버튼을 만들고 다른 형태로서의 변형을 위해 존재하는 항목인데, 완전 새로운 컴포넌트와 variant가 필요한 디자인 인가를 고려해 보셔야 할 것 같습니다.

회사의 업무 특성상 매번 새로운 디자인이 나와야 하는 구조라면 어쩔 수 없지만, 디자인 시스템은 하나의 큰 틀을 만들어 놓고 사용하는 형태이다 보니 너무 많은 버튼 컴포넌트는 오히려 잘못 구축되고 있음을 의미할 수 있습니다.

Q2. 강사님께서 자주 사용하시는 상태값들은 무엇이 있나요?

A2. 제가 버튼에 사용하는 variant의 항목들은 다음과 같습니다.

• Shape (버튼의 모양을 지정함)

  • React

  • Pill

  • Squre

  • Circle

• Size (버튼의 크기 = 패딩과 글꼴 차이)

  • XSmall

  • Small

  • Medium

  • Large

• Type (버튼의 색상 타입)

  • Primary

  • Secondary

  • Tertiary

• Hierarchy (버튼의 구조 = 레이블만 & 아이콘만 & 둘다)

  • Label only

  • Icon only

  • Labeled

• State (버튼의 상태)

  • Default

  • Focus

  • Hover

  • Disabled

• Behavior (버튼의 width 여부)

  • intrinsic width

  • fixed width

• Label (Text Properties)

  • TextLabel

• Icon leading (아이콘 앞에 배치 여부)

  • true

  • false

• Icon trailing (아이콘 뒤에 배치 여부)

  • true

  • false

     

Q3. 오토레이아웃의 속성 이해

A3. 오토레이아웃을 설정하게 되면 가장 중요하게 봐야할 항목이 내가 부모를 선택하고 있는가 자식을 선택하고 있는가 입니다.

오토레이아웃을 주면 준 대상을 '부모' 라 칭하고 그 안에 요소들을 '자식' 이라 칭합니다.

이는 실제 코딩 작업을 할때도 동일하게 적용되는 용어 입니다.

오토레이아웃을 주면 '부모'는 자식들의 크기를 다 포함할 것인지(Hug) 또는 자식이 아무리 커져도 무시하고 나의 크기를 고정할 것인지 (Fixed) 를 정할 수 있습니다.

그리고 오토레이아웃의 자식들에게는 부모의 크기에 따라 같이 커질것인지 (Fill) 또는 나의 크기를 강제로 고정시킬것인지(Fixed)를 지정할 수 있습니다.

오토레이아웃을 받은 대상인 (부모)는 fill속성을 가지지 못하며, fill속성은 오토레이아웃의 자식 요소에게만 적용이 가능합니다.

그럼 부모도 더 큰 부모의 크기를 따라가고싶어 fill을 지정하고 싶다면? 그 대상 역시 더 큰 부모를 찾아 오토레이아웃을 준다면 오토레이아웃의 자식으로 인식이 되어 fill 항목을 선택할 수 있습니다.

감사합니다 :)