프론트엔드 개발자와 협업을 하다 보면 UI를 바라보는 시각이 디자이너와 많이 다르다는 생각이 들었습니다.
우선 이해를 돕기 위해서 오버드로를 먼저 설명해드릴게요.
[오버드로란?]
오버드로란 앱의 겹쳐진 레이아웃 횟수를 표시해주는 기능입니다. 많은 레이아웃으로 구성된 UI는 픽셀들을 렌더링하는데 부하를 발생시켜 앱이 느려지게 됩니다. 그래서 UI 디자인 시, 레이아웃을 최적화시켜 불필요하게 그려지는 오버드로(픽셀)를 줄여야 합니다.
2021/03/02 - [디자인/안드로이드(Android)] - [Android] GPU 오버드로 디거깅을 통한 UI 최적화
[Android] GPU 오버드로 디거깅을 통한 UI 최적화
[GPU 오버드로란?] 오버드로란 앱의 겹쳐진 레이아웃 횟수를 표시해주는 기능입니다. 많은 레이아웃으로 구성된 UI는 픽셀들을 렌더링하는데 부하를 발생시켜 앱이 느려지게 됩니다. 그래서 UI 디
wdesigner.tistory.com
바로 오버드로의 개념으로 디자이너와 프론트엔드 개발자 사이에는 UI를 바라보는 시각 차이가 발생합니다.
디자이너의 시각 : 디자이너는 UI를 디자인할 때, 사용하는 '피그마, 스케치, XD, 포토샵 등'의 그래픽 툴은 레이어 개념이 존재합니다. 또한 안드로이드에서 제공하는 메티리얼 디자인의 Surfaces & Elevation의 개념 때문에 레이어를 겹쳐서 UI를 디자인하게 됩니다.
프론트엔드 개발자의 시각 : UI 구성 시, 최대한 오버드로를 줄여서 앱의 부하가 없도록 개발합니다.
예를 들어
(기본적으로 레이아웃이 없는 상태는 흰색으로 보입니다)
이렇게 UI를 바라보는 디자이너와 프런트엔드 개발자의 시각 차이가 발생하더라고요. 그래서 디자이너도 오버드로 개념을 알고 UI 디자인을 하면 프론트엔드 개발자와 커뮤니케이션 및 협업하기에 더 용이한 것 같아요.
그리고 실제 앱을 사용하는 유저 입장에서는 UI를 어떻게 구성하든 보여지는 결과는 동일하기 때문에 오버드로를 줄여서 앱이 더 빠른 것이 더 이득이죠. 특히 인터넷이 느린 나라에서도 사용되는 글로벌 서비스라면 오버드로를 더 신경 써야 할 것 같아요.
