[Android ] 안드로이드 UI 디자인, Framer

안드로이드 UI 디자인, 그리고 Framer

안드로이드 UI 디자인은 기존의 웹 인터페이스들과는 달리 더욱 더 다양한 크기의 디바이스 화면을 지원해야 하는데, 디자이너 입장에서도 이러한 여러한 것들을 매번 지원 하기 어렵다. 또한 픽셀 단위의 디자인 가이드를 제공받는다면 개발자 또한 그런 수치들을 매번 계산해야하기 때문에 매우 번거롭다.

다음은 2015년도에  Joseph Kim 씨가 포스트한 프로토파이팅 툴에 대한 소감이다.

새로 배우고 있는 프로토 타이핑 툴에 대한 간단한 소감

참조 : 

https://medium.com/microsoft-design/how-to-run-framer-js-on-windows-94e6a06abfe4

요약

1. Atomic

 - 웹 기반 프로토타이핑 툴

 - 짧은 시간에 인터랙비트한 프로토 타입 가능

 - 제스쳐 지원등이 없다.

 - Spring, Bezier-curve, easing 등의 효과는 기대하기 힘들다.

2. Form

 - 커뮤니티 활성화 부족으로 튜토리얼 등까지만 배울 수 있다.

 - 개발 지식을 요구한다.

3. framer.js

 - 커피 스트립트

 - 커뮤니티가 활발

 - 자유도가 엄청나다. 코드기반이라.

 - 스케치/포토샵 연동이 뛰어남, Export시 개발자에게 넘여 값을 참조 가능. (Framer Studio를 썻을때)

 - 생산성이 떨어짐.

 - 인터랙션 플로우 설계에 부적합. 메인 컨셉 페이지만 설계할 때 추천

이 밖에도 포토샵과 재플린을 이용한 디자인도 많이 사용되고 있다.

제플린으로 가이드 문서 대신하기

Framer

이중에서 커피 스크립크를 사용하는 Framer js에 대해서 알아보려고 한다.

그러나 저자는 Mac 데스크탑이 없는 고로, Windows에서 제공할 수 있는 방법에 대해서 소개하고자 한다.

물론, Framer Studio는 맥 전용이고 Windows 버전은 아직 출시이전이라 사용할 수 없다.

IDE는 웹 개발시에 쓰이는 Visual Studio Code를 사용한다.

How to Run Framer JS on Windows

※ 저자는 명령 프롬프트가 불편하여 Windows PowerShell을 사용하였다. ( 윈도우키를 누르고 검색하면 나온다. 관리자 권한으로 실행 )

1. Node.js 설치 : 사이트로 들어가서 Download 클릭. 

명령 프롬프트에서 설치 확인

> node -v 

2. Git 설치 : 사이트로 들어가면 Download 됨. 

명령 프롬프트에서 설치 확인

> git --version

3. 윈도우에서 돌아갈 툴킷 다운로드(저장위치 기억)

명령 프롬프트

> git clone https://github.com/Microsoft/windows-framer-toolkit

4. 자동화 빌드 gulp 다운로드

명령 프롬프트

> npm install -g gulp

5. 샘플 프로젝트 다운로드 

명령 프롬프트

> git clone https://github.com/joetheday/framer-boilerplate.git

windows 툴킷 적용

> cp {toolkit_download_path}/* {project_path}/app/module\

6. VSCode 실행. Tab space : 4 로 변경. (하단바에 보면 변경할 수 있다.)

CoffeeScript가 띄어쓰기에 민감.

7. 빌드

프로젝트 폴더로 들어가서 명령 프롬프트

> npm install

8. glup 실행. (웹 브라우저 오픈)

명령 프롬프트

> gulp 

9. 실행 결과는 http://localhost:3000/에서 확인!

모바일로 확인하고 싶다면 [네트워크 및 인터넷 설정] - [Wifi] - [하드웨어 속성] 의 IPv4 주소를 참고

기타 Sample :

https://examples.framerjs.com/#animation-basics.framer