[디자이너 & 퍼블리셔를 위한 가이드 #2] 프레임워크나 라이브러리리를 사용할 것인지 확인하자.

프레임워크와 라이브러리 확인하기

사실 디자이너가 프론트 개발 프레임워크와 라이브러리를 반드시 알아야 하는것은 아니다. 하지만 서로 물어보고, 알려주는것이 좋다. React를 사용하고 MUI를 쓸거라면, 디자이너는 UI 라이브러리 홈페이지에 들어가서 어떠한 컴포넌트가 존재하는지, 기본적으로 어떤 형태를 띄고 어떤 속성들을 가지고 있는지를 파악할 수 있다.

 

프레임워크란?

웹 프론트 개발을 위한 환경 정도라고 생각하면 된다.
최근 자주 사용되는 웹 프론트 프레임워크로는 React, Vue, Svelt 등이 있다.

어떤 프레임워크를 사용하는지를 알아보고, 각 프레임워크에서 주로 사용하는 UI 라이브러리를 쓸건지, 아니면 직접구현 할건지를 사전에 미리 알아두는것만으로도 서로에게 도움이 된다. 

아래는 예시다.

ex : 프레임워크는 Vue를 사용하고 UI라이브러리는 Vuetify(뷰티파이)를 사용할 예정입니다.
ex : 프레임워크 사용 안하고, HTML + CSS + JS로 진행하며, UI는 부트스트랩을 사용할 예정입니다.
ex : 프론트개발은 React로 진행하며 Ant Design을 사용할 예정입니다.
ex : UI 라이브러리 사용 없이, 직접구현 할거에요.

 

프레임워크나 라이브러리를 미리 알아두면 좋은 점

예를들면, 앱디자인 시 RN개발환경(React-Native)에서는 그림자에 컬러처리가 불가능 하다는 점(예전엔 불가했고, 지금은 고버전에서는 지원하는 속성), 

에디터가 필요한데, 어떤라이브러리를 사용할건지 미리 안다면 디자인을 따로 할 필요가 없다.

특정 캘린더 라이브러리를 사용할건데 어디까지 커스텀이 가능하고, 기본적으로 어떤 기능들을 지원한다든지를 알수있어 디자인하는데 참고가 된다. 

디자인 다 해놨고 컨펌도 받았는데, 

“아 이건 지원하는 api가 없어서 직접구현해야되는데 시간이 부족합니다" 
“아 이건 네이티브 기능이라 어려워요. 시간이 정말 많이 걸립니다"
"시간을 투자한다고 해서 네이티브와 같은 퀄리티를 낼 수 있을지도 장담할 수 없어요"

라는 말을 듣는 일을 사전에 방지할 수 있다. 애초에 뭔가를 만들때 애매한 부분이 있으면 개발자와 소통하면서 작업하는것이 베스트다.

프로젝트 초반에는 라이브러리를 사용하지 않고 전부 개발하다가, 중간에 필요에 의해 도입하게 되는 케이스도 있다. 에디터 같은 경우라든지.. 만들기에는 공수가 너무 많이 드는 것들은 보통 라이브러리를 사용한다.

디자인이 완성되면, 라이브러리의 도움을 받아 쉽게 개발이 가능한지 개발자가 스스로 체크 한 후 디자이너에게 얘기를 해주는 편인데, 미리 참고할 수 있도록 사용하는 라이브러리의 가이드 링크를 달라고 한 디자이너도 있었다.