본문 바로가기
카테고리 없음

피그마의 주요 기능 알아보기 (1편) : 그룹, 프레임, 안내선, 내보내기

by Rachel 2024. 8. 6.
반응형

이전 글에서는 UI, UX의 정의와 이를 효과적으로 디자인 할 수 있는 강력한 도구인 피그마를 살펴봤습니다. 그렇다면, 이번 글에서는 피그마의 주요 기능을 한번 살펴보도록 하겠습니다. 이번 1탄에서는 그룹과 프레임의 차이, 안내선을 만들 수 있는 줄자 기능을 살펴보고 이후에는 좋은 디자인이란 무엇인지 여러분에게 질문을 드리고 함께 생각해보려고 합니다. 

 

피그마의-주요-기능-알아보기-1탄
피그마의 주요 기능 알아보기 1탄

 

1.  그룹, 프레임 기능

먼저 피그마는 그룹과 프레임을 통해 요소를 묶어서 관리할 수 있습니다. 그럼 그룹과 프레임의 차이는 무엇일까요? 먼저, 여러 레이어를 그룹화하면 자동으로 요소의 크기에 맞춰 그룹 크기가 결정됩니다. 또한 내부 요소의 크기가 변경되거나 개체가 삭제되는 경우, 그 크기에 따라 그룹의 크기가 맞춰서 변합니다. 다시 말해, 그룹은 여러가지 요소를 담은 주머니로 생각하시면 됩니다.

 

반면, 프레임은 액자라고 생각하시면 되겠습니다. 여러 레이어를 묶을 수 있다는 점에서는 그룹과 공통점이 있지만, 요소의 크기나 개수에 상관없이 프레임은 고정된 틀을 가집니다. 만일 프레임을 벗어나는 디자인 요소가 있다면, 아예 보이지 않게 처리할 수도 있습니다. 프레임이 가진 고정되면서도 유연한 성질 덕분에 디자이너들은 글자 요소를 변경하지 않고 다양하게 변해야하는 버튼이나, 일부 내용만 보여야 하는 캔버스 등 훨씬 더 광범위한 용도로 프레임을 활용할 수 있습니다.

 

프레임은 프레임툴을 눌러서 사용할 수 있고, 용도에 맞게 미리 고정된 프레임 크기를 선택하여 만들 수 있습니다. 대표적으로 주요 소셜 미디어인 인스타그램의 스토리나 포스트, 페이스북의 상단 프로필, 그리고 모바일 UX/UI 디자인이 가능하도록 기종별 아이폰과 갤럭시의 프레임을 담았습니다. 이처럼 프레임은 모두 디자인 요소를 담는 액자로 활용할 수 있습니다.

 

다시 정리하겠습니다. 그룹은 크기를 전체적으로 조절하거나 이동할 때 주로 사용됩니다. 반면, 프레임은 묶음 자체가 자신의 크기나 내부 요소를 잘라서 보여줘야 할 때 유용하게 활용할 수 있습니다.

 

2.  안내선 기능

안정적이고 정돈된 디자인을 위해서는 가이드선이 유용한 해결책이 될 수 있습니다. 안내선 기능을 이용하기 위해서는 먼저 줄자 기능을 활성화시켜야합니다. 단축키로는 Shift + R 을 통해 줄자 기능을 켤 수 있습니다. 줄자 기능이 켜지면, 화면 좌측과 정면 상단에 줄자가 생기는 걸 볼 수 있습니다.

그 다음, 좌측에 있는 자를 클릭해서 드래그 한다면 안내선을 뽑아낼 수 있습니다. 안내선은 자유롭게 위치를 옮길 수 있고, 요소에 고정됩니다. 따라서 요소를 이동할 때도 편리하게 안내선 기능을 활용할 수 있습니다. 안내선을 잠깐 꺼두길 원한다면 Shift + R로 줄자 기능을 꺼줍니다. 안내선을 아예 없애고 싶다면 delete 버튼을 누르거나, 안내선을 줄자 끝으로 끌고 가면 자동적으로 사라집니다.  

 

3. 내보내기 기능

여러가지 기능을 활용해서 자유롭게 나만의 작품을 만들었다면, 이제 최종 파일을 내보내야 합니다. 내보내기 기능을 활용하여 나의 작업물을 저장해봅시다. 전체 프레임을 클릭한 후에, 프로퍼티 탭에서 가장 아래로 내려가면 Export 버튼이 보입니다. 여기서 + 버튼을 눌러주면, 어떤 파일 형태로 내보낼 것인지 선택할 수 있습니다. 피그마는 PNG, JPG, SVG, PDF 형식을 지원합니다. 원하는 파일 형태를 바꾸고, Export를 눌러줍시다. 파일 탐색기에서 내가 저장하고 싶은 이름으로 수정하여 저장을 합니다.

피그마의 공유 기능을 활용한다면 웹 링크로 나의 디자인을 공유할 수 있습니다. 우선 Share 버튼 옆의 삼각형 버튼(플레이 버튼)을 눌러 발표 모드로 들어갑니다. 발표 모드에 들어왔다면, share prototype 버튼을 클릭합니다. 이제 여기서 이메일로 사람들을 초대하거나, 하단의 copy link 버튼을 통해 사람들에게 링크를 전달할 수도 있습니다. 내가 만든 작품을 친구들에게 보여주세요!

 

※ 해당 글은 코드잇(codeit)의 [UI 디자인 기초] 강의 내용에서 참고하여 작성하였습니다. 

 

반응형