도리스 블로그

이번 포스팅에서는 인비전의 Fixed Footer와 Screen as Overlay를 활용한 예제를 소개합니다.Fixed Footer를 활용해서 화면 맨 위로 이동하는 인터랙션 구현하기 (Top Button) 화면 하단에 TOP 버튼이 있는데, 화면을 스크롤 해도 버튼의 위치는 그대로 유지되고, 버튼을 탭 하면 화면의 맨 위로 스르륵 이동합니다.Fixed Footer, Screen as Overlay를 활용해 플로팅 메뉴 버튼 구현하기 (Floating Menu Button) 화면 하단에 메뉴 버튼이 있는데, 화면을 스크롤 해도 버튼의 위치는 그대로 유지되고, 버튼을 탭 하면 보조 메뉴가 위에 나타나고, 다시 탭 하면 사라집니다. 보조 메뉴가 나타난 상태에서는 배경이 살짝 연해집니다. 준비이번 예제는 아..

인비전으로 만든 프로토타입을 공유하는 방법은 크게 2가지다. 소셜미디어 계정에 공유하는 방법과 URL 또는 EMBED 코드를 통한 공유 방법이다. 현재 공유 가능한 소셜미디어는 슬랙과 드리블이다. 향후 비핸스도 추가될 모양이다. 여기서는 소셜미디어 공유 방법은 소개하지 않는다. 여기서는 URL로 프로토타입을 공유하고, PC 브라우저로 접속해서 테스트하는 방법 위주로 소개한다. 프로토타입을 URL로 공유하면 PC나 스마트폰 등 어떤 디바이스에서든 브라우저를 통해 접속해서 테스트 할 수 있다. 그런데 스마트폰 브라우저에서 접속할 경우 코멘트를 작성할 수는 없다. 코멘트를 주고받으며 커뮤니케이션 하려면 PC 브라우저에서 접속해야 한다. PC 브라우저로 접속한 모습URL로 접속하면 처음 상태는 테스트 모드다. ..

인비전 invision에서 반응영역 hotspots 지정한 뒤 할 수 있는 것반응영역 지정 후 Link To에서 목적지를 선택한다.목적지는 추가해 놓은 화면 이미지 중에 하나가 될 수도 있고, 현재 화면의 다른 부분으로 이동이 될 수도 있고, 프로토타입 이미지 순서상에서 이전 화면이나 다음 화면이 될 수도 있다. 다음의 옵션 중에서 선택 가능하다. Another point on this screen 현재 화면의 다른 부분으로 이동Link Back / Close (last screen visited) 현재 화면을 닫음(현재 화면이 열리기 직전 화면이 나타남)Screen as Overlay 이미지를 선택해서 현재 화면 위에 겹침 (팝업이나 햄버거메뉴 등 화면의 일부만 가리며 등장하는 이미지를 화면 위에 띄울..

***덧붙이는 글 2017.5.11이 글이 작성된지 1년이 지났습니다. 그 사이 인비전의 변화가 눈에 띄더라고요. 제가 인비전 관련하여 작성한 내용중에 다음 3가지 부분에서 변화가 있었어요. 아래 글의 스크린샷과 실제 인비전 서비스 화면에서 차이가 있으니 혼란을 겪지 않으셨으면 합니다. 새 프로토타입 생성 화면 : 모양 변경Screen as Overlay : 설정 옵션 추가프로토타입 공유 도구 : 임베드 코드 제공 기능 삭제 인비전 집중 스터디 4회차. 그동안 드문드문 인비전 Invision에 로그인해서 훑어보고, 이미지 몇 개 추가해서 기본 제스처와 트랜지션을 적용해 링크를 걸어보며 맛만 보았었다. 그러면서 생긴 몇 가지 궁금증을 체크만 해두었는데 지난주부터 집중적으로 자세히 들여다보았다. 그간의 스터..