코딩 없어도 내 디자인을 구현시킬 수 있는 프로그램
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
Framer
그저께 Framer 프로그램이 업데이트되었습니다. 정말 코딩 없이 프로토타입을 만들기 많이 쉬워진 거 같고요. 결론부터 말씀드리자면 저는 프로그램과 책을 한 권 사서 어제부터 공부를 시작했습니다!
그래서 Framer에 대한 장점과 단점에 대해서는 제가 공부를 좀 더 하고 나서 나눠보도록 하겠습니다.
이번 Framer의 업데이트버전에는오른쪽에 Preview에 있는 element를 움직이면 왼쪽 코드가 저절로 바뀌게 되는 저번 버전보다 코드를 만들어주는 역활이 개선됬습니다
지루했던 어제 야구경기 그러나 10회말 대타로 나온 이대호의 끝내기 홈런! 침체된 시애틀 야구에 불이 붙길...