피그마는 쉬운 툴이다. 라고들 많이 한다. 근데 그건 잘 모를때의 이야기인것 같다. 하하 왜냐하면 나는 3주동안 피그마를 처음 접하며 메뉴구성이 자꾸 바뀔때마다 혼란을 겪었기 때문이다.
0. 기본적으로 알아야하는 요소의 위계
1. 자꾸 변하는 메뉴구성
2. 의사소통시 알아야할 용어들
이걸 "fill"로 바꿔주세요. 이건 "hug"로 바꿔주세요. 등의 내용을 강의에서 듣는다. 사실, 이게 편하고 다들 알아듣는다. 그런데 왜인지 이런, 이걸, 저걸의 용어를 많이 사용하신 사장님 때문에 인턴시절 나는 엄청난 고역을 겪었다. 이렇게, 저렇게, 잘... 아무튼 편하게 사용하는 용어들이 어떤 요소의 무엇인지 알아야하니, 명확하게 의사전달이 가능하도록 용어를 정리해보자.
Toolbar(툴바), Left sidebar(왼쪽 사이드바), Right sidebar(오른쪽 사이드바), Canvas(캔버스)
Toolbar : Tools, Actions, Collaboration, View로 이루어짐
Left sidebar는 Layers와 Assets로 이루어짐
Layers는 피그마를 처음 배우며 흔하게 봤던 화면일 것이다. 하지만, Assets...?
(추후에 공부할 것. Assets는 로컬 컴포넌트를 보거나 라이브러리로부터 컴포넌트들을 찾을 때 쓴다. 로컬 컴포넌트...?, 라이브러리..? 컴포넌트...?)
의외로 거꾸로 읽는게 작은 개념이다.
컴포넌트 : '피그마 작업파일 내에서 재사용 가능한 도형 틀' 같은 것으로, 몇몇 버튼들, 글자 입력창(텍스트필드)들은 재사용이 많이 일어나 컴포넌트에서 자식요소로 복제해와서 사용한다. 컴포넌트를 수정하면 모든 자식 요소들에 강제로 반영되는건 덤.
Assets 패널에서 모든 컴포넌트를 볼 수 있고, 원하는 컴포넌트를 끌어와 쓸 수 있다.
라이브러리 : 팀 내에서 공유하는 파일인데, 초보일땐 절대 쓸일이 없어보인다. 근데, 취업하고, 팀과 업무를 관리하기 위해서 적극적으로 사용할 수 도 있으니 실제로 활발히 사용하는지 튜터님께 여쭤봐야겠다.
로컬 컴포넌트 : 실제 이 파일에서 만들어진 컴포넌트
Assets 창에서는 컴포넌트가 많기 때문에 파일/페이지/프레임 단위로 컴포넌트를 묶어놓았다. 이 점을 잘 활용하자!
Right side bar
사용자의 권한에 따라서 메뉴가 크게 달라진다. 초보자의 경우, 언젠가 오른쪽 사이드바가 뭔가 예전같지 않음을 눈치채면 이 경우를 떠올리자.
왼쪽이 view 권한의 사용자가 마주할 화면이고, 오른쪽이 edit 권한을 가진 사용자가 마주할 화면이다.
처음 만든 사람이 공유를 할 때 당신이 보기만 하게 할 건지 같이 작업을 하게 할 건지 정해줄 것이다.
다시 왼쪽의 사이드바로 돌아와보자.
레이어에는 종류가 있다.
단체 손님 : 프레임, 그룹, 섹션
귀한 손님 : 컴포넌츠, 아이들 : 인스턴스
독립적인 개체들 : 텍스트, 셰입, 이미지, gif or video,
이렇게 그룹화하니까 외우기가 쉽지않나? 단체손님, 귀한손님, 독립적인 개체들..
몇몇 레이어들은 다른 레이어들을 자신 소속으로 포함할 수 있다(프레임, 그룹, 섹션_단체손님들). 이런 어미 레이어를 컨테이너라고 부른다.
레이어 특성에는 다양한 종류가 있다.
레이아웃 Layout
레이어 Layer
오토레이아웃 Auto layout
콘스트레인츠 Constraints
필스 Fills (색 채우기)
스트로크 Stroke (테두리)
셀렉션 컬러 Selection colors
효과 Effects
출력 Export
가 있으며, 각 레이어 요소마다 어떤 특성은 뜨고, 어떤 특성은 안 뜰수도 있다. 다른건 다 알겠어도 오토레이아웃은 모르겠다고..? 이건 따로 포스트를 해야할만큼의 핵심적이고, 방대한 설명이 필요하다(포스트 하나 정도).
첫번째는 레이아웃 특성
가장 기본적인 레이어 특성으로, 도형의 크기와 곡률, 위치를 조절하며, 프레임, 그룹, 컴포넌트, 인스턴스, 오토레이아웃, 섹션, gif에서 뜨는 특성이다. 기타 텍스트나 온갖 도형에서도 사용 가능하다.
두번째는 레이어 특성으로, 나도 써본적이 없다. 대부분의 레이어 종류에서 사용가능하다.
세번째는 오토레이아웃 속성으로 컴포넌트, 인스턴스, 오토레이아웃 레이어에서 사용 가능하다. 여기서 드는 궁금증. 그럼 모든 컴포넌트는 반드시 오토 레이아웃 속성을 갖고 있는걸까?
네번째는 컨스트레인츠.
도형이 프레임이나 상위 요소 내에 종속될 때, 어떤 규칙으로 위치할 건지를 결정한다. 특히, 상위 프레임의 크기가 변할때 내부 요소의 위치를 결정할지를 정하므로, 반응형 웹 디자인을 할때 반드시 잘 알고 사용해야할 부분이다.
요소 자신의 위치각 상위 요소에 의해 어떻게 결정되는지를 정하는 규칙이므로 모든 종류의 레이어에 표시되는 속성이다.
다섯번째와 여섯번재는 Fills와 Stroke. 이건 설명 없어도 보면 바로 알 수 있다.
일곱번째는 Selection colors인데, 내 화면에서는 Local styles로 되어있다.
바로 아래 사진은 Figma Learn이라는 공식 설명 페이지에 나온 설명으로, 내 화면과는 다르다.
나는 실제 피그마를 공부하며 여러가지 컬러스타일을 현재 프로젝트에 등록했고, 아랭롸 같은 화면으로 right sidebar가 정의되었다. 아무런 컨텐츠도 선택하지 않아 그동안 설명했던 layout, constraints, fills, stroke 등은 뜨지 않았다.
인스턴스를 하나 선택했을 때에는 Figma Learn의 설명대로 right sidebar 가 떴다.
여덟번째와 아홉번째 Effects와 Export는 잘 알 것이다. 참고로 Effects에서 ppt에서 써봤던 그림자 효과를 쓸 수 있다. ppt에서 그런거 안써봤다고?
이렇게 피그마 인터페이스에서 왜 때에 따라 오른쪽 사이드바에서 보여지는 메뉴 구성이 다르고, 어떻게 다른지를 알아보았다. 하지만 이건 어디까지나 피그마 프로그램을 알기 일뿐, ux와 ui를 디자인하기 위해선 레이어들의 구성원리를 알아야 한다. 다음 시간에 컨스트레인츠와 오토레이아웃, 컴포넌트에 대해서 살펴보겠다.