개발에서 프로그래밍 공부 할때 처음에 Hello World! 를 출력하는것 부터 하는 것처럼
일단 디자인툴은 툴박스, 즉 인터페이스를 알아야 하고, 단축키 부터 숙지해야 한다.

근데 실제 사용하기전에는 아무리 봐도 와닿지 않는다.

그래서 우선 유튜브에 아무조건없이 피그마에 대한 강좌를 여러가지를 보았는데 역시 정보의 홍수에 걸맞게
아주 다양한 강좌 / 강의들이 넘쳐난다. 시간을 아끼기 위해 사람들은 유료강좌를 찾아보지만 내가 봤을때 굳이 그럴 필요 없다. 발품팔아 현업에서 실제 디자인을 하고 있는 디자이너 유튜버님들의 강좌를 여러개 보면 걍 대충 알게 되고, 직접 해보면서 모를때 이것저것 검색하고, 유튜브 영상 보고 하면 피그마 툴이해하고 작업하는데 문제가 없을것으로 보인다.

피그마 사이트
위 피그마 사이트 접속해서 구글 로그인 하면 그냥 무료로 사용할 수 있다.

피그마 주요 단축키 정리

피그마 단축키 한 눈에 보기 : Ctrl + Shift + /

하단에 저런 창이 뜨는데 Essential 뭐 주요 정보 부터 Components 까지 탭형태로 그룹핑하여 다양한 Shortcut 정보를 제공해준다. 솔직히 이렇게까지 편하면 내가 정리할 필요가 없는데... 찬찬히 뜯어보는거 추천한다.

Move : V

무브툴은 프레임 또는 도형등 다양한 디자인 요소들을 이리 포커스선택하고, 움직이거나 늘리거나 회전시키거나 할 수 있다.

Scale : K

스케일은 선택된 요소에서 오른쪽 툴박스에서 x2 x3 이걸 선택하면 선택된요소의 크기를 확대 / 축소 하는 기능이다. 100 x 100 의 네모도형을 스케일 x2 하면 200 x 200 으로 변화한다.

---

Frame : F

프레임은 작업보드를 뜻한다. 쉽게 칠판 또는 화이트보드와 똑같다. 화이트보드에 내 맘대로 그리는 화면이니깐...프레임안에 또 다른 프레임을 넣을 수 있다.
프레임의 크기 지정은 오른쪽 속성 설정값에서 Width, Height 값 바꾸면 해당 크기로 조정된다. 또는 아래와 같이 프레임 마우스 올리고 화살표 누르면 디바이별 설정된 최적화된 가로 / 세로 크기로 선택하여 크기를 변경할 수 있다.


각 툴의 고유 속성정보들이 다 있는데 속성이 하는 역할과 기능들은 하나하나씩 보고 큰 흐름을 이해해보자.

Slice : S

슬라이스 기능은 슬라이스를 선택 후 디자인 한 곳에 네모낳게 그리고 우측클릭 Copy/Paste as > Copy as PNG 선택하면 슬라이스 영역의 네모난 크기의 Png 이미지를 Export 할 수 있다.

---

Rectangle : R

렉탱글 즉 네모 도형을 뜻한다. 네모 도형을 그려서 Border 를 표현할 수도 있고, 이미지를 채워서 이미지 영역으로도 사용할 수 있다.
🔴 도형 그릴때 Tip : Shift 누른채로 그리면 정사각형으로 그려짐, Alt 누르면 마우스 커서를 Center 포커스로 잡고 그려짐

Line : L

라인을 활용하여 디자인 영역의 구분을 지어 컨텐츠의 구분을 그릴 수 있음.

Arrow : Shift + L

화살표는 정말 많이 사용한다. 버튼 디자인에 추임새로도 사용하고, Swiper Arrow 표현할때도 사용하고, 게시판에 More 옆에 화살표를 넣어 디자인 요소로도 사용한다.

Ellipse : O

타원형을 뜻하는데, 위 도형그릴때 팁으로 설명했다시피 Shift 키 누르고 그리면 정원형으로 그려진다.
이것도 디자인요소로 활용할 상황이 많이 있다.

그 밖에 Polygon (다각형), Star(별모양)도 있다.

Place to image/video : Ctrl + Shift + K

Place to image 를 선택하면 탐색기창이 뜨고 해당이미지 선택 하면 커서가 + 로 바뀐다. Rectangle 오브젝트에 커서를 올리고 클릭하면 해당 도형에 이미지가 꽉차게(Fill) 들어간다.

아래는 도형을 이용해서 Anchor 태그 버튼을 만들어 보았다.

다음 포스팅에서 나머지 툴박스 기능설명을 이어나가겠다.