[스파르타코딩클럽] Figma 활용법 (1) 강의 후기

 

 

총 4주차로 구성되어 있는 Figma 활용법 강의를 완강했다.

이틀 안에 나눠서 들어도 넉넉했을 정도로 난이도나 분량은 기초수준이다.

Figma 활용법 (2) 강의에선 심화과정이라 그 전에 틀을 다져놓는 정도?

그런데도 대학 때 배운 것과 비교해도 퀄리티가 꽤 높은편이다.

 

 

까먹기 전에 강의 내용 중 유용하거나 몰랐던 부분만 정리해두기..

↓↓↓

---

 

 

1. 오토레이아웃과 컨스트레인트 (2주차)

 

💡 오토레이아웃

: 레이어를 쌓고, 프레임을 배치하고 정렬하는 피그마의 핵심 기능

 

 

 

 

- 오토레이아웃 패널

1. 오토레이아웃의 정렬 방향: 오토레이아웃 안에 있는 프레임을 어떤 방향으로 쌓을 지를 정해요.
   1. 세로: 수직 방향으로 쌓아요
   2. 가로: 수평 방향으로 쌓아요
   3. 감싸기: 수평 방향으로 쌓다가, 일정 위치부터는 다음 줄에 쌓아요.
2. 정렬 위치: 오토레이아웃의 사이즈가 변할 때, 안에 있는 프레임들이 어디를 기준으로 정렬되는 지 정해요.
3. 💡 이건 컨스트레인트에서 더 자세하게 설명할게요!
4. 오토레이아웃 해제: 오토레이아웃 속성을 제거해요. 오토레이아웃이 아닌 일반 프레임으로 변경돼요.
5. 고급 옵션: 오토레이아웃의 고급 속성을 설정할 수 있어요.
6. 간격: 오토레이아웃 안에 프레임이 여러개 있을 때, 이 프레임 사이의 간격이에요.
7. 좌우 패딩: 오토레이아웃의 좌우 여백값이에요.
8. 상하 패딩: 오토레이아웃의 상하 여백값이에요.
9. 패딩 개별 조정하기: 상하좌우 패딩을 각각 따로 설정할 수 있어요.

 

 

 

💡 컨스트레인트

: 오토레이아웃 안에 있는 개체들이 움직이는 모양을 제한한다는 것 / 부모 컨테이너의 크기가 변할 떄, 자식 컨테이너는 어디를 기준으로 변할까?를 정할 수 있음

 

 

- 컨스트레인트 패널

1. 컨스트레인트의 조건을 바로 선택할 수 있어요.
2. 가로 방향의 컨스트레인트 조건을 선택할 수 있어요.
3. 세로 방향의 컨스트레인트 조건을 선택할 수 있어요.

 

• Left : 부모의 왼쪽 가장자리를 기준으로 고정
• Right : 부모의 오른쪽 가장자리를 기준으로 고정
• Left and Right : 부모의 왼쪽 가장자리와 오른쪽 가장자리 모두 기준으로 고정
• Center : 부모 길이의 중간을 기준으로 고정
• Scale : 부모의 길이에 비례

 

• Top : 부모의 위쪽 가장자리를 기준으로 고정
• Bottom : 부모의 아래쪽 가장자리를 기준으로 고정
• Top and Bottom : 부모의 위쪽 가장자리와 아래쪽 가장자리 모두 기준으로 고정
• Center : 부모 높이의 중간을 기준으로 고정
• Scale : 부모 높이에 비례

 

 

- 프레임 리사이징

• Fixed - 고정값 - 공통
• Hug - 자식 컨테이너의 크기에 맞춰 조정 - 부모만 쓸 수 있음
• Fill - 부모 컨테이너의 크기에 맞춰 조정 - 자식만 쓸 수 있음

 

 

 

 

---

 

 

 

 

2. UI설계와 디자인 시스템 (3주차)

 

💡 자주 사용하는 그리드

- 960 12 Column Grid

유닛 너비 : 60 / 거터 너비 : 20

 

 

- 1200 12 Column Grid

유닛 너비 : 76 / 거터 너비 : 24

 

- 1440 12 Column Grid

유닛 너비 : 96 / 거터 너비 : 24

 

 

 

 

💡 8포인트 그리드 디자인

: 8포인트 그리드는 간격이나 크기 등을 8,16,24,32....(8의 배수)로 맞추는 방법이다.

 

* 왜 하필 8일까?

: 8은 1, 2, 4, 8로 나눌 수 있고, 디자인을 축소할 때나 확대할 때 디자인을 망가뜨리지 않고 축소할 수 있다.

 

** 최근에는 8 대신 4배수로 많이 사용하는 편이다.

 

 

 

 

💡 반응형 디자인과 적응형 디자인

- 반응형 디자인

: 해상도의 변화에 실시간으로 반응한다.

 

- 적응형 디자인

: 한 번 적응하면 움직이지 않으며, 실시간으로 변하지 않는다.

 

 

 * 피그마 반응형 그리드 플러그인 Responsive

 

 

 

 

💡 디자인 참고 사이트

참고할만한 디자인 시스템 레퍼런스

 

1) 머터리얼 디자인

https://m3.material.io/

Material Design

 

2) 라인 디자인 시스템

https://designsystem.line.me/LDSM

LINE Design System for Messenger

 

3) 밀리의 서재 디자인 시스템

https://brunch.co.kr/@milliedesign/9

millie Design Library 2.0

 

4) 디자인 시스템 DB

https://designsystems.surf/

Design Systems Database: Surf among top‑notch Design Systems

 

5) 시멘틱 컬러의 개념과 적용 방법

https://emotion.co.kr/magazine/42/

디자인 시스템에 적용 가능한 시멘틱 컬러를 알아보자 | e · motion

 

6) UI 색상의 시각적인 원리
https://brunch.co.kr/@blckschrl/41

06화 UI를 위한 색

 

7) UI 디자인 - 색상

https://brunch.co.kr/@chulhochoiucj0/17

모바일 UI 디자인 기본 요소 - 색채 Color

 

8) UI 폰트 속성 소개

https://brunch.co.kr/@blckschrl/40

07화 UI를 위한 타이포그래피

 

9) 폰트 스타일에 대한 실무 방법과 개념

https://mesign.tistory.com/23

디자인 시스템 구축하기 - 폰트 스타일 가이드

 

10) 머터리얼 디자인 - 폰트

https://m3.material.io/styles/typography/overview

Typography – Material Design 3

 

 

 

 

 

---

 

 

 

 

3. 컴포넌트 (4주차)

 

💡 컴포넌트

: 재료, 구성품 / 파운데이션을 쌓고 쌓아서 만들어지는 구성품

 

- 컴포넌트의 종류

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

 

- 의사 상태 (Pseudo-state)

: 컴포넌트를 설계했을 때 만들 수 있는 다양한 상태값 / 가상의 상태

ex ) 나에게 별명이 많다고 해도 나라는 사람의 본질은 변하지 않는다.

 

💡 배리언츠와 프로퍼티

 

- 배리언츠

: 컴포넌트를 의사상태로 만들 때 사용 - 파운데이션 변화 o

 

- 프로퍼티

: 디자인 구조가 바뀌지 않는 선에서 변경할 때 사용 - 파운데이션 변화 x

 

1) Boolean : Yes or No / 둘 중 하나를 고르는 형식

2) Instance Swap : 인스턴스를 다른 인스턴스로 교체

3) Text : 컴포넌트 안에 있는 텍스트를 수정 가능하게 함

 

 

 

 

💡 버튼 컴포넌트

: 누름으로써 중요한 동작을 수행하는 요소 (액션)

 

* 행동유동성(어포던스) : 상호작용을 할 수 있는 물체는 상호작용이 가능하다는 시각적인 단서를 제공해야 한다.

 

 

- 버튼 구조

1) 컨테이너 : 안에 있는 요소를 감싸고 있는 요소

2) 라벨 / 레이블 : 버튼의 행동을 안내하는 글자

3) 리딩 엘리먼트 : 버튼 라벨보다 앞에 있는 요소

4) 트레일링 엘리먼트 : 버튼 라벨보다 뒤에 있는 요소

 

- 버튼 종류

1) 박스버튼, 일반버튼

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

3) 스플릿 버튼

4) 텍스트 버튼

 

 

 

 

* 버튼 컴포넌트 참고자료

1) 머터리얼 디자인

https://m3.material.io/components/all-buttons

All buttons – Material Design 3

 

2) 우버 디자인 시스템

https://base.uber.com/6d2425e9f/p/756216-button

Base Design System

 

3) 라이트닝 디자인 시스템

https://www.lightningdesignsystem.com/components/buttons/

Buttons - Lightning Design System

 

4) 카본 디자인 시스템

https://carbondesignsystem.com/components/button/usage/

Carbon Design System

 

 

 

 

 

 

 

💡 텍스트필드 컴포넌트

: 사용자가 무언가를 입력할 수 있게 해주는 컴포넌트

 

 

- 텍스트필드 구조

1) 인풋 컨테이너 : 글자 입력하는 곳

2) 라벨 / 레이블 : 인력해야하는 값이 무엇인지 알려주는 텍스트

3) 리딩 엘리먼트 : 텍스트보다 앞쪽에있는 엘리먼트

4) 트레일링 엘리먼트 : 텍스트보다 뒤쪽에있는 엘리먼트

5) 헬퍼 텍스트 : 유효성 검사 결과를 보여주거나 입력해야하는 값의 가이드라인을 제공하는 도움말

 

 

- 플레이스홀더

: 사용자가 입력해야하는 예시를 제공하는 용도로 사용됨, 사용자가 글자를 입력하기 시작하면 사라지고, 글자를 모두 지우면 다시 나타남

 

 

* 텍스트 컴포넌트 참고자료

 

1) 머터리얼 디자인

https://m3.material.io/components/text-fields/overview

Text fields – Material Design 3

 

2) 우버 디자인 시스템

https://base.uber.com/6d2425e9f/p/51073e-text-field/b/46994b

Base Design System

 

3) 라이트닝 디자인 시스템

https://www.lightningdesignsystem.com/components/input/

Input - Lightning Design System

 

4) 카본 디자인 시스템

https://carbondesignsystem.com/components/text-input/usage/

Carbon Design System

 

 

 

 

 

 

 

 

---

 

 

 

 

정리 끗!

심화 과정이 증맬루 기대된다.