달력

12

« 2019/12 »

  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  •  
  •  
  •  
  •  


 

UI 프로토타이핑(Prototyping)

·       해당 프로젝트의 모든 기능 또는 일부 기능을 그리거나, 묘사하고 테스트(검토)하는 활동을 의미

·       사용자 경험과 관련된 이슈들을 정의하는 과정이므로 반복적으로 수행된다.

·       결과물이 아닌 과정의 일부이다.

·       과정에 대한 결과는 UI/UX 디자인을 보완하고 개선할 있도록 실행 가능한 피드백이 이루어져야 한다.

https://codedragon.tistory.com/4103

https://codedragon.tistory.com/8076

https://codedragon.tistory.com/4091

 

 

 

유스케이스 상세의 용도 특징

·       유스케이스 상세는 사용자와 시스템간의 이벤트 흐름을 파악할 있게 한다.

·       유스케이스는 기능과 목적이 아닌 이벤트 흐름이 기술된다.

·       유스케이스는 시스템과 사용자 사이의 상호 작용과 시스템 행위를 이해할 있다.

·       유스케이스와 연결되지 않는 액터는 표한하지 않는다.

 

https://codedragon.tistory.com/5372

https://codedragon.tistory.com/4126

 

 

 

 

HTML 이용한 프로토타이핑 방법

절차

설명

1

프로토타이핑의 대상이 되는 UI 화면의 구조와 구성 요소들을 파악한다.

2

HTML 다양한 태그를 통해 화면의 레이아웃 구성한다.

3

UI 표현 요소들을 적절한 HTML 화면 구성 요소들을 이용해 배치하고 표현한다.

https://codedragon.tistory.com/7465

https://codedragon.tistory.com/9084

 

 

 

 

도서 목록 검색 페이지의 액티비티 다이어그램

https://codedragon.tistory.com/5352

https://codedragon.tistory.com/4125

 

 

 

 

 

제시된 입력 폼의 프로토타입 작성하기

https://codedragon.tistory.com/6293

 

Posted by codedragon codedragon

댓글을 달아 주세요

2019. 6. 5. 10:24

PowerMockup Development/UI&UX


 

 

PowerMockup

·         유료 도구입니다.

·         파워포인트에 추가 메뉴를 설치해서 Mockup 기능을 제공해 주는 도구입니다.

·         파워포인트로 화면 설계시간을 단축시키고자 하는 사용자에게 적합니다.

 

 

 


 

 

 

 

https://www.powermockup.com/


 



Posted by codedragon codedragon

댓글을 달아 주세요


 

 

스토리보드(Storyboard) 구성 요소

 

구성요소

설명

Feature List

·         UX 컨셉, 요구사항의 구현에 필요한 기능 리스트

User Task-flow

·         기능 수행

·         사용자의 행위 매핑

·         흐름도

Information Architecture

·         정보 구조화

·         우선 순위

Wireframe

·         해당 기능 구현을 위한 인터페이스 요소 배치

·         화면 구조 생성

Workflow

·         여러 Wireframe 개별 기능간 화면 전화 흐름도

 

 


Posted by codedragon codedragon

댓글을 달아 주세요


 

 

CLI(Command Line Interface)

·         명령 인터페이스 명령어 인터페이스

·         문자열 기반 사용자 인터페이스(CUI)

·         텍스트 터미널 통해 사용자와 컴퓨터가 상호작용하는 방식입니다.

·         주로 리눅스에서 사용하는 인터페이스 방식입니다.

 

http://bit.ly/2DdSlbL

https://en.wikipedia.org/wiki/Command-line_interface

 


 


 


'Development > UI&UX' 카테고리의 다른 글

PowerMockup  (0) 2019.06.05
스토리보드(Storyboard) 구성 요소  (0) 2019.06.05
CLI(Command Line Interface)  (0) 2019.05.26
Apple (애플)  (0) 2019.05.20
디자인 패턴 장점, 디자인 패턴 단점  (0) 2019.05.15
프로토타이핑 단계  (0) 2019.05.10
Posted by codedragon codedragon

댓글을 달아 주세요

2019. 5. 20. 10:57

Apple (애플) Development/UI&UX


 


 

 

 

 

 

 

 





 

 

 

 

Apple(애플)

·         스티브 잡스와 스티브 워즈니악과 웨인이 1976년에 설립한 컴퓨터 회사

·         이전 명칭은 애플 컴퓨터(Apple Computer, Inc.)

 

http://bit.ly/2CfBIMy

https://en.wikipedia.org/wiki/Apple_Inc.

https://en.wikipedia.org/wiki/History_of_Apple_Inc.

 

 

 

2007


 

 

1998 – 2000


 

 

1976 1998


 

 

 

 

1976


 

 

 

http://bit.ly/2EMJ8Y6

 



'Development > UI&UX' 카테고리의 다른 글

스토리보드(Storyboard) 구성 요소  (0) 2019.06.05
CLI(Command Line Interface)  (0) 2019.05.26
Apple (애플)  (0) 2019.05.20
디자인 패턴 장점, 디자인 패턴 단점  (0) 2019.05.15
프로토타이핑 단계  (0) 2019.05.10
UI의 기본 평가항목  (0) 2019.05.04
Posted by codedragon codedragon

댓글을 달아 주세요


 

 

 

디자인 패턴 장점

디자인 패턴을 사용하는 이유가 됩니다.

구분

설명

요구사항은 수시로 변경

·         요구사항 변경에 따른 Source Code 변경을 최소화할 있게 줍니다.

·         설계 변경 요청에 대한 유연한 대처가 가능합니다.

여러 사람이 같이 작업하는 프로젝트 진행

·         범용적인 코딩 스타일을 적용할 있습니다.

·         업무 논의 디자인 문서를 작성할 상호간 의사결정에 용어로 쓰입니다.

·         개발자간의 원활한 의사소통을 있습니다.

·         재사용을 통한 개발 시간을 단축 시킵니다.

상황에 따라 인수 인계하는 경우

·         소프트웨어 구조 파악 용이합니다.

·         직관적인 코드를 사용할 있습니다.

·         시간과 비용이 절약됩니다.

 

 

 

 

 

디자인 패턴 단점

·         객체 지향 설계 위주로 사용됩니다.

·         객체 지향 구현 위주로 사용됩니다.

·         초기 투자 비용이 부담이 있습니다.

 


'Development > UI&UX' 카테고리의 다른 글

CLI(Command Line Interface)  (0) 2019.05.26
Apple (애플)  (0) 2019.05.20
디자인 패턴 장점, 디자인 패턴 단점  (0) 2019.05.15
프로토타이핑 단계  (0) 2019.05.10
UI의 기본 평가항목  (0) 2019.05.04
GUI(Graphical User Interface)  (0) 2019.04.28
Posted by codedragon codedragon

댓글을 달아 주세요


 

 

프로토타이핑 단계

단계

설명

1단계

사용자 요구사항 분석을 위해 시스템 설계자와 사용자 간에 함께 작업

2단계

시스템 설계자는 CASE 도구 이용하여 프로토타이핑을 개발

3단계

사용자는 개발된 프로토타입을 실제 사용, 요구사항 확인 보완점 제안

4단계

프로토타입의 수정과 보완 작업

 

 


Posted by codedragon codedragon

댓글을 달아 주세요


 

 

UI 기본 평가항목

·         사용성,

·         접근성,

·         편의성

 



Posted by codedragon codedragon

댓글을 달아 주세요


 

 

GUI(Graphical User Interface)

·         그래픽 사용자 인터페이스

·         OS, 게임, 유틸리티 등에 모두 이용되고 있습니다.

·         직관적인 조작방식으로 모든 명령은 알기쉽게 그래픽으로 표현됩니다.

 

 

http://bit.ly/2UiZrkT

https://en.wikipedia.org/wiki/Graphical_user_interface

 


 


Posted by codedragon codedragon

댓글을 달아 주세요


 

UI 프로토타이핑(Prototyping)

·         개발 접근법의 하나로 새로운 요구사항을 도출하기 위한 수단입니다.

·         개발자들과 사용자들의 의사소통 상의 효과를 증진하기 위한 시스템 개발 기법입니다.

소프트웨어 요구사항에 대해 소프트웨어 엔지니어가 해석한 것을 확인하기위한 수단입니다.

 

·         개발 초기에 시스템의 모형을 간단히 만들어 사용자가 직접 사용해 보게 함으로써 기능의 추가, 변경 삭제 등을 즉각 반영하여 재구축하는 과정을 반복하면서 시스템을 개선 있습니다.

·         해당 프로젝트의 모든 기능 또는 일부 기능 그리거나, 묘사하고 테스트(검토)하는 활동 의미합니다.

 

·         프로토타이핑은 새로운 요구사항을 도출하기 위한 수단으로, 또한 소프트웨어 요구사항에 대해 소프트웨어 엔지니어가 해석한 것을 확인하기 위한 수단으로 많이 사용됩니다.

·         서비스 개발 전에 결과물을 그려보는 의미합니다.

·         인터랙션의 발달과 프로세스의 발달로 다양한 논의를 하기 위해 프로토타이핑의 중요성이 높아지고 있습니다.

·         제품의 구체적인 형태를 디자인하는 작업입니다.

·         개발자와 사용자 간의 상호이해 지식 교환을 위한 작업입니다.

·         적당한 규모의 프로토타이핑을 검증하는 방법으로 요구사항을 확인 있습니다.

·         잘못된 요구사항을 만족시키기 위하여 자원을 낭비하는 것을 방지할 있습니다.

 

 

 

https://en.wikipedia.org/wiki/Software_prototyping

https://en.wikipedia.org/wiki/Prototype

http://bit.ly/2GomyqD

 

 

Posted by codedragon codedragon

댓글을 달아 주세요