Text Field, Search Bar 만들기 실습, 컴포넌트 프로퍼티 알아보기

[사전캠프_9/9]

• 퀘스트_컴포넌트 만들기_Text inputs: 텍스트 필드(Text Field), 검색 바(Search Bar)
• 피그마 강의 4주차 이수

​

​

컴포넌트 만들기_Text inputs: 텍스트 필드(Text Field), 검색 바(Search Bar)

출처)

https://m3.material.io/components/text-fields/overview

Text fields – Material Design 3

https://m3.material.io/components/search/overview

Search – Material Design 3

 

• Text Field 실습 완료

​

​

• 검색바(Search Bar)
  • 앱 전반에서 정보를 빠르게 찾을 수 있도록하는 탐색 방법
  • 텍스트 필드에 검색어를 입력하면 관련 결과가 표시

​

• • 검색바가 작동되고 있을 때 오른쪽에 지우기 아이콘을 표시할 수 있음

​

• Search Bar 실습
  • 아이콘의 크기는 24*24로, 터치영역 혹은 아이콘을 감싸는 프레임의 크기는 48로 설정되어 있었다.

 

 

 

 

​

• • 아이콘 프레임의 크기가 48*48이고, 아이콘의 크기가 24*24이므로 패딩값 12를 주면 아이콘이 프레임내에 고정된다.
  • 이 프레임의 얼라인먼트를 왼쪽으로 해주면 검색바의 크기가 늘거나 줄어도 왼쪽에 붙어있게 된다.

​

• Search Bar 실습 완료

​

​

피그마 4주차 강의 학습 내용

​

4-2. 컴포넌트 프로퍼티의 이해

​

• 의사 상태 복습
  • 의사 상태에서 의사란 가짜의, 가상의라는 뜻
  • 버튼에 마우스를 올렸을 때 색깔이 바뀌는 건, 실제 버튼이 다른 걸로 바뀐 것이 아니라 버튼이 가진 가상의 상태를 나타내는 것

 

• 컴포넌트 프로퍼티
  • 컴포넌트가 가상의 상태를 가질 때(의사 상태), 형태가 조금씩 변화할 수 있다.
  • 컴포넌트 프로퍼티는 이런 변화와 변경을 쉽게 만들 수 있게 함
  • 베리언츠(Variants)
    • 프로퍼티의 한 종류로 '변종'이라는 뜻
    • 컴포넌트가 가질 수 있는 또 다른 모습을 만들 수 있게 하는 컴포넌트 기능
    • 배리언츠는 컴포넌트의 가상의 상태를 만들 때 사용

​

• • 프로퍼티(Property)
    • 프로퍼티는 '속성'이라는 뜻
    • 디자인 구조가 바뀌지 않는 선에서 변경할 수 있는 요소들을 다룰 때 사용

 

• 컴포넌트 프로퍼티 알아보기
  • 배리언츠를 제외하면 피그마 컴포넌트를 만들 때 설정할 수 있는 프로퍼티는 3가지

​

• • • Boolean(불리언)
      • 컴포넌트 안에 있는 특정 요소를 보이거나 안 보이게 할 수 있음

• • • Instance swap(인스턴스 스왑)
      • 인스턴스를 다른 인스턴스로 교체하는 기능

• • • Text(텍스트)
      • 텍스트 수정을 더 쉽게 할 수 있음

​

• 배리언츠와 프로퍼티를 고르는 기준
  • 컴포넌트에 적용된 파운데이션이 변경되는지를 기준으로 한다.
    • 버튼에 적용한 파운데이션 요소인 색상, 간격, 폰트가 바뀐 경우 -> 배리언츠

• 파운데이션 값이 바뀌진 않은 경우 -> 프로퍼티

>> 베리언츠보다 프로퍼티가 효율적이다. 프로퍼티로 할 수 있는 것은 프로퍼티로 만드는 것이 좋다.

 

 

​

4-2. 버튼 컴포넌트의 의사 상태 만들기

​

• 위계(hierarchy 하이어라키, priority 프라이어리티)
  • 같은 제품 안에서도 다른 디자인의 버튼이 있다. 버튼의 위계를 나눠 놓았기 때문
  • '얼마나 중요한 행동을 하기 위한 버튼인가'를 위계를 매겨 1순위~3순위 버튼을 사용한다.
    • 프라이머리(Primary, 1순위), 세컨더리(Secondary, 2순위), 터시어리(Tertiary, 3순위)

​

• 버튼의 위계 배리언츠 만들기
  • 버튼 컴포넌트 선택 -> 배리언츠 선택

• • 이름을 Priority(프라이리어티, 위계)로 바꾸고 3개의 버튼을 생성

 

• • 첫번째는 Primary(프라이머리), 두번째는 Secondary(세컨더리), 세번째는 Tertiary(터시어리)로 이름을 붙인다.

• • Primary가 가장 눈에 띄어야 하므로 진한색, Secondary는 그 다음으로 연한색, Tertiary는 그 다음이므로 회색조를 일반적으로 사용함

​

• 버튼의 크기 배리언츠 만들기
  • 버튼 컴포넌트 선택 후 배리언츠를 하나 더 추가해준다.
  • 크기 배리언츠를 만들거기 떄문에 Size로 이름 붙이고 값은 Large로 이름 붙인다.

 

 

• • 서체 크기를 18px에서 14px로 줄여주고 4배수 법칙을 따라 패딩값과 곡률을 줄여준다.

​

• 버튼의 상태 배리언츠 만들기
  • 배리언츠를 하나 더 추가하고 State로 명명, 값에는 Default라고 적어준다.
  • 6개의 버튼을 복제해주고 값을 Pressed라고 적어준다.

• • 누른 상태는 보통 색상을 한 단계 더 어둡게 지정한다.

​

​

4-4. 버튼 컴포넌트에 아이콘 추가하기

​

• 가져온 아이콘을 컴포넌트로 변경
  • 멀티풀 컴포넌트 기능을 사용하면 여러개의 아이콘도 개별적인 컴포넌트로 만들 수 있음

 

• • 컴포넌트를 복제. 인스턴스를 만들어서 버튼에 적용한다.

​

• 아이콘에 프로퍼티 적용하기
  • Boolean(불리언) 프로퍼티 적용. 아이콘을 키거나 끌 수 있도록(보이거나 보이지 않도록) 만드는 것
  • 프로퍼티를 추가해주고 이름을 붙여줌

 

• • 아이콘을 선택하고 Appearance 패널에서 설정해주면 불리언이 적용된다.

 

• • 인스턴스를 하나 만들어 확인해보면 적용된 걸 알 수 있다.

 

​

​

[회고]

배리언츠 기능을 처음 사용해보았는데 정말 편리하고 효율적인 기능이었다.

사실 모든 버튼을 제작해서 만들어도 만들 수 있지만 이렇게 피그마의 기능들을 똑똑하게 활용할 수 있는 것이 피그마를 진짜로 사용하는 방법이라고 느꼈다.

기능 자체는 써보면서 잘 익히고 있지만 기능들의 이름이 아직 잘 숙지되지 않아서 반복해서 외우고 있다.