GitHub 오픈소스 탐험

Flutter는 모바일 애플리케이션 개발에서 점점 더 많은 사랑을 받고 있습니다. 그에 따라, 애플리케이션의 UI 디자인은 점점 더 중요해지고 있습니다. 특히, 애플의 iOS 26에서 영감을 받은 Liquid Glass 디자인 언어는 많은 개발자와 디자이너의 관심을 끌고 있습니다. 오늘 소개할 프로젝트는 바로 이 Liquid Glass 디자인 언어를 Flutter 애플리케이션에 구현할 수 있도록 돕는 Liquid Glass Widgets입니다. 이 라이브러리는 실제 셰이더 기반의 블러 효과, 물리 기반의 젤리 애니메이션, 그리고 동적인 조명 효과를 제공합니다. 모든 플랫폼에서 바로 사용할 수 있다는 점에서 더욱 매력적입니다.

Liquid Glass Widgets란?

Liquid Glass Widgets는 Flutter UI 키트로, 애플의 iOS 26 Liquid Glass 디자인 언어를 구현한 포괄적인 유리 위젯 라이브러리입니다. 이 라이브러리는 다음과 같은 주요 기능을 제공합니다:

포괄적인 유리 위젯 라이브러리: 컨테이너, 인터랙티브 컨트롤, 입력 필드, 피드백, 오버레이, 내비게이션 서피스 등 다양한 위젯을 제공합니다.
Liquid Morph Engine: iOS 26 스타일의 액체 변형을 구현하는 독립적인 물리 시스템입니다. GlassMenu가 첫 번째 소비자로, 향후 위젯들도 일관된 액체 전환을 위해 이 엔진을 사용할 예정입니다.
진짜 서리 유리 효과: 네이티브 2단계 가우시안 블러와 셰이더 굴절 효과를 통해 진정한 유리 느낌을 제공합니다.
모든 플랫폼에서 작동: iOS, Android, macOS, 웹, Windows, Linux 등에서 자동으로 렌더링 경로가 선택됩니다.
적응형 품질: 디바이스의 성능에 따라 실시간으로 품질을 조정합니다.
최소한의 의존성: Flutter SDK 외에는 equatable, flutter_shaders, logging만 필요합니다.
간단한 설정: LiquidGlassWidgets.wrap(child: myApp) 한 줄로 설정이 가능합니다.
콘텐츠 인식 밝기: 스크롤하는 콘텐츠에 따라 자동으로 밝기를 조정하는 기능을 제공합니다.
조이스틱 조명: GlassMotionScope를 사용하여 조명 효과를 편리하게 구현할 수 있습니다.

설치 및 빠른 시작 가이드

1. 패키지 설치

pubspec.yaml

liquid_glass_widgets

dependencies:
  flutter:
    sdk: flutter
  liquid_glass_widgets: ^latest_version

2. 기본 사용법

패키지를 설치한 후, 아래와 같이 간단한 Flutter 애플리케이션을 작성할 수 있습니다.

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

void main() {
  runApp(LiquidGlassWidgets.wrap(child: MyApp()));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: GlassScaffold(
        body: Center(
          child: GlassContainer(
            child: Text('Hello, Liquid Glass!'),
          ),
        ),
      ),
    );
  }
}

위 코드는 Liquid Glass 효과가 적용된 간단한 애플리케이션을 보여줍니다. GlassScaffold와 GlassContainer를 사용하여 쉽게 유리 효과를 구현할 수 있습니다.

3. 실제 활용 시나리오

Liquid Glass Widgets는 특히 럭셔리한 사용자 경험을 제공하고자 하는 애플리케이션에 적합합니다. 예를 들어, 여행 관련 애플리케이션인 Wanderlust는 이 라이브러리를 사용하여 고급스러운 사용자 인터페이스를 구현하였습니다. 이 앱은 풀 스크린 이미지, 패럴랙스 스크롤, 히로 전환 및 실시간 채팅 인터페이스를 제공합니다. 이러한 요소들은 모두 Liquid Glass Widgets를 통해 구현되었습니다.

cd example/showcase && flutter pub get && flutter run

위 명령어를 통해 Wanderlust 예제를 실행할 수 있습니다.

유사한 도구와의 비교

Liquid Glass Widgets 외에도 Flutter에서 다양한 UI 키트를 사용할 수 있습니다. 예를 들어, Glassmorphism 라이브러리도 비슷한 디자인 원칙을 따릅니다. 하지만 Liquid Glass Widgets는 더 많은 인터랙티브 기능과 물리적 애니메이션을 제공하며, 모든 플랫폼에서 잘 작동하는 점에서 우위에 있습니다.

현대적인 UI를 구현하는 Liquid Glass Widgets 소개