피그마 강의 [1-3강]

[2강]

보더: 실제 코드 블록의 테두리

UI크기= 개체의 크기 + 패딩

wrap:감싸기 -> 일정 위치부터 다음 줄에 쌓임

* 오토레이 아웃은 만들어지는 순서대로 밑으로 쌓임

 

[컨스트레인트]

: 제약, 조건

:즉, 오토레이아웃 안에 있는 개체들이 움직이는 방식을 제한함

L '부모 컨테이너의 크기가 변할 때, 자식 컨테이너는 어디를 기준으로 변할까?'

파란 점선이 컨스트레인트 (위이미지는, 왼쪽과 상단을 기준으로 부모 컨테이너에 고정시킨다는 의미)

 

[프레임 리사이징]

컨스트레인트 vs 프레임 리사이징 : 컨스트레인트는 일반적인 프레임에 대한 내용, 

                                                         리사이징은 오토레이아웃 컨테이너 안에서의 내용

값	설명	유형
Fixed	고정값	공통
Hug	자식 컨테이너의 크기에 맞춰 조정	부모만 사용 가능
Fill	부모 컨테이너의 크기에 맞춰 조정	자식만 사용 가능

자식이 Fixed-> 부모가 Hug

자식이 Fill -> 부모가 Fixed

 

[포지션] -> 프로토타입에서 설정

: 요소의 위치를 고정하거나 스크롤에 따른 위치를 조정할 때, 개발에서 포지션이라는 속성을 조정해서 만듦

 

1) Static (스태틱): 일반적인 요소들이 가지고 있는 포지션. 기본값이자 스크롤을 하면 같이 따라 움직임.

2) Fixed (픽스드): 화면 전체를 기주으로 스크롤 하더라고 항상 고정된 위치에 있음.

                              우리가 아는 웹사이트의 헤더나 앱 하단의 버튼

3) Absolute(앱솔루트): Fixed와 유사하지만, 고정되는 기준이 컨테이너 안. 즉, Fixed는 화면 전체를 기준으로 하고,

                                     Absolute는 본인이 담겨 있는 부모 컨테이너를 기준으로 함.

4) Sticky(스티키): 스크롤에 따라서 기본값과 Fixed를 전환하는 포지션.

                             스크롤을 따라 움직이다가, 특정 위치부터는 상단에 고정됨

나머지는 프로토타입에서 설정, Absolute만 해당 부분에서 사용

 

 

[3강]

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

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

파운데이션(엘리먼트) 구성

- 색상(color)/ 서체(font/ typography)/ 간격(spacing)/ 여백(gap)/ 곡률(radius)/ 그리드/ 고도/ 아이콘

 

[RGB와 Hex Code]

-컴퓨터는 빨강, 초록, 파랑을 각각 256가지의 값으로 보여주고, 이 각각의 숫자를 컴퓨터는 16진수로 변환해서 읽음.

#FFFFFF -> 헥스코드

-'컬러 프로필(프로파일): 디스플레이가 코드를 해석할 때 사용하는 색 기준표

-컬러 스타일: 디자인에서 사용할 색상을 모아두는 팔레트

                       기본적으로 2-3가지 색상만듦 (포인트 컬러/ 백그라운드 컬러/ 세컨더리 컬러)

                        -포인트 컬러 = 프라이머리 컬러 (중요하고 핵심적인 부분에만 사용)

- 색상의 확장성 ( 색상을 정했다면, 가장 밝은 단계부터 가장 어두운 단계까지 총 10단계로 만듦)

- [1:3:6 법칙]

포인트 컬러는 화면의 10%, 세컨더리 30%, 배경 60%

 

[컬러스타일 만드는 법]

플러그인: Coolors

원하는 컬러 선택

 

사각형들을 만들고, 색 복붙

Styler 플러그인

각 색을 10개씩 복사한 후 컬러를 눌러 Hex를 HSL로 변경

명도가 어두운 순으로 10씩 나열 (위 사람이 선택한 색의 기본 명도가 42였음. 가장 어둡게 2로 시작해서, 예-2/12/22/32/42/52/62/72/82/92

모두 적용 후 이름 바꿔주기 (어두운게 900, 가장 밝은게 50)

Styler 적용 -generate Styles

색상이 스타일화 됨

 

 

 

[폰트 스타일]

: 패밀리(Family: 폰트 종류)/ 굵기(=무게감, weight)/크기/ 행간/ 자간

크기: 폰트 크기가 20px이상일 때는 4px씩 차이나게 하는게 일반적.

         일반적으로 20px 미만인 폰트들은 본문에 사용하고, 20px 이상부터는 제목에 사용

         일반적으로는 16px(웹사이트 기본폰트 사이즈이기 때문) 부터 시작하고, 2px씩 줄이거나 늘림.

 

행간(라인- 하이트) : 글자 줄 사이의 간격

일반적인 행간 값: 제목: 120- 135%, 본문: 135-170% 본문 같은 경우 150%가 제일 좋다고 알려짐.

Ui에서 쓰기 좋은 패밀리: 노토산스/ 프리텐다드/ 스포카 한 산스/ 민 산스/ 수트

사용한 폰트 디테일들 입력하고, 이름 바꿔줌

Styler적용

적용 이미지

 

[컴포넌트]: 파운데이션 요소들을 조합해 만들어지는 구성품

[마스터 컴포넌트] 

: 쉽게 말하자면, 라이브러리에 버튼 원본을 저장해 두고 버튼의 복사본들을 사용 -> 수정시 원본만 수정 -> 복제본들은

  수정 내용이 일괄 적용

- 마스터 컴포넌트를 복제하면 마스터 컴포넌트의 복제본, '인스턴스'가 생김

 

인스턴스: 마스터 컴포넌트의 복제본

-> 컴포넌트의 속성을 그대로 이어받음, 수정 불가능

- 인스턴스를 먼저 수정하면 컴포넌트를 수정해도 반영 되지 않음 -> 덮어쓰기 됐다고 생각하면 편함

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

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

 

 

[디자인 시스템]-> For. 효율성/ 일관성

UI는 다른 디자이너도 똑같은 방법으로 만들고 쓸 수 있어야 하고, 개발자도 같은 생각을 해야함

<UI키트 VS 디자인시스템>

ui 키트는 단어만 있는셈. 즉, ui사용 방법은 없고 ui 만 있는 모양

디자인 시스템: UI자체 뿐만 아니라 UI의 규격,스펙, 사용 사례, 주의 사항 등이 총망라된 종합적인 제품 가이드라인(문서)

키트만 있다면, 일관성은 없어질 수 있음

 

아토믹 디자인 시스템(Atomic Design System): 기초 재료들은 세상을 구성하는 가장 작은 알갱이인 원자에 비유, 원자를 모아서, 분자를 만드는게 디자인 시스템의 핵심 개념

 

[잘 만들어진 디자인 시스템] - 머티리얼 디자인(구글), 밀리의서재, 일리야 그레벤 시스템, 라인, 세일즈포스

Material Design 3 - Google's latest open source design system

Material Design

millie Design Library 2.0

millie Design Library 2.0

 

Design Systems Database & Gallery

Design Systems Database & Gallery

 

LINE Design System for Messenger

LINE Design System for Messenger

 

Lightning Design System 2

Lightning Design System 2

 

 

[UI의 분류] 

-액션 (Action): 사용자가 중요한 행동을 수행할 때 사용 예- 버튼

-인폿 (Input): 사용자의 입력을 받을 때 사용 예- 텍스트필드/ 셀렉트박스

-인포메이션(Information): 사용자에게 서비스의 상태나 안내 사항을 전달할 때 사용 예- 토스트 메시지/ 스낵바/ 라벨

-컨테이너(Container): 컴포너트 여러개가 결합되어 하나의 덩어리를 이루는 컴포넌트 예- 카드/ 바텀시트/리스트

- 내비게이션(Navigation): 사용자가 페이지를 이동할 때 사용 예- 네비게이션 바, 앱 바, 화면 하단의 탭 바, 사이드바

- 컨트롤(Control): 사용자가 설정이나 값을 수정할 때 사용 예- 라디오/ 체크박스/ 스위치

 

 

[의사 상태 (Pseudo State)] : 사람을 애칭이나 별명으로 부르듯, 컴포넌트도 기본 자체는 유지한 채, 상황에 따라 다른 스타일을 가지는 경우가 있음

의사란 가짜의, 가상의 뜻

예- 버튼에 마우스를 올렸을 때 색깔이 변하는 것

실제 버튼이 다른 걸로 바뀐 것이 아니라 의사 상태가 된것

 

[버튼 컴포넌트] : 누름으로써 중요한 동작을 수행하는 요소

-어포던스(행동 유도성)를 줘야함 -> 상호작용이 가능한 물체는, 상호작용이 가능하다는 시각적인 단서제공

-심미적인 완성도 보다 버튼의 목적을 우선 생각하여 설계

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

[구조]

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

                    (버튼의 높이는 컨테이너 안의 상하 여백 + 안에 있는 요소의 높이로 결정)

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

3. 리딩 엘리먼트 : 버튼 라벨보다 더 앞쪽에 있다는 뜻에서 리딩 (이끄는) 엘리먼트라고 부름

4. 트레일링 엘리먼트: 버튼 라벨보다 더 뒤쪽에 있다는 뜻에서 트레일링(뒤따르는) 엘리먼트라고 부름

 

[종류]

1. 박스 버튼: 일반적인 버튼 

2. 아웃라인 버튼, 고스트 버튼, 엠티 버튼: 테두리만 있고 속이 빈듯한 형태

3. 스플릿 버튼 : 주요 액션과 관련된 보조 액션을 제공해야 할 때 사용하는 버튼 

4. 텍스트 버튼 : 배경색이나 테두리 없이 글자로만 이루어진 버튼

                          -> 주요 액션에 비해 비중이 낮고, 별로 중요하지 않은 기능을 수행할 때 사용

 

 

[버튼 컴포넌트 참고] - 머티리얼/ 우버/ 라이트닝/ 카본

All buttons – Material Design 3

All buttons – Material Design 3

Button · Base design system

Base Design System

Button · Lightning Design System 2

Lightning Design System 2

버튼 – 탄소 설계 시스템

Carbon Design System

 

 

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

[구조]

인풋 컨테이너: 글자를 입력하는 부분

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

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

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

헬퍼 텍스트: 입력해야 하는 값의 가이드라인을 제공하는 도움말

플레이스홀더: 플레이스 (자리를) + 홀더(지키고 있는 것)

플레이스 홀더 -> 사용자가 글자를 입력하기 시작하면 사라지고, 글자를 모두 지우면 다시 나타남

플레이스 홀더에는 조건 대신 입력 예시를 넣어주는게 더 좋음! 조건은 -> 헬퍼 텍스트로 적기

 

[컨트롤 요소 라벨] -> 컨트롤 요소 자체는 작더라도, 그 주변으로 최소 크기 범위 만들어주기

                                  최소 1*1(cm)

                                  보통 컨트롤 요소는 라벨과 같이 사용 -> 라벨을 누르더라도 컨트롤 요소가 작동하게 하는 것이 원칙

아이콘과 글씨영역 크기 동일하게 맞춰줌

디폴트/ 마우스가 올라간 것 / 눌린것/ 눌리지 않는 것/ 결정되지 않은 것

 

[체크박스 컴포넌트 참고]- 머티리얼/ 우버/ 카본/ 라이트닝

https://m3.material.io/components/checkbox/overview

Checkbox – Material Design 3

https://base.uber.com/6d2425e9f/p/83ffb9-check

Base Design System

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

Carbon Design System

https://www.lightningdesignsystem.com/2e1ef8501/p/980561-checkbox

Lightning Design System 2

 

 

[라디오 컴포넌트]- 여러 선택지 중 단 1개를 선택할 때 사용하는 컨트롤 컴포넌트. (체크박스는 여러개 선택가능)

여러 항목 중 하나를 반드시 선택/ 선택 후 다른 항목 선택 시 기존 항목 선택 사라지고 다른 항목 선택됨

- 원형 도형에서 만드는 것 보다 20*20 에서 절반인 10의 곡률을 주어 원형을 만드는게 좋음(그래야 프레임으로 남음)

-> 12*12 박스를 불러오고 곡률 6으로 해서 안으로 넣기 -> 컨스트레인트 중앙으로 맞춰주기 -> 배경색 넣기