인비전 invision 프로토타입 만들기 – TOP 버튼, 플로팅 메뉴 버튼 예제

 

이번 포스팅에서는 인비전의 Fixed Footer와 Screen as Overlay를 활용한 예제를 소개합니다.

Fixed Footer를 활용해서
화면 맨 위로 이동하는 인터랙션 구현하기 (Top Button)
화면 하단에 TOP 버튼이 있는데, 화면을 스크롤 해도 버튼의 위치는 그대로 유지되고, 버튼을 탭 하면 화면의 맨 위로 스르륵 이동합니다.

Fixed Footer, Screen as Overlay를 활용해
플로팅 메뉴 버튼 구현하기 (Floating Menu Button)
화면 하단에 메뉴 버튼이 있는데, 화면을 스크롤 해도 버튼의 위치는 그대로 유지되고, 버튼을 탭 하면 보조 메뉴가 위에 나타나고, 다시 탭 하면 사라집니다. 보조 메뉴가 나타난 상태에서는 배경이 살짝 연해집니다.

 

준비

이번 예제는 아이폰 기준으로 만들었습니다. 샘플 이미지는 세로길이 약 1900px로 맨 위로 이동할 때 스르륵이 극적으로 느껴지도록 길게 만들었습니다.

샘플 이미지 3개

1. Article.png (TOP버튼 구현용)
2. Article.png (Floating Menu 구현용)
3. MenuOpen.png (Floating Menu 구현용) * 플로팅 메뉴 버튼을 탭 하면 오버레이 될 이미지

예제에 사용될 이미지

 

인비전에서 임포트한 모습

 

___ 

Top Button 화면 맨 위로 이동하는 인터랙션 만들기. 

결과 스크린샷

 

Step1. 화면 이미지 만들 때 주의할 점

프로토타입 화면 상에서 버튼이 컨텐츠 내용 위에 겹쳐지게 표현하려면 아래와 같이 원본 이미지 맨 아래에 배경이 투명한 영역을 두고 거기에 버튼을 배치해야 합니다. 반드시 버튼이 위치한 부분의 배경은 투명해야 합니다.

 

Step2. TOP 버튼을 하단에 고정시키기 (인비전에서 Fixed Footer 설정)

인비전에 이미지를 임포트하고, 빌드모드로 갑니다.

 

TOP 버튼이 있는 맨 아래로 스크롤 합니다.

TOP 버튼이 위치한 부분의 배경이 투명이라 시커멓게 보이고 있습니다. 우측 하단에 Fixed Footer가 보입니다. 

Fixed Footer 슬라이더를 잡아 위로 드래그합니다. 경계선을 잘 맞춰서 투명한 영역을 제외 시킵니다. 

이제 프리뷰모드에서 화면을 스크롤 해보면 TOP 버튼이 컨텐츠 위에 겹쳐 보이게 됩니다.

빌드모드, 프리뷰모드가 궁금하면 아래 글을 참고해주세요. 인비전에서 프로토타입 만들기 – iPhone6 모바일앱 Case 1

 

Step3. 맨 위로 스르륵 설정하기

이제 TOP 버튼을 탭 했을 때, 화면 맨 위로 스르륵 이동하는 인터랙션을 적용해보겠습니다. TOP 버튼 주변을 드래그해서 반응영역을 만들면, 설정창이 나타납니다.

 

현재 화면의 맨 위로 이동해야 하므로 Link to에서 Another point on this screen을 선택합니다. 그러고 나면 Set anchor position 파란색 버튼이 생깁니다.

 

Set anchor position을 클릭하면 다음과 같은 화면이 나타납니다. 화면 위에 파란색 아이콘과 점선이 보이네요. 마우스를 움직이면 파란 아이콘과 점선이 따라 움직입니다.

 

여기서 화면 맨 위를 선택합니다. 그런데 제가 해보니 맨 위를 최대한 정교하게 선택했더니 (0px 위치) 설정이 제대로 반영되지 않았습니다. 아래처럼 1px 정도는 남겨야 했습니다.

 

1px 지점을 클릭하고 원래 화면으로 돌아옵니다. 다음과 같이 파란 버튼의 글자가 바뀌었네요. Anchor position set at 1px 설정이 제대로 되었습니다.

만약 설정하고 나왔는데 파란 버튼의 텍스트가 위와 같이 바뀌지 않았다면 제대로 설정되지 않은 것입니다. 다시 설정을 해보세요. 그리고 스르륵 느낌을 만들기 위해 Smooth scrolling transition 체크하고, Save하면 완성입니다.

이제 프리뷰모드에서 화면을 스크롤한 뒤 TOP 버튼을 탭 해보세요.

 

Step4. 프로토타입 테스트 해보기

여기까지 만든 프로토타입은 다음 URL에서 테스트 해볼 수 있습니다.
https://invis.io/G89Y2OYKT#/213354444_Article

 

___ 

Floating Menu Button 플로팅 메뉴 버튼 인터랙션 만들기.

결과 스크린샷

 

Step1. 이미지 준비하기

화면 이미지 맨 아래에 플로팅 버튼을 포함시켜서 만듭니다. 앞의 예제에서 보았듯 버튼이 위치한 곳은 배경이 투명해야 합니다. 플로팅 버튼을 탭 했을 때 나타날 이미지는 별도로 저장합니다. 오버레이 이미지도 배경을 투명하게 만들어야 자연스럽습니다.

Article.png (아래 부분)

MenuOpen.png

 

Step2. 플로팅 메뉴 버튼을 하단에 고정시키기

인비전에 Article.png와 MenuOpen.png를 임포트 합니다. 앞의 예제에서 설명한 방법으로 Fixed Footer를 조절해 버튼 위치를 고정시켜주세요.

 

Setp3. 오버레이 메뉴가 나타나는 인터랙션 만들기

플로팅 버튼 주변을 드래그해서 반응영역을 지정하고, 설정창에서 Link To를 Screen as Overlay로 선택합니다.

 

 

그러면 다음과 같이 옵션 항목이 나타나는데, 여기서 Screen과 Position, Transition, Bg를 설정해보겠습니다.

 

먼저 임포트된 화면 이미지 중 Menu Open을 선택합니다.

 

포지션은 Bottom Right을 선택합니다. 포지션 선택을 마치면, 포지션에 따라 이미지의 주변 여백을 숫자로 입력할 수 있습니다. 배경과 오버레이 이미지가 어긋나지 않게 숫자를 조절해서 위치를 맞춥니다.

 

다음으로 트랜지션을 선택합니다. 여기서는 Instant를 선택했습니다.

 

전에는 없던 기능인데 오버레이 상태일 때 배경에 투명도를 설정할 수 있게 되었더군요. 값을 50으로 해보았습니다.

 

여기까지 Screen as Overlay의 옵션을 아래와 같이 설정하고 저장합니다.

 

Step4. 프로토타입 테스트 해보기

여기까지 만든 프로토타입은 다음 URL 에 접속해서 테스트 해볼 수 있습니다. 
https://invis.io/T29Y2S9U9#/213359207_Floating_Btn_Menu

 

프로토타입 공유 방법 중 EMBED 코드가 사라졌네요. 본문에 직접 삽입하지 못하게 되어 아쉽네요. 
여기서 포스팅을 마칩니다.