Chapter 4. 머터리얼 디자인 아이콘 키라인 제작 실습
UX/UI 디자인에서 아이콘을 직접 만들어야하는 과정이 필요한데, 그럴려면 아이콘 키 라인(비율 가이드)을 제작해야 일관된 비율을 가진 아이콘을 만들 수 있게 된다.
구글 머터리얼 디자인에서 제공하는 아이콘 가이드를 그대로 활용한다. 항상 규칙이 있는 상태에서 아이콘을 제작해야한다.
1. 아이콘 DP 비율/영역
가로세로 24DP가 되겠끔 권장하고 있다.
내가 만드는 아이콘은 특정 영역 안에 있어야 하고, 반드시 특정 공간은 비어있어야 한다.
균일한 크기의 아이콘 제작이 필요하다.
2. 그리드 레이아웃
3. 사각형 생성
4. Stroke 변경
5. 도형 빈 컬러 만들기
6. 라디우스 변경
7. 직사각형 만들기
8. 직사각형 복제, shift 로테이트
==> 이렇게해서 아이콘 가이드라인 완성!!
9. 4배수 라인 만들기
모바일 중심 디자인할때,
4의배수나 8의배수를 잘 지키면 좋다.
10. 가로세로 만들기
11. 대각선
12. 대각선2
13. 그룹핑
14. 아이콘 불러오기
홈 -> 커뮤니티 -> 아이콘 -> 머터리얼 디자인 다운 -> 작업화면 -> 리소스 -> 실행 -> 카트 아이콘 불러오기
15. 카트 아이콘 그려보기
1) 사각형 + 사선만들기
픽셀 단위라서 사선 각도만들기 어렵기때문에 메인메뉴 -> 프리퍼런스 -> Snap to pixel grid 해제해 줘야지 커서가 움직이는 만큼으로 자유롭게 그릴 수 있다.
2) 코너정리
3) 몸통 완성
16. 카트 다리 그리기
1) 카트 다리
2) 카트 미세한 각도 맞추기
3) 각도 소수점
Chapter 5. 컴포넌트 & 오토 레이아웃 실습
* 컴포넌트 실습 (심화) : 컴포넌트의 필요성
component : 반복적으로 사용되는 UI 규격을 규정하는 것
디자인은 수정의 연속이다.
효율적인 디자인 수정을 위한 방법을 알아보자.
1. 컴포넌트 애셋 등록
먼저 인터페이스들을 만들어 놓고 컴포넌트를 다 등록해 주면 된다. 등록된 컴포넌트들 에셋 패널에 다 등록되어 있다.
2. 원본 파일 가는 법
빨간색 -> 검정색으로 변경 원할 시,
원본파일로 찾아가 검정색으로 바꾸면
모든 컴포넌트가 다 검정색으로 바뀐다.
유지보수에 굿
3. 컴포넌트 등록
1) 컴포넌트 등록 위치/단축키
2) 컴포넌트 설정된 보라색 상태
3) 인스턴스
컴포넌트는 부모, 인스턴스는 자식관계다.
컴포넌트의 변화는 반드시 인스턴스 영향을 준다.
4) 인스턴스 오버라이드
인스턴스도 변화가 가능하다. 단, 인스턴스에서 수정된 영역에 한해서 오버라이드(해제)가 적용된다.
5) 인스턴스 리셋
6) 컴포넌트 영향받지 않게 하기
7) 컴포넌트를 일반 프레임으로 변경하기
컴포넌트 자체를 일반 프레임으로 바꿀 수 없다. 컴포넌트를 복제해서 인스턴스 하나 만들고, 인스턴스를 detach 해서 일반 프레임으로 만드는 방법이 있다.
4. 오토 레이아웃
1) 장점
- 글씨 갯수와 크기에 따라 레이아웃이 같이 비율에 맞게 변화한다.
- 배열을 바꾸는 것도 쉽다.
- 간격바꾸는 것도 쉽다.
오토레이아웃 = 자동으로 레이아웃 변화를 도와주는 기능
특히 카드 디자인에서 적극적으로 사용이 가능하다.
2) 3가지 속성 담긴 버튼
아이콘 + 이모티콘 + 텍스트 속성 담긴 버튼
(1) 아이콘
머테리얼 아이콘 가져와도 된다
(2) 텍스트
20point 행간 auto 자간 0% 서체 Noto sans c.kr 굵기 볼드
(3) 이모티콘
"아이콘 + 텍스트 + 텍스트"로 처음에 배열한다. 이유는 텍스트를 이모티콘으로 변환시킬 것이기 때문이다.
맥: ctrl + command + space bar
윈도 : 윈도우 키 + 마침표
그러면 아이콘 + 이모티콘 + 텍스트
3) 레이아웃 등록하기
4) 레이아웃 세부 기능
advanced layout setting
(1) spacing mode
: 간격을 고정시키는 packed 설정 가능
: soace between으로 하면, 외곽의 크기에 맞춰 크기가 자동으로 늘어났다 줄어들었다 세팅 가능하다.
(2) stockes
바깥쪽 / 안쪽으로 처리될 건지 선택할 수 있다.
(3) canvas stacking
왼쪽이 튀어나올 건지 오른쪽이 튀어나올 건지 정할 수 있다.
5. 베리에이션
1) 간격 변경
2) 좌우 패딩 변경
3) 상하 패딩 변경
4) 컬러 채우기
5) 코너 라디어스
6) 글자색 변경
7) 기준 버튼 복제
컴포넌트 제작 후 네이밍을 꼭 넣어야한다.
모든 회사나 팀들은 레이어 네이밍하는 규칙이나 약속이 있다.
이게 무엇인지
특징이 무엇인지
botton large => BTN-L
Large, medium, small size 별로 버튼 제작 가설을 세움
8) 아이콘, 글씨 크기 변경
9) 간격 변경
10) 미듐, 스몰 사이즈
11) 버튼 이름 바꾸기
12) 3개 버튼 한꺼번에 컴포넌트 등록
13) 베리에이션
Chapter 6. 배리언트 실습
배리언트는 오토레이아웃과 컴포넌트를 이용한 3가지 사이즈의 버튼이 완성되어야지만 실습을 진행할 수 있다.
24가지로 변형(베리에이션)이 가능한 버튼들이다.
피그마의 배리언트라는 기능을 활용하면, 쉽게 관리가 가능하고 하나의 컴포넌트로 통합이 가능하다. 그리고 그로인한 결과물들은 사이즈 별로 쉽게 쉽게 변환이 가능하다. 그리고 속성 버젼별로도 쉽게 쉽게 바꿀 수 있다. 활성화/비활성화 관리도 가능하다.
1. 컴포넌트 L/M/S 복제
2. 각 속성 삭제해서 24가지 버전 만들기
3. 컴포넌트와 인스턴스 상태
4. 인스턴스를 일반 프레임으로
5. 일반 프레임에서 컴포넌트
6. 컴바인 베리언트
모두 마스터 컴포넌트인 상태에서만
배리언트를 바꿀 수 있기 때문에 12개 모두 마스터 컴포넌트로 변경함.
7. 베리언트 한 상태
베리에이션 버튼에 정의를 내릴 수 있다.
우선, 라이즈, 미듐, 스몰 사이즈 정의가 내려있다.
첫번째 properties는 "size"라고 정하며
사이즈별로 3가지 그룹을 나눌 수 있다.
8. 배리언트 추가
9. Defult 값 변경
10. 완성하기
11. 비활성화 하기
1) 복제
2) 컬러 바꾸기
3) 오류창
4) 프로퍼티 추가
5) 액티브
6) 액티브 확인
Chapter 7. 피그마 프로토타이핑 알아보기
디자인이 끝난 상태에서 각각의 화면들을 연결시켜주는 프로토타이핑 기능을 등록해 볼 것이다.
제품을 대량생산하기 전에 시범생산 해보면서 공정 과정에서 일어날 수 있는 문제점들이나 체크해야 될 것들을 미리 점검해보는 과정을 미리 점검해보는 과정을 프로토타이핑이라 부르고 그 결과물을 프로토타입 모델이라고 한다.
개발 하기 전 일어날 수 있는 오류와 개선시켜야 될 점들을 미리 확인하는 과정으로 활용하고 있다.
최대한 비슷하게 애니메이션 연주 후 테스트, 설문조사 후 불편한 점 개선할 수 있는 점 미리 파악 -> 다 개선 후 개발을 시행.
디자이너 개발자 소통하기 위한 애니메이션 연출
1. 프로토타입 만들기
2. Flow 위치 변경
flow 1번은 화면 가장 처음 시작되는 화면 설정이다.
화면, 인터렉션 끊어지면 flow2,3,4 생성된다. flow 1번 위치는 드래그해서 원하는 형태로 옮길 수 있다.
인터렉션 과정을 통해 원하는 애니메이션 연출을 할 수 있다.
인터렉션의 의미는 어떤 버튼을 사용자가 누르면 그로인해서 나타나는 작은 효과, 상화작용 현상을 의미한다.
3. 인터렉션
1) 인터렉션 연결
2) 인터렉션 팝업창
4. 사용자 행동 지정
(1) tap on
: 마우스 커서가 있을 때 온 클릭과 같은 개념
: 무언가 눌렀다가 떼는 행위
(2) on drag
: 마우스/손가락으로 잡고 끄는 행위
: 스와이프
(3) while hovering
: 마우스 커서를 갖다 대는 행위
(4) while pressing
: 마우스 커서를 갖다 대고 쭉 누르는 행위
(5) key/gamepad
: 특정 키를 누르거나 게임 패드를 연결시키면 어떤 인터렉션이 나타난다는 가정도 할 수 있다.
(6) mouse enter
: 마우스가 안으로 들어오거나
(7) mouse leave
: 마우스가 떠났을때,
(8) Touch down
: 터치를 아래쪽으로 하거나
(9) Touch up
: 터치를 위쪽으로 했을 때
(10) after delay
: 사용자가 어떤 행동을 하지 않아도, 특정한 시간이 지나면 인터렉션이 실행되는 것들도 지정이 가능하다.
(11) presserve scroll position
5. 오버레이 그 외 처리
6. 오버레이 팝업창 오픈 방법
(1) nevigate to
: 가장 기본적인 움직임으로, 1번화면에서 2번 화면으로 이동한다는 에니메이션 연출
(2) change to
(3) open overlay
: 오픈되는, 열리는 것들을 말한다. 주로 네이게이션들과 팝업창들이 이에 해당된다. open overlay 하게 되면 추가값이 생긴다.
팝업창 생김새에 따라서
가운데 열리게 할 건지, 왼쪽에서 열리게 할 건지, 밑에서 열리게 할 건지 등등 선택할 수 있다.
=> open overlay 두 칸 아래 비슷한 이름의 close overlay 가 있는데, open overlay 걸어둔 팝업창에, close overlay 버튼이 있으면, open과 받대되는 옵션이 적용되어 서로 열고 닫는 옵션이 완성되게 된다.
(4) swap overlay
: 서로 연결되면서 바뀌는 동작
: 어떤 버튼에 마우스 커서를 갖다 대면 불이 들어온다거나하는 연결되는 동작을 할때,
: 화면에 가려져 있는 슬라이드 처리된 디자인을 드래그하면 옆으로 주르르 펼쳐질 때,
(5) close overlay
(6) back
: Back은 뒤로가기 동작을 연출하고 싶을 때, Back을 선택하면 된다.
(7) scroll to
: 유일하게 특정 프레임으로 넘어가는 게 아니라 이 프레임의 특정 좌푯값으로 이동하고 싶을 때 scroll to를 사용하면 된다. 다른 화면으로 넘어가지않고 내가 디자인 해놓은 프레임 안에서 특정 위치로 바로 이동시키고자 할 때 주로 우리가 지도 서비스에서 현재 위치 검색하기 기능이나 아주 긴 페이지에서 가장 밑으로 내려왔을 때 탑 버튼 누르면 가장 위로 올라가는 기능 등
(8) open link
링크를 여는 동작
7. 플로팅 액션 버튼
(1) 회색 정렬 포개기
(2) 빨간색 위치 통일
(3) 빨간 버튼 맨 위로
(4) 투명도 0%
(5) 애니메이션 on tap
(6) 애니메이션 연결
(7) 세부적인 애니메이션
(1) instant
: 순간이동
: 뿅!하고 즉시 이동되는 개념
(2) dissolve
: 서서히 움직임
(3) smart animate
: 1번 -> 2번 연결되면서 움직임
(4) move in
: A 요소는 가만히 있고 B요소가 등장해서 엎이는 것
(5) move out
: 뒤에있는 요소 가만히 있고 바깥에 있는 것이 없어지는 동작
(6) push
: 기존에 있는 것을 밀어내면서 등장하는 것을 말한다.
(7) slide in
: 기존 것이 오버레이로 없어지면서 등장
(8) slide out
: 기존 것이 슬라이드 처리되며 등장
(8) 닫기
(9) 설정
7. 슬라이드 구현하기
(1) clip content
(2) 슬라이딩 마지막 장면
(3) 프로토타입 걸기
(4) 설정
(5) 프레임 연결
(6) 그룹 복사
(7) 연결 꼭짓점과 방향
(8) 배리어트
change to
중복 선택 필터들이나
불이 꺼졌다 켜졌다 하는 애니메이션은
change to 라는 기능이 업데이트 되고 나서는 배리언트 된 곳에 하면 쉽게 적용이 가능하다.
< 블로그 챌린지 >
[01]
1. 도형툴 + 패스파인더 기능을 이용하여
피그마 아이콘 만들기
2. 오토 레이아웃 기능을 응용하여
UI Card Design 예시 만들기
3. 배리언트 기능을 응용하여
Tab bar 만들기
'부와 비즈니스, 마케팅 > 라이프해킹스쿨' 카테고리의 다른 글
| [ 팀과제 2 ] 신박한 BM 과 니치마켓 찾기 (2) | 2023.06.29 |
|---|---|
| [ 본강의 16일차 ] 랜딩 페이지 이해 (1) | 2023.06.26 |
| [ 본강의 14일차 ] 포리얼 세미나, HB, 커뮤니케이션 스킬, 아바타설정 (0) | 2023.06.23 |
| [ 본과정 13일차 ] 피그마 인터페이스, 아이콘 제작 (0) | 2023.06.22 |
| [ 본강의 12일차 ] 망고보드로 상세페이지 만들기 (0) | 2023.06.21 |
