brunch

You can make anything
by writing

C.S.Lewis

by 생각하는 에밀리 Jul 05. 2022

#3. 사용성 파헤치기 - 피그마 알다가도 모를 녀석

UI/UX 디자이너 입장에서 보는 사용성 분석(3)

디자이너로 산 지도 꽤 오래되었다.

디자이너에게 제일 중요한 것 중 하나는 디자이너의 손과 발이 되어주는 Tool이다.

디자인 툴도 그동안 꽤 많은 변화를 겪었는데, 나는 다양한 툴을 다뤄봤다. (포토샵, 일러스트레이터, 스케치, Adobe XD, 피그마 등등등)


옛날 옛적. 절대 강자였던 Adobe. 포토샵.

지금도 많이 사용되고 있지만 예전처럼 유일무이하진 않다.

몇년 전, 맥 전용 그래픽 툴인 Sketch가 나오면서 격변의 시대는 시작되었다.

벡터 기반의 UI 프로토타입 그래픽 툴이 등장하면서 사실상  Tool계의 춘추전국시대를 겪게 된다.

내 기억이 맞다면 처음엔 Adobe Photoshop, Adobe Illustrator(벡터기반) > Sketch(Mac Os 전용) > Adobe XD > Figma 순으로 새로운 툴이 생겨났다.


나름 각자의 위치에서 각자의 입지를 다지고 있는 듯 하다. 간단하게(?) 프로그램들에 대해 이야기해보자면 포토샵은 사진 보정이나 수정을 대체할 프로그램이 아직 없다고 생각하기 때문에 포토그래퍼와 같이 사진 보정을 하시는 분들은 포토샵을 여전히 많이 쓰고 있는 것 같다. 또 새로운 툴에 대한 경험을 원치 않는 개인이나 회사의 방침에 따라서 UI/UX디자인 툴로 아직도 사용되고 있다. 스케치는 좋은 툴이지만 치명적인 단점이 해외에서 개발자들이 맥 전용 OS 코드(?)로 개발을 했기 때문에 윈도우 사용자들에게 제공하기 힘든 환경으로 알고 있다. (윈도우에서 사용하려면 윈도우 코드로 처음부터 끝까지 다 만들어야 한다고 들었던 것 같다.) 그 때문에 국내에서 맥을 쓰지 않는 사용자들은 이 파일을 열 수도, 수정할 수도 없다. 맥을 쓰는 나는 물론 사용할 수 있지만, 다른 co-worker와의 업무 효율성을 따지면 윈도우 사용자와 맥 사용자의 협업은 거의 불가능한 수준인게 현실이다. sketch 파일을 Adobe의 포토샵 툴로 변환해주는 프로그램도 존재하는데 꽤 높은 호환율을 가지고 있으나 100% 정확한 것은 아니기때문에 매번 변환해서 작업하기란 불편할 것 이다. 때문에 인하우스 프로젝트만 다루며, 사내의 직원들이 맥을 사용하는 경우가 아니라면 실질적으로 계속 사용하기는 어렵다. Adobe XD와 피그마의 출시 시기는 사실 정확하진 않으나 내 기억에는 XD가 먼저였던 것 같다. 스케치 툴이 출시되자 깜짝 놀란 Adobe에서 만든 툴로 알고 있는데 기존 어도비에 없던 UI,UX를 위한 새로운 포지셔닝의 툴이다. 실제로 출시된 후에 XD 툴을 직접 설명해주는 Adobe 세미나에 참여해서 세미나 강의를 들은 적도 있었는데, 꽤 많은 부분이 Sketch와 동일한 사용성이라고 느껴졌었다. 맥이 아닌 윈도우 사용자들을 겨냥해서 만들었지 않을까 싶다. 지금까지 설명한 툴들은 개인이 작업하고 파일을 공유하는 형식의 프로그램들이었다면 이후 또 다시 새로운 사용성의 프로그램이 등장하는데, 그 새로운 프로그램 툴이 피그마다. 피그마의 가장 큰 특징은 웹 기반 툴이기 때문에 브라우저에서 바로 사용할 수 있고, 여러 명이 동시에 온라인으로 화면을 공유, 수정등을 할 수 있다는 것이다. 이 기능 때문에 기존의 파일을 저장하고, 수정하면 새로 저장하고, 공유하고, 또 수정하고 이런 과정들을 모두 없앨 수 있기 때문에 공동 작업 면에서 엄청난 효율을 가져온 툴이라고 볼 수 있다.




피그마의 장점과 아쉬운 점, 어쩌면 꿀팁이 될 수 있는 정보들을 소개해보고자 한다.

1. 장점 - 자동 저장

습관이란게 무서운게 포토샵을 사용할 당시, 프로그램이 갑작스럽게 종료되어 힘들게 작업한 작업물을 날린 적이 엄청나게 많았다. 디자이너들은 그 때문에 노이로제가 걸려 5분에 한번씩 control S를 누르는게 습관이 된 이들이 적지 않을 것이다. 그만큼 저장은 매우 중요한 기능인데, 피그마는 이를 자동으로 저장해준다. 웹 기반이기 때문에 인터넷에 연결되어 있으므로 저장을 매번 하지 않아도 되서 편리하다. 그럼에도 불구하고 자꾸 control S를 누르는 것은 트라우마 같은 것일까...?


2. 장점 - 디자인 가이드, 파일 공유 등이 필요없는 협업 기능

스케치 프로그램에서도 제플린이라는 디자인 협업 툴을 사용해서 별도의 디자인 가이드를 만들지 않아도 되는 편리함을 이미 경험한 바 있었다. 하지만 피그마가 조금 더 개선된 점은 스케치는 제플린이라는 툴에 한번씩 업로드(?)를 해줘야 퍼블리셔, 개발자들이 디자인 화면을 볼 수 있는데, 피그마는 공유(share)를 해두면 별도의 업로드 없이 바로 내용을 볼 수 있다. 또한 디자이너들끼리도 이전에 다른 툴에선 작업한 파일을 공유하고 수정하는 경우가 있었다면(파일을 서로 보내고 수정하다보면 어느 파일이 최신 파일인지 알 수 없는 경우가 더 많다.) 이제는 같은 프로젝트에 초대해서 참여하면 항상 최신의 프로젝트 파일을 함께 공유할 수 있으니 번거로운 작업이 많이 없어졌다.


3. 장점 - 홈 썸네일 뷰 및 커뮤니티

위 사진은 피그마의 커뮤니티이지만 홈의 경우도 위 사진과 같이 작업중인 화면을 썸네일로 볼 수 있는 것이 편리한 기능이다. 10년차 쯤 되니, 작업한 파일이 많기 때문에 한글, 영어로 적힌 제목만 보면 어떤 내용이 들어있는지 헷갈리는 경우가 많다. 이 부분을 썸네일이 보완해주는 것 같다. 또한 커뮤니티에서 무료로 아이콘이나 일러스트 소스도 활용할 수 있으니 유용하다.


4. 장점이자 아쉬운 점 - 임폴트 기능

이 기능은 아직 사용해본 적은 없는 기능인데, 별도의 변환 툴 없이 스케치 파일을 가져올 수 있으니 스케치에서 피그마로 툴 변경하는 것이 용이할 듯 하다. 다만 임폴트의 기능을 어디에서 이용할 수 있는지는 한참을 찾았다. 보통 다른 툴들은 컴퓨터 프로그램의 경우 좌측 상단에 임폴트 기능이 있어야 하는데, 중앙 우측에 있어서 '등장 밑이 어둡다'는 말을 이런 때 쓰는 것 같다. 그리고 임폴트를 할 때 컴퓨터 피그마 파일에서 임폴트를 누르면 열리지 않고 임폴트 기능을 통해서만 파일을 열 수 있는 것도 매우 아쉬운 점이다. (피그마 파일이 안열려서 꽤 오랜 기간 동안 버그인 줄 알았다.)


5. 장점이자 아쉬운 점 - 실시간으로 함께 보는 기능

웹 기반으로 동시에 화면을 함께 볼 수 있는 기능이 의사 소통 할 때는 큰 장점이다. "제 마우스 커서 보이시죠? 이 부분 말씀하시는 건가요?"와 같이 함께 보면서 소통할 수 있기 때문이다. 하지만 큰 단점이기도 한 것이 디자인 작업을 하고 있는 경우에는 완성되지 않은 작업물을 기획자나 다른 디자이너나 개발자 등에게 실시간으로 보여주는게 좋지 않다. 이런 저런 시도를 해보고 최상의 결과를 보여주고 싶은데 실시간으로 보고 있다고 생각하면 조금 불편한 마음이 들어서 다른 디자인 파일을 만들어서 작업하고 복사 붙여넣기로 공유하기도 하는데 그 부분은 개선되는 방법이 있으면 좋을 것 같기도 하다. 임시 저장의 기능을 가진 페이지를 둘 수 있다면 좋지 않을까 하는 생각이 든다.


6. 아쉬운 점 - 새로운 기능이나 명칭에 대한 설명 부족 (design file vs figzam file)

피그마를 사용하면서 느낀 점인데, 일부 새로운 기능들(피그마에만 있는)에 대한 용어의 정의나 설명이 부족한 것 같다. 

예를 들어 새 파일을 생성할 때 위와 같이 design file과 FigZam file 중에 고르도록 하는데 정확히 두 가지가 어떤 기능인지 설명이 되어 있다면 좋을 것 같다. 찾아보니 FigZam이 브레인스토밍을 하기 위한 화이트보드 협업툴이라고 하는데, 기획자 사이에서 많이 쓰이는 툴 일 수도 있겠다. 피그마에 대한 설명은 상대적으로 많은데 비해 피그잼에 대한 설명이 부족한 것을 보면 상대적으로 자리를 덜 잡고 있는 듯 하지만, 피그잼이 굉장히 좋다는 사람들도 많으므로 조금 더 연구해서 피그잼에 관한 사용법에 대한 내용을 다시 한번 정리해야할 것 같다.


7. 꿀 팁 - 계정 스위칭

대부분의 사람들은 회사 계정과 개인 개정을 가지고 있을 것 같다. 회사 계정과 개인 계정을 오가며 작업을 하는 경우가 다반사일텐데, 이 팁을 모르는 사람들은 웹 브라우저를 여러개 켜 두고 로그인해서 오갈지도 모르지만, 사실 피그마 프로그램을 설치하면 바로 해결되는 부분이다. 프로그램 우측에 Switch account 기능이 있는데 계정을 추가해두면 좌측 상단에 계정을 바로 스위칭 할 수 있다. 2개 이상의 계정 프로젝트를 탭처럼 나열해두고 동시에 오가며 볼 수 있으니 아주 편리하다.



편리한 듯 불편한 듯 알 수 없는 피그마는 한동안 대체제가 없을 것 같다. 여러명이서 사용하다보면 피그마는 현재 무료와 마찬가지여서 무조건 금액을 결제해서 사용하는 Adobe XD 보다는 선호도가 높은 상태로 보인다. 앞으로도 팁이나 장단점을 더 공부해서 공유해봐야겠다.

작가의 이전글 #5. 등린이가 한라산을 오르는 게 가능할까?
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari