피그마 활용법(1)_4주차 정리

[수업 목표]

• 피그마의 컴포넌트 개념과 분류를 이해합니다
• 버튼 컴포넌트의 개념과 구조를 이해합니다.
• 텍스트필드 컴포넌트의 개념과 구조를 이해합니다.

---

-컴포넌트 : 앞으로 계속 볼 컴포넌트가 무엇인지, 피그마에서 컴포넌트를 쓸때 필요한 용어와 기능
-버튼 컴포넌트 : UI의 대표. 어떤 종류, 어떤 구조로 구성되어 있는지 상세하게(버튼별 상태, 구조, 속성)
-텍스트필드 컴포넌트 : 텍스트필드의 개념, 주의해야 할 점, 상세하게(상태, 구조, 속성)

1. 컴포넌트
-개념: 어떤 것을 만들기 위한 재료/구성품
원자 요소(Atom)를 결합해서 만든 분자(Molecule) 단위의 구성 요소
-유의할 점: 버튼이 하는 일이 중요(모양이 중요X),
-종류 :
  ① 액션 : 사용자가 중요한 행동을 수행할 때 사용
  ② 인풋 : 사용자의 입력을 받을 때 사용
  ③ 인포메이션 : 사용자에게 서비스의 상태나 안내 사항을 전달할 때 사용
  ④ 컨테이너 : 컴포넌트 여러개가 결합되어 하나의 덩어리를 이루는 컴포넌트
  ⑤ 내비게이션 : 사용자가 페이지를 이동할 때 사용
  ⑥ 컨트롤 : 사용자가 설정이나 값을 수정할 때 사용
-의사 상태(수도Pseudo-Sate) : 가짜의, 가상의, 버튼의 기본값, 버튼의 마우스 올렸을 때, 눌렀을 때, 등

2.컴포넌트와 인스턴스
-마스터 컴포넌트 : 원본(변하지 않음)
-인스턴스 : 복사본
-마스터 컴포넌트와 인스턴스의 관계 : 마스터 컴포넌트를 변경하면, 인스턴스가 변형, 인스턴스만 변경하면 마스터 컴포넌트의 적용값이 적용되지 않음.

3. 배리언츠와 프로퍼티
-반복적인 일을 효율적이게 하기 위해 사용
-배리언츠(Variants) 변종 - 컴포넌트의 가상의 상태
-프로퍼티(Property) 속성 - 디자인 구조가 바뀌지 않는 선에서 변경할 수 있는 요소들을 다룰 때
-배리언츠와 프로퍼티를 고르는 기준 : 파운데이션 속성이 변하는지를 선택의 기준으로.
(색상/간격/폰트 변경하면 배리언츠)(색상/간격/폰트/아이콘의크기가 바뀌지 않으면 프로퍼티)
-프로퍼티(Properties)
① Variant :
② Boolean : 불리언 Yes or No/ On and Off
③ Instance swap : 인스턴스를 다른 인스턴스로 교체하는 기능.
④ Text : 컴포넌트 안에 텍스트를 수정하기 용이 하도록

대망의 UI설계
4.버튼 컴포넌트 : 가장 중요한 UI
-정의 : 액션에 해당하는 컴포넌트. 누름으로써 중요한 동작을 수행
-유의할 점 : 직관적으로 아는 것들(행동 유도성(어포던스)-시각적인 단서를 들어내야 함)
-버튼 구조 :
  ① Container : 버튼 구성 요소를 담는 컨테이너
  ② Label : 버튼 텍스트
    (UI에서 사용자가 입력하는 글자는 텍스트, UI가 사용자에게 ‘이렇게 하세요'를 안내하는 글자는 라벨)
  ③ Leading Element : 버튼의 앞쪽에 위치하는 요소
  ④ Trailing Element : 버튼의 뒤쪽에 위치하는 요소
-버튼의 종류 :
  ① 박스 버튼(솔리드solid, filled버튼), 일반 버튼 : 색이 차고 면으로 되어있는 버튼
  ② 아웃라인 버튼, 고스트 버튼, 엠티 버튼 : 테두리만 있음
  ③ 스플릿(split;쪼개진) 버튼 : 주요 액션과 관련된 보조 액션을 제공해야 할 때 사용
  ④ 텍스트 버튼 : 배경이나 테두리가 없이 글자로만 이루어진 버튼, 비중이 낮은 기능 수행할 때
-만들기 :

3. 텍스트필드 컴포넌트 : 글자를 입력하는 UI
-정의 : 인풋 - 사용자의 입력을 받을 때 사용
-구조 :
  ① Input Container : 실제 텍스트를 입력하는 컨테이너
  ② Label : 인풋의 라벨
  ③ Text : 인풋 텍스트
  ④ Leading Element : 인풋의 앞쪽에 위치하는 요소
  ⑤ Trailing Element : 인풋의 뒤쪽에 위치하는 요소
  ⑥ Helper Text : 인풋 하단에 위치하는 도움말 요소
-플레이스 홀더 : 플레이스(자리를) + 홀더(지키고 있는 것) = 자리 표시자(예-199105)
주의점 : 조건을 적으면 안됨(별명 4-10자 이내X) 예시를 넣어줌/ 조건은 헬퍼에 넣음
-밸리데이션 : 사용자가 입력한 값이 유효한지 검사(특수문자, 생년월일, 핸드폰 번호, 이메일 형식)
‘입력한 텍스트에 문제가 있으니 확인해주세요' = 유효성 검사, 밸리데이션 체크(Validation check)
적절한 안내 문구를 적어서 사용자가 완료 할 수 있도록 유도 - 문구와 안내가 중요
예) 사용자 이름 양식이 맞지 않습니다. → 최소 4자 이상의 이름이 필요해요.

4. 텍스트필드 만들기