그림자를 통한 3D표현의 이해

웹에서 보여지는 화면은 기본적으로 평평한 화면에 2D 엘레먼트가 그려지는 형식입니다.
글자를 쓰든 네모 박스를 그리든 이미지를 표현하든, 깨끗한 도화지 위에 그려진다는 뜻입니다.

하지만 우리는 3D의 세계에 살고 있고 좀 더 현실적이고 생동감있는 화면을 표현하고 싶어합니다.
웹에서는 그러한 요구를 충족시키기 위해서 다양한 기능들을 제공하고 있고,
그중에서도 가장 보편화되고 편리한 방법은 바로 그림자 입니다. 글자나 박스 뒤에 그림자를 넣어서 입체감있게 표현을 해주는 것이죠.

CSS에서는 그림자를 표현하기 위한 아래와 같은 속성들은 제공합니다.
.element{
    /* offset-x | offset-y | blur-radius | color */
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
    box-shadow: 0 3px 6px rgba(0,0,0,0.2);
}
text-shadow는 아래와 같이 글자에 그림자를 추가할 수 있고,

box-shadow는 해당 element에 그림자를 추가할 수 있습니다.

마치 글자와 박스가 공중에 떠있는 것과 같은 효과를 줌으로써 보다 입체감 있는 표현이 가능합니다.
하지만 이것은 어디까지나 시각적인 속임수에 불과합니다.
2D에 그림자를 입혀 3D처럼 보인다고 한들 그것은 3D입체일 순 없기 때문입니다.

그렇기 때문에
정사각형이 아닌 정육면체를, 원이 아닌 구를 표현하고 싶다면
CSS의 Transform을 이용하여 element를 구성해야 합니다.

Transform 3D의 기본 구성

Transform 3D를 적용하기 위해선 기본적으로 아래와 같은 속성들이 사용됩니다.
.element-parent{
    perspective: 1000px;
}
.element{
    transform-style: preserve-3d;
    transform: translateX(0deg) translateY(0deg) translateZ(0deg) rotateX(0deg) rotateY(180deg) rotateZ(0deg);
}
perspective는 카메라라고 생각하면 이해하기 쉽습니다.
카메라가 얼마나 가까이서 해당 물체를 찍느냐 아니면 얼마나 먼곳에서 찍느냐의 차이 입니다.
위의 예제는 1000px 밖에서 바라본다는 의미입니다.

transform-style는 해당 element가 3D공간 위에 놓이게 될지 아니면 2D공간에 놓이게 될지를 정의합니다.
따라서 모든 element의 기본값은 flat 입니다. 하지만 우리는 3D구성을 해야하기 때문에 preserve-3d로 설정합니다

transform은 단어 뜻 그대로, element에 변형을 가합니다.
X축, Y축, Z축으로 이동할 수 있고
X축, Y축, Z축 기준으로 회전할 수 있습니다.
(자세한 내용에 대해서는 링크를 참고해주세요 )

Transform 3D 예제

위에 보이는 예제는 1개의 정사각형이 보이지만 실제는 6개의 정사각형이 모여 정육면체를 구성하고 있습니다.
하지만 화면에는 단지 정사각형으로만 보입니다.
"Y축 회전" 버튼을 눌렀을 때 글자만 바뀔뿐 어떠한 변화가 있었는지 알 길이 없죠.

아래의 속성을 추가함으로써 정사각형의 움직임을 확인할 수 있습니다
.element{
    /* transform-property | transform-duration | transform-timing-func */
    transition: transform 1s linear;
}
Transition은 CSS속성을 변경할 때 해당 element에 애니매이션 효과를 주기위한 속성입니다.

아래 체크박스를 클릭하여 Transition을 적용한 후 결과를 확인해보세요.

이제는 회전 버튼을 클릭했을 때 이것이 정사각형인지 정육면체인지를 확인할 수 있게 되었습니다.

정육면체를 좀 더 명확하게 확인하기 위해 아래 옵션들을 적용해보죠
.element-parent{
    transform: scale(1.2);
}
.element{
    opacity: 0.5;
}
scale은 element의 크기를 설정합니다. 1이면 기본 크기이고, 1.2는 20% 확대한다는 의미입니다.
opacity는 불투명도를 설정합니다. 0~1사이의 값을 사용합니다

크기버튼과 슬라이드 컨트롤을 이용해서 크기와 불투명도를 설정해보세요.

투명도에 따라 각 면들의 위치를 볼 수 있고, 크기 조절을 통해서 더 자세히 볼 수 있게 되었지만
원하는 방향과 각도로 회전하여 볼 수는 없습니다.
~회전버튼들은 정육면체를 X축으로 90도, Y축으로 90도씩 움직이기 때문에
사용자가 원하는 방향과 각도로 움직일 수 있도록 기능을 추가해보겠습니다.


정육면체를 마우스로 클릭하고 드래그 하여 직접 움직여보세요.

Transform 3D의 활용

위의 예제처럼 정사각형을 조합하여 정육면체를 만들고 더 나아가서는 다각형을 이용한 다면체를 만들 수도 있습니다.
원을 이용해서 구를 만들 수도 있고 수많은 작은 사각형들을 이어 붙여서 다양한 모양의 3D물체를 만들어낼 수도 있습니다.
하지만 Transform 3D만을 이용하여 화면을 구성하기에는 한계가 있습니다.
수많은 element가 동시에 transform을 사용하여 변형을 일으킬 때,
브라우저에 큰 부하가 걸리고 화면을 컨트롤 할 수 없을 정도로 브라우저의 움직임이 느려지기 때문입니다.

어디까지나 Transform 3D는 단순하고 간단한 3D화면을 구성하기 위해 사용되어져야 합니다.
하지만 X Y Z좌표를 이용하여 각 element를 배치하고 회전시키고 수많은 속성들을 설정하기에는 조작 난이도가 상당히 높습니다.
그래서 다음 글에서는 보다 쉽게 3D화면을 만들 수 있는 Transform 3D Modeler를 소개하려고 합니다.

마지막으로, 자동회전하는 정육면체와 함께 글을 마칩니다.