피그마 컴포넌트, 그거 얼굴에 바르는거야?
피그마팀은 왜 컴포넌트라 이름 지었을까?
피그마로 직접 그린 이미지피그마팀은 왜 컴포넌트라 이름 지었을까?
필자는 디자인을 한후에 개발 진행할때 주로 react를 사용한다.
리액트는 페이스북에서 만들었다.
그 이유가 잘 기억 나지 않지만 일단 기억나는데로 적어보겠다.
페이스북에는 여러화면에 알림창이 존재한다.
예를들어, 다른 사람이 나의 포스팅에 댓글을 달면 알림창에 빨간점 또는 숫자로 표시해준다.
댓글을 읽으면 알림창의 빨간점이 사라진다. ( 이 빨간점의 존재 이유는 UX적인 관점에서도 매우 중요하다. )
우스게 소리로 페이스북에는 버튼하나당 한명의 개발자가 있다고 한다.
매우 뛰어난 개발자들이 만든 빨간점이 댓글을 읽으면 사라져야 하는데 몇몇 화면에서는 그대로 남아있었다고 한다.
이부분 해결을 위해 개발수정을 꽤 많이 했다고 한다.
여기 고치면 저기서 반영이 안되고 저기 고치면 여기서 반영이 안되고...
이런 문제들을 해결하기 위해 상태(state)를 기반으로 하는 리액트가 탄생되었다고 한다.
리액트의 탄생배경에 대해 필자보다 잘 정리한 글이 있으니 자세히 알고 싶은 분들은 아래글을 참조하면 된다.
https://medium.com/@RianCommunity/react의-탄생배경과-특징-4190d47a28f
왜? 피그마 컴포넌트 이야기하다가 리액트 이야기가 나왔을까?
여러분들은 react, vue등을 들어보신적이 있을거다.
이것들을 사용해서 프로덕트에 필요한 컴포넌트들을 만든다.
컴포넌트로 만드는 이유중 한가지는 한번 만든 것을 재사용 가능하도록 하기 위해서다.
그래서 필자도 컴포넌트 기반으로 개발하는 것을 좋아한다.
한번 만들면 다음번에 비슷한 거 개발할 때 시간을 많이 줄일 수 있기 때문이다.
피그마도 웹을 기반으로 작동한다.
웹이라는 공통분모가 있다보니 피그마에서도 리액트나 뷰처럼 재사용 가능한 묶음을 컴포넌트라 이름짓지 않았을까?
https://developer.mozilla.org/ko/docs/Web/Web_Components
컴포넌트는 어디로부터 시작되었을까?
웹개발의 표준은 대표적으로 HTML5, CSS3, JS(ES6)등이 있다.
여기서 ES6가 중요한 부분이다.
(출처: https://www.swyx.io/writing/js-third-age/)ES6 이후 리액트를 시작으로 웹컴포넌트 전성기가 시작되었다.
react가 등장하고, Vue가 등장하고, react native가 등장하고, flutter가 등장하고, swift ui가 등장하고...
웹 및 네이티브 앱까지 컴포넌트 중심으로 바뀌었다.
최근 등장한 swift ui를 사용할 일이 있어 만져보니 컴포넌트에 익숙한 필자에게는 전혀 거부감이 들지 않았다.
이렇듯 개발자들에게 대세는 컴포넌트다. 그런데, 필자가 얼마전 피그마를 접하고 나서 보니 디자인에서도 컴포넌트가 대세더라.
피그마를 사용하는 디자이너들은 개발자와 이야기할때 공통분모를 가지게 된거다.
'컴포넌트' 이 하나만으로 서로 이야기 나눌 재료가 생긴거다.
오늘의 글쓰기 끄읕~ ( 전문용어를 되도록 안쓰고자 노력하니 글이 매끄럽지 않게 느껴짐 ㅜㅜ )
https://www.figma.com/community/plugin/885142896349849231/util%2B
