페이스북, 프로토타입 디자인 도구 ‘오리가미 스튜디오’ 공개
페이스북이 디자인 도구 ‘오리가미 스튜디오’를 4월13일 F8 개발자 행사에서 공개했다.
‘오리가미‘는 프로토타입 제작시 사용하는 디자인 도구다. 포토샵같은 도구와 비슷하지만 애니매이션이나 반응형 콘텐츠를 만들 때 더 적합한 프로그램이다. 프로토타입은 모바일 앱이나 웹 등을 개발할 때, 대략적으로 보여주는 기본 디자인을 가리킨다.
오리가미는 과거 맥 OS에서만 제공하는 ‘쿼츠 컴포저’를 통해서만 이용할 수 있었다. 이번에 ‘오리가미 스튜디오’가 공개되면서 별도의 추가 기술은 필요없게 됐다. 단, 여전히 윈도우 운영체제에서는 이용할 수 없고 맥 OS에서만 설치할 수 있다. 페이스북은 F8 발표장에서 “올해 말 안에 무료로 누구나 내려받을 수 있게 공개하겠다”라고 밝혔다.
오리가미 스튜디오는 크게 3가지로 나뉜다. 왼쪽에는 최종 결과를 볼 수 있는 화면이 있다. 여기에선 동영상, 애니매이션 상태, 버튼을 클릭한 후 화면 등이 보인다. 예시 기기는 아이폰에서 넥서스까지 다양하게 바꿀 수 있다. 가운데 창에선 각 구성요소의 흐름이나 명령어를 보여주고, 가장 오른쪽에는 레이아웃과 콘텐츠를 수정할 수 있는 창이 있다.
▲오리가미 스튜디오 화면(사진:페이스북 동영상)
오리가미 스튜디오에선 따로 프로그래밍 하지 않고 드래그앤드롭 방식으로 원하는 기능을 추가할 수 있다. 예를 들어, 스마트폰 화면을 오른쪽으로 스크롤 했을때 새로운 동영상이 계속 나오게 하려면 ‘스크롤X’라는 기능을 클릭해 가운데로 끌어오면 된다.
버튼을 클릭했을 때 알림창이 나오는 과정도 쉽게 만들 수 있다. 과거 디자이너들이 아이폰 알림창 예시를 보여주려면 포토샵이나 스케치로 알람창 그림을 만든 후 애니매이션 도구로 복사해 보여줘야 했다. 오리가미 스튜디오에선 안드로이드와 iOS에서 주로 쓰이는 기능들의 UI를 미리 제공한다. 디자이너는 필요한 구성요소를 검색해 바로 추가할 수 있다. UI안에 글씨나 크기도 쉽게 바꿀 수 있다. ‘루프’라는 기능도 인상적이다. 루프는 이미지에 반복적으로 적용해야 하는 환경설정을 한꺼번에 바꿔준다.
▲오리가미 스큐디오. 안드로이드와 iOS에서 자주 쓰이는 레이어가 미리 저장돼 있으며, 불러와 사용할 수 있다(사진 : 페이스북 동영상)
▲iOS 레이아웃 중 ‘알람창’ 을 추가한 결과(사진 : 페이스북 동영상)
▲iOS ‘알람창’ 내용을 실시간으로 바꿀 수 있다(사진 : 페이스북 동영상)
▲여러 사진에 적용할 디자인 요소를 쉽게 복사할 수 있다(사진 : 페이스북 동영상)
페이스북은 현재 ‘오리가미 커뮤니티‘를 통해 사용자의 피드백을 받고 있다. 오리가미 예제 및 안내서는 페이스북 깃허브 페이지를 통해 공개하고 있다.
