[flutter] 플러터 shimmer를 활용한 앱 디자인 팁

11 Dec 2023

flutter

앱 개발 시 사용자 경험을 향상시키기 위해 주로 로딩 상태에서 사용되는 플러터 shimmer 패키지는 앱 화면을 더 미래지게 만들 수 있는 중요한 요소 중 하나입니다. 이번 블로그에서는 플러터 shimmer를 활용하여 앱 디자인을 개선하는 몇 가지 유용한 팁을 소개하겠습니다.

1. 로딩 상태에서 Shimmer 효과 사용

로딩 상태에서 데이터가 로드되는 동안 사용자의 지루함을 줄이고, 기다림을 보다 흥미롭게 만들기 위해 shimmer 효과를 적용하세요. 예를 들어, 리스트나 그리드와 같은 데이터가 표시되는 위치에 shimmer 효과를 적용하면 사용자는 앱이 반응하고 있다는 느낌을 받을 수 있습니다.

import 'package:shimmer/shimmer.dart';
import 'package:flutter/material.dart';

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Shimmer.fromColors(
      baseColor: Colors.grey[300],
      highlightColor: Colors.grey[100],
      child: ListTile(
        leading: CircleAvatar(
          backgroundColor: Colors.grey[300],
          radius: 24,
        ),
        title: Text('Shimmer'),
        subtitle: Text('Loading...'),
      ),
    );
  }
}

2. 글로우 효과 추가

데이터 아이템이나 UI 요소에 shimmer 효과를 적용하면서 추가적으로 글로우(Glow) 효과를 더해 화면에 빛 효과를 줄 수 있습니다. 이렇게 하면 사용자는 로딩 중임을 더욱 명확하게 알 수 있을 뿐만 아니라, 빠르게 완료되었음을 느낄 수 있어서 사용자 경험이 향상됩니다.

Shimmer.fromColors(
  baseColor: Colors.grey[300],
  highlightColor: Colors.grey[100],
  child: Container(
    width: 300.0,
    height: 100.0,
    decoration: BoxDecoration(
      color: Colors.grey[300],
      borderRadius: BorderRadius.all(Radius.circular(20)),
      boxShadow: [BoxShadow(color: Colors.white, blurRadius: 50, spreadRadius: 10)],
    ),
  ),
)

3. Shimmer 예외 처리

데이터가 로딩되는데 오랜 시간이 걸리거나, 예기치 않은 오류로 인해 데이터가 표시되지 않을 때를 대비하여 shimmer 효과를 보여주는 것이 좋습니다. 이는 사용자가 앱이 반응하고 있다는 느낌을 유지하면서, 데이터가 로드되기를 기다리는 동안 사용자 경험을 최적화할 수 있도록 도와줍니다.

결론

플러터 shimmer 패키지를 활용하여 앱 디자인을 더 생동감 있게 만들 수 있습니다. 이를 통해 사용자는 더 나은 로딩 경험을 얻을 뿐만 아니라, 앱이 반응하고 있다는 느낌을 계속 유지할 수 있습니다. 따라서 적절하게 shimmer 효과를 활용하여 뛰어난 사용자 경험을 제공할 수 있는 앱을 개발하는 데 도움이 될 것입니다.