[Flutter] 하단 Sticky UI 패턴을 적용하기 위한 스크린 템플릿

 오늘은 플러터에 하단 sticky UI 패턴을 접목시킨 스크린 템플릿을 소개하려고 합니다. 최근 기업의 채용 공고 페이지 및 쇼핑 플랫폼에서 주요 기능에 대한 접근성을 높이기 위하여 이러한 UI 패턴을 활용하는 추세입니다.

 

1. Sticky UI란?

 sticky UI는 화면에 배치된 UI 요소가 스크롤에 영향을 받지 않고 사용자 시야에 고정되어 있는 디자인 패턴을 말합니다. 이를 통하여 사용자는 어떠한 상황에서도 주요 기능에 쉽게 접근할 수 있는 장점이 있습니다.

채용 공고 사이트의 '지원하기' 버튼	쇼핑몰의 '찜하기', '장바구니 미리담기', '재입고 알림신청' 버튼

 이러한 sticky UI는 작은 화면 크기로 인하여 잦은 스크롤이 발생하는 모바일 환경에 주로 사용됩니다. 채용 공고 사이트에서의 '지원하기' 버튼 그리고 쇼핑몰에서의 '찜하기', '재입고 알림신청' 버튼을 하단에 sticky하게 배치하는 것으로 사용자가 정보를 확인하는 동시 언제든 주요 기능으로 진입할 수 있습니다.

 

 이러한 sticky UI는 작은 화면이라는 제한을 가진 모바일 환경에서 많은 인기를 얻고 있으며 우리가 사용하는 애플리케이션에서 흔하게 찾아볼 수 있습니다. 오늘은 플러터에서 bottomNavigation이 아닌 sticky한 버튼 혹은 영역을 유동적으로 만들 수 있도록 템플릿 형태의 코드를 소개하고자 합니다.

 

 

2. 하단 sticky UI 패턴 템플릿(Flutter)

import 'package:flutter/material.dart';

class Template extends StatefulWidget {
  const Template({super.key});

  @override
  _TemplateState createState() => _TemplateState();
}
class _TemplateState extends State<Template> {
  @override
  void initState() {
    super.initState();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: customAppBar(...),
        body: Container(
          child: SafeArea(
            child: Column(
              children: [
                const Expanded(
                    child: SingleChildScrollView(
                  child: Column(children: []),
                )),
                Container(
                    color: Colors.white,
                    child: Container()),
              ],
            ),
          ),
        ));
  }
}

 

위 템플릿에서 사용한 위젯들에 대하여 간단한 리뷰를 작성하면 아래와 같습니다.

 

1. SafeArea 위젯

 해당 위젯은 화면의 안전 영역을 고려하여 자식 위젯을 렌더링하는 역할을 수행합니다. 안전 영역은 모바일 기기에서의 상단 바, 하단 바와 같은 시스템 UI가 표시되지 않는 영역을 의미합니다.

 

2. Expanded 위젯

 해당 위젯은 자식 위젯이 남은 공간을 모두 차지하도록 하는 역할을 수행합니다. SingleChildScrollView를 자식 위젯으로 가짐으로 Sticky 영역을 제외한 나머지를 모두 Scrollable한 공간으로 만들기 위하여 사용하였습니다. Expanded는 "flex: 1"을 부여한 것과 동일한 역할을 수행합니다.

 

3. Container 위젯

 해당 위젯이 Sticky한 영역을 의미합니다. 위에서의 예시처럼 주요 기능의 트리거가 되는 버튼 등을 위치시키면 좋은 사용자 경험을 이끌어낼 수 있습니다.

 

 

3. 템플릿 적용 예시

템플릿 적용 예시

 

 위 템플릿을 통하여 하단 sticky UI 패턴을 적용시킨 스크린의 모습입니다. 이해하기 쉽도록 위젯 트리의 계층별로 구분하여 나타내었습니다. Column을 통하여 Expanded(스크롤 가능 영역), Container(sticky한 영역)을 묶는 것이 템플릿의 핵심입니다.

 

 

4. 마치며...

 모바일 UX UI는 사용자의 선호도 그리고 기술에 발전에 따라 멈추지 않고 조금씩 변화하고 있으며 최근에 자리 잡은 디자인 트렌드는 하단 sticky UI 패턴입니다. 해당 템플릿을 적절하게 커스터마이징하여 사용하면 높은 사용자 경험을 제공할 수 있을 것이라 생각합니다.

 플러터를 사용하면서 Screen을 구성할때, Scaffold 템플릿에 고민이 많던 개발자분들에게 조그만한 아이디어가 되길 바라며 글을 마칩니다