안녕하세요, 빅픽처인터랙티브 서비스 개발 크루 프론트엔드(FE) 박성렬입니다.
시간이 믿을 수 없이 빠르네요. 🎉빅픽처인터랙티브의 서비스인 게임코치온라인이 새 해를 맞이한 것이 벌써 3개월 전입니다!🎉
이미 2022년 초입은 지나간지 오래입니다. 프로젝트를 진행하고 이를 별도로 정리하다 보니 새해 마무리가 늦었습니다. 3D 웹 기술🧑🏻💻에 좀더 깊게 접근해 보고자 약 2.5주간 게임코치온라인(이하 GCO)의 한 해를 정리하는 3D 인터랙션 웹페이지를 직접 기획부터 디자인, 개발까지 해 보느라고 바빴거든요.
만들어진 프로젝트의 영상과 링크를 먼저 보시죠. 게임코치온라인을 한 번 방문해 보시면 더욱 좋을 것 같구요😉
👉3D 인터랙션 웹페이지 링크
주의 - 화면에 보시는 내용은 실제 GCO의 통계와 무관합니다. 내부자료를 기반으로 하여 제작된 프로젝트인 만큼, 이 블로그 글의 영상과 링크에 포함된 GCO 관련 정보는 모두 실제 자료가 외부에 공개되지 않도록 임의의 내용으로 수정했습니다.
웹 트렌드가 된 3D
이번 프로젝트는 3D여야만 했습니다. 이제는 거부할 수 없는 유행이기 때문입니다. 3D로 된 웹사이트는 손목에 찬 애플워치나 포켓몬 띠부띠부 씰만큼이나 흔합니다. 2022년 웹 디자인 및 개발 레퍼런스를 주도하고 있다고 여겨지는 여러 사이트들의 첫 화면에서는 거의 항상 3D로 된 작품을 한 개나 두 개 이상을 찾을 수 있습니다.
언젠가는 관련된 프로젝트를 할 것이라고 예상할 수 있습니다. 빅픽처인터랙티브의 웹 서비스중에는 아직 본격적으로 3D를 적용한 작품들이 없더라도 말이죠. 새로운 기술과 표현법에 깊이 빠져보는 일이 언제나 흥미롭다는 것은 두말할 필요도 없구요. 🔥🔥🔥🔥🔥
부침도 물론 있었습니다. 2D 웹에서는 아주 쉽게 구현했던 것들이 때로는 아주 먼 길을 걸어서 완성되기도 했습니다. 이 부분들이 팀이 3D 프로젝트를 진행할 때 매우 중요한 기틀이 될 것으로 생각이 들었습니다. 이번 프로젝트를 통해서 3D웹과 기존의 2D 웹이 어떻게 다른지, 예상과 다른 점들은 어떤 것들이 있었는지 기획, 디자인, 개발을 아울러 모든 파트별로 정리해 보았습니다.
웹 속에서의 3D와 UI
3D웹으로 이야기를 시작했지만, 2D 웹 요소들은 여전히 매우 중요합니다. 웹상의 3D는 사실 HTML 문서 위에 올려놓은 하나의 이미지 파일과 동일한 방식으로 처리되기 때문입니다.
그래서 HTML 문서 위의 다른 요소들처럼 또 다른 요소를 적층(layer)하여 표현이 가능합니다.
이 적층요소는 여러가지 이유로 매우 중요합니다.
- 3D 공간에서는 브라우저의 접근성(accessibility, 이하 a11y) 요소들을 사용할 수 없습니다.
- 사용자는 2D 웹페이지형 UI-UX에 훨씬 익숙합니다. 3D 좌표계를 사용자가 어떻게 컨트롤할지 디자인 하는 것은 생각보다 매우 어렵습니다. 그래서 3D 게임들은 일반적으로 튜토리얼을 제공하기도 합니다.
- 브라우저상 3D 렌더는 기기의 전력과 연산능력을 매우 많이 소모합니다. 따라서 복잡도가 높지만 3D로 표현될 필요가 없는 내용이면 오버레이 레이어에 표시하는 것이 좋습니다. 특히 웹 3D(webGL)은 태생적으로 곡선 계산에 취약합니다. 곡선 계산은 상당히 많은 연산을 필요로 하기 때문에 폰트나 복잡한 벡터 장식은 최대한 다른 레이어로 분리해야 합니다.
- 경우에 따라 여러개의 3D 렌더 레이어를 표현할 수도 있습니다.
- 3D 렌더 레이어도 결국에는 하나의 HTML 요소입니다.
따라서 3D 웹앱 프로젝트를 처음 시작한다고 하면 오버레이 레이어와 3D 렌더 레이어가 어떻게 연결될지, 그리고 3D 렌더 레이어가 웹 문서 안에 어떻게 배치될지를 생각해 보는 것이 큰 숙제입니다. 이 때 awwwards나 dribbble같은 웹 디자인 레퍼런스 사이트에서 웹 에이전시 3D 웹사이트들이 이를 어떻게 구현했는지를 보는 것이 큰 도움이 되었습니다.
일반적으로 가장 흔한 패턴은 아래와 같았습니다.
- 휠, 스크롤을 사용하여 3D 좌표를 조작한다.
- 스크롤을 사용하여 페이지 단위로 화면을 고정(snap)시키고 애니메이션을 재생한다.
- 마우스를 움직이면 이에 따라 3D 물체가 움직인다.
- 마우스가 3D 오브젝트에 닿으면(hover) 애니메이션을 재생한다.
- 오버레이 레이어에서 버튼을 눌러 3D 좌표를 조작한다.
- 오버레이 레이어에서 슬라이더를 움직여 3D 좌표를 조작한다.
- 마우스로 클릭하여 렌더 레이어에 대한 조작 상태를 켜고 끌 수 있게 한다.
- 게임 등에서 사용되는 전통적인 3D 조작법만을 사용한다: Orbit Control, First Person Control, Fly Control...
제가 진행하고자 하는 GCO 프로젝트의 경우, 어디까지나 작은 인터랙션 페이지가 목표입니다. 사용자는 스스로 개입하여 여러 각도에서 사물을 바라볼 필요 없이 정해진 흐름에 따라 입체감만 느끼면 됩니다. 따라서 2D 웹 페이지의 조작방식만 사용해서 3D 조작을 최대한 단순화 했습니다.
최종적으로는 웹 페이지 내부의 스크롤과 3D 오브젝트에 대한 마우스 근접(hover)에만 반응하도록 설계했습니다.
적층하는 단계의 경우 프로젝트의 크기가 그렇게 크지 않음을 감안해서 아래와 같이 구성했습니다.
여기에서 3D 좌표 대응 레이어를 별도로 만들어놓은 이유는, 2D 오버레이 레이어에 해당 좌표가 간섭하지 않고 화면에 따라 자유롭게 반응할 수 있도록 하기 위해서입니다. 또한 해당 레이어에 3D 레이어 내부의 사물과 일치하는 a11y 요소를 주입하면 스크린리더기나 화면의 시각적 요소에 접근이 어려운 환경에서도 해당 화면을 부분적으로나마 이해할 수 있게 됩니다.
3D 공간에서의 크기
웹 페이지와 렌더 공간의 구성을 완료하면 실제 3D를 구성해 볼 차례입니다.
3D 화면에서는 물체의 너비나 폭을 픽셀로 지정할 수 없습니다. 그러나 웹은 화면 크기에 맞추어 반응하는 반응형 디자인이 일반적입니다. 따라서 웹에 맞게 3D의 좌표를 기획서 또는 디자인에서 표현하고자 한다면, 3D 렌더 레이어의 크기를 기준으로 이를 제시하면 좋습니다. 3D 렌더 레이어의 폭과 너비는 픽셀로 나타낼 수 있기 때문입니다.
기획자나 디자이너가 3D 웹앱 개발자에게 사물의 크기에 대해 말할 때에는 이런식으로 말하면 좋을 것 같다는 감이 왔습니다.
🎙3D 물체의 크기는 보여지는 화면의 1/3 크기면 좋겠어요!
이미 앞서 적층 구성 단계에서 3D 렌더 레이어를 문서의 크기와 일치시켰기 때문에 비교적 수월하게 작업이 가능했습니다. 물체를 렌더 레이어 기준으로 배치한 뒤에, 남는 영역에 타이포그래피를 삽입하는 방식으로 작업했습니다.
이 화면의 경우 빈 공간의 크기를 렌더 레이어의 폭과 너비로 정의한 뒤, 그 정 가운데에 사물과 HTML 텍스트를 배치해서 화면 크기가 변해도 유지될 수 있게 구성했습니다.
3D 아이데이션 및 프로토타이핑
3D를 기획하고 디자인 하는 것은 생각보다 매우 난해한 작업이었습니다. 흔히 3D를 사물의 배치로만 생각하기 쉬운데, 실제로 3D는 훨씬 많은 요소들이 조합되어 하나의 장면을 만들어냅니다.
👀시점
- Perspective: 소실점 있음
- Orthographic: 소실점 없음, 주로 2d 화면 위에 렌더하거나 isometric 화면을 만들 때 사용
🔦광원
- Spot Light, Point Light, Directional Light...
🧱재질
- Roughness, Emissive, Metalness, Shadow, Ambient Occulsion, Height map...
시점+광원+재질을 결합하고 나면 마치 우주비행선의 조종석을 들여다 보는 것처럼 고려할 수 있는 것들이 너무나도 많았습니다. 일반적으로 폭과 너비, 색상과 이미지 정도만 결정하면 되는 2D 디자인에 비교한다면 말이죠. 조합으로 인한 결과물도 천양지차입니다. 단순한 빨간 큐브 도형도 어떤 조명과 어떤 배경 위에 배치해서, 얼마만큼의 반사도를 설정하느냐에 따라 전혀 다른 색이 됩니다.
재질만 해도 그렇습니다. 첫 화면에 나오는 이 회색 로고의 경우, 깨끗한 흰 색에 그림자를 통해 엄숙한 느낌을 주고 싶었습니다. 그러나 실제로 테스트해보니 완벽한 흰색을 표현할 수 없었습니다. 모든 도형은 음영을 가지기 때문입니다. 어떻게 하더라도 배경의 절대적인 흰색에 비하면 너무 어둡게 표현되었습니다. 그렇다고 너무 흰색에 가깝게 표현하면 그림자가 죽어버렸습니다. 다시 회색으로 표현하여 반사도를 높여 밝게해보았더니 음영이 너무 밋밋해졌습니다. 결국에는 MatCap 재질을 사용하여 표현되는 음영의 색상을 보기 편안하고 밝은 회색으로 설정하는 것으로 정착했습니다.
MatCap 재질이란 빛에 대한 음영 자체를 하나의 그림으로 저장하여 재질로 만든 것을 뜻합니다. 아래의 그림에서 볼 수 있듯이 MatCap안에는 반사광과 직사광, 그림자와 간접그림자 등 음영에 대한 색상 정보가 구 형태로 모두 표현되어 있습니다.
MatCap같이 표현이 제한된 재질들도 3D 웹앱 환경에서는 장점이 많습니다. 음영을 사실에 가깝게 표현(lambert, physical)하는 재질은 사양을 너무 소모하고, 음영을 단순하게 표현(phong)하는 재질은 빛의 대조가 너무 커서 물체가 섬세하지 않아 보입니다. 그러나 MatCap은 과장되지 않고 적당한 음영을 원하는 색상 안에서 표현할 수 있고, 사양도 크게 소모하지 않습니다.
Cinema4D, 3Ds Max, Blender같은 3D 그래픽스 소프트웨어로 미리 확인해본 재질의 특성과는 또 다릅니다. 3D 그래픽스 도구에서 렌더되는 화면은 웹에서 렌더되는 화면과 다른 연산능력, 다른 공식을 사용하기 때문입니다. 렌더 작업시에 렌더러를 바꾸기만 해도 다른 결과물이 나오는 것 처럼, 웹 자체도 별도의 렌더러로 생각하고 작업해야 합니다. 따라서 반드시 웹상에서 데모가 가능한 에디터를 사용하여 느낌을 테스트 해보고 구현을 요청하는 것이 좋습니다.
웹 라이브러리중 three.js는 편집이 가능한 미리보기 에디터를 제공합니다. 에디터를 사용해 느낌을 확인해보면서 작업을 좀 더 수월하게 진행할 수 있었습니다. 장면 장면마다 미리 광원과 사물을 비슷한 느낌으로 배치하여 프로토타입을 만들어 보았습니다. 내보내기 기능도 있지만 아쉽게도 실제 바로 앱 개발로 이어지지는 않습니다. 최적화 과정이 생각보다 매우 복잡하기 때문입니다.
3D 작업의 속도는 무엇이 가능하고 무엇이 불가능한지를 알고, 불필요한 구현의 디테일을 줄이는 것이 핵심입니다.
프로토타이핑 과정에서 사용 가능한 무료 3D 모델이 있는지를 먼저 확인해보는 것도 필수입니다. 일반적인 3D 모델 다운로드 사이트의 경우 스튜디오에서 사용하는 고폴리곤 모델들이 많기 때문에 Sketchfab 같이 저폴리곤 3D 모델들을 다운로드할 수 있는 사이트들을 별도로 찾아보는 편이 좋습니다.
사용자 반응성(interactivity)
앞서서 살펴 보았듯 웹 상에서 3D를 구현하는 일은 어렵습니다. 시간과 리소스, 기술적인 한계와 계속 씨름하게 됩니다. 3d를 정적으로 렌더해서 이미지나 영상을 사용하는 경우가 많은 것도 이 때문입니다.
그런 어려움에도 불구하고 3d를 사용한다면, 정적인 이미지나 영상과 차별화가 될 수 있어야 합니다.
- 사용자 입력에 따라 각 물체의 여러 부분들을 보여주거나 시점을 변환
- 난수요소를 통해 매번 다른 화면을 보여줌
보고있는 화면이 정적인 이미지가 아니고 실제 3d라는 것을 다시 확인시켜주기 위함입니다.
깃헙의 랜딩 페이지에 있는 지구도 계속해서 회전하며 뒤쪽의 선과 점들이 반짝입니다. 프레임마다 발생하는 미세한 움직임들이 실시간 3D 렌더라는 것을 확인시켜줍니다. 또한 마우스를 올리면 이에 반응하여 정보를 보여주기도 합니다. 깃헙에서도 해당 내용에 대해 장문의 페이지를 통하여 설명한 적이 있습니다.
GCO의 경우도 원하는 내용을 만들어서 처음 렌더했을 때에는 생각보다 3D의 느낌이 너무 부족해서 당황했습니다. 그래서 시간의 흐름에 따라 랜덤하게 위치와 색상을 바꾸도록 작업하거나, 마우스에 반응하도록 미세한 인터랙션을 추가했습니다.
이 화면의 경우 한 해동안 진행된 수업의 횟수를 나타내고 있습니다. 마우스를 가져다 대면 몇 번째 수업인지를 확인할 수 있습니다. 실제 강의 정보를 연결하면 더 좋았겠지만, 외부 유출을 우려하여 횟수 정보만 포함시켰습니다. 상단의 로고는 계속 회전하며 모델의 각 측면을 전부 보여줍니다.
퍼포먼스, 퍼포먼스, 퍼포먼스
조금씩 화면을 완성해가다보니 기능이 별 것 없는데도 너무 느려서 당황했습니다. 3D 환경에서 사양 차이로 인한 성능 하락은 2D 웹 환경보다 훨씬 가파릅니다. 3D화면이 생각보다 많은 자원을 소모하기 때문입니다. 화면이 너무 느리게 렌더되면 아예 브라우징이 불가능한 경우도 많아서 퍼포먼스를 더욱 꼼꼼히 고려해야 합니다.
기획과 디자인 과정에서부터 고려할 수 있는 퍼포먼스 향상 전략이 몇 가지 있습니다.
눈속임 또는 적은 복잡도의 볼드한 디자인을 사용
반드시 디테일을 줄일 필요는 없습니다. 미니멀리즘 디자인을 통해 디자인적 강조와 생략을 충분히 활용하면 큰 퍼포먼스 절약 전략 없이도 그럴싸하게 보일 수 있습니다. 캠페인 웹사이트인 Voice of Racism voiceofracism.co.nz은 볼륨감을 가진 곡선을 이용한 디자인 미학으로 큰 성능 하락 없이 3D를 체감할 수 있습니다.
후퇴(fallback) 페이지를 만들어 놓고, 데스크탑 혹은 태블릿같이 최적의 환경에서만 3d를 보여주기
3d가 제대로 동작하지 않는 환경은 거의 없습니다. 그러나 사용이 불가능할 정도로 3D 렌더가 느린 경우는 흔하게 있습니다. 따라서 구현하고자 하는 3d 화면이 핵심적인 기능일 경우, 2d화면에서도 똑같은 기능을 사용할 수 있게 후퇴 페이지를 만들어 놓는 것이 좋습니다.
배경을 렌더하지 않기
물체와 그림자만 미니멀리스틱하게 표현합니다. GCO의 경우 배경을 아예 생략하고, 그림자를 통해서 무한대 크기의 배경이 있는 듯한 느낌만 주었습니다.
복잡도가 많은 부분을 오버레이 레이어로 보내고, 미적인 강조가 필요한 부분만 3D로 표현하기
각종 신발 사이트에서 상품의 생김새만 3d로 보여주고, 구체적인 설명과 탐색 기능 구현은 웹으로 하는 경우가 이에 해당됩니다.
광원과 그림자의 갯수를 줄인다
광원의 갯수를 최대한 줄이고, 광원이 필요할 경우 불필요한 계산이 발생하지 않도록 광원이 적용되는 범위를 정확하게 지정합니다. 혹은 블렌더에서 굽기(bake)를 통해 그림자를 정적으로 텍스쳐에 렌더할 수도 있습니다.
모델의 폴리곤 줄이기
퍼포먼스 문제로 많은 3D 웹사이트들이 저 폴리곤(low-poly) 도형 또는 추상적인 도형을 사용합니다. 만약 폴리곤이 많은 물체를 여러개 렌더해야할 경우, LOD(Level of Detail)에 따라 폴리곤의 갯수가 다른 오브젝트를 미리 만들어 두는 것이 좋습니다. LOD란 카메라에 근접한 모델에만 디테일(폴리곤)을 증가시키는 기법입니다.
전체화면 이펙트를 최대한 줄이기
화면 전환 효과(transition), 후처리(post effect: 피사심도, 블러, 블룸 효과...)는 해상도가 올라갈수록 매우 GPU, CPU집약적 작업이 됩니다. 따라서 3D 렌더 화면이 넓으면 넓을수록 전체화면에 적용되는 이펙트를 줄여야 합니다.
픽셀 해상도(pixel ratio)를 줄이기
3D 공간은 벡터로 연산되지만, 렌더된 결과는 비트맵(픽셀)입니다. 따라서 이 비트맵의 해상도를 모니터의 해상도와 별개로 조절할 수 있습니다. 만약 렌더가 생각보다 사양을 많이 필요로 한다면 픽셀 해상도를 줄일 수 있습니다. 픽셀 해상도는 고정이 아니라 가변으로, 특정 조건을 만족하는 경우에만 픽셀 해상도를 낮출수도 있습니다. 그러나 픽셀 해상도를 조절하기 위해 너무 빈번한 연산이 일어나는 것은 피해야합니다.
기획적인 측면에서는 화면 디테일에 비추어 픽셀 해상도를 조절할 수 있습니다. 화면에 장식이 많고 어지럽다면 픽셀 해상도를 낮게 해도 크게 눈에 띄지 않을 수 있고, 반면 화면 구성이 심플하고 미니멀할수록 픽셀 해상도를 높게 할 수 있습니다. 혹은 문제가 많은 특정 기기에서 픽셀 해상도를 낮추는 것도 고려해볼만 합니다.
블렌더로 모델의 음영 및 색상 굽기(bake)
3D에서 가장 사양을 소모하는 부분은 광원입니다. 앞서 짧게 언급하기도 했지만, 많은 빛과 그림자를 표현할수록 3D 화면은 더욱 느려집니다. 이 과정에서 발생하는 실시간 연산을 줄이기 위해서 미리 그림자와 광원을 연산하고, 재질로 만들어서 입힐 수도 있습니다. 이것을 굽기(bake)라고 합니다. 오븐에서 빵을 구울 때 열이 전사되어 검게 그을리는 것을 생각하면 매우 적절한 이름입니다.
GCO 프로젝트의 하단 화면은 다른 화면에 나오는 그림자들보다 더욱 정교하면서도, 별로 크게 사양을 타지 않습니다. 미리 3D 그래픽스 소프트웨어인 블렌더에서 그림자를 구워서 텍스쳐로 만들었기 때문입니다. 굽기 테크닉은 렌더 자원 소모를 줄여야하는 반복적인 3D 작업에서 널리 사용되는 방식입니다.
텍스쳐를 구울 때에는 여러가지 그래픽스 도구를 사용할 수 있지만, 무료이고 비교적 3D 앱에 사용하기 위해 최적화가 잘 되어있는 블렌더를 이용하면 좋습니다. 저의 경우 굽기 작업이 있다는 것을 처음 알고 각종 웹 문서와 유튜브 튜토리얼을 찾아봤지만 정확하게 필요한 부분만 설명하는 경우는 거의 없었습니다. 혹시라도 관심있으신 분을 위해 굽기하는 방법을 정리해 보았습니다.
👀여기서부터는 기술적인 튜토리얼이므로 그래픽 작업을 하시는 분들만 보셔도 됩니다!
우선 작업할 모델을 준비하고 광원을 배치합니다. 준비가 완료되면 광원과 카메라를 별도의 콜렉션(Collection)으로 모아두고 메쉬(Mesh)만 하나의 콜렉션으로 만듭니다.
그 다음 상단의 그림이 있는 아이콘 버튼을 클릭하여 UV Editor로 진입합니다.
여기서 UV 텍스쳐 맵을 새로 생성합니다. Image → New를 클릭하고 원하는 파일명을 입력합니다. 이름은 보통 해상도와 내용을 바로 확인할 수 있게 지어주면 좋습니다. i.g.) 내용+해상도: baked-2048
그 외에도 다른 작업을 하기 전에 우선 세팅하면 좋은 부분들이 있습니다.
- 텍스쳐의 해상도는 2의 배수일 때 호환성과 퍼포먼스가 가장 좋습니다. 2의 배수가 아니면 GPU에 따라 오류가 발생할 수 있습니다. 해상도가 너무 높으면 렌더하는데 시간이 오래걸리고 앱에서 로딩하는데 시간이 오래걸립니다. 테스트 결과 512~2048 사이가 적당했습니다.
- 기본 배경색이 검정인데, 배경색은 흰색 또는 검정과 다른 색으로 만들어두는 편이 좋습니다. 나중에 그림자만 렌더하려고 하면 배경색을 분리하기 조금 더 쉽습니다.
- 32-bit float에 체크합니다. 호환성 및 성능 향상에 도움이 많이 됩니다. 간혹 64비트를 지원하지 않는 GPU가 있기 때문입니다.
save를 눌러 저장합니다.
이제 UV 매핑을 할 차례입니다. 우선 컬렉션 안에 있는 메쉬를 하나 선택합니다. 외곽선의 색이 바뀌면서 선택이 확인되면 탭(tab)키를 눌러 Edit Mode로 진입합니다.
면(face) 선택 모드로 바꿉니다.
A키를 눌러 해당 도형의 모든 면을 선택합니다. 색이 달라진 것을 통해 메쉬의 모든 면이 선택된 것이 확인 되었으면 메쉬에 대고 오른쪽 클릭을 하여 Face Context Menu를 엽니다. 여기서 UV Unwrap Faces 항목에 있는 unwrap을 선택합니다.
UV 맵 화면에서 메쉬의 위치를 적당히 조절합니다. 이 때 너무 가까이 닿거나 겹치면 간혹 간섭을 줄 수 있어서 적당히 떨어뜨려 놓는 것이 좋습니다. 경우에 따라 메쉬의 도형(Geometry)이 너무 복잡한 경우 Smart UV Project를 선택하여 Face간 거리를 자동으로 띄울 수도 있습니다.
아래의 UV 맵처럼 적당히 배치를 완료합니다.
상단 메뉴에서 셰이딩(Shading)을 선택하여 셰이딩 화면으로 접근합니다.
하단의 텍스쳐 정보가 있는 노드 편집 화면에서 도형에 적용된 재질(material)을 선택합니다. 노드 추가 단축키(shift + a)를 눌러 추가 화면을 띄운 뒤, 이미지 텍스쳐(Image Texture)노드를 추가합니다.
이미지 텍스쳐 노드에서 그림 아이콘을 클릭하여 위에서 만들어둔 UV 맵을 선택합니다. 이 때 모든 텍스쳐에 UV 맵을 추가해야 합니다. 노드를 추가만 해놓고 아직 연결은 하지 않습니다. 빈 이미지가 렌더에 반영되면 안되기 때문입니다. 하지만 이 작업을 미리 해놓지 않으면, 굽기 작업시 렌더할 대상이 없어 굽기 작업을 실행할 수 없습니다. 모순적이기 때문에 다소 혼동되는 부분입니다.
이제 렌더 → 굽기(Bake) 메뉴에서 굽기를 클릭합니다.
이 때 어떤 것을 구울지 선택하고, 불필요한 것은 옵션에서 제외해야합니다. 렌더만큼 시간이 오래 걸리는 작업이므로 필요에 따라 직접광, 간접광, 반사광 등 옵션을 적절히 선택해야 합니다.
굽기가 완료되면 앞에서 보여드렸던 UV 맵처럼 UV 맵에 그림자와 색상이 렌더됩니다. 아까 만들어둔 UV Map으로 돌아가서 메뉴를 열어보면 파일에 패키징하기(Pack) 옵션이 생겼을 것입니다. 이 메뉴를 클릭하여 모델에 이미지 텍스쳐를 패키징합니다.
이제 작업이 완료되었습니다. 파일로 내보내기 전에 노드 화면에서 UV 맵의 컬러 출력을 재질의 컬러 입력에 연결하여 bake 된 결과물을 셰이더 미리보기 화면에서 확인합니다. 제대로 구워졌다면 그림자 실시간 렌더 옵션을 꺼놓은 상태에서도 렌더된 그림자를 확인할 수 있습니다.
이제 파일을 저장하고 내보내기 메뉴에서 GLTF 또는 GLB로 내보내기합니다.
웹 페이지에 있는 webGL 뷰어에서 모델을 불러와서 확인해 봅니다. 보통 구글에 GLTF viewer 또는 GLB viewer로 검색하면 찾을 수 있습니다.
여러가지를 들여다본 것 같지만 아직도 갈길이 멉니다. 1부는 3D 웹앱을 어떻게 구성해야할지 고려해볼 수 있는 대략적인 방향들을 열거해보고, 약간의 팁으로 마무리했습니다. 분량이 많아 전부 담지 못한 내용들이 아직도 많습니다.
기술과 개발 관련된 내용은 2부에서 별도로 정리하도록 하겠습니다.
'레벨업의 테크노트' 카테고리의 다른 글
| [프론트엔드]Image Lazy Load 디렉티브 구현 & 사용법 (0) | 2022.04.29 |
|---|---|
| [유저리서치3] 고객을 만나고 인터뷰 하기 (0) | 2022.04.22 |
| [프론트엔드] React 뒤로가기 시 상태값 & 스크롤 위치 유지 (0) | 2022.04.05 |
| [유저리서치2] 본격적인 계획 세우기 (0) | 2022.03.31 |
| [유저리서치1] 어떻게 시작해야 할까? (0) | 2022.03.31 |
댓글