[WEB] 인터렉티브 UI 기획 & 디자인

• 인터렉티브 UI개발 소개

- 정적인 화면 뿐만 아니라 사용자의 행동까지 고려한 동적인 화면 개발 업무

- 편집, 웹, 앱, 모션, 게임 등 UI 개발 업무의 경계가 모호해지고 융합

 

• 인터렉티브 UI 기획 & 디자인 (AdobeXD-벡터기반)

- XD 왼쪽 툴바메뉴 (alt + shift - 중간부터 커지기, shift - 정사각형, 원)

https://blog.naver.com/PostView.naver?blogId=hadaboni80&logNo=222597351483&categoryNo=43&parentCategoryNo=&from=thumbnailList 

어도비XD 왼쪽 툴바 메뉴 소개 (AdobeXD)

https://blog.naver.com/PostView.naver?blogId=hadaboni80&logNo=222597317170&categoryNo=43&parentCategoryNo=&from=thumbnailList 

어도비XD 상단 주요 메뉴 소개 (AdobeXD)

선택 툴

사각형 툴

원 툴

다각형 툴 (△) - 화살표 아래(꼭짓점 개수 늘리기), 화살표 위(꼭짓점 개수 줄이기)

선 툴

펜 툴

텍스트 툴아트보드 툴

라이브러리

레이어

플러그인

 

- 요소 색상, 테두리 속성 제어

https://blog.naver.com/PostView.naver?blogId=hadaboni80&logNo=222599728591&categoryNo=38&parentCategoryNo=38&from=thumbnailList 

어도비XD-선형 그레이디언트, 방사형 그레이디언트, 각도 그레이디언트, 오브젝트 흐림 효과, 배

- 그라디언트색 지정 및 그림자 흐림 효과

배경 흐림 효과 - 뒤에 도형 배경 흐리게 만들기

오브젝트 흐림 효과 - 객체 자체를 흐리게 만들기

 

- 요소 3D 변형

- 텍스트 설정 (Lorem Ipsum 설치)

- 요소 정렬 및 그룹화

버튼 만들어보기

- 이미지 불러오기

https://unsplash.com/

Beautiful Free Images & Pictures | Unsplash

이미지 불러오는 방법

1. 마우스 오른쪽 버튼 → 모양으로 마스크 만들기

2. 도형 먼저 선택 → 드래그해서 도형에 넣기

 

- 픽토그램 이미지 (벡터기반) 불러오기 

https://fontawesome.com/

Font Awesome

플러그인 설치 - Icons 4 Design

픽토그램 아이콘 이미지 불러오기

- 반복 그리드 (반복 그리드 그룹 버튼 이용)

수도소개.zip

0.57MB

기본 틀 하나만 만든 후 반복그리드 효과를 이용해 스크롤 효과를 줄 수 있다.

그리드 기능을 통해 틀을 미리 잡을 수 있음.

- 에셋 사용 (지정한 스타일 불러와서 사용하기)

- 스크롤시 위치고정

스크롤 내려도 헤더 위치는 고정시킬수있도록 지정

- 구성요소 사용

일일이 복사, 붙여넣기를 이용하면 시간이 너무 오래 걸리므로 한번에 구성요소를 변경할 수 있도록 구성요소 기능 이용 (구성요소 만들기)

원본을 변경하면 사본 전체 변경 가능

 

- 호버, 토글 효과 구현 (구성요소 만들기 기능 이용)

1) 호버 구현

마우스 오버가되면 동작하는것을 볼수있다.

2) 토글 구현

클릭하면 화살표 모양으로 바뀜

 

- 프로토타입을 활용한 UI 모션 기초

트리거, 유형, 애니메이션을 이용하여 다양한 효과를 줄수있음.

- 프로토타입을 활용한 UI 모션 기초

• 오버레이 - 독립적인 패널로 따로 관리하면서 실제 아트보드에 삽입 가능

박스별로 사각형과 연결하여 박스를 클릭할때마다 다음 사각형이 나오도록 설정

 

- 실습예제1 (마스크모션, 공통 UI 제작, 버튼 호버효과 이용) 작업물 공유

1) 마스크 모션

2) 공통 UI 제작, 버튼 호버효과 적용

3) 최종 작업물 공유

https://xd.adobe.com/view/0b210b53-2e28-455c-b7b3-3425b4283bd6-5e72/

UI모션 마스크 테스트

• 추가 (작업물 공유하는 방법)

https://xd.adobe.com/view/0b210b53-2e28-455c-b7b3-3425b4283bd6-5e72/

UI모션 마스크 테스트

- 개발자 전용 공유