달력

12

« 2019/12 »

  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  •  
  •  
  •  
  •  


 

 

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

댓글을 달아 주세요


 

 

 

프로토타이핑의 장점/단점

장점

·         분석가의 가정을 파악하고 잘못된 경우 유용한 피드백을 제공합니다.

·         사용자 인터페이스(User Interface) 동적인 행위가 문서나 그래픽 모델보다 프로토타입으로 이해하기 쉬워집니다.

·         요구사항의 가변성 프로토타이핑 이후에 급격히 감소합니다.

·         사용자 중심 개발방법으로 최종 사용자 요구 극대화 있습니다. 잘못된 요구사항을 만족시키기 위하여 자원을 낭비하는 것을 방지할 있다는 점에서 프로토타이핑을 긍정적으로 검토할 있습니다.

·         프로토타이핑을 통한 빠른 기간안에 사용자 평가 수행 개발 기간을 단축 있습니다.

·         초기 오류 발견 변경이 용이합니다.

단점

·         사용자의 관심이 핵심 기능에서 멀어지고 프로토타입의 디자인이나 품질문제로 집중될 있으며, 프로토타입 수행 비용이 발생합니다.

·         프로토타이핑의 잦은 수정 반복으로 비용이 발생합니다.

·         하드웨어 성능을 고려 하지 않은 상태에서 사용자 요구의 극대화로 효율성이 떨어지기 쉽습니다.

 

 



Posted by codedragon codedragon

댓글을 달아 주세요


 

 

Wireframe(와이어프레임) 작성 3단계

MVC 모델 기반의 Wireframe 작성

단계

설명

Estimates

·         견적 단계

·         예산 수립, 작업일정등을 계획하기 위해 대략적인 견적 냅니다.

·         화면 흐름에 대한 계획 수립합니다.

·         Model, Controller, API 대해 설계합니다.

Functionality

·         기능 단계

·         특정 엘리먼트 세트를 필요로 하는 화면들을 상세하게 목록화합니다.

·         사용자의 행동 흐름을 재검토하여 불필요한 요소와 기능을 제거합니다.

·         화면과 플로우에 맞게 컨트롤러를 디자인합니다.

·         Wireframe 토대로 동선, 컨틀로러등 기본적인 레이아웃을 정의합니다.

Usability and Design draft

·         유용성과 디자인 초안 단계

·         사용성을 가다듬고 앱의 Look 결정하는 단계입니다.

·         디자인의 디테일에 너무 많은 시간을 소모하지 않도록 주의해야 합니다.

·         데이터 모델과 컨트롤러, 레이아웃을 반복해서 검토하여 전체적인 뷰와 부분들로 나눕니다.

 

 



Posted by codedragon codedragon

댓글을 달아 주세요




 

 

Kakao Oven - 계정 생성

 

·         계정 만들기

·         이메일 인증하기

 

 

 

계정 만들기

 

홈페이지에 접속한 페이지 중앙의 [지금 무료로 가입하세요] 클릭 하거나 우측 상단의 [ 계정 만들기] 버튼을 클릭합니다.

https://ovenapp.io/


 

 

 

필수 항목 입력


 

 

아래 항목 체크 >> [ 계정 만들기]


 

 

[확인]


 

 



 

 

이메일 인증하기

 

메일함에서 이메일을 확인합니다.


 

 

메일 내용안의 [링크를 클릭하여 이메일 인증] 링크를 클릭합니다.


 

 

[확인]


 

 

[로그인]


 

 

이메일주소와 비밀번호 입력 >> [로그인]


 

우측 상단의 [계정명] 클릭 >> [계정 설정하기]


 

 

이메일주소가 인증이 되어 현재 Standard 계정인 것을 확인할 있습니다.


 

 


Posted by codedragon codedragon

댓글을 달아 주세요

 

 

Behance(비핸스)

·         세계 최대 규모의 온라인 크리에이티브 커뮤니티입니다.

·         작품과 포트폴이오 공유가 가능하며 다양한 분야의 크리에이티브 전문가가 활동하고 있습니다.

·         전세계 그래픽 디자이너들의 다양한 작품과 포트폴리오를 있는 사이트입니다.

·         해당 사이트를 통해 다양한 영감과 아이디어를 얻는 도움을 받을 있는 사이트입니다.

 

https://www.behance.net/


 

Posted by codedragon codedragon

댓글을 달아 주세요


 

 

 

Interactive Wireframes and Prototypes

http://www.awwwards.com/10-cloud-based-ux-design-tools-to-try-in-2013.html

 





 

 

digital prototyping

http://bit.ly/2X9GQtx

 

digital mockup

http://bit.ly/2ImQfdU

 

 

 


 

 

갤럭시s4 목업

http://freebiesbug.com/psd-freebies/flat-galaxy-s4-mockup/


 

 

 

Posted by codedragon codedragon

댓글을 달아 주세요



 

 

스토리보드(Storyboard)

·         영화나 텔레비전 광고 또는 애니메이션같은 영상물을 제작하기 위해 작성하는 문서

·         영상의 흐름 설명하기 위한 스토리나 구성요소, 촬영정보, 동선 등의 제작시 필요한 정보들이 미리 약속된 기호들에 의해 중요한 장면별로 간단히 스케치 하여 스토리보드를 만듭니다.

·         스토리보드에는 영상촬영 편집시에 필요한 전체적인 정보 담겨 있기 때문에 제작에 들어가기 전에 점검하는 유용하게 쓰이며, 촬영및 편집을 하는 데에도 일종의 가이드 라인 되어 효율적으로 일을 있게 도와줍니다.

 

http://bit.ly/2Dd4z4l

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

 


 


Posted by codedragon codedragon

댓글을 달아 주세요



 

 

화면 구현

우리가 일상에서 눈으로 보는 다양한 서비스를 만들어내는 것을 의미합니다.

 

구분

의미

화면

·         일상에서 눈으로 보는 모든 것이 화면에 해당됩니다.

·         TV 화면, 광고 전광판, 스마트폰 화면, 지하철 안내

구현

·         사용할 있도록 만드는

 

 

 

 

 

 

소프트웨어의 화면 구현

·         소프트웨어는 다양한 사용자 입력과 그에 대한 출력을 화면에서 모두 구현합니다.

·         그러므로 소프트웨어에서의 화면 구현은 입력과 출력 모두 포함하는 개념입니다.

·         자판기, 스마트폰

 



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

디지털 프로토타이핑 진행  (0) 2019.04.15
스토리보드(Storyboard)  (0) 2019.04.14
화면 구현, 소프트웨어의 화면 구현  (0) 2019.04.12
UX 디자인(User experience)  (0) 2019.03.18
UI (User Interface)vs UX(User experience)  (0) 2019.03.10
PV vs UV  (0) 2019.03.01
Posted by codedragon codedragon

댓글을 달아 주세요


 

 

UX 디자인

·         User experience

·         제품의 사용전이나 사용 그리고 사용 후에 일어나는 사용자의 감정, 신념, 선호도, 지각, 신체적, 정신적 반응이나 행동을 포함하는 매우 넓은 개념입니다.

 

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

http://bit.ly/2J1gRlL

 


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

스토리보드(Storyboard)  (0) 2019.04.14
화면 구현, 소프트웨어의 화면 구현  (0) 2019.04.12
UX 디자인(User experience)  (0) 2019.03.18
UI (User Interface)vs UX(User experience)  (0) 2019.03.10
PV vs UV  (0) 2019.03.01
UV (Unique Visitor)  (0) 2019.02.18
Posted by codedragon codedragon

댓글을 달아 주세요