🔬 BoxFit ?

이번 글에서는 이미지의 사이즈를 맞춰주는 기능인 BoxFit에 대해서 살펴보도록 하겠다.

Flutter를 사용한 경험 외에도 다른 언어나 프레임워크에서도 이미지를 다룬 경험이 있다면 이미 알고 있을 내용일 것이다. 대부분의 프론트엔드 프레임워크에서는 비슷한 사용 방법을 제공하고 있어서 Flutter라고 크게 다른 부분은 없었던 것 같다.

정리하는 차원에서 작성하는 내용이니 가볍게 보시길 바란다.

Flutter에서 이미지를 다룰 때 사용하는 이미지는 Asset, Network, File, Memory 이렇게 4가지 이미지를 사용할 수 있다.

하지만 4가지의 이미지를 다룰 때 공통적으로 알고 있어야 하는 부분이 바로 이미지의 사이즈를 지정해야 한다는 것이다.

물론 불러온 이미지를 그대로 보여주고 싶다면 사이즈를 지정하지 않아도 되지만, 사용하는 이미지의 사이즈를 지정해야 하는 경우라면 생각해야 하는 부분이 많다.

이미지의 비율도 고려해야하고, 원본의 해상도도 고려해야 원하는 이미지를 보여줄 수 있게 된다.

가장 좋은 방법은 당연히 규격화된 이미지의 사이즈를 지정하여 사용하면 되겠지만, 서비스에서 직접 제공하는 이미지가 아닌 이상 모든 이미지를 원하는 만큼 보여주기가 쉽지 않다.

이게 무슨말인가 이해가 되지 않을 수도 있기에 테스트를 해보도록 하자.

오리지널 이미지는 직사각형의 가로 사이즈가 더 큰 이미지이다. 해당 이미지를 정사각형의 위젯안에 보여주고 싶다면 어떻게 될까 ?

정사각형에 맞춘다고 해도 이미지는 기본적으로 비율로 리사이징되기 때문에 저렇게 위아래로 공백이 생기게 된다.

위와 같은 문제를 해결하기 위해서는 Image 위젯의 fit을 사용해서 해결할 수 있다.

fit은 BoxFit을 사용해주면 되는데, BoxFit은 이미지 외에도 자식 위젯을 부모 위젯에 맞추고 싶을 때에 사용할 수도 있다.

BoxFit에는 다양한 방법으로 리사이즈 할 수 있는 옵션을 제공하고 있는데, 천천히 하나씩 살펴보도록 하자.

contain
cover
fill
fitHeight
fitWidth
none
scaleDown

각각 원본 이미지와 비교해서 살펴볼 예정이고, 특성상 여러 개의 사이즈로 부모 위젯의 사이즈를 변경시켜 테스트 하였다.

테스트에 사용한 디바이스는 iPhone 15 Pro Max 모델을 사용하였고, 이미지는 3024x4032 사이즈의 이미지를 사용하였다.

contain

BoxFit.Contain에 대해서 먼저 살펴보도록 하자.

이미지의 원래 비율은 유지하면서 부모 위젯의 최대 공간을 차지하도록 하는 방법이다.
원본의 비율이 유지되기 때문에, 이미지 자체는 늘어나거나 이미지 일부가 잘려나가지 않게된다. 하지만 부모 위젯의 width나 height 모두가 일치하지는 않을 수 있다.

original 비율을 유지하면서 부모 위젯의 width, height 중의 최대 공간을 차지한다는 것을 확인할 수 있다.

original	400 x 400	400 x 250	300 * 600

cover

다음으로 대표적으로 이미지를 처리할 때에 사용하는 리사이즈 방법인 BoxFit.cover에 대해서 살펴보자.

BoxFit.cover는 이미지를 원본의 사이즈를 유지하면서 부모 위젯의 사이즈 만큼을 제외하고는 크롭하는 방법이다. 크롭은 이미지를 잘라내는 방법이라고 생각하면 된다.

대표적인 리사이즈 방법인 이유가 바로 원본 사이즈가 유지 되면서 크롭되기 때문에, 부모 위젯의 width, height가 모두 완벽하게 피팅되기 때문이다.
단점은 당연히 이미지의 일부가 잘려나갈 수 있기 때문에, 보여주고자 하는 이미지 영역이 모두 보여지지 않을 가능성이 있다는 것이 단점이다.

original	400 x 400	400 x 250	300 * 600

BoxFit.cover는 이미지의 사이즈가 부모 위젯보다 작은 경우라면 어떻게 될까 ?

원본 이미지를 3024x4032 -> 100x133으로 해상도를 낮추고 테스트를 해보도록 하자.

결과는 동일하게 보여진다. 부모 위젯의 사이즈 만큼 확장한 뒤에 크롭되기 때문에 보여지는 영역은 이미지 사이즈의 크기에 따라 다르게 보여지지 않는다.

original	400 x 400	400 x 250	300 * 600

fill

이번에는 위에 사용하는 방법들처럼 원본의 비율을 유지시키지 않고 리사이징되는 BoxFit.fill에 대해서 알아보자.

Boxfit.fill은 원본 이미지의 비율을 무시하고 부모 위젯의 사이즈만큼 강제로 이미지를 늘리게 된다. 개발하면서 한 번도 사용하지 않던 방법이기도 하다.

이미지의 원본이 이상하게 늘어나기 때문에 거의 대부분 사용하지 않을 것이라 생각들지만 BoxFit이 이미지에만 사용되는 것은 아니고, 자식 위젯을 피팅할 때에도 사용되기 때문에 알아두도록 하자.

이미지 사용시에는 원본 비율을 유지하지 않는다는 점을 반드시 알고있어야 한다.

original	400 x 400	400 x 250	300 * 600

fitHeigth

이어서 BoxFit.contain에서는 width, height 중 최대 확장 영역을 기준으로 리사이즈하는 방법과는 다르게 특정 너비나 높이가 기준이 되도록 하는 방법인 fitHeight, fitWidth에 대해서 알아보자.

먼저, BoxFit.fitHeight는 contain과 동일하게 원본 비율이 유지하되 부모 위젯의 최대 확장 영역을 높이에 피팅되도록 하는 방법이다.

original	400 x 400	400 x 250	300 * 600

fitWidth

이어서 부모 위젯의 확장 영역을 너비로 고정시키는 BoxFit.fitWidth에 대해서 살펴보자.

original	400 x 400	400 x 250	300 * 600

none

이번에는 BoxFit.none에 대해서 알아보도록 하자. BoxFit.none은 none이라는 의미 때문에, 원본을 그대로 보여주는 듯하지만 완전히 다른 개념이다.

original 이미지의 사이즈는 3024x4032으로 디바이스 사이즈보다 훨씬 큰 사이즈의 이미지이다.
Image 위젯을 사용할 때에 사이즈를 지정하지 않고, fit도 지정하지 않는다면 original 이미지는 contain이 기준이 되어 피팅이 된다. 즉 너비를 기준으로 피팅된 상태이다.

BoxFit.none은 이미지 사이즈 그대로를 보여준 상태에서 부모 위젯을 크롭하는 방법이다.
이미지가 너무 큰 경우 이미지의 극히 일부분만이 노출되기도 하고, 반대로 너무 작은경우 부모 위젯 만큼 확장을 하지 못하여 빈 영역이 노출될 수도 있다.

original	400 x 400	400 x 250	300 * 600

scaleDown

마지막으로 가장 이해하기 어려운 방법인 BoxFit.scaleDown에 대해서 알아보도록 하겠다.

이 방법이 왜 이해하기 어렵다고 하는지는 사용해보면 알 수 있는데, 노출되는 이미지가 BoxFit.contain과 동일하게 보여진다는 것이다.

결과 값을 비교해보자. 먼저 BoxFit.contain이다.

BoxFit.contain

original	400 x 400	400 x 250	300 * 600

BoxFit.scaleDown

결과 값이 동일한 것을 알 수 있다.

original	400 x 400	400 x 250	300 * 600

contain과 scaleDown의 차이점은 뭘까 ? 바로 contain과 대부분 유사하지만, 이미지의 사이즈가 부모 위젯의 사이즈보다 큰 경우에만 이미지 사이즈가 줄어들게 되고, 이미지의 사이즈가 부모 위젯보다 작은 경우에는 이미지 크기가 확장되지 않는다는 차이점이 있다.
즉 이미지의 사이즈가 큰 경우에는 contain과 차이점이 없지만 이미지 사이즈가 부모 위젯보다 작은 경우에는 BoxFit.scaleDown에서는 이미지가 커지지 않는다는 차이점이 있다.

이미지 크기를 100x133으로 조정해 주고 contain과 scaleDown의 결과를 비교해보자.

BoxFit.contain

original	400 x 400	400 x 250	300 * 600

BoxFit.scaleDown

original	400 x 400	400 x 250	300 * 600

마무리

BoxFit에 대해서 이미지를 사용해 살펴봤는데, BoxFit은 이미지를 사용할 때에만 사용할 수 있는 것은 아니고 FittedBox 위젯을 사용해서도 자식 위젯을 피팅할 수 있으니 어떤 방식으로 부모 위젯에 맞춰지는지를 알고 있으면 된다.

다음번에는 FittedBox를 사용한 BoxFit에 대해서도 살펴보도록 하겠다.

감사합니다.