[기획] 앱 기획 어떻게 할까? (페이지 이동 구현방식)

안녕하세요. 

IT 아웃소싱 프리모아의 앱 기획을 사랑하는 WILL입니다.

오늘 컨텐츠의 목차는 간단하게 다음과 같습니다.

1. 앱 기획에서 페이지 이동 이란? 

2. 웹 VS 앱 페이지 이동 구현방식 차이 

3. 참고 사례 페이스북 

4. 화면 전개 종류 및 방법

[링크]

보고있던 화면에서 다른 화면 또는 다른 메뉴로 이동을 할 때 우리는 링크라는 방법을 사용합니다. 기획자가 처음 앱 기획을 할 때 많이들 에로사항을 느끼는 부분중의 하나가 웹과 앱의 페이지 이동방식의 차이와 앱에서의 페이지 이동 구현방식에 대해서 살펴보겠습니다. 

2. 웹 VS 앱 링크 이동 차이

링크이동 하는 방법은 크게 A )새 창 이동 방법 B )본 창 이동 방법 두가지에 대한 고민이라고 생각하시면 됩니다. 팝업창의 경우도 새창으로 여는 방식이라고 생각하면 됩니다. 

[웹 페이지에서의 링크 이동]

① 전형적인 페이지 링크의 방식

② 본 창에서 페이지가 바뀌는 방식

③ 새 창이 열리는 방식 

[앱 페이지에서의 링크 이동]

① 링크 A로 이동하면 메뉴가 없어지고 페이지만 존재

② 메뉴로 이동시 홈으로 돌아가는 Back 버튼이 존재합니다.(대체 메뉴가 있을 경우, Back 버튼 없음)

③ 팝업과 같은 새창으로 열리는 경우 본 창 위를 가리며 나타납니다.

④ 메뉴에서 서브링크로 이동하면 메뉴가 없어지고 전 페이지로 이동하느 Back 버튼이 나타남

[링크 이동의 방식차이]

웹페이지의 링크는 페이지 간의 이동이 자유롭습니다. 반면 앱 페이지의 링크는 순차적인 이동 방식을 보입니다. 비효율적이라고 생각할 수도 있지만 앱의 페이지 구조를 보면 효율적 이라는걸 알 수 있습니다. 

① A1에서 메뉴3으로 이동, 화면에 보여지기는 B메뉴인데 실제로는 A, A1,B의 세 페이지가 순차존재 

② 없어져야 할 것 같은 페이지가 여전히 남은 상태로 그 위에 새로운 페이지가 덮어 씌워지는 것이 앱의 페이지 이동 방식입니다. 링크에 의한 페이지 이동이 아니었던 것이지요. 

[출처] 앱홓 ㄹ에서의 페이ㅓㅗㅓ지 이동|작성자모든 ㅁ 노노니

실제로는 모든 메뉴에 해당되는 페이지가 있지만 현재 한 메뉴의 화면만 보여지고 있을 뿐입니다. 

가장 착각되는 부분이 이전 페이지로 이동하는 화살표입니다. 정확하게 표현하면 뒤로가기 버튼이 아니라 닫기 버튼이 되어야 합니다. 왜 닫기 버튼이 아니라 링크로 표현을 한 것일까요? 웹에서는 Location 이라는 페이지 이동단계가 있지만 앱은 화면의 이동단계를 보여줄 정도로 화면이 크지 못해 단계를 축약해야 합니다. 

① A1에서 A로 돌아온(A1페이지를 닫은) 후 다른 메뉴로 이동하면

② A1 페이지는 열려있지 않게 됩니다. 페이지가 계속 새로 열리는 방식에서 열렸던 페이지를 닫을 수 있도록 해야합니다. 

[참고사례 페이스북]

페이스북의 경우 뉴스피드 화면에서 계속 읽기 페이지로 이동하는 방식을 보면 왜 페이지를 그렇게 표현하는지 이해하기가 쉽습니다. 

각 메뉴마다 독립적인 페이지 이동규칙을 가지고 있습니다.

①한 메뉴에서 다른 메뉴로 이동할 수는 있으나 다른 메뉴로 이동하면서 새 페이지를 열리게 하지는 않습니다. 알림페이지에서 내용을 클릭함녀 알림 메뉴 내에서 페이지가 나타나지 뉴스피드 메뉴로 이동하면서 알림 내용을 보여주지 않는 다는 것입니다.

② 아이폰(iOS)는 탭바라고 하는 하단 메뉴바가 있습니다. 이 탭바를 이용하면 어느 페이지에 있든지 다른 메뉴로 바로 이동할 수 가 있습니다. 탭바를 이용하여 페이지가 이동하면 이동하기 전 메뉴의 페이지는 그대로 남아있고 다시 처음 메뉴로 돌아오면 여전히 이동하기 전의 페이지가 남아 있습니다.

③ 외부링크를 여는 경우 탭바가 없어집니다. 그리고 페이지를 닫지 않으면 탭바를 이용할 수가 없습니다. 

④ 각 메뉴의 서브 페이지로 이동하는 경우 반드시 메뉴 첫 페이지로 돌아올 수 있는 링크를 제공합니다. 

[링크의 화면 전개방식 3가지]

많은 앱서비스에서 사용하는 3가지 방식의 페이지 전개 방식이 있습니다.

① 각 메뉴 메인 페이지로 돌아와야지만 다른 메뉴로 이동할 수 있는 방식입니다.

② 서브 메뉴에서도 다른 메뉴로 이동할 수 있는데 각 메뉴마다 펼쳐진 페이지는 그대로 유지되어 다시 원래 메뉴로 돌아오면 이동할 때 당시의 페이지가 남아 있습니다.

③ 무한 새창이 열리는 방식입니다. 웹 페이지와 같이 언제 어디서든 원하는 링크로 이동할 수 있습니다. 그러나 계속 새창이 열리기 때문에 동일한 페이지가 여러번 열려 있을 수 있습니다.

안드로이드폰의 Back 버튼을 연속해서 클릭해 보면 페이지가 열렸던 순서대로 계속 닫히며 첫 페이지까지 오게 됩니다.

가장 많이 사용되는 방식은 2번의 각각의 메뉴가 독립적으로 페이지를 가지는 구조입니다.

앱에서 2단계의 클릭으로 원하는 결과 화면까지 가야한다는 야후 CEO '마리사 메이어' (전 페이스북 UI 디자인)의 앱 디자인론 처럼 많은 페이지가 순차적으로 누적되어 있는 상태에서 다른 메뉴로 이동하는 것은 스마트폰의 성능을 저하시키게 됩니다. PC또한 많은 페이지를 탭의 형식으로 열러놓으면 한계 상태에 가서는 느려질 수 밖에 없습니다.

이제는 무턱대고 메뉴는 항상 존재해야 하며 어떤 링크든 웹페이지처럼 열려야 된다고 하시지 마시길.

스마트폰이라는 작은 화면과 비교적 저사양 기기에서 사용자가 매우 논리적으로 페이지를 다음, 이전으로 이동하고 성능 또한 유지하는 좋은 구조를 만드시기 바랍니다.

원문 출처: http://durandot.blog.me/220317781356

해당 컨텐츠는 프리모아에서 활동하시는 프리랜서 

노노니님의 허락을 받고 재가공한 컨텐츠 입니다.

감사합니다.