인비전에서 프로토타입 만들기 – iPhone6 모바일앱 Case 1

 

***덧붙이는 글 2017.5.11

이 글이 작성된지 1년이 지났습니다. 그 사이 인비전의 변화가 눈에 띄더라고요. 제가 인비전 관련하여 작성한 내용중에 다음 3가지 부분에서 변화가 있었어요. 아래 글의 스크린샷과 실제 인비전 서비스 화면에서 차이가 있으니 혼란을 겪지 않으셨으면 합니다.

• 새 프로토타입 생성 화면 : 모양 변경
• Screen as Overlay : 설정 옵션 추가
• 프로토타입 공유 도구 : 임베드 코드 제공 기능 삭제

---

 

인비전 집중 스터디 4회차. 

그동안 드문드문 인비전 Invision에 로그인해서 훑어보고, 이미지 몇 개 추가해서 기본 제스처와 트랜지션을 적용해 링크를 걸어보며 맛만 보았었다. 그러면서 생긴 몇 가지 궁금증을 체크만 해두었는데 지난주부터 집중적으로 자세히 들여다보았다. 그간의 스터디 내용 정리. 

 

궁금증

• 화면의 일부 영역을 고정하는 방법 (스크롤 여부 상관없이) 특히 하단 영역
• 하나의 반응영역에 설정한 내용을 여러 화면에서 공동 사용하는 방법
• 팝업 이나 햄버거버튼 클릭 시 사이드에서 나타나는 메뉴 등 화면 전체가 아니라 일부만 가리며 등장하는 이미지들은 어떻게 처리하나?

이 궁금증을 해결할 샘플 이미지를 만들어 테스트 해보았다. 아래에서 그 과정을 소개한다.

 

  

화면 이미지

1. Card.png 
2. List.png
3. Book.png
4. Menu.png (레이어 팝업)

 

이미지 사이즈는 iPhone6 브라우저 해상도인 375x667을 기준으로 제작했고, 내용이 늘어남에 따라 세로 길이가 길어졌다. 

인비전에서 테스트 시 디바이스 화면의 세로 사이즈 보다 긴 이미지는 스와이프 제스처로 스크롤을 하면 아래 내용을 볼 수 있다. 웹사이트 이용할 때를 생각해보면 당연한 건데 이점을 궁금해 하는 분을 보았다. 스마트폰 디바이스라서 좀 복잡하게 생각한 듯하다.

하단 탭은 이미지의 맨 아래에 만들고, 인비전에서 이를 하단 고정으로 설정하면 된다. 좋은 점은 이미지에서 탭 부분이 투명하게 처리되어 있으면 스크롤 시 탭 아래로 내용이 지나갈 때 투명이 적용된다.

상태바는 이미지에 넣지 않았다. 인비전으로 프로토타입을 만들 경우 이미지에 상태바 디자인을 포함시키지 않고 비워두는 것이 좋다. 인비전 자체 설정으로 표시하는 것이 더 깔끔하다. 상태바 배경을 투명하게 설정할 수 있다. 

 

 

구현할 내용

1. 상태바 표시하기
2. 상단 네비게이션바 고정
3. 하단 탭바 고정
4. 하단 탭바에 설정한 인터랙션(반응영역 지정 및 제스처, 트랜지션)을 여러 화면에서 공동으로 사용하기
5. 상단 네비게이션바의 설정 버튼을 탭하면 네비게이션 영역 밑에 Menu.png가 나타나는 인터랙션 만들기. 이 역시 여러 화면에서 공동으로 사용하기

 

 

 

0. 준비

 

인비전에 로그인한 화면이다. 아무 프로젝트도 생성되지 않은 상태라면 다음과 같이 샘플 프로토타입 몇 개만 보인다. 우측의 빨간 플러스 버튼을 클릭해서 신규 프로토타입을 추가한다. 

 

프로토타입 이름을 입력하고, 디바이스를 선택한다. 선택한 디바이스에 따라 세로모드 Portrait, 가로모드 Landscape를 선택하는 옵션이 나온다. 디바이스 종류는 다음과 같다.

• Desktop (Web)
• iPad
• Android Tablet
• iPhone
• Android Phone
• Apple Watch
• Android Watch

 

다음과 같이 프로토타입이 생성되었다.

 

화면에 안내된 데로 만들어둔 화면 이미지를 드래그 앤 드롭으로 가져온다. 

.sketch 파일에 아트보드 별로 깔끔하게 정리해서 만든 경우 .sketch 파일을 드래그 해오면 전체 아트보드를 자동으로 추가해준다. 

 

다음과 같이 화면 이미지가 추가된다. 목록 위에 자리한 슬라이더를 조절하면 이미지 크기를 줄여 한 줄에 더 많은 수의 화면을 나열할 수 있다.

 

이미지를 드래그하면 순서를 바꿀 수 있고, 

 

마우스 오버 하면 다중 선택해서 하단에서 '삭제' 등의 처리를 일괄로 할 수 있다. 

 

 

첫 번째 01_card 이미지를 클릭하면 프리뷰모드로 이동한다. 

화면 하단에 기능들이 모여있다. 

눈 아이콘이 프리뷰모드 Preview mode(단축키 P), 그 옆에 사각형 아이콘이 빌드모드 Build mode(단축키 B)다. 

 

빌드모드에서 반응영역 및 제스처, 트랜지션 등을 설정한다. 그리고 프리뷰모드에서 설정한 것을 테스트 해볼 수 있다. 

 

이제부터 모든 작업은 빌드모드에서 진행한다.

 

 

 

1. 상태바 설정

 

빌드모드에서 하단의 설정 Configuration을 클릭한다. 

 

상태바 스타일 Status Bar Style을 설정하는 곳이 보인다. 처음 설정은 위와 같이 되어 있다. 그래서 상태바가 다음과 같이 보인다. 

 

내가 만든 이미지와 어울리지 않는다. 상태바 배경을 투명하게 하고 글자색을 검정으로 바꾸고 싶다. 설정창에서 Background 를 Transparent로, Foreground를 Dark로 변경한다. 

 

이제 보기 좋다. 상태바 배경이 투명이라 내가 만든 이미지의 배경색이 달라도 자연스러운 모습을 유지할 수 있다. 대신 상태바 글자가 진한 색이므로 배경색은 연하게 사용해야 한다.

 

 

 

2. 상단 네비게이션바 고정

 

상단의 네비게이션바를 스크롤 여부에 상관없이 같은 자리에 고정으로 보여주기 위해서는 이미지 우측의 Fixed header 슬라이더를 고정하고 싶은 영역만큼 아래로 드래그 하면 된다. 정확한 선택을 위해 드래그 하는 동안 슬라이더의 움직임을 확대해서 보여준다.

 

슬라이더를 드래그하는 방법 외에 Fixed header 글자를 클릭하면 숫자를 입력해서 설정할 수 있다. 

이 작업은 각각의 화면에 개별적으로 설정해주어야 한다. 02_List 화면, 03_Book 화면도 각각 설정해주었다. 

 

 

 

3. 하단 탭바 고정

 

하단 탭바도 비슷한 방법으로 고정시킬 수 있다. 하단 탭바를 자연스럽게 고정시키기 위해서는 이미지를 만들 때 이미지의 맨 아래에 탭바를 만들어 두어야 한다. 디바이스 화면 세로 사이즈에 맞춰 탭 이미지를 위치시키면 안된다. 

 

Fixed footer 슬라이더를 위로 드래그해서 고정할 영역을 정한다. Fixed footer 글자를 클릭하면 숫자로 입력 가능하다.

 

내가 디자인한 탭바는 흰색 배경에 투명값을 주었다. 빌드모드에서 배경이 회색으로 보이지만 프리뷰모드에서 테스트하면 다음과 같이 정상 작동한다.

 

참고로 인비전에서는 디바이스 화면 사이즈보다 작은 크기의 png 이미지를 임포트하면 이미지의 나머지 부분(투명 부분)을 검정으로 표시한다. 위에서 신규 프로토타입을 생성하고 04_menu.png를 임포트한 모습이 바로 그거다. 

 

하단 탭바 고정 작업도 각각의 화면에 개별 설정해 주어야 한다. 

 

 

 

4-1. 반응영역을 여러 화면에서 공동으로 사용 가능한 템플릿으로 만들기

 

현재 화면은 01_Card이다. 여기서 하단 탭바에 01_Card / 02_List / 03_Book를 링크하는 반응영역 Hotspot을 템플릿 Template으로 만들어보겠다. 

 

아래 안내처럼 반응영역을 만들 곳을 드래그 하면 된다.

 

 

드래그를 하자 팝업이 나타난다. 반응영역이 파란색으로 표시된다.

 

 

Select a destination를 클릭해서 아래처럼 링크할 화면을 선택한다. 

화면 외에 아래와 같은 선택 옵션이 몇 가지 더 있다. 이 부분은 다음 포스팅에서 정리할 예정이다.

• Another point on this screen
• Link Back / Close (last screen visited)
• Screen as Overlay
• Previous Screen in Series
• Next Screen in Series
• External URL

 

 

다음은 링크한 화면이 실행될 제스처 Gesture와 트랜지션 Transition을 선택한다. 여기서는 기본 설정으로 해본다. 이 부분도 자세한 내용은 다음 포스팅에서 소개하겠다. 

 

 

다음으로 지금까지의 설정을 템플릿으로 저장한다. Include hotspot in template을 체크한다.

 

 

Create New를 클릭해서 템플릿 이름을 지정하고 Save 한다. 

 

 

여기서 중요한 것이 있다. Position relative to bottom of design 옵션이다. 

지금 만드는 템플릿은 하단 탭바에 공동으로 사용할 예정이다. 그런데 하단 탭바의 위치가 이미지 마다 다르기 때문에(이미지 세로 길이가 화면마다 달라서) 상대값으로 설정해야 한다. 그래서 이곳을 꼭 체크해 주어야 한다. 

파란색이었던 반응영역이 녹색으로 변경된다. 일반 반응영역은 파란색, 템플릿은 녹색으로 표시된다. 

 

 

 

이런 식으로 나머지 아이콘에도 인터랙션을 설정하고 템플릿으로 만든다. 

 

 

 

4-2. 템플릿을 여러 화면에 적용하기

 

이제 이 템플릿들을 02_List / 03_Book 화면에 적용해보자. 

화면 위를 보면 3 Hotspot Templates Applied 라고 되어 있다. 클릭해보자.

 

 

만들어 둔 템플릿들이 보인다. 현재는 각각이 1개의 스크린에서 사용되고 있다고 표시되어 있다. 

 

 

마우스 오버하면 아이콘이 뜨는데 번개아이콘을 클릭하면 적용할 화면을 선택할 수 있다. 

 

 

하단에서 템플릿을 적용할 02_List / 03_Book 화면을 클릭하고 Done 한다. 

 

나머지 ‘탭 02 Link’ 템플릿, ‘탭 03 Book’ 템플릿도 마찬가지로 적용할 화면을 지정한다. 

 

 

 

이제 02_List 화면을 열어서 확인해보자. 

 

빌드모드에서 다른 화면을 여는 방법

화면 하단의 화면명을 클릭하면 나오는 목록에서 선택한다. 

 

다른 방법으로 02_List 화면이 링크된 반응영역을 Shift키 누른 채로 클릭해도 이동한다. 

 

 

02_List 화면을 열어보니 아래와 같이 반응영역이 자동으로 적용되어 있다.

 

 

03_Book 화면도 마찬가지로 적용되어 있다.

 

 

 

5. 특정 위치에 팝업 이미지 나타나게.

 

상단 네비게이션바에서 설정 버튼을 탭하면 네비게이션 영역 밑에 Menu.png가 나타나게 만들고, 이 인터랙션을 템플릿으로 만들어 전체화면에 적용해 보겠다. 

 

빌드모드에서 01_Card 화면에 만들어보겠다.

 

먼저 반응영역을 지정하고, Screen as Overlay를 선택한다.

 

 

제스처는 기본으로 두고, Select a screen을 클릭한다. 

 

 

목록에서 04_Menu를 선택한다. 

 

 

다음으로 포지션 Position과 트랜지션 Transition이다. 

포지션은 선택한 이미지가 등장하는 위치, 트랜지션은 나타날 때의 움직임이다.

Menu.png는 네비게이션바 아래에 표시할 거라서 화면 위에서부터 70px의 위치에 나타나면 된다. 그런데 수치로는 조정할 수 없고 Custom 옵션을 이용해야 한다. 

 

 

포지션을 Custom으로 선택하면 다음과 같은 화면이 나타난다.

 

 

마우스 커서를 움직여 Menu.png가 나타날 위치를 정하고 Enter키 누른다.

 

여기까지 인터랙션 설정은 끝났다. 

이제 Include hotspot in template 옵션을 체크하고, 템플릿 이름을 지정해 저장한다. 

추가로 옵션을 살펴보자면...

Reverse transition on Close link

띄웠던 이미지를 닫을 때 트랜지션을 반대로 한다.

Close on clicking outside of overlay

이것은 체크를 해주는게 좋다. 띄워진 이미지를 닫고 원래대로 돌아갈 때 이미지 바깥 부분 아무데나 탭하면 된다. 띄워놓은 이미지 안에 닫기 버튼을 만들어서 인터랙션을 걸어주는 정도의 세세한 부분까지 작업하지 않을려면 이것은 체크를 해주는게 좋다.

 

 

Screen as Overlay에서 Custom 포지션의 단점

포지션을 Custom으로 설정한 경우 위치가 절대값으로 고정되기 때문에 내용이 긴 화면에서 스크롤을 내려서 보다가 ‘메뉴오픈’을 탭하면 04_menu.png가 나타나는 위치에서 벗어나서 안보일 수도 있다. 

 

 

설정한 내용을 변경 또는 삭제

반응영역을 다시 클릭하면 설정을 변경할 수 있다. Save 버튼 옆에 delete를 클릭하면 삭제된다. 

 

 

템플릿 목록에 방금 만든 ‘메뉴 오픈’ 이 보인다. 우측의 번개 아이콘을 클릭해서 앞서 해 본대로 나머지 화면에 적용한다. 

 

 

아래는 이번 테스트 사례를 인비전에서 프로토타입으로 만든 것이다. 

인비전은 프로토타입을 만들고, 그것을 여러 사람이 같이 보고, 그곳에 각자 코멘트를 붙여 의견을 교환할 수 있는 커뮤니케이션 도구이다. 인비전이 제공하는 공유 도구 중 임베드 코드를 가져와서 이곳에 붙여봤다. 

 

 

트랜지션이나 애니메이션 부분에 있어 좀 더 현란하거나(?) 완성도 높은 프로토타입을 만들기는 어렵지만 이 정도로 충분한지 여부는 프로젝트에 따라, 프로토타이핑으로 얻어낼 수 있는 것에 대한 각자의 생각과 목적에 따라 다를 거라는 생각이 든다. 

와이어프레임 그릴 때도 일부러 자세하게 그리지 않는 부분도 있다. 초반부터 너무 세밀하고 자세해도 어려운 점이 있으니… 어느 면에서는 정말 탁월한 도구라는 생각이 든다. 

인비전에서 제공하는 제스처와 트랜지션에 관한 것은 별도로 정리할 예정이다.

 

관련 글

인비전 invision 제스처 및 트랜지션 정리