시작하며
오랬동안 PC의 프로그램에서만 존재해 왔던 3D가 최근 출시되고 있는 고성능의 GPU가 탑제된 스마트폰에 힘입어 이젠 모바일 화면에서도 3D를 볼 수 있게 되었습니다.
일반적으로 3D는 주로 게임이나 고급 UI에서만 사용되었습니다. 특히 UI에서의 3D는 WPF나 실버라이트에서 컴포넌트에 3D효과를 주기 전까지는 효과적이지 않은 방법이라고 여겨져 왔습니다. 모든 컨트롤을 3D화 하는것은 어려운 일이기 때문입니다.
2009년 3월, CSS 3D Transform 모델의 초안이 발표되었습니다. 여기서 개발자들에게 보다 더 흥미로운 웹 제작을 만들기 위해 DOM 요소들에 3D 원근법(perspective transformations)을 허용하였습니다.
CSS 를 통한 3D Transform의 초안 작업은 CSS 2D Transform 모델에서 이론적으로만 소개된 원근(perspective) , 회전(rotate) , 그리고 3DTransform의 변형 같은 특이한 속성들의 확장입니다. 예전에는 그렇게 쉽게 3D 로 인터페이스를 만들 수 없었지만, CSS 3D 초안 작업에서는 3D로의 진입 장벽을 낮춰왔습니다. 이로써 더 이상 3D 요소들을 만드는 데에 머리 터지는 수학적인 연산을 사용하지 않아도 되게 되었습니다.
주목할 부분은 CSS 3D 는 “개발자”들을 위해 만들어졌습니다. 이 말은 웹 어플리케이션에 초점을 두고 3D 시각효과를 도입하는데 도움을 주기 위해 만들어졌다는 것입니다. 즉 게임같은 전반적인 3D 세상을 위해서 만들어 진 것은 아니라는 것입니다.
브라우저 호환 및 하드웨어 가속
2010년 9월, 사파리와 크롬은 CSS 3D 를 지원하기 시작했습니다. 하지만 이는 단지 지원일 뿐, 3D 랜더링이 가능하다는 것을 의미하지는 않습니다. DOM 요소에 기초한 3D는 매우 많은 연산이 필요하므로 브라우저 제공 업체들은 브라우저가 느려지게 하자니 GPU의 가속을 받는 편이 좋겠다는 결정을 내렸습니다. 참고로 GPU는 아직 모든 플렛폼에 적용되지 않았습니다.
3D 기능 감지
웹 페이지에서 3D 지원이 가능한지를 바로 먼저 확인하지 않는 편이 좋습니다. 개발자들은 modernizr같은 툴을 통해 브라우저의 특징과 능력을 감지하는데 사용합니다만 3D 지원을 감지하는 동안엔 하드웨어 가속을 검출할 수 없으며, 사실 하드웨어 가속 검출이 우리에게는 가장 중요한 키 포인트입니다.
간단한 예제
일단 다른 설명은 제쳐두고 예제를 통해 CSS 3D를 배워보겠습니다. 아래의 <div>와 <iframe>에 회전을 적용해 보도록 하죠.
상위 DOM요소인 <div>에 우선 Perspective 를 정의합니다.
<div style="-webkit-perspective: 800; perspective: 800; margin: 100px 0 0 50px">
Perspective 는 어느 정도의 깊이로 3D를 랜더링 할것인지 정의하기 떄문에 상당히 중요합니다. 그 속성값은 한 1-1000 가 가장 괜찮은 효과를 보여주니 1000 보다 적은게 좋겠습니다.
그리고 div 테그 아래 iframe 을 추가하고 Y와 Z축으로 30도의 회전을 줍니다.
<iframe src="http://www.html5rocks.com/" style="-webkit-transform: rotate3d(0, 1, 1, 30deg)"></iframe>
짠! 이렇게 나왔습니다. 웹페이지 내의 화면과 스크롤바 등 기타 모든 요소가 잘 작동합니다. 하지만 만약 여러분의 브라우저가 3D 를 지원하지 않는다면 위의 iframe은 아무런 변화도 없을 것입니다. 또한 3D를 지원하지만 하드웨어 가속을 받지 못한다면 좀 이상하게 보일 수도 있습니다.
애니메이션
CSS3의 3D 를 사용함으로써 제가 느끼는 가장 좋은 장점은 CSS로 여러 변환 효과를 사용함으로써 애니메이션이 가능하고, 이를 통해 웹 페이지가 예쁘게 보인다는 것입니다. 이러한 애니메이션과 변환은 CSS로 쉽게 정의할 수 있습니다. 3D 적용도 마찬가지이지요.
3D효과에서 애니메이션 기능을 주는 것 또한 쉽습니다. 그냥 단순히 transition을 스타일에 정의하고 transform 효과를 통해 시간 간격을 주고 애니메이션 함수를 적용해주면 됩니다. 그러면 “transform” 효과로 애니메이션이 동작하게 됩니다.
이전 예제를 인라인 스타일로 다시 만들어보겠습니다. 새롭게 만들고 또한 :hover 셀렉터의 특징을 취해보겠습니다. :hover 를 사용하면 변형 효과는 마우스가 엘리먼트에 올라갔을 시작하게 됩니다. 꽤 괜찮은 방법이죠!
정리하며
위에 제가 설명한 내용은 꽤 간단하면서도 강력한 DOM 요소에 작용하는 효과들입니다. CSS 3D 변형을 사용해서 말이죠. 그리고, 앞으로도 제가 설명드릴 더 많은 효과들이 남아있다는 것을 기억해주세요!
원문 : 3D and CSS
번역 : [email protected]
