피그마 디자인을 코드로 만드는 방법
개발환경 설정없이 시작하는 코딩
피그마로 디자인을 완성하면 inspect창을 통해 실제 개발에 적용할 수 있는 코드를 확인할 수 있다.
완성된 디자인을 개발에 적용하는 과정은 각 컴포넌트들의 class name을 정하고 피그마 inspect창의 코드를 복사하여 붙여 넣는다.
이렇게 붙여넣기만 하면 짠~ 하고 디자인과 똑같이 브라우저에 나타날것이라 예상되지만 실제로는 어느정도 코드의 수정이 필요하게 된다.
필자의 개인적인 경험으로 보면 특히 position 과 display 설정들을 수정하는 경우가 많았다.
이 두 설정값의 특징은 부모와 자식 컴포넌트의 관계를 설정하는 것이다.
POSITION
https://brunch.co.kr/@eddwardpark/10
DISPLAY: FLEX
https://brunch.co.kr/@eddwardpark/51
코드의 수정을 디자이너가 직접 할 수 있다면 프로젝트의 생산성은 향상될거다.
그런데 실제 디자이너가 코드 에디터(Atom, VScode)를 설치하고 프로젝트에 필요한 개발 환경을 설정하고 필요한 플러그인들까지 설치하는것 자체가 큰 허들인것이다.
실제 코드를 만지기도 전에 개발에 대한 두려움을 가지게 된다.
https://codepen.io/, https://codesandbox.io/ 이 두 서비스는 개발에 필요한 환경들이 준비되어 있어서 디자이너들이 바로 코드만 작성하면 결과를 브라우저 상에서 바로 확인할 수 있다.
codepen.io
https://codesandbox.io/s/figma-zerm5?file=/src/App.jscodesandbox.io
https://codepen.io/ace-subido/pen/Cuiep자신이 만든 디자인을 직접 코드로 작성하고자 한다면 위에 소개한 두가지 서비스중 한가지를 이용해 도전해 보자.
codepen은 html, css, js를 사용해서 퓨어한 개발을 진행할 수 있고, codesandbox는 react, vue, angular등 최근 인기있는 프론트엔트 라이브러리의 개발환경 설정에 대한 부담없이 바로 코드를 작성할 수 있다.
