인터랙티브 프로토타입 숙명여자대학교 임순범.

Slides:



Advertisements
Similar presentations
CI(Continuous Integration) 이학성. C ontinuous I ntegration? 2 지속적으로 품질관리 를 적용하는 과정 개발자가 기존 코드의 수정 작업 을 시작할 때, 코드 베이스의복사본을 받아서 작업을 시작하면서 코드의 변경.
Advertisements

UX, RIA, 그리고 … Silverlight 공도소프트
Korea Virtual Payment 모바일 안전결제 (ISP) 서비스 모델 - iPhone 한국버추얼페이먼트㈜ 기술연구소
Ⓒ sblim, 2010 강좌 소개 사용자인터페이스설계 2010 년 2 학기 숙명여자대학교 임순범 1.
.Net History. Visual Studio.Net 2002 /.Net Framework 1.0 제품의 버전 / 특징 2002 년 - Visual Studio.Net 2002 /.Net Framework 1.0 첫 통합 개발 환경 - C# 언어 등장 (C# 1.0)
난이도 : 초급 제1장 앱 인벤터 소개 및 준비.
스케치 기법 & 비디오 프로토타입 2010년 2학기 숙명여자대학교 임순범.
컴퓨터와 인터넷.
목 차 C# 언어 특징 .NET 프레임워크 C# 콘솔 프로그램 C# 윈도우 프로그램 실습 프로그래밍세미나 2.
그래픽스 및 웹 응용설계 자기소개 멀티미디어 학과 4학년 장정환.
30강_웹문서 제작 팁 웹문서 제작 팁 Lecturer Kim Myoung-Ho Nickname 블스
Image & Video processing
Power Java 제3장 이클립스 사용하기.
Web Service Computing and Practice_
3조 오세혁 김문환 김용현.
콘텐츠 제작 프로젝트 [교재] - OpenGL 프로그래밍 가이드, 제4판, Dave Shreiner, Mason Woo, Jackie Neider, Tom Davis 공저, 남기혁 역, 정 보문화사, [참고자료] OpenGL Programming.
데이터베이스 및 설계 금오공과대학교 컴퓨터공학부 이 이섭.
나민영 서경대학교 컴퓨터공학과 CGVR Lab 같이만들어보자 5주차 OpenCV 설정 및 기초.
강좌 소개 웹프로그래밍기초 숙명여자대학교 임순범.
소개. 소개 Silverlight, WPF, RIA, UX.... ? Silverlight, WPF, RIA, UX.... ? IT환경의 진화.
Visual Basic .NET 처음 사용하기.
FTP 프로그램 채계화 박재은 박수민.
전광판 어플 크레파스통 도상미 박아란 이민영.
제 2 장 WML 시뮬레이터 및 무선인터넷 서버 설치
01. 팀 명 제품 소개 및 슬로건 “작품명” 2017 제 9회 창의설계경진대회 Team Information
Hi-fi Prototypes (Interactive Prototypes)
제 1장. 멀티미디어 시스템 개요.
인터랙티브 프로토타입 숙명여자대학교 임순범.
SK Telecom 매출 통계 시스템의 SQL Server Reporting Services 적용사례
스크래치 언어 이해 스크래치 이용법 습득 고양이가 말을 하며 움직이는 예제 작성
멀티미디어 기본+활용 제대로 배우기.
Wireless Java Programming
엔터테인먼트학과 오광 조장 : 이아름 조원 : 김우람 최영은
UI 설계 및 평가 (2011년 1학기) 숙명여자대학교 임순범
지도교수 : 이상훈교수님 학과 : 컴퓨터시뮬레이션 학번 : 이름 : 진선미
15차시_스마트 애플리케이션 기획 스마트 애플리케이션 모형 제작 및 발표.
DSU Nanumi FTP - Network Programming 염대영
Toto’s diary UX개발 2011 Spring UI설계 및 평가 S-Moon 서승아 / 원지수 / 이경주
컴퓨터소프트웨어설계및실험 년 1학기 실험계획 -.
Lab 1 Guide: 교재 2장 DrawX ( 쪽)
인터랙티브 프로토타입 숙명여자대학교 임순범.
ASP.NET AJAX / AJAX Control Toolkit 응용 2008 컴퓨터공학실험( I )
웹디자인
UI 설계 및 평가 (2011년 1학기) 숙명여자대학교 임순범
인터랙티브 프로토타입 2011년 2학기 숙명여자대학교 임순범.
LabVIEW WiznTec 주임 박명대 1.
플래시 애니메이션 제작과정 (E-러닝) Lee Sunghoon 1.
UX 기반 소프트웨어 및 디지털콘텐츠 UI 설계
인천대학교 웹과 인터넷 수업 개요 및 내용 소개.
Kangwon National Univ. | Computer Science
컴퓨터 소프트웨어 설계 및 실험 년 1학기 실험계획 -.
Low-fi 프로토타입 숙명여자대학교 임순범.
컴퓨터공학실험 (I) 년 1학기 실험계획 -.
Self Introduction Template PowerPoint
오토베이스9 사용자 라이브러리 오토베이스 교육센터 그래픽 모듈 설정과 화면전환에 대하여 자세히 알아본다. <목차>
암호학 응용 Applied cryptography
네트워크 프로그래밍 (모바일 주문 프로그램 )
컴퓨터 소프트웨어 설계 및 실험 년 1학기 실험계획 -.
Low-fi 프로토타입 숙명여자대학교 임순범.
2D 게임프로그래밍 프로젝트 발 록 런 김대호.
기초C언어 제2주 실습 프로그래밍의 개념, 프로그램 작성 과정 컴퓨터시뮬레이션학과 2016년 봄학기 담당교수 : 이형원
Soft computing Laboratory
프로그래밍 언어 학습을 위한 가상실습환경 창원대학교 이수현.
멀티미디어 활용 -플래시 CS3 류 정 남.
강좌 소개 멀티미디어의 이해 2010년 1학기 숙명여자대학교 임순범.
1장 C 언어의 개요 C 언어의 역사와 기원 C 언어의 특징 프로그램 과정 C 프로그램 구조 C 프로그램 예제.
학부 컴퓨터공학부 교육과정 (학부) 2학년 4학년 3학년 1학년 1학기 2학기 IPP 자격과정 전공트랙
인터랙티브 프로토타입 2012년 1학기 숙명여자대학교 임순범.
Low-fi 프로토타입 2012년 1학기 숙명여자대학교 임순범.
실습#5 인터랙티브 프로토타입 2011년 2학기 숙명여자대학교 임순범.
Presentation transcript:

인터랙티브 프로토타입 숙명여자대학교 임순범

교재 NHN Design Studio Univ. of Washington, James Landay 교수 홈페이지 UI Design 강좌 홈페이지  http://www.cs.washington.edu/education/courses/440/08au/ NHN Design Studio http://dev.naver.com/projects/dstudio

Low-fi 프로토타입의 문제점 현실감이 부족한 모습 실감있는 입출력 재현에 부족 사용자가 UI 평가에 어려운 부분 종이에 그린 그림으로 화면의 실제 모습을 연상하기 어렵다 손 조작성 부족: 인간공학 측면에서 종이와 타겟 장치는 다르다. 실감있는 입출력 재현에 부족 인터랙티브 피드백이 부족 마우스 조작 재현 어려움, “컴퓨터”는 많은 수의 종이로 조작 늦은 반응 : 실시간 컴퓨팅은 거의 불가능 시간에 대한 정확한 측정은 불가능 시뮬레이션 곤란: 하이라이트, 드래깅, 다이나믹 위젯(팝업 등) 사용자가 UI 평가에 어려운 부분 인식하기 좋도록 잘 그리기 곤란 행위유발성(affordance) 도출 어려움

스케치 기반 UI 프로토타입 작성 도구 Outpost Denim Activity Designer Topiary Suede

Hi-fi 프로토타입 필요성 drag & drop 프로토타입 도구가 적당 아이디어에 대해 사용자 테스트와 관찰은 반드시 필요 페이퍼 목업으로는 불충분 : 드래깅? 인터페이스의 실감성 부족 지금 시점에서 최종 앱을 개발한다면 손해 UI에서의 변경은 코드 개발에서 막대한 변경 및 많은 시간 소요 drag & drop 프로토타입 도구가 적당 단, 디자인 평가를 여러 번 반복한 이후 프로토타입을 코딩과 분리 프로토타입 UI 작성이 용이 : 테스트의 반영, 일관성 있는 UI 작성 다양한 전문가/사용자를 개입시키기 용이 변경 및 유지 관리가 용이 어플 개발의 신뢰성 증가 : 어플 코딩 전 도구 내에서 오류 수정

프로토타입 작성도구(역사) HyperCard Director 매킨토시, by Bill Atkinson 메타포 : 버튼 클릭 시 카드 넘김 위젯 및 도구 팔레트 제공 Director 원래 멀티미디어 저작도구 : 지금도 사용 위젯이나 콘트롤 없는 동영상/애니메이션 등 통합 화면 제작 Cast, Score, Behavior 개념 적용, 스크립트 언어 제공 위젯 없는 UI 또는 어플리케이션 내부 구현 모습에 적절 최근 Flash 사용 증가 Overview of events in time

UI Builders Visual Basic 다양한 위젯 제공, 간단한 언어로 제작 가능 MS Visual Studio .NET, JBuilder, PowerBuilder... 다양한 위젯 제공, 기존의 프로그래밍 언어와 연동 Web Editor 나모웹에디터, Adobe Dreamweaver, FrontPage 위젯, 이미지, 이벤트 등 화면 배치 웹사이트 혹은 모바일웹 응용 개발 시 강력한 UI 개발 도구 모바일 앱 개발에도 유용

프로토타입 도구 vs. UI Builder Hi-fi 프로토타입 두 가지 유형: 프로토타입 도구 vs. UI builders 어플리케이션 내부(“insides”)는 무시

최근 사용중인 GUI 프로토타입 도구 Balsamiq Mockups creates high level mockups in a "hand drawn" style http://www.balsamiq.com/products/mockups/desktop 초기단계(Low-fidelity) 프로토타입: 아이디어 탐색에 효과 Adobe Flex, Flash Catalyst (Thermo), Fireworks CS4 prototypes based on designers work (e.g. photoshop, illustrator files) http://labs.adobe.com/technologies/flashcatalyst/ 인터랙티브(Interactive) 프로토타입: 인터랙션 정의에 효과 Axure, OmniGraffle, Visio Stencil 상세한(High-fidelity) 프로토타입에 적합

Microsoft Expression Blend, Microsoft SketchFlow high resolution & completed UI, rapid low resolution UI http://www.microsoft.com/expression/products/ Pencil Free plug-in to Firefox 3 and standalone application Create mockups and export to PNG images http://www.evolus.vn/Pencil/Home.html 그 외 Fluidui : https://www.fliiudui.com Codiqa : http://docs.codiqa.com Mockflow : http://www.mockflow.com

NHN Design Studio : 서비스 종료 상세한(High-fidelity) 프로토타입에 적합, 사용 간단 http://dev.naver.com/projects/dstudio Naver protoNow : 웹, 앱 프로토타이핑 툴 : 모바일과 PC 다양한 라이브러리와 인터랙션 기능, URL과 QR코드로 빠른 산출물 공유 http://dev.naver.com/projects/prtnow 다음카카오 오븐 온라인 프로토타이핑 툴 https://ovenapp.io/

http://dev.naver.com/projects/prtnow