[2021 정보처리기사 실기] 5. 화면 설계

화면설계

-UI 요구사항 확인.

UI: 넓은의미로 사용자-시스템간 의사소통 물리적.가상의 매개체. 좁은의미로 정보기기 화면.

 

유형	특징	설명
CLI(command line interface)	정적, 텍스트
GUI	그래픽 반응기반	마우스, 전자펜
NUI(Natural)	직관적 사용자반응 기반	키보드 ,마우스 없이 신체부위 이용.터치/음성
OUI(Organic)	유기적 상호작용 기반	현실에 존재하는 모든 사물이 입출력장치로 변화.

- UI 분야

분야	설명
물리적제어분야	정보제공과 기능전달 위한 hw기반
디자인적 분야	콘텐츠 정확,상세 표현, 전체적구성
기능적 분야	사용자편의성에 맞춰 간편히 사용

- UI 설계 원칙

설계원칙	설명	부특성
직관성	누구나쉽게이해,사용	쉬운 검색, 사용성, 일관성
유효성	목표달성되게 제작	오류처리, 복구
학습성	쉽게배우고 사용	쉬운학습, 접근, 쉽게기억
유연성	사용자 인터랙션 최대한 포용, 실수방지	오류예방, 감지

- UI 설계 지침

설계지침	설명
사용자중심	쉽게 사용할 수 있는 환경 제공
일관성	조작이 기억쉽고 빠르게 습득하도록
단순성	조작방법은 가장 간단히.
결과예측가능	작동기능만 보고도 결과예측가능해야.
가시성	주기능을 메인화면에 노출
표준화	디자인을 표준화해 쉽게사용
접근성	직무/연령/성별등 다양계층 수용
명확성	개념적으로 쉽게 인지
오류발생해결	오류 상황 정확하게 인지가능해야함

 

- UI 요구사항

: 사용자가 정보시스템 구축해 얻고자하는 최종목적기준.

 

UI 품질요구사항(ISO/IEC 9126 기반)

(1) 기능성

: 실제 수행결과와 품질요구사항과의 차이 분석. 정확하지 않은 결과가 발생할 확률 관련해 시스템동작관찰하기 위한 품질 기준.

상세품질요구사항	설명
적절성	사용자 목표에 적절한 기능제공
정밀성	정확도로 올바른 결과 산출
상호운용성	타시스템과 상호작용해 운영능력
보안성	비인가 접근 차단. 대처능력
호환성	비슷한 환경에서 연관된 표준, 관례 및 규정을 준수하는 능력

 

(2) 신뢰성

: 일정 작동시간동안 의도기능을 수행함을 보증

상세품질요구사항	설명
성숙성	sw결함 고장 회피할 수 있는 sw능력
고장허용성	결함,오류시에도 성능 유지
회복성	고장시 복구, 성능재확보 능력

 

(3) 사용성

: 사용자-컴 사이 발생하는 행위를 정확하고 쉽게 인지

상세품질요구사항	설명
이해성	sw의 논리적 개념과 적용 가능성(응용 가능성)을 구분하는데 필요한 사용자의 노력
학습성	sw app 학습에 필요한 사용자 노력
운용성	sw 운용과 운용통제에 필요한 사용자 노력

(4) 효율성

: 할당시간에 한정자원으로 얼마나 빨리 처리하는가

상세품질요구사항	설명
시간효율성	반응시간,처리시간, 처리율
자원효율성	자원양, 지속 시간

(5) 유지보수성

: 요구사항 개선, 확장에 얼마나 용이한가

상세품질요구사항	설명
분석성	고장/수정 확인 필요 노력
변경성	결함제거, 수정 노력
안정성	sw변경시 예상치못한 위험요소
시험성	sw 변경되어 검증에 필요한 노력

(6) 이식성

: 다른 플랫폼(OS)에 얼마나 쉽게 적용 가능한가

상세품질요구사항	설명
적용성	특정 환경으로 전환되는 능력
설치성	특정환경에 sw 설치 시 필요한노력
대체성	타 sw 대신 사용할 수 있는 능력

 

UI 표준

: 디자인 철학과 원칙 기반하에 전체 시스템에 공통으로 적용되는 화면간 이동, 화면 구성에 대한 규약.

UI 표준 구성	설명
전체적인 UX 원칙	사용자 입장서 업무효율수행가능한 UX원칙 정의
정책 및 철학	조직 목표,정체성 포함
UI 스타일 가이드	구동환경, 레이아웃 등 정의
UI 패턴 모델 정의	CRUD방식의 데이터입출력패턴정의
UI 표준 수립을 위한 조직 구성	UI팀 주축으로 추진 조직 구성

 

-UI 구동 환경의 정의

구분	설명
OS	기업이 운영하는 업무, OS 확인
웹브라우저	기업환경에 적합한 웹브 확정
모니터해상도	1280X1024 기본. 스크롤안생기게
프레임세트	속도, 업무편의성 고려해 영역프레임 구분해 적용(top, left,contents)

 

- UI 스타일가이드 구성

: UI 구동환경, 레이아웃, 메뉴 네비게이션, 공통표준화면, 기능, 구성요소 정의

 

- 레이아웃(Top, left, contents, footer)

1) Top: 필수적용. 로고, 사용자..

2) left: 선택적용. 서브메뉴, 배너

3) contents: 필수저용. 콘텐츠

4) footer: 선택적용. 회사, 저작권 등

 

- 기능정의

: 요구사항에 대한 개념모델을 논리적모델(프로세스모델, UI 설계, 논리 데이터 모델, 아키텍처 정의, 인터페이스 설계측면)로 상세화하여 기능을 정의함.

 

- UI 패턴모델 정의

: CRUD방식 기반 데이터 입출력 포함, 오퍼레이션 방식에 대한 표준절차 표시, UI 패턴모델 개발. 표준 프레임워크로 개발하고, 유스케이스를 이용해 패턴별 표준개발 방법 총 7가지 영역을 정의함.

영역	설명
업무화면 클라이언트	개발시 필요한 공통요소 식별
서버 컨트롤러	프레임워크 결정
서버 메시지 및 예외 처리	S(System 에러), E(Error), I(information)
클라-서버간 데이터 변환	어떤 오브젝트 사용할 것인지, 데이터 형변환 어떻게 처리할것인지
기업포털 연계	EP-SSO-사용자간 연계방안
보고서	클라와 리포트 솔루션 간 연계방식
외부 컴포넌트 연계	외부 UI 컴포넌트 도입시 서버와의 연계방식으로 결정.

 

UI 지침

: UI 표준에 따라 UI설계, 개발시 지켜야할 세부사항을 규정하는 가이드라인.

UI 표준 적용을 위한 환경분석

1) 사용자 트렌드 분석

2) 기능 및 설계 분석

    - 기능 조작성 분석

    - 오류방지분석

    - 최소조작으로 업무 처리 가능 확인

    - UI 정보 전달력 확인

 

- UI 개발을 위한 주요기법

기법	설명
3C분석	Customer, Company, Competitor 비교분석해 자사 차별화, 경쟁우위분석
SWOT분석	Strength, weekness, Opportunity, Threat 규정해 경영전략 수립
시나리오플래닝	변화예측, 다양한 시나리오 설계해 불확실성 제거해나감
사용성 테스트	직접 사용자가 사용하며 질문에 답함
워크숍	서로 지식 교환, 검토하는 연구회,세미나

 

사용자분석 및 니즈(Needs) 조사:

최신 트렌드, 경쟁사 동향 통해 타깃 고객층 프로파일 기술하고 정의함.

1) 리서치 대상 선정 및 내용 설계: 리서치(지식탐구 기반, 지식발견, 해석, 정정, 재확인 등 체계적 조사)

2) 리서치 진행 (설문, 인터뷰, ... )

3) 리서치결과 정리, UI개발목표 설정

 

사용자 요구사항 도출:

수행활동	설명
페르소나 정의	사용자의 목적과 행동패턴을 응집시킨 가상의 사용자
콘셉트 모델 정의	추상적 콘셉 사이 관계를 보여주는 다이어그램. 브레인스토밍 활용
사용자 요구사항 정의	요구사항 우선순위정함 요구사항 매트릭스 작성, 정황시나리오 제작
UI 컨셉션	요구사항 구체화. 화면 디자인 단계 전 대표화면 설계진행

UI시나리오 문서: UI 기능구조, 대표화면 등 정리. 효율적 UI관리, 원활한 의사소통 할수있게 해줌.

 

스토리보드: UI화면설계 위한 정책, 콘텐츠구성, 와이어프레임(UI, UX) 등 구축하는 서비스를 위한 정보가 수록된 문서. 디자니어와 개발자가 최종 참고하는 산출문서임. UI설계 위해 와이어프레임, 스토리보드, 프로토타입이 활용됨.

 

 

UI화면설계 구분:

1) 와이어프레임: 이해관계자들의 화면구성 협의. 서비스 흐름공유위한 화면단위 레이아웃 설계작업. ex) ppt, 키노트, 스케치, 일러스트

2) 스토리보드: ex) ppt, 키노트, 스케치

스토리보드 작성절차

: 개요작성->서비스흐름작성->스타일확정->메뉴별 화면 설계도 작성 및 상세설명->추가관련정보작성

3) 프로토타입: 정적 화면으로 설계된 와이어프레임 또는 스토리보드에 동적효과 적용해 실제 구현된 것처럼 시뮬레이션할수 있는 모형. ex) HTML/CSS

 

프로토타입: 구현가능성, 성능, 운용가능성을평가하거나 요구사항 이해쉽게 전체적기능을 간략히 구현한 시제품. 수정보완하며 오류사전방지, 비용과 노력 절감.

장점: 설득,이해 쉬움. 개발시간감소, 오류사전예방가능

단점: 수정증가시 작업시간 증가. 요구사항 타협필요, 필요이상의 많은 자원 소모.

아날로그 프로토타입: 단시간 제작, 저비용, 업무협의 빠를 때 적용

디지털 프로토타입: ex) keynote, UX pin, HTML. 재사용 필요시, 산출물과 비슷한 효과를 필요로 할 경우, 숙련된 전문가가 있을 경우 적용.

 

UI 설계

UML: 객체지향 sw개발 과정에서 산출물을 명세화, 시각화, 문서화할 때 사용되는 모델링 기술과 방법론을 통합해 만든 표준화된 범용 모델링 언어. 방법론을 통합한 것으로, 표준화된 모델링 기법을 제공함.

UML 특징:

1) 가시화언어: 개념모델 작성시 오류적고 의사소통 용이

2) 구축 언어: 다양한 프밍언어로 실행시스템의 예측 가능, UML을 소스코드로 변환해 구축가능. 역변환하여 역공학 가능.

3) 명세화 언어: 정확한 모델 제시, 완전한 모델 작성

4) 문서화 언어: 시스템평가 및 의사소통의 문서.

UML 구성요소:

1) 사물: 추상적개념. 주제. 명사, 동사.

2) 관계: 사물의미 확장. 사물-사물연결. 형용사, 부사

3) 다이어그램: 사물과 관계를 모아 그림으로 표현.

UML 다이어그램:

구분	다이어그램	설명
구조적/정적	클래스	객제지향 모델링 시 속성 및 연산과 클래스간 정적 관계 표현. 구성요소: 클래스명, 속성, 연산, 접근제어자, 관계.
	객체	클래스에 속한 사물(객체=인스턴스)을 객체-객체 사이 관계로 표현.
	컴포넌트	시스템구성하는 물리적 컴포넌트와 그사이 의존관계를 나타냄
	배치	컴포넌트 사이 종속성 표현. 물리적요소들의 위치 표현.
	복합체 구조	클래스나 컴포넌트가 복잡구조를 갖는 경우, 내부구조를 표현
	패키지	유스케이스, 클래스 등 모델 요소를 그룹화한 패키지관계표현
행위적/동적	유스케이스	시스템이 제공하는 기능 등을 사용자 관점에서 표현
	시퀀스	객체간 동적 상호작용을 시간적개념 중심으로 메시지 흐름 표현.
	커뮤니케이션	객체들이 주고받는 메시지를 표현, 객체간 연관도 표현
	상태	객체가 속한 클래스의 상태변화, 타객체와의 상호작용에 따른 변화 표현
	활동	시스템이 어떤 기능 수행하는지 객체 처리 로직, 등을 흐름순서로 표현
	타이밍	객체상태변화, 시간제약 표현

(*컴포넌트, 배치 다이어그램은 구현단계에서 사용됨)

 

UML 확장 모델의 스테레오 타입

: UML의 기본요소에 +새 요소. 확장 메커니즘.

‘<< >>’(길러멧) 기호를 사용해 표현함.

UML 스테레오타입 유형:

1) <<include>>: 유스케가 다른 유스케를 실행

2) <<exclude>>: 유스케가 타 유스케를 실행할수도,안할수도.

3) <<interface>>: 모든 메서드가 바로 인스턴스를 만들 수 없는 추상메서드, 상수만으로 구성됨.

4) <<entity>>: 오래지속되는 연관된 행위를 형상화.  기억장치에 저장되어야할 정보. 기호는 아래와같음.

5) <<boundary>>: 외부액터와의 상호작용담당. 기호는 아래와같음.

6) <<control>>:시스템 제공기능의 로직/제어 담당. 기호는 아래와같음.

 

 

-클래스다이어그램 구성요소

1) 클래스: 속성. 연산(메서드), 관계 공유하는 객체집합.

2) 속성: 클래스의 구조적 특성. 특서에 해당하는 인스턴스가 보유하는 값의 범위 기술

3) 연산(operation, method): 이름, 타입, 매개변수들과 연관행위 호출에 요구되는 제약사항 명시하는 클래스의 행위적 특징. 객체에 요청해 행동에 영향 줄 수 있는 서비스

4) 접근제어자(access modifier, 접근제한자): 클래스에 접근할 수 있는 정도표현.

-	private. 클래스 내부만 접근허용
+	public. 외부접근허용
#	protected 동일패키지/파생 클래스에서 접근가능
~	default. 동일패키지 클래스에서 접근가능

 

- relationships: 클래스 관계

1) 연관(Association) 관계

: 클래스가 서로 개념적으로 연결된 선

사물 사이 실선으로 연결, 방향성은 화살표. 서로 영향주는 양방향관계의 경우 화살표생략, 실선으로만연결

: 연관관계의 다중성 표현: 다중연결관계

1	한 객체와 연관. 표시안해도 기본값임
0..1	0 또는 1개 객체와 연관
0..*	0개 또는 다수 객체 연관
*	0..*과 동일
1..*	1개 이상의 객체와 연관
1..12	1~12개까지 객체가 연관
1..2, 4,6	1~2개까지, 또는 4개 또는 6개 객체 연관

 

2) 집합(Aggregation) 관계와 복합(composition) 관계

집합과 복합관계는 연관관계 안에 포함된다.

2-1. 집합관계: 1객체에 여러 독립객체들이 구성됨. 한 사물이 다른 사물에 포함된 관계. 포함되는쪽(part)에서 포함하는쪽(whole)으로 속이 빈 마름모로 연결

(ex, 차-엔진,바퀴,운전대)

2-2. 복합관계(=포함관계): 영구적이고, 집합관계보다 더 강한관계. part에서 whole로 속이 채워진 마름모로 연결. 집합관계의 특수형태로, 포함하는 사물의 변화가 포함되는 사물에게 영향을 미침. ex) 엔진-피스톤, 플러그

 

3) 일반화 관계와 의존관계

3-1. 일반화관계(=상속관계): 1사물이 타사물에 비해 더 일반적?구체적?인지 표현. 일반적개념을 부모(상위), 구체적개념을 자식(하위)라함. 하위에서 상위인 쪽으로 속이 빈 화살표로 연결.

3-2. 의존관계: 1클이 또다른 클 사용. 사물사이 연관은 있으나, 필요에 따라 서로에 영향주는 단시간만 연관을 유지함. 1클에 있는 멤버 함수 인자가 변함에 ᄄᆞ라 타클에 영향미칠때의 관계. 영향주는 사물이 영향받는 사물쪽으로 점선화살표로 연결.

 

4) 추상클래스, 인터페이스, 실체화관계(realization)

4-1. 추상클래스<<abstract>>:　객체 인스턴스 노생성, 유사클래스의 공통된 특징을 정의. 동일 부모를 가지는 클래스를 묶음. 상속받아 기능을 확장. 이탤릭체로 클래스명을 표시.

4-2. 인터페이스<<interface>>: 기능을 모아놓은 클래스. 추상메서드와 상수만을 포함하는 추상클임. 구현하는 모든 클에 대해 특정 메서드가 반드시 존재하도록 강제함.

-실체화관계: 추상클이나 인터페이스 상속받아 자식클이 추상메서드 구현.

 

- 유스케이스 다이어그램: 시스템 제공기능, 관련 외부요소를 사용자 관점에서 표현하는 다이어그램.

구성요소	설명
유스케이스	- 시스템서비스, 기능 - 액터 수행행위
액터	-사용자수행역할 -시스템과 상호작용하는 사람/사물 -이벤트흐름 시작하게하는 객체
시스템	-전체 시스템 영역
시나리오	-발생되는 이벤트흐름
이벤트흐름	-사람, 시스템, hw, 시간흐름에 의해 시작

- 유스케이스 다이어그램의 관계

: 관계는 액터와 유스케이스, 유스케이스와 유스케이스 사이에서 나타낼 수 있음.

: 관계 종류는 포함관계, 확장관계, 일반화 관계가 있음.

관계	설명
포함관계 <<include>>	-유스수행->다른 유스가 수행됨 -여러 유스에서 공통발견되는 기능표현
확장관계 <<extend>>	-특정조건에서 한 유스로만 추가/확장
일반화관계	추상적 액터와 구체적 액터사이 맺어주는 관계.

 

- 시퀀스 다이어그램

: 객체간 상호작용을 메시지 흐름으로 표현함.

: 객체간 동적 상호작용을 시간적 개념을 중심으로 모델링하는 과정.

: 객체의 오퍼레이션과 속성을 상세히 정의해야함.

: 유스케이스를 실현(realization)함.

구성요소	설명
객체(object)	아래로 생명선을 가짐
생명선(lifeline)	실제시간이 흐름에 따라 객체의 생명주기 동안 발생하는 이벤트를 명시.
실행	직사각형=오퍼레이션(함수)이 실행되는 시간. 길수록 시간긺
메시지	객체간상호작용은 메시지로 이루어짐. 전달받은 객체의 오퍼레이션을 수행.

 

- 패키지 다이어그램: 시스템의 서로다른 패키지들 사이의 의존관계를 표현.

구성요소	설명
패키지	요소들을 그룹으로 조직하기 위한 요소
의존관계	-한 패키지가 타패키지 사용하는 관계 -의존성 성질로 스테레오 타입을 붙임 <<import>> <<access>>

- 활동 다이어그램 : 시스템이 어떤 기능 수행하는지 객체 처리로직, 조건처리의 흐름을 순서대로 표현

: 한 유스케이스 안이나, 유스케이스 사이 발생하는 처리흐름을 명확히 표현함. (그림:알고리즘과 같음)

구성요소	설명
시작점(initial node)	“활동시작”
전이 (transition)	실행흐름
액션/액티비티	일 처리, 실행 액션: 더 이상 분해불가한 단일 작업 액티비티: 액션들로 분리될 수 있는 작업
종료점(final node)	처리 종료. 한 다이어그램 안에 여러 종료노드가 있을 수 있음.
조건(판단) 노드	조건에따른 제어흐름 분리 표현.
병합노드	여러 경로흐름이 하나로 합쳐짐.
포크노트	평행적으로 수행되는 흐름을 나누는 노드
조인노드	포크노트로 나뉜 흐름을 하나로 합치는 노드
구획면	액티비티 수행담당 주체를 구분하는 면. 가로 또는 세로 실선으로 구분.

- 활동 다이어그램에서 한 활동이 처리되면 그 다음 활동으로 자동옮겨지며, 활동상태의 시작과 종료는 항상 존재함.

 

- 상태 다이어그램

: 한 객체가 속한 클래스 상태변화나 타객체와의 상호작용에 따른 상태변화를 표현.

: 객체는 파악된 상태들 이외 상태는 가질 수 없고, 특정 순간에 한 상태로만 존재한다.

: 객체의 상태란 객체가 갖는 속성값의 변화이다.

구성요소	설명
상태(state)	객체가 존재할 수 있는 조건 중 하나.
시작상태	객체 시작 상태
종료상태	객체 종료상태
전이	각체 상태가 다른 상태로 변경됨
이벤트	개체전이유발자극 이벤트: 시간흐름, 조건, 외부신호
전이조건	특정조건 만족 시 전이발생하도록 사용되는 속성값의 불리언식

 

- 커뮤니케이션 다이어그램

: 동작에 참여하는 객체들이 주고받는 메시지를 표현. 메시지뿐 아니라 객체 간 연관까지 표현하는 다이어그램.

: 시스템이나 객체들이 메시지 주고받으며 시간흐름에 따라 상호작용하는 과정을 표현.

구성요소	설명
액터	시스템서비스 요청하는 외부요소(사람, 외부시스템)
객체	메시지 주고받은 주체. 객체명:클래스명 기술
링크	액터와 객체, 객체간 실선으로 표현. 링크에 메시지 표현.
메시지	객체가 상호작용위해 주고받는 메시지.

 

- 컴포넌트 다이어그램

: 시스템을 구성하는 물리적 컴포넌트와 그들 사이의 의존 관계를 나타내는 다이어그램

: 코드 컴포넌트 기반의 물리적 구조로 표현됨

: 실질적 프로그래밍 작업에 사용함.

구성요소	설명
컴포넌트	모든 컴포넌트는 이름을 가짐. 패키지에 포함되어 있으면 컴포넌트 앞에 패키지이름을 붙임.
인터페이스	인터페이스 실체화=컴포넌트에 인터페이스를 적용
의존관계

 

UI흐름설계: 업무흐름,수행과 관련된 화면위치와 흐름을 흐름도형식으로 표현.

순서: UI설계안의 적정성확인->화면 기능/비기능적 요구사항 검토->요구사항 확인-> UI 유스케이스 설계 ->기능 및 양식 확인.

*기능 및 양식확인에서 input box, combo box, radio box, check box 확인. (combo=select 드랍다운)

 

UI 설계서 구성:

구성요소	설명
UI설계서 표지	플젝명, 시스템명 포함
UI설계서 개정이력	초안작성+버전업
UI 요구사항 정의	요구사항 재확인, 정리
시스템구조	UI프로토타입 재확인, 구조설계
사이트맵	UI시스템구조를 맵으로 작성
프로세스 정의	사용자관점 프로세스를 정리
화면설계

UI 설계안 적정성 확인성:

*실행차를 줄이기위한 UI설계원리

1) 사용 의도 파악(기능조사)

2) 행위순서규정(기능사용위한 사전행위나열)

3) 행위의 순서대로 실행(우선 활성화 순위)

*평가차를 줄이기 위한 UI설계원리

1) 수행키 조작결과를 빠르게 자각하도록 유도

2) 변화된 상태를 쉽게 인지하도록 유도

3) 의도와 결과간 유사정도를 쉽게 파악하도록 유도

 

UI 유스케이스 설계:

1) UI요구사항으로 액터별 시나리오 구상

2) UI요구사항 바탕으로 액터 세분화

3) UI유스케이스 설계

 

UI상세설계 프로세스:

UI 요구사항 최종확인-> UI구조설계-> 사용자 기반 메뉴구조설계-> 화면설계-> 하위시스템 단위의 내외부 상세화면과 폼설계.

 

UI 시나리오 문서 작성요건:

작성요건	설명
완전성	누락없이, 사용자 태스크에 초점맞춰 기술
일관성	목표, 요구사항, UI스타일 일관성있게
이해성
가독성
추적용이성
수정용이성

 

UI설계도구:

사용자와 시스템이 의사소통하게 일시적/영구적접근을 목적으로 만들어진 물리적, 가상적 매개체인 UI의 설계를 지원하는 도구.

프로세스	역할		도구
	UI디자이너	개발자
분석	UI표준설계	프로토타이핑 화면정의 보고서정의	UI패턴 UI모델링
설계	디자인시안 화면템플릿	화면설계 보고서제작 응용아키텍처구현	UI설계
구현	-	화면개발	프로토타이핑툴

: UI설계도구의 유형은 UI구현절차에 따라 기획단계에서 화면 UI설계 및 인터랙션 적용에 적합한 도구와 설계 작업 이후 이미 설계된 이미지의 인터랙션 적용에 적합한 도구로 구분할 수 있음.

세분화==> 화면설계도구, 프로토타이핑도구, UI디자인 도구로 나뉨.

 

1) 화면설계도구

도구	설명
파워목업	ppt 목업기능 지원툴.
발사믹목업	스케치한 느낌으로 빠르고 심플. 간단한 스케치에 활용
카카오오븐	카카오 온라인 프로토타이핑 도구. 쉬움

 

2) 프로토타이핑 도구

도구	설명
UX핀	웹 브라우저통해 와이어프레임, 프로토타이핑 동시작업 가능. 구글 글라스에 포함된 디바이스환경에 맞춰 설계가능.
액슈어	UI설계보다 스토리보드 가능
네이버 프로토나우	네이버 프로토타이핑 툴. 스토리보드, 폴로차트 등의 기능 지원

3) UI디자인 도구

도구	설명
스케치	다양한 목업&템플릿 활용한 레이아웃 중심의 UI디자인 설계지원 도구
어도비 익스피리언스 디자인CC(Adobe XD)	UI디자인에 최적화된 툴, 쉽고 직관적인 인터페이스제공. 포토샵, 일러스트와 연동 지원

4) UI 디자인 산출물로 작업하는 프로토타이핑 도구

도구	설명
인비전	디자이너가 작업한 결과를 사이트에 업로드해 UI를 연결, 간단한 인터랙션 적용이 가능
픽사에이트	2015 구글이 인수한 프로토타이핑툴. 모바일앱프로토타이핑에 최적화. 디테일한 인터랙션 설정가능
프레이머	커피 스크립트 언어 사용. 코드기반으로 작동되어 실제 작업물과 흡사.