프로토파이톤'19에 참여해보았다

이미지 출처 : design spectrum facebook

처음으로 해커톤에 참여해보았다. 프로토파이를 이용해 어디까지 만들 수 있는지를 실험해보는 시간이었다. 프로토파이톤은 1시부터 8시까지 진행되었다. 약 4시간 30분 정도가 작업시간, 그 이후는 네트워킹과 피자타임, 투표와 그룹별 발표, 수상 순서로 이어졌다. 

Design Spectrum

참여 신청을 하고 나서 무슨 화면을 만들어볼까 고민했다. 나는 프로토파이의 아주 기초적인 트리거만을 사용해왔기 때문에 이번에는 조금 다른 동작들을 구현해보고 싶었다. 그러다 지금 가장 고민하고 있는 서비스가 있어서 플로우를 구현해보기로 했다. 내가 만들어본 프로토타입은 도서대출/반납/연장과 관련된 UI다. 실제로 제품을 만들어볼 계획만 갖고 있었는데, 생각으로 그치지 않고 해커톤을 통해 만들어보기로 했다. 매우 신나는 출발이었다.

프로토파이톤에서 내가 만들어 본 도서 대출 화면

대략적인 화면 구성은 미리 만들어감.

하단 회원증의 카드형태 바꾸기 - Condition

회원증 하단에는 현재 대여한 책의 D-day를 표기하고, 연장 버튼을 눌렀을 때 빠르게 대여기간이 연장되는 인터랙션을 구현했다. 개인화 영역이 접혔을 때는 카드형, 펼쳤을 때는 radius값을 조절하면서 주변 도서관 표시 영역을 제외한 나머지 영역을 꽉 채운 화면으로 변경했다. 이때 회원번호와 바코드는 scale로 확대/축소를 시켰다. 대여도서의 상태가 정상인지 연체인지 표시해주는데, 카드형일 때는 개인화 영역을 요약한 뱃지형으로, 카드가 확장되었을 때는 뱃지를 텍스트형으로 변경하고 책 리스트를 나열하도록 풀었다. 리스폰스는 거의 스케일, 위치 이동, 투명도나 회전 등의 기본적인 것들을 사용했는데, condition을 사용하고 나서부터 꼬이기 시작했다. 꼬였던 이유는 카드가 펼쳐지는 것, 접히는 것 둘 다 조건이 붙어야 하기 때문이다. 나는 펼쳐졌을 때만 조건을 붙였다. 바봉. 프로토파이 스텝 디자이너님과 이야기하며 문제가 해결됐을 때 기뻐서 물개박수를 쳤다. 조건은 카드 우측 상단의 화살표의 rotation이 180, 0일 때의 두 경우를 사용했다.

카메라 레이어로 바코드 스캔 기능 구현하기 - Camera

책의 바코드를 스캔하고 바로 대출이나 반납을 할 수 있도록 화면을 구성해보았다. 바코드 영역을 화면에 맞추면 자동으로 촬영이 되는 인터랙션을 만들려고 했으나 개인화영역의 리스폰스가 꼬여서 시간이 부족했다. 카메라 레이어는 이번에 처음 써 보았는데 레이어를 써 본 것으로도 즐거웠다. 아쉬움은 앞으로 계속 실험해보는 것으로 대신해야지.

도서 검색의 텍스트필드 표출 : 이 영역은 아예 건드리지 못했다. 이거까지 하면 나 완전 앱 다 만든 거임. 아? 

처음으로 Figma에서 그린 화면 임포트 해보기

Figma Import가 궁금해서 불러와봤다. 무리 없이 임포트 되었다. 기분 탓인가? 텍스트 레이어나 벡터 이미지가 전부 비트맵으로 불러지는데 이때 약간 깨져서 들어오는 점이 조금 아쉬웠다. 임포트 할 때 배수를 골라 이미지를 크게 키우는 게 가능했지만, 오히려 figma에서 오브젝트를 이미지로 익스포트 시킨 후에 프로토파이에서 이미지 소스를 바로 가져오는 게 훨씬 깨끗하게 들어왔다. All Layer structure로 불러와도 작업한 레이어 구성 그대로 불러지지는 않는 것 같다. 타입이 다 이미지로 변환되어서 그런 느낌을 받은 것인지, 아무튼 이것도 재미있는 경험이었다.

그리하여 나는 여기까지 작업했다. 프로토파이의 다음 버전이라는 'Egg Tart'의 새로운 기능 중에 엔터프라이즈를 사용해보았다. 팀 프로젝트의 파이를 공유하고 코멘트를 달 수도 있어서 좋았으나 회사에서 프로토타입을 만들지 않는 것은 매우 유감이기에...할말하않. 프로토파이 개인 계정의 클라우드 URL을 공유해본다.

books_congjang - ProtoPie

 

이번 해커톤의 교훈 

• condition을 사용할 때는 무조건 디폴트가 있다. 이때 디폴트 또한 조건으로 넣어야 한다.
• 트리거와 리스폰스에는 네이밍이 필요하다. 기능 구현을 하면 할수록 어떤 동작에 대한 리스폰스인지 알아보기 힘들기 때문이다.
• 질문과 네트워킹은 시야를 넓힐 수 있고 더욱 효과적으로 공부할 수 있다. 혼자 작업하면 쓰던 기능만 쓰게 된다. 
• 다양한 사람들의 생각을 들어보고 영감을 받아서 또 다른 작업을 해보고, 역시 밖으로 나옵시다 여러분.

디자이너들이 빠르게 사용해 커뮤니케이션할 수 있는 툴은 단연 ProtoPie인 것 같다. 이번 행사를 통해서 더 재미있는 인터랙션을 만들어보고싶어졌다. FramerX 공부를 하고 있는 나로서는 몹시 딜레마에 빠지는 것. 물론 이제 프레이머의 용도가 바뀌었기 때문에, ProtoPie도 별개로 생각하는 게 좋을 것 같다. 여러모로 동기부여가 된 행사였다.