Flutter PhysicalModel 위젯으로 입체감 있는 UI 구현하기: 그림자와 모서리 처리 완벽 가이드

728x90

Flutter에서 디자인에 입체감과 그림자를 더해 UI를 더욱 돋보이게 만들고 싶을 때, PhysicalModel 위젯을 사용하면 매우 유용합니다. PhysicalModel은 그림자, 입체감, 모서리 처리 등을 적용해 Flutter UI 요소에 깊이감을 부여하는 강력한 도구입니다. 이번 글에서는 PhysicalModel 위젯이 무엇인지, 어떤 속성들을 갖고 있는지, 그리고 구체적인 사용법과 활용 예제를 소개합니다.

1. PhysicalModel이란?

PhysicalModel은 Flutter에서 레이아웃 위젯 중 하나로, 특정 위젯에 그림자, 모서리 둥글기, 엘리베이션 효과를 추가하여 입체감을 부여할 수 있도록 도와줍니다. 특히 단순한 그림자가 아니라, 실질적인 물리 모델을 생성하여 입체적이고 생동감 있는 UI를 구현할 수 있습니다.

PhysicalModel은 모든 자식 위젯에 대해 효과를 적용할 수 있기 때문에 카드, 버튼, 이미지 등 다양한 요소에 입체감을 주고 싶을 때 활용할 수 있습니다.

2. PhysicalModel 기본 사용법

PhysicalModel 위젯은 다음과 같은 주요 속성을 가지고 있습니다:

color: PhysicalModel이 표시될 기본 색상입니다.
elevation: 그림자 높이를 설정하는 속성으로, 값이 높을수록 그림자가 진하게 보입니다.
shape: 모양을 지정하는 속성으로, BoxShape.rectangle 또는 BoxShape.circle을 설정할 수 있습니다.
borderRadius: 사각형 모양일 때 모서리를 둥글게 설정할 수 있습니다.
shadowColor: 그림자 색상을 설정하는 속성으로, 원하는 색상으로 그림자를 표현할 수 있습니다.

간단한 사용 예제는 다음과 같습니다.

PhysicalModel(
  color: Colors.white,
  elevation: 5.0,
  shadowColor: Colors.black,
  shape: BoxShape.rectangle,
  borderRadius: BorderRadius.circular(8),
  child: Container(
    width: 100,
    height: 100,
    child: Center(child: Text('PhysicalModel')),
  ),
)

위 예제에서 PhysicalModel은 사각형 모양을 가지며, elevation 값에 따라 그림자가 적용됩니다. borderRadius 속성으로 모서리를 둥글게 처리해 UI가 더 부드럽고 입체감 있게 보입니다.

3. PhysicalModel 주요 속성 설명

(1) color

PhysicalModel 위젯의 배경색을 설정합니다. 자식 위젯의 색상이 아닌, PhysicalModel 자체의 색상을 지정하는 속성입니다. 자식 위젯의 디자인에 영향을 주지 않도록 색상을 적절히 선택하는 것이 좋습니다.

PhysicalModel(
  color: Colors.blue, // 배경색
  elevation: 6.0,
  shape: BoxShape.rectangle,
  child: Icon(Icons.star, color: Colors.white, size: 40),
)

(2) elevation

elevation은 그림자 높이를 설정하며, 값이 높을수록 더 짙은 그림자가 적용됩니다. elevation 값을 조절하여 원하는 깊이감을 표현할 수 있습니다.

PhysicalModel(
  color: Colors.green,
  elevation: 10.0, // 더 높은 그림자
  shape: BoxShape.circle,
  child: Icon(Icons.favorite, color: Colors.white, size: 40),
)

(3) shape

PhysicalModel의 모양을 설정합니다. BoxShape.rectangle 또는 BoxShape.circle 중 하나를 선택할 수 있으며, 사각형과 원형 모양으로 설정할 수 있습니다.

PhysicalModel(
  color: Colors.red,
  shape: BoxShape.circle,
  elevation: 4.0,
  child: Icon(Icons.accessibility_new, color: Colors.white, size: 40),
)

(4) borderRadius

사각형 모양(BoxShape.rectangle)일 때 모서리를 둥글게 만들어주는 속성입니다. borderRadius를 활용해 각진 사각형에서 모서리가 둥근 형태로 변경할 수 있습니다.

PhysicalModel(
  color: Colors.yellow,
  shape: BoxShape.rectangle,
  borderRadius: BorderRadius.circular(15.0),
  elevation: 4.0,
  child: Padding(
    padding: const EdgeInsets.all(8.0),
    child: Text('Rounded Corners'),
  ),
)

(5) shadowColor

그림자의 색상을 지정하는 속성으로, 기본값은 검은색이지만 원하는 색상으로 변경하여 색다른 느낌을 줄 수 있습니다.

PhysicalModel(
  color: Colors.white,
  elevation: 6.0,
  shadowColor: Colors.blue, // 파란색 그림자
  shape: BoxShape.rectangle,
  child: Container(
    width: 80,
    height: 80,
    child: Center(child: Text('Shadow Color')),
  ),
)

4. PhysicalModel 활용 예제

(1) 입체감 있는 카드 UI 구현

카드 형태의 UI 요소에 PhysicalModel을 적용하여, 더 생동감 있는 디자인을 만들 수 있습니다.

class CardExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return PhysicalModel(
      color: Colors.white,
      elevation: 8.0,
      shadowColor: Colors.grey,
      shape: BoxShape.rectangle,
      borderRadius: BorderRadius.circular(12),
      child: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text(
              'PhysicalModel Card',
              style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
            ),
            SizedBox(height: 10),
            Text('그림자와 입체감이 있는 카드를 쉽게 구현할 수 있습니다.'),
          ],
        ),
      ),
    );
  }
}

위 예제에서는 PhysicalModel을 카드에 적용하여, 그림자가 있는 깔끔한 디자인을 만들었습니다. elevation과 shadowColor를 조절하여 그림자의 깊이와 색상을 조정할 수 있습니다.

(2) 입체감 있는 아이콘 버튼

아이콘 버튼에 입체감을 주어 더 강조되게 할 수 있습니다.

PhysicalModel(
  color: Colors.orange,
  shape: BoxShape.circle,
  elevation: 6.0,
  shadowColor: Colors.orangeAccent,
  child: IconButton(
    icon: Icon(Icons.play_arrow, color: Colors.white),
    onPressed: () {
      print("Icon Button Pressed");
    },
  ),
)

이 예제에서는 원형 아이콘 버튼에 그림자를 적용하여, 단순히 평평하게 놓여있는 것보다 더 눈에 띄는 버튼 디자인을 만들어 냅니다.

5. PhysicalModel 사용 시 주의 사항

PhysicalModel을 너무 많이 사용할 경우, 애니메이션과 같이 고성능이 필요한 부분에서 성능 저하가 발생할 수 있으므로 신중히 사용해야 합니다.
elevation 값이 높을수록 그림자가 진하게 표시되므로, elevation 값을 적절히 조절하여 화면의 다른 요소들과 조화를 이루게 해야 합니다.

결론

PhysicalModel 위젯을 활용하면 Flutter 애플리케이션의 UI에 입체감과 그림자를 더해 자연스럽고 세련된 디자인을 구현할 수 있습니다. 카드, 버튼, 아이콘 등 다양한 UI 요소에 적용해 더 생동감 있는 디자인을 연출할 수 있으며, elevation과 shadowColor 같은 속성을 활용해 그림자의 깊이와 색상을 자유롭게 조절할 수 있습니다. Flutter의 PhysicalModel로 시각적 완성도를 높이고, 사용자 경험을 강화해 보세요.