AdobeXD 프로토타입

 

스크롤 시 위치 고정

 

•  웹 UI나 모바일 UI에서 스크롤을 할 때 고정이 되어야 하는 부분을 고정
•  예를 들면 모바일에 하단 독바, 상단 gnb 영역
•  디자인을 하고 코딩이 되기 전 단계에서 고정을 해보는 것
•  아래의 디자인은 freepik에서 무료로 다운로드하여서 살짝 수정한 디자인입니다.

 

스크롤 시 고정

 

1. 프로토타입 탭 클릭
2. 고정하고자 하는 부분들을 그룹화하여 클릭
3. 프로토타입 옵션 창에서 스크롤 시 위치 고정 체크
4. 선택한 요소 좌측 상단에 압정 모앙이 생기면 고정 완료
5. 마지막으로 고정이 잘 되었는지 실행

 

프로토타입 기능 설명

 

기능을 사용할 디자인

 

•  프로토 타입의 기능을 사용하려면 일단 디자인이 필요
•  해당 디자인은 어도비에서 제공해주는 웹 와이어 프레임 키트에서 틀을 가지고 온 후 사진을 추가
•  사진 또한 픽사 베이에서 무료로 다운로드한 사진들이다
•  디자인이 준비되었다면 한 단계씩 차근차근 만들어봅시다.
•  어도비 XD가 인터렉션이 완벽하지는 않지만 기본적인 느낌 정도만 볼 수 있도록 기능을 사용

[ 1단계 ] 첫 번째 아트보드에서 두 번째 아트보드로 연결하기

아트보드 연결

 

1. 프로토타입 탭에서 첫 번째 아트보드를 클릭하게 되면
2. 오른쪽과 같은 파란색 원안에 화살표가 생기는 것을 확인할 수 있다.
3. 화살표를 꾹 누른 채 두 번째 아트보드로 드래그만 하면 아트 보다가 연결된다

[ 2단계 ] 연결 옵션 설정하기

1. 트리거

트리거의 종류

 

•  트리거(Trigger)는 총의 방아쇠를 뜻하는 사격 용어로, 어느 특정한 동작에 반응해 자동으로 필요한 동작을 실행하는 것을 의미
•  쉽게 말하자면 이벤트를 발생시키기 위한 방법
•  어도비 XD에는 다섯 가지의 트리거가 존재
•  XD에서는 느낌만 보는 것이니 탭이나 드래그가 많이 쓰인다
•  시간은 이번에 업데이트되면서 생긴 거 같아서 아직은 저도 사용 X
•  탭 : 말 그래도 클릭을 했을 때 첫 번째에서 두 번째로 넘겨지는 효과
•  드래그 : 드래그했을 때 첫 번째에서 두 번째로 넘쳐 기는 효과

 

 

2. 액션

액션 옵션

 

1.  액션은 트리거가 발생했을 때 변화라고 생각해보자
2.  많이 사용되는 유형은 전환, 자동 애니메이트
3.  전환 : 말 그대로 아트보드가 그냥 전환되는 효과
4.  자동 애니메이트 : 전환보다 자연스럽게 넘어가듯 전환 되는 효과
5.  저는 자동 애니메이트를 거의 사용하고 이징 효과로는 서서히 시작-끝내기를 사용
6.  이징 효과를 선택하고 재생시간을 설정해주면 기본 옵션 설정은 완료

 

다음 포스팅은 자동애니메이트를 이용하여 응용하여 쓰는 방법들을 정리해보겠습니다