-------------------------------------------------------------------------------

★ Hello World! 안녕하세요! 신재구입니다! ★

♬ 즐겁게 코딩하고 꿈꾸는 프로그래머가 됩시다! ♬

☞ 불편사항 및 정오표 제보 : worntls94@gmail.com

홈으로

-------------------------------------------------------------------------------

◆ 코드하우스 수업 필기 정리본 ◆

▷ 모든 코드는 크롬환경에서 F12를 누르면 확인 가능합니다 ◁



-------------------------------------------------------------------------------

--------------------------------------------------- ○ UX_UI ○-------------------------------------------------

※ UX_UI란 무엇인가? ※




* UI 사용자 일상과 기술사이에 갭을 인터페이스로 이질감 없이 사용하도록 디자인


ex)


* 사용자 경험(UX) 기반 디자인

ㄴ 사용자가 어떤 제품이나 서비스와 사호작용하는 과정에서 얻는 총체적인 경험
ㄴ 창의성보다는 익숙함을 전제로 디자인
ㄴ 사용성이 좋아야 한다.
ex)

* UX 디자인

ㄴ 사용자의 관점에서 제품이나 서비스를 기획하고 디자인 하는것
ㄴ 좋은 UX디자인이란 사용자의 문제를 해결해주는 디자인
ㄴ 사용자 관점에서 제품, 서비스를 만들거나 개선하는것
ex)


*


ex)


* UI 사용자 인터페이스

ㄴ 사용자가 직접 맞닥게 되는, 즉 사용자가 마주하게 되는 제품의 시각적 영역
ㄴ 시각언어의 규칙
ex)


* 사용성

ㄴ 좋은 사용성은 사용자 인터페이스의 주된 목적이다.
ㄴ 햄버거 버튼, 토글 버튼
ㄴ 사용자가 제품을 효율적으로 사용하도록 돕는다.
ㄴ 쉽게 조작할수 있고 내 위치가 어디에 있는지 파악 가능한것
ex)


* 보편성

ㄴ 다양한 사용자가 사용할 수 있도록 디자인 한다.
ㄴ 기술과 사용자가 편한 소통을 하기 위한 화면을 디자인 한다.
ㄴ 통용되는 아이콘 형태, 네비게이션 위치
ex)


* 디자인 방법론

ㄴ 사용자 테스트
ㄴ 이용자 분석
ㄴ 사이트맵
ㄴ 스케치
ㄴ 프로토타이핑 (모델링)
ㄴ 협업
ex)


* 디자인 대상

ㄴ 디바이스
ㄴ 버튼
ㄴ 콘텐츠
ㄴ 시각디자인
ex)


* UX : 서비스 전반에 대한 종합적인 경험


ex)

* UI : 사용자와 기술이 만나는 시각적 영역


ex)


* UX > UI


ex)


* UX UI 프로세스 이해하고 간단하게 퀄리티를 높혀보자


ex)


* 디자인 전략

ㄴ 디자인 방법론적 접근
ex)


* 기술 전략

ㄴ XD프로그램의 이해
ex)


* UX디자인 원리

ㄴ 주관적으로 설명 하면 설득력 떨어진다.
ㄴ 디자인의 원리를 알아야 한다.
ㄴ 디자인에 도움된다.
ㄴ 논리력을 키울수 있다

1. 일관성의 원리 : 컨텐츠 구성
2. 행동유도성의 원리: Affordence Disign
3. 정보설계(정보위계) - 목차에 사용함



* UI디자인 원리

ㄴ 기초적인거라도 정의해놓고 고민하자

1. 유사성의 원리 : 유사해 보이는 요소들끼리 그룹화하여 인지하는 원리 2. 근접성의 원리 : 가까이 있는것끼리 그룹으로 무리 지어 보이는 원리 3. 일관성 : ui 디자인적 일관성


*


ex)

top

---------------------------------------------------------------------------------------------------------------------------------

※ 어도비 XD ※

ㄴ 다른 어도비 툴과 호환성이 좋다
ㄴ 피그마 같은 무료 툴도 존재한다.






* 여러창 열수 있다.


ex)

* 로컬로 저장해야 컴퓨터에 저장


ex)


* 그냥 저장하면 클라우드에 저장됨


ex)


*


ex)


*


ex)


*


ex)


*


ex)


*


ex)

top

---------------------------------------------------------------------------------------------------------------------------------

※ 0 ※




*


ex)


*


ex)

top

---------------------------------------------------------------------------------------------------------------------------------

※ v-model ※




*


ex)

top

---------------------------------------------------------------------------------------------------------------------------------

※ v-on ※




*


ex)

top

---------------------------------------------------------------------------------------------------------------------------------

↑top↑