웹 디자인 1 25-02

■ 2월 13일 - 1일차

■ 피그마 설치

○ 피그마 사이트

 

○ 피그마 로그인(구글과 연계)

 

○  피그마 다운로드

 

 

■ 피그마 실행 / 주요 툴

 

○  새 파일 만들기

- 단축키 Ctrl + N

- 위 메뉴에서 Design file 누르기

 

 

○  이름변경

- 위의 이름을 클릭하면 이름을 변경할 수 있다.

 

 

○  확대 축소

-  Ctrl + 마우스 휠

- +, - 키

- Ctrl + 0 : 100% 크기

- 크기 수치조정

 

 

○  이동과 크기

- Move : 단축키 V : 이동을할 수 있는 툴

- Scale : 단축키 K : 오브젝트의 크기를 변경하는 툴

 

 

○  Frame, Section, Slice

- Section : 아트보드를 전체 관리하는 부분 단축키 Shift + S

- Frame : 아트보드 영역, 하나의 화면을 의미 단축키 A

- Slice : 원하는 영역을 내보낼 수 있는 영역 단축키 S

 

○  Shape

- 기본 도형툴 사각형 R, 원형 O, 선 L

 

○  Pen, Pencil

- Pen : 단축키 P 곡선과 직선을 벡터로 그릴 수 있다.

- Pencil : 단축키 Shift + P

- 도형을 더블클릭하여 벡터 편집을 시작할수 있다.

 

○  Text 툴

- 단축키 : T

- 클릭 드래그 하면 텍스트 박스가 생김

- Ctrl + Enter, Esc 종료

 

○ Hand 툴

- 단축키 : space

- 화면을 이동

 

○ Comment

- 댓글기능 단축키 C

 

○ Layers, Disign, proto type panel 등

 

○  Preference 설정

 

- 숫자키를 투명도로 설정하기 위해서는 umber key for opacity를 체크 해야함

- 체크 해제시 0 : 화면 100%, 1: 화면구성 100%, 2: 선택 100%

- 체크 불투명도 넣어줌 숫자를 두개를 눌러주면 5와8 58%로 변경됨

숫자 1개는 3 == 30%

 

○ Ctrl, Alt

- Ctrl : 오브젝트 선택

- Alt : 간격 확인

 

○ 오브젝트 내에서

- Ctrl : radius 1개씩 변경, 다중변경 변화

- Alt : 중앙점 고정 크기 변경

- Shift : 배율 고정

 

○ pen에서

- Ctrl : 선택, 선위에서는 곡선으로 변경, 포인터 위에서는 각도 변경

- Alt : 한쪽 각 변경, 포인트 빼기

 

 

○ Shift + space

- prototype 화면으로 보기

 

 

■ 피그마기초

○ 특징

- 클라우드 기반으로 컴퓨터에 저장할 필요 없음

- 윈도우 맥 OS 제약을 받지 않는다.

- 팀원과 실시간 협업이 가능

- 커뮤니티에서 다양한 에셋 과 플러그인을 제공

- 기획 프로토타이핑 개발까지 최적의 툴임

 

○ 인터페이스

-  툴바

- 레이어 패널

- 캔버스

- 계정, 공유, 프로토 타입

- 속성 패널

 

○ 주요 단축키

- Ctrl + G : 그룹

- Ctrl + Alt + G : 프레임으로 그룹

- Ctrl + Shift + G : 그룹해제

- Alt 드래그 : 복제

- Ctrl + [, ] : 순서

- Ctrl + Shift + [, ] : 한번에 순서 이동

- Ctrl + D : 반복작업

 

○ 많이 사용하는 plugin

 

- Unsplash : 이미지 사용 사이트

- Pixabay : 이미지 사용

 

○ 레이어, 프레임, 섹션

- Section : 화면을 담는 단위로 프레임과 화면 요소들을 담을수 있다.

- Frame : 화면요소와 화면을 담는 컨테이너 그룹 (속성변경시 콘텐츠에 영향없음)

- Group : 화면을 묶는 단위로 컨테이너 역할을 하지 않는다.

 

○ 도형크기 조절

 

○ 모양(불투명도, 코너)

 

○ 색

 

 

■ Text

○ 글자 작성

- 클릭시 글자의 너비와 높이를 받아서 만들어짐

- 드래그시 글자박스를 기준으로 만들어져 정렬됨

 

○  글자 Layout 크기

- Auto Width : 너비 자동맞춤 Enter가 없으면 1줄 높이 

- Auto Hright : 높이 자동맞춤 Layout의 너비가 크면 1줄 나오고 Enter있으면 그에 맞는줄

너비가 작으면 글자가 넘어가며 높이를 맞춰준다.

- Fixed Size : 크기에 맞춰 글자가 나오고 너비가 줄어들면

밑으로 내려온다. 높이가 작으면 넘어감

 

 

 

○  글자 Layer Align

 

○  말줄임표 Truncate text

 

■ Image

○  이미지 속성

- Fill : 체우기 크기변경에 따라 중앙을 기준으로 채운다

- Fit : 높이 너비중 작은쪽에 맞춰서 나온다.

- Crop : 자르기 하고 크기변경시 깨진다.

이미지 크기조절시 Ctrl 누르면 자르기로 자동변환

- Tile : 빈공간에 반복적으로 나온다.

 

 

 

 

 

 

 

■ Position

 

○ X : Y 축

부모의 frame에 위치를 지정한다. 고정은 기본 Constraints에서 설정하고

고정시켜주면 frame의 크기 변화에 따라 맞춰서 크기 조절됨

 

 

 

 

 

 

 

 

 

■ 2월 17일 - 2일차

 

■ Auto Layout

○ Width, height

너비 높이를 수치값으로 줄수 있다.

Fixed는 크기를 직접 줄수 있고

Hug는 내부 컨텐츠의 크기에 맞춰서 크기 조절을 해준다.

Padding값을 수치로 줄수 있고

Clip content는 부모요소를 빠져나오면 투명하게 해준다.

 

 

 

○ Align

 

 

○ Layout 배치

 

 

○ Gap, Padding, Align, Hug

 

 

○ Gap과 크기조절

Gap이 Auto 일때는 크기 조절시 Gap이 변경

아닐때는 왼쪽 기준일때는 왼쪽 기준으로 변경

 

 

○ 내부 Contents 에서의 Fixed, Fill

내부 컨텐츠에서 Fixed는 부모 크기 조절시 내부 크기가 고정되어 있음

Fill로 넣으면 부모크기에 맞춰서 크기 조절

Fill로 넣어도 Min - Max를 지정시 Fixed 효과도 같이 같고 있음

 

 

 

○ Fill에서의 Min Max

Min 속성과 Max 속성을 모두 줄수 있다.

 

 

 

 

 

 

 

■ 2월 18일 - 3일차

■ 피그마 컴포넌트

디자인에서 반복적으로 사용되는 요소를 한 번만 정의해두고,

다양한 곳에서 재사용할 수 있는 기능

컴포넌트를 사용하면 디자인의 일관성을 유지하고, 변경 사항을 쉽게 적용

 

○ Component (Master, Instance)

- Master : 컴포넌트의 원본이 되는 요소

- Instance : 원본 컴포넌트로 복제한 요소

- Master 컴포넌트를 변경하면 Instance를 같이 변경가능

- 변경된 Instance는 Master가 변경되도 변경안됨.

- 변경된 Instance의 속성을 제외하고는 변동됨

 

 

- 등록한 Component는 Asset에서

Local assets에서 Instance로 가져올수 있음

 

- Instance의 속성을 Master와 맞추려면

마우스 오른쪽 눌러서 Reset All Changes 클릭

 

- Instance 의 Component 해제로 일반 요소로 사용하던지

새로운 Master Component로 제작시

오른쪽 마우스 메뉴에서 Detach instance 사용

 

- Master component 이동 및

Instance로 변경한 요소로 Master component 변경

 

- Component는 제작후 해제 할 수 없지만

Instance를 만들어서 Instance를 Master와 연결을 끊어

일반 프레임으로 만드는 방법은 있음

 

 

 

 

 

■ 2월 20일 - 5일차

○ Component 활용 버튼 만들기

- 1개의 Master를 수정하면 모든 Instence를 변경할 수 있다.

- Button 형태를 만들때는 버튼을 Auto Layout 으로 작성하는 것이 좋다.

 

○ 여러개의 Component를 한번에 등록하기

- 여러개를 선택한 상태에서 Multiple Components

 

○ Instance Swap 

- 인스턴스 컴포넌트에서 다른 컴포넌트를 변경하기 위해서는

이름을 눌러주면 Swap Instance나와서 컴포넌트를

눌러주면 변경되며

다른쪽 컴포넌트를 사용하기 위해서는

Local Components를 눌러 주면됨

 

 

 

○ Component와 한글더미 사용하기

- 한글더미를 사용하면 일일이 텍스트를 입력할 필요없이

글자들을 만들어 준다. 디자인을 위해 글자 배치시 많이 사용됨

plugin에서 추가해서 사용하면 됨

 

 

 

■ 피그마 컴포넌트의 프로퍼티

컴포넌트를 여러개를 작성하여 쉽게 변경시킬 수 있는

여러가지 속성

 

 

 

○ Varient

- 여러 상태에 대한 변화되는 요소를 만들어

빠르게 어떠한 상태로 인스턴스 요소를 변경한다.

 

- 컴포넌트를 누르고 프로퍼티를 누르면 메뉴가 뜨고

Variant를 누르면 배리언트를 추가시키는 매뉴가 뜬다.

 

 

- 추가를 하고 요소의 속성을 변경한 후

우측에서 이름을 지정 해 줄 수 있다.

 

 

- 새로운 인스턴스를 만든 후 인스턴스에서 프로퍼티를

선택해 주면 적용할 수 있다.

 

 

- 여러가지 유형을 만들어서 한번에 만드는 방법

먼저 여러가지 유형의 프레임을 만들고

둘다 선택후 Create component set 이용

 

 

- 크기 변경 및 여러가지 형태 만들기

 

 

 

■ 2월 24일 - 6일차

○ Boolean

- 참과 거짓으로 두가지 형태만 가지고 있음

맞고 아님만을 뜻함 (있고 없음)

컴포넌트를 선택한 후 블린을 넣으면 이름과 현재를 어떤 값으로 지정할지 선택

 

- 메인 컴포넌트에서 사라지게 할 요소를 선택한 후 모양에서 블린의 이름을 클릭

 

 

- 인스턴스 요소에서 끄고 킬것들을 선택하고 이름이 지정된 블린을 체크 및 체크 해제

 

 

 

 

 

 

 

 

 

■ 2월 25일 - 7일차

 

 

■ 변수 Variables

일관된 디자인을 위해 사용하는 값을 저장 및 변경할 수 있는 기능

변수 : 변할 수 있는 수 (값)으로

특정 값에 이름을 붙여놓고 이름으로서 값을 불러올 수 있다.

 

장점 : 디자인 요소들을 쉽게 변경하고 일관성을 넣어 줄 수 있다. 

 

 

○ 변수의 사용가능 타입

 

- Color : Fill, Stroke, Effects

- Number : Width & Height, Padding, Margin, Gap, Corner Radius, Stroke

- String : Text

- Boolean : True or False

 

○ Color

색을 저장할수 있고 Hex 값, 변수 이름등을 넣어 줄 수 있다.

 

- collection 만들기

여러 변수의 묶음으로 관리 할 수 있다.

이름도 지정 가능 

 

- 변수 만들고 값 넣어주기

Name은 변수의 이름을 지정하고 Value에 값을 지정함

 

 

- 요소에 색 넣어 주기

색에서 Libraries에 넣어준 색이 있음

 

 

- 변수의 값 변경

변수의 값을 변경하면 동일한 변수명으로 지정된 요소의 색을 변경한다.

 

- 변수의 값을 변수로 지정 가능

 

 

- 옵션

 

- New Group

변수를 그루핑 해준다.

그룹 이동은 클릭 드래그

 

- Edit Variables

변수 편집 , Scope 기능을 사용하여 특정한 곳에서면 사용 가능하도록 체크 해 줄수 있다.

 

 

- Duplicate Variables

동일한 색을 복제 해준다

 

 

- Delete Variables

변수를 삭제한다.

 

 

○ Number

많이 사용하는 수치값을 하나의 변수로 지정하고

변수값을 변경하면 연동되서 모두 변경됨

 

 

○ String

문자를 변수로 저장해 두고 변수 내용을 수정 하면 한번에 수정이 가능

 

○ Boolean

Boolean이 False면 안보이고 True면 보이게함

Apperance 눈에서 Shift 클릭

 

 

 

■ 프로토타입 Prototype

디자인 요소와 화면 간의 상호작용을 시뮬레이션하고

시각화 하는 기능을 제공 디자인의 동작을 검토하는 형태

 

○  Prototype 기본

- page별로 Prototype을 지정하고 사용할 수 있다.

기본 Settings을 해주면 그대로 화면 조절 가능

 

- No device는 기본 Frame 크기로 보여 준다.

 

○  Interaction (상호작용)

 

○  Triger

상호작용을 하기 위한 사용자의 행동을 정의함

 

 

- On click

마우스로 클릭하거나 손가락으로 터치 했을때 실행

 

- On Drag

오브젝트를 드래그할 때 실행

 

- While hovering

마우스 커서가 있을때 실행 (빠지면 액션 취소)

 

- While pressing

길게 누르거나 터치 하는 동안 실행

 

- Mouse enter

마우스 커서가 들어가는 순간 실행(마우스가 없어도 액션이 취소 안됨)

 

- Mouse leave

마우스 커서가 사라지면 실행

나머지는 유사

 

- After delay

일정시간이 지나면 자동 실행

 

 

○  Action

상호작용 하는 방식을 지정

 

- Navigate to

대상으로 지정한 프레임으로 이동

 

- Back

이전 프레임으로 이동

 

- Scroll to

지정된 오브젝트로 스크롤로 이동

 

- Open link

외부 Url연결

 

- Open overlay

프레임 위로 띄우기

 

- Swap overlay

열려 있는 오버레이를 다른 오버레이와 교체

 

- Close overlay

오버레이를 닫음

 

 

○  Destination

상호작용이 끝나는 지점

 

 

○ Animation

상호작용이 실행되는 움직임을 설정

 

- instance

상호작용이 즉시 실행

 

- Dissolve

서로 교차되며 서서히 전환

 

- Smart animate

같은 이름을 가지고 있는 오브젝트 속성 변경내용인식

움직임을 선형으로 표현

 

- Move

기존 프레임 위로 밀어 넣거나 밀어냄 (기존 프레임은 고정)

 

- Push

새로운 프레임이 기존 프레임을 밀어내며 전환

 

- Slide

기존 프레임 위로 밀어 넣거나 밀어냄 (기존 프레임을 서서히 이동)

 

 

○ Scroll

- 보여지는 화면을 구성하는 것으로

화면을 넘어서는 프레임을 만들고

프레임을 감싸는 프레임에 보여질 화면 만큼 크기조절

Clip contents를 체크하여 내부가 보이지 않게 조절

Prototype에서 Scroll 조절

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

■ 2월 26일 - 8일차