폰트 스타일, 컴포넌트 알아보기와 UI 실습

[사전캠프_9/4]

• 피그마 3-4.~3-11. 강의 이수

​

​

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

​

3-4. 폰트 스타일

* 폰트 스타일 등록하는 방법은 컬러 차트 등록과 마찬가지로 플러그인을 활용하면 된다.

 

​

3-5. 마스터 컴포넌트와 인스턴스

​

• 컴포넌트의 개념
  • UI디자인에서 컴포넌트는 파운데이션을 조합해 만들어지는 구성품(피그마로 만든 UI 블록 등)

​

• 마스터 컴포넌트
  • 피그마에서 쓰는 컴포넌트 기능의 핵심
  • 디자인을 복사해서 사용할 수 있도록 한다.
  • 복사된 디자인들을 한번에 수정하거나 편집할 수 있도록 해주는 중요한 기능

​

• 인스턴스
  • 마스터 컨포넌트의 복제본
  • 마스터 컴포넌트를 복사하면 인스턴스가 생긴다. 따라서 컴포넌트의 속성을 이어받는다.

• 마스터 컴포넌트와 인스턴스의 관계
  • 컴포넌트를 수정하면 인스턴스에도 반영됨

• • 인스턴스를 먼저 수정하면 컴포넌트를 수정해도 반영되지 않음
    • 인스턴스를 먼저 수정해버리면 나중에 컴포넌트를 수정해도 인스턴스에 반영되지 않음(주의해야 함)

• • 컴포넌트를 지우더라도 인스턴스는 남아 있음

• • 연결을 해제(디태치_Detach)하면 인스턴스는 컴포넌트와 분리되고, 일반 프레임으로 변경된다.

 

 

3-6. 디자인 시스템의 이해

​

• 디자인 시스템의 개념
  • 우리는 웹사이트나 앱을 디자인한다. 이 웹과 앱을 제품(프로덕트)이라고 부름
  • 프로덕트를 만드는 디자이너들은 사용자들이 겪는 문제를 찾아 디자인으로 개선한다.(사용자들의 문제를 디자인으로 해결한다.)
  • 이 과정을 효율적으로 만들어주는 디자인 시스템

​

• 디자인 시스템의 목적
  • 반복적인 UI를 효율적으로 관리하기 위해
  • 팀 전체가 같은 정도로 이해하기 위해

>> 디자인 시스템은 UI 자체뿐만 아닐라 UI의 규격과 스펙, 사용 사례, 주의 사항 등이 총망라된 종합적인 제품 가이드라인이다.

​

• 디자인 시스템의 장단점
  • 장점
    • 디자인을 반복해서 사용할 수 있어서 시간과 비용이 줄어듬
    • 누가 만들어도 동일한 품질의 제품을 설계할 수 있다.
  • 단점
    • 다양한 형태의 UI를 모아 하나로 통일하는 과정이 매우 오래걸림
    • 필요한 건 몇개 없는데, 그에 비해 UI가 과하게 많아질 수 있다.
    • 새로운 디자인이 필요할 때, 디자인 시스템을 활용하려다 보니 혁신이 줄어든다.

​

3-7. UI 디자인 기본

​

• 의사상태
  • 가짜의 가상의 라는 뜻
  • 컴포넌트의 가상의 상태를 표현

 

 

3-8. UI 만들기 실습

​

• 버튼 컴포넌트의 정의
  • 컴포넌트의 종류 중 액션에 해당하는 컴포넌트
  • 누름으로써 중요한 동작을 수행하는 요소

​

• • 컨테이너(Container) : 안에 있는 요소를 감싸고 있는 프레임
  • 라벨/레이블(Lable) : 버튼의 행동을 안내하는 글자
    • UI에서 사용자가 입력하는 글자는 텍스트, 사용자에게 '이렇게 하세요'를 안내하는 글자를 라벨/레이블이라고 부름
  • 리딩 엘리먼트(Leading Element) : 버튼 라벨보다 더 앞쪽에 있는 요소
  • 트레일링 엘리먼트(Trailing Element) : 버튼 라벨보다 더 뒤쪽에 있는 요소버튼의 구조

 

 

 

• 버튼의 종류
  • 박스 버튼, 일반 버튼, 솔리드 버튼

 

• 아웃라인 버튼, 고스트 버튼, 엠티 버튼

 

• • 스플릿버튼
    • 보조 액션을 제공해야 할 때 사용하는 버튼

 

• 텍스트 버튼
  • 배경색이나 테두리 없이 글자로만 이루어진 버튼
  • 주요 액션에 비해 비중이 낮고 별로 중요하지 않은 기능에 사용

 

 

• 텍스트필드 컴포넌트의 정의
  • 컴포넌트의 종류 중 인풋에 해당
  • 인풋은 사용자가 무언가를 입력할 수 있게 하는 컴포넌트

​

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

 

• 플레이스홀더
  • 플레이스(자리를) + 홀더(지키고 있는 것)로, '자리표시자'라고 한다.
  • 플레이스홀더 자리에는 입력값의 조건을 적지 않는 것을 권장

 

 

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

​

• 컨트롤 컴포넌트
  • 사용자가 선택지를 특정할 수 있도록 하는 요소

​

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

 

• 컨트롤 요소 설계 시 참고할 점
  • 컨트롤 요소의 최소 터치 영역
    • 컨트롤 요소 자체는 작더라도, 그 주변으로 최소 크기 범위를 지정

 

• 컨트롤 요소의 라벨
  • 라벨을 누르더라도 컨트롤 요소가 작동하게 범위를 지정

• but 간격은 충분히

 

• 컨트롤 사이즈를 라벨 행간 값(라벨의 세로 값)으로 사용하면 깔끔히 정렬
• 컨트롤 요소와 라벨의 정렬

 

• 체크박스 컴포넌트
  • 여러 선택지 중 1개 이상을 선택할 때 사용하는 컨트롤 컴포넌트

• 라디오 컴포넌트
  • 여러 선택지 중 1개를 선택할 때 사용하는 컨트롤 컨포넌트

​

* 버튼을 만들 땐 도형이 아닌 프레임으로 만들것.

* 안에 아이콘 같은 요소를 넣어야하기 때문에 도형이 아닌 프레임으로 제작

​

 

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

​

• UI의 기능주의적 관점
  • 사용자는 버튼의 생김새가 아니라 버튼이 하는 일을 기준으로 생각한다.

>> UI를 비교하고 공부할 때는 형태가 아니라 반드시 UI의 목적, UI의 기능에 초점을 두고 공부해야 한다.

​

​

[회고]

실제 작업에서 마스터 컴포넌트에 대한 중요성을 알게되었다.

마스터 컴포넌트를 자연스럽게 사용할 수 있도록 반복해서 실습을 진행할 것이다.