티스토리 뷰

Material을 어떻게 하든 가져가 보자...


같이 프로젝트를 하는 팀원과 Material을 가지고 가는 것에 대해 논쟁을 이뤘었다. 나는 프로젝트의 빠른 마무리를 위해 Material 디자인을 고수하지 말자라는 의견을 내었었고, 같이 하는 팀원인 그는 Material 디자인은 무조건 고수였다. 이에 대해 논쟁을 하였고, 많은 이야기를 논하면서 격렬하게 서로간의 의견을 내세우며 대립각을 세웠었다.


결국은 UI 디자인의 통일성이 중요한 공통 의견으로 부상하면서, 이전까지 쭉 사용하였던 Material를 가지고 가자라는 것이었다. 물론 ng-Material 자체가 완벽한 것이 아니기에 모든 브라우져가 동일한 모습으로 나오게 하기 위하여 많은 노력을 해야 할 것이었다. 솔직히, Material을 가지고 UI 구성은 부트스트랩 만큼 쉽고 강력하기 때문에 빼고 쓰는 것도 문제가 있었다.

그리고, 지속적으로 Material 가지고 가게 되었다.



IE11에서 레이아웃이 깨지는 문제의 원인을 파악


서비스의 상세 페이지 부분은 이것 저것 많은 기능들이 들어가기 때문에 IE11에서 깨지는 문제를 해결하기 위한 Sandbox로는 적합하지 않았다. 다행히(?) 로그인 페이지가 IE11에서 깨져 있는 상태라 이것을 가지고 왜 깨지는 지 연구하기 시작했다. 크롬이나 파이어폭스에서는 잘 되지만, IE11에서 적용하면 안되는 Material 만의 뭔가가 있을 것이라 판단되어 그것을 찾기 시작했다.


이럴 경우 무식한 방법이 오히려 빠른 해답을 찾을 수 있다. 하나씩 하나씩 Element나 Attribute를 빼고 넣고 하면서 반복하며 찾아본 결과 2가지의 이유를 일단 찾아 내었다.


1번째는 바로 'layout-fill' Attribute인데 이건 부모 속성의 가로/세로 값을 그대로 채운다는 것이다. 손쉽게 저것만 추가하면 그러한 효과를 누릴 수 있게 되고 은근히 많이 사용하게 되는 속성이었다. 문제는 이 녀석이 Material의 악의 근원 중 한가지이며, 크롬을 제외하고 대부분의 브라우져에서 레이아웃을 깨지게 하는 속성값이다.


2번째는 `layout="column"`인 div 태그 내 자식들에게 속성 값을 'flex'로 줄 경우 였다. 'flex' 속성 값은 부모의 레이아웃 구조가 'row'냐 'column'냐에 따라 가로나 세로의 넓이를 자동으로 늘려주는 역활을 하는 속성인데, 이게 바로 문제가 되는 녀석인 것이었다. 부모의 레이아웃이 'column' 상태에서 자식들에게 세로 사이즈를 자동 적용하기 위하여 'flex'를 부여하면 IE11에서는 바로 깨져 버리면서 부모도 동시에 깨져버리고 사라져 버린다...


일단 위 두 가지의 문제점을 이해하고 이를 대체하기 위해서는 전통적인 방법(?)을 사용하면 된다. Material 측에서 완벽하게 만들어 주면 좋겠지만... 그들도 사람이고 해야할 일도 많을 터인데 같은 개발자로써 힘들게 구성하는 것이 뻔히 보여 바라기만 하고, 우리는 직접적으로 'style'속성 값으로 'width:100%'와 같이 부여하면 될 것이다.

댓글
댓글쓰기 폼