brunch

매거진 좋은 디자이너 되기

라이킷 107 댓글 3

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by Kenny Hong Apr 15. 2016

코딩 없어도 내 디자인을 구현시킬 수 있는 프로그램

Principle과 Framer를 아시나요?

점점 Interaction과 애니메이션이 다양해지는 시대 가운데, 저와 저의팀도 어떻게 하면 좀 더 유저들에게 재밌고 즐겁게 해줄 수 있는 Interaction Design에 대해 관심이 많은 가운데 문제는 "시간"이었습니다. 저번에 말씀드린 대로 After Effects를 쓰기는 하지만, 정말 눈코 뜰 새 없이 바쁜 프로젝트 가운데 재밌는 interaction이 첨부된 디자인은 뒷전으로 두어야 될 때가 많았기 때문이죠.

출처: https://dribbble.com/Jung_Hanna

하지만 오늘 제가 이야기 나누고 싶은 것은 이런 부분을 이야기하려는 것은 아닙니다. 제가 전에 소개해드린 상황별 디자인 프로그램 정리에서 나눈 프로그램들에는 결국 보여줄 수 있는 한계가 있었는데요. 오늘 소개해 드릴 프로그램들은 좀 더 interaction을 다양하게 할 수 있는 프로그램들에 대해서 이야기 나누려고 합니다.

Principle

저는 사실 이 프로그램을 처음 접하게 된 거는 저번 주였습니다. 우연히 드리블에서 이 프로그램을 통해 만들어진 디자인 작품을 봤다가 괜찮다고 생각이 돼서 저번 주부터 trial을 써보고 있는데요. 지금 아직 launch가 되지 않는 회사 프로젝트에 사용 중이라 제가 만든 example을 보여드릴 수 없는 대신 Principle 사이트에 있는 이미지로 설명을 드리도록 하겠습니다.

일주일 정도 principle 프로그램을 사용 뒤 제 reaction은 꽤 만족 이였습니다. 위에 보이는 에니매이션들은 아주 쉽게 Principle 프로그램에서 만들 수 있고요. 홈페이지에 있는 소개 비디오 한번 보고 특별한 tutorial 없이 쉽게 프로그램을 쓸 수 있었습니다. 무엇보다도 Sketch에서 작업한 것들을 copy and paste만 하면 저절로 불러올 수 있었고요.

장점

바로 업데이트되는 Preview 스크린

오른쪽 상단 프리뷰 스크린으로 실시간 업데이트 되고 녹화도 가능하다.

Principle 프로그램에서 무엇보다 만드는 타이밍을 단축시킬 수 있던 요소중 하나는 바로 Preview 스크린이었습니다. 특별히 rendering 할 필요 없이 바꾸는 즉시 프리뷰 스크린에서 업데이트가 되어서 어느 프로그램보다 만드는 시간을 단축시킬 수 있었던 거 같습니다.

Dribbble에도 최적화

Preview 스크린녹화가 끝나면 mov 나 gif으로 save가능

팀원들에게 만든 것을 share 하려면 파일을 만들어야겠죠? Principle에서는 mov와 gif 의 옵션이 주어지는데요. 무엇보다 gif에는 dribble에 올릴 수 있는 옵션이 있어서 800 X 600 이 아니더라도 위에 예처럼 카드 형식으로 만들어서 dribbble에 올리기 쉽게 export를 해주는 점에 참 만족했었습니다.

단점

웹사이트 디자인으로는 글쎄?

필자는 간단한 클릭 status에 관한 페이지를 만들려고 하는데에도 6페이지가 필요했다

전체적인 flow를 설명하기에는 확실히 맞지 않는 프로그램 같습니다. Invision이나 Adobe XD에서 쉽게 표현할 수 있는 웹페이지 flow나 클릭에 대한 status를 구현하는 데는 아직 적합하지 않아 저 같은 경우에는 특정 element에 대한 interaction을 보여주는 데만 이 프로그램을 썼습니다. 즉 Principle은 이때까지 우리가 쓰던 디자인 프로그램들을 대처해주는 것이 아닌 결국 상황별 디자이너가 잘 선택해서 쓸 수 있는 추가 프로그램이라고 말하면 좋을 거 같네요.

프로그램 가격: $99

http://principleformac.com/