6월 21~22일 동안 프로덕트 디자인 분야에서 가장 핫한 이벤트 중 하나인, 피그마의 Config 2023이 진행되었는데요. 이번 Config에서는 피그마의 여러 새로운 기능들이 공개되었습니다. 정말 다른 툴이 되었다고 할 수 있을 정도로 많은 기능들이 출시됐는데요. 새롭게 업데이트된 기능들을 한 번 쭉 살펴봅시다. ![4yvlhmvjm-config2023.gif](https://codeit-assets.s3.ap-northeast-2.amazonaws.com/tutorials/73/4yvlhmvjm-config2023.gif) 출처: https://config.figma.com/ UI 디자인 관점에서는 크게 4가지 정도의 변화가 있었어요. - 더 강력해진 오토 레이아웃 - 베리어블 기능 - 변수를 바탕으로 한 조건부 프로토타이핑 - 폰트 미리 보기 --- # 1. 오토 레이아웃 가장 눈에 띄는 변화 중 하나는 기존의 오토 레이아웃 기능의 변화인데요. 여기 소개 영상을 한 번 보면, 대략 어떤 것들이 생겼는지 확인이 가능합니다.
## Wrap 기능 추가 먼저 기존의 오토 레이아웃 기능에서는 프레임 내부의 요소들이 가로 혹은 세로로 쭉 뻗어나갈 수밖에 없었는데요.

새롭게 추가된 Wrap 속성을 통해, 이제는 오토 레이아웃 프레임의 너비를 넘어서는 콘텐츠는 자동으로 다음 줄로 넘어가게끔 설정할 수 있게 되었습니다. 이제는 위의 사진처럼 화면의 크기를 넘어가는 요소들을 간단하게 넘김 처리하거나, 또 여러 콘텐츠들을 보다 쉽게 그리드 형태로 정렬할 수도 있게 된 것이죠. ## 높이와 너비의 최댓값 지정 가능 또 오토 레이아웃이 적용된 프레임, 혹은 내부 요소들은 각각의 높이와 너비가 일정 크기 이상, 혹은 이하가 되지 않도록, 최댓값이나 최솟값을 설정해 줄 수도 있게 되었는데요. ![4bm6bkncv-image.png](https://codeit-assets.s3.ap-northeast-2.amazonaws.com/tutorials/73/4bm6bkncv-image.png) 예를 들어 오토 레이아웃이 적용된 프레임에 최대 너비를 설정해 주면, 프레임의 크기를 마우스로 직접 늘리더라도 최대 너비 이상으로는 너비가 늘어나지 않게끔 고정이 됩니다. --- # 2. 베리어블 (Variables) 베리어블이라는 기능은 이번에 피그마에서 새롭게 출시한 기능인데요. 이름에서도 어느 정도 유추할 수 있듯이, 특정 수치를 변수 안에 담을 수 있는 기능입니다. 베리어블을 만들게 되면, 그 안에는 색상값이나, 숫자, 텍스트, 혹은 True/False로 이루어진 Boolean 값을 담을 수 있는데요.

이걸 잘 활용하면 스타일 기능처럼 특정 컬러에 이름을 붙여서 저장할 수 있을 뿐만 아니라, 요소 간의 간격을 저장해서 사용하거나, 여러 언어 지원, 라이크/다크 모드 전환, 여러 화면 크기 대응까지, 일일이 새로운 프레임을 만들지 않고도 작업이 가능해지죠. ![cnej3agzf-image.png](https://codeit-assets.s3.ap-northeast-2.amazonaws.com/tutorials/73/cnej3agzf-image.png) --- # 3. 프로토타이핑 피그마의 프로토타이핑 기능에도 많은 변화가 있었는데요. ## 조건부 프로토타이핑 지금까지는 실제 서비스처럼 동작하는 프로토타입을 만들려면, 사용자가 맞닥뜨릴 수 있는 모든 경우에 대해 프레임을 만들어야 했습니다. 그래서 막상 프로토타입을 만들어보면, 이런 식으로 엄청나게 꼬여버린 프로토타입들이 생겨났었는데요. ![u2ol95w11-image.png](https://codeit-assets.s3.ap-northeast-2.amazonaws.com/tutorials/73/u2ol95w11-image.png) ![kh7vxp0cj-image.png](https://codeit-assets.s3.ap-northeast-2.amazonaws.com/tutorials/73/kh7vxp0cj-image.png) 이제는 프로토타입에서 특정 조건(if)을 만족했을 때 특정 행동이 실행되고, 다른 조건(else)에서는 다른 행동이 실행되도록 해 주는, 조건(Conditional)을 추가할 수 있게 됐습니다. ![9kq2w6cez-image.png](https://codeit-assets.s3.ap-northeast-2.amazonaws.com/tutorials/73/9kq2w6cez-image.png) 이렇게 조건을 만드는 기능과 베리어블 기능을 함께 사용하면, 모든 경우에 대해 일일이 프레임을 만들지 않고도 사실적인 프로토타입을 만들 수도 있고, 또 기존에는 할 수 없던 프로토타입도 만들 수 있게 됩니다. 예를 들어 장바구니에 상품이 있는지 없는지에 따라 UI를 다르게 보여준다거나, 특정 상품의 개수를 높이는 버튼을 눌렀을 때 총 가격을 높이는 등의 프로토타입을 만들 수 있게 되는 것이죠. ## 팝업 형태의 프리뷰 창 또 원래는 프로토타입을 보려면, 꼭 새 탭을 통해서만 볼 수 있었는데요. 이번에 인라인 프리뷰(inline-preview)라고 해서, Figma 작업창 안에서도 프리뷰 화면을 띄워서 실시간으로 작업할 수 있는 기능이 생겼습니다. ![x8kybmrow-image.png](https://codeit-assets.s3.ap-northeast-2.amazonaws.com/tutorials/73/x8kybmrow-image.png) 단축키 `Shift` + `Space` 키로 새로운 인라인 프리뷰를 열 수 있으니까, 직접 한 번 써 보세요! --- # 4. 텍스트 피그마 내의 텍스트 요소들에 대해서도 사소한 변화들이 있었는데요. ## 폰트 미리 보기 이제는 텍스트에 폰트를 적용하기 전에 어떻게 생겼는지 확인이 가능합니다. ![fiw8wpl49-image.png](https://codeit-assets.s3.ap-northeast-2.amazonaws.com/tutorials/73/fiw8wpl49-image.png) ## Text Truncate 기능 또 그 동안에는 텍스트가 영역을 벗어나면 그냥 잘려서, 넘어가는 텍스트에 대해 일일이 … 처리를 했어야 했는데, 이제는 이것도 설정해 주면 자동으로 적용됩니다. 이걸 예를 들어 오토 레이아웃이 적용된 컴포넌트 같은 곳에서 사용하면 텍스트가 깨지는 문제도 훨씬 수월하게 처리할 수 있겠죠? ![3fi995tx4-truncate.gif](https://codeit-assets.s3.ap-northeast-2.amazonaws.com/tutorials/73/3fi995tx4-truncate.gif) --- # 개발자 모드 이번 컨퍼런스에서는 피그마는 단순히 UI 디자이너들만을 위한 툴이 아닌, 제품이 만들어지는 과정 전반에서 사용하는 툴로 확장하고자 하는 의지를 보여줬는데요. 그의 일환으로 피그마를 사용하는 개발자들을 위한 `개발자 모드(Dev Mode)`라는 기능을 공개했습니다. 이번 튜토리얼에서는 다루지 않았지만, 궁금하신 분들을 위해 Dev Mode의 티저 영상과 튜토리얼 영상을 첨부해 드릴게요. ## 소개 영상 ## 사용법 영상