React 디자인 툴을 사용해 보자 1편 (sketchapp, react-sketechapp)

날짜 : 2017. 12. 16.(토)

React 디자인 툴을 사용해 보자 1편 (sketchapp, react-sketchapp)

1. 생각하게 된 동기

1. UI가이드를 슬라이드로 작성해서 사용했었다.
2. 만들고 난뒤 각 컴포넌트별 state, props가 기억을 나서 수정작업이 어렵다.
3. state, props를 위해 슬라이드가 아닌 디자인툴을 찾아보겠다.
4. 이번편은 sketchapp

(본 후기는 sketchapp을 1시간 정도 사용을 하고서 작성을 하였습니다.)

2. 찾아본 내용

1. sketchapp 무료가 아니다.

   • 기본적으로 설치를 하면 30일 free trial 기간이 적용 된다.
   • 학생용 및 추가 사용 금액등 특별금액 정책이 있다. (하지만 작성자 해당 사항 없음)

2. sketchapp 최신버젼(v.48)에 설치 이슈가 있다.

   • document에 있는데로 하면 예제 화면이 뜬다.
   • 혹시 못 찾은 사람을 위해서 따라할수 있는 동영상링크를 첨부
   • 작성자는 따라 했지만 이슈가 있어 검색을 해보니, 해당 오픈소스에서 v.47을 사용해 보라고 권고하였다. 링크
   • v.47을 설치한 이후 예제 실행이 잘 된다.

3. sketchapp 에서 UI는 보여지지만 state와 props 관리가 되지 않는다.

   • 화면UI는 보이지만 컴포넌트의 연관관계가 보이지는 않는다.
   • 찾고 있는 기능이 없다.

4. 다음편은 react studio ...

3. 참고한 사이트

• 설치동영상
• 설치이슈 질문
• sketchapp 사이트
• react-sketchapp 사이트
• react-sketchapp 문서