Figma는 웹을 코드로 구현하기 이전, 웹의 구조와 기능을 미리 구현해보는 프로토타입 툴이다.
그렇기에 개발자가 직접 Figma를 활용하여 웹의 프로토타입을 만들 일이 많이 없다고는 하지만,
실제 사용을 해보니, 웹을 만들기 이전에 구조를 계획해보고, 프레임을 짜보면서 내가 배우고 있는 코드와 기능이 실제 웹에서는 이런 식으로 상호작용이 되야 하는구나,,라는 그림을 그릴 수 있었다.
Figma는 크게 3가지의 구조로 만들어진다.
먼저, Figma는 단순히 아트웍이 목적이 아닌 실제 기기에서 사용할 수 있는 프로토타입을 구현하는 것이 목적이기 때문에,
백지에 도형을 나열하듯 만들어지지 않는다. 이를 보여주는 지점이 레이어(Layer)이다.
피그마에서 바로 볼 수 있는 레이어는 Group과 Frame이다.
두 개념 모두 내가 원하는 객체들을 모아서 하나의 묶음으로 보여주고, 편집한다는 점에서는 동일할 수 있다.
하지만, Frame은 정해지는 즉시, 그 프레임을 기준으로 요소들이 재배치된다. 이런 점을 활용하여 프레임을 갖고 반응형 디자인, 스크롤 기능 등도 구현할 수 있다.
반면에, Group은 여러 요소들을 한데 묶었을 뿐 아무런 기능도 하지 않기에 Frame과 같은 구현이 불가하다. 다만, 여러 요소들을 한데 묶어서 의미를 부여한다면 많은 요소들을 다뤄야 하는 웹 프로토타입일 수록 효과적인 개념으로 작동할 수 있을 것이다.
다음은 Componant와 Instance이다.
Componant는 웹/앱의 화면에서 보이는 여러 기능을 세분화해서 하나의 기능 묶음으로 만든 것을 말한다.
각각의 기능을 일일이 정해줄 수 있음에도 Componant라는 개념을 만든 이유는, 단연코 *재사용성 때문이다.
웹/앱의 기능은 얼핏보면 복잡해 보여도, 실제로는 이동/스왑/창의 변경과 같은 단순한 기능들을 디자이너/개발자가 연결시켜 놓은 집합체에 불과하다. 컴포넌트는 이러한 기능들이 상호작용할 수 있는 매개체가 되기에 상황에 따라 동일한 기능을 수행하는 비슷한 컴포넌트가 많이 필요할 수 있다. 이런 상황마다 같은 기능을 일일이 구현한다면 상당히 생산성이 떨어지게 될 것이다.
그렇기에 자주 사용하게 될 기능들을 묶어서 하나의 컴포넌트로 만들고 이를 수행할 여러 인스턴스들을 만들어서 배치한다.
이를 구현하게 되는 과정에서 사용하게 되는 것이 Interaction 기능이다.
마지막으로 Object이다.
위의 다양한 버튼들도 점/선/면/텍스트 박스와 같은 작은 객체들의 조합으로 만들어진다.
하지만, 이러한 번거로움을 줄이기 위해 선배 개발자님들은 Iconify와 같은 많은 확장프로그램(plugin)을 만들어 두셨다.
이러한 요소들을 모으고 모아서, 쉽고 유용하게 개발자가 의도한 컨텐츠와 사용자의 요구가 만날 수 있도록 웹/앱의 구조 전체를 구상해야 한다.
가능하다면,, 개발자로서 개발한 컨텐츠가 누군가에게 가치있는 경험으로 남을 수 있도록 만들고 싶기도 하다.
