본문 바로가기

유저 인터페이스/프래그먼트(Fragment)

프래그먼트(Fragment) 정복! - (1) 프래그먼트, 너는 누구냐?

프래그먼트(Fragment)의 등장 배경

안드로이드 3.0(허니컴)이 공개되면서 태블릿에 적합한 여러 UI들이 공개되었는데, 그 중에서 대표적인 것이 바로 프래그먼트(Fragment) 입니다.

그럼, 과연 왜 프래그먼트라는 것이 추가되었을까요? 간단히 말하자면, 프래그먼트는 태블릿과 같은 큰 화면을 가지는 단말에서 애플리케이션이 화면을 더 효율적으로 활용할 수 있도록 도와줍니다. 기존에는 애플리케이션 화면을 구성하는 큰 틀이 액티비티(Activity) 하나였고, 이 안을 여러 뷰로 구성하여 정보를 표시하고, 상호작용을 수행했습니다.

그런데, 뷰만을 사용해서 다양한 내용을 보여주기는 매우 어려웠습니다. 특히나 전체적인 UI 틀은 고정되어 있으면서 특정 부분만 변화하며 다른 내용을 표시하도록 하려면 매우 복잡한 구성이 필요했죠. 또한, 서로 다른 역할을 하는 코드들이 같은 곳에 있게 되어서 가독성도 떨어지고 유지보수에도 악영향을 미쳤습니다.

이 때문에 대부분 애플리케이션에서는 뷰 처리의 어려움도 피하고, 코드도 분리하게 위해 액티비티 전환을 사용했습니다. 아래의 GMail 앱을 통해 전형적인 액티비티 구성 방식을 볼 수 있습니다.


G메일 앱의 액티비티 구성



이 방식은 상당히 깔끔했습니다. 애플리케이션의 흐름 구성도 자연스럽게 잡히게 되었구요. 하지만, 화면이 큰 태블릿 단말들이 소개되면서 이 방식의 구성이 화면을 쓸데없이 많이 차지한다는 것을 느끼게 되었습니다. 호환성 문제는 없었지만, 큰 화면을 효율적으로 활용하지 못하는 것이죠.

트위터 공식앱을 실행한 모습. 태블릿에 최적화되지 않아 공간을 낭비하고 있습니다.



즉, 이제는 화면을 어떻게 하면 효율적으로 사용할 수 있는가? 를 고민할 차례가 되었습니다. 그럼, 화면을 효율적으로 활용한다는 것은 과연 어떤 것을 의미하는 것일까요? 여러 가지 방법이 있겠지만, 가장 대표적인 것은 한 화면에 가급적 다양한 정보를 표시하는 것입니다. 다음 안드로이드 3.0 버전의 GMail 앱을 보도록 하죠.


안드로이드 3.0의 G메일. 넓은 화면을 효율적으로 사용하고 있습니다.


기존 버전에서는 메일 리스트와 내용이 각각 전체 화면으로 표시되었던 것에 반해 안드로이드 3.0용에서는 메일 리스트와 내용이 동시에 표시되는 것을 확인할 수 있습니다. 넓은 화면을 효과적으로 활용하는 것이죠. 


넓은 화면을 효율적으로 사용하기

그렇다면, 넓은 화면을 효율적으로 사용하려면 단순히 한 화면에 여러 요소들을 구겨넣으면 되는 것일까요? 그렇지 않습니다. 한 화면에 여러 요소가 표시됨과 동시에 각 요소들을 조작하는 코드들은 각각 분리되어 있어야 합니다. 어떻게 보면 기존에 액티비티로 구현되던 요소들이 한 화면에 표시되는 것이죠. 

프래그먼트(Fragment)는 이러한 요구사항들을 잘 충족합니다. 액티비티처럼 관련된 코드들을 한곳에 묶을 수도 있고, 일반 뷰처럼 애플리케이션 레이아웃에 프래그먼트를 자유롭게 배치할 수도 있습니다. 다음 화면을 통해 프래그먼트의 배치를 확인할 수 있습니다.

G메일 앱의 프래그먼트 배치 모습



이것으로 프래그먼트의 등장 배경과 간략한 특징에 대해 알아보았습니다. 다음 글에서는 프래그먼트의 더 자세한 특징 및 사용 방법에 대해 알아보도록 하겠습니다.