[내일배움캠프 사전캠프 4일차] 피그마 기초 3주차 수강

와ㅏㅏㅏㅏㅏ우 3주차 강의 정말 길다..!

배속해서 들어줬는데도 길었다..!

그래도 끝까지 들어서 다행,,

최대한 내 모든 집중력을 모아서 들었다아

(본수업 들어가면 어쩔려고 벌써부터 집중력이,,)

 

 

<체계적으로 배우는 피그마 기초 완전 정복 3주차>

-수업목표

1. UI 디자인 환경을 이해하고 적합한 디자인 원칙을 수립할 수 있다

2. 피그마에서 스타일을 생성하고 관리할 수 있다

3. 컴포넌트의 개념을 이해하고 기능 및 형태에 따라 분류할 수 있다

 

 

-파운데이션

UI를 구성하는 가장 작은 알갱이이자 기초 재료

 

UI는 기초 재료인 파운데이션과, 이 파운데이션을 조합해 만드는 컴포넌트로 나눌 수 있다.

즉, 버튼이라는 컴포넌트를 만들기 위해서는 파운데이션부터 만들어야 한다.

모든 컴포넌트들은 이 파운데이션 요소를 조합해서 만들 수 있다.

 

1. 파운데이션의 구성

• 색상(Color)
• 서체(Font, Typography)
• 간격, 여백(Spacing, Gap)
• 곡률(Radius)
• 그리드(Grid)
• 고도(Elevation)
• 아이콘(Icon)

 

-컬러 스타일

 

컬러 스타일은 디자인에서 사용할 색상을 모아두는 팔레트를 뜻한다.

색상을 아무렇게나 사용하는 것이 아니라, 사용할 색상들을 미리 정리해두고 그 안에서 사용한다.

사용할 색상을 모을 때, 색상의 단계를 만드는 규칙을 만든다. (원활한 커뮤니케이션을 위해)

 

 

-폰트 스타일

폰트 스타일도 컬러 스타일과 마찬가지로, 디자인 시스템에서 사용할 폰트를 모아둔 목록이다.

다른 말로는 폰트 스케일이라고도 하는데, 스케일은 일정한 규칙에 따라 정렬된 하나의 세트를

뜻한다.

 

1. 폰트 스타일의 구성

• 패밀리(Family)
• 굵기(=무게감, Weight)
• 크기(Size)
• 행간(Line-height)
• 자간(Letter-spacing)

 

-마스터 컴포넌트와 인스턴스

 

UI디자인에서 컴포넌트는 파운데이션을 조합해 만들어지는 구성품을 이야기한다.

컴포넌트라는 표현은 디자인과 개발에서 모두 쓰이는 매우 넓은 개념의 표현이다.

특히 피그마를 다루는 디자이너들에게 컴포넌트는 ‘피그마로 만든 UI 블록’과 같은 말로 쓰인다.

또한 UI디자인에서 컴포넌트는 파운데이션을 조합해 만든 디자인 단위의 개념이다.

 

1. 마스터 컴포넌트(Master Component)

 

복사된 디자인들을 한번에 수정하거나 편집할 수 있도록 해주는 중요한 기능이다.

마스터 컴포넌트는 원본이다. 따라서 변하지 않는다.

원본 그대로이기 때문에 수정이 필요하면 그냥 수정하면 되고, 지우고 싶다면 그냥 지우면 된다.

마스터 컴포넌트를 복제하면 마스터 컴포넌트의 복제본, 인스턴스가 생긴다.

 

2. 인스턴스(Instance)

 

인스턴스는 마스터 컴포넌트의 복제본이다.

즉, 마스터 컴포넌트를 복사하면 인스턴스가 생기고 컴포넌트의 속성을 그대로 이어 받는다.

 

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

컴포넌트를 수정하면 인스턴스에도 반영된다.

인스턴스를 먼저 수정하면 컴포넌트를 수정해도 반영되지 않는다.

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

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

 

 

-디자인 시스템의 이해

1. 디자인 시스템의 목적

반복적인 UI를 효율적으로 관리, 팀 전체가 같은 정도로 이해

💡UI키트는 사용하는 규칙과 방법이 없지만 디자인 시스템은 상세하게 적혀 있는 문서 형태이다.

 

2. 디자인 시스템의 장단점

장점

(1) 디자인을 반복해서 사용할 수 있어서 시간과 비용이 줄어든다.

(2) 누가 만들어도 동일한 품질의 제품을 설계할 수 있다.

단점

(1) 다양한 형태의 UI를 모아 하나로 통일하는 과정이 매우 오래 걸린다.

(2) 필요한 건 몇개 없는데, 그에 비해 UI가 과하게 많아질 수 있다.

(3) 새로운 디자인이 필요할 때, 디자인 시스템을 활용하려다 보니 혁신이 줄어든다.

 

 

-UI디자인 기본

1. UI의 분류

액션(Action) : 사용자가 중요한 행동을 수행할 때 사용한다.

인풋(Input) : 사용자의 입력을 받을 때 사용한다.

인포메이션(Information) : 사용자에게 서비스의 상태나 안내 사항을 전달할 때 사용한다.

컨테이너(Container) : 컴포넌트 여러개가 결합되어 하나의 덩어리를 이루는 컴포넌트이다.

내비게이션(Navigation) : 사용자가 페이지를 이동할 때 사용한다.

컨트롤(Control) : 사용자가 설정이나 값을 수정할 때 사용한다.

 

2. 의사 상태(Pseudo State)

의사 상태에서 의사란 가짜의, 가상의(pseudo: ‘수도’)라는 뜻이다.

의사 상태는 컴포넌트의 가상의 상태를 표시할 때 사용한다.

 

버튼에 마우스를 올렸을 때 색깔이 바뀌는 건,

실제 버튼이 다른 걸로 바뀐 것이 아니라 버튼이 가진 가상의 상태를 나타내는 것이다.

 

 

-UI 만들기

1. 버튼 컴포넌트

컴포넌트의 종류 중 액션에 해당하는 컴포넌트이다.

버튼 컴포넌트는 누름으로써 중요한 동작을 수행하는 요소이다.

💡행동 유도성(Affordance) : 누를 수 있다는 시각적인 힌트를 충분히 드러내야 한다.

 

(1)버튼의 구조

 

(2)버튼의 종류

1️⃣ 박스 버튼, 일반 버튼

 

2️⃣ 아웃라인 버튼, 고스트 버튼, 엠티 버튼

 

3️⃣ 스플릿 버튼

 

4️⃣ 텍스트 버튼

 

2. 텍스트필드 컴포넌트

컴포넌트의 종류 중 인풋에 해당하는 컴포넌트이다.

인풋은 사용자가 무언가를 입력할 수 있게 하는 컴포넌트를 말한다.

그 중 텍스트필드는 가장 대표적인 UI이다.

 

(1)텍스트필드의 구조

 

(2)플레이스홀더와 밸리데이션

1️⃣  플레이스홀더

 

플레이스홀더는 플레이스(자리를) + 홀더(지키고 있는 것)로, 한국말로는 ‘자리표시자’라고 한다.

사용자가 입력해야 하는 예시를 제공하는 용도로 사용한다.

사용자가 글자를 입력하기 시작하면 사라지고, 글자를 모두 지우면 다시 나타난다.

 

플레이스홀더에는 조건 대신 입력 예시를 넣어 준다.

텍스트필드에 입력해야 하는 값의 조건은 헬퍼 텍스트로 적어 준다.

 

2️⃣ 유효성 검사

텍스트필드에서 중요한 건 사용자가 입력한 텍스트가 유효한지 아닌지를 검사해주는 것이다.

이걸 우리는 유효성 검사, 밸리데이션 체크(Validation Check)라고 부른다.

💡줄여서 밸리데이션이라고 편하게 부르는 경우도 있다.

 

부정적인 문구보다는 최대한 긍정적인 방향으로 사용자에게 안내해 주어야 한다.

 

 

-UI 만들기(2)

1. 컨트롤 컴포넌트

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

여러 선택지 중 사용자가 원하는 것을 고를 수 있도록 돕는 요소라고 볼 수 있다.

왼쪽부터 순서대로 체크박스, 라디오, 스위치(토글), 슬라이더라고 부른다.

 

컨트롤 요소는 버튼 등 다른 UI에 비하면 크기가 매우 작다.

사용자들이 작은 요소를 손가락으로 제대로 누르기에는 불편할 것이다.

따라서 컨트롤 요소 자체는 작더라도, 그 주변으로 최소 크기 범위를 만들어 준다.

 

컨트롤 요소는 대부분 라벨과 같이 쓰인다.

이때, 라벨을 누르더라도 컨트롤 요소가 작동하게 하는 것이 일반적이다.

따라서 여러 컨트롤 요소를 배치할 때는 간격을 충분히 줘서 잘못 누르는 일을 최대한 줄여준다.

 

컨트롤 요소와 라벨을 좀 더 깔끔하게 정렬하려면 두 요소의 세로를 같게 해두는 게 좋다.

라벨의 세로는 행간과 같아, 컨트롤의 사이즈를 행간에 사용한 값들로 만들어두면 정렬이 더 쉽다.

 

2. 체크박스 컴포넌트

 

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

일반적으로 라벨과 함께 같이 쓰인다.

 

(1)체크박스의 특징

1️⃣ 체크박스는 여러개를 선택할 수 있다.

2️⃣ 체크박스는 아무것도 선택하지 않을 수 있다.

3️⃣ 하위 항목이 있을 때, 일부만 선택할 수도 있다.

 

3. 라디오 컴포넌트

 

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

일반적으로 라벨과 함께 같이 쓰인다.

💡라디오의 디자인은 디자인 시스템들마다 제각각이다.

 

(1)라디오 컴포넌트의 특징

1️⃣ 라디오는 여러개를 동시에 선택할 수 없다.
2️⃣ 라디오는 아무것도 선택하지 않는 게 불가능하다.

 

 

피그마  기초  3주차  숙제하기

으아아!!기나긴 이론에 비해서 비교적 숙제가 쉬워서 감사했다ㅏ

기존 강의자료를 토대로 나름 요약했는데도

TIL작성만 두시간을 넘게해서 지친다 지쳐,,

그래도 나름 재밌었다 멜팅 일보 직전이지만,,🫠