[UX/UI] Figma 활용법 4

✳️ 컴포넌트

1. 컴포넌트의 개념

• 컴포넌트는 파운데이션의 조합을 쌓고 쌓아 만들어지는 구성품

2. 컴포넌트의 모양이 아니라 기능이 중요한 이유

• 우리는 버튼의 생김새가 아니라 버튼이 하는 일을 기준으로 생각하기 때문 따라서 UI의 목적, UI의 기능에 초점을 두고 공부해야 한다.

  

  

3. 컴포넌트의 종류

1. 액션 : 사용자가 중요한 행동을 수행할 때 사용해요.
2. 인풋 : 사용자의 입력을 받을 때 사용해요.
3. 인포메이션 : 사용자에게 서비스의 상태나 안내 사항을 전달할 때 사용해요.
4. 컨테이너 : 컴포넌트 여러개가 결합되어 하나의 덩어리를 이루는 컴포넌트에요.
5. 내비게이션 : 사용자가 페이지를 이동할 때 사용해요.
6. 컨트롤 : 사용자가 설정이나 값을 수정할 때 사용해요.

 

---

 

✳️ 의사 상태(Pseudo-state)

1. 의사 상태란?

• 컴포넌트를 설계할 때 만들 수 있는 다양한 상태값
• 컴포넌트의 별명 : 기본 속성은 유지한 채, 상황에 따라 다른 형태와 모양을 하는 경우, 그런 다른 형태와 모양들을 의사 상태라고 함

2. 의사 상태의 개념

• 컴포넌트의 가상의 상태를 표시할 때 사용
• 예시 : 버튼에 마우스를 올렸을 때 색깔이 바뀌는 건, 실제 버튼이 다른 걸로 바뀐 것이 아니라 버튼이 가진 가상의 상태를 나타내는 것

  

3. 의사 상태 설계 시 주의해야 할 것

• 버튼인데 체크된 것은 불가능하고, 체크박스가 링크인 것은 존재할 수 없다. 실제 구현할 개발자와 이야기를 많이 나눠서 구현 여부를 잘 논의하는 과정이 필수

 

---

 

✳️ 컴포넌트와 인스턴스

1. 마스터 컴포넌트

• 반복적인 디자인을 빠르게 하기 위해 디자인을 복사해서 사용할 수 있게 해주고, 복사된 디자인들을 한번에 수정하거나 편집할 수 있도록 해주는 중요한 기능
• 특징 : 원본 / 마스터 컴포넌트의 복제본, 인스턴스가 생김

2. 인스턴스

• 마스터 컴포넌트의 복제본이다. 따라서 컴포넌트의 속성을 그대로 이어 받는다.

3. 마스터 컴포넌트와 인스턴스의 관계

• 컴포넌트를 수정하면 인스턴스에도 반영됨
• 인스턴스를 먼저 수정하면 컴포넌트를 수정해도 반영되지 않음
• 컴포넌트를 지우더라도 인스턴스는 남아 있음
• 연결을 해제하면 인스턴스는 컴포넌트와 분리되고, 일반적인 프레임으로 변경됨

 

---

 

✳️ 배리언츠와 프로퍼티

1. 배리언츠와 프로퍼티란?

• 배리언츠와 프로퍼티는 이런 변화와 변경을 만들 수 있는 피그마 컴포넌트 기능이다.
• 사용하는 이유 : 하나의 컴포넌트로 더 많은 디자인을 효율적으로 만들기 위해 배리언츠와 프로퍼티를 사용

2. 배리언츠(Variants)

• 컴포넌트가 가질 수 있는 또 다른 모습을 만들 수 있게 하는 컴포넌트 기능으로 컴포넌트의 가상의 상태를 만들 때 사용

  

3. 프로퍼티(Property)

• ‘속성’이라는 뜻으로 디자인 구조가 바뀌지 않는 선에서 변경할 수 있는 요소들을 다룰 때 사용함.

  

4. 배리언츠와 프로퍼티를 고르는 기준

• 디자인에 변화가 생긴다는 건 동일하기 때문에 컴포넌트에 적용된 파운데이션 속성이 변하는지를 선택 기준으로 해야함.
• 예시 : 파운데이션(색상, 간격, 폰트) 값이 바뀌었다면 배리언츠

  

4. 프로퍼티 종류

1. 불리언(Boolean) : Y or N을 선택하는 형식을 뜻해요. 요소를 보이게 하거나 안 보이게 할 수 있는 속성
2. 인스턴스 스왑(Instance swap) : 컴포넌트 안에 다른 컴포넌트의 인스턴스가 있는 경우 다른 인스턴스로 교체할 수 있는 속성
3. Text : 텍스트를 수정하기 용이한 속성

 

---

 

✳️ 버튼 컴포넌트

1. 버튼 컴포넌트의 정의

• 컴포넌트의 종류 중 액션에 해당하는 컴포넌트로 누름으로써 중요한 동작을 수행하는 요소
• 🔗 버튼 컴포넌트 참고 : 머티리얼 디자인, 우버 디자인 시스템, 라이트닝 디자인 시스템, 카본 디자인 시스템

2. 버튼 설계 시 유의할 점

• 상호작용이 가능한 물체는, 상호작용이 가능하다는 시각적인 단서를 제공해야 함. 이것을 행동 유도성(Affordance), 즉 '어포던스'라고 함. 따라서 버튼의 목적을 우선 생각해서 설계해야 함.

3. 버튼의 구조

1. 컨테이너(Container) : 안에 있는 요소를 감싸고 있는 프레임
2. 라벨/레이블(Label) : 버튼의 행동을 안내하는 글자
3. 리딩 엘리먼트(Leading Element) : 버튼 라벨보다 더 앞쪽에 있다는 뜻 (리딩=이끄는, 엘리먼트=요소)
4. 트레일링 엘리먼트(Trailing Element) : 버튼 라벨보다 더 뒤쪽에 있다는 뜻 (트레일링=뒤따르는, 엘리먼트=요소)

4. LTR=리딩과 RTL=트레일링의 UI 차이

• 왼쪽→오른쪽으로 읽고 쓰는 문화를 LTR(Left to Right) 문화권이라고 함.
• 반대로 오른쪽→왼쪽으로 읽고 쓰는 문화를 RTL(Right to Left) 문화권이라고 함.

• 

  (출처 및 원본 : RTL-styling)

5. 버튼의 종류

1. 박스/일반 버튼 : 일반적으로 아는 박스(Box) 버튼 또는 솔리드(Solid) 버튼
2. 아웃라인/고스트/엠티 버튼 : 테두리가 있고 속이 빈 형태의 버튼
3. 스플릿 버튼 : 주요 액션과 관련된 보조 액션을 제공해야 할 때 사용하는 버튼

   

4. 텍스트 버튼 : 배경색이나 테두리 없이 글자로만 이루어진 버튼으로 주요 액션에 비해 비중이 낮고, 별로 중요하지 않은 기능을 수행할 때 사용

6. 버튼 만들기

 

---

 

✳️ 텍스트필드 컴포넌트

1. 텍스트필드 컴포넌트의 정의

• 사용자가 무언가를 입력할 수 있게 하는 '인풋'에 해당하는 가장 대표적인 컴포넌트
• 🔗 텍스트필드 컴포넌트 참고 : 머티리얼 디자인, 우버 디자인 시스템, 라이트닝 디자인 시스템, 카본 디자인 시스템

2. 텍스트필드 컴포넌트의 구조

1. 인풋 컨테이너(Input Container) : 글자를 입력하는 부분
2. 라벨/레이블(Label) : 입력해야 하는 값이 무엇인지 알려주는 텍스트
3. 리딩 엘리먼트(Leading Element) : 텍스트보다 더 앞쪽에 있는 엘리먼트
4. 트레일링 엘리먼트(Trailing Element) : 텍스트보다 더 뒤쪽에 있는 엘리먼트
5. 헬퍼 텍스트(Helper Text) : 유효성 검사 결과를 보여주거나 입력해야 하는 값의 가이드라인을 제공하는 도움말

3. 플레이스홀더와 밸리데이션

• 플레이스홀더
  • 플레이스홀더는 플레이스(자리를) + 홀더(지키고 있는 것)로, 한국말로는 ‘자리표시자’
  • 사용자가 입력해야 하는 예시를 제공하는 용도로 사용
  • 사용자가 글자를 입력하기 시작하면 사라지고, 글자를 모두 지우면 다시 나타남

    

  • 유의점 : 조건대신 예시를 넣기, 텍스트필드에 입력해야 하는 값의 조건은 헬퍼 텍스트로 적어줄 것

    

• 유효성 검사 (or 밸리데이션 체크(Validation Check))
  • 사용자가 입력한 텍스트가 유효한지 아닌지를 검사해주는 것(ex.‘입력한 텍스트에 문제가 있으니 다시 확인해주세요’)
  • 방해가 발생했을 때 그걸 자연스럽게 피하거나 해결할 수 있도록 도와주는 것
  • 주의사항 : 오류는 부정적인 인식을 주는 요소기 때문에, 오류가 발생하더라도 자연스럽게 차선책이나 해결책을 제안함으로써 오류에 대한 부담이나 거부를 최소화해야 함

    

4. 텍스트 필드 컴포넌트 만들기

 

---

 

✳️ 피그마 실습(숙제)

1. 버튼 컴포넌트 만들기

• 3가지 버튼, 크기, 배리언츠를 컴포넌트화했다.

  

1. 버튼 컴포넌트 심화버전 만들기 (+아이콘추가)

• 3가지 아이콘, 버튼, 크기, 배리언츠를 컴포넌트화했다.

  

1. 텍스트 필드 컴포넌트 / 심화버전 만들기

   

🔗 실제작업파일보기

Figma