플러터, 재사용 가능한 위젯 만들기

Flutter를 배우고 앱을 만들다 보면 어느 순간 느끼게 돼요. "비슷한 코드를 계속 복붙하고 있는데, 이거 효율적인 방법 없을까?"라고요. 처음에는 하나하나 새로운 위젯을 만들면서 앱을 완성하는 재미가 있지만, 프로젝트가 커질수록 유지보수가 어려워지고 코드가 중복되기 시작해요. 이때 필요한 개념이 바로 재사용 가능한 위젯 만들기예요.

 

Flutter는 '모든 것이 위젯'인 프레임워크답게, 작은 부분부터 큰 화면 전체까지 위젯으로 나눠서 관리할 수 있어요. 그리고 잘 설계된 재사용 가능한 위젯은 코드의 생산성과 가독성을 크게 높여줄 뿐 아니라, 유지보수까지 훨씬 쉬워지게 만들어줘요. 이 글에서는 Flutter에서 재사용 가능한 위젯을 만들 때 꼭 알아야 할 기본 원칙과 실제로 어떻게 적용할 수 있는지 구체적으로 정리해보려고 해요.

 

재사용 가능한 위젯을 왜 만들어야 할까?

처음 Flutter를 시작할 때는 화면 하나를 빨리 만들어내는 것이 중요해요. 하지만 프로젝트가 커질수록 복잡도가 급격히 올라가요. 버튼 하나, 카드 하나, 입력창 하나 같은 것들이 여기저기 반복될 때마다, 비슷한 코드를 여러 번 작성하거나 수정해야 한다면 실수도 많아지고 개발 속도도 떨어지게 돼요.

 

이런 문제를 해결하는 가장 좋은 방법이 바로 재사용 가능한 위젯을 만들어서 사용하는 것이에요. 재사용 가능한 위젯을 만들면 다음과 같은 이점이 있어요:

• 코드 중복 최소화: 같은 기능이나 디자인을 가진 코드를 여러 번 복사하지 않아도 돼요.
• 유지보수 용이: 변경이 필요할 때, 위젯 하나만 수정하면 연결된 모든 화면에 적용돼요.
• 가독성 향상: 화면 구성 코드를 더 깔끔하고 명확하게 정리할 수 있어요.
• 테스트 용이성: 독립적인 위젯은 단위 테스트를 하기에도 좋아요.

또한 팀 프로젝트를 할 때는 각자 만든 위젯을 공유해서 개발 속도를 높일 수 있고, 일관성 있는 UI를 유지하는 데에도 큰 도움이 돼요. 결국 재사용 가능한 위젯을 만드는 습관은 개인 프로젝트든 팀 프로젝트든 Flutter 개발자에게 필수적인 능력이라고 할 수 있어요.

 

재사용 가능한 위젯을 만들 때 고려해야 할 설계 포인트

재사용 가능한 위젯을 만든다고 해서 단순히 코드를 덜 쓰는 것만이 목표는 아니에요. 진짜 중요한 것은 유연하고, 직관적이며, 관리하기 쉬운 위젯을 만드는 것이에요. 이를 위해 몇 가지 꼭 기억해야 할 설계 포인트가 있어요.

 

첫 번째는 명확한 책임 분리예요.
하나의 위젯은 한 가지 역할만 해야 해요. 화면에 텍스트를 보여주는 위젯이라면 텍스트 표시만 책임지고, 복잡한 데이터 가공이나 비즈니스 로직은 다른 곳에서 처리해야 해요. 이렇게 하면 위젯이 단순해지고, 다른 상황에서도 손쉽게 재사용할 수 있어요.

 

두 번째는 매개변수(parameter)를 통한 유연성 확보예요.
하드코딩된 텍스트, 색상, 크기 등을 위젯 안에 고정해버리면 그 위젯은 특정 상황에서만 쓸 수 있게 돼요. 반대로, 필요한 값들을 매개변수로 받을 수 있도록 설계하면 다양한 화면과 상황에서 쉽게 활용할 수 있어요. 예를 들어 버튼 위젯을 만든다면 버튼의 텍스트, 색상, 클릭 이벤트 함수를 모두 외부에서 넘겨줄 수 있게 만드는 거예요.

 

세 번째는 기본값(default value)을 잘 설정하는 것이에요.
모든 매개변수를 무조건 필수로 만들면 사용하기가 번거로워질 수 있어요. 기본 스타일이나 동작을 설정해 두고, 특별한 경우에만 외부에서 값을 덮어쓸 수 있도록 하면 위젯을 훨씬 편하게 사용할 수 있어요. Flutter에서는 required 키워드와 기본값을 조합해서 이런 설계를 자연스럽게 할 수 있어요.

 

네 번째는 스타일과 레이아웃을 일관성 있게 관리하는 것이에요.
특히 팀 개발을 하거나 앱 전체 UI를 통일성 있게 유지하고 싶다면, 위젯 내부에 테마(theme)나 공통 스타일을 적용하는 방법을 고려하는 게 좋아요. 그렇게 하면 한 번에 디자인을 변경하거나 일괄적으로 스타일을 조정할 수 있어서 유지보수가 훨씬 수월해져요.

이런 설계 포인트들을 염두에 두고 위젯을 만든다면, 단순히 재사용 가능한 것을 넘어, ‘언제 어디서든 쉽게 꺼내 쓸 수 있는’ 진짜 효율적인 컴포넌트를 만들 수 있어요.

 

실제 예제, 재사용 가능한 커스텀 버튼 만들기

이제 재사용 가능한 위젯을 어떻게 설계해야 할지 감을 잡았다면, 간단한 예제를 통해 실제로 만들어볼게요. 가장 기본적이면서도 다양한 앱에서 활용할 수 있는 커스텀 버튼(Custom Button)을 하나 만들어 보겠습니다.

 

import 'package:flutter/material.dart';

class CustomButton extends StatelessWidget {
  final String text;
  final VoidCallback onPressed;
  final Color backgroundColor;
  final Color textColor;
  final double borderRadius;

  const CustomButton({
    Key? key,
    required this.text,
    required this.onPressed,
    this.backgroundColor = Colors.blue,
    this.textColor = Colors.white,
    this.borderRadius = 8.0,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: onPressed,
      style: ElevatedButton.styleFrom(
        backgroundColor: backgroundColor,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(borderRadius),
        ),
      ),
      child: Text(
        text,
        style: TextStyle(color: textColor),
      ),
    );
  }
}

 

이 CustomButton 위젯은 다음과 같은 특징을 가지고 있어요.

• 텍스트, 색상, 클릭 이벤트를 모두 외부에서 자유롭게 설정할 수 있어요.
• 기본 색상과 기본 둥근 모서리 값이 있어서, 특별한 설정 없이도 바로 사용할 수 있어요.
• 깔끔한 분리 덕분에 다른 화면에서도 일관되게 버튼을 사용할 수 있어요.

필요하다면 이 버튼을 기반으로 다양한 스타일(예: 아이콘 추가, 크기 조절, 비활성화 상태 등)을 점진적으로 확장할 수 있어요. 이런 식으로 작은 재사용 위젯들을 쌓아가다 보면, 점점 더 빠르고 깔끔하게 앱을 만들 수 있게 돼요.

 

마치며...

Flutter 개발에서 재사용 가능한 위젯을 만드는 습관은 단순한 편의성을 넘어, 개발 생산성과 코드 품질을 획기적으로 높이는 핵심 방법이에요. 처음에는 시간이 조금 더 걸릴 수도 있지만, 한 번 만들어두면 수십 번, 수백 번 재사용하면서 그 가치를 실감하게 될 거예요.

 

위젯을 잘게 나누고, 명확한 책임을 부여하고, 유연하게 설계하는 것. 이 세 가지만 기억한다면 어떤 프로젝트에서도 깔끔하고 유지보수하기 쉬운 코드를 만들 수 있어요. Flutter의 매력을 제대로 느끼고 싶은 개발자라면, 바로 지금부터라도 작은 위젯 하나씩 직접 만들어보세요. 분명히 코드가 훨씬 단단해지는 걸 느끼게 될 거예요!