안드로이드 10으로 올라오면서 새로운 제스처 바가 추가되었습니다.
아이폰과 거의 똑같으면서도 어딘가 다른 제스처 바 때문인지, 생각보다는 많은 분들이 만족하지는 않으시더라고요.
아이폰처럼 달랑 네비게이션 바만 화면에 있는 게 아니라, 안드로이드는 제스처 바 공간을 따로 만들었으니 부자연스럽다는 말이 가장 많은 것 같습니다.
그래서 왜 제스처 바 공간이 따로 있는지 제가 직접 알아보았습니다.
1. 네비게이션 바 == 제스처 바
기본적으로 제스처 바는 네비게이션 바의 축소형입니다.
기존 네비게이션 바의 높이를 줄이고, 3개의 버튼(뒤로가기, 홈, 최근화면)을 없애고, 길쭉한 바(bar) 모양의 버튼을 추가한거예요.
다시 말하면, 네비게이션 바와 제스처 바의 베이스는 같습니다.
그래서 네비게이션 바의 속성이 제스처 바에도 그대로 적용이 돼요.
제스처 바라는 컴포넌트가 새로 생긴 게 아니라, 기존 네비게이션 바를 개조해서 만든 게 제스처 바입니다.
그래서 제스처 바 공간이 따로 생길 수 밖에 없던 거예요. 이건 태생적 한계입니다.
구글이 제스처 바 컴포넌트를 새로 만들지 않는 이상, 어쩔 수 없이 제스처 바 공간이 존재할 수 밖에 없는 것이죠.
2. 왜 제스처 바를 따로 만들지 않았나?
여기서 '왜 제스처 바를 새로 만들지 않고 네비게이션 바를 수정해서 만들었냐?' 는 의문이 들 수 있는데, 이 질문에 대한 답을 찾을 수는 없었습니다.
이건 전적으로 구글 마음이니까요 ㅎㅎ
제 머릿 속에는 여러가지 이유들이 떠오르긴 하는데, 그 중 가장 유력한 것만 궁예질 하자면...
이전 버전과의 호환성 때문이겠죠.
(여러가지 이유가 복합적으로 작용했겠지만, 호환성 문제가 가장 컸을 것으로 생각해요)
예시를 하나만 들자면, 제스처 바 공간이 따로 있을 때와 없을 때의 bottom navigation 모습입니다.
Bottom navigation이 가장 대표적인 예일 뿐이고, 이 외에도 모든 것들이 제스처 바와 호환이 제대로 안될 수 있습니다.
특히, 삼성은 One UI를 채택하면서 대부분의 컨트롤 컴포넌트들을 화면 하단에 배치하는 모습을 보여주는데 (특히 탭을 맨 밑에 배치), 제스처 바를 따로 만들었을 때의 가장 큰 피해자는 삼성이었겠죠... ㅎㅎ
제스처 바의 원조인 애플도 일부 앱에서는 이를 컨트롤하지 못하는 모습을 보여주더라고요.
내용과 제스처 바가 겹치는 모습을 보실 수 있습니다.
3. 제스처 바 사용시에만 하단에 위치한 컴포넌트에 자동으로 여백을 줄 수 없는가?
단순히 여백만 주면 끝나는 문제도 아닐 뿐더러, 너무 비효율적입니다. 현재 안드로이드에서 제공하는 컴포넌트는 정말 수 없이 많습니다.
수백개의 컴포넌트를 제스처 바에 맞게 일일이 수정할 바엔, 차라리 제스처 바 공간을 따로 배치하는 게 훨씬 낫습니다.
지금까지 제스처 바 공간이 있어야 하는 이유를 알아보았는데, 이쯤에서 또 다른 의문이 생깁니다.
'제스처 바 공간이 있는 건 좋은데, 제스처 바 배경을 투명하게 만들 수 없는건가?'
결론부터 말하자면, 투명하게 만들 수 있습니다. 다만, 앱 개발자가 따로 투명하게 만들어줘야 합니다.
4. Edge-to-edge
엣지 투 엣지는 안드로이드 10에서 처음 나온 용어입니다. 기존 상단바와 네비게이션 바 영역까지 앱 컨텐츠를 늘려서 보여주는 걸 말해요.
사실 용어 자체는 이번에 처음 나왔지만, 상단바와 네비게이션 바까지 컨텐츠를 보여주는 개념 자체는 안드로이드 4.4 킷캣부터 존재했습니다.
킷캣에서 처음 Translucent 테마를 내놨고, 사실 이 테마를 많이 쓰지는 않았습니다.
기본 런처나 일부 E-book 앱에서만 쓰였을 뿐...
어쨌든 상단바와 네비게이션 바 배경을 투명하게 바꾸는 것 자체는 킷캣부터 지원하던 기능이었습니다. (생각보다 역사가 깊죠?)
하지만, 전과는 달리 안드로이드 10에서는 다소 복잡한 방법으로 edge-to-edge를 구현해야 합니다.
inset을 이용하여 컴포넌트에 padding을 적용하는 건데, inset이라는 개념은 개발자들에게도 생소하죠.
구글에서도 inset이 어려운 개념인 걸 인정하고 있을 정도...
어떤 방법으로 edge-to-edge를 구현해야 하는지는 굳이 이 글에서 설명하지는 않겠습니다.
이곳은 앱 개발자 커뮤니티가 아니고 삼성 멤버스니까요 ㅎㅎ
저 역시도 여러번 시행 착오를 겪어서 edge-to-edge 디자인을 완성해봤습니다.
생각보다 어려운 작업이었습니다. 기존의 fitsSystemWindows, clipToPadding 속성과 겹치는 부분도 있어서 애를 많이 먹었고, inset 개념도 그렇고...
구글에서는 안드로이드 10 이상에서 엣지 투 엣지 디자인을 "강력하게 권장" 하고 있는 중입니다. (안드로이드 9까지는 "선택"사항이라고 남겨두었네요)
강력하게 권장하고 있다고는 하지만, 여전히 강제사항은 아닙니다.
왜 강제사항이 아닌지에 대한 여러가지 이유가 떠오르긴 하는데, 제 생각에 가장 유력한 이유는 굳이 강제사항으로 만들 필요가 없기 때문이 아닐까 싶어요.
edge-to-edge가 굳이 필요 없는 앱들이 지금도 많이 존재하거든요.
글이 많이 옆으로 나간 것 같은데, 요약하자면 edge-to-edge 디자인을 적용하면 제스처 바 배경을 투명하게 만들 수 있다는 겁니다.
말 그대로 권장사항이기 때문에 기본 적용이 아닌 앱 개발자 자율 적용 형태로 된 것이고요.
그리고 결정적으로 기본 적용이 아닌 이유는, 애초에 제스처 바 사용이 강제가 아니기 때문이죠.
설정에서 기존의 3버튼 네비게이션과 제스처 바를 고를 수 있는 상황인데, 엣지 투 엣지 강제 적용이 가능할리가 없습니다.
왜냐하면 3버튼 네비게이션에서는 굳이 edge-to-edge가 필요하지는 않거든요.
다시 말하지만, 3버튼 네비게이션과 제스처는 태생이 같기 때문에, 어느 한쪽에만 효과를 적용할 수가 없어요.
그래서 구글은 scrim 효과도 제안하는 중입니다.
scrim 효과도 옛날에 테마 작업할 때 썼던 건데, 안드로이드 10에서 다시 만날 줄은... ㅎㅎ
제스처 바를 투명하게 만들면, 네비게이션 바는 알아서 scrim 효과가 들어가더라고요. 신기했습니다.
스크림 효과는 일부 저사양 기기에서도 기본 적용될 수 있습니다.
안드로이드 10부터는 상단바/네비게이션 아이콘을 시스템이 알아서 결정해줍니다.
아래 움짤에서 보시면 알겠지만, 배경 색상에 따라서 제스처 바 색상이 변하죠?
이를 Dynamic color adaptation이라고 부르는데 (줄여서 DCA라고 하겠습니다),
이 DCA가 사양을 많이 타는 기능이에요. 그래서 구글에서는 DCA 기능을 탑재할지 말지는 제조사가 알아서 결정하라고 한 것 같습니다.
삼성 S/노트 시리즈에는 DCA 적용이 될 것 같은데, 그 미만 기종 (A, M 시리즈)에 탑재가 되었는지 아닌지는 제가 직접 확인을 못해봤습니다.
아래는 S10+에서의 DCA 사진입니다.
5. 마치며
이제 네비게이션 바와 제스처 바에 대한 의문이 조금은 풀리셨나요?
사실 제 뇌피셜도 꽤 많이 들어간 글이라 어쩌면 틀린 부분도 많을 수 있어요.
최대한 정확하게 쓰려고 노력했는데, 제가 구글 개발자가 아니라... ㅎㅎ
그냥 "아... 그렇구나..." 하고 가볍게 넘기는 글이 되었으면 좋겠습니다.
저 역시도 이번에 공부하면서 이제 좀 제스처 바와 친해진 느낌이 들었습니다.
공부한 내용을 바탕으로, CheckFirm과 Volt에 엣지 투 엣지 디자인을 적용해볼까 생각 중입니다.
마지막으로,
틀린 부분이 있으면 언제든지 댓글로 지적해주세요. 최대한 빨리 수정하겠습니다.
앞으로도 종종 안드로이드 소식 들고 오겠습니다.
감사합니다.
