탑-다운 뷰(Top-down view, Bird’s-eye view)

탑-다운 뷰는 위에서 아래를 내려다보는 시점을 의미합니다. 마치 새가 상공에서 아래를 쳐다보듯이 모든 요소의 윗면만 보이게 되기 때문에, 버드-아이 뷰라고도 합니다. 보통은 3차원 그래픽을 2차원에 표현하기 위해 사용하고, 그렇기 때문에 주로 위에서 내려다보는 형태의 시야를 가진 컴퓨터 게임을 말할 때 쓰는 용어입니다. UX 위키에 이게 왜 나오냐고요?

우리가 모니터를 통해 보게 되는 일반적인 소프트웨어의 GUI는 이 탑-다운 뷰가 암시되어 있기 때문입니다. 우산을 쓰고 걸어가고 있는 사람을 하늘 높이 떠 있는 새가 본다면, 사람은 안 보이고 우산의 윗면만 보이겠죠? 이렇게 탑 다운 뷰에서는 아래에 있는 것이 더 높이 있는 무언가에 의해 가려지게 돼있습니다.

어도비 블로그에서 가져옴

어도비 블로그에서 가져옴

그렇다면 이제 우리의 GUI를 한 번 봅시다. 바탕화면 위에 아무 이 뜨면 바탕화면이 가려지지요? 그러면 창이 바탕화면보다 위에 있다고 말할 수 있습니다. 우리가 하늘을 나는 새가 되어서 이 화면을 보고 있다고 생각하면요. 그렇다면 마우스 커서는 창보다 위에 있을까요? 아래에 있을까요? 아마 마우스 커서는 모든 UI의 가장 위에 있을 겁니다.

포토샵이나 피그마의 레이어를 생각하면 쉽습니다. 레이어 창에 어떤 레이어가 다른 레이어들의 위에 있으면 가장 전면에 나타나면서 아래 있는 레이어들을 가리잖아요? GUI에 대해 얘기할 때 어떤 것이 ‘위에 있다.’ ‘아래에 있다.’와 같은 표현을 들으신다면 이것을 탑-다운 뷰의 맥락에서 생각하시면 됩니다.


XD Essentials: Layered Interface Techniques for Mobile Apps