Step by Step Series Proto.io : Prototyping Tool (Based web browser) 웹 브라우저 기반의 프로토타이핑 도구 Proto.io 기초부터 활용까지 Proto.io를 사용하여 제작하는 프로토타입, 유저 인터페이스 디자인 웹 브라우저 기반의 프로토타이핑 도구 ‘Proto.io’는 특별한 프로그램의 설치과정이 필요 없이 해당 웹사이트에서 계정을 만들고 곧바로 프로토타이핑 작업을 할 수 있습니다. 특히 다른 프로토타이핑 툴과의 차별점으로 ‘자바스크립트’ 코딩을 지원한다는 점이 있는데 이를 통해 간단하게나마 변수(Variable)등을 활용한 상호작용을 구현할 수 있습니다. 이 점이 대학의 디자인 학과 및 기업의 디자인 부서에서 다른 도구들에 비해 ‘Proto.io’에 보다 관심을 가지게 된 이유라고 할 수 있습니다.

01. 인터페이스(Interface)
유저 인터페이스
대시보드 사용하기
02. 에디터(Editor)
에디터 레이아웃
앱 스크린 제작 실습
03. 애니메이션(Drag, Scroll)
드래그
스크롤
04. 상태(State)
ON/OFF 토글 버튼 제작
05. 트랜지션(Transition)
자동 페이드-인 이미지
06. 인터랙션과 변수(Interaction & Variable)
알기 쉬운 이해
슬라이더를 통한 숫자 제어
숫자의 증감
입력 텍스트 보내기
다이얼 패드(문자의 추가)
07. 변수(Variable)의 활용
다운로드 진행도 숫자 출력