CSS3 Transform 3D Part2 (3D 모델러)
(※ 예제들의 정상적인 동작을 위해 크롬이나 파이어폭스에서 확인해주세요)
시작
지난 글인 Part1에서는 단순한 2D요소에 그림자를 이용하여 입체감있게 표현하고, CSS의 transform 속성을 이용하여 간단한 정육면체 표현과 애니매이션을 적용하여 보았습니다.
시각적으로 보다 풍성하고 화려하게 보이는 만큼 내부 코드들 또한 복잡하고 다양한 css의 속성을 이용해야 한다는 점에 있어서 3D요소들을 표현하는 것은 상당히 어려운 부분이었습니다.
3D요소가 담긴 공간을 만들어야 하고 공간에 들어갈 면(face)을 x축 y축 z축 기반으로 위치시켜야 하며 해당 면(face)들의 각도까지 계산을 해서 돌려놓아야 했습니다.
무엇보다도 가장 어려운 점은 눈으로 직접보면서 위치를 잡을 수 없기 때문에 많은 시행착오를 겪어야 하며 face와 face간의 연계를 쉽게 확인할 수 없다는 점입니다.
게다가 단순히 html 코드만을 이용해서 만들 경우 브라우저에 심한 부하를 일으키고 정상적으로 화면을 보여주기 어렵습니다. 수십 수백개의 face들이 화면상에 위치하고 있는 상태에서 face들을 동시에 움직이도록 처리하기에는 브라우저의 능력에 한계가 있기 때문입니다. 실제로 이러한 문제를 해결하기 위해서 웹에서는 canvas와 WebGL이라는 도구를 제공하고 있지만 오늘은 이것에 대해 다루지 않을 것입니다.
여기서는 몇개의 선과 몇개의 면으로 이루어져 있는 단순한 3D물체를 통해 웹화면이 얼마나 풍성해지고 다양해질 수 있는 지에 대한 가능성을 보여드리고자 합니다.
大인터넷시대가 시작된지 20여년이 넘었지만 우리가 봐왔던 웹페이지들은 언제나 평평하고 단순하고 짜여진 틀에서 만들어져 왔습니다.
이것은 사용자들의 경험과 노력이 모이고 모여, 가장 사용하기 쉽고 편리하게 발전되어왔다고 볼 수도 있습니다. 하지만 이제는
지겹지 않습니까?
조금 불편하더라도, 마우스 클릭 몇번 더 하더라도, 사용자들에게 신선하고 재밌는 페이지를 보여주고 싶지 않습니까?
아래에서 소개할 "3D 모델러"는 그렇게 시작 되었습니다.
3D 모델러 특징
3D 모델러는 웹프로그램 형태로 개발되었고 상단 메뉴와 오른쪽 트리구조, 속성창 등 흔한 개발 프로그램의 화면을 가지고 있습니다.
하지만 이 프로그램은 일반적인 구조인 웹서버-DB가 아닌 로컬에 모든 것을 두고 사용하는 구조입니다. 무슨말인가 하면 따로 설치가 필요없이 아래와 같이 로컬에 프로그램 파일을 놓고 index.html파일을 실행하면 브라우저를 통해 사용할 수 있다는 것입니다.
따라서 결과물도 로컬에 저장이 되고 불러오기도 로컬에 저장된 파일을 통해 이루어집니다.
아래 화면에서 메뉴 - File - Save 를 클릭해보세요. 로컬로 Data파일이 다운되는 것을 확인할 수 있습니다.
저장한 Data파일을 열어보면 아래와 같이 html로 데이터가 저장되는 것을 볼 수 있습니다.
<div class="face-scale-viewport">
<div class="face-observer" id="fo" title="Main"></div>
</div>
저장된 데이터는 그대로 메뉴 - File - Load를 통해서 불러올 수 있습니다.
아래 내용을 한번 Load하고 어떤 내용이 표시되는지 확인해보세요.
<div class="face-scale-viewport">
<div class="face-observer" id="fo" title="Main" style="transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px);">
<div class="face" id="face1" title="" style="width:100px;height:40px;background:#fff;text-align:center;font-size:30px;border:1px solid;">Hello</div>
</div>
</div>
3D 모델러 기본
"안녕하세요"가 표시되는 간단한 Face를 만들어보겠습니다.
아래 순서에 따라 프로그램에서 적용해보세요!
① FACE LIST 에서 fo을 마우스 오른쪽 클릭해서 하위에 Face 추가를 해주세요.
② 생성된 face1을 마우스 오른쪽 클릭하여 HTML 수정을 선택해주세요
③ 안녕하세요를 입력하고 Apply 해주세요.
④ 메뉴 - Style - Global Style 선택하고 아래 내용을 넣어주세요.
.face{
width: 200px;
height: 100px;
background: #fff;
border: 1px solid #000;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
}
위 과정을 진행하면 아래와 같이 하얀색 네모에 "안녕하세요"가 표시된 face를 확인하실 수 있습니다.
생성된 네모모양의 face를 마우스 왼쪽 클릭해서 드래그 해보세요. face가 마우스 움직임에 따라 회전을 하게 되고, 마우스 오른쪽으로 클릭하여 움직이면 XYZ좌표로 이동을 하게됩니다. 변형된 정보들은 오른쪽 FACE DETAIL 내에 실시간으로 표시됩니다.
3D 모델러 응용
하나의 face를 구현해봤으니 이제는 6개의 face를 이용한 구모양을 만들어 보겠습니다.
① FACE LIST 에서 fo을 마우스 오른쪽 클릭해서 Face 6개를 추가해주세요.
② 메뉴 - Style - Global Style 선택하고 아래 내용을 넣어주세요.
.face{
width: 200px;
height: 200px;
background: rgba(255,255,0,.2);
border: 1px solid #666;
border-radius: 100%;
}
③ face2을 선택하고 FACE DETAIL에 있는 RotateY 부분에 30을 넣어주세요.
④ face3을 선택하고 FACE DETAIL에 있는 RotateY 부분에 60을 넣어주세요.
⑤ face4을 선택하고 FACE DETAIL에 있는 RotateY 부분에 90을 넣어주세요.
⑥ face5을 선택하고 FACE DETAIL에 있는 RotateY 부분에 120을 넣어주세요.
⑦ face6을 선택하고 FACE DETAIL에 있는 RotateY 부분에 150을 넣어주세요.
⑧ fo를 선택한 후, 왼쪽 화면의 노란색 원을 마우스로 드래그해보세요.
위 단계들은 원모양의 face를 Y축으로 30도씩 회전시키면서 구의 형태를 만드는 과정입니다. 30도가 아닌 더 작은 각도로 원을 회전시켜서 위치한다면 완벽한 구에 가까워지겠죠? 하지만 위에도 언급했듯이 브라우저에 많은 부하가 발생할 것입니다.
만약 face간의 각도를 10도로 한다면 아래와 같은 구를 만들 수 있습니다.
3D 모델러 활용
3D 모델러 내에서 만들기만 하고 실제 웹페이지에서 사용할 수 없다면 위의 작업들은 큰 의미가 없을 것입니다. 그래서 프로그램에서는 Export 기능을 제공하여 프로그램에서 만들어진 3D모델을 실제 웹페이지에 적용할 수 있습니다.
아래 모델은 의사랑의 마크를 3D로 구현하고 animation을 적용한 모습입니다. 반원모양의 도형 3개가 어우어져 순서에 맞게 회전하고 있습니다.
메뉴 - File - Export를 클릭하면 html코드 형태의 데이터를 받을 수 있고 추출된 코드를 의사랑 홈페이지에 넣는 다면 아래와 같이 구성할 수 있습니다.
어떤가요? 좀 더 다이나믹해지지 않았나요?
또한 아래처럼 다양한 모델을 만들수도 있습니다.
무지개빛 다이아
공전
3D모델러에서는 단순히 3D모델을 만드는 것 뿐만 아니라 입체적인 웹페이지의 구성이 가능합니다. Next버튼으로 페이지를 전환해보세요.
끝
어렵습니다. 너무 어렵습니다. 3D모델러 개발을 위해 수학을 다시 공부하였고 cosine sine tangent와 matrix를 공부했습니다. 머리 속에 늘 xyz좌표를 떠올리며 회전시켰고 여러가지 기술적인 문제에 직면하기도 하였습니다. 이제는 스스로 이것을 이용하여 개발을 할 수 있을 만큼 숙련도도 높아졌고 프로그램의 완성도 또한 높아졌습니다 (하지만 결국은 저 혼자만 이걸 쓰겠지요).
3D모델러를 통해 누군가에게 특별한 영감을 줄 수 있다는 사실만으로도 저의 목표는 충분히 이루었다고 생각하고 있습니다. 좀 더 나아가 위 개념들을 발전시키고 기술적으로 더 높은 완성도를 만들기 위해서 다음에는 three.js 라고 불리우는 Javascript 3D Library에 대한 내용을 다룰려고 합니다. 하지만 이번에 비해 난이도가 훨씬 높고 코드 또한 복잡합니다. 그래서 언제가 될지 모르겠습니다만 새로운 내용을 들고 언젠가 다시 찾아오겠습니다. 끝