상단영역 탑메뉴 및 미들메뉴/메인메뉴/배너

본문 바로가기

쇼핑몰 검색

[ 월간 DI | IT ]

디자이너를 위한 프로토타이핑 툴, 프로토파이 리뷰 ③

본문

 

이번 글에서는 실무에서 프로토파이 툴을 사용해 모바일 앱 프로토타이핑을 작업하면서 배웠던 것들을 나누려 한다.

 

쉽게 배울 수 있는 툴이어서 배움에 큰 어려움은 없을 줄 알았는데 몇몇 예제들은 이해하는 데 시간이 걸렸다. 

 

몇 개월 전만해도 공식 웹사이트에서 한국어 지원을 하지 않아서 더 시간이 걸린 것도 있다(지금은 한국어 웹사이트가 오픈한 상태). 

 

나름 몇 가지 팁이 생겼고 필자가 잘 기억하기 위해 적어두었는데 아직 프로토파이에 대한 예제가 많지 않아서 공유해야겠다는 생각이 들어 글을 쓰게 되었다.

 

 

① 팁


①-① 투명 버튼


프로토타이핑은 빠르게 작업하고 테스트/수정을 반복해야 하기 때문에 제작에 너무 오랜 시간이 걸려서는 안 된다. 

 

그게 쉽고 빠르게 작업할 수 있는 툴을 사용하는 이유이기도 하다. 그래서 어떠한 버튼에 트리거를 줄 때 버튼 이미지를 따로 떼어 저장한 뒤 불러오는 것은 굉장히 번거로운 일이다.

 

아직 포토샵 임폴트를 지원하지 않기 때문에 이미지를 저장하여 따로 삽입해야 한다(문의해보니 포토샵 임폴트는 추후에 지원 예정이라 함). 

 

버튼이 한두 개도 아니고 수십 개의 버튼 이미지를 관리하기 쉽지 않을뿐더러 프로토타입이라 디자인이 바뀔 가능성도 높아 그때마다 업데이트하기란 보통 일이 아니다.

 

그래서 필자는 이미지 위에 가상의 버튼을 만들어 작업했다. 가상 버튼은 쉽고 빠르게 만들 수 있고 나중에 수정하는 데도 쉬워서 편리했다. 

 

만드는 방법은 앞선 예제에서 설명했듯이 도형의 fill 값을 0으로 한 뒤 버튼 이미지 위에 올리면 된다(Opacity를 0으로 하면 버튼이 아예 인식되지 않는다는 차이가 있다).

 

 

 



 


①-② 투명 버튼 위치가 겹쳐서 오류가 생길 때


투명 버튼을 사용하면 이미지 위에 가상 버튼의 위치가 겹치는 경우가 있다. 

 

예를 들면, 햄버거 버튼을 눌렀을 때 화면에 덮이는 사이드 메뉴의 버튼 위치가 그 뒤에 있는 메인 화면의 위치와 겹치는 경우다. 

 

실제로 모바일에서 메뉴 버튼을 눌렀을 때 그 뒤에 있는 메인 화면의 페이지로 이동하는...

 

 

다음 이야기가 궁금하신가요?
간편하게 바로 구매해서 읽어보세요.

장바구니

오늘본상품

없음

위시리스트

  • 보관 내역이 없습니다.

더 매거진 ㅣ 대표 이기선 ㅣ 서울시 마포구 월드컵북로 502 , 206호(월드컵파크프라자)
사업자등록번호 [ 210-27-93933 ] ㅣ 통신판매업 신고 ( 제 2013-서울마포-0585호 )
TEL : 02-2233-5030 ㅣ FAX : 02-3152-0040 ㅣ 개인정보보호책임자 : 조승현
E-mail : e-magazine@naver.com

ⓒ 더매거진 Corp.