Anvil 로 웹 앱 만들어서 배포하기 (기능편) - <3> UI에 주제별 탭(Tab) 만들기

웹 서비스를 만들거나 사용하다 보면, 한 UI Page 내부에 여러가지 기능을 넣어야 할 때가 있다.

Microsoft Bing(https://www.bing.com/images/create)을 통해 생성한 무료 일러스트

그러나 한정된 페이지 공간 안에 이런저런 기능 및 요소들을 욱여넣다보면 스크롤이 너무나 길어져 사용자의 편의성이 저해되거나, 스크롤을 하지 않겠다고 요소의 크기를 줄여 다닥다닥 붙여버리면 마찬가지로 시인성과 편의성이 떨어지게 된다. 이러한 사태를 막기 위해 보통의 서비스들에서 자주 차용하는 방식이 한 페이지 내에서 여러개의 탭을 두어 클릭에 따라 자유롭게 전환하도록 하는 것이다.

네이버 메인 화면에서 찾아볼 수 있는 탭 사용 예시

이렇게 했을 때, 별도의 페이지 이동 없이 다양한 요소를 넣을 수 있어 페이지별로 기능을 카테고리화 하기 더 편해지고, 사용자의 이용 편의성도 증가시킬 수 있다.

Anvil은 기본적으로 Form이라는 페이지 요소를 기반으로 페이지 간 링크를 통해 이동하는 방식을 사용하게 되는데, 이러면 아래와 같이 텔레토비 동산에서 보라돌이, 뚜비, 나나,뽀 페이지로 갔다가 돌아올 수 있도록 페이지 간 상호 링크를 기반으로 UI를 설계해줘야 한다.

메인 Form 코드

class Form1(Form1Template):
  def __init__(self, **properties):
    # Set Form properties and Data Bindings.
    self.init_components(**properties)

    # Any code you write here will run before the form opens.

  def button_1_click(self, **event_args):
    """This method is called when the button is clicked"""
    open_form('boradori')

  def button_2_click(self, **event_args):
    """This method is called when the button is clicked"""
    open_form('ttubi')

  def button_3_click(self, **event_args):
    """This method is called when the button is clicked"""
    open_form('nana')

  def button_4_click(self, **event_args):
    """This method is called when the button is clicked"""
    open_form('bbo')

각 폼에서 홈으로 오는 귀환 코드:

open_form('Form1')

이런식으로 페이지를 왔다갔다 하는 식으로 작성하면 아래와 같이 완성된다.

페이지(Form) 기반으로 다중 페이지 어플리케이션 만들기

그런데, 이렇게 되면 보라돌이에서 나나로 바로 간다거나 뽀에서 나나로 간다거나 할 때 무조건 텔레토비 동산으로 갔다가 가야하는 귀찮음이 생기게 된다. 이때 이 귀찮음을 해결하려면 아래의 두가지 방법이 있는데

1. 각 Form(보라돌이, 뚜비, 나나, 뽀) 별로 서로다른 Form으로 이어지는 링크 및 버튼을 만들어준다
2. 각 Form을 탭으로 취급해서 이미 만들어둔 버튼 밑에 표시하게 한다.

1번 옵션의 경우 본 예시와 같이 각 탭마다 중복으로 동일한 엘리먼트를 생성해주고 코딩해줘야하는 번거로움도 따라오게 되므로, 중복되는 기능이 많은 페이지를 묶을때도 탭으로 취급하는게 더 좋다고 할 수 있겠다.

따라서 본 포스팅의 목적인 2번. 각 Form을 탭 취급하는 방법을 아래와 같이 살펴본다.

위의 어플리케이션을 이미 완성한 상태라면 아래와 같이 각 Form이 존재하는 상황일 것이다.

이 상태에서 별다르게 바꿀 것 없이, Form1에 탭 역할을 할 outlined_card를 하나 추가해주고

탭 역할을 수행할 self.outlined_card_2

Form1의 버튼 클릭 함수들만 아래와 같이 바꿔주면, 탭 형식으로 간단히 전환할 수 있다.

from ._anvil_designer import Form1Template
from anvil import *

from ..bbo import bbo
from ..boradori import boradori
from ..nana import nana
from ..ttubi import ttubi

class Form1(Form1Template):
  def __init__(self, **properties):
    # Set Form properties and Data Bindings.
    self.init_components(**properties)

    # Any code you write here will run before the form opens.

  def button_1_click(self, **event_args):
    """This method is called when the button is clicked"""
    self.outlined_card_2.clear()
    self.outlined_card_2.add_component(boradori())

  def button_2_click(self, **event_args):
    """This method is called when the button is clicked"""
    self.outlined_card_2.clear()
    self.outlined_card_2.add_component(ttubi())

  def button_3_click(self, **event_args):
    """This method is called when the button is clicked"""
    self.outlined_card_2.clear()
    self.outlined_card_2.add_component(nana())

  def button_4_click(self, **event_args):
    """This method is called when the button is clicked"""
    self.outlined_card_2.clear()
    self.outlined_card_2.add_component(bbo())

코드를 살펴보면, 다른 form을 클래스 변수로 import 해서 버튼 클릭때마다 탭(outlined_card_2)의 컴포넌트를 지우고 새로 할당하는 식으로 동작하게 된다. 이러면 아래와 같이 탭과 유사한 방식으로 작동하는걸 확인할 수 있다.

탭이 생긴 어플리케이션

본 포스팅에서 다룬 방식을 잘 이용하면 복잡한 상호 링크구조 없이도 고도화된 어플리케이션을 한 페이지 내에 잘 녹여내기가 더 수월할 것 같다.