TIL_11W3D_Mastering Figma Basics Step by Step(3~5)
체계적으로 배우는 피그마 기초 완전 정복(3)
02. 파운데이션
파운데이션의 뜻
UI를 구성하는 가장 작은 알갱이이자 기초 재료
우리가 피그마를 통해 만들고자 하는 건 UI
UI는 버튼, 체크박스나 라디오, 탭 등 우리가 화면에서 볼 수 있는 모든 요소들을 뜻함
UI는 기초 재료인 파운데이션과, 이 파운데이션을 조합해 만드는 컴포넌트로 나눌 수 있음
즉, 버튼이라는 컴포넌트를 만들기 위해서는 파운데이션부터 만들어야 함
모든 컴포넌트들은 이 파운데이션 요소를 조합해서 만들 수 있음
파운데이션의 구성
색상(Color)
서체(Font, Typography)
간격, 여백(Spacing, Gap)
곡률(Radius)
그리드(Grid)
고도(Elevation)
아이콘(Icon)
03. 컬러 스타일
RGB와 Hex Code
디스플레이는 빛의 3원색으로 구현되는 화면
즉, 빛의 농도와 명암을 조절해 여러가지 색으로 만듦
빛의 3원색은 빨강, 초록, 파랑이고, 모일수록 밝아짐
빛을 더해가며 다른 색을 만들기 때문에 가산혼합이라고 부름
그러면 색의 3원색은?
색의 3원색은 빨강(Magenta;마젠타), 노랑(Yellow;옐로), 파랑(Cyan;사이안)
색은 모두 섞으면 까만색이고, 덜어내야 하기 떄문에 감산혼합이라고 부름
빛의 3원색의 첫글자를 따서 쓰면 RGB가 됨
컴퓨터는 빨강, 초록, 파랑을 각각 256가지의 값으로 보여줄 수 있는데,
이 각각의 숫자를 컴퓨터는 16진수(Hexadecimal)로 변환해서 읽음
이 16진수 값이 우리가 흔히 아는 헥스코드라고 함
컬러 프로파일(Color Profile)
Hex Code는 빛의 3원색 정보를 16진법으로 변환한 코드
디스플레이가 코드를 해석할 때 사용하는 색 기준표를 컬러 프로파일(Color Profile)이라고 함
디스플레이 자체 뿐만 아니라, 프로그램 자체에도 컬러 프로파일이 조금씩 다름
컬러 스타일의 개념
컬러 스타일은 디자인에서 사용할 색상을 모아두는 팔레트
색상을 아무렇게나 사용하는 것이 아니라, 사용할 색상들을 미리 정리해두고 그 안에서 사용
사용할 색상을 모을 때, 색상의 단계를 만드는 규칙을 만듦
컬러 스타일을 만드는 일반적인 방법
컬러 스타일은 기본적으로 2~3가지 색상으로 만듦
일반적으로 포인트 컬러 하나만 놓고, 글자와 배경은 흑백 조합으로 사용하는 것을 추천
그래야 화면을 단순하게 유지하면서 중요한 부분에 색상을 넣어 주목시키기 쉬움
Q. 왜 10단계인가요?
📌 일반적으로 색상을 10단계로 만드는 이유는 다음과 같음
1. 색상의 밝고 어두움(명도), 연하고 진함(채도)을 기준으로
10단계를 만들기 때문에, 0%에서 100%를 10단위로 나눠 쓸 수 있음
2. 10 단위로 딱 떨어지기 때문에, 중간에 50단위의 색상을 더 추가하기 쉽고
색상 간의 차이도 10단위다 보니 알아보기도 쉬움
1:3:6 법칙
디자인하는 게 아직 낯설다면 1:3:6 법칙을 최대한 지키는 것이 좋음
가장 중요한 색상, 즉 포인트 컬러의 비율을 화면의 10% 정도만 씀
전체적인 배경인 흰색이 60% 정도 차지하도록 함
포인트 컬러를 돋보이게 하기 위한 세컨더리 컬러로 나머지 30%를 씀
04. 폰트 스타일
폰트 스타일의 개념
폰트 스타일도 컬러 스타일과 마찬가지로, 디자인 시스템에서 사용할 폰트를 모아둔 목록
다른 말로는 폰트 스케일이라고도 하는데, 스케일은 일정한 규칙에 따라 정렬된 하나의 세트를 뜻함
폰트 스타일의 구성
패밀리(Family)
말 그대로 폰트의 종류
폰트 이름이라고 생각하셔도 무방
굵기(=무게감, Weight)
일반적으로 굵기라는 뜻이지만, 더 정확하게는 ‘무게감’을 나타냄
단순히 굵은 게 아니라 이 글자가 얼마나 더 중요한지를 알려주기 때문에 ‘무게감’이라는 표현을 사용
디자이너는 Thin, Light, Regular 등 굵기 이름으로 이야기하는 걸 더 선호
개발자는 100, 200 등 굵기에 할당된 숫자로 이야기하는 걸 더 선호
크기(Size)
폰트의 크기를 뜻함
일반적으로 16px 부터 시작하고, 2px 씩 줄이거나 늘림
크기가 너무 작으면 읽기 힘들어 지기 때문에 10px 미만으로는 사용하지 않는 걸 권장
폰트 크기가 20px 이상일 때는 4px 씩 차이나게 하는 게 일반적
일반적으로 20px 미만인 폰트들은 본문에 사용하고, 20px 이상부터는 제목에 사용
왜 16px이 시작점인가요?
웹사이트의 기본 폰트 사이즈는 16px
앱이 나오기 이전부터 웹사이트의 기본 폰트 사이즈를 16px으로 사용했기 때문
자연스럽게 16px이 본문의 기본값이 됨
행간(Line-height)
기본적인 개념은 글줄과 글줄 사이의 간격
행간은 % 와 같은 상대적인 단위나, px처럼 고정 단위로 나타낼 수 있음
행간은 글자의 크기와 그 사이 간격을 합친 값
적당한 행간을 적용해야 하는 이유
절대적인 값은 없지만, 적당한 행간 값은 가독성에 큰 영향을 미침
행간이 너무 짧으면 다음 줄을 읽기 위해 시선을 이동할 때 다음 줄을 찾기 어려우며, 또 위아래에 붙은 줄들이 계속 시야에 같이 들어와 읽는 걸 방해
행간이 너무 넓으면 다음 줄을 읽기 위해 시선을 이동하면 다음 줄을 놓치며, 또 전체적인 문단이 벌어져 보여서 레이아웃을 해치기도 함
서체마다 행간을 확인해야 하는 이유
폰트는 폰트 자체가 가진 기본적인 여백이 있음
이 여백은 폰트를 처음 만들 때 생기기 때문에, 우리가 바꿀 수 없는 기본값
그 기본값은 폰트마다 모두 다름
일반적인 행간 값
서체마다 모두 다르긴 하지만 일반적으로 통용되는 값은 있음
제목처럼 굵고 큰 폰트는 120~135%, 본문의 경우 135~170% 사이로 하는 것이 좋음
본문의 경우 150%로 하는 게 제일 좋다고 알려져 있음
자간(Letter-spacing)
글자와 글자 사이의 간격
간과 마찬가지로 상대단위와 고정단위 모두 사용
05. 마스터 컴포넌트와 인스턴스
컴포넌트의 개념
컴포넌트는 구성품이라는 뜻을 가지고 있음
UI디자인에서 컴포넌트는 파운데이션을 조합해 만들어지는 구성품을 이야기함
마스터 컴포넌트(Master Component)
피그마에서 쓸 수 있는 컴포넌트 기능의 핵심
반복적인 디자인을 빠르게 하기 위해 디자인을 복사해서 사용할 수 있도록 해줌
복사된 디자인들을 한번에 수정하거나 편집할 수 있도록 해주는 중요한 기능
마스터 컴포넌트의 특징
마스터 컴포넌트는 원본이며, 따라서 변하지 않음
원본 그대로이기 때문에 수정이 필요하면 그냥 수정하면 되고, 지우고 싶다면 그냥 지우면 됨
마스터 컴포넌트를 복제하면 마스터 컴포넌트의 복제본, 인스턴스가 생김
인스턴스(Instance)
마스터 컴포넌트의 복제본
즉, 마스터 컴포넌트를 복사하면 인스턴스가 생기며, 따라서 컴포넌트의 속성을 그대로 이어 받음
마스터 컴포넌트와 인스턴스의 관계
마스터 컴포넌트를 수정하면 인스턴스에도 반영
인스턴스를 먼저 수정하면 컴포넌트를 수정해도 반영되지 않음
인스턴스를 수정하는 것이 컴포넌트 변경사항을 이어 받는 것보다 더 우선 적용됨
컴포넌트를 지우더라도 인스턴스는 남아 있음
다만 인스턴스를 편집하거나 수정하려면 컴포넌트를 복구해야 함
연결을 해제하면 인스턴스는 컴포넌트와 분리되고, 일반 프레임으로 변경됨
06. 디자인 시스템의 이해
디자인 시스템의 개념
디자인 시스템이 필요한 이유
우리는 웹사이트나 앱을 디자인을 합니다. 이 웹과 앱을 제품(프로덕트)이라고 부름
프로덕트를 만드는 디자이너들은 사용자들이 겪는 문제를 찾아 디자인으로 개선함
UI를 만들어 놓고 필요할 때 가져와서 사용하면 편하겠죠?
그런데 우리는 혼자 일하는 게 아니며, 다른 디자이너들도 있고, 또 개발자와도 일해야 함
즉, UI는 다른 디자이너도 똑같은 방법으로 만들고 쓸 수 있어야 하고, 개발자도 같은 생각을 해야 함
디자인 시스템의 목적
반복적인 UI를 효율적으로 관리
팀 전체가 같은 정도로 이해
요약하자면, UI키트와 디자인 시스템은 이런 차이가 있음
UI키트
사용하는 규칙과 방법은 없고, 단순히 UI를 모아둔 것에 지나지 않음
디자인 시스템
UI 구조, 쓰는 방법, 유의해야 하는 부분까지 상세하게 적혀 있는 문서
즉, 디자인 시스템은 ‘문서’의 형태를 갖추고 있어야 함
👉 정리하자면, 디자인 시스템은 UI 자체뿐만 아니라 UI의 규격과 스펙, 사용 사례, 주의 사항 등이 총망라된 종합적인 제품 가이드라인
디자인 시스템의 장단점
장점
1) 디자인을 반복해서 사용할 수 있어서 시간과 비용이 줄어듦
2) 누가 만들어도 동일한 품질의 제품을 설계할 수 있음
단점
1) 다양한 형태의 UI를 모아 하나로 통일하는 과정이 매우 오래 걸림
2) 필요한 건 몇개 없는데, 그에 비해 UI가 과하게 많아질 수 있음
3) 새로운 디자인이 필요할 때, 디자인 시스템을 활용하려다 보니 혁신이 줄어듦
디자인 시스템의 구성 요소와 원리
UI를 구성하고 있는 요소
버튼 하나를 뜯어보면 굉장히 다양한 요소들로 구성되어 있다는 걸 볼 수 있음
이 요소들은 그 자체로는 기능을 가지고 있지 않음
이 요소들을 모아서 버튼이라는 UI로 결합해야, ‘눌러서 작동시킨다’ 라는 기능이 생김
이 요소들은 기능을 가지고 있진 않지만, UI를 만드는 기초 재료들임
아토믹 디자인 시스템(Atomic Design System)
기초 재료들은 세상을 구성하는 가장 작은 알갱이인 원자에 비유할 수 있음
원자를 모아서, 분자를 만드는 게 아토믹 디자인 시스템의 핵심 개념
대부분의 디자인 시스템은 이 원리를 바탕으로 가장 작은 원자 요소들을 설계하고, 그 원자들을 모으고 결합하는 규칙을 만들어서 우리가 아는 버튼, 체크박스, 바텀시트, 모달 등을 만들어 냄
원자는 영어로 Atom이에요. 그래서 ‘원자를 결합하는 개념의 디자인 시스템’을
Atomic Design System으로 부름
07. UI 디자인 기본
액션(Action) : 사용자가 중요한 행동을 수행할 때 사용
버튼이 여기에 속함
인풋(Input) : 사용자의 입력을 받을 때 사용
텍스트를 입력할 수 있는 텍스트필드
미리 정해둔 옵션 중 하나를 선택할 수 있는 셀렉트박스 등이 여기에 포함
인포메이션(Information) : 사용자에게 서비스의 상태나 안내 사항을 전달할 때 사용
토스트 메시지나 스낵바, 라벨 등이 여기에 속함
컨테이너(Container) : 컴포넌트 여러개가 결합되어 하나의 덩어리를 이루는 컴포넌트
카드, 바텀시트, 리스트처럼 복잡한 구조인 경우가 많음
네비게이션(Navigation) : 사용자가 페이지를 이동할 때 사용
네비게이션 바, 앱 바, 화면 하단의 탭 바, 사이드바 등이 여기에 속함
컨트롤(Control) : 사용자가 설정이나 값을 수정할 때 사용
라디오, 체크박스, 스위치 등이 여기에 속함
의사 상태(Pseudo State)
의사 상태에서 의사란 가짜의, 가상의(pseudo: ‘수도’라고 읽어요)라는 뜻
컴포넌트의 가상의 상태를 표시할 때 사용
의사 상태 설계 시 주의해야 할 것
의사 상태의 종류는 버튼에 마우스를 올렸을 때, 버튼을 눌렀을 때, 텍스트를 입력하려고 눌렀을 때, 체크박스를 눌렀을 때, 누를 수 없을 때 등 다양한 경우가 있음
컴포넌트마다 쓸 수 있는 것과 없는 것이 있음
08. UI 만들기 실습(1)
버튼 컴포넌트
1) 버튼 컴포넌트의 정의
컴포넌트의 종류 중 액션에 해당하는 컴포넌트
버튼 컴포넌트는 누름으로써 중요한 동작을 수행하는 요소
2) 버튼 설계 시 유의할 점
우리가 직관적으로 아는 것들
행동 유도성(Affordance)
상호작용이 가능한 물체는, 상호작용이 가능하다는 시각적인 단서를 제공해야 한다는 뜻
즉, 버튼을 설계할 때는, 누를 수 있다는 시각적인 힌트를 충분히 드러내야 함
이걸 우리는 행동을 유도하는 속성이라고 해서 행동유도성, 즉 ‘어포던스’ 라고 부름
따라서 버튼을 디자인할 때 심미적인 완성도보다 버튼의 목적을 우선 생각해서 설계해야 함
3) 버튼의 구조
4) 버튼의 종류
1) 박스 버튼, 일반 버튼
박스처럼 생겨서 박스(Box) 버튼이라고 부름
색상이 안에 꽉 차있어서 솔리드(Solid, 단단한, 꽉 찬) 버튼이라고도 부를 수 있음
2) 아웃라인 버튼, 고스트 버튼, 엠티 버튼
테두리가 있고 속이 빈 듯한 형태의 버튼
테두리만 있어서 아웃라인(Outline) 버튼이라고 부르고, 유령처럼 속이 비어있어서 고스트(Ghost) 혹은 엠티(Empty) 버튼이라고도 부를 수 있음
3) 스플릿 버튼
주요 액션과 관련된 보조 액션을 제공해야 할 때 사용하는 버튼
주요 액션과 보조 액션이 나뉘어 있어서 스플릿(Split, 쪼개진) 버튼이라고 부름
4) 텍스트 버튼
배경색이나 테두리 없이 글자로만 이루어진 버튼
주요 액션에 비해 비중이 낮고, 별로 중요하지 않은 기능을 수행할 때 사용
텍스트필드 컴포넌트
1) 텍스트필드 컴포넌트의 정의
컴포넌트의 종류 중 인풋에 해당하는 컴포넌트
인풋은 사용자가 무언가를 입력할 수 있게 하는 컴포넌트를 말함
그 중 텍스트필드는 가장 대표적인 UI
2) 텍스트필드의 구조
3) 플레이스홀더와 밸리데이션
플레이스홀더
플레이스홀더는 플레이스(자리를) + 홀더(지키고 있는 것)로, 한국말로는 ‘자리표시자’라고 함
사용자가 입력해야 하는 예시를 제공하는 용도로 사용
사용자가 글자를 입력하기 시작하면 사라지고, 글자를 모두 지우면 다시 나타남
플레이스홀더를 쓸 때 유의할 것
플레이스홀더 자리에는 입력값의 조건을 적지 않는 것을 권장
플레이스홀더는 값을 입력하기 시작하면 사라짐
조건이 복잡하지 않은 경우에는 괜찮지만, 조건이 복잡하거나 어려운 경우에는 사용자가 입력 중에 조건을 까먹을 수도 있음
그렇게 되면 사용자는 쓰던 걸 지우고 다시 플레이스홀더를 봐야 하는 불편함이 생김
따라서 플레이스홀더에는 조건 대신 입력 예시를 넣어 주는 것이 좋음
텍스트필드에 입력해야 하는 값의 조건은 헬퍼 텍스트로 적어 줄 것
유효성 검사
텍스트필드에서 중요한 건 사용자가 입력한 텍스트가 유효한지 아닌지를 검사해주는 것
유효성 검사를 하는 이유
사용자는 앱을 사용하면서 달성해야 하는 목적이 있음
커머스라면 구매를 해야 하고, 커뮤니티라면 소통을 해야 하는 것 등을 이야기함
따라서 구매나 소통 과정을 방해하는 순간이 없는 것도 중요하지만, 방해가 발생했을 때 그걸 자연스럽게 피하거나 해결할 수 있도록 도와주는 것 역시 중요
유효성 검증은 그 적절한 문구와 안내를 담당하는 중요한 부분
유효성 검사 시 주의 사항
오류는 부정적인 인식을 주는 요소기 때문에, 오류가 발생하더라도 자연스럽게 차선책이나 해결책을 제안함으로써 오류에 대한 부담이나 거부를 최소화해야 함
부정적인 문구보다는 최대한 긍정적인 방향으로 사용자에게 안내
09. UI 만들기 실습(2)
컨트롤 컴포넌트
1) 컨트롤 컴포넌트의 뜻
사용자가 선택지를 특정할 수 있도록 하는 요소
여러 선택지 중 사용자가 원하는 것을 고를 수 있도록 돕는 요소라고 볼 수 있음
2) 컨트롤 컴포넌트의 종류
디자인 시스템마다 차이는 있겠지만, 대부분 아래의 4개 컨트롤은 포함되어 있음
3) 컨트롤 요소 설계 시 참고할 점
1) 컨트롤 요소의 최소 터치 영역
컨트롤 요소는 버튼 등 다른 UI에 비하면 크기가 매우 작음
사용자들이 작은 요소를 손가락으로 제대로 누르기에는 불편할 것임
따라서 컨트롤 요소 자체는 작더라도, 그 주변으로 최소 크기 범위를 만들어 줘야 함
2) 컨트롤 요소의 라벨
컨트롤 요소는 대부분 라벨과 같이 쓰임
이때, 라벨을 누르더라도 컨트롤 요소가 작동하게 하는 것이 일반적임
체크박스 컴포넌트
1) 체크박스 컴포넌트의 정의
체크박스는 여러 선택지 중 1개 이상을 선택할 때 사용하는 컨트롤 컴포넌트
일반적으로 라벨과 함께 같이 쓰임
2) 체크박스의 의사 상태
체크박스는 기본적으로 2가지 의사 상태를 가짐
3) 체크박스의 특징
체크박스는 여러개를 선택할 수 있음
체크박스는 아무것도 선택하지 않을 수 있음
하위 항목이 있을 때, 일부만 선택할 수도 있음
라디오 컴포넌트
1) 라디오 컴포넌트의 정의
라디오는 여러 선택지 중 1개를 선택할 때 사용하는 컨트롤 컴포넌트
일반적으로 라벨과 함께 같이 쓰임
2) 라디오의 의사 상태
체크박스와 마찬가지로, 라디오 역시 자세하게 설계한다면 더 많은 상태를 가질 수도 있음
3) 라디오의 특징
라디오는 여러개를 동시에 선택할 수 없음
라디오는 아무것도 선택하지 않는 게 불가능
라디오는 반드시 선택되어 있어야 함
체계적으로 배우는 피그마 기초 완전 정복(4)
02. 컴포넌트 프로퍼티의 이해
컴포넌트 프로퍼티
컴포넌트가 가상의 상태를 가질 때, 형태가 조금씩 변화할 수 있음
또한 컴포넌트 안의 요소가 바뀌는 경우들도 있음
컴포넌트 프로퍼티는 이런 변화와 변경을 만들 수 있는 피그마 컴포넌트 기능
배리언츠(Variants)
컴포넌트가 가질 수 있는 또 다른 모습을 만들 수 있게 하는 컴포넌트 기능
즉, 컴포넌트의 가상의 상태를 만들 때 사용
프로퍼티(Property)
'속성’이라는 뜻
디자인 구조가 바뀌지 않는 선에서 변경할 수 있는 요소들을 다룰 때 사용
컴포넌트 프로퍼티 알아보기
1) 👁️ Boolean
Boolean(불리언)은 Y or N을 선택하는 형식이라는 뜻
참 또는 거짓, 예 또는 아니오, 켜기 또는 끄기 모두 가능
컴포넌트 안에 있는 특정 요소를 보이게 하거나 안 보이게 할 수 있는 속성
즉, 레이어를 껐다가 켰다가 할 수 있는 속성값
2) ◇ Instance swap
인스턴스 스왑 기능은 인스턴스를 다른 인스턴스로 교체하는 기능
따라서 인스턴스를 인스턴스가 아닌 것으로 바꿀 수는 없음
주로 버튼 안의 아이콘, 팝업 안의 버튼 등을 교체할 때 사용
3) 𝐓 Text
컴포넌트 안에 있는 텍스트를 수정하기 쉽도록 컴포넌트 속성으로 만들어 줌
패널에서 버튼의 텍스트를 편집할 수 있음
Q. 배리언츠와 프로퍼티를 고르는 기준이 궁금해요
배리언츠와 프로퍼티 모두 디자인에 변화가 생긴다는 건 동일
컴포넌트에 적용된 파운데이션이 변경되는지를 기준으로 해야 함
07. 합성 컴포넌트와 네스티드 인스턴스
합성 컴포넌트의 개념
파운데이션이 아니라 컴포넌트를 모아 또 컴포넌트를 만드는 경우가 있음
원칙적으로는 파운데이션 요소를 모아 컴포넌트를 만들고, 컴포넌트를 모아 더 큰 단위를 만들어야 해야 함
하지만 컴포넌트끼리 결합해도 여전히 컴포넌트이거나, 컴포넌트와 파운데이션을 결합한 컴포넌트인 경우가 있음
이런 컴포넌트들을 합성 컴포넌트(Compound Component)라고 함
합성 컴포넌트에는 바텀시트, 다이얼로그, 리스트, 카드, 탭 등 복잡한 구조의 컴포넌트들이 있음
네스티드 인스턴스
재료로 쓰인 컴포넌트를 하위 컴포넌트, 본체를 상위 컴포넌트라고 봤을 때, 상위 컴포넌트에서도 하위 컴포넌트의 속성을 조작할 수 있도록 하는 기능
이런 네스티드 인스턴스를 가진 컴포넌트들이 대부분 합성 컴포넌트예요. 컴포넌트 내부에 다른 컴포넌트들이 들어가 있다는 뜻
Nested는 ‘감싼’ 이라는 뜻이며, nest가 ‘둥지’라는 뜻인데, 둥지 안에 있듯이 다른 컴포넌트 안에 들어가 있다는 뜻으로 생각하면 됨
탭 컴포넌트
1) 탭 컴포넌트의 정의
컴포넌트의 종류 중 네비게이션에 해당하는 컴포넌트
탭 컴포넌트는 현재 화면을 전환해주는 요소
2) 탭의 구조
탭은 개별 아이템인 탭 메뉴와 메뉴를 모아 만드는 탭으로 구성할 수 있음
3) 탭 디자인의 다양함
탭은 서비스마다 모두 다양한 디자인을 사용하고 있음
사용자에게 선택된 것과 선택되지 않은 것을 구분할 수 있게 해준다면 어떤 디자인이더라도 괜찮음
체계적으로 배우는 피그마 기초 완전 정복(5)
02. 화면 디자인 실습 - 홈 화면 만들기
앱 바 컴포넌트
1) 앱 바 컴포넌트의 정의
컴포넌트의 종류 중 네비게이션에 해당하는 컴포넌트
앱 화면 상단에 고정되어 현재 화면의 이름을 알려주면서, 이전 화면으로 돌아갈 수 있도록 해 줌
현재 화면에서 할 수 있는 보조 기능을 제공하는 경우
머티리얼 디자인에선 앱 바(App Bar)라고 부르지만, iOS에서는 네비게이션 바(Navigation Bar)라고도 부르고, 디자인 시스템마다 부르는 이름이 모두 다름
2) 앱 바 컴포넌트의 구조
03. 화면 디자인 실습 - 목록 화면 만들기
리스트 컴포넌트
1) 리스트 컴포넌트의 정의
컴포넌트의 종류 중 컨테이너에 해당하는 컴포넌트
동일한 형태의 정보 덩어리를 반복적인 패턴으로 보여줄 때 사용
2) 리스트 컴포넌트의 구조
06. 프로토타입과 프로토타이핑
프로토타입 소개
프로토타입(Proto-type)의 뜻
원래 뜻은 시제품
디지털 제품에선 실제 제품을 만들지 않고 아이디어를 테스트해볼 수 있는 것을 뜻함
구현하는 정도에 따라 낮은 단계와 높은 단계로 나눌 수 있음
Lo-fi(Low-fidelity)
낮은 단계의 프로토타입으로, 전체적인 흐름을 빠르게 맞춰볼 수 있는 수준
와이어프레임도 낮은 단계의 프로토타입이라고 볼 수 있음
Hi-fi(High-fidelity)
높은 단계의 프로토타입으로, 실제 제품과 거의 같거나 유사한 수준
프로토타입을 만들거나 프로토타입을 사용해 테스트하는 것을 프로토타이핑(Prototyp-ing)이라고 함
프로토타입은 왜 만드는 걸까?
실제 제품을 만들지 않고 아이디어를 검증해 볼 수 있음
팀 구성원들과 시각적인 결과물로 소통할 수 있음
부족하거나 놓친 부분을 확인할 수 있음
피그마의 프로토타입 기능
프로토타입은 피그마 고유의 기능이 아님
프로토타이핑이 가능한 디자인 툴로는 프로토파이, 프레이머 등 다양한 도구가 있음
우리가 사용하는 피그마 역시 프로토타입을 만들 수 있는 여러 툴 중 하나라는 점
피그마 프로토타입의 장단점
장점
직관적임
빠르게 만들 수 있음
단점
실제 제품처럼 동작하는 걸 만들기 어려움
효율성을 떨어트림
07. 스크롤 컨테이너와 오버플로우
오버플로우(Overflow)
우리가 디자인을 하다보면 프레임 밖으로 컨텐츠가 넘어가는 경우가 있음
프레임 밖으로 컨텐츠가 넘어가는 것을 오버플로우(Overflow)라고 부름
프레임에 오버플로우가 발생하면, 프레임 밖으로 넘어간 콘텐츠를 스크롤로 보여줄 수 있음
즉, 스크롤이 되게 하려면 프레임보다 콘텐츠가 더 길어서 넘쳐야 함
다시 말하면, 오버플로우가 되지 않으면 스크롤이 생기지 않음
스크롤 컨테이너
오버플로우가 생긴 프레임을 스크롤로 만들어주는 기본적인 프로토타입 기능
스크롤을 만드려면 실제로 스크롤되어야 하는 콘텐츠와 스크롤 속성을 적용할 컨테이너가 있어야 함
스크롤 방식(Scroll Behavior)
08. 화면 디자인 연결하기
트리거와 액션
1) 플로우의 구성 요소
프로토타입의 흐름 하나하나는 플로우임
핫스팟을 드래그해 종착점과 이으면 커넥션이 만들어지고, 자동으로 플로우 패널이 열림
플로우는 트리거와 애니메이션, 액션으로 구성
2) 트리거의 종류
트리거는 프로토타입의 플로우를 실행하는 조건
어떤 이벤트(사건)가 발생하면 실행할 건지를 설정
피그마 프로토타입 트리거는 현재 10가지가 있음
On click : 클릭 또는 탭/터치했을 때 액션을 실행
On drag : 드래그했을 때 액션을 실행
While hovering : 커서/마우스가 영역 위에 올라가 있는 동안 계속 액션을 실행
Mouse enter와 Mouse leave를 계속 반복하는 것과 같은 효과While pressing : 커서/마우스로 영역을 누르고 있는 동안 계속 액션을 실행
Mouse down와 Mouse up를 계속 반복하는 것과 같은 효과Key/Gamepad : 특정 키를 눌렀을 때 액션을 실행
Mouse enter : 커서/마우스가 영역 위에 올라가면 액션을 실행
Mouse leave : 커서/마우스가 영역을 벗어나면 액션을 실행
Mouse down : 커서/마우스가 영역을 누르면 액션을 실행
Mouse up : 커서/마우스가 영역을 눌렀다 떼면 액션을 실행
After delay : 일정 시간이 지난 후에 액션을 실행
3) 액션의 종류
액션은 프로토타입의 플로우의 목적지이자 트리거로 인해 만들어지는 결과
어떤 이벤트가 발생하면 어떻게 되는지를 설정
피그마 프로토타입 액션은 현재 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 : 현재 화면을 지정한 방향으로 밀어 사라지게 하면서 등장
스마트 애니메이트
스마트 애니메이트가 제대로 작동하려면 반드시 작동하는 요소의 이름이 같아야 함
또한 프레임의 레이어 구조가 통일되어 있지 않거나, 구조가 다르면 정상적으로 작동하지 않음
만약 제대로 움직이지 않는다면 반드시 이 2가지를 확인
1. 움직일 요소의 이름이 같은지
2. 레이어 구조가 동일한지
피그마 프로토타입에서 가장 중요한 애니메이션 기능
이름이 같은 요소가 있다면, 화면을 이동할 때 그 요소의 변화를 자연스럽게 만들어 주는 기능
스마트 애니메이트의 원리를 응용하면 다양한 UI 인터랙션을 구현할 수 있음
스마트 애니메이트로 조작할 수 있는 속성
크기(Scale)
크기를 다르게 하면 커지게 하거나 작아지게 할 수 있음
위치(Position)
위치를 다르게 하면 요소를 자연스럽게 이동시킬 수 있음
투명도(Opacity)
레이어나 색상의 투명도를 다르게 하면 자연스럽게 사라지거나 나타나게 할 수 있음
회전(Rotation)
요소를 자연스럽게 회전하게 만들 수 있음
배경색(Fill)
요소의 배경색을 칠하거나 다른 색으로 자연스럽게 변경할 수 있음
09. 디자인 핸드오프
핸드오프(Hand-off)
핸드오프는 ‘손을 떠나다' 라는 뜻으로, 개발자에게 전달하기 위해 디자인 사양을 정리한 문서
핸드오프를 자세하게 작성해야 내가 의도한 디자인대로 실제 개발이 가능
핸드오프 작성 시 지켜야 할 원칙
통일된 구성
최대한 자세하게
쉬운 언어로
핸드오프의 구성
1. 디자인의 전체적인 구조
2. 각 프레임의 크기 및 길이
3. 각 프레임의 여백 및 간격
4. 사용된 폰트 및 컬러 스타일 등
쉬어가기
디자인베이스 - 디자인 용어사전 UI
Ait 속성
또는 대체 텍스트(Alternative Text)는 HTML에서 이미지 태그(<img>)에 사용되는 속성으로, 이미지의 의미와 내용을 설명하는 텍스트를 제공하는 역할을 함
이 속성은 이미지가 로드되지 않거나 접근성 도구(스크린 리더 등)를 사용하는 사용자들에게 중요한 정보를 전달하기 위해 사용됨
웹 접근성 측면에서 Alt 속성은 필수 요소 중 하나로 간주
Ait 속성의 중요성
01 웹 접근성 향상
Alt 속성은 시각 장애인이나 저시력자들이 스크린 리더를 통해 웹 콘텐츠를 탐색할 수 있도록 도움
이미지를 설명하는 대체 텍스트는 이미지의 내용을 전달해, 시각적 정보에 접근할 수 없는 사용자들도 웹 페이지의 주요 정보를 이해할 수 있게 함
02 SEO 최적화
검색 엔진 크롤러는 이미지 내용을 직접 분석할 수 없기 때문에, Alt 속성에 작성된 텍스트를 바탕으로 이미지 내용을 파악
따라서, Alt 속성에 이미지에 대한 명확한 설명을 제공 시 검색 엔진에서 이미기 가치를 인식 및 검색 랭킹을 개선할 수 있음
03 웹 사용성 향상
네트워크 문제로 인해 이미지가 로드되지 않을 때, Alt 속성에 정의된 텍스트가 사용자에게 표시
이를 통해 사용자는 이미지가 없는 상황에도 웹 콘텐츠 내용을 이해할 수 있음
Ait 속성 사용 시 주의사항
명확하고 구체적인 설명
데코레이션용 이미지: 순수하게 장식용으로 사용되는 이미지에 빈 Alt 속성(alt = "")을 사용할 수 있으며, 이는 스크린 리더가 해당 이미지를 무시하도록 해 사용자 경험을 개선하는 데 도움
키워드 스더핑 피하기
App bar
안드로이드 앱의 사용자 인터페이스에서 화면 상단에 위치한 중요한 요소로, 앱 이름, 네비게이션, 주요 액션을 표시하는 역할을 함
사용자에게 현재 화면의 정보를 제공하고, 앱 내에서 쉽게 이동하거나 작업을 수행할 수 있도록 돕는 기능을 함
앱의 제목과 네비게이션 아이콘, 중요한 액션 버튼을 포함한 앱 바는 앱 디자인의 핵심적인 UI 구성 요소
App bar의 주요 기능
1. 앱 제목 및 네비게이션
2. 액션 아이템 제공
3. 메뉴 버튼 및 더보기 메뉴
App bar의 사용 예시
App bar 사용 시 주의사항
01 일관된 디자인 유지
02 액션 아이템의 적절한 배치
03 간결하고 직관적인 UI
App bar 디자인 및 행동 맞춤화
App bar의 디자인과 동작은 앱의 전반적인 테마와 일치해야 하며, 다음은 App bar를 효과적으로 커스터마이징하는 몇 가지의 팁임
색상과 폰트 스타일
애니메이션 효과
반응형 레이아웃
