피그마 2022, 새로운 기능
Auto layout의 사용성과 Component property
FIGMA의 디자인 컨퍼런스, CONFIG
5월 10일 UIUX 디자인 툴을 넘어 디자인 중심 커뮤니티로 나아가고 있는 피그마의 디자인 컨퍼런스인 config 2022가 열렸습니다. 저도 열광하면서 해당 컨퍼런스를 열심히 시청했는데요. 피그마의 아주 초창기였던 2018년부터 피그마에 대한 열렬한 사랑을 표현하면서, 주변 사람들에게 이 훌륭한 디자인 협업툴에 대한 홍보를 하고 다녔던 저로서는 너무너무 재미있고 알찬 시간이었습니다.
피그마 주식이 있었다면 2017년에 샀을텐데2018년만해도 피그마를 배우고 있던 저에게 누군가 '현업에서는 스케치를 많이 쓰니까 스케치를 배워야한다'며 이야기했던 기억이 새록새록 나는데요. 어느새 피그마는 스케치를 제치고 보란듯이 세대교체를 해낸 듯한 모습입니다. 프로덕트의 개방성과 협업의 중요성이 새삼 느껴지는 부분입니다. 여하튼 이제는 많은 디자이너분들이나 학도분들이 피그마의 존재 이유와 일반적인 기능은 아실거라고 생각하고! 눈물 흘리며 탄성을 뱉었던 피그마의 훌륭한 새로운 기능들을 소개해보도록 하겠습니다.
이번 피그마의 변화는
네 가지로 나눌 수 있어요.
1. 오토 레이아웃 기능의 변화
2. 컴포넌트의 프로퍼티 기능
3. 다양한 텍스트 / 폰트 세부 기능 추가
4. 피그잼의 강화
텍스트, 폰트 기능은 쉽게 이해가 가능하고 피그잼은 제가 많이 사용하는 툴이 아니라...
이번 칼럼에서는 1, 2번 핵심 기능을 중심으로 소개하겠습니다.
1. 오토 레이아웃 기능의 변화
짜잔!누구나 처음 접하고 나서 무릎을 탁 치게 만드는 정말 편리한 기능인 오토 레이아웃이 조금 생소한 인터페이스로 변화했습니다.
1. 상하 좌우 패딩 동시 조절
큰 변화점은 기존에는 사방의 패딩을 각각 입력하는 것이 기본이었다면, 좌우, 상하 패딩 값을 각각 묶어서 변경하는 것이 default가 되었다는 점인데요, 값을 하나만 조절하면 반대쪽의 패딩도 함께 조절되게 됩니다. uiux에서 상하, 좌우 패딩 값을 동일하게 맞추거나 비슷하게 조절하게 되는 경우가 많은 점을 생각하면 편리한 기능인 것 같습니다. 익숙해질 필요는 있겠지만요.
물론 오른쪽 하단의 모서리가 뚫린 박스처럼 생긴 independent padding 버튼을 누르면 4방향의 값을 따로따로 입력할 수도 있구요, 이 방법이 어렵다면 아래 이미지를 참고하세요. ctrl을 누르고 패딩값을 조절하는 Input box를 클릭하면 상하좌우 패딩값을 comma(,)로 구분하여 개별적으로 입력할 수 있게 됩니다.
2. 핸들 드래그를 통해 원하는 바에 따라 자유롭게 조절 가능
mac은 alt = Option!숫자를 입력하는 것도 편하지만, 귀찮을 때는 핑크 핸들을 사용할 수 있습니다. 오토 레이아웃 프레임을 선택하면 나타나는 분홍색 핸들을 드래그해서 패딩값을 자유롭게 조절할 수 있게 되었는데요, 위 이미지와 같이 alt를 누르면 반대쪽에 있는 패딩을, alt + shift를 누르면 4방향의 패딩을 전부 조절할 수 있게 되었습니다.
* 추가로, 하나의 핸들을 움직일 때 shift를 누르고 조절하면 피그마에 설정해놓은 big nudge 단위씩을 조절할 수 있게 됩니다. 기본적으로 10Px로 고정되어있으나, big Nudge는 Figma > preference > nudge amount에서 정할 수 있으니, 디자인하고 있는 앱 서비스에 가장 잘 맞는 px값으로 조절해놓으면 편하겠습니다.
3. 핸들 클릭으로 바로 인풋박스로 이동
두 가지 기능을 섞어놓은 것처럼 이용할 수도 있어요. 핑크 핸들을 클릭하면 누르고 있던 키에 따라 하나만, 혹은 반대쪽의 패딩값을 동시에, 더 나아가 전체 패딩값을 각각 입력할 수 있습니다.
익숙해지는 데에 시간은 걸리겠지만, 툴덕후의 마음은 불타오른다2. 컴포넌트 프로퍼티 기능
이 기능... 사실 스케치를 잘 써보지 않은 저에게는 꽤 생소한 기능이었습니다. 스케치에는 비슷한 게 있다고 하더라구요.
제가 이해한 바로는 원래 자식 컴포넌트(children component)가 있을 때 그 안에 아이콘이나 텍스트 값을 바꾸거나 삭제할 때 컴포넌트의 내부를 클릭해서 하나하나 변경하고 다시 레이어 밖으로 빠져나오기를 반복했어야했잖아요? 컴포넌트 프로퍼티는 컴포넌트 안의 레이어 중에서 값(텍스트값, 아이콘 인스턴스, on&off)을 변경할 레이어를 지정함으로써 '시스템'화 시켜서, 우측의 인터페이스 패널에서 조절할 수 있도록 해주는 기능인 것 같습니다.
말로하니까 어려운데 이미지로 정리하자면 이런 것이런 설정을 하는 것은 바리언트와 비슷해보이는데요, 저도 처음 접했을 때 바리언트랑 다른 점이 무엇일까하는 생각에 머릿속이 복잡해졌고... 제가 정리한 바로는 아래와 같은 차이점이 있습니다.
이해가 어렵다구요?
청기백기로 이해하시면 쉬울 것 같아요.
Component property = 청기와 백기 중 어떤 것을 들고, 어떤 것을 들지 않을 지, 또 어떤 구조로 들지 결정
Variant = 손에 쥐고있는 청기와 백기의 모양, 색상, 크기 등을 결정
물론 두 기능 중 하나만 써야하는 것은 아니기 때문에, 먼저 컴포넌트 프로퍼티를 적용한 컴포넌트를 만들고, 해당 컴포넌트를 이용해 색상이나 효과를 적용한 바리언트를 만들면 더욱 다채로운 형태의 컴포넌트 활용이 가능할 듯 합니다. (즉, 바리언트를 만들어 새로운 색상이나 효과를 반영하더라도, 기존 컴포넌트 프로퍼티 시스템은 계속 유지된다는 뜻!)
마치며.
툴이라는 것은 정말 매력적인 듯 합니다. b2c 서비스가 수많은 개인의 일상을 바꾸는 일이라면, 툴 서비스는 수많은 개인의 일상을 바꾸고 있는 '생산자로서의 개인'의 일상을 바꾸니까요. 피그마는 개발 환경에 비해 다소 폐쇄적이었던 디자이너들의 활발한 커뮤니티를 형성하고 있다는 점에서, 또 디자인 작업을 개발자, 기획자와 함께 자유롭게 공유하면서 진행하는 프로세스를 익숙하게 만들고 있다는 점에서 수많은 디자이너들의 생각과 문화를 바꾸고 있는 훌륭한 툴이라고 생각합니다. 빠르게 발전하고 있는 피그마가 과연 다음에는 어떤 디자인 생태계에 변화를 가져올지 기대가 되곤 합니다.
피그마라는 툴에 강한 애정을 가지고 있기도 하고, 헷갈리는 것은 못 참고 넘어가는 성격이기도 해서 이런저런 일 제쳐두고 신기능을 파헤쳐보았습니다. 하지만 저도 공부하는 주니어 디자이너인 입장이라, 맞게 잘 설명하고 비유했는지 모르겠네요. 혹시 틀린 점이 있거나, 중요한 기능이 업데이트 되었지만 누락된 부분이 있다면 댓글로 지적해주시면 또 연구해서 적극 반영하도록 하겠습니다.
감사합니다~!
