Transcript 09_Rapid_Prototyping_Tools

Human
Computer
Interface
RAPID PROTOTYPE
TOOLS
Tack-Don Han
Media System Lab., Yonsei University
http://msl.yonsei.ac.kr
Rapid Prototyping Tools
• Rapid Prototyping Tools 소개
–
시스템 설계 및 모델링(Modeling) 도구
•
•
•
•
UML (Unified Modeling Language)
팀원간 의사소통을 위한 표준적인 커뮤니케이션 도구
일종의 설계도 문서 역할
프로세스의 흐름도, 모듈별 역할 등을 정의하고 설계
–
–
문제점 들을 사전에 파악하고 개발시 지침서 역할을 할 수 있음
웹 2.0 프로그래밍 도구
• 상상하는 것들을 웹 상에서 가능하게 하는 새로운 트랜드와 개발 언어
• 에이잭스 (Ajax : Asynchronous JavaScript and XML)
–
인터랙션 디자인 도구
• 플래시(Flash)
• 애니메이션 제작 도구로 더 널리 쓰임
• 마우스와 키보드, 캠 등 인터랙션을 위한 도구로도 훌륭한 역할
Rapid Prototyping Tools
– 비디오(Video) 편집 도구
• 어도비 프리미어(Adobe Premiere)
• 손쉬운 동영상 편집 프로그램
• 프로토타입을 만들 때 동영상으로서 인터랙션을 시뮬레이션 할 수 도 있음
– 프로그래밍 도구
• Visual C++
• Visual Basic
UML
•
UML 이란
–
–
•
Unified Modeling Language
요구 분석, 시스템 설계, 시스템 구현 등의 과정에서 사용되는 모델링 언어.
UML 정의
–
–
–
–
–
–
객체 관련 표준화기구인 OMG에서 1997년 11월 객체 모델링 기술(OMT;object modeling
technique), OOSE 방법론 등을 연합하여 만든 통합 모델링 언어로 객체 지향적 분석 ·설계 방
법론의 표준 지정을 목표로 하고 있다.
요구 분석, 시스템 설계, 시스템 구현 등의 과정에서 생길 수 있는 개발자간의 의사 소통의 불
일치를 해소할 수 있다.
모델링에 대한 표현력이 강하고 비교적 모순이 적은 논리적인 표기법(notation)을 가진 언어
라는 장점이 있다.
따라서 개발자간의 의사 소통이 쉬워지며 생략되거나 불일치되는 모델링 구조에 대한 지적도
용이하고, 개발하려는 시스템 규모에 상관없이 모두 적용 가능하다.
유스케이스(use case) 다이어그램, 클래스 다이어그램 등 8개의 다이어그램을 기반으로 객체
지향 소프트웨어를 개발하기 위한 풍부한 분석 및 설계 장치를 제공하고 있어 향후 상당 기간
동안 산업계의 표준으로 활용될 것이라 예상된다.
UML을 가장 잘 적용할 수 있는 소프트웨어 개발 프로세스는 1998년 11월 미국 래셔널
(Rational)사에서 개발한 통합 프로세스(Unified Process) 5.0이다. 이 프로세스는 웹 애플리
케이션(web application) 개발에 효율적이고 개발팀의 생산성을 극대화하며 UML의 장점을
최대한 살릴 수 있도록 고안된 실무형 개발 프로세스이다.
UML Examples
유스케이스 다이어그램 (Usecase Diagram)
시퀸스 다이어그램 (Sequence Diagram)
Ajax
•
Ajax (Asynchronous JavaScript And XML)
–
•
하나의 기술이라기 보다는 여러 기술을 하나로 묶은 것
Ajax 는 SOAP 및 XML 같은 통신 기술을 사용
–
–
–
–
비동기 요청/응답을 서버와 주고 받음
JavaScript, DOM, HTML 및 CSS 같은 프레젠테이션 기술을 사용하여 응답을 처리
대부분의 브라우저에서 필요한 기술을 지원
AJAX에 대한 자세한 정의
• AJAX Wikipedia
•
Ajax 란 대체 무엇일까요?
–
–
–
–
Ajax 를 사용하면 브라우저를 새로 고칠 필요 없이, JavaScript를 호출하여 서버 측 메서드를
실행할 수 있습니다.
사용자 모르게 백그라운드에서 발생하는 작은 요청/응답
Google의 유명한 서비스인 Google Suggests 및 Google Maps (영문) 같은 예를 살펴보십시오.
Web OS 의 가능성
• PC 에 OS 가 깔리지 않고 웹 브라우져 만으로 모든 작업이 가능
• Web Applications : 별도의 다운로드 없이 웹 상에서 동작하는 응용 프로그램들
• Web Office : 사무용 프로그램들을 언제 어디서든 인터넷만 되면 열어볼 수 있고 작업할 수 있도록 제
공하는 Ajax 기술
Ajax 응용사례
•
Ajax 를 이용하여 검색 결과를 한번에 보기
–
–
•
세계 1위의 검색엔진 구글(Google)
국내 1위의 검색엔진 네이버(Naver)
네이글(Nagle)
–
http://www.superwtk.com:8080/Nagle
Ajax 응용사례
Google.com 의 웹 2.0 Ajax 적용 사례 – 개인화된 홈페이지
http://www.google.co.kr/ig
Ajax 응용사례
Google.com 의 웹 2.0 Ajax 적용 사례 – 구글 지도(http://map.google.com)
길안내 서비스 및 위성 사진 제공
• 대한민국 서울 여의도의 위성 사진
• 미국 California 의 Los Angeles 의 위성 사진
Ajax 응용사례
구글(Google) 지도를 활용한 혼합 서비스 사례
가장 활발하게 활용되고 있는 구글 지도(maps).
Ajax 를 이용 구글 지도를 이용한 것 중 가장 유명해진 것은 구글 하우징맵스(www.housingmaps.com).
하우징맵스는 구글 지도에 부동산 매물 정보를 결합한 서비스다.
Ajax 응용사례
유명한 사진 사이트 Flickr.com의 Ajax 응용 사례
구글의 지도 서비스를 이용 지도 위에 사진을 올리는 기능
Ajax 응용사례
소니(Sony) 디지털 카메라
Ajax 를 이용 지도상에 사진을 기록하는 사진 관리 프로그램 제공
Ajax 응용사례
야후! 지도(kr.gugi.yahoo.com/map) 서비스
웹 2.0 기술을 도입, 지도 서비스만으로도 해당 지역 정보를 한번에 얻을 수 있도록 사용자 편의성과 활용성을 대폭 강화
한 서비스
Ajax 응용사례
파워포인트를 웹상에서 구현한 토닉포인트(http://beta.tonicpoint.com)
웹 2.0 기술을 도입, 파워포인트를 웹상에서 제작할 수 있도록 구현한 서비스
Office 프로그램이 깔려 있지 않아도 Web 상에서 업무를 볼 수 있음. Web OS 에 한발 다가감
Ajax 응용사례
드래그 & 드롭 만으로 상품을 구매, 직관적인 쇼핑몰 - 패닉닷컴의 쇼핑몰(http://panic.com/goods/)
Ajax UI Library
• Yahoo UI Library
– http://developer.yahoo.com/yui
• Naver UI Libraray
– http://html.nhndesign.com
• Light Box 2.0
– http://www.huddletogether.com/projects/lightbox2
Ajax 참고사례
•
•
•
•
•
Writely - 온라인 워드 프로세서
Num Sum - 온라인 스프레드쉬트
Kiko - 온라인 캘린더
S5 - 온라인 프리젠테이션
Central Desktop - 온라인 프로젝트 관리
•
•
•
•
•
•
Webnote - 온라인 노트패드
JotSpot Live - 그룹 노트 보드
Meebo - 온라인 인스턴트 메시징
Nandu - 온라인 오피스 어플
Zimbra - 오픈소스 그룹 PIM
SimpleData - 온라인 세일즈 & 인보이스
Tudu Lists - 온라인 To-Do Lists
Slawesome - 음성 이메일
MyTicklerFile - 리마인더 서비스
AirSet - 개인용 오거나이저 겸 공유 툴
EyeOS - 온라인 컨텐츠 매니지먼트 시스템
Inquisitor - 인스턴트 서치
Livemarks - 그룹 북마크 스크롤러
ProtoPage - 개인용 시작 페이지
Atiki - 이메일 서치 서비스
TracksLife - 개인용 프로젝트 트랙커
BlinkBits - 글로벌 공용지식창고
Etsy - 온라인 수공품 마켓플레이스
Rollyo - 나만의 서치엔진 만들기
Plurn - 온라인 뮤직 협업 커뮤니티