opacity: 0.001? display: none과 무슨 차이지

발단

SSAFY의 프로젝트 주간이 끝나 프로젝트를 리팩토링하는 것 말고 할게 없어지다 보니 자연스럽게 세상이 눈에 들어오기 시작한거 같다.
구글에서 검색을 하고 유튜브 영상을 볼려고 마우스를 호버해보니 영상이 자연스럽게 시작되었다. 어떤 방식으로 돌아가는건지 궁금해서 개발자 도구를 찍어보니 신기한게 보여 오늘 글의 주제로 삼을까 한다.

/* 이게 뭐지? 왜 opacity를 조절해서 거의 투명에 가깝게 숨겨놨을까? */
<video style="opacity: 0.001;" />

개발자 도구를 열기 전까진 z-index를 활용해 썸네일 아래에 있거나 display의 속성값을 조절해서 사용자의 눈에는 안보이는 영상이 숨겨져 있을거라 생각했는데...왜 opacity를 사용한걸까?

검색 전 생각

본격적으로 검색을 하기에 앞서 개인적인 생각으론 다음 중 하나가 아닐까 싶었다.

1. display:none을 visible로 바꾸는게 성능을 저하시킬까?
2. opacity를 사용하는게 UIUX적인 측면에서 더 깔끔해 보일까?
3. z-index는 사용을 최소화 해야지 개발이 편리해지니 제외

결론

1번이 정답이었다.

display를 none에서 visible로 바꾸게 될 경우 성능이 저하될 뿐만 아니라 UI를 구성하는데에도 문제가 발생한다는 걸 알게되었다.

먼저 UI를 구성하는 데에 있어 display를 none에서 visible로 교체하는 로직을 사용할 경우 존재하지 않던 요소가 새롭게 등장하다보니 전체적인 페이지의 구성이 흔들릴 수 있다.

성능적인 이슈는 위의 UI적인 측면에서 기인한다. 이 이슈를 깨달았던 구글의 검색 결과 처럼 다수의 요소들이 있는 경우, display가 변경되면 페이지의 모든 요소의 위치와 크기가 재계산되고 이는 페이지 내부의 요소가 많아지면 많아질수록 큰 성능 저하를 낼 수 있다.