7월에 ProtoPie는 첫 번째 Dribbble Playoff 대회를 성공적으로 개최했습니다. 전 세계 다양한 디자이너들로부터 약 150개의 프로토타입을 받았고, 그중 많은 작품이 매우 인상적이었습니다. 이처럼 치열한 경쟁에서 우리 심사위원들은 우승자를 뽑는 데 큰 어려움을 겪어야 했습니다. 그 우승자는 바로 ProtoPie의 첫 번째 Dribbble Playoff 우승자, Khonok Lee입니다!
이것은 Khonok가 만든 우승 프로토타입(영상 속의 캘린더 프로토타입)입니다.
대상 수상자: Khonok Lee - YouTube
처음 프로토타입을 살펴봤을 때, 우리는 Khonok Lee가 상호작용 디자인 경험이 풍부한 시니어 디자이너일 것이라고 예상했습니다. 그런데 알고 보니 그녀는 경력이 1년뿐인 주니어 디자이너였습니다. 우리는 그녀가 디자이너로서 졸업 후 어떻게 커리어를 시작했는지, 그리고 어떻게 프로토타이핑 챔피언이 되었는지에 대해 이야기를 나눴습니다.
지금까지 Khonok의 여정을 자세히 살펴보겠습니다.
자기소개를 부탁드립니다.
Khonok: 안녕하세요! 저는 Khonok입니다. 제 경험을 모두와 나눌 수 있어 영광입니다. 제 디자인 경력은 아주 어렸을 때 학교에서 컴퓨터 수업을 들으면서 시작됐습니다. 그때 처음 Photoshop과 Flash를 배웠고, 디자인 도구에 관심을 갖기 시작했습니다. 그래서 Photoshop, After Effects, ProtoPie 같은 도구들을 스스로 공부했고, 대학 시절에는 이에 관한 논문도 발표했습니다. 그 후 디지털 제품을 다루는 UI 디자이너가 되었습니다.
UI 디자이너가 되도록 이끈 계기는 무엇이었나요?
Khonok: 저는 어릴 때부터 디자인을 정말 좋아했지만, UI 디자인에 대한 정보를 많이 얻기는 어려웠습니다. 대학 3학년이었을 때 디자인 공부를 시작했습니다. 그때 지역 디자인 커뮤니티 팟캐스트를 듣고 있었는데, 큰 영감을 받아 결국 UI 디자이너가 되겠다는 목표를 갖게 되었습니다. 너무 신나서 그날 밤 잠도 못 잘 정도였어요!
그래픽 디자인이 예술의 일부라면, UI 디자인에는 합리성이 필요합니다. 즉, 사용자 요구, 기능, 전략 등 여러 요소를 고려해야 한다는 뜻입니다. 저는 제 자신을 꽤 합리적인 사람이라고 생각하는데(최대한 그렇다고 할 수 있죠), 그래서 UI 디자인이 정말 잘 맞았습니다. 문제를 깊이 파고들어 해결하고, 사용자에게 더 나은 경험을 제공할 수 있었기 때문입니다.
아이디어와 이성이 충돌할 때는 어떻게 하시나요?
Khonok: 저는 엔터프라이즈 제품을 다룹니다. 기업의 요구에 맞추기 위해 무엇을 우선순위로 둘지 끊임없이 고민해야 합니다. 회사는 언제나 비용을 줄이고, 이익을 내는 데 있어 효율적이기를 원합니다. 그래서 화려하고 눈길을 끄는 디자인보다는 기능적이고 편리한 디자인 경험을 만듭니다. 아이디어와 이성이 충돌할 때—대체로 기능과 디자인에서 그런 일이 생깁니다—저는 제품 매니저와 함께 작업합니다. 우리는 항상 핵심으로 돌아가 사용자에게 필요한 우선순위가 무엇인지 살펴봅니다.
업무 중에는 늘 창의적일 수는 없어서, 이 Dribbble Playoff 대회에서 흥미로운 무언가를 만들어 보았습니다!
좋은 디자인이란 무엇이라고 보시나요?
Khonok: 저는 개인적으로 단순한 디자인을 선호합니다. 하지만 스타일만으로 ‘좋은 디자인’을 판단할 수는 없습니다. 좋은 디자인은 사용자 요구에서 시작해야 하고, 제품의 정보를 전달하며, 기능을 제대로 제공해야 한다고 생각합니다. 제약 안에서 장점을 최대한 끌어낼 수 있는 디자인이라면 훌륭할 수 있습니다.
디자인할 때는 보통 어떻게 영감을 얻나요?
Khonok: 영감은 한 번에 끝나는 경험이 아니라, 경험이 쌓이는 과정입니다. 저는 매일 Dribbble, Pinterest, Muzli에서 디자인을 봅니다. 새로운 제품도 자주 써보고 최신 디자인 트렌드도 확인합니다. 디자이너로서 세상에 어떤 것이 있는지 꾸준히 업데이트하고, 새로운 것에 열려 있는 태도는 정말 중요합니다.
이어폰과 휴대폰 인터페이스를 포함한 다채로운 그래픽 디자인 모음
디자인 분야에 들어가고 싶은 사람들에게 조언을 해주신다면?
Khonok: 자신의 “색깔”을 찾고 커리어의 방향을 정해야 합니다. 우선 중국에는 디자인을 가르치는 학교가 많지 않습니다. 그래서 디자이너로 일하고 싶다면 유연하게 생각하고, 전통적인 방식 밖에서 자신을 교육하고 발전시킬 다른 방법, 예를 들면 강의, 독학, 부트캠프 등을 찾아야 합니다.
상호작용 디자인 도구로 ProtoPie를 선택한 이유는 무엇인가요?
Khonok: UX에 대한 매우 인기 있는 중국 팟캐스트인 UX Coffee를 통해 ProtoPie를 처음 알게 되었습니다. 유명한 디자이너가 ProtoPie를 자신이 주로 사용하는 인터랙티브 프로토타이핑 도구라고 소개했습니다. 다행히 Dribbble에서 ProtoPie로 만든 많은 프로토타입을 찾을 수 있었죠. 그래서 저도 ProtoPie를 직접 사용해 보고, 인터랙티브하면서도 현실감 있는 프로토타입을 만들어 보고 싶었습니다. ProtoPie가 macOS와 Windows에서 모두 동작한다는 점도 저에게 매우 유용했습니다.
제가 특히 눈에 띄는 점은 상호작용 디자인 아이디어를 표현할 수 있는 기능이 매우 다양하고, 그것들이 모두 사용하기 쉽다는 것입니다. 이 인터뷰의 두 번째 부분에서는 제 상호작용 디자인 아이디어와 그것을 프로토타입으로 어떻게 구현하는지 더 이야기해 보겠습니다.
첫 번째 ProtoPie Dribbble Playoff 우승 여정
ProtoPie를 어떻게 혼자서 익히셨나요?
Khonok: ProtoPie 웹사이트에서 많은 학습 자료를 찾을 수 있었습니다. 많은 튜토리얼과 문서가 잘 정리되어 있었습니다. 그중에서도 Design & Code의 Meng To가 만든 강좌를 강력히 추천합니다. 초보자부터 고급 기능까지 아우르는 알찬 내용으로 구성되어 있습니다. 여기 ProtoPie 강좌 링크가 있고, 더 많은 자료가 필요하시면 ProtoPie 웹사이트를 방문하세요!
고충실도 프로토타이핑 강좌를 보여주는 온라인 학습 플랫폼 랜딩 페이지
Dribble playoff를 위한 프로토타입은 어떻게 디자인하셨나요?
Khonok: 업무상 꼭 해야 하는 일이 아니었기 때문에 특정 제품을 고려할 필요가 없었습니다. 저는 그저 창의적이고 싶었고 이 대회를 즐기고 싶었기 때문에, 순수하게 흥미로운 인터랙티브 아이디어와 그것을 효율적으로 표현하는 방법에 집중했습니다. 예를 들어, 저는 레코드판에서 영감을 받았습니다. 레코드의 사용 방식을 생각해 보고, 레코드가 재생되는 장면을 상상한 뒤, 이 프로토타입—Music Player—를 만들었습니다. 저는 이런 과정이 디자인을 연습하는 좋은 방법이라고 생각합니다!
뮤직 플레이어 프로토타입 - YouTube
Khonok의 프로토타이핑에서 얻는 몇 가지 팁 & 튜토리얼
Dribbble Playoff 우승 프로토타입, Calendar
모바일 캘린더 프로토타입을 체험하는 사람
Calendar를 체험해 보세요
이 프로토타입을 만들게 된 영감은 무엇이었나요?
Khonok: 달력이나 일정을 더 편리하게 확인할 수 있도록 만들었습니다. 멀티터치 제스처를 사용해 이 프로토타입을 구현할 수 있었습니다. 이 상호작용은 정말 멋졌고, 다른 어떤 디자인 도구에서도 만들 수 없었던 것이었습니다! 보통은 사진에 쓰이지만, 다른 맥락에 적용하면 혁신적인 결과물을 만들 수 있습니다.
Music Player
뮤직 플레이어 프로토타입을 체험하는 사람
Music Player를 체험해 보세요
상호작용이 매우 부드럽게 느껴지는데, 어떻게 만드셨나요?
Khonok: 먼저 상호작용을 더 작은 단위로 나눴습니다. 자세히 보면, 비닐에 반사된 빛의 방향이나 위치는 변하지 않는다는 것을 알 수 있습니다. 비닐 자체도 회전하지 않고, 가운데 별 이미지가 바뀌는 것뿐입니다! 이제 보이시나요?
카드를 슬라이드할 때 비닐과 그 커버가 함께 움직이는 것을 볼 수 있습니다. 저는 ProtoPie에서 여러 트리거와 반응을 사용해 이를 만들었습니다. 먼저 카드에 Drag 트리거를 적용했습니다. 그런 다음 Move 반응을 추가해서 터치하면 카드가 좌우로 움직이도록 했습니다. 다음으로 Chain 트리거를 추가해 카드, 비닐, 커버의 위치를 연결했습니다. 이렇게 하니 카드의 위치를 바꿀 때마다 다른 구성 요소들도 함께 움직였습니다. 마지막으로 3D Rotate 반응을 사용해 카드의 각도가 바뀌도록 했습니다. 또한 Scale 반응을 추가해 카드는 더 작아졌습니다. Chain 트리거를 미리 사용했기 때문에, 카드가 움직일 때 속성도 함께 바뀌는 것입니다!
ProtoPie Studio의 Chain 기능 화면
비닐을 터치해 프로토타입의 시계를 조절하는 디자인은 무엇을 바탕으로 한 것인가요?
Khonok: DJ가 하는 전형적인 제스처를 떠올려 프로토타입에 적용했습니다. 비닐을 터치하면 3D 각도가 변해서, 마치 제가 레코드를 잡고 있는 것처럼 보입니다!
뮤직 플레이어 프로토타입을 체험하는 사람
오디오북
오디오북 프로토타입의 다양한 상호작용을 보여주는 GIF
이 오디오북을 체험해 보세요
페이지를 넘기는 상호작용은 어떻게 만드셨나요?
Khonok: 전혀 어렵지 않습니다! 손가락의 움직임을 각 페이지에 연결하기만 하면 꽤 쉽게 만들 수 있습니다!
먼저 After Effects로 책 페이지 이미지를 만들고 PNG로 변환했습니다. 이미지를 반복하면 애니메이션이 됩니다. 그래서 PNG 파일을 ProtoPie에 가져와 순서대로 나열했습니다.
ProtoPie Studio의 PNG 파일 목록
다음으로 오른쪽 아래 모서리에 Rectangle 컴포넌트를 추가하고 투명도를 1%로 설정했습니다. 그런 다음 여기에 트리거와 반응을 적용했습니다.
소설의 표지
Chain 트리거를 추가해 Rectangle 컴포넌트를 각 PNG 이미지의 투명도와 연결했습니다. 다음으로 각 이미지에 Opacity 반응을 추가했습니다. 이제 페이지를 넘길 준비가 끝났습니다. 왼쪽으로 드래그하기만 하면 됩니다!
ProtoPie Studio의 Opacity 레이어 목록
제 경험이 이 글을 읽는 모든 분들에게 도움이 되기를 바랍니다! 코딩 없이도 매우 인터랙티브한 프로토타입을 만들고 싶다면 ProtoPie 웹사이트를 방문해 무료로 프로토타이핑을 시작해 보세요.
또한 ProtoPie는 학생, 교사, 학교를 위한 무료 사용 등 교육 지원도 제공합니다! 관심이 있다면 여기를 클릭해 신청하세요. ProtoPie를 무료로 체험할 기회를 놓치지 마세요!
