brunch

You can make anything
by writing

C.S.Lewis

by 하기로 Sep 11. 2024

대규모 피그마 UI 업데이트, 이게 최선이었을까

하기로 피그마 강의 60% 할인 소식, 오카방 오픈!!!!!!!!

피그마(Figma)는 2024년 6월에 UI3 업데이트를 진행했습니다. 이번 업데이트는 디자인 작업의 효율성을 높이기 위한 것으로, 속성 패널이 더 직관적이고 사용하기 쉽게 재구성되었습니다. 레이아웃, 위치, 컴포넌트 속성 등이 더 명확하게 정리되었으며, 복잡한 컴포넌트 작업을 더 쉽게 처리할 수 있도록 개선되었습니다. 이 업데이트의 주요 의도는 사용자 경험을 단순화하고, 다양한 워크플로우를 지원하여 사용자들이 더욱 창의적으로 작업할 수 있도록 돕는 것입니다.


라고 하는 것이 피그마, 정확히는 지피티의 말씀입니다만!!


이번 업데이트는 저의 20년 디자인 역사상, 개인적으로 가장 짜증 나는 ui 업데이트였습니다. 어도비 포토샵 시리즈처럼 새롭고 강력한 기능이 추가된 것도 아니고, 기존에 있던 기능이 도무지 알 수 없는 그들만의 기준으로 재편집되었기 때문입니다. 


강제 업데이트가 진행되고, 완전히 바뀐 UI를 바라보며 직관에 의한 추측은

"예뻐 보이기 위해 바꿨구나"

"경쟁사를 의식했구나" 

였습니다.



합리적 의심의 근거는 첫째,

인터페이스 패널을 띄우는 디자인을 시도한 것입니다. 전문용어로 패딩값을 줬다고 하는데요 ㅎㅎ


디자이너가 

"새롭게 바꿔볼 것 없나, 우리가 업데이트했다고 누구나 인지할만한 새로움 없나"

라는 생각이 들 때 패딩 변경을 시도합니다. 일단 새롭고, 동글동글 라운딩이 들어간 인터페이스는 첫눈에는 귀여워 보이니까요. 

바뀐 인터페이스
기존 인터페이스


제 눈에는 띄운 간격 사이로 보이는 비주얼들이 상당히 거슬립니다. 무엇보다도 의미 없이 죽어버린 공간은 왼쪽 패널을 넓게 써야만 하는 전문 디자이너들에게는 아쉬울 수밖에 없습니다. ('전문 디자이너'라고 굳이 언급한 이유는 밑에서 풀어볼게요)




큰 변화의 두 번째로, 중앙 하단에 상단 왼쪽의 패널이 들어왔습니다.


이 선택도 의문입니다.  

저 메뉴들은 대부분 단축키를 쓰는 메뉴들이라 굳이 저 자리에 있어야 할 이유가 없기 때문이죠. 특히 저처럼 맥북으로 디자인하는 사람에게는 걸리적거리고 짜증스러운 요소만 될 뿐입니다. 굳이 유추하자면 상단바 ui를 "더 예쁘고 심플하게 하고 싶다" 니즈로 시작하여, "피그잼도 아래에 있으니 두 제품에 동일한 경험을 주면 어떨까?"로 설득되지 않았을까 하는 생각이 듭니다. 



왼쪽 : 변경 후 / 오른쪽 : 변경 전

이번 업데이트의 가장 큰 불만은 직관적으로 바꿨다는 '속성 패널'인데요. 지피티가 말하는 '속성'이 정확히 어떤 의미로 사용된 건지는 알기 어렵네요. 피그마에서 쓰는 속성 개념은 컴포넌트와 연관이 있기 때문에 '컴포넌트 패널'이라 생각하고 글을 전개하겠습니다. 


중앙에 있던 컴포넌트 패널이 상단으로 올라갔습니다!!!!


솔직히 "와 이건 미친것 아니냐!"라는 탄성이 나왔습니다.


저기까지 손을 뻗어야 한다고???????????????????


한국의 일개 디자이너가 UI를 선도하는 피그마 디자인 집단의 의도를 정확히 알 수는 없겠죠. 있다면 누가 좀 알려줬으면 좋겠고요... 각설하고, '논리'로 그룹핑을 하면 왼쪽 개선안처럼, 컴포넌트를 클릭했으니 컴포넌트가 제일 위에 나와야지 -라는 가설이 '타당하다'라고 설득될 수 있겠습니다만!


직관적으로 생각한다면

컴포넌트를 클릭했으니, 컴포넌트 속성을 변경하고 싶다는 니즈일 것이고, 그럼 제일 손이 빨리 가는 위치에 놓자 = 기존 인터페이스


굳이 굳이 리소스를 투여해서 (더 불편하게) 바꾸지는 않았을 겁니다. 





좌 : 개선 후 / 오 : 개선 전


다음으로 불평불만을 터뜨려 볼 패널은 오토 레이아웃입니다. 

언뜻 보시기에는 왼쪽이 둥글둥글 귀엽고 사용자 친화적이네,라고 판단하실 수 있을 것 같습니다. 여러 정황상 바로 그 '느낌'을 추구하는 게 이번 업데이트의 숨은 의도라고 저는 감히 추측하고 있어요.


왼쪽 패널의 문제는 '얼핏 보면' 그룹핑이 잘 되어 보이지만,

'얼핏 봤을 때도' 오른쪽보다는 '복잡'해 보입니다. 시각적으로 더 많은 디자인 요소들이 들어가 있기 때문이죠. 배경 박스, 화살표, 복잡하고 의미도 모르겠는 우측 상단의 아이콘, 아래위로 추가된 (정확히는 위치가 옮겨진) 기능 등.


오토레이아웃에도 width / hight를 한 곳에서 설정할 수 있는 기능을 시도했지만, 오토 레이아웃 특성상 이 기능은 잘 활용되지도 않을뿐더러 현재는 버그가 계속 발생하여 너어어무 불편합니다. 수평 / 수직 오토 레이아웃 변환이 원할이 되지 않고, 내부 컨테이너 사이즈가 fill로 적용되는 경우도 왕왕 발생해서 버그 대잔치 중이네요.  



원래는 이렇게 프레임을 컨트롤할 수 있는 패널과 오토 레이아웃 패널이 심플하게 분리되어 있었습니다. 위치도 변경되지 않고 고정이었고요. 지금은 프레임 패널의 위치가 위 아래로 상황에 따라 변경이 됩니다 ㅎㅎ (이 경우는 또 논리적 선택을 안 함;)  여하튼 애초에 나눠져 있는 기능을 굳이 합치려다가 버그가 발생하는 대환장 파티가 발생한 것으로 추측됩니다. 만약 이게 버그가 아니라면 더 심각한 상황입니다.




좌 : 피그마 / 우 : 크레이티



자, 이제 피그마가 왜 이런 결정들을 했을까?

합리적 의심을 해보는 시간입니다.


경쟁사 creati의 출현이 그들에게 위기의식을 불러일으킨 것 아닌가,라는 의심인데요.

크레이티의 ui 패널은 (물론 피그마를 싹 다 베꼈지만) '예쁘게' 베꼈다는 인상을 주고 있어요. 동글동글하고 귀엽고 산뜻한 컬러링을 기본으로 깔고, '강력하다'는 ai 기능을 무기 삼아 바이럴이 되었습니다. ai 활용해서 디자인 좀 해볼까? 하는 비 디자이너 층이 크레이티로 상당수 몰려간 듯합니다. 


저도 크레이티의 ai 기능을 써 보긴 했지만


1. 유의미한 강력한 편리함 없음

2. 나는 저 박스형 인터페이스가 거추장스럽고 싫다

3. 굳이 잘 쓰던 거 놔두고 다른 ui 도구를 쓰고 싶지 않다.


피그마 짱! 하고 한 눈 팔지 않고 돌아왔는데

바로 저 박스 ui를 베끼는 = 후발주자를 따라한 것입니다.

왜냐? 디자이너 집단은 알아서 팔로우 할테고

새로 유입되는 비디자인 유저들을 뺏기면 안되겠다고 생각했겠죠~?


(이 글의 내용은 모두 제 주관적 추측이며 뇌피셜입니다) 










사실 저는 툴에 대한 관심이 그리 높은 편이 아닙니다.

뭐가 업데이트되었는지 별로 관심이 없고, 업데이트되면 금방 적응해서 쓰는 타입이고요. 툴에 대한 글도 별로 쓰고 싶지 않지만 구독자님이 제일 좋아하는 콘텐츠라 가끔씩은 써야겠다는 의무감을 갖고 있을 뿐입니다 ㅋㅁㅋ


그럼에도 불구하고 이 글을 써야 하는 이유는 명료했습니다.


바로 제 피그마 강의를 

더 이상은 팔 수 없겠다는 

슬픈 깨달음 때문이죠!!!!!!!!!!


ui가 적당히~~~ 변경되어야 하는데

저도 헤매고 있을 정도니

제 강의를 들으실 분들이 얼마나 답답하실까..


강의를 그냥 내려야 하나.

고민을 했지만


강의를 내리기에는 피그마 외적인 내용도 많고,

너무 아깝고

결국 본질은 동일하기에


가격을 낮추기로 했습니

60% 대폭 세일.

https://www.udemy.com/course/hagiro_figma/?referralCode=11E9840B9E02F4488864


초초 할인가로 제 강의가 너무너무 궁금하신 분들만

사 주시면 감사하겠습니다 :))









오카방을 오픈했습니다.

uiux / 피그마 / 사이드 프로젝트 주제로 대화 나누고 싶은 분들 참여해 주세요! 





브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari