React.js를 디자이너들이 알아야 하는 이유
내가 왜 React.js를 알아야 하지? 난 디자이너인데...?
리엑트를 공부하다가 어려워서 막혔는데 현타가 와서 글을 쓰게 되었다. 리엑트를 공부하면서 알게된, 디자이너가 왜 리엑트를 알면 도움이 되는지에 대해 글을 써보려고 한다.
디자이너 Anzi선생님은 이렇게 말했다.
디자이너 입장에서 리엑트가 컴포넌트 베이스라는
것 말고 무슨 장점이 있을까...
사실 장점이.... 없어요...
맞다. 장점이 없다. 사실 디자이너는 리엑트를 공부해서 잘 사용하기보다는 컴포넌트 베이스라는 개념만 알고 넘어가면 디자인을 하는데에 무리가 없다.
리엑트는 왜 나왔을까
우선 배경에 대해서 설명하자면, 리엑트는 엄청 인기있는 프런트엔드 라이브러리 중 하나이다. 지금 프런트엔드에는 React, Angular, Vue 이 3가지 라이브러리가 경쟁을 펼치고 있다. 프런트엔드 개발자가 아니라면 이것들이 뭔지, 왜 인기가 있는지 몰라도 괜찮다. 그냥 이런게 있고 인기구나~ 하고 넘어가면 된다.
여기서 말 할 리엑트는 페이스북이 만든 사용자 UI구축을 위한 라이브러리다 하지만 만들어놓고 본인들은 안쓴다 리엑트를 사용하는 대표적인 기업으로는 에어비엔비가 있다.
근데 왜 리엑트가 컴포넌트 베이스인가요?
왜 Anzi님이 컴포넌트 베이스라 디자이너한테 도움이 되느냐고 말했냐를 이해하기 위해서는 일단 컴포넌트화에 대해 아는게 필요하다.
여기 페이스북 페이지가 하나 있다. 보시다시피 좋아요 버튼도 있고, 메세지 보내기라는 파란색 버튼도 있고... 많은 UI적 요소로 구성되어 있는 것을 볼 수 있다.
근데 페이스북에서 새로운 계정을 만들고 싶다고 가정 해 보자. 그럼 여기 보이는 메세지 보내기 버튼, 좋아요 버튼, 정보 카드에 해당하는 모든 코드를 새 페이지에 복사해서 붙여넣기 해야할까?
아니다. 그렇게 되면 코드는 불필요하게 길어지고 나중에 한 페이지의 디자인이나 문구를 수정하면 다른 페이지도 그 긴 코드를 뒤져서 수정해야 하는 일이 발생 할 것이다. 이렇게 되면 실수가 늘어나고, 시스템이 비효율적이 된다.
기술은 역사적으로 효율성을 위해 진화해 왔다. 모든 기술들은 반복된 작업을 줄이고, 실수를 방지하는 것을 추구한다. 초기의 개발자들은 새로운 페이지를 만들 때 기존에 만들었던 코드들을 복붙해서 사용했을 것이다. 하지만 곧 불편함을 느낀다. 그리고 생각한다. "좀 더 편하게 중복되는 코드를 한번에 관리할 수 없을까?"
그래서 나온게 컴포넌트 화이다.
컴포넌트는 UI를 시스템화 시켜서 반복, 수정이 용이하게 하는 방법이다. 파란색 메세지보내기 버튼을 한개 만들어서 이것을 부모로 설정해 놓으면 이 버튼의 자식들이 부모의 수정사항을 따라가도록 한다. 예를들어 부모가 되는 컴포넌트에서 디자인을 빨간색으로 수정하면 모든 페이지에서 원래 파란색이었던 버튼이 빨간색으로 바뀌게 된다.
이것은 디자인 시스템과 일맥 상통한다. 이것이 디자이너들이 컴포넌트화를 알면 좋다고 말하신 이유이다.
이 배경에 대해 알면 프런트엔드 개발자와 소통을 하는데에 꽤나 도움이 된다.
그리고 디자인 시스템이 왜 중요한지, 왜 추구해야 하는지에 대해 물어보면 단순히 "디자인을 일관적이고, 빠르고 편하게 만들기 위해서!" 라는 이유를 대는 것 뿐만 아니라 이게 프로덕트에서 실제로 개발과 협업 했을 때 어떤식으로 구현되어 더 유지보수 하기 편하고 생산이 빠른지 그 이유가 명확해 진다.
프런트 단에서 리엑트 같은 컴포넌트 베이스로 시스템을 운영하고 있는데 디자이너가 컴포넌트화(디자인시스템)을 사용하지 않고 매번 새로운 디자인을 짜낸다면 비효율적이 된다. 왜냐면 개발 단에서는 디자이너가 새로운 디자인을 만들 때마다 새로운 컴포넌트를 만들어야 한다는 의미가 되기 때문이다.
이렇게되면 단순히 디자인만 일관성을 잃는 것이 아니라 불필요한 코드의 양도 많아져서 프로덕트 자체가 무거워지고 느려질 수 있다.
컴포넌트화라는 개념을 알았으면 디자인을 할 때 대충 아 내가 만들고 있는 이 컴포넌트는 다른 곳에서도 재사용할 수 있게 구성해 놔야겠구나~ 라고 생각을 하면서 요소를 디자인 할 수 있다. 그럼 더 효율적으로 디자인이 가능해진다
