Figma를 활용해 Vllo의 Wireframe 만들어 보기

 불과 몇년 전 만해도 영상편집도 스킬이었는데, 요새는 10대들이 더 잘한다.

이러한 이유는 이들이 영상을 많이 봐오며 자란 점도 있지만, 10대들도 쉽게 접근 해질 수 있을 만큼 영상편집 어플들이 많이 나왔기 때문이다. 그 중 사진 및 비디오 앱 차트 4위 편집 어플 VLLO의 User Story와 와이어 프레임을 그려보면서 왜 편리하는지 어떻게 개선되면 더 좋을지를 살펴보고자 한다.

Lo-Fi에서 Mi-Fi로 변경하면서 역시 글로 표현하는 것과 디자인은 차이가 있다는 것을 깨달으며, 문제해결에 있어

더 좋은 UI가 무엇인지 고민해볼 수 있었다.  

 

User Story : 사용자에 대한 페르소나 개념이 포함되고, 서비스의 목표가 그 사용자의 과업(task)이 되며,
마지막으로 비즈니스 모델에서의 목표나 중요성이 포함된다.

영상 편집을 사용하는 고객은 앱 내부에 있을 버그나 오류를 첫 페이지에 미리 공지해주었으면 좋겠다고 생각한다.

 버그나 오류를 모르고 작업하다가 작업물을 날린 이용자가 많다고 한다.

 

-사용자: As Is    영상편집 기능을 사용하는  고객이

-사용자의 목적 : I want to (goal);  첫페이지에 유료결제 다음에 버그나 업데이트에 대한 공지를 해주었으면 좋겠다.

-서비스 목표 : So that/ in order to(reason) : 버그에 대한 업데이트 및 영상편집 팁을 통해,

더 많은 이용자가 vllo 앱에 대한 신뢰도를 높혀, 리텐션 및 유료 결제전환 수를 높일 수 있다.

 

Lo-Fi 와이어 프레임_기존화면<좌>, 추가화면<우>

Lo-Fi 작성 시 변경사항

- 기존의 UI에서 "Swiping Page"를 추가한다.

- 라이트박스로 공지사항을 강조한다.

- 공지 내용은 버그 및 업데이트 등의 개선사항.

- 확인 버튼을 클릭할 수 있게 한다.

 

 

 

 

가장 좌측이 처음 시작화면>> Swipe>>

 

"주의사항, 업데이트 내역등을 짧막한 내용을 담은 팝업"

등장 후

 

>>2가지 선택사항 제시

 

1. 닫기 클릭 시, 영상편집 기본 세팅 화면으로 전환

 

2. "더 많은 디자인 팁 보기" 클릭 시 웹페이지로 이동 

이동 후 위로 Swipe 시 다시 영상편집 기본 세팅 화면으로 전환

 

 

 

 기존의 시작화면에는 시작하자마 결제 창을 보여주어서,

처음엔 당황 스러웠는데, 기업의 입장에서는 충분히 저런 UI를 만들 수 있다고 생각하게 되었다.

하지만, 이후 리뷰를 살펴보면서 버그나, 사용자를 당황스럽게 하는 점이 종종 있다는 것을 발견하였다. 

그래서 기업에 이득이 되는 결제 페이지를 보여줄 거면,

소비자에게도 필요한 페이지를 보여줌으로서,

소비자가 부담스럽지 않고, 또 앱을 지속적으로

이용할 수 있는 정보를 제공해주면 소비자도 위와 같은 UI를 이해하고, 앱 또한 신뢰를 쌓아가 리텐션율을 높일 수 있지 않을까 하는 생각에서 위와 같은 UX개선을 해봤다.

 

P.S 과제를 하면서 들었던 궁금한 점

- 각 기기 별로 와이어 프레임을 다 그려야 할까??

- 프로토 타입은 delay가 없어서 모르겠는데, 실제 사용 시에는 delay가 발생할 때 Progress bar 같은 UI도 사용하는 거같은데 이런것도 PM이 신경써야 할까?? 

 

 

 페이지만 추가하는 건데 생각보다 쉽지 않았고, 무엇보다 무슨 기능인지는 아는데 한 번도 말로 정의해본적이 없는 UI 용어들이 있어서, 작성하는게 어려웠다.

 

아래는 내가 Lo-Fi 와이어프레임 작성 시 참고했던 용어와 사이트를 따로 정리해서 또 와이어프레임을 그릴 때 참고하여고자 한다.

 

 

 

Lo-Fi 와이어프레임 작성 시 참고했던 UI 용어 정리

1. 라이트 박스(Light Box) 
팝업이 뜨는 동시에 백그라운드 화면이 어두워지거나 밝아지는데, 이를 '라이트 박스'라고 부릅니다. 라이트 박스 처리된 영역은 컨트롤 할 수 없으며 사용자가 대화 상자에 집중해야 한다는 시각적인 알림을 제공합니다. 일종의 Modal Dialog(혹은 Modal Window)라고 할 수 있습니다. 일반적인 팝업과 다른 점은, 박스를 해제하지 않고는 배경의 요소와 인터랙션 할 수 없다는 점입니다. 

5. Swipe Paging / Swipe View (Android) / Flip View (Windows8)

최상위 메뉴 혹은 상세 화면을 좌우로 Swipe하여 항목을 이동한다는 큰 개념은 같지만 이 패턴에 관한 정의가 각 OS에 따라 조금씩 다릅니다.

5.1 Swipe Paging (=Filmstrip)
최상위 레벨의 페이지를 나란히 정렬하는 방식을 말합니다. 대표적으로 iPhone의 날씨앱을 예로 들 수 있는데요. 한 번에 한 페이지씩 볼 수 있으며 사용자는 Swipe동작으로 페이지를 이동합니다. 이 패턴을 사용할 시 중요한 점은 현재 페이지의 위치 정보를 주어야 한다는 것인데요. 대표적으로 Dot Indicator가 쓰이고 있습니다. 하지만 페이지 확장성이 제한적이라는 단점이 있습니다. 아래 오른쪽 화면과 같이 페이지가 많아질수록 사용성은 떨어지게 됩니다.

 

출처: https://story.pxd.co.kr/718