UI3, Figma의 새로운 시작
피그마는 계속 사용성을 고민한다.
지난 6월 26일, Figma는 새로운 UI를 내놓았다. 이른 바 UI3.
UI3는 창의적인 비전을 실현할 수 있도록 캔버스에 공간을 마련하고, 간결하고 적응하기 쉬운 인터페이스를 표방한다.
10여년 전 첫 출시 이후로, 새로운 기능과 제품 (Figjam 등)이 많이 추가되었다. 그러나 여전히 Figma의 핵심 레이아웃은 바뀌지 않았는데, 아래와 같은 것이 있겠다.
1) 양측 사이드 패널
2) 탭 바 하단에 하이퍼 링크, 파일 이름 변경, 자르기 등의 기능 배치
Figma는 나름대로 그들의 전통과 일관성을 지켜온 셈이다.
그런 Figma가 이번에 UI를 대대적으로 개선했다.
내심 놀랍기도 했다. Figma는 UX / UI 쪽에서 꽤나 인정받은 툴인데다 유저는 (매우) 많고, 대부분의 서비스 기획 / 디자인 / 개발자가 하루에도 몇 시간을 Figma에 투자하는 만큼, 기능을 확장하거나 개선하면서도 기존 유저의 워크 플로우를 어떻게 유지시켜 줄 것이냐가 가장 큰 고민 중 하나였을 것이다.
아니나 다를까 Figma는 유저의 플로우를 유지하면서 + 복잡성을 해결하고 향후 10년을 위한 기초를 마련하고자, 세 번째 주요 변경점인 UI3를 도입하였다고 명시하고 있다.
그렇다면 UI3는 어떤 목표를 가지고, 어떻게 개선되었을까?
1. UI보다 콘텐츠를 중심으로 (Center your ideas, not Figma’s UI)
Figma의 UI보다는 콘텐츠에 좀 더 집중할 수 있게 하는 구조로 변경했다.
기존에도 인터렉티브 컴포넌트나 AI같은 추가 기능이 도입되면서 사이드 패널에 온갖 기능이 다 들어갔고, 그러다 보니 중심인 작업창에 대한 포커스가 조금 떨어졌는데, 이런 부분을 개선했다.
솔직히 창이 너무 좁게 느껴져서 작업할 땐 사이드 패널을 끌 때도 많았는데, 콘텐츠 영역을 좀 더 확보한 점이 좋다.
2. 뉴비와 전문가의 니즈를 균형있게 조정 (Balance the needs of new users and professional designers)
좀 더 직관적이고 친숙하게 만들되, 기존 사용성은 유지하는 방향으로 변경했다.
Figma를 처음 쓰는 사람에게는 Figma가 꽤 난이도 있는 툴로 느껴질 수 있다. 뭐 하나 잘못 누르면 휙휙 바뀌고 화면은 마음대로 움직이고... 그렇다고 기능을 단순화하면 사용성이 바로 떨어지니 기능은 축소하지 않고, Figma 자체의 단순화를 표방했다.
사이드 패널에 다양한 기능을 모아서 정리한 것이 하나의 예시가 아닐까 싶다. 예를 들면 정렬 기능의 위치 변경 같은 것들?
3. 변화에 적응 (Adapt to the changing nature of design)
컴포넌트 재활용이나 생성형 AI에 대응하고 있다는 말인데, 솔직히 와닿는 변화는 없었다.
4. 미래를 위한 초석 (Lay the foundation for Figma’s future)
Dev Mode 업데이트처럼 Figma Slides 같은 제품도 도입 중이다. 일종의 패밀리 프로덕트를 만들고 일관성을 유지하여 확장에 용이하게 만들려는 것 같다.
Figma 소개 페이지에서 발췌Inside Figma’s redesigned interface
Figma 팀은 수백 가지의 접근법을 고민하고, 여러 번 이터레이션을 돌리며 팀 내에서 직접 사용해보았다고 한다. 어디까지 갔나 보니, 사용자가 커서를 올릴 때만 UI가 나타나도록 하는 미니멀 UI까지도 고민했다는데사뭇 파격적이다. 패널, 속성 모든 것을 숨기고 유저와 작업물만 남는 형태다. 어떤 버전에서는 사이드 바가 나타났다 사라지기도 했다는데, 제한을 두지 않고 폭 넓게 실험했다는 것을 보면 프로덕트 팀의 권한과 자유도가 꽤 높은 것 같다.
Clearing the stage for your work
이러저러한 고민 끝에, 나온 결과물은 패널 크기 조정 기능 + 캔버스 하단의 플로팅 바에 위치한 도구 모음이다. 상단의 답답함을 줄여 개방감을 주고, UI도 원하는대로 숨길 수 있는 방식을 차용했다.
특히 우측 상단을 보면, Edit 버튼 (메뉴 ON)을 클릭하면 Done 버튼 (메뉴 OFF)으로 바뀌면서 메뉴가 나타난다.
Done 버튼 (메뉴 OFF) 클릭 시 메뉴가 사라지고 Edit 버튼 (메뉴 ON)이 나타난다.
우측 상단을 보면 메뉴가 사라진 것을 알 수 있다. 더 자세히 알고 싶다면 출처 페이지 동영상을 볼 것!플로팅 바는 아래에 있다.
처음엔 하단에 위치한 것이 너무 불편했는데, 쓰다 보니 넓은 화면의 장점이 너무 커서 이 정도 불편은 충분히 감수할 수 있을 것 같다.
사실 유저에게 기존보다 나쁜 사용 패턴이 생긴다는 게 좋은 기획은 아니라고 생각하는데, 더 큰 효용을 줄 수 있다면 '약간의 불편함을 감수하는 것이 유저 입장에서 그렇게까지 크리티컬하진 않을 수도 있겠다.'는 생각이 들었다.
Prioritizing features that matter most
또 다른 변화는 패널 재구성이다. 디자인 시스템을 사용하고 컴포넌트를 활용하는 케이스가 많아지면서, 색상이나 크기보다는 컴포넌트 관련 기능의 중요도를 더 높게 평가했다. 디자이너의 노가다성 작업을 많이 효율화했다.
더불어, 레이아웃 옵션 (Width, Height, Auto layout)을 모두 하나의 패널에 통합했다. 일반적인 도구와는 x, y, w, h 값 접근 방식이 상이하다. 하지만 기존 패턴을 고려하여 x, y 아래에 레이아웃 옵션을 배치하여 적응 난이도는 높지 않게 조정했다.
솔직히 개인적으로 제일 마음에 드는 변화다. 매번 '아 이건 위에 있지, 이건 밑에 가서 설정해야 하지.'하면서 이리저리 찾아 다니곤 했는데, 한 군데 모이니 훨~씬 편해졌다. 매우 만족스럽다.
An interface for usability, not decoration
시각적 설명력도 높였다. 기능이 늘어날수록 시각적 언어 해석이 어려워지자, 아이콘을 모두 변경해 직관성을 높였다. 입력 시 배경을 추가하고, 드롭다운에 테두리도 만들어 구분감을 주었다.
사실 유저 친화적 인터페이스라는 것이 사람마다 받아들이기 나름이기에, 해당 변경점에 대한 온도차는 있을 듯 하다.
아이콘도 모든 사람이 직관적으로 이해할 순 없고, 누군가에겐 적응이 필요한 것이라 이 변화는 사실 크게 와닿지 않는다.
피그마 디자이너 Tim Van Damme이 만든 아이콘마무리하며
어찌 보면 대대적인 개선이자 완성이지만, Figma는 UI3가 시작에 가깝다고 말한다. 새로운 토대를 마련하고, 이를 유저가 창의적으로 활용하게 해 툴 자체의 효용을 높이겠다는 포부이다.
Figma의 당찬 포부를 보니 다음 행보가 더 궁금해진다.
UI4는 몇 년 만에 나와서 어떤 부분을 개선할지, 또 어떻게 유저를 놀라게 할지 기대된다.
출처
https://www.figma.com/blog/behind-our-redesign-ui3/
