[제로베이스 UIUX스쿨] 6주차_5

6주차도 지나간다! 🥱
 

#개인 공부 및 과제

다음 주에 진행할 마켓컬리 클론디자인을 위해 오토레이아웃 기능과 컴포넌트 기능에 대해 다시 공부해 보고자 한다.

컴포넌트 (반복적으로 사용된 UI에셋)

컴포넌트는 크게 두개로 분리된다. 마스터 컴포넌트/ 인스턴스 컴포넌트! 마스터는 주체가 되는 대상, 인스터스는 거울처럼 따라 똑같이 보여지는 대상이다. 컴포넌트를 구성할 때 가장 먼저 해야할 것은 중복되는 구조를 파악하고 가변적인 요소들을 쉽게 변경할 수 있도록 큰 틀을 제작하는 것.

중첩 컴포넌트 

버튼을 예시로 들어, 프라이머리 버튼과 세컨더리 버튼으로 박스의 컬러만 다른 컴포넌트가 존재하는 경우가 많이 있는데 이러한 경우를 만들 때 중첩 컴포넌트를 만들면 유용하다. 마스터 컴포넌트 안에 인스턴스가 존재하는 방식을 중첩 컴포넌트라고 한다.
 
우선 인스턴스의 적용 옵션을 확인해야하는데 텍스트와 박스의 크기나 컬러를 자유자재로 변경 가능하며 변경 사항이 마스터 컴포넌트에는 적용되지 않는다!. 하지만 변경된 사항을 디자인 패널의 컴포넌트 섹션에서 마스터 컴포넌트에 적용할 수도 있으며 반대로 원래 마스터 컴포넌트에서 적용된 옵션 값을 다시 가져 올 수도 있다. 또한 인스턴스를 다시 컴포넌트로 만들 수 있는데 이건 새로운 컴포넌트를 만드는 게 아닌 인스턴스 위에 컴포넌트를 덮어 씌우는 개념. 그래서 레이어 패널을 보면 마스터 컴포넌트 안에 인스턴스가 위치하게 된다. 그러면 컴포넌트 1개를 만들어 하위 인스턴스를 두 개 만들어 하나는 프라이머리 버튼으로, 하나는 세컨더리 버튼으로 만들면 중첩 컴포넌트가 된다!!
 

속성(Properties)기능

컴포넌트를 제대로 구성하기 위해서는 속성 기능을 제대로 설정할 수 있어야한다.
Prop는 총 4가지 유형으로 상태 변형 가능한 variants와 각 요소들을 토글 버튼으로 제어 가능한 Boolean, 아이콘 같은 중첩 컴포넌트를 변경할 수 있는 istance swap, 텍스트들을 패널에서 제어할 수 있는 text 로 구성되어있다.
 

오토 레이아웃

반응형 웹처럼 레이아웃을 원하는데로 고정시켜 화면을 늘리거나 줄였을 때 원하는 디자인이 보여지게 할 수 있으며 버튼이나 중복된 리스트 디자인을 만들 때 유용하게 사용된다. 
 
아우 점점 가니까 헷갈린다. 이건 예제를 만들어보면서 확인해볼 수 있을 것 같다.

#그룹과제

저번 그룹과제 계획서와 이번 그룹과제 계획서의 분량차이가 꽤 많이 난다 ㅋㅋㅋ
리서치 방법론이 추가돼서 그런 것 같은데 더 자세한 리서치로 가설을 입증할 수 있어 좋은 것 같다.
여기까지는 그래도 저번 그룹과제에서 했던 부분들이라 나름(?) 수월했는데 차주부터 진행하는 와이어프레임은 정말 정말 처음이라 기대가 되면서도 어려울 것 같다..! 그래도 다 같이 하다 보면 결국 해낼 거야

그리고 차주부터 개인과제로 포트폴리오 기획 단계가 시작된다. 벌써 시작된다니 시간이 정말 빠르다.
그룹과제와 개인과제+강의가 동시에 많은 주라 힘들 것으로 예상되는데 하필 다음 주부터 이사준비로 정신까지 없을 예정이다 ㅋ_ㅋ 갑자기 아파지는 거 같고 막 그랭 ㅋ 개인과제는 최대한 내일과 내일모레 많이 쳐놔야겠다. 
 

#유용한  피그마 플러그인 추천

 
1. Remove BG
이미지의 흰 바탕을 투명하게 바꿔준다. 

2.Fig 3D
간단하게 피그마 내에서 백터 이미지를 3D로 변환해주는 플러그인
특히 텍스트나 심볼의 경우 그래픽 툴을 사용하지 않아요 Extrude&Bevel 효과를 낼 수 있다.

3. Arc
텍스트를 아치형으로 그리며 작성할 수 있는 플러그인

 
4. Color Scheme
메인 컬러를 입력하면 100에서 900까지 컬러 단계를 자동으로 생성해주는 플러그인
스타일 가이드나 디자인 시스템 구성 시 유용함