UIUX 제작툴 Figma 리뷰 - UX 기획 서요한

# UI/UX 제작툴 Figma 리뷰 ## Figma 소개 얼마 전부터, Figma를 이용해서 UI/UX를 제작할 일이 많이 생겼습니다. 저희만 그런가 해서 둘러보았더니, 당장 해외 기업 중에서도 Figma를 사용하는 기업이 많이 늘었더라고요. > Notion, Dribbble, Zoom, AirBnB, GitHub, Uber, Microsoft... 게다가, 다른 툴과 결합하여 생산성을 극대화하기도 합니다. > Slack, Jira, Trello, Dropbox, Notion, Zeplin, Framer, Protopie 기존에 저희는 XD와 스케치를 사용해서 UI/UX를 제작하고는 했습니다. 그리고 더 전에는 파워포인트만으로 UI를 그리며, 전통적인 **화면정의서**를 작성하기도 했죠. UX는 화면정의서를 기반으로 **에프터이펙트**를 사용해서 그리는 경우가 대부분이었지만, 최근에는 [프로토파이](https://mets.co.kr/m-lab/ux/real-prototype-with-protopie/6900/)를 주력으로 사용하고 있습니다. 하지만 이렇게 작업을 하다보니, **협업**이라는 측면에서 매우 힘들었습니다. 프로토파이(_.pie)나 XD 문서(_.xd)을 주고받거나, [Zeplin](https://zeplin.io/)을 사용해서 UI를 공유한다는 업무 흐름은 그리 크게 변하지가 않았어요. 결국 PM이 하나하나 확인해서, [Gantt 차트](https://instagantt.com/)에 진행현황을 기록해야 했습니다. ![[Pasted image 20250206210823.png]] **Gantt 차트 예시(중요 정보 가림처리함)** 또한, UI를 제작해서 제공하더라도, 결국 **문서화**라는 장벽은 피해갈 수가 없었죠. 그래서 이 과정을 간소화하고자 Figma를 적용하고, 그 과정에서 느낀 점을 장단점 위주로 공유해보고자 합니다. ## **Figma의 장점** ### **실시간 동기화** 사실 이 부분이 Figma를 선택한 가장 큰 이유입니다. XD나 Sketch 또한 버전 관리가 가능하고, 실시간 동기화 또한 불가능하지는 않습니다. 다만 불편할 뿐이죠. XD/Sketch는 GitHub에 비유하면, **하나의 Branch에서 모든 업무가 이루어진다**라고 볼 수 있습니다. 예를 들어 XD를 이용해서 협업을 진행한다고 하면, 협업중인 누군가가 파일을 수정 후 저장할 때마다 나의 PC에서 해당 파일을 동기화하는 과정이 필요하게 됩니다. 게다가 같은 화면을 수정중인 경우에는 충돌이 발생해서 나 아니면 협업자의 수정사항이 삭제되는 경우도 많죠. ![[Pasted image 20250206210914.png]] **Github Branch 예시 |** [Git SCM](https://git-scm.com/book/ko/v2/Git-%EB%B8%8C%EB%9E%9C%EC%B9%98-%EB%B8%8C%EB%9E%9C%EC%B9%98%EC%99%80-Merge-%EC%9D%98-%EA%B8%B0%EC%B4%88) 이에 반해, Figma에서의 협업은, 구글 문서도구(Google Docs)를 생각하면 됩니다. 내가 특정 위치나 화면을 수정하고있으면, 협업자의 화면에는 내 마우스의 위치나 선택한 프레임, 에셋 등이 표시됩니다. ~~내가 딴짓하면 들통나요~~ 이렇게 클라우드를 통한 실시간 동기화는 정말 막강합니다. > Figma 클라우드는 SaaS(Software as a Service)인 이상, Figma의 서버가 작동하지 않으면 모든 업무가 중단될 수도 있습니다. 이 점에는 유의하세요. ### **XD와 스케치의 사용성** Figma는 저희에게 있어 "새로운 툴"에 해당했습니다. 기존에 잘 사용하던 툴을 버리고, 새로운 툴에 새롭게 적응해야 한다는 뜻이었죠. 그나마 다행인 점이라면, **그래봤자 거기서 거기**라는 사실입니다. 아무리 새롭다지만 결국 아트보드에 UI를 그리는 기능을 갖춘 툴이고, 기존에 XD나 스케치에서 사용하던 기능을 (거의) 동일하게 사용할 수 있었죠. 하지만 이뿐이라면 저희는 Figma를 도입하지 않았을 것입니다. 컴포넌트 단위로 버튼이나 공통화면(상단바, 프로필, 콘텐츠 등)을 관리하거나, 공통 에셋을 적용하여 협업 시 재사용 및 일괄 수정이 가능하며, 플러그인을 사용하여 표 그리기나 페이지 번호 입력 등을 일괄 처리할 수 있습니다. 사실, 여기까지는 XD나 스케치, 그 외에 수많은 UI 제작 툴에서도 지원하고 있는 기능이죠. 하지만 Figma는 여기서 멈추지 않고, 더 나아가, 생산성 향상을 위해 치열하게 고민한 흔적을 드러냅니다. ![[Pasted image 20250206210932.png]] **Figma로 정보구조 그리기** Figma에서는 [오토 레이아웃](https://help.figma.com/hc/en-us/articles/360040451373-Create-dynamic-designs-with-Auto-layout)을 통해 컴포넌트 순서와 위치를 변경하면서도 구조가 깨지거나 겹치는 부작용을 피할 수 있습니다. 그리고 여기에 반응형 설정을 적용하면, [웹 12 Grid](https://www.w3schools.com/css/css_rwd_grid.asp) 같은 복잡한 작업도 간단하게 처리할 수 있죠. 제한적이긴 하지만 Figma의 API나 플러그인을 사용해서 React 코드의 적용 및 추출도 가능합니다. 그리고 이렇게 제작한 UI를 Figma의 Inspect 기능으로 살펴보면, [CSS flex](https://developer.mozilla.org/ko/docs/Web/CSS/flex) 속성이나 정렬 방향 등도 확인이 가능하죠. 이 오토 레이아웃 기능 하나만으로도 Figma를 추천할 수 있습니다. ### **브라우저 기반 툴** 앞에서 짧게 언급하기는 했습니다만, Figma는 구글 문서도구와 유사한 클라우드 기반 협업툴입니다. 그말인즉슨, 사용을 위해 특정 프로그램이 필요하지 않고, 웹브라우저에서 즉시 사용이 가능하다는 뜻이죠. XD는 업데이트를 거치며 점차 무거운 툴이 돼가고있고, 사용을 위해서는 먼저 Adobe CC부터 시작해서 꽤 많은 프로그램을 설치해야 했습니다. 게다가 프로그램 버전이 낮으면 업데이트 이후에야 파일을 열 수 있게 되기도 합니다. 심지어 스케치는 맥으로만 실행이 가능한 앱이므로, 이미지는 Zeplin으로 주고받는 방법이 가장 빨랐습니다. 스케치 파일을 XD나 프로토파이로 가져올 수는 있지만, 윈도우나 리눅스 환경에서는 포기할 수밖에 없었죠. > Figma는 웹브라우저만 있다면 리눅스, 크롬북, 심지어 iOS나 안드로이드 태블릿에서도 편집이 가능합니다. ~~물론 권장하는 방법은 아닙니다~~ 이와 다르게 브라우저에서 UI/UX를 제작하거나, UI와 Flow를 배분하여 제작을 진행할 수 있습니다. 재택이나 원격근무가 일상화된 이 시국에, Figma가 급부상하게 된 것은 어찌 보면 당연하다고 볼 수 있죠. 게다가 자신이 원하는 위치에 코멘트를 달아서 기능을 정의하거나 이슈를 등록할 수 있으므로, 소통의 어려움은 없다고 봐도 좋습니다. ### **문서 작업도 가능** 심지어, 화면정의서 제작도 가능합니다. 기존에 UI/UX 작업을 할 때는 ~~당연하다는 듯~~ PPT를 열어 화면명과 화면 ID를 정의하고, 화면 경로와 작업자명, 문서 버전을 적어서 공유해야 했습니다. 그리고 화면 내 요소 하나하나에 번호를 달고 화면 설명(Description)을 최대한 자세하게 적어서 화면 내 동작이나 화면 간 flow를 유추할 수 있게 만들어야했죠. 요즘은 Protopie같은 프로토타이핑 툴이 있어 flow 작업은 훨씬 줄어들었지만, 여전히 화면정의서를 요구하는 곳이 많습니다. Figma는, 아시겠지만, UI/UX를 제작하는 툴입니다. 하지만 PowerPoint 역시 화면정의서가 아니라 프레젠테이션을 제작하는 툴이죠. 그런 관점에서 보면, Figma는, **좀 더 자세하게 화면정의서를 그릴 수 있는 툴**이 되겠습니다. 물론 이런 작업을 하라고 만든 툴은 아니겠죠. 하지만 명확하고 체계적으로 기능을 정리하려면 화면정의서만큼 편리한 문서가 없기 때문입니다. 특히 Figma로 화면정의서를 작성할 때는 오토 레이아웃으로 설정하면 됩니다. 텍스트를 입력한만큼 사각형 크기가 세로로 늘어나도록 설정하고, 각 컬럼이나 로우(Row)를 다시 오토 레이아웃으로 묶어서 정렬을 설정할 수 있죠. 즉, PPT에서 표를 사용할 때와 다름없는 사용성을 기대할 수 있으며, 종종 더 편리하다고 느낄 때도 많습니다. ![[Pasted image 20250206210954.png]] **Figma로 화면정의서 작성하기** 게다가 각 화면을 에셋에 등록해두면, 해당 화면이 수정됐을 때 화면정의서 내 UI 영역에 바로 반영되므로 버전 관리나 화면단위 Use Flow 작성이 훨씬 편리해진다는 점도 있습니다. 그리고 각 화면을 한 번 더 프레임으로 묶은 뒤 Clip Content를 설정하면, 화면을 따로 크롭할 필요 없이 문서에 바로 입력이 가능해지기도 합니다. ## **Figma의 단점** 이렇게 다양한 장점을 가진 Figma지만, 당연히 단점도 존재합니다. ~~쿨타임 찼으니 깝시다~~ 어쩌면 이러한 단점때문에 Figma 사용을 꺼려지게 만들 수도 있습니다. 그러면, 시작해볼까요? ### **불안정하다** 위에서 Figma는 클라우드 서버(좀 더 정확히는 AWS)를 사용하며, 웹 브라우저 기반으로 작동한다고 이야기했습니다. 이는 모든 인터넷 환경이 잘 작동할 때는 문제가 없지만, 반대로 **인터넷 환경에 문제가 있을 때**는 크나큰 단점이 됩니다. 얼마 전 AWS 도쿄 리전에 EC2 냉각시스템 이상으로 인한 장애가 있었죠? 그로 인해 롤(LOL)이나 쿠키런 킹덤 게임에 접속이 불가능하기도 했습니다. Figma 또한 동일한 취약점을 지니고 있습니다. 사실 어지간한 서버보다 AWS의 신뢰도가 높긴 하지만, 그래도 **작업자의 로컬 PC 환경**보다 신뢰도가 높기는 어렵죠. 게다가 웹 브라우저 기반으로 작동하기떄문에, ~~안그래도 램 잡아먹는 귀신인~~ 크롬 브라우저가 더 무거워집니다. GUI 디자이너 컴퓨터는 물론 좋은 사양을 제공하지만, 기획자의 PC까지 사양이 훌륭한 경우는 별로 없죠. 점차 권장사양이 높아지는 XD조차도 노트북 환경에서 작업은 충분히 가능합니다. 하지만 Figma를 사용하면서 크롬 탭 몇 개를 더 띄우면 노트북 팬에서는 비행기 이륙하는 소리가 들리게 됩니다. 이는 Edge 브라우저(래도 결국 크로미움이라서 똑같죠)를 사용하거나 Safari 브라우저를 사용한다고 해서 해결되는 문제가 아니죠. Figma 프로그램이 있기는 하지만 웹앱이나 마찬가지이기 때문에, 이 또한 해결책이라 보기는 어렵습니다. > 이렇게 써놓기는 했지만, 그래도 저사양 환경에서 쓸만하기는 해요. 아이패드에 마우스 연결해서 작업할 수도 있을 정도니까요. ### **아직 부족한 사용성** 2016년 9월에 출시된 프로그램인데 아직도 사용성 이슈가 있으면 어떡하냐고요? 사실 이 시국 이전, 원격 실시간 협업에 대한 니즈가 없었다면 Figma가 지금처럼 부각되기도 어려웠으리라 생각합니다. 다행히 최근 인기가 높아지며 편리한 기능이 적용되고있고, 다양한 플러그인이 공유되며 그 사용성을 강화하고있죠. 하지만, 여전히 불편한 점은 많습니다. 무엇보다, 기능에 대한 설명이 불친절합니다. 예를 들자면, Auto Layout을 적용하면서 많이 겪은 점인데요, 텍스트와 사각형에 오토 레이아웃을 적용해서 입력 틀을 만든 뒤 다른 객체와 다시 묶으면, 레이아웃이 이상하게 적용되기도 합니다. 심지어 **반응형 설정**이 풀리기도 하죠. 이는 [React](https://ko.reactjs.org/) 기반으로 작동하기때문에 CSS 설정이 이상하게 적용돼서 그런 것 아닐까 하고 생각합니다...만, 개발 측면 이슈이기때문에 명확한 답은 잘 모르겠습니다. 하지만 중요한 점은, 이렇게 "생각과 다르게 움직이는" 경우를 발견했을 때, 그에 대한 해결책을 찾기가 쉽지 않습니다. 한국어로 번역된 가이드가 거의 없고, 있더라도 **지금 나에게 발생한 문제**를 해결하는 가이드가 있을 리 없죠. 결국 비슷한 방법이지만 미묘하게 다른 설정으로 하나하나 수정해봐야 합니다. ![[Pasted image 20250206211011.png]] **SVG 파일로 가져오기 시 텍스트 처리 오류** 또한, XD/스케치에서 와이어프레임 가져오기가 쉽지 않습니다. [Sketch에서 가져오기](https://help.figma.com/hc/en-us/articles/360040514273-Import-files-from-Sketch)는 Figma에서 공식으로 지원하고있지만, XD에서 가져오기는 매우 번거로운 과정을 거쳐야합니다. 물론 XD에서 내보내기 한 SVG 파일을 Figma로 가져올 수 있지만, 폰트(단어 단위로 Bold가 온오프 처리됨)나 레이아웃(글자 줄바꿈 등 미적용), 심지어 Mask 설정 등이 해제되는 경우가 많습니다. 이를 피하기 위해서는... 그냥 다시 그리면 됩니다. ~~참 쉽죠?~~ ### **있어야 할 기능이 없다** 다시 이야기하지만, Figma는 UI/UX를 제작하는 툴입니다. 하지만, UX제작을 위해 사용하기에는 **아직도** 부족한 점이 많습니다. 예를 들어볼까요? 어떤 앱을 사용중에 특정 항목 삭제를 진행하면, 삭제 확인 팝업이 발생하고, 팝업 내에서 확인버튼을 누르면 삭제가 완료됐다는 Toast 팝업 발생과 함께 항목이 삭제되는 모션이 화면에 표시돼야 합니다. 이는 매우 간단한 UX이며, 실제로 매우 다양한 앱(메일, Todo List, 채팅프로그램, 파일관리자 등)에서 적용하고 있습니다. 그런데, Figma로는 이 UX의 프로토타입을 만들기가 매우 난해합니다. 프로토파이에서는 이 부분을 Trigger와 Chain을 통해 해결합니다. 어떠한 **조건 여럿**을 만족할 경우, 특정한 **동작 여럿**을 순서대로 화면상에 표시할 수 있죠. - 이래서 저희는 프로토파이를 OOP에 GUI를 붙인 툴이라고 생각합니다. (참고: [[그래서 인공지능이 대체 뭔가요|그래서 인공지능이 대체 뭔가요?]]) Figma에서는 트리거 하나에 대해 한 가지 동작만 지정이 가능합니다. 여기에 추가로 화면 이동이나 모션 등을 적용하기 위해서는 화면 이동 후 Delay로 오버레이를 설정/해제하여 표시/생략 등을 하나하나 지정해야 합니다. 결국, UX 제작을 위해서는 프로토파이로 화면을 옮겨가서 진행해야 한다는 뜻이죠. if, else, for, while, switch 등의 조건문을 프로토타입으로 지정하는 것은 사실상 불가능합니다. 물론 위의 저 조건문 동작 대부분을 적용 가능한 [Framer](https://www.framer.com/) 라는 프로토타이핑 툴은 있습니다만... 저는 안 쓸 거에요. ![[Pasted image 20250206211028.png]] **코드를 사용해서 프로토타입 제작 |** [Framer x Deliveroo: The Veteran Challenge](https://blog.framer.com/framer-x-deliveroo-the-veteran-challenge-f297f000a0a2) ### **GUI/UX 툴이 아니라 UI 툴이다** "이제와서 무슨 당연한 소리냐"라고 하시기 전에, 잠시 좀 들어보셔요. 물론 GUI 작업에는 당연히 포토샵이나 일러스트레이터를 사용하기 마련입니다. 솔직히 최근에는 GUI 작업에 **생각보다 높은** 비중으로 XD와 스케치를 활용하고 있어요. 화려하고 디테일한 GUI가 아니라, **플랫 디자인이나 뉴모피즘**을 적용하는데는 오히려 XD/스케치가 더 편리할 때가 많기 때문입니다. 물론 Figma 또한 XD에서 지원하는 기능 중 대부분을 사용할 수 있기 때문에, 예쁜 디자인 대신 명확한 디자인을 제작할 수 있습니다. 어쩌면 이 부분은 단점이 아니라 오히려 장점일 수도 있겠습니다. > 참고삼아 말씀드리자면, Figma로 GUI를 그려서 React 코드로 내보내기가 가능합니다. ~~퍼블리셔 다 죽게 생겼다 이놈들아~~ ## **결론** 지금까지 Figma를 장단점 위주로 소개했습니다. 솔직히 큰 장단점을 소개한 것 같지만, 사용하다보면 저희와는 조금 다르게 생각하실지도 모르겠습니다. 그리고 그 중 대부분은 아마 **"뭐야, XD나 스케치랑 별 차이 없는데?"** 일 것이라 생각합니다. 네, 맞아요. 쓰다보면 별 차이 없이 **그냥 쓰게** 됩니다. 그리고 이 점이 제일 매력적이죠. Figma는 UI/UX를 제작하는 툴입니다. 하지만 아직 XD보다 UI 생산성이 떨어지고, 프로토파이보다 UX 생산성이 떨어집니다. 대신 그 둘을 한 개의 **웹페이지**에서 가능하게 한다는 점이 Figma를 매력적으로 보이게 만들죠. 또한 맨 처음에 말했던 것처럼 다른 툴(Slack, Trello, Protopie 등)과 플러그인을 통한 결합이 쉽기 때문에, 적응하면 적응할수록 생산성은 기하급수적으로 높아지게 됩니다. 특히 [UI 산출물을 Protopie로 가져가서](https://www.protopie.io/figma) 프로토타입을 제작하는 기존 업무흐름이 있다면, 이번 기회에 Figma를 한 번 사용해보심도 좋겠습니다. 비대면 시대를 맞이했지만 여전히 협업은 필요하고, XD와 Zeplin을 통한 중복업무에 지치셨다면, Figma를 한 번 시도해보시길 바랍니다. 저희도 업무에 제대로 활용하기 위해 계속 배우고있으며, 그 결과물을 곧 공개할 예정입니다. 같이 배워서 업무 효율을 높이고, 빠른 퇴근을 기대해봅시다. ## **참고** 현재 Figma 학습을 위해 [TodoList](https://www.figma.com/file/h4rMFw8UPU5cWOAMpLEJnd/Rosetta?node-id=0%3A1) 화면 및 화면정의서, 기본 정책 등을 작성중에 있습니다. TodoList가 개발자만의 로제타일 필요는 없으니까요. 표 만들기가 쉽지는 않지만, 한 번 만들어두면 두고두고 쓸 수 있고, 무엇보다 협업을 위해 매우 편리해 보입니다. 한 번 구경 와 보셔요😉 --- ## **Contact** GitHub : [https://github.com/john33fiao](https://github.com/john33fiao) Email : [[email protected]](mailto:[email protected])