Figma Config 2022
피그마 컨퍼런스 정보 요약&후기
저는 평소에 다양한 툴을 사용하고 분석하는 것을 좋아하는데 최근에는 프레이머의 행보에 매우 긍정적으로 생각하여 높은 관심을 가지고 있었습니다. 그런데 이번 Figma Config 2022를 보고 역시 Figma가 아직까지는 가장 핫한 툴이구나라는 생각을 하였습니다.
또한 이번 컨퍼런스에서는 트위터나 유튜브를 통해 홍보하며 Name Badge 이벤트를 통해서 피그마 자체 커뮤니티를 활성화시키고 유저들에게 다양한 재미를 선사하며 컨퍼런스의 기대를 높였습니다.
이번 컨퍼런스의 가장 큰 핵심은 바로 다크 모드와 새로운 컴포넌트 시스템, 더욱 실용적으로 바뀐 Auto Layout 기능이 주된 내용이었습니다. 피그잼에 관한 업데이트 내용도 많이 있었지만 저는 피그마의 주요 업데이트 사항들에 대해서만 소개해드리려 합니다.
드디어 다크 모드
많은 유저들이 바라던 다크 모드 설정이 드디어 적용되었습니다. 사실 다크 모드가 누군가에게 굉장히 쉬워 보이지만 생각만큼 단순한 작업이 아닙니다. 색상의 채도만 반전시키게 아닌 여러 컬러들의 적절한 대비를 적용해야 하며 너무 어둡지도 너무 밝지도 않은 적절한 대비가 이루어지도록 섬세한 작업이 필요합니다.
가끔 다크 모드가 적용된 앱들을 볼 때 단순히 컬러 반전을 주어서 색상대비가 너무 강하거나 또는 너무 약하여 가독성이 떨어지는 앱들을 볼 수 있었는데 피그마는 완전 블랙을 사용하지도 않고 아직까지는 매우 안정적인 다크 모드를 적용했다고 생각합니다.
컨퍼런스 업데이트 팝업에서 바로 다크 모드를 적용할 수 있지만 그냥 지나치신 분들은 위의 Figma Menu → Preferences → Theme에 들어가셔서 원하는 설정으로 변경하실 수 있으니 다크 모드를 체험해보시고 싶은 분은 해당 경로를 통해서 테마를 설정하시기 바랍니다.
새로운 Auto Layout
이번 Config 2022에서 가장 많은 변화가 적용된 것은 바로 Auto Layout 옵션이었습니다. Auto Layout은 매우 간편한 기능이지만 기존의 여러 가지 제약들로 프레임을 여러 겹으로 사용해야 하는 불편함이 있었는데 이번 업데이트를 통해 어느 정도는 해소된 것 같다고 생각하였습니다.
Canvas Control
사실 이전에 Auto Layout Panel에서 값을 설정하는 것도 그렇게 불편하다고 생각하지 않았는데 이번 업데이트로 더욱 간편하고 빠르게 값을 설정할 수 있도록 변경되었습니다. 단축키를 통하여 설정하거나 프레임에서 직접 간격을 설정할 수 있으며 기존과 같이 패널에서도 직접 수정이 가능하여 더욱 빠르게 Auto Layout을 설정할 수 있습니다.
이제는 위의 이미지처럼 Frame에 Auto Layout 영역이 표시되어 커서를 활용하여서 직접 수정이 가능합니다. 또한 패널에서 Fixed, Filled Contents, Hug 콘텐츠 설정 부분이 상단에 Position Pannel로 이동하였습니다.
Frame에서 직접 수치를 설정하는 방법으로는 표시되는 바를 드래그하여서 수치를 조절하는 방법과 분홍색 바를 클릭하여 해당 위치에 뜨는 수치 값 입력 폼에 수동으로 입력하는 방법입니다.
그리고 단축키를 활용하여 더욱 빠르게 설정할 수도 있게 되었습니다. option(alt) 키와 동시에 드래그하면 마주하는 면의 수치도 동시에 조절이 되고 option(alt)+Shift 키와 동시에 드래그 시에는 모든 면을 동일하게 변경이 되어 보다 빠르게 수치를 수정할 수 있도록 변경이 되었습니다.
Canvas stacking order
기존에 Auto Layout의 가장 아쉬운 부분이 제일 하단의 레이어를 화면상에서 Y축 최상단으로 보낼 수가 없다는 점이었습니다. Layer Pannel에서의 순서는 X축의 값만 변경이 가능하기 때문에 이러한 문제를 해결하기 위해서는 Auto를 해제하고 직접 설정해야 했습니다.
하지만 이번 업데이트로 Y축의 최상단에 무엇부터 배치할 건지를 설정하는 옵션이 업데이트되어 굳이 Auto를 해제하지 않고 순서를 변경할 수 있어 더욱 다양하게 Auto Layout을 설정할 수 있게 되었습니다.
Text Base line alignment
이 기능은 기존에 Auto Layout의 가운데 정렬 방식의 한계를 개선한 업데이트입니다. 이와 같은 옵션은 국문과 영문을 같이 사용할 때 매우 효과적인 기능입니다. 일반적으로 텍스트 스타일을 지정하게 되면 높이값을 지정하게 되어 모든 폰트의 높이가 제각각이다 보니 수치상으로는 센터이지만 텍스트의 정렬이 맞지 않아 텍스트 위에 프레임을 씌워서 설정하였는데 이런 번거로움을 가지고 있었습니다.
위의 이미지처럼 숫자는 Roboto 텍스트는 Noto Sans의 경우에 Auto Layout 설정을 하게 되면 텍스트 정렬이 맞지 않아서 텍스트의 높이를 수동으로 수정하거나 프레임을 씌워야 했지만 이제는 Baseline 정렬 옵션을 통해 이와 같은 문제를 해결할 수 있습니다.
다만 한 가지 아쉬운 점은 소수점으로 떨어지게 되며 정확히 일치하지 않는다는 점이 있습니다. 그리고 Config영상에서는 아이콘과 텍스트 예시로 설명을 하였는데 실제로 설정이 되지 않는 것으로 보아 Fonticon을 사용한 것으로 예상됩니다.
Absolute Position
Absolute Position 기능은 같은 Container에 속하지만 동위 요소에서 무시되어 원하는 위치에 정확히 배치할 수 있는 기능입니다. CSS를 조금 공부하신 분이라면 이해가 빠를 수 있는데 CSS에서는 같은 Container에서 하나의 요소는 Relative라는 부모 속성을 주고 다른 하나는 Absolute라는 자식 속성을 부여해 자식 속성의 요소를 부모 속성 위로 띄울 때 사용됩니다.
아이콘 위에 카운트 배지나 뉴 배지를 올릴 때 이러한 CSS가 주로 사용되는데 이런 기능을 그대로 피그마에 적용한 것입니다. 위의 이미지처럼 Auto Layout으로 설정된 프레임에 배지 요소를 추가하면 Padding 값이 그대로 적용되어 자유로운 이동을 위해서 프레임을 한 겹 더 씌워서 설정해야 했지만 이제는 Absolute 설정만으로 해결이 가능합니다.
Absolute를 설정하는 방법으로는 우측의 Position Panel에서 Absolute position 버튼을 클릭하게 되면 설정이 적용되며 해당 기능이 설정된 요소는 Layer Panel에서 다른 아이콘 모형으로 표시됩니다. 그리고 Absolute 설정을 하게 되면 자연스럽게 부모 속성의 크기에 따라서 위치가 이동하므로 해당 요소의 핀 위치를 정확하게 설정해야 합니다.
Stroke values included
이 기능은 Hand off에서 유용한 기능입니다. 테두리 값을 프레임의 영역에 넣을 것인가 아니면 포함하지 않을 것인가를 설정하는 기능입니다. 이 기능이 없었을 때는 수동으로 프레임을 스트로크를 제외한 영역으로 설정하여 영역을 잡고 만약 프레임에 다른 요소가 추가되면 영역을 재설정하는 번거로움이 있었는데 이러한 불편함이 해소되는 기능이었습니다.
또한 테두리를 원하는 위치에만 설정하는 옵션이 추가되었습니다. 이런 옵션의 장점은 이전에는 Divider Line을 추가하기 위해서 Rectangle 또는 Path를 추가하여 Divider Line을 추가하였는데 이제는 프레임의 스트로크를 원하는 위치에만 추가하는 옵션으로 간편하게 Divider Line을 추가할 수 있게 되었습니다.
업그레이드된 컴포넌트
Component Properties라는 기능이 업데이트되면서 컴포넌트의 활용도가 더욱 높아졌습니다. 이전의 Variants Properties 기능의 단점을 보완하여 마치 프레이머나 스케치처럼 컴포넌트의 가변적인 요소들을 드롭다운이나 토글 버튼으로 손쉽게 제어하도록 보완한 Component의 새로운 기능입니다.
사실 이전에 Variants Properties 기능을 실제 프로젝트에 적용하였을 때 하나의 요소를 변경하면 모든 인스턴트들이 초기화되는 버그가 존재하였고 공식 커뮤니티에서도 이와 같은 문제점을 호소하는 디자이너들이 많이 있었습니다. 실제로 확인해보니 이와 같은 문제들이 해결된 것으로 보아 아마 구조적인 문제로 Variants Properties와 Component Properties로 구분하여 이와 같은 문제를 해결한 것으로 보입니다.
Component Properties는 가변으로 설정하고 싶은 요소의 Apply Property 버튼을 클릭하고 이름과 값을 설정해주면 Property Pannel에서 드롭다운이나 토글 또는 텍스트를 직접 입력하여 변경할 수 있습니다. 그리고 기존처럼 프레임에서 직접 눈을 끄거나 텍스트를 입력할 수도 있습니다.
기존과 같이 프레임 내에서도 직접 수정이 가능한데 굳이 왜 패널에서 설정하는 기능이 나왔냐를 생각해보면 우리가 작업하다 보면 여러 개의 컴포넌트를 동시에 바꿔야 하는 경우에는 패널에서 바꾸는 것이 좀 더 효율적이기 때문입니다.
위의 이미지와 같이 두 개의 버튼 컴포넌트 내의 텍스트를 변경할 때 프레임 내에서 변경하면 일일이 바꿔야 하지만 변경할 요소들을 모두 선택하고 패널에서 변경을 하면 모든 요소를 동시에 변경이 가능합니다.
Variant Properties와 Component Properties는 어떤 차이가 있냐 하면 크게는 Interactive Animation을 구현 유무와 다른 사이즈, 컬러, 스타일로 변경유무 등이 있는데 이런 사항은 위의 표를 참고 부탁드립니다. 저는 Primary와 Secondary의 구분은 Variant Properties를 활용하여 Interactive도 사용할 수 있게 설정을 하고 아이콘의 On/Off 기능은 Component Propertie 기능을 활용하는 것을 괜찮지 않을까 생각합니다.
Variable Fonts (가변 서체)
Variable Fonts 기능은 가변 글꼴을 지원하는 서체에 한에서 더욱 섬세하고 다양하게 폰트를 변경할 수 있는 기능입니다. 일단 Font Weight와 Font Width를 보다 섬세하게 조절할 수 있으며 아직 지원하는 서체는 못 찾았지만 Optical size도 자유롭게 설정이 가능합니다.
SF Pro 나 Noto Sans 같은 서체들에서는 가변 글꼴이 적용되지 않아 적용이 불가능하며 실제로 확인되는 폰트는 Roboto, Inter 등 몇 가지 폰트 정도에만 기능을 지원하는 걸로 확인하였습니다. 자세한 사항은 하단의 Figma Support 페이지 링크를 통해 확인 바랍니다.
영상에서는 소개되지 않았지만 텍스트 박스 유형에서 지정한 사이즈를 넘어가면 말줄임표로 구현되는 기능도 새롭게 생겼습니다. 기존에는 프레임에 씌워서 Clip content 옵션을 설정해야 했는데 이제는 굳이 프레임을 씌우지 않고도 텍스트를 영역 안에서만 표시할 수 있어 매우 편리한 기능 중 하나라 생각하였습니다.
https://www.figma.com/typography/variable-fonts/
Spolight (호출 기능)
여러 명이서 디자인할 때 서로 간의 소통은 매우 중요한데 새롭게 생긴 Spolight 기능은 그런 소통을 더욱 강화시켜주는 기능입니다. 같은 파일 안에 있는 누군가를 호출할 수 있으며 자신의 화면을 따라다니게 만들 수 있는 옵션이어서 더 이상 다른 메신저를 통해서 상대방을 부르지 않아도 되는 기능입니다.
아쉬운 부분이 있다면 실제 사용해보니 같은 파일 내에 접속해 있을 때만 호출이 가능하여 같은 파일에 없다면 여전히 다른 메신저를 통해 호출해야 했고 특정 인물을 지정하여 호출할 수 없다는 점도 조금 아쉬웠던 부분이었습니다.
2022 Config 후기
소개해드린 기능 외에도 더욱 강력해진 프로토타입 기능과 프로 버전 이상에서는 프로토타입을 URL로 전달 시 Password를 설정하여 자신이 원하는 유저들에게만 프로토타입을 공개할 수 있는 보안 기능도 강화되었었습니다. 프로토타입의 업데이트에 대한 자세한 이야기는 지금 프로토타입에 관한 글을 준비 중이어서 해당 글에서 더욱 자세히 풀도록 하겠습니다.
저는 많은 사람들한테 피그마의 장점을 말할 때 디자이너가 원하는 것을 정확하게 파악하고 빠르게 반영하는 점을 말합니다. 이번 콘퍼런스에서도 다크 모드나 컴포넌트 시스템 개선과 같은 사항으로 이러한 장점을 느낄 수 있음과 동시에 왜 피그마가 지금의 자리에 오게 될 수 있는지를 확인할 수 있었습니다.
사실 불과 1~2년 전만 해도 피그마는 그냥 떠오르는 툴이었고 피그마 자체를 모르는 사람이 많았으며 다수의 디자이너들은 스케치를 사용해왔습니다. 하지만 스케치는 여전히 macOS에서만 작동하는 고집을 부리고 있으며 버전 간의 호환 문제 등 여전히 사용자들의 목소리를 듣지 않고 자신들만의 고집으로 많은 사용자들이 피그마나 프레이머로 갈아타게 되는 결과를 가지고 오게 됐다고 생각합니다.
다만 작년 콘퍼런스의 피그잼이나 모바일앱 같은 놀라운 업데이트라기보단 기존의 기능들을 보안했다는 느낌의 컨퍼런스였습니다. 최근 프레이머는 Framer Site라는 새로운 기능을 발표하였고 Protopie는 5월 30일부로 일부 무료를 선언하는 등 다른 툴들이 무서운 속도로 성장하고 있기 때문에 피그마 또한 더욱 새로운 기능과 아직도 해결되지 않은 다국어 타이핑 문제가 빠르게 해결해야 지금의 자리를 지킬 수 있지 않을까 라는 생각을 하였습니다.
https://config.figma.com/events/figma-config-2022/home
