클라우딩 어플리케이션 엔지니어링 TIL Day 23 - 피그마 기초

이번주부터 피그마에 대한 강의가 진행된다

옛날에 프로젝트를 하면서 피그마를 사용해본 적이 있었는데

아무래도 디자인 감각이 없고 섬세함이 부족한 나에게는 약간은 어려운 툴이었다

하지만 이번 기회에 피그마를 제대로 배워서 멋진 디자인을 만들어봐야겠다

---

# 피그마 소개

피그마는 다양한 UX 툴 중 압도적인 사용량을 보여주는 가장 인기있는 디자인 툴이다

피그마는 백터 기반의 툴이다 -> 확대, 축소 시에도 이미지의 깨짐이 없다

 

# 디자인 기초

# 컬러

디자인에서는 색상이 주는 느낌이 중요하다

디자인 시 색상이 주는 느낌을 고려해서 디자인 해야한다

# 대비

# 보색대비

서로 반대되는 색을 인접하게 위치시키는 것

색 조합이 어려울 수도 있다

# 유사대비

유사한 색을 인접하게 위치시키는 것

조화롭고 차분한 느낌을 주며 실패할 확률이 적다

디자인 시 색의 조합은 메인 컬러 60%, 두번째 컬러 30%, 강조 컬러 10% 의 비율로 사용해보자

강조 컬러를 10% 이내로 사용해야만 사용자가 어떤 것이 중요한지 직관적으로 알기 쉽다

 

# 폰트

# 세리프

가독성이 뛰어나며 클래식한 분위기를 준다

 

# 산세리프

현대적이고 도시적인 분위기를 준다

---

# 기본 기능

# 프레임

▶ 프레임 생성 단축키 : F 

도화지의 역할

프레임으로 만들면 해당 프레임 안에 새로운 요소가 추가되면 자동으로 하나의 프레임으로 합쳐진다

 

# 섹션

▶섹션 생성 단축기 : shift + s

프레임이나 그룹보다 상위 개념이다

따라서 섹션을 프레임 안에 넣는 것은 불가능하다

하지만 프레임을 섹션 안에 넣는 것은 가능하다

워크스페이스 정돈 시 사용된다

섹션 이미지

 

# 기본 도형

해당 단축키 또는 도형 클릭 후 생성 가능하다

shift 를 누른 상태로 생성하면 비율에 맞춰서 만들 수 있다

 

# 코멘트

협업 시 유용하게 사용된다

단축키 C 누르고 클릭 후 코멘트 달기

 

# 사이드바

오른쪽 사이드 바에서 요소들의 정렬, 반응형 변경, 프레임 종류 변경, 프레임 내 요소 크기로 줄이기 등등 다양한 기능을 제공한다

간단한 기능들을 알아보자

 

# 포지션 / 디멘드

포지션은 해당 요소의 위치를나타낸다

해당 요소가 프레임 내부나 다른 요소의 내부에 위치할 경우 그 요소를 기준으로 포지션 값이 계산된다

디멘션은 높이와 넓이이다

클립 모양을 누르면 높이 또는 넓이가 변화될 때 비율에 맞춰서 함께 변화된다

값을 입력할 때는 사칙연산으로 입력이 가능하다

 

# 텍스트

오른쪽 사이드 바에서 다양한 텍스트의 옵션들을 확인할 수 있다

조금 더 자세한 옵션들을 설정할 수도 있는데 글을 요약해주는 기능이 새롭게 제공되고 있다

이 부분은 여러 번 실습을 통해서 쉽게 익힐 수 있을 듯하다

 

이 밖에도 사이드바에서 제공하는 기능들은 굉장히 다양하다

요소의 색 채우기, 선 옵션 변경하기, 선택된 컬러에 옵션 적용하기 등등

피그마를 통한 디자인 실습을 진행해보면 금방 익힐 수 있는 내용들이다

 

# 피그마 단축키

피그마 내에서 단축키 확인하기 : Ctrl + Shift + ?

단축키의 종류가 매우 다양해서 다른 글로 다시 한번 포스팅 하겠다

단축키를 자주 사용해서 손에 익히도록 하자

---

# 새로 알게 된 점

피그마에 대한 기본적인 사용법을 복습하는 시간이었다

개념을 잘 모르고 효과만 보고 사용했던 옵션들을 이번 강의를 통해 정리할 수 있었다

디자인의 세계는 정말 다양하고 무궁무진한 것 같다