피그마 기초 UI 이론 정리

휘·2026년 3월 11일

✍🏻information

목록 보기

11/22

디스플레이와 배수 이해하기

디스플레이와 픽셀

개념

디스플레이란? 디지털 화면
디스플레이는 픽셀로 이루어져 있다
해상도란? 디스플레이의 선명한 정도
= 디스플레이 안에 들어가 있는 픽셀의 개수
픽셀의 개수 가로줄의 픽셀 개수 * 세로 줄의 픽셀 개수

해상도와 픽셀의 관계

해상도가 같다면, 화면 크기가 클수록 픽셀 한 칸의 크기도 커진다.
화면 크기가 같다면, 해상도가 높아질수록 픽셀 한 칸의 크기가 작아진다.
일반적으로 화면 크기가 클수록 해상도가 높아진다.
면적 당 픽셀 개수가 더 많다면 더 세밀한 묘사가 가능하다.

1배수 디자인

모바일 앱의 사이즈
사이즈는 다 다르지만 레이아웃은 균일함을 알 수 있다.
왜? 기준이 되는 사이즈를 하나 정해서 디자인을 하기 때문에 !
1배수 디자인의 개념
디자인을 할 때 기준이 되는 사이즈.
1배, 100%, 원본 사이즈라는 뜻
1배수 디자인을 정하는 방법

사람들이 가장 많이 쓰는 사이즈로 하는 것이 일반적
유의해야 하는 건 내가 만들 앱을 쓸 사람들 !

권장하는 1배수 사이즈
갈수록 스마트폰이 발전하면서 1배수 사이즈도 조금 커졌다.
배수 = 픽셀 배율
기기를 만들 때 이미 정해져 있다.
https://yesviz.com/viewport/
현재 1배수 사이즈
아이폰 375 / 812
안드로이드 360 / 800
디자인 사이즈와 실제 사이즈의 원리
기기마다 정해진 픽셀 배율이, 우리가 만든 1배수 디자인을 몇 배 확대할 것인지를 정한다.
구현과정
1) 1배수 사이즈 디자인 및 개발
2) 기기가 코드를 읽고 렌더링해서 확대 또는 축소함
3) 기기 실제 해상도에 맞게 미세조정 후 화면을 띄움
(다운스케일, 업스케일)

이미지 표현 방식, 벡터와 래스터

컴퓨터가 그림을 그리는 방법

데이터를 채운다에 가깝다.
방식은 크게 두가지로 나뉜다.

래스터방식

= 비트맵 형식, 대표적으로는 포토샵.
픽셀 칸에 색깔 칩을 하나씩 담는 형식
파일 형식(확장자)으로는 jpg, bmp, gif, png 등

벡터방식

그림을 수식으로 표현하는 형식, 대표적으로는 피그마와 일러스트레이터.
수식으로 표현하는 형식이기 때문에 이미지보다는 코드 파일에 가깝다.
대표적인 확장자로는 svg

래스터 방식의 특징

해상도가 높을수록 화질이 좋음
해상도가 낮은 이미지를 크게 만든다고 화질이 좋아지지 않음
확대와 축소를 반복하면 색상 정보가 사라짐

이를 깨진다, 열화됐다 라고 표현함
단순한 방식이라 고해상도 이미지를 표현하기 좋음

모자이크 칸을 칠하면 되는 단순한 방식이라 크고 화려한 이미지도 벡터에 비해 파일 크기가 작다.

벡터 방식의 특징

확대 및 축소 등 크기 변형이 자유로움
이미지가 크고 복잡하면 수식도 복잡해짐

고해상도의 많은 색을 표현하는 경우 수식이 매우 복잡해져 파일 크기가 커진다.
깨지지 않는다고 해서 무조건 svg 형식이 정답만은 아님!

8포인트 그리드

화면 디자인에는 합의한 규칙이 있음. 일반적으로, 디자인 요소들은 8의 배수로 만든다. 이 규칙을 정의한 것이 바로 8포인트 그리드

개념

일반적으로 가장 많이 사용함
UI를 8의 배수에 맞춰 배치하는 레이아웃 규칙
UI 사이의 간격, 요소의 여백, 크기 등을 8의 배수 단위로 조정해서 사용함

왜 사용하는가

디자인을 빠르고 정확하게 만들기 위해서.

협업 시에 서로 물어보는 번거로움과 비효율성이 사라짐
규칙이 있기 때문에 처음 보는 디자인을 보더라도 규칙을 적용하기만 하면 됨

예시

폰트 사이즈는 2씩, 여백은 4씩 변경하면 된다는 걸 모두가 이해할 수 있다 !

만약 Xlarge를 만든다면?
폰트 사이즈는 20, 여백은 20으로 만들면 될 것이다.

왜 하필 8일까

1,2,4,8로 나눌 수 있는 정수.
1.5배, 2배, 3배, 0,75배, 1.25배를 해도 정수.
(정수가 아니면 픽셀 한 칸을 온전히 채우지 못함 !
= 앨리어싱이 일어난다.)
디자인을 축소하거나 확대할 때 디자인을 망가뜨리지 않고 축소하거나 확대할 수 있다.
해상도가 변하면서 업스케일, 다운스케일될 때 유연한 대처가 가능하다.

프레임과 그룹

코드는 디자인을 어떻게 읽을까?

디자인을 코드로 변환한다.
이때, 코드는 디자인을 레고처럼 쌓는다.
박스모델
코드는 기본적으로 네모난 박스영역을 만든다.
웹과 앱은 코드를 읽고, 디자인으로 다시 바꿔서 화면에 보여준다.

프레임

피그마에서 코드 블록을 만드는 기능이자, 실제 화면으로 인식하는 개체

프레임은 디자인을 코드로 바꿀 때 개발이 가능한 코드 블록으로 생성됨
박스모델의 박스 하나하나 > 프레임이라는 기능으로 구현
다른 개체나 프레임을 넣을 수 있기 때문에 컨테이너라고도 불림

그룹

여러 개체를 하나로 묶어주는 기능

여러 개체를 조정하거나 정리하는 등 여러 개체를 하나로 담는 기능
코드블록으로 인식되는 것이 아니라 SVG 이미지로 인식한다.
덧 실무에서 그룹을 사용하는 빈도는 매우 적음

프레임 VS 그룹

프레임은 개발에 필요한 속성들 적용이 가능하지만, 그룹은 속성을 적용할 수 없다. (실제 코드로 변환이 안됨)

오토레이아웃

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

레이아웃에 유연함을 만들어주는 가장 중요한 기능
앱과 웹을 만들 때 다양한 크기의 디스플레이에 유연하게 대응할 수 있도록 만들기 위한 필수 기능

코드블록의 구조

패딩padding : 코드 블록 안에 있는 개체와 함께 실제 블록의 사이즈가 되는 내부 여백
보더border : 코드 블록 내부 공간 바로 바깥의 가장자리, 실제 코드블록의 테두리
마진margin : 코드 블록 바깥의 여백이자 다른 코드 블록과의 간격

컨테이너가 만들어지는 원리
오토레이아웃은 개체를 패딩으로 감싸 컨테이너를 만들 때 사용한다.

코드블록 = 내부 개체 + 개체를 둘러싼 패딩
UI의 크기 = 개체의 크기 + 패딩

컨테이너를 쌓으려면?

오토레이아웃은 컨테이너를 계속해서 감쌀 수 있다 !
정리

오토레이아웃은 레이아웃을 자동으로 조정할 수 있는 기능
오토레이아웃은 개체를 패딩으로 감싸 컨테이너로 만듦
오토레이아웃은 간격에 맞게 컨테이너를 쌓을 수 있도록 함

만드는 방법
1. 프레임이 아닌 개체에 적용
2. 프레임에 적용

오토레이아웃 내에서는 새로 만들면 아래로 순차적으로 쌓인다 ! 맨 앞으로 보내기를 하면 맨 아래로 내려가는 것도 같은 원리

프레임과 컨스트레인트

오토레이아웃은 그 자체로도 이미 레이아웃을 자동으로 쌓을 수 있지만, 반응형 웹사이트처럼 실시간으로 같이 움직이는 레이아웃을 만들기 위해서는 움직일 때의 규칙을 만들어줘야한다!

컨스트레인트constraint

제약, 조건, 제한

오토레이아웃 안에 있는 자식개체들이 움직이는 방식을 제한
정확한 정의
부모 컨테이너의 크기가 변할 때, 자식 컨테이너는 어디를 기준으로 변할까?

어느 위치에 고정시킬건데?
현재 컨스트레인트는 왼쪽과 상단. 오른쪽과 하단을 늘려도 자식 개체는 움직이지 않는다. 그러나 왼상단을 늘리면 고정된 채로 함께 이동 !
이 때, 우정렬을 하게 되면 왼쪽 컨스트레인트가 해제된다!!

프레임 리사이징

컨스트레인트는 일반적인 프레임에 대한 이야기,리사이징은 오토레이아웃 안 컨테이너에서 벌어지는 이야기.

개념

프레임은 기본적으로 가로와 세로 길이가 고정
이 상태를 Fixed(픽스드;고정된) 라고 부른다.
프레임을 오토레이아웃으로 감싸는 순간, Fixed 외의 다른 사이즈값이 생기는데
이걸 피그마에서는 리사이징(Re-sizing)이라고 부른다.
부모의 리사이징 값에 따라 자식의 리사이징 값이 영향 받음
반대로, 자식의 리사이징 값에 따라 부모의 리사이징 값도 영향 받음

종류

값	설명	유형
fixed	고정값	공통
hug	자식 컨테이너의 크기에 맞춰 조정	부모만 쓸 수 있음
fill	부모 컨테이너의 크기에 맞춰 조정	자식만 쓸 수 있음

자식이 고정일 때 부모는 허그
자식이 필 일 때 부모는 픽스

같은 움직임 , 결과물이어도 부모 자식이 어떤 관계로 움직이는지에 따라 실제로 어떤 부분이 동적으로 움직이는 지가 달라진다. 실제로 어떤 부분이 반응형으로 움직여주는가 ! 를 개념부터 잘 이해하기

포지션 이해하기

position
실제 개발에서도 사용하는 개념.
디자인과 레이아웃을 위한 코드인 css에서 사용

모든 요소들은 스크롤하게 되면 스크롤을 따라 같이 움직이지만, 위치가 고정된 요소들이 존재한다.
이렇게 요소의 위치를 고정하거나 스크롤에 따른 위치를 조정할 때, 개발에서 포지션이라는 속성을 조정한다.

피그마에서 설정할 수 있는 포지션의 종류

static
일반적인 요소들이 가지고 있는 포지션, 기본값
스크롤을 하면 같이 따라 움직임
fixed
화면 전체를 기준으로 스크롤하더라도 항상 고정된 위치에 존재.
예시로는 웹사이트 헤더나 앱 하단 버튼 등
absolute
fixed와 유사하지만, 고정 기준이 컨테이너 안이다.
본인이 담겨있는 부모 컨테이너를 기준으로 고정됨
sticky
스크롤에 따라서 기본값과 fixed를 전환하는 포지션
스크롤을 따라 움직이다가, 특정 위치부터는 상단에 고정되는 것

파운데이션

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

UI = 파운데이션 + 컴포넌트(파운데이션의 조합)

버튼이라는 컴포넌트를 만들기 위해서는 파운데이션부터 만들어야한다.
모든 컴포넌트는 파운데이션 요소를 조합해서 만들 수 있다.

Design Decision 디자인결정 : 이 UI는 어떤 요소를 써서 만들 수 있겠구나 !

파운데이션의 구성

아톰, 엘리먼트 ,, 전부 유사한 개념

색상
서체
간격, 여백
곡률
그리드
고도(높이)
아이콘
.
.

컬러 스타일

디자인을 할 때 가장 먼저 정하게 되는 핵심요소는 색상

UI디자인에서의 컬러

핸드폰과 컴퓨터의 색이 조금 다르게 느껴졌던 건, 당연한 현상 ! 원리를 이해해보자

RGB와 헥스코드 Hex code

디스플레이 = 빛의 3원색으로 구현되는 화면
: 빛의 농도와 명암을 조절(가산혼합)해서 여러가지 색으로 만든다.
이 떄, 빛의 3원색을 RGB 라고 하고
이 각각의 숫자를 컴퓨터는 16진수로 변환해서 읽는데, 이 16진수 값을 헥스코드 라고 부른다.

예시
흰색은 255,255,255 이므로 FFFFFF

컬러 프로파일 color profile

빛의 색상에는 절대적인 기준이 없으므로 디스플레이는 색상을 자기만의 기준으로 해석한다. 바로 그 기준표가 컬러프로파일

컬러 프로파일은 전세계적으로 사용할 수 있어야 해서
공신력이 있는 기관이나 기업에서 만들어서 배포.
예시 Adobe RGB나 sRGB, Display P3 등

대표적인 프로파일들마다 색상 지원 범위도 조금씩 다르다

컬러 스타일

정의
디자인에서 사용할 색상을 모아두는 팔레트
사용할 색상을 모을 때, 색상의 단계를 만드는 규칙

디자인 할 때 사용할 색상들을 미리 정해두고 그 안에서 사용한다 !

UI디자인은 규칙이 매우 중요한 개념이다
규칙이 없다면 팀원 간 규칙을 알아차리기 어려워 커뮤니케이션이 불편해질 것

컬러 스타일을 만드는 방법

기본적으로 2-3가지 색상으로 만든다.
가장 밝은 단계부터 가장 어두운 단계까지 총 10단계로 만든다.
이후 글자 등 기본으로 사용할 흰색과 검은색, 회색을 골라서 10단계를 만든다 (뉴트럴 사용)

포인트 컬러
정말 중요하고 핵심적인 부분에만 사용하는 색상. 프라이머리 컬러 또는 액센트 컬러 라고 부른다

백그라운드 컬러
제품의 전체적인 분위기를 만들어 줌. 일반적으로 FFFFFF

세컨더리 컬러
배경색에서 도드라지는 부분을 만들어서 포인트 컬러를 뒷받침하는 색상. 보통 잘 쓰지 않음

팀간의 소통과 협업, 유지보수 비용에 따라 늘이거나 줄이고, 결과를 책임지면 됨 !

색상의 확장성
색의 가장 밝은 단계부터 가장 어두운 단계까지의 10단계를 각각 쉐이드 라고 부른다.

다양한 상황에 대응할 수 있도록 색상을 유연하게 만드는 것

왜 10단계?
명도와 채도를 기준으로 10단계를 만들기 때문에, 0%에서 100%를 기준으로 10단위로 나누기 쉽다.
중간에 50 단위의 색상을 추가하기도 쉽고 색상 간의 차이도 10단위이다 보니 알아보기도 쉽다 !

1:3:6 법칙

포인트 컬러를 10% / 백그라운드 컬러를 60% / 세컨더리컬러를 30%

디자인에서 가장 중요한 것은 , 정답은 없다는 것 !

폰트 스타일

폰트 스타일의 개념

개념

디자인 시스템에서 사용할 폰트를 모아둔 목록
= 폰트 스케일
스케일이란 일정한 규칙에 따라 정렬된 하나의 세트

보통은 하나의 폰트만 사용한다

구성

패밀리 family
폰트의 종류 (이름)
굵기(=무게감) weight
이 글자가 얼마나 더 중요한지를 알려주기 때문에 무게감이라는 표현을 사용함
디자이너
thin regular light
개발자
100 200 ...
크기 size
폰트의 크기, 일반적으로 16px부터 시작해 2px씩 경감
10px 미만은 보통 권장하지 않는다
20px 이상일 때는 4px씩 차이나게 하는 것이 일반적

왜 16px가 시작인가?
= 웹사이트의 기본 폰트 사이즈이기 때문에! 앱 이전부터 기본 폰트 사이즈를 16px로 사용했기에 자연스럽게 기본값이 되었다.
행간 line-height
정의
글줄과 글줄 사이의 간격
글자의 크기와 그 사이 가격을 합친 값
단위
%(상대단위) , px(고정단위)
자간 letter-spacing
글자와 글자 사이의 간격
상대단위와 고정단위 모두 사용할 수 있음
웬만하면 역량이 쌓이기 전에는 건드리지 않는게 좋다

적당한 행간을 적용해야 하는 이유
너무 짧으면
다음 줄을 읽기 위해 시선을 이동할 때 다음 줄을 찾기 어렵고, 위아래 붙은 줄들이 계속 시야에 같이 들어와 읽는 걸 방해함

너무 넓으면
다음 줄을 읽기 위해 시선을 이동하면 다음 줄을 놓치고, 전체적인 문단이 벌어져 보여서 레이아웃을 해침

일반적으로 통용되는 값
제목 120 - 135%
본문 135 - 170%

본문의 경우 보통 150%를 기본값으로 한다.
왜? 150%는 2배수로 움직일 수 있음 !
기본 폰트가 16px 일 때, 행간 값은 16+8=24px가 된다.
이렇게 규칙을 만들기 간편하고 계산하기에도 쉬워서 많이 사용함

서체마다 행간을 확인해야한다
폰트는 폰트 자체가 가진 기본적인 여백이 있음
이 여백은 폰트를 처음 만들 때 생기고, 바꿀 수 없는 기본값이며 그 기본값은 폰트마다 모두 다르다

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

컴포넌트란

구성품이라는 뜻을 가진다
= 파운데이션을 조합해 만들어지는 구성품

덧
컴포넌트라는 표현은 디자인과 개발에서 모두 쓰이는 매우 넓은 개념의 표현!
특히 피그마를 다루는 디자이너들에게 컴포넌트는 ‘피그마로 만든 UI 블록’의 의미이자, UI디자인에서 컴포넌트는 파운데이션을 조합해 만든 디자인 단위의 개념.
하지만 개발에서는 조금 다른 개념으로 쓰이는 등 맥락에 따라 개념이 조금씩 달라지기 때문에 컴포넌트라는 표현을 쓰실 때는 서로 같은 걸 의미하는 지 확인해야한다 !

마스터 컴포넌트 master component

피그마에서 쓸 수 있는 컴포넌트 기능의 핵심

기능
반복적인 디자인을 빠르게 하기 위해 디자인을 복사해서 사용할 수 있도록 만들어준다.

복사된 디자인을 한 번에 수정하거나 편집할 수 있게 해준다.

특징
마스터 컴포넌트는 원본. 변하지 않는다.
원본 그대로이기 때문에 수정이 필요하면 그냥 수정하고, 지우고 싶다면 지우면 된다.
마스터 컴포넌트를 복제하면 복제본인 인스턴스가 생김

인스턴스 instance

마스터 컴포넌트의 복제본
즉, 컴포넌트의 속성을 그대로 이어받는다.
실제로 디자인에 사용하는 컴포넌트.

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

마스터 컴포넌트의 수정은 인스턴스에도 반영된다.
인스턴스를 먼저 수정하면 마스터 컴포넌트를 수정해도 반영되지 않는다.
오버라이드(덮어쓰기) 우선순위 때문에 업데이트가 되지 않는 것임 !
마스터 컴포넌트를 지우더라도 인스턴스는 남아있다.
인스턴스를 조작하거나 속성값을 건드리려면 복구해야한다.
연결을 해제디태치detach하면 인스턴스는 마스터 컴포넌트와 분리되어 일반 프레임으로 변경된다.

디자인 시스템의 이해

디자인 시스템의 개념

필요한 이유

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

목적

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

UI키트 = 디자인 시스템?
비유1 단어와 문법
UI키트 = 단어
사용하는 규칙과 방법은 없고, 단순히 UI를 모아둔 것

디자인 시스템 = 문법
UI 구조, 쓰는 방법, 유의 사항까지 상세하게 적혀있는 문서의 형태를 갖추고 있다.

비유2 재료와 레시피
UI 키트 = 재료 목록
디자인 시스템 = 재료 목록과 다듬는 방법, 조리법까지 나와있는 요리책

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

팀과 제품의 발전단계에 따라 유연하게 선택한다.

합이 잘맞고 팀 인원이 적다면 UI키트 수준에서 빠르게 만드는 게 더 효율적일 수도 있다 !

디자인 시스템의 장단점

장점
디자인을 반복해서 사용할 수 있어서 시간과 비용이 줄어든다.
누가 만들어도 동일한 품질의 제품을 설계할 수 있다.

단점
다양한 형태의 UI를 모아 하나로 통일하는 과정이 매우 오래 걸린다.
필요한 건 몇 개 없는데, 그에 비해 과하게 UI가 많아질 수 있다.
새로운 디자인이 필요할 때, 디자인 시스템을 활용하려다보면 혁신이 줄어든다.

디자인 시스템을 만들 때 어디까지 만들지 매우 신중하게 의논하는 과정이 필요하다 !

디자인 시스템의 구성 요소와 원리

UI를 구성하고 있는 요소

버튼 하나에도 굉장히 다양한 요소들로 구성되어 있음
요소는 그 자체로는 기능을 가지고 있지 않음
요소들을 모아 버튼이라는 ui로 결합해야, '눌러서 작동시킨다'는 기능이 생김
즉, 요소들은 기능은 없지만 UI를 만드는 기초 재료

아토믹 디자인 시스템 Atomic design system

기초 재료들은 세상을 구성하는 가장 작은 알갱이인 원자에 비유 가능

원자를 모아서 분자를 만드는 게 아토믹 디자인 시스템의 핵심 개념 !

1. 가장 작은 원자 요소 설계
2. 원자를 모으고 결합하는 규칙 생성
3. 기능을 가진 UI 제작

덧. 기타 디자인 시스템
구글 머티리얼 디자인
https://m3.material.io/
라인 디자인 시스템
https://designsystem.line.me/LDSM
밀리의 서재 디자인 시스템
https://brunch.co.kr/@milliedesign/9
라이트닝 디자인 시스템 (슬랙 개발사)
https://www.lightningdesignsystem.com/
디자인 시스템 DB
https://designsystems.surf/

UI 디자인 기본

ui의 분류

액션 : 사용자가 중요한 행동을 수행할 때 사용
예시 버튼 등
인풋 : 사용자의 입력을 받을 때 사용
예시 텍스트필드, 셀렉트 박스 등
인포메이션 : 사용자에게 서비스의 상태나 안내사항을 전달할 때 사용
예시 토스트 메시지, 스낵바, 라벨
컨테이너 : 컴포넌트 여러개가 결합되어 하나의 덩어리를 이루는 컴포넌트
예시 카드, 바텀시트, 리스트 등의 복잡한 구조
내비게이션 : 사용자가 페이지를 이동할 때 사용
예시 네비게이션 바, 앱 바, 하단 탭 바, 사이드 바 등
컨트롤 : 사용자가 설정이나 값을 수정할 때 사용
예시 라디오, 체크박스, 스위치 등

참고. 분류는 임의적이고 관점에 따라 달라질 수 있으니, UI가 어떤 상황에서 어떤 기능을 하는지 이해하는 것이 중요하다 !

의사상태 Pesudo State

컴포넌트의 가상의 상태를 표시할 때 사용.
컴포넌트가 상황에 따라 기본 자체는 유지한 채, 다른 스타일을 가지는 경우 그 다른 스타일을 일컫는다.

예시
버튼에 마우스를 올렸을 때 색깔이 바뀌는 것.
=> 실제 버튼이 다른 걸로 바뀐 게 아니라 버튼이 가진 가상의 상태를 나타내는 것 !

설계 시 주의점
컴포넌트마다 쓸 수 있는 것과 없는 것이 있으니, 컴포넌트에 의사상태를 적용해서 만들 때는 실제 구현할 개발자와 이야기를 많이 나눠서 구현 여부를 잘 논의하는 과정이 필수적이다.

버튼 컴포넌트

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

UI를 설계할 때는 UI의 개념과 목적을 최우선으로 고려해 행동 유도성을 제공해야 한다

구조

💡 
사용자가 입력하는 글자는 텍스트,
UI가 사용자에게 안내하는 글자는 라벨 !

종류

박스버튼 / 일반 버튼

아웃라인 버튼 / 고스트 버튼 / 엠티 버튼

스플릿 버튼
텍스트 버튼

텍스트필드 컴포넌트

종류는 인풋
사용자가 무언가를 입력할 수 있게 하는 인풋 컴포넌트 중 대표적인 UI

구조

플레이스 홀더와 밸리데이션

플레이스 홀더

자리를 + 지킨다 = 자리표시자

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

유의사항

입력값의 조건을 적지 않는 것을 권장
조건 대신 입력 예시 를 넣자 !
(조건은 헬퍼 텍스트로.)

유효성 검사, 밸리데이션 체크

사용자가 입력한 텍스트가 유효한지 아닌지를 검사해주는 것
예시
이름에 특수문자가 있거나, 이메일 형식이 일치하지 않을 때 입력한 텍스트에 문제가 있으니 다시 확인해라 라는 이야기를 해주는 것

밸리데이션의 의의
사용자의 앱 달성 목적을 방해하는 요소가 발생했을 때, 그걸 자연스럽게 피하거나 해결할 수 있도록 도와주는 장치 또한 UI의 중요한 요소. 밸리데이션은 그 요소 중 하나이다 !

주의사항
기본적으로 인간은 부정적인 것에 거부 반응을 보이기 때문에, 부정적인 문구보다는 최대한 긍정적인 방향으로 사용자에게 안내할 수 있도록 해야한다.

컨트롤 컴포넌트

정의

사용자가 선택지를 특정할 수 있도록 하는 요소
여러 선택지 중 사용자가 원하는 것을 고를 수 있도록 돕는 요소

종류

체크박스 / 라디오 / 스위치(토글) / 슬라이더

컨트롤 요소 설계 시 참고할 점

최소 터치 영역
작은 요소를 손가락으로 제대로 누르기에는 불편할 것이므로, 요소 자체는 작더라도 그 주변으로 최소 크기 범위를 만들어주는 것이 좋다.
라벨
라벨을 누르더라도 컨트롤 요소가 작동하게 하는 것이 일반적이다.
따라서 간격을 충분히 주어서 잘못 누르는 일을 최대한 줄일 수 있도록 해야한다.
컨트롤 요소와 라벨의 정렬
두 요소의 세로를 같게 하면 깔끔하게 정렬할 수 있다.
라벨의 세로는 행간이므로, 컨트롤의 사이즈를 행간에 사용한 값들로 만들어주면 정렬이 수월하다.

체크박스 컴포넌트

정의

여러 선택지 중 1개 이상을 선택할 때 사용하는 컨트롤 컴포넌트
일반적으로 라벨과 함께 쓰인다.

의사 상태

기본적으로 2가지 의사 상태를 가짐
자세하게 설계한다면 더 많은 상태를 가질 수도 !

특징

여러 개를 선택할 수 있다.

다른 선택지에 선택이 영향을 주지 않는다
아무 것도 선택하지 않을 수 있다.
하위 항목이 있을 때, 일부만 선택할 수도 있다.

실무에서는 개발 요소의 부담을 줄이기 위해 상위 항목의 체크박스를 해제하는 걸로 통일해서 사용하는 경우도 있다 !
- 상위 항목을 선택하면 하위가 모두 선택되고, 하위 항목 일부를 체크하거나 해제하면 상위 항목의 상태가 '결정되지 않은' 이라는 뜻의 indetermined 상태로 변한다.

라디오 컴포넌트

정의

여러 선택지 중 1개를 선택할 때 사용하는 컴포넌트
일반적으로 라벨과 함께 쓰임

왜 라디오지?
초기 형태의 라디오는 주파수가 정해진 버튼을 누르는 방식이었다. 주파수 버튼을 누르면 이미 눌린 다른 주파수 버튼은 꺼진다. 여기에서 유래된 것 !

의사 상태

특징

여러개를 동시에 선택할 수 없다

이미 선택한 다른 선택지에 새로운 선택이 영향을 미친다
아무 것도 선택하지 않는 게 불가능하다

덧. 사용자가 많이 선택하는 항목을 기본값으로 설정해두면 더욱 편리한 사용자 경험을 유도할 수 있다

UI 기능주의 관점

모양도, 색상도 다르지만 모두 버튼이라고 받아들이는 이유는?

우리가 버튼의 생김새가 아니라 버튼이 하는 일을 기준으로 생각하기 때문에

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

컴포넌트 프로퍼티의 이해

정의
컴포넌트가 가상의 상태를 가질 때, 형태나 요소가 바뀌는 변화와 변경을 만들 수 있는 피그마의 컴포넌트 기능

왜 ?

하나의 컴포넌트로 더 많은 디자인을 효율적으로 만들기 위해서!

베리언츠 variants

넓은 관점에서는 프로퍼티의 한 종류긴 하지만 별개의 속성

사용법
컴포넌트가 가질 수 있는 또 다른 모습을 만들 수 있게 하는 컴포넌트 기능 즉, 가상의 상태(의사상태)를 만들 때 사용한다

ㄴ 마우스를 올렸을 때, 누를 수 없을 때는 기본상태의 배리언츠다 !

프로퍼티 (속성)

사용법
디자인 구조가 바뀌지 않는 선에서 변경할 수 있는 요소들을 다를 때 사용한다.

기본상태 + 아이콘이라는 디자인 구조는 그대로 두고 글자나 아이콘 스타일을 바꿀 때, 프로퍼티로 조정한다.

컴포넌트 프로퍼티 알아보기

배리언츠를 제외하면 피그마 컴포넌트를 만들 때 설정할 수 있는 프로퍼티는 3가지.

boolean
컴포넌트 안에 있는 특정 요소를 보이게 하거나 안 보이게 할 수 있는 속성, = 레이어를 껐다 켰다 할 수 있는 속성값
instance swap
인스턴스를 다른 인스턴스로 교체하는 기능. 인스턴스가 아닌 것으로 바꿀 수는 없음 !
주로 버튼 안의 아이콘, 팝업 안의 버튼 등을 교체할 때 사용한다.
text
컴포넌트 안에 있는 텍스트를 수정하기 쉽도록 컴포넌트 속성으로 만들어준다.
인스턴스 자체의 텍스트 수정 = 인스턴스의 속성을 바꾸는 것이라 매끄럽지 않다 ! 그래서 '컴포넌트 속성'을 부여해서 바꿔주는 것. 매끄럽게 하기 위해서 !

배리언츠와 프로퍼티를 고르는 기준

컴포넌트에 적용된 파운데이션이 변경되는지를 기준으로 적용한다.

버튼에 적용한 파운데이션 요소인 색상, 간격, 폰트가 바뀌었다면 > 배리언츠 !!

파운데이션 값이 바뀌지 않았다면 프로퍼티로 조정하는게 효율적 !

디자인에서는 프로퍼티로 조정할 수 있지만 개발에서는 불가능한 경우가 있기도 하고, 개발에서는 가능하지만 피그마 기능으로는 불가능한 경우가 있기도 하거든요.
따라서 ‘이건 프로퍼티야, 이건 배리언츠야’ 라고 딱 잘라서 이야기할 수 있는 경우는 ‘파운데이션 값이 변했다’ 뿐이고, 나머지의 경우는 디자이너가 유연하게 판단해야 해요. 실무 환경에서 가장 적합한 최선의 판단을 하기 위해서는 배리언츠와 프로퍼티의 차이 등 피그마 기본기를 탄탄하게 잘 알고 있어야 한답니다.

버튼의 배리언츠

위계 hierarchy, priority
'얼마나 중요한 행동을 하기 위한 버튼인가' 를 기준으로,
일반적인 버튼은 primary, secondary, tertiary의 3단계를 가진다.
크기
상태

합성 컴포넌트와 네스티드 인스턴스

합성 컴포넌트의 개념

컴포넌트끼리 결합하거나, 컴포넌트와 파운데이션을 결합한 컴포넌트

ㄴ버튼이라는 컴포넌트에 폰트, 컬러, 여백 및 간격, 곡률 등 파운데이션 요소가 결합한 컴포넌트

예시
바텀시트, 다이얼로그, 리스트, 카드, 탭 등

네스티드 인스턴스

컴포넌트가 컴포넌트를 감싼 상태일 때, 재료로 쓰인 하위 컴포넌트의 속성을 상위 컴포넌트에서도 조작할 수 있도록 하는 기능

탭 컴포넌트

컴포넌트의 종류 중 네비게이션
현재 화면을 전환해주는 요소

구조

개별 아이템인 탭 메뉴와 메뉴를 모아 만드는 탭 으로 구성

탭 디자인의 다양함

사용자에게 선택된 것과 선택되지 않은 것을 구분할 수 있게 해준다면 어떤 디자인이더라도 괜찮다 !

홈화면 만들기

히어로 섹션

메인 화면의 가장 상단 영역

앱 바 컴포넌트

정의
네비게이션
앱 화면 상단에 고정되어 현재 화면의 이름을 알려주면서, 이전 화면으로 돌아갈 수 있도록, 혹은 현재 화면에서의 보조 기능을 제공.

구조

리스트 컴포넌트

정의
컨테이너
동일한 형태의 정보 덩어리를 반복적인 패턴으로 보여줄 때 사용

구조

프로토 타입과 프로토타이핑

프로토타입

시제품
실제 제품을 만들지 않고 아이디어를 테스트 해 볼 수 있는 것.

구현하는 정도에 따라 낮은 단계와 높은 단계로 나눈다.
lo-fi 전체적인 흐름을 빠르게 맞춰볼 수 있는 수준, 와이어프레임

hi-fi 실제 제품과 거의 같거나 유사한 수준

프로토타이핑

프로토 타입을 만들거나 프로토타입을 사용해 테스트 하는 것

왜?

실제 제품을 만들지 않고 아이디어를 검증해볼 수 있다
팀 구성원들과 시각적인 결과물로 소통할 수 있다
부족하거나 놓친 부분을 확인할 수 있다

피그마 프로토타입의 장점과 단점

장점

직관적이다
빠르게 만들 수 있다

단점

실제 제품처럼 동작하는 걸 만들기 어렵다
효율성을 떨어트린다 (aka 블루 스파게티 ...)

구성요소

1. 핫스팟
  프로토타입을 시작하는 지점
  핫스팟을 누른 채 종착점에 끌어다 놓으면 선으로 연결됨
  프레임의 상하좌우 모서리 각 중앙지점에서 끌어올 수 있음

1. 커넥션
  화면을 서로 이어주는 연결선. 핫스팟->종착점

1. 종착점
  도착하는 지점. 핫스팟과 커넥션으로 이어짐

스크롤 컨테이너와 오버플로우

오버플로우 overflow

프레임 밖으로 컨텐츠가 넘어가는 것.
프레임에 오버플로우가 발생하면 콘텐츠를 스크롤로 보여줄 수 있다.

스크롤이 되게 하려면 프레임보다 콘텐츠가 더 길어서 넘쳐야 한다

스크롤 컨테이너

오버플로우가 생긴 프레임을 스크롤로 만들어주는 기본적인 프로토 타입 기능

실제로 스크롤 되어야하는 콘텐츠와 스크롤 속성을 적용할 컨테이너가 있어야 함

스크롤 방식

no scorlling : 기본값. 스크롤하지 않는다
horizontal : 가로로 넘칠 때, 가로방향으로 스크롤
vertical : 세로로 넘칠 때, 세로방향으로 스크롤
both directions : 가로 및 세로 방향으로 모두 스크롤

화면 디자인 연결하기

트리거와 액션

플로우의 구성요소

프로토타입의 흐름 하나하나를 플로우라고 부른다
플로우는 트리거, 애니메이션, 액션으로 구성된다.

프로토타입을 설계할 때 '~하면 ~하게 ~ 한다' 라는 문장으로 기억하기 ! (트리거, 애니메이션, 액션)

트리거의 종류

프로토타입의 플로우를 실행하는 조건, 어떤 이벤트가 발생하면 실행할 것인지를 설정한다.

피그마의 프로토타입 트리거 (10가지)

On click : 클릭 또는 탭/터치했을 때 액션을 실행해요.
On drag : 드래그했을 때 액션을 실행해요.
While hovering : 커서/마우스가 영역 위에 올라가 있는 동안 계속 액션을 실행해요.
While pressing : 커서/마우스로 영역을 누르고 있는 동안 계속 액션을 실행해요.
Key/Gamepad : 특정 키를 눌렀을 때 액션을 실행해요.
Mouse enter : 커서/마우스가 영역 위에 올라가면 액션을 실행해요.
Mouse leave : 커서/마우스가 영역을 벗어나면 액션을 실행해요.
Mouse down : 커서/마우스가 영역을 누르면 액션을 실행해요.
Mouse up : 커서/마우스가 영역을 눌렀다 떼면 액션을 실행해요.
After delay : 일정 시간이 지난 후에 액션을 실행해요.

피그마의 액션의 종류(11가지)

Navigate to : 페이지(프레임)를 이동하는 액션이에요.
Change to : 컴포넌트의 다른 배리언츠로 변경하는 액션이에요.
Back : 직전 화면으로 이동하는 액션이에요.
Set variable : 변수를 특정 값으로 설정하는 액션이에요. 유료기능
Set variable mode : 변수를 특정 모드로 설정하는 액션이에요.유료기능
Conditional : 분기점을 만들어서 조건에 따라 A 또는 B를 실행하는 액션이에요. 유료기능
Scroll to : 현재 프레임의 특정 지점까지 스크롤해서 이동하는 액션이에요.
Open link : 특정 URL을 여는 액션이에요.
Open overlay : 현재 프로토타입 화면에 다른 프레임을 위에 겹쳐서 보여주는 액션이에요.
Swap overlay : 라이트박스를 유지한 채 다른 프레임으로 교체하는 액션이에요.
Close overlay : 라이트박스을 닫는 액션이에요.

애니메이션

액션을 어떻게 실행할지, 화면 전환을 어떻게 처리할 지 정하는 것

피그마 애니메이션의 종류

instant : 애니메이션 없이 즉각 실행
dissolve : 천천히 흐릿해지면서 화면 전환 (페이드인/아웃)
smart animate : 이름이 같은 프레임들이 자연스럽게 움직이도록
move in/out : 현재 화면 위에 다음 화면을 덮거나 현재 화면이 벗겨지듯 전환
push : 현재화면을 지정한 방향으로 밀면서 등장
slide in/out : 현재화면을 지정한 방향으로 밀어 사라지게 하면서 등장

스마트 애니메이트

작동하는 요소의 이름이 같아야 하고,
프레임의 레이어 구조가 통일 되어 있지 않거나, 구조가 다르면 정상적으로 작동하지 않는다 !!

움직일 요소의 이름이 같은지

레이어 구조가 동일한지

조작할 수 있는 속성
1. 크기
2. 위치
3. 투명도
4. 회전
5. 배경색

디자인 핸드오프

디자인을 제대로 전달하기 위해 어떤 의도로 디자인했는지, 구체적인 규격이나 속성은 어떻게 해야 하는지를 작성해 개발자와 소통하는 문서

핸드오프 Hand - off

최대한 자세하게 작성해야 내가 의도한 디자인대로 실제 개발이 가능하다.

작성 시 지켜야 할 원칙
1. 통일된 구성
2. 최대한 자세하게
3. 쉬운 언어로

핸드오프의 구성

디자인의 전체적인 구조
각 프레임의 크기 및 길이
각 프레임의 여백 및 간격
사용된 폰트 및 컬러 스타일 등

휘

내일배움캠프 PM 6기

이전 포스트

토스 PO 세션 1~7편 용어 정리

다음 포스트