컴포넌트 프로퍼티의 이해

의사상태: 컴포넌트의 가상의 상태

의사상태

 

배리언츠(Variants): 컴포넌트 의사상태를 여러개 만듦

 

프로퍼티: 구조가 바뀌지 않을 시 요소 변경에 사용

• Boolean: 특정 요소를 y/n 형식으로 보이거나 안보이게 함
• Instance swap: 인스턴스 요소(보통 아이콘) 교체
• Text: 텍스트 수정

배리언츠 / 프로퍼티 적용 예

파운데이션이 변경되면 배리언츠, 그렇지 않으면 프로퍼티

ㄴ 오른쪽 사진의 경우 아이콘은 변하였지만, 아이콘의 속성값은 변하지 않아 프로퍼티 적용

ㄴ 버튼의 길이는 상관 없는듯(오토레이아웃) / 아이콘의 색이 변해도 프로퍼티인지?

 

합성 컴포넌트: 바텀시트, 다이얼로그, 리스트, 카드, 탭 등

 

네스티드 인스턴스: 상위 컴포넌트에서 하위 컴포넌트의 프로퍼티를 바로 조작하기 위함

1. on/off 기능의 컴포넌트 만들기
2. 복제하여 인스턴스 만든 후 오토레이아웃하고 다시 컴포넌트 만들기
3. 프로퍼티 - 네스티스 인스턴스 적용

 

 

1배수 사이즈: 기본이 되는 디자인 사이즈

ㄴ 아이폰:375*812 / 안드로이드 360*800

프로토타입: 시제품, 테스트 해볼 수 있음

• Lo-fi(Low-fidelity): 전체적인 흐름을 빠르게 볼 수 있음 - 와이어 프레임 등
• Hi-fi(High-fidelity): 실제 제품과 유사

오버플로우: 프레임 밖으로 커텐츠가 넘어감 / 스크롤이 되려면 프레임보다 콘텐츠가 더 길어야 됨

ㄴ 오버플로우가 되지 않으면 스크롤이 생기지 않음

 

플로우: 프로토 타입의 흐름 하나하나

트리거: 액션을 시작하는 조건

액션: 트리거로 인해 만들어진 결과

애니메이션: 인터렉션 형태

플로우

디자인 핸드오프: 개발자나 혹은 다른이에게 전달하기 위한 디자인 정리 문서

ㄴ 플러그인을 활용하면 효율적, 자세한 사항은 직접 기입하여 소통