매 주차 강의자료 시작에 PDF파일을 올려두었어요!
수업 목표
•
UI 디자인 환경을 이해하고 적합한 디자인 원칙을 수립할 수 있다
•
피그마에서 스타일을 생성하고 관리할 수 있다
•
컴포넌트의 개념을 이해하고 기능 및 형태에 따라 분류할 수 있다
모든 토글을 열고 닫는 단축키
Windows : Ctrl + alt + t
Mac : ⌘ + ⌥ + t
01. 이번에 배울 것
피그마 기본 기능들을 익혔다면, 이제 조금 더 심화된 UI디자인과 컴포넌트 개념들을 익혀볼 거예요. UI 디자인의 환경을 이해해보고, 컬러와 폰트 같은 기초 단계부터 본격적인 UI 컴포넌트까지 하나씩 같이 만들어 봐요!
❖ UI디자인에서의 컬러와 폰트
UI디자인을 위한 주재료인 컬러와 폰트의 속성을 알아볼 거예요.
•
UI를 디자인할 때 가장 기초가 되는 재료인 컬러와 폰트를 알아야 디자인을 시작할 수 있어요.
•
특히 디지털 환경에서 컬러와 폰트의 특징을 같이 알아볼 거예요.
❖ 컴포넌트와 인스턴스
피그마 컴포넌트와 그 복사본인 인스턴스의 특징에 대해 같이 알아봐요.
•
피그마에서 만들 수 있는 컴포넌트와 그 복사본인 인스턴스의 특징에 대해 같이 알아봐요.
•
또한 스타일 가이드와 UI키트, 디자인 시스템에 대해서도 같이 알아봐요.
•
본격적으로 UI 디자인에 대해 알아보는 시간을 가져볼 거예요.
02. 파운데이션
UI를 디자인하기 전에 알아야 하는 기초 재료 중 가장 중요한 건 컬러와 폰트예요. 모든 UI의 기초인만큼 알아야 하는 배경 지식이 있어요. 같이 알아보도록 할까요?
파운데이션의 뜻
UI를 구성하는 가장 작은 알갱이이자 기초 재료인 파운데이션에 대해 먼저 개념을 정리해봐요.
•
우리가 피그마를 통해 만들고자 하는 건 UI예요.
•
UI는 버튼, 체크박스나 라디오, 탭 등 우리가 화면에서 볼 수 있는 모든 요소들을 뜻해요.
•
UI는 기초 재료인 파운데이션과, 이 파운데이션을 조합해 만드는 컴포넌트로 나눌 수 있어요.
•
즉, 버튼이라는 컴포넌트를 만들기 위해서는 파운데이션부터 만들어야 해요.
•
모든 컴포넌트들은 이 파운데이션 요소를 조합해서 만들 수 있어요.
파운데이션과 컴포넌트 개념은 디자인 시스템을 소개할 때 조금 더 구체적으로 알려드릴게요!
파운데이션의 구성
파운데이션은 쓰는 사람들마다 분류와 이름이 조금씩 다를 수 있어요.
•
색상(Color)
•
서체(Font, Typography)
•
간격, 여백(Spacing, Gap)
•
곡률(Radius)
•
그리드(Grid)
•
고도(Elevation) - 1주차에서 배운 높이 개념이에요!
•
아이콘(Icon)
이 강의에서는 파운데이션의 필수 구성 요소인 색상과 폰트를 피그마에서 등록해 사용하는 기본적인 방법을 알려드릴 거예요.
03. 컬러 스타일
디자인을 할 때 가장 먼저 정하게 되는 핵심 요소인 색상! 디지털 환경에서 색상이 구현되는 과정과 피그마에서 내가 쓸 색상을 지정하는 방법을 같이 알아볼까요?
UI디자인에서의 컬러
컬러가 디지털 환경에서 구현되는 개념과 원리를 한번 짚어드릴게요.
•
핸드폰에서 봤던 걸 컴퓨터로 보면 색깔이 조금 다르게 느껴졌던 경험 한번쯤 있으시지 않나요?
•
컴퓨터나 핸드폰에 문제가 있던 게 아니라, 원래 빛이란 게 그렇습니다. 자연스러운 현상이에요!
•
우리는 디지털 화면을 디자인하는 사람들이기 때문에, 이 디지털 화면의 원리를 이해하면 더 좋겠죠?
RGB와 Hex Code
컬러 프로파일(Color Profile)
컬러 스타일의 개념
컬러 스타일의 개념
컬러 스타일을 만드는 일반적인 방법
1:3:6 법칙
컬러 스타일 만들기
컬러 스타일 만들기
[자료] 컬러 스타일을 만들 때 도움되는 개념 및 방법론
04. 폰트 스타일
컬러와 함께 파운데이션의 양대 산맥인 폰트 스타일도 같이 만들어봅시다
폰트 스타일의 개념
폰트 스타일의 개념
폰트 스타일의 구성
폰트 스타일 만들기
폰트 스타일 만들기
[자료] 폰트 스타일을 만들 때 도움되는 개념 및 방법론
05. 마스터 컴포넌트와 인스턴스
피그마 디자인의 주요 기능인 마스터 컴포넌트와 인스턴스의 관계를 살펴볼까요?
컴포넌트의 개념
•
컴포넌트라는 표현, 많이 들어보셨을 거예요!
컴포넌트는 구성품이라는 뜻을 가지고 있어요.
•
UI디자인에서 컴포넌트는 파운데이션을 조합해 만들어지는 구성품을 이야기해요.
컴포넌트라는 표현은 디자인과 개발에서 모두 쓰이는 매우 넓은 개념의 표현이에요.
특히 피그마를 다루는 디자이너들에게 컴포넌트는 ‘피그마로 만든 UI 블록’과 같은 말로 쓰여요.
또한 UI디자인에서 컴포넌트는 파운데이션을 조합해 만든 디자인 단위의 개념이에요.
하지만 개발에서는 조금 다른 개념으로 쓰이는 등 맥락에 따라 개념이 조금씩 달라져요.
따라서 컴포넌트라는 표현을 쓰실 때는 서로 같은 걸 의미하는 지 확인해서 쓰셔야 해요!
마스터 컴포넌트(Master Component)
•
마스터 컴포넌트는 피그마에서 쓸 수 있는 컴포넌트 기능의 핵심이에요.
•
마스터 컴포넌트는 반복적인 디자인을 빠르게 하기 위해 디자인을 복사해서 사용할 수 있도록 해줘요.
•
복사된 디자인들을 한번에 수정하거나 편집할 수 있도록 해주는 중요한 기능이에요.
피그마에서 마스터 컴포넌트는 ❖ 아이콘이 붙어 있어요.
마스터 컴포넌트의 특징
인스턴스(Instance)
•
인스턴스는 마스터 컴포넌트의 복제본이에요.
•
즉, 마스터 컴포넌트를 복사하면 인스턴스가 생겨요. 따라서 컴포넌트의 속성을 그대로 이어 받아요.
인스턴스는 ◇ 아이콘이 붙어 있어요. 무언가의 복제본이라는 뜻이에요.
마스터 컴포넌트와 인스턴스의 관계
피그마에서 컴포넌트라고 하면 모든 디자인 요소를 뜻하지만,
이후로는 편의상 ‘마스터 컴포넌트’ 를 컴포넌트라고 부를게요.
컴포넌트를 수정하면 인스턴스에도 반영돼요.
인스턴스를 먼저 수정하면 컴포넌트를 수정해도 반영되지 않아요.
컴포넌트를 지우더라도 인스턴스는 남아 있어요.
연결을 해제하면 인스턴스는 컴포넌트와 분리되고, 일반 프레임으로 변경돼요.
06. 디자인 시스템의 이해
디자인 시스템의 개념을 이해하고 어떤 원리인지 같이 가볍게 둘러봐요!
디자인 시스템의 개념
디자인 시스템이 필요한 이유
디자인 시스템의 목적
UI키트가 디자인 시스템인가요?
디자인 시스템의 장단점
디자인 시스템은 결국 팀 전체의 속도와 효율을 위해서 만들지만
간혹 효율을 매우 떨어뜨리는 경우가 생길 수 있어요.
장점
단점
디자인 시스템의 구성 요소와 원리
디자인 시스템은 어떤 원리로 만들어지는 지 살펴볼까요?
강아지라는 단어는 어떤 구조로 되어 있을까요?
UI를 구성하고 있는 요소
아토믹 디자인 시스템(Atomic Design System)
참고하면 좋은 다른 회사의 디자인 시스템
07. UI 디자인 기본
UI를 설계하기 전에 몇가지 알아야 하는 개념들을 같이 살펴봐요.
UI의 분류
우리가 보는 UI들은 형태도 다양하고 종류도 많지만, 크게 보면 6가지 정도로 분류할 수 있어요.
액션(Action) : 사용자가 중요한 행동을 수행할 때 사용해요.
인풋(Input) : 사용자의 입력을 받을 때 사용해요.
인포메이션(Information) : 사용자에게 서비스의 상태나 안내 사항을 전달할 때 사용해요.
컨테이너(Container) : 컴포넌트 여러개가 결합되어 하나의 덩어리를 이루는 컴포넌트에요.
내비게이션(Navigation) : 사용자가 페이지를 이동할 때 사용해요.
컨트롤(Control) : 사용자가 설정이나 값을 수정할 때 사용해요.
분류는 임의적인 것이라서 더 잘게 분류할 수도 있고, 더 합쳐서 분류할 수도 있어요. 또한 관점에 따라 어떨 때는 컨트롤, 어떨 때는 인풋으로 분류해도 상관없는 UI들도 있어요. 중요한 건 UI의 이름이나 분류가 아니라, 이 UI가 어떤 상황에서 어떤 기능을 하는지를 잘 이해하는 거랍니다!
대표적인 UI들을 같이 설계해 보면서 피그마 기능에 조금 더 익숙해져 보기로 해요!
의사 상태(Pseudo State)
컴포넌트에게도 별명이 있다?
의사 상태의 개념
의사 상태 설계 시 주의해야 할 것
08. UI 만들기 실습(1)
UI는 꾸준한 반복으로 구조에 익숙해지는 것이 중요해요. 피그마 기능도 연습할 겸, 같이 실습을 통해 UI 컴포넌트를 만들어 봐요!
버튼 컴포넌트
대표적인 UI들을 같이 설계해 보면서 피그마 기능에 조금 더 익숙해져 보기로 해요!
1) 버튼 컴포넌트의 정의
2) 버튼 설계 시 유의할 점
3) 버튼의 구조
4) 버튼의 종류
5) 버튼 만들기
텍스트필드 컴포넌트
1) 텍스트필드 컴포넌트의 정의
2) 텍스트필드의 구조
3) 플레이스홀더와 밸리데이션
4) 텍스트필드 만들기
09. UI 만들기 실습(2)
UI는 꾸준한 반복으로 구조에 익숙해지는 것이 중요해요. 피그마 기능도 연습할 겸, 같이 실습을 통해 UI 컴포넌트를 만들어 봐요!
컨트롤 컴포넌트의 개념
사용자의 선택을 돕는 컨트롤 요소들을 알아볼까요?
1) 컨트롤 컴포넌트의 뜻
2) 컨트롤 컴포넌트의 종류
3) 컨트롤 요소 설계 시 참고할 점
체크박스 컴포넌트
여러 선택지 중 원하는 선택지를 여러개 선택할 수 있는 컴포넌트에요.
1) 체크박스 컴포넌트의 정의
2) 체크박스의 의사 상태
3) 체크박스의 특징
4) 체크박스 만들기
라디오 컴포넌트
여러 선택지 중 하나를 선택할 수 있는 컴포넌트에요.
1) 라디오 컴포넌트의 정의
2) 라디오의 의사 상태
3) 라디오의 특징
4) 라디오 만들기
10. UI 학습 시 도움되는 관점
UI는 종류도 많고, 형태도 매우 다양해요. 그런 UI들을 공부할 땐 어떤 관점으로 공부해야 하는지 팁을 준비했어요.
•
다음 버튼들을 한번 유심히 관찰해 주세요!
다 보셨다면 다음 질문들에 한번 답해 보세요!
컴포넌트의 모양이 아니라 기능이 중요한 이유
Copyright ⓒ TeamSparta All rights reserved.
