피그마 사용방법 (2) 기본 디자인 도구
지난 시간에 피그마를 공부할 때 다음 2개부터 외워야 한다고 얘기했었다.
1. 기본 디자인 도구 외우기.
2. 오른쪽 패널 외우기.
우선 Figma 화면 하단에 있는 디자인 도구들 중 자주 쓰는것들의 단축키를 외워야한다. 그 중에는 일단, 다음 4가지 도구들의 단축키만 외워두면 된다. 나머지 도구들은 나중에 차차 암기해도 된다.
그림판의 위쪽에 있는 도구들 중 몇 개가 피그마에서는 아래쪽에 내려와 있는거라고 생각하면 된다.
1-1. Move Tool.
단축키는 V이다.
그림판과 비교해보겠다. 그림판에는 이 도구가 없다.
이 도구의 단축키는 Move의 첫 글자를 따서 M이어야 할 것 같지만 V로 되어 있다. 헷갈리지 않도록 주의하자. 이 도구는 캔버스에 있는 도형이나 글자 등을 이리저리 옮기고 사이즈 키울 수 있는 도구이다.
이 도구가 선택되어 있으면 하단 Move tool 영역이 파란색으로 되어 있을 것이다. 마우스 커서 또한 Move tool 모양을 하고 있다.
1-2. Frame Tool.
단축키는 첫 글자를 따서 F이다.
그림판과 비교해보겠다. 그림판에는 이 도구가 없다.
네모난 액자를 만들 수 있는 도구이다. 이해를 돕기 위해 네모난 액자라고 표현했지만 피그마 화면으로 보면 그냥 네모일 뿐이다. 그래서 이 다음에 설명한 Rectangle Tool 이 그리는 네모와 헷갈릴 수 있으니 액자와 종이에 비유해서 그 차이를 소개해 보겠다. 이 Frame 툴로는 액자를 만들 수 있다고 했다. 액자 안에는 네모난 도형을 넣을 수도 있고 글자, 사진을 넣을 수도 있다. 심지어 액자 안에 또 다른 액자를 넣을 수도 있다. 액자 안에 넣은 것들은 액자안에 잘 들어가 있으므로, 내가 액자를 움직이면 당연히 그 안에 들어가 있는 것들도 따라서 함께 움직인다. 그리고 액자의 뒷 배경을 흰색으로 칠해줄 수도 있고 검정색, 빨간색 등 다양한 색으로 칠해줄 수도 있다.
이 도구가 선택되어 있으면 하단 Frame tool 영역이 파란색으로 되어 있을 것이다. 마우스 커서는 더하기 모양을 하고 있다. 이 모양은 그림판에서의 커서 모양과 비슷하다.
1-3. Rectangle Tool.
단축키는 첫 글자를 따서 R이다.
그림판과 비교해보겠다. 그림판에 있는 네모 도형과 동일하다.
네모난 색종이를 만들 수 있는 도구이다. Frame이라는 액자와는 달리 이 네모난 색종이 안에는 뭔가를 넣을 수 없다. 또 다른 네모를 넣을 수도 없고, 글자나 이미지를 넣을 수도 없다. 당연히 프레임을 넣을 수도 없다.
색종이 안에는 다른 무언가를 넣을 수 없지만 색종이 위에 다른 색종이나 글자, 이미지들을 올려놓는 것은 가능하다. 다만, 살짝 올려놓았을 뿐이라서 해당 색종이를 이동시키면 그 위에 살짝 올려두었던 다른 것들은 같이 이동하지 않고 그대로 있다.
그리고 편의상 네모 도형에 대해서만 언급했지만 피그마에는 네모 뿐만 아니라 동그라미, 선 등 다른 도형들도 있다. 네모 툴 옆에 화살표를 누르면 다른 모양의 도형들의 모습이 보일 것이다. 그 도형을 선택하면 해당 도형을 그릴 수 있다.
Frame과의 공통점 중 하나는 색상을 마음대로 칠해줄 수 있다는 점이다.
이 도구가 선택되어 있으면 하단 Rectangle tool 영역이 파란색으로 되어 있을 것이다. 마우스 커서모양은 아까 Frame tool일 때의 커서 모양과 동일하다.
1-4. Text Tool.
단축키는 첫 글자를 따서 T이다.
그림판과 비교해보겠다. 그림판에 있는 Text 도구와 동일하다. 글자를 써줄 수 있는 도구이다.
이 도구가 선택되어 있으면 하단 Text tool 영역이 파란색으로 되어 있을 것이다. 마우스 커서모양은 아까와 동일하다.
Move Tool은 언제 사용할까?
디자인 작업할 때 보통 평소에는 Move tool을 사용하게 될 것이다. 도형들을 이리저기 움직이거나 도형의 사이즈 등의 정보를 확인하거나 수정해야할 할 경우가 많기 때문이다. 편의상 도형이라고 딱 한가지만 콕 찝어 언급했지만 이 Move tool로 이미지, 텍스트, 프레임도 움직이거나 수정할 수 있다.
Frame Tool은 언제 사용할까?
당신이 지난 주에 쿠팡에 입사했다고 가정해보자. 지난주 동안은 회사와 업무에 대한 이런저런 설명을 들었다. 그리고 드디어 오늘부터 당신이 해야 할 업무요청이 들어왔다. 배너 디자인 작업을 해야 한다. 해당 내용에 대한 기획문서와 필요한 이미지들을 마음껏 다운받아 쓸 수 있는 웹사이트도 안내 받았다. 기존에 배너 디자인 작업한 피그마 파일을 열어서 01번 프레임 옆에 02번이라는 이름으로 똑같은 사이즈의 새 프레임을 만들고 거기에서 디자인 작업을 하라고 한다.
그래서 지금 당장 해야 할 일은 01번 프레임 바로 옆에 똑 같은 사이즈의 프레임부터 만드는 것이다. 일단 프레임 하나를 만들어 보겠다. 프레임을 클릭하면 해당 프레임에 관한 모든 정보가 오른쪽 패널에 표시된다. 지난 시간에도 얘기했지만 피그마 화면에 있는 기능들 중 나는 개인적으로 이 오른쪽 패널이 가장 중요하다고 생각한다. 이 오른쪽 패널에 대한 설명은 다음 시간에 자세히 소개하겠다.
시작할 때는 제일 먼저 프레임으로 작업 영역을 만들어 놓고, 그 안에서 디자인 작업을 해주는 것이 좋다. 여러가지 이유가 있는데 그 중 한가지 이유는 다음과 같다. Frame 안에서 작업을 하면 그 안에 들어가 있는 내용물들을 하나의 그룹으로 묶이기 때문이다. 그러면 프레임을 이동할 때도 편하고 그 안에 들어가 있는 내용물들을 정리하기도 편하다.
Rectangle Tool은 언제 사용할까?
나는 개인적으로 이 rectangle tool은 많이 사용하지는 않는다. 하지만 가장 기본이 되는 도구이기 때문에 이번 기초강의에서 같이 설명했다. 아이콘을 만들 때 쓸 수 있긴 하지만 아이콘을 디자인 소스 제공해주는 웹사이트나 피그마 내의 플러그에서 쉽게 다운받아 쓸 수 있다. 따라서 나는 이 툴을 거의 사용하지 않는다. 그래도 이해를 위해 예시를 하나 들어보자면 유튜브 메인 화면에 있는 메뉴 아이콘과 같은 것을 만들 때 사용할 수 있다.
퀴즈
당신은 지금 나문희 배우님에게 방금 들을 내용을 설명해야 한다. 그분이 잘 이해할 수 있도록 설명해보자.
1. Move tool에 대해 설명해보자. (예) 해당 툴의 위치, 단축키, 기능, 언제 사용하는지.
2. Frame tool에 대해 설명해보자. (예) 해당 툴의 위치, 단축키, 기능, 언제 사용하는지.
3. Rectangle tool에 대해 설명해보자. (예) 해당 툴의 위치, 단축키, 기능, 언제 사용하는지.
4. Text tool에 대해 설명해보자. (예) 해당 툴의 위치, 단축키, 기능, 언제 사용하는지.
