[PM부트캠프6기] 0312 Today I learned

오늘도 아침에 아티클 하나를 읽고 피그마 4주차를 수강하였다.

수업 다 들으면 또 아티클 읽어야지,,

오늘도 아자쓰!

---

피그마

[Chapter4]

• 컴포넌트 프로퍼티: 의사 상태에서 컴포넌트는 가상의 상태를 가질 수 있다.
  • 피그마를 최대한 활용해 컴포넌트를 만들고, 인스턴스를 디자인에 적용하는 과정을 반복하기에 사용한다.
• 배리언츠: 컴포넌트가 가질 수 있는 또 다른 모습을 만들 수 있게 하는 컴포넌트 기능, 가상의 상태를 만들 때 사용
• 프로퍼티(Property): 속성, 디자인 구조가 바뀌지 않는 선에서 변경할 수 있는 요소들을 다룰 때 사용
• 컴포넌트 프로퍼티 구성 (배리언츠 제외)
  • Boolean(불리언): Y or N을 선택하는 형식, 컴포넌트 안에 있는 특정 요소를 보이게 하거나 안 보이게 할 수 있는 속성
  • ◇ Instance swap: 인스턴스를 다른 인스턴스로 교체하는 기능, 주로 버튼 안의 아이콘, 팝업 안의 버튼 등을 교체할 때 사용.  
  • 𝐓 Text: 컴포넌트 안에 있는 텍스트를 수정하기 쉽도록 컴포넌트 속성

• 배리언츠와 프로퍼티를 고르는 기준
  • 컴포넌트에 적용된 파운데이션(색상, 간격, 폰트)이 변경되는지를 기준으로 고를 것.
  • 언뜻 보면 디자인이 바뀌었지만 색상이나 간격, 폰트, 아이콘의 크기 등 파운데이션 값이 바뀌지 않았다면 프로퍼티로 조정할 것. → 변경되었다면 배리언츠로 제작.
  • 프로퍼티로 만드는 것들 대부분은 배리언츠로 만들어도 가능은 함. but 컴포넌트가 가질 수 있는 모든 조합을 배리언츠로 만드는 건 매우 비효율적임. ex) 아이콘이 있는 버튼 모양과 없는 버튼 모양을 프로퍼티로 적용하면 버튼을 하나만 만들고 불리언 프로퍼티를 적용하면 되지만, 배리언츠로 만들기 위해서는 없는 것과 있는 것을 모두 만들어야한다.
• 버튼의 위계
  • 버튼마다 색깔이나 외곽선 등 다르다 → 버튼의 위계를 나눠놨기 때문.
  • 위계(hierarchy)는 계층이나 계급, 우선순위(priority)는 우선순위
  • 얼마나 중요한 행동을 하기 위한 버튼인가를 의미한다. 사용자가 반드시 해야하는 중요한 행동이면 가장 돋보이는 1순위의 버튼을 쓰고, 중요하지 않을 수록 3순위의 버튼을 사용함.
  • 일반적인 버튼은 프라이머리(Primary, 1순위), 세컨더리(Secondary, 2순위), 터시어리(Tertiary, 3순위)의 3단계를 가짐.
• 실습

• 버튼의 위계 배리언츠 만들기
  1. 버튼 컨포넌트를 선택하고 프레임 속성 패널의 +아이콘을 눌러 배리언츠 선택 → 보라색 점선으로 둘러쌓임
  2. 프레임 속성 패널의 property 1을 priority라고 이름 변경
  3. 컴포넌트 테두리 바깐의 +를 2번 눌러서 총 3개 버튼 제작하고 primary, secondary, tertiary로 이름 변경.
  4. 각각 스타일 적용 → 보통 프라이머리가 잘 보이는 것, 세컨더리는 살짝 연하게, 터트리는 회색으로 설정, 그리고 secondary라고 secondary 색상을 사용하라는 것은 아님. 색상과는 다른 개념!
• 버튼의 크기 배리언츠 만들기
  1. 버튼 컴포넌트를 선택하고, 패널에서 배리언츠 하나 더 추가(name은 size, value는 large)
  2. 버튼 3개를 모두 선택하고 + 아이콘 눌러서 3개 한번에 복사.
  3. 새로 추가한 버튼 3개의 size를 모두 small로 변경
  4. small 버튼의 스타일 적용 → 보통 폰트는 14px, 좌우여백 16, 상하여백 8, 곡률도 2단계 내림.
• 버튼의 상태 배리언츠 만들기
  1. 컴포넌트를 선택하고 배리언츠 하나 더 추가(name은 state, value는 default)
  2. 버튼 6개를 모두 선택하고 + 아이콘 눌러서 6개 한번에 복사.
  3. 6개의 state를 모두 pressed라고 변경
  4. pressed 버튼의 스타일 적용 → 보통 버튼을 누르고 있는 상태를 보여줄 땐 버튼의 배경색을 한단계 더 진하게 설정, 규칙은 자유롭게 변화시킬 수 있지만 일관성이 없어서는 안됨. 모두 동일해야함!
• 아이콘 컴포넌트로 제작
  • 아이콘을 모두 선택한 후 속성 메뉴에 있는 Create component에서 Create multiple components를 눌러준다.
  • 아이콘 인스턴스를 드래그해서 버튼 안에 넣는다. (파란색선에 맞춰서 넣기)
  • 아이콘 색을 글자 색과 동일하게 맞추기
  • 컴포넌트 선택하고 프레임 속성 패널 추가 (Boolean 추가)
  • 추가한 아이콘만 선택해서 우측의 Appearance 패널의 ⎆ 아이콘을 눌러 만들어둔 Show leading Icon 프로퍼티 선택해서 적용.
  • 최종적으로 버튼을 따로 복사해서 보면 버튼 누르면 아이콘이 생겼다 없어졌다 함.
• 아이콘 교체하기
  • 프로퍼티 메뉴에서 Instance swap을 선택하기
  • 이름과 기본값을 설정(주요 아이콘들 미리 선택하기 가능)
  • 아이콘을 선택하고 디자인 패널에서 ⎆ 아이콘을 눌러 만들어둔 프로퍼티 선택
• 버튼 컴포넌트의 텍스트 바꾸기
  • 컴포넌트를 선택하고 + 누러서 Text 프로퍼티 만들기.
  • 프로퍼티 이름과 기본값을 설정
  • 버튼 안의 텍스트를 선택하고 해당 프로퍼티 적용
  • 버튼 인스턴스의 패널에서 텍스트 바로 수정 가능
• 합성 컴포넌트
  • 파운데이션이 아니라 컴포넌트를 모아 또 컴포넌트를 만드는 경우가 있다. 원칙적으로는 파운데이션 요소를 모아 컴포넌트를 만들고, 컴포넌트를 모아 더 큰 단위를 만들어야함.
  • 하지만 컴포넌트끼리 결합해도 여전히 컴포넌트이거나, 컴포넌트와 파운데이션을 결합한 컴포넌트인 경우가 있는데 이런 컴포넌트들을 합성 컴포넌트라고 한다.
  • 바텀시트, 다이얼로그, 리스트, 카드, 탭 등 복잡한 구조들이 있다.
• 네스티드 인스턴스
  • 상위 컴포넌트의 프로퍼티 속성들을 보여줘야 한다면, 하위 컴포넌트 속성을 조작하는 것이 어렵다.
  • 그럴 때 네스티드 인스턴스, 감싼 인스턴스 기능을 사용.
  • 재료로 쓰인 컴포넌트를 하위 컴포넌트, 본체를 상위 컴포넌트라고 봤을 때, 상위 컴포넌트에서도 하위 컴포넌트의 속성을 조작할 수 있도록 하는 기능
• 탭 컴포넌트: 네비게이션에 해당하는 컴포넌트, 현재 화면을 전환해주는 요소
  • 구조: 인디케이터 - 탭이 선택되어 있는지 알려주는 표시자 , 라벨 - 탭 제목
  • 탭은 서비스마다 다양한 디자인을 사용함. 선택된 것과 선택되지 않은 것을 구분할 수 있게 해주면됨.

---

생각보다 강의가 일찍 끝나서 5-5 화면 디자인 실습까지 진행해보았다.

지금까지 과제하면서 쌓아온 컴포넌트들 사용해서 실제 화면들 제작해보기

 

뭔가 만들고 나니 엄청 뿌듯하기는 한데 아직 개념이 혼동되는게 있는 것 같고 영상을 안보면 못만들 것 같다 ㅠㅠ

(복습의 중요성을 다시금 깨달으며...)

내일은 완강 때리고 나서 찬찬히 다시 복습해보고 다른 화면도 몇개 만들어 볼 수 있었으면 좋겠다.

 

오토레이아웃, 컴포넌트 이런 개념들이랑 정확히 어떻게 하고, 순서는 어떻게 진행되는지 정리해볼 것!!
-프레임: 코드블록으로 만들 수 있는 개체 (=컨테이너)
-오토레이아웃: 개체를 패딩으로 감싸 컨테이너를 만들 때 사용, 규칙적으로 정렬 해줌
→오토레이아웃을 설정하고 패딩, 간격 조정을 해야하는 것.

 

이건 정말 별거 아니라고는 하셨지만 막상 이렇게 보니 넘 이쁨 뿌듯👍✌️

 

📌피그마 TIP(windows)

• alt 누른 채 개체를 드래그하면 복사 가능
• shift를 누른 채 개체 하나씩 누르면 여러 개체 선택 가능
• ctrl + alt + g: 프레임으로 묶기 (오른쪽 마우스 클릭해서 가능)
• ctrl + g : 그룹으로 묶기 (오른쪽 마우스 클릭해서 가능)