피그마는 프레임 워크일까? 라이브러리일까?

디자이너 관점에서 알아보기

피그마로 직접 그린 이미지

개발자들과 일을 하다보면 프레임워크, 라이브러리 이 두단어를 가끔 듣게 된다.

필자는 개발에 대한 지식을 가지고 있음에도 불구하고 이해는 하고 있지만, 

머리속에 하나의 이미지로는 잘 떠오르지 않는다.

먼저 두 단어에 대한 정의를 나무위키에서 찾아보았다.

프레임워크는 어떠한 목적을 달성하기 위해 복잡하게 얽혀있는 문제를 해결하기 위한 구조며, 소프트웨어 개발에 있어 하나의 뼈대 역할을 한다.

라이브러리는 소프트웨어 개발 시 사용되는 프로그램의 구성요소로, 공통으로 사용될 수 있는 특정한 기능(들)을 모듈화한 것이다.

개발자 입장에서는 이해된다 해도 디자이너 관점에서는 각각의 이미지가 떠오르지 않는다.

이런 이유로 필자는 프레임워크와 라이브러리에 대해 시각적으로 어떻게 표현해야 할까? 고민을 많이 했다.

그러다가 아이들이 가지고 노는 레고를 사용하여 표현하면 어떤 모양이 될까? 라는 생각이 들었고 이를 그려보기 시작했다.

피그마로 직접 그린 이미지

위의 두 이미지를 보면 시각적으로 큰 차이를 보인다.

프레임워크에 해당하는 이미지는 큰블럭 안에 우리가 작업하는 디자인이 존재하고,

라이브러리는 작업하는 디자인 옆에 여러가지 다른색의 블럭럭들이 존재하는 모양이다.

이것을 피그마에 비유해 보면,

디자이너들이 만들어낸 이미지는 피그마 디자인툴안에 존재하게된다.

피그마의 다양한 객체와 도구를 이용하여 원하는 이미지를 만들 수 있다.

여러 이미지를 만들다보면 손이 많이 가는 작업들이 생긴다.

이런 작업들을 보다 손쉽게 하기위해 다양한 플러그인들을 사용한다.

화면과 화면을 연결해주는 Autoflow, 더미 이미지를 자동으로 만들어 주는 Unsplash, 더미 텍스트를 만들어주는 Content Reel등이 유명한 플러그인이다.

이를 통해 피그마는 프레임워크에 해당하고 피그마 플러그인은 라이브러리에 해당하는것을 알게 되었다.

앞으로 프레임워크, 라이브러리 두 단어를 듣게 된다면 위의 두 이미지와 피그마, 플러그인 그리고 디자인 이 세가지 요소를 떠올린다면 개발자들과 소통하는데 있어 도움이 될거다.