[피그마 강의] 3주차: UI 만들기 실습

 

3-8) UI 만들기 실습(1)

 

버튼 컴포넌트

• 버튼 컴포넌트 참고는 노션 참고하기(머터리얼 디자인, 우버 디자인 시스템, 라이트닝 디자인 시스템, 카본 디자인 시스템, ... )
• 버튼 컴포넌트는 액션에 해당하는 컴포넌트다. 
• 버튼 컴포넌트를 누름으로써 ▶️ 중요한 동작을 수행하는 요소다. 

 

버튼 설계 시 유의할 점

· 우리가 직관적으로 알아야 한다. 

· 상호작용이 가능한 물체는, 상호작용이 가능하다는 시각적인 단서를 제공해야 한다. => 행동 유도성

· 버튼을 설계할 때, 누를 수 있다는 시각적인 힌트를 드러내야 한다. => 행동을 유도하는 속성, '어포던스'라고 부른다. 

· 버튼을 디자인할 때, 심미적인 완성도보다 버튼의 목적을 우선 생각해서 설계해야 한다. 

 

버튼의 구조

💡컴포넌트는 항상 구조 파악이 첫번째다!

• 크게 네 가지 구조로 되어있다.

출처: 체계적으로 배우는 피그마 기초 완전 정복 (3)

• 컨테이너: 안에 있는 요소를 감싸고 있는 프레임

💡 버튼의 높이는 컨테이너 안의 상하 여백 + 안에 있는 요소의 높이로 정해짐

 

• 라벨/레이블: 버튼의 행동을 안내하는 글자
  UI에서 사용자가 입력하는 글자는 텍스트, UI가 사용자에게 '이렇게 하세요'를 안내하는 글자는 라벨

 

• 리딩 엘리먼트: 버튼 라벨보다 더 앞쪽에 있음
  엘리먼트는 요소라는 뜻
• 트레일링 엘리먼트: 버튼 라벨보다 더 뒤쪽에 있다는 뜻에서 트레일링(뒤따르는) 엘리먼트라고 부름

💡리딩과 트레일링:
버튼에 있는 왼쪽(앞)에 있는 아이콘을 리딩(앞서가는, 이끌어가는)요소라고 부른다. 

 

 

버튼의 종류

• 박스 버튼, 일반 버튼 (안에 색이 있는 거, 주로 중요한 버튼으로 사용됨)
• 아웃라인 버튼, 고스트 버튼, 엠티 버튼 (테두리만 있는 버튼, 주로 덜 중요한 버튼으로 사용됨)
• 스플릿 버튼 (split: 쪼개진, 주요 액션과 관련된 보조 액션 제공할 때 사용, 일반적으로 보기는 힘듦
• 텍스트 버튼 (배경이나 테두리 없이 글자로만 이루어짐, 별로 중요하지 않은 기능 수행할 때 사용)

출처: 체계적으로 배우는 피그마 기초 완전 정복 (3)_순서대로 박스버튼, 아웃라인 버튼

출처: 체계적으로 배우는 피그마 기초 완전 정복 (3)_순서대로 스플릿 버튼, 텍스트 버튼

 

---

버튼 만들기

· 다 만들고 컴포넌트 만들기 누르기

 

---

텍스트 필드 컴포넌트

• 컴포넌트의 종류 중 인풋에 해당하는 컴포넌트다.
• 인풋은 사용자가 무언가를 입력할 수 있게 하는 컴포넌트를 말한다. 
• 그 중 텍스트필드는 가장 대표적인 UI다. 

 

텍스트 필드의 구조 

출처: 체계적으로 배우는 피그마 기초 완전 정복 (3)

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

 

플레이스홀더와 벨리데이션

• 플레이스홀더: 플레이스(자리르) + 홀더(지키고 있는 것) = 자리 표시자, 사용자가 입력해야 하는 예시를 제공하는 용도로 사용한다. 
• 플레이스홀더 사용 시 유의점: 조건 대신 입력 예시를 넣어줘야 한다. 

출처: 체계적으로 배우는 피그마 기초 완전 정복 (3)

 

• 유효성 검사: 사용자가 입력한 텍스트가 유효한지 아닌지를 검사해야 한다. => 유효성 검사, 밸리데이션 체크(줄여서 밸리데이션)
  • 구매나 소통 과정을 방해하는 순간이 없는 것도 중요하지만, 방해가 발생했을 때 그걸 자연스럽게 피하거나 해결할 수 있도록 도와주는 것이 중요하다. 
  • 유효성 검증은 적절한 문구와 안내로 사용자가 다시 행동을 완료할 수 있도록 유도해야 한다. 
  • 유효성 검사 시 주의사항: 오류에 대한 부담이나 거부를 최소화해야 한다. (부정적인 문구보다는 최대한 긍정적인 방향으로 사용자에게 안내해야 한다.)

 

텍스트 필드 만들기

 

 

3-9) UI 만들기 실습(2)

 

컨트롤 컴포넌트

· 컨트롤 요소: 사용자의 선택을 돕는다. 

· 컨트롤 컴포넌트는 사용자가 선택지를 특정할 수 있도록 하는 요소로, 여러 선택지 중 사용자가 원하는 것을 고를 수 있도록 돕는 요소다. 

· 컨트롤 컴포넌트의 종류: 체크박스, 라디오, 스위치(토글), 슬라이더

· 컨트롤 요소 설계 시 주의할 점

•  최소 터치 영역: 버튼 등 다른 UI 에 비하면 크기가 작음, 사용자도 누를 때 불편하기 때문에 요소 자체가 작더라도 최소 크기 범위를만들어줘야 한다. 

· 컨트롤 요소의 라벨: 컨트롤 요소는 대부분 라벨과 같이 쓰이며, 라벨을 눌러도 컨트롤 요소가 작동하게 하는 것이 일반적이다. 

· 컨트롤 요소와 라벨의 정렬: 컨트롤 요소와 라벨을 좀 더 깔끔하게 정렬하려면 두 요소의 세로를 같게 해두는 게 좋다. 라벨의 세로는 행간과 같기 때문에, 컨트롤 사이즈를 행간에 사용한 값들로 만들어두면 정렬을 더 쉽게 할 수 있다. (== 직접 해봐야 알 것 같다...)

출처: 체계적으로 배우는 피그마 기초 완전 정복 (3)

---

 

체크박스 컴포넌트

· 여러 선택지 중 1개 이상을 선택할 때 사용되며, 일반적으로 라벨과 함께 같이 쓰인다.  

· 의사상태: 체크됨/체크되지 않음

· 특징: 여러 개 선택 가능, 아무것도 선택하지 않을 수 있음, 하위 항목이 있을 때 일부만 선택할 수 있음.

 

체크박스 만들기

---

라디오 컴포넌트

· 여러 선택지 중 1개를 선택할 때 사용하는 컨트롤 컴포넌트며, 일반적으로 라벨과 함께 쓰인다. 

· 왜 라디오인가? 초기 형태의 라디오는 주파수 버튼을 누르면 이미 눌린 다른 버튼은 꺼진다. 

· 의사상태: 선택됨/선택되지 않음

· 특징: 여러 개 동시에 선택 불가, 아무것도 선택하지 않는 게 불가능

 

라디오 만들기

· 체크박스랑 만드는 방법 거의 같다. 

· 프레임이 20*20이면 곡률 10하면 원이 완성된다. 이때 원으로 만들면 안되는 이유는 프레임이 아니기 때문이다!

 

 

3-10) UI 학습 시 도움되는 관점

 

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

· 우리는 버튼의 생김새가 아니라 버튼이 하는 일을 기준으로 생각한다.  

· 생김새로만 UI를 구분하면 조금이라도 다르게 생긴 UI가 나오는 순간 그때까지 알고 있던 기준점이 모두 사라진다. 
· 따라서 UI를 비교하고 공부할 때는 형태가 아니라 UI의 목적, UI의 기능에 초점을 두고 공부해야 한다. 

💡 이걸 우리는 UI의 기능 주의적 관점이라고 부른다!