[Enact] 패널(Panel) 사용하기

Enact로 TV Application을 구축하면서, 의문점이 생겼습니다..
Application이니 웹 브라우저의 라우팅 방식을 따라야 하는지, 아니면 사용자 경험(UX)에 초점을 맞춘 기법이 필요한지

그래서 오늘은 Enact의 Panel에 대해 포스팅하고자 합니다.

어플리케이션의 화면 전환 방식

보통 모바일 어플리케이션 등을 제작할 때, 스택 형태로 화면을 관리하는 방식을 자주 사용하고는 합니다.
제가 기존에 알고 있는 내용으로는 UX 즉, 사용자 경험 측면에서 이점이 있는 것으로 알고 있었는데, 설명하자면 이렇습니다.

• 사용자 경험 측면 (UX)

stack 기반의 네비게이션은 사용자에게 굉장히 친숙하고 직관적인 형태입니다.
이는 물건을 쌓아 올리는 것과 유사한 방식이라고 할 수 있는데 '뒤로 가기' 버튼을 누르면 가장 최근에 방문한 화면으로 돌아가고, 이러한 것들이 굉장히 자연스럽기 때문입니다.
또한, stack 구조를 사용하게 되면 각 화면의 상태를 유지할 수 있게 됩니다.
사용자가 '뒤로 가기' 버튼을 통해 이전 화면으로 돌아갔을 때, 그 화면은 사용자가 마지막으로 봤던 상태 그대로 보여지는데
이는, 사용자가 앱을 사용할 때 연속성을 느끼기 때문에 굉장히 안정적인 동작 방식이라고 할 수 있습니다.

• 개발 단계에서의 편의성

stack 구조를 사용하게 되면, 앱의 화면 흐름을 명확하게 구조화 할 수 있습니다.
어떤 화면이 다음 화면으로 이어지는지, 어떻게 뒤로 가기나 특정 화면으로 진입할 수 있는지 등을 굉장히 쉽게 관리할 수 있습니다.
또한 재사용성 측면에서도 굉장한 이점이 있습니다.
화면이 독립적인 단위로 존재하기 때문에, 필요에 따라 다른 stack에서도 재사용할 수 있어 코드의 재사용성을 높이고 효율성을 극대화할 수 있습니다.

TV Application

TV Application 도 기존의 어플리케이션과 동일한 방식으로 작동하는 것이 가장 좋다고 판단했습니다.
그래서 일반적인 브라우저의 라우팅 방식이 아닌, 스택을 쌓는 구조로 앱을 구축하는 것으로 결정했고,
이는 Enact의 Panel 컴포넌트를 사용하여 쉽게 구축할 수 있었습니다.

예전에 react-native를 사용하여 모바일 어플리케이션을 구축한 경험이 있습니다.
그 경험을 토대로 화면 전환을 관리하는 방식을 채택하게 되었습니다.

Panel 이란 ?

Enact의 Panel이란, 사용자 인터페이스 (UI)의 화면을 구성합니다.
Panel은 Moonstone 테마와 Sandstone 테마에서 사용할 수 있는데 저는 SandStone UI Library를 채택했습니다.

사용법은 다음과 같습니다.

import { Panels, Panel } from "@enact/sandstone/Panels";
 
const App = () => {
  <Panels>
    <Panel>1번 패널</Panel>
    <Panel>2번 패널</Panel>
  </Panels>;
};

위 코드에서, Panels는 컨테이너의 역할을 하고 2개의 Panel을 포함하고 있는데, 각각의 Panel은 자신의 콘텐츠를 가지게 됩니다.
Panels 컨테이너를 통해 Panel 사이를 전환할 수 있습니다.

이 방식은 앞서 말했던, react-native의 네비게이션 시스템, stack navigator와 유사한 형태와 개념을 가지게 됩니다.
react-native에서 스택 네비게이터는 사용자가 앱 내에서 화면을 전환할 때, **"stack"**에 화면을 쌓아 나가는 방식으로 작동하는데,
사용자가 새로운 화면으로 이동할 때마다, 그 화면은 스택의 가장 최상위에 추가되며, 사용자가 뒤로가기를 하면 스택의 가장 최상위에서 제거됩니다.

위의 방식에 영감을 받아, redux에서 패널과 관련된 액션 함수를 추가하여, 패널을 추가시키고 삭제하는 로직을 구현하기로 했습니다.

결론

제가 작업할 Enact의 Panel 구조와 react-navigator의 스택 네비게이터는 앱 내에서 화면을 관리하는 방식을 제공한다는 것에 공통점이 있습니다.
이를 통해 사용자 경험(UX)를 향상 시키고, 앱의 품질을 높이기 위해 이러한 방식을 채택하게 되었습니다.