3. 비 디자인 환경 이해 및 비 요소 만들기
1. 파운데이션
1) 개념
• UI를 구성하는 가장 작은 알갱이이자 기초 재료
- 피그마를 통해 만들고자 하는 건 UI
- UI는 버튼, 체크박스, 라디오, 탭 등 화면에서 볼 수 있는 모든 요소
- 기초 재료(파운데이션) + 컴포넌트(파운데이션 조합)
- '버튼'이라는 '컴포넌트'를 만들기 위해 '파운데이션'부터 만들어야 한다.
- 모든 컴포넌트들은 파운데이션 요소를 조합해서 만들 수 있다.
- Design System
• Design Decision: 어떤 문제가 생기더라도 조합 방식을 판단할 수 있는 것, 디자인 의사결정을 배우는 것
- (X) 주입식 과정 - '이렇게 만든다'
- (O) 원칙과 원리 - 버튼은 어떤 구조로 만들어지고, 어떠한 파운데이션으로 이루어지고, 어떻게 조합해야 하는가
2) 구성
- UI를 만들기 위한 기초 재료
• 색상(Color)
• 서체(Font, Typhography)
• 간격, 여백(Spacing, Gap)
• 곡률(Radius)
• 그리드(Grid)
• 고도 - 높이(Elevation)
• 아이콘(Icon)
2. 컬러 스타일
1) 컬러
- 디자인을 할 때 가장 먼저 정하게 되는 핵심 요소 cf) 회사에서 지향하는 브랜드 이미지
- 색상을 고정되어 있지 않다.
(1) 디지털 환경 내 개념과 원리
• RGB와 Hex Code
- 디스플레이는 빛의 3원색으로 구현되는 화면이다.
| 빛의 3원색 = RGB (빨강, 초록, 파랑) | 가산혼합: 모일수록 밝아지며, 빛을 더해가며 다른 색을 만든다. | 256가지 |
| 색의 3원색 = CMY (마젠타, 옐로, 사이안) | 감산혼합: 모두 섞으면 까만색이고, 덜어내야 한다. |
- 이 각각의 숫자를 컴퓨터는 16진수(Hexadecimal)로 변환해서 읽는다.
- 우리가 흔히 아는 헥스코드(Hex Code)다.
• 컬러 프로파일(Color Profile)
- 개념: 디스플레이가 코드를 해석할 때 사용하는 색 기준표
- Hex Code는 빛의 3원색 정보를 16진법으로 변환한 코드다.
- 빛의 색상에는 절대적인 기준이 없다. 이에 디스플레이는 자기만의 기준으로 해석한다.
- 일종의 법, 규칙, 색상 지원 범위
- 디스플레이 자체 뿐만 아니라, 프로그램 자체에도 컬러 프로파일이 다르다.
• 캘리브레이션: 색상을 정교하게 튜닝하는 것
2) 개념
(1) 개념
• 컬러 스타일: 디자인에서 사용할 색상을 모아두는 팔레트
- 사용할 색상을 미리 정리해두고 그 안에서 사용한다.
- UI 디자인은 규칙이 매우 중요한 개념이다!
(2) 만드는 방법
• 포인트 컬러 + 백그라운드 컬러 + 세컨더리 컬러
- 기본적으로 2~3가지 색상으로 만든다.
- 일반적으로 포인트 컬러 하나만 놓고, 글자와 배경은 흑백 조합으로 사용하는 것을 추천한다.
| 포인트 컬러(액센트 컬러, 프라이머리 컬러) | 백그라운드 컬러 | 세컨더리 컬러(서브 컬러) |
| 중요하고 핵심적인 부분 | - 전체적인 분위기 - 일반적으로 흰색(#FFFFFF) |
- 배경색에서 도드라지는 부분을 만들어서 포인트 컬러 뒷받침 |
• 색상의 확장성
- 다양한 상황에 대응할 수 있도록 색상을 유연하게 만들어둬야 한다.
- 색상을 정했다면, 가장 밝은 단계부터 가장 어두운 단계까지 총 10단계로 만든다.
- 이후엔 글자 등에 기본으로 사용할 흰색과 검은색을 만들고, 회색 색상도 골라서 10단계를 만든다.
- Why? 10단위로 떨어지기에 추가, 빼기가 쉽다.
• 디자인: 무엇이 지금 상황에서 사용자에게 최선일까를 연구하고, 탐구하고, 생각하는 과정
(3) 1:3:6 법칙
- 가장 중요한 색상, 즉 포인트 컬러의 비율을 화면의 10% 정도만 쓴다.
- 전체적인 배경인 흰색이 60% 정도 차지하도록 한다.
- 포인트 컬러를 돋보이게 하기 위한 세컨더리 컬러로 나머지 30%를 쓴다.
3) 만들기
• Styler Plugins - Generate Styles
- 레이어의 배경색, 이름을 스타일로 저장해주는 플러그인이다. 스타일을 한 번에 지정하기 위해 사용한 것이다.
3. 폰트 스타일
1) 개념
• 폰트 스타일
- 디자인 시스템에서 사용할 폰트를 모아둔 목록
- 폰트 스케일, 스케일은 일정한 규칙에 따라 정렬된 하나의 세트를 뜻한다.
2) 종류
• 패밀리(Family): 폰트의 종류
• 굵기(Weight): 굵기, 무게감
- 단순히 굵은 게 아니라 이 글자가 얼마나 더 중요한지를 알려주기 위해 '무게감'이란 표현을 사용한다.
- 디자이너: Thin, Light, Regular / 개발자: 굵기에 할당된 숫자 (100, 200, 300 등)
• 크기 (Size)
- 일반적으로 16px부터 시작하고, 2px 씩 줄이거나 늘린다.
- 일반적으로 20px 미만인 폰트들은 본문에 사용하고, 20px 이상부터는 제목에 사용한다.
• 행간 (Line-height - 라인-하이트) = 서체의 공간
- 글자 줄 사이의 간격
- 글자의 크기와 그 사이 간격을 합친 값
- 절대적인 값은 없지만, 적당한 행간 값은 가독성에 큰 영향을 미친다.
- '서비스를 사용하는 사용자가 편하게 읽고 있는가'를 기준으로 조정하기
- 폰트는 폰트 자체가 가진 기본적인 여백이 있다. cf) 프리텐다드, 노토산스, 애플산돌고딕
- 제목(120~135%), 본문(135~170%, 150%)
- 모든 글자로 된 작업물들에 대해 유심히 파악하기 ex) 올리브영 패키지 디자인 등 - 폰트 가독성, 디자인 - 나의 작업물에 반영하기
- (공부) em, rem
• 자간 (Letter-spacing)
3) 만들기
4. 마스터 컴포넌트와 인스턴스
1) 개념
• 컴포넌트
- 피그마에서 쓸 수 있는 컴포넌트 기능의 핵심이다.
- UI: 파운데이션(재료) + 컴포넌트(재료의 조합-구성품)
(1) 마스터 컴포넌트
- 반복적인 디자인을 빠르게 하기 위해 디자인을 복사해서 사용할 수 있도록 한다.
- 복사된 디자인을 한 번에 수정하거나 편집할 수 있도록 해주는 중요한 기능이다.
• 특징
- 원본, 변하지 않는다.
- 복제하면 복제본인 '인스턴스'가 생긴다.
(2) 인스턴스
- 마스터 컴포넌트의 복제본이다.
- 마스터 컴포넌트의 속성을 그대로 이어 받는다.
2) 관계
- 컴포넌트를 수정하면 인스턴스에도 반영된다.
- 인스턴스를 먼저 수정하면 수정해도 반영되지 않는다.
- 컴포넌트를 지우더라도 인스턴스는 남아 있다.
- Detach(디태치; 분리하다): 연결을 해제하면 인스터는 컴포넌트와 분리되고, 일반 프레임으로 변경된다.
5. 디자인 시스템의 이해
1) 개념
• 필요한 이유
- 우리는 웹사이트나 앱을 디자인한다. 이 웹과 앱을 제품(프로덕트)라고 부른다.
- 프로덕트를 만드는 디자이너들은 사용자들이 겪는 문제를 찾아 디자인으로 개선한다.
- 효율성, 일관성: UI는 다른 디자이너도 똑같은 방법으로 만들고 쓸 수 있어야 하고, 개발자도 같은 생각을 해야 한다.
• 목적
- 반복적인 UI를 효율적으로 관리
- 팀 전체가 같은 정도로 이해
• UI 키트 VS 디자인 시스템
| UI 키트 | 디자인 시스템 |
| 단어 사용하는 규칙과 방법은 없고, 단순히 UI를 모아둔 것 |
문법 UI 구조, 쓰는 방법, 유의해야 하는 부분까지 상세하게 적혀 있는 문서 |
- 디자인시스템: UI 자체뿐만 아니라 UI의 규격과 스펙, 사용 사례, 주의사항 등이 총망라된 종합적인 제품 가이드라인 cf) 플랫폼 디자인
→ 조직의 성숙도, 제품 자체의 성숙도, 규모 등에 따라 단계 설정
2) 장단점
• 장점
- 시간 비용 절약
- 통일성 - 동일한 품질의 제품 설계 가능
• 단점
- 다양한 형태의 UI를 모아 하나로 통일하는 과정이 매우 오래 걸린다.
- 필요한 건 몇 개 없는데, 이에 비해 UI가 과하게 많아질 수 있다.
- 새로운 디자인이 필요할 때, 디자인 시스템을 활용하려다 보니 혁신이 준다.
3) 구성 요소와 원리
(1) UI를 구성하고 있는 요소
(2) 아토믹 디자인 시스템(Atomic Design system)
- 원자를 모아서, 분자를 만드는 구조
(3) 참고
- Google_머티리얼 디자인, LINE_라인 디자인 시스템, 밀리의서재, 라이트닝, 일리야 그레벤
- (구독) 서핏, 요즘IT, 브런치, 링크드인
6. UI 디자인 기본
1) UI의 분류
• 액션: 사용자가 중요한 행동을 수행할 때 사용한다.
• 인풋: 사용자의 입력을 받을 때 사용한다.
• 인포메이션: 사용자에게 서비스의 상태나 안내 사항을 전달할 때 사용한다.
• 컨테이너: 컴포넌트 여러개가 결합되어 하나의 덩어리를 이루는 컴포넌트다.
• 내비게이션: 사용자가 페이지를 이동할 때 사용한다.
• 컨트롤: 사용자가 설정이나 값을 수정할 때 사용한다.
- 명확한 분류보다 UI의 목적을 파악하는 게 중요하다.
2) 의사 상태(Pseudo State)
(1) 개념
- '의사'란 '가짜의', '가상의'라는 뜻이다.
- 컴포넌트의 가상의 상태를 표시할 때 사용한다.
- ex) 마우스를 올리면 색상이 변하는 것
(2) 주의
- 컴포넌트마다 쓸 수 있는 것과 쓸 수 없는 것이 있다.
7. [실습] UI 디자인 만들기 1
- 컴포넌트를 분석하고 공부할 땐 컴포넌트의 형태가 아니라 정의와 뜻에 집중해야 한다.
1) 버튼 컴포넌트
(1) 정의
- 액션
- 누름으로써 중요한 동작을 수행하는 요소
(2) 주의
- 행동 유도성(Affordance, 어포던스): 상호작용이 가능한 물체는, 상호작용이 가능하다는 시각적인 단서를 제공해야 한다.
- 즉, 버튼을 디자인 할 때 심미적인 완성도보다 버튼의 목적을 우선 생각해서 설계해야 한다.
(3) 구조
- 구조 파악이 첫번째다.
• 컨테이너: 안에 있는 요소를 감싸고 있는 프레임
• 라벨/레이블: 버튼의 행동을 안내하는 글자
- 텍스트: UI에서 사용자가 입력하는 글자
- 라벨: UI가 사용자에게 '이렇게 하세요'를 안내하는 글자
• 리딩 엘리먼트: 버튼 라벨보다 더 앞쪽에 있는 요소
• 트레일링 엘리먼트: 버튼 라벨보다 더 뒤쪽에 있다는 뜻
- LTR(Left to Right) VS RTL(Rifht to Left)
(4) 종류
• 박스 버튼, 일반 버튼
• 아웃라인 버튼, 고스트 버튼, 엠티 버튼
• 스플릿 버튼
• 텍스트 버튼 - 주요 액션, 보조 액션
2) 텍스트필드 컴포넌트
(1) 정의
- 인풋
- 사용자가 무언가를 입력할 수 있게 하는 컴포넌트
(2) 구조
• 인풋 컨테이너: 글자를 입력하는 부분
• 라벨/레이블
• 리딩 엘리먼트
• 트레일링 엘리먼트
• 헬퍼 텍스트
3) 플레이스홀더
(1) 정의
- 플레이스(자리) + 홀더(지키고 있는 것)
- 자리 표시자
(2) 주의
- 입력값의 조건을 적지 않는 것이 중요하다.
(3) 유효성 검사
- 사용자가 입력한 텍스트가 유효한지 아닌지 검사해주는 것
- '입력한 텍스트에 문제가 있으니 다시 확인해주세요'
- Why? 적절한 문구와 안내를 담당하는 중요한 부분으로, 방해가 발생했을 때 그걸 자연스럽게 피하거나 해결할 수 있도록 도와주는 것
- (주의) 부정적인 문구보다는 최대한 긍정적인 방향으로 사용자에게 안내하기
- ex) '사용자 이름 양식이 맞지 않습니다' VS '최소 4자 이상의 이름이 필요합니다'
4) 만들기
8. [실습] UI 디자인 만들기 2
1) 컨트롤 컴포넌트
(1) 정의
- 사용자가 선택지를 특정할 수 있도록 하는 요소
(2) 종류
(3) 요소 설계 시 참고
• 컨트롤 요소의 최소 터치 영역
- 다른 UI에 비하면 크기가 매우 작다.
- 컨트롤 요소 자체는 작더라도, 그 주변으로 최소 크기 범위를 만들어야 한다.
- 닐슨 노먼 그룹 - 실제 화면 크기 기준 최소 1cm * 1cm 정도
• 컨트롤 요소의 라벨
- 라벨을 누르더라도 컨트롤 요소가 작동하게 하는 것이 일반적이다.
- 간격을 충분히 줘서 잘못 누르는 일을 줄이기
• 컨트롤 요소와 라벨의 정렬
- 두 요소의 세로를 같게 해두면 좋다.
- 라벨의 세로는 행간과 같기에, 컨트롤의 사이즈를 행간에 사용한 값들로 만들어두면 정렬을 쉽게 할 수 있다.
2) 체크박스 컴포넌트
(1) 정의
- 여러 선택지 중 원하는 선택지를 여러 개 선택할 수 있는 컴포넌트
(2) 특징
• 여러 개 선택할 수 있다.
• 아무것도 선택하지 않을 수 있다.
• 하위 항목이 있을 때, 일부만 선택할 수 있다.
3) 라디오 컴포넌트
(1) 정의
- 여러 선택지 중 1개를 선택할 때 사용하는 컴포넌트
- 일반적으로 라벨과 함께 사용된다.
- 라디오 디자인은 디자인 시스템들마다 제각각이다.
-Why? 초기 형태의 라디오는 주파수를 돌리는 게 아니라, 주파수가 정해진 버튼을 누르는 방식이었다. 주파수 버튼을 누르면 이미 눌린 다른 주파수 버튼은 꺼진다.
(2) 라디오의 의사 상태
- 선택됨 VS 선택되지 않음
(3) 특징
- 여러개를 동시에 선택할 수 없다.
- 아무것도 선택하지 않는 게 불가능하다.
4) 만들기
9. UI 학습 시 도움되는 관점
• UI 기능주의적 관점
- 형태 < 기능
- UI는 종류도 많고, 형태도 다양하다. 우리는 버튼마다 모양도, 색상도 다른데 같은 버튼으로 인식한다.
- 버튼의 생김새가 아니라 버튼이 하는 일을 기준으로 생각한다.
숙제
'NBC' 카테고리의 다른 글
| [사전캠프] 피그마_피그마 심화 학습 (1) | 2026.03.12 |
|---|---|
| 3. [강의] 피그마 / TIL (0) | 2026.03.11 |
| 2. [강의] 피그마 / TIL (0) | 2026.03.10 |
| [사전캠프] 피그마_핵심 개념 ★ (0) | 2026.03.10 |
| [사전캠프] 피그마_UXUI 기초 개념 이해 (1) | 2026.03.10 |