주니어 디자이너에서 프로토타이핑 챔피언으로
Dribbble Playoff의 우승자 Khonok Lee님을 소개합니다
주니어 디자이너에서 프로토타이핑 챔피언으로*Brunch 내 오류로 인해 몇몇 gif는 사진으로 대체되었음을 알려드립니다.
작년 7월, ProtoPie는 처음으로 Dribbble Playoff 콘테스트를 성공적으로 개최하였습니다. 전 세계 디자이너로부터 약 150개의 프로토타입을 받았는데요, 훌륭한 디자인들이 많아 경쟁이 매우 치열했습니다. 심사숙고 끝에, 저희 심사위원들은 Khonok Lee 님을 ProtoPie의 첫번째 Dribbble Playoff 우승자로 선정했습니다.
아래 영상을 통해 콘테스트 우승자 Khonok 님께서 제작하신 프로토타입을 확인해 보세요.
(이번 콘테스트의 우승작인 캘린더 프로토타입은 영상 내 확인하실 수 있습니다.)
https://www.youtube.com/watch?v=Iu30BV6AoeU&t=7s
처음에 이 프로토타입을 봤을 때, Khonok 님이 인터랙션 디자인 경험이 많은 시니어 디자이너일 것이라 생각했습니다. 그런데 알고 보니, 경력 1년차의 주니어 디자이너였어요. 저희는 Khonok 님과 졸업 후 어떻게 디자이너로써 커리어를 시작하게 되었는지, 그리고 어떻게 프로토타이핑 전문가가 되었는지에 대해 이야기를 나눠보았습니다.
Khonok 님의 지금까지의 여정에 대해 더 자세히 알아볼까요?
자기소개 한 번 부탁드려요.
Khonok: 안녕하세요, 저는 Khonok이라고 합니다. 저의 경험을 이렇게 나눌 수 있게 되어 영광입니다. 저의 디자인 커리어는 제가 어렸을 때 학교에서 컴퓨터 수업을 들으며 시작되었는데요. 그 때 당시, Photoshop과 Flash를 다루는 방법을 배우며 디자인 툴에 대한 흥미를 처음 가지게 되었어요. 그 이후로 Photoshop, After Effects, 그리고 ProtoPie 같은 툴들을 독학했고, 대학생 시절 디자인 툴들에 관한 논문을 펴내기도 했어요. 졸업 후에는 디지털 프로덕트를 주로 설계하는 UI 디자이너가 되었어요.
UI 디자이너가 된 동기가 무엇인가요?
Khonok: 저는 어렸을 때부터 디자인을 굉장히 좋아했어요. 하지만, UI 디자인에 대해서 정보를 얻기는 쉽지 않았어요. 저는 대학교 3학년부터 디자인을 공부하기 시작했어요. 그때 당시 로컬 디자인 커뮤니티 팟캐스트에서 UI를 주제로 진행하는 토크를 듣게 되었는데, 토크 내용이 너무 흥미롭더라고요. 그 이후로 UI 디자이너가 되기로 결심을 했어요. 어찌나 신나던지 그날 밤엔 잠을 이룰 수가 없었어요!
그래픽 디자인은 미적인 감각이 요구된다면, UI 디자인은 합리성이 요구되요. 즉, 유저의 니즈, 기능성, 전략 등 많은 부분들을 고려해야 하지요. 저는 최대한 합리적인 사고를 하고자 노력하는 사람인데요. 그래서 문제를 깊게 이해하고 해결함으로써 유저들에게 더 좋은 경험을 제공할 수 있는 UI 디자인이 저에게 매력적으로 다가왔던 것 같아요.
아이디어와 근거가 서로 맞지 않을 때는 어떻게 하시나요?
Khonok: 저는 기업용 제품을 다루기 때문에, 기업의 필요에 맞추기 위해 지속적으로 어디에 우선순위를 두어야 하는지에 대해 고민하게 되요. 기업은 이윤 창출을 위해 비용을 줄이고 효율성을 높이고 싶어해요. 때문에 눈에 확 띄고 화려한 디자인 보다는 기능성이 높고 편리한 디자인 경험을 구현하게 되지요.
기능과 디자인 부분에서 아이디어와 근거가 부딪히는 경우가 종종 발생하는데, 이런 경우 저는 프로덕트 매니저님과 중심이 무엇인지, 우리 유저에게 가장 필요한 것이 무엇인지 생각하며 같이 문제를 해결해요.
기업용 디자인을 할 때는 항상 저의 창의성을 드러낼 수가 없기 때문에, 이번 Dribbble Playoff 콘테스트를 통해 재미있는 디자인을 만들었어요.
Khonok 님에게 좋은 디자인의 기준은 무엇인가요?
Khonok: 저는 개인적으로 심플한 디자인을 선호해요. 그러나 스타일은 좋은 디자인의 기준이 될 수는 없어요. 좋은 디자인은 유저의 니즈, 제품의 정보 전달, 그리고 기능을 제공하는 것에서부터 시작해야 한다고 생각해요. 간결하면서도 강점을 극대화하는 디자인이 좋은 것 같아요.
디자인 하실 때 보통 어디서 영감을 얻으시나요?
Khonok: 영감은 한번의 경험에서 끝나는 것이 아니라 경험이 차곡 차곡 쌓이면서 생기는 것이라고 생각해요. 저는 매일 Dribbble, Pinterest, Muzli에서 디자인들을 봐요. 새로 나온 제품들을 사용해 보기도 하고, 최신 디자인 트렌드들을 보기도 하고요. 디자이너로써 열린 마음을 가지고 어떤 디자인들이 유행하고 있는지 계속해서 알아가는 것은 매우 중요하다고 생각해요.
이어폰, 폰 인터페이스 등 다채로운 그래픽 디자인 큐레이션디자인을 시작하고자 하는 사람들에게 조언을 한다면?
Khonok: 스스로의 색깔을 발견하고, 어떤 방향으로 커리어를 쌓아나갈 것인지 방향성을 정해야 합니다. 우선 중국에는 디자인을 가르치는 학교들이 많이 없어요. 그래서 디자이너가 되기 위해 다른 길을 찾을 수 있는 유연성을 가져야 하고, 온라인 수업, 독학 혹은 부트캠프 등을 통해 전통적인 방법을 벗어나 스스로 학습하고 역량을 개발할 수 있어야 해요.
인터랙션 디자인 툴로 ProtoPie를 선택하신 이유가 있을까요?
Khonok: 저는 중국의 유명한 UX 관련 팟캐스트인 UX Coffee를 통해 처음 ProtoPie를 알게 되었는데요. 어떤 유명한 디자이너분께서 메인 인터랙티브 디자인 툴로 사용하고 계시는 ProtoPie를 소개하셨어요. 다행히 Dribbble을 통해 ProtoPie 로 제작된 프로토타입을 많이 찾을 수 있었고, 저도 직접 인터랙티브하고 현실적인 디자인을 구현해보고 싶어서 ProtoPie를 사용해보게 됐어요. ProtoPie가 Windows와 macOS 둘다 지원이 된다는 점도 저에겐 매우 유용했어요.
가장 제 눈에 띄었던 것은, 많은 인터랙션 디자인 아이디어를 어렵지 않게 구현할 수 있다는 점이었어요.제가 어떻게 저의 인터랙션 디자인 아이디어를 프로토타입으로 구현시키는 지에 대해서는 인터뷰 두번째 파트에서 더 자세히 이야기해볼게요.
Dribbble Playoff 의 첫번째 우승자가 되기까지
ProtoPie는 어떻게 독학했나요?
Khonok: ProtoPie 웹사이트를 통해 다양한 학습 자료들을 찾을 수 있었어요. 웹사이트에 보면 많은 튜토리얼이나 문서들이 굉장히 체계적으로 잘 정리가 되어 있어요. 그 중에서도 저는 Design & Code 의 Meng To가 제작한 코스를 추천드려요. 초급자들을 위한 컨텐츠부터 고급 기능 제작법까지 훌륭한 컨텐츠를 제공하거든요. 이 링크를 통해 ProtoPie 코스를 확인해 보시고, 다른 리소스가 더 필요하시면 ProtoPie 웹사이트를 방문해 보세요.
Hi-fi 프로토타이핑 코스의 온라인 러닝 플랫폼 랜딩페이지Dribbble playoff를 위한 프로토타입은 어떻게 디자인했나요?
Khonok: 제가 업으로 디자인하는 것이 아니었기 때문에 특정한 제품을 고려할 필요가 없었어요. 이 대회에서는 그냥 즐거운 마음으로 저의 창의성을 발휘하고 싶었기 때문에, 주로 흥미로운 인터랙티브 아이디어를 효과적으로 표현하는 방법에 중점을 많이 뒀어요. 예를 들면, 저는 레코드판에서 영감을 받았어요. 레코드가 어떻게 사용되는지 생각하고, 레코드의 화면이 재생되는 장면을 상상하면서 뮤직 플레이어 프로토타입을 탄생시켰어요. 이런 프로세스를 거치는 것은 디자인을 연습하기에 좋은 것 같아요!
https://www.youtube.com/watch?v=z4CGorJRC6E&feature=emb_logo
Khonok님의 프로토타이핑 팁과 노하우
Dribbble Playoff의 우승작, 캘린더
모바일 캘린더 프로토타입을 사용중인 유저캘린더 사용해보기
이 프로토타입을 만들게 된 동기는 무엇인가요?
Khonok: 캘린더나 스케쥴 확인을 더 편리하게 하기 위해 이 프로토타입을 제작했어요. 멀티 핑거 제스처 기능을 사용해서 이 프로토타입을 만들었는데, 이 기능은 다른 툴에서는 구현해낼 수 없는 정말 멋진 기능이에요. 보통 사진에 많이 사용되는 기능인데, 다른 컨텍스트에서 사용하면 매우 혁신적인 작품을 만들어낼 수 있을 것 같네요.
뮤직 플레이어
뮤직 플레이어 프로토타입을 사용중인 유저뮤직 플레이어 사용해보기
인터랙션이 상당히 부드럽네요. 어떻게 이 인터랙션을 구현했나요?
Khonok: 우선 인터랙션을 작은 부분들로 나눴어요. 자세히 보시면, 레코드판에 반사되는 빛의 방향이나 포지션은 바뀌지 않는다는 것을 확인하실 수 있을 거에요. 레코드판 자체는 돌아가지 않고 가운데에 있는 스타의 이미지만 변경이 되는데, 보셨나요?
카드가 넘어갈 때, 레코드판과 커버가 같이 움직이는 걸 보셨을 거에요. 이 인터랙션은 ProtoPie에서 몇가지의 trigger와 response를 사용해서 구현했어요. 우선, 카드에 Drag trigger를 적용하고 Move response를 추가해서 화면을 터치하면 카드가 옆으로 움직일 수 있도록 설정했어요. 그리고 Chain trigger를 사용해 카드와 레코드판 그리고 커버에 포지션을 연결시켜, 카드의 포지션이 변경될 때 다른 부분들도 같이 움직일 수 있도록 만들었어요.
마지막으로, 3D Rotate response를 사용하여 카드의 각도를 변경시키고, 카드에 Scale response를 추가해서 크기가 작아지도록 구현했어요. 제가 Chain trigger를 먼저 적용했기 때문에, 카드의 움직임과 동시에 컴포넌트를 변경시킬 수 있었어요.
ProtoPie Studio 내 chain 기능 스크린샷레코드판을 터치하여 재생시간을 조정하는 디자인은 어떻게 만들어졌나요?
Khonok: 보통 DJ 들이 하는 제스처를 생각하면서 프로토타입에 적용시켰어요. 레코드판을 터치하면 3D 각도가 변경되도록 설정해서, 실제로 레코드를 터치해서 돌리고 있는 것처럼 보이도록 제작했어요.
뮤직 플레이어 프로토타입을 사용중인 유저오디오북
오디오북 프로토타입 내 다양한 인터랙션을 보여주는 gif오디오북 사용해보기
페이지가 넘어가는 인터랙션은 어떻게 구현했나요?
Khonok: 별로 어렵지 않아요! 각 페이지에 손가락의 모션을 연결시키면 그 다음부터는 쉽게 구현할 수 있답니다.
우선 After Effects를 이용해서 책 페이지의 이미지를 만들고, 만든 파일들을 PNG로 변형시켰어요. 그 다음, PNG 파일을 순서대로 ProtoPie에 나열시켜 애니메이션 효과를 만들었어요.
ProtoPie Studio내 PNG 파일 리스트그 다음, Rectangle 컴포넌트를 추가하고 하단 우측 코너에 명도를 1%로 설정했어요.
소설의 커버 페이지각 PNG 페이지의 명도와 Rectangle 컴포넌트를 연결하기 위해 Chain trigger를 추가하고, Opacity response 를 추가해서 왼쪽으로 드래그하면 페이지를 넘길 수 있도록 만들었어요.
ProtoPie Studio 내 opacity layer 리스트이 포스트를 읽는 모든 독자분들께 저의 경험이 도움이 되었길 바래요! 코딩 없이도 매우 인터랙티브한 프로토타입을 제작하고 싶다면, ProtoPie 웹사이트를 통해 무료로 시작해보실 수 있답니다.
그리고 학생, 교사 그리고 학교에 ProtoPie를 무료로 제공하는 교육 지원도 운영하고 있어요. 관심이 있으시면 이 링크를 통해 지원해 보세요. ProtoPie를 무료로 사용할 수 있는 기회를 놓치지 마세요!
