[인프런 워밍업 스터디 1기 디자인] 2주차 입력 컴포넌트, 디스플레이 컴포넌트

드디어 Figma의 꽃이라고 할 수 있는 컴포넌트 만들기를 시작했습니다. 익숙해지면 너무 쉽고 당연한 것들이지만 처음에 익숙해지기까지 정말 헷갈리고 복잡합니다. 그러나 컴포넌트를 하나 둘 따라 만들다 보니 점점 속도도 빨라지고 재미있었습니다.

컴포넌트 만드는 요령

1. 현재 알고 있는 모든 프로퍼티를 가진 가장 복잡한 형태의 컴포넌트를 만든다.

어떤 컴포넌트들은 아주 복잡해서 프로퍼티가 아주 많을 수 있습니다. 프로퍼티들을 모두 활성화 했을때의 가장 복잡한 형태의 컴포넌트를 만들어봅니다.

2. 모든 프로퍼티를 등록해준다.

3. 인스턴스를 만들어서 테스트하면서 기본 컴포넌트를 수정한다.

다양한 Variants 를 만들기 전에 꼭 인스턴스를 만들어서 기본 컴포넌트를 테스트해보는것이 좋습니다. 여러 프로퍼티들을 껐다 켜보고 크기도 늘렸다 줄여보고 할 수 있는건 다 해봅니다. 테스트해보면 꼭 생각하지 못한 오류가 발견되는데 개발할 때랑 비슷해서 재밌었습니다. 컴포넌트가 작을 때 수정해야 여러 컴포넌트를 조합해서 복잡한 컴포넌트를 만들 때 고생하지 않습니다. (단위 테스트의 중요성!)

새롭게 알게된 것

디자인 패널에 Absolute positioning 버튼을 누르면 position: absolute 로 만들 수 있습니다!
Constraints 에서 Left and right 를 해주면 부모요소가 늘어남에 따라 자식요소도 함께 늘어납니다!
Constraints 에서 Bottom 을 해주면 하단에 요소를 고정시킬 수 있습니다.
부모가 Auto Layout 이면 자식요소의 Contraints 적용이 불가능합니다.
부모 요소의 width 를 Fixed 로 하고 자식 요소의 width 를 Fill 로 설정하면 부모 요소의 크기가 변할 때 마다 자식 요소가 늘어납니다.