영감의 원천이 되는 코딩
열여덟 번째 人(in)spiration | DX팀 권민지 디렉터
Plus 人(in)spiration – 플러스엑스의 '일' 그리고 '사람'이야기
더하기를 기울여 곱하기로 변화하듯 플러스엑스에는 다양한 사람이 모여 함께 일합니다.
변화하는 시대에 다양한 경험을 새롭게 조합해 나가며 늘 최선의 결과를 만들어 내는 플러스엑스.
그 사람들의 이야기를 만나보세요.
3D 디자이너와 개발자의 상상을 구현한 코딩
DX Tech Group 권민지 디렉터
플러스엑스 디지털 쇼룸을 공개한 이후, 플러스엑스 DX팀은 무신사, 디폰데 등 다양한 프로젝트를 통해 그들의 크리에이티브를 보여줬습니다. 최적화는 물론, 비주얼까지 놓치지 않는 DX팀의 실력은 그동안 꾸준히 진행하고 있었던 R&D 프로젝트 덕분입니다.
R&D 프로젝트에서는 DX팀이 원하는 장면을 보다 나은 환경에서 구현할 수 있도록 자체 개발 코드를 구성하고 성능 테스트를 합니다. 여러 번의 테스트를 거쳐 도출된 결과물은 DX팀의 아이디어를 활짝 펼칠 수 있는 계기가 되어 또 다른 크리에이티브로 연결됩니다. DX팀은 올 상반기, 그동안 진행한 R&D 프로젝트를 공개할 플랫폼 론칭을 앞두고 있습니다. 이에 DX팀의 권민지 디렉터에게 DX팀의 작업 과정과 R&D 프로젝트에 관해 물어봤습니다.
18번째 人(in)spiration의 주인공은 권민지 디렉터님입니다!─ 최적화와 시각화, 두 마리 토끼를 잡다
Q. 얼마 전, DX팀의 작업 과정을 빠르게 보여주는 쇼릴을 공개했어요. 3D 모델링과 개발이 병행되더라고요.
프로젝트마다 비율이 조금씩 다르지만, 3D 모델링으로 공간을 구성하고 개발로 체험 환경을 구현해요. 작업 과정도 프로젝트마다 달라요. 플러스엑스 쇼룸은 메타버스에 대한 관심으로 시작한 첫 3D 프로젝트라 구현을 제일 중점으로 생각하고 진행했어요. 개발 프로토타입을 완료하고 쇼룸의 디자인 콘셉트를 정했죠. 이어서 진행한 무신사 쇼룸은 '무한대'라는 키워드를 바탕으로 먼저 3D 공간을 테스트한 뒤, 디자인 콘셉트를 정하고 개발 프로토타입을 작업했어요.
Q. 3D 모델링과 개발은 각각 어떤 부분을 제작하나요?
디자인 무드와 모델링은 3D 파트에서, 모델링을 활용한 카메라 움직임과 효과는 개발로 구현해요. 하지만 파티클이나 박스, 스피어와 같은 추상적인 오브젝트는 대부분 개발로 구현해요. 3D로만 작업하면 용량이 무거워서 최적화가 까다롭거든요. 어떤 환경에서도 부드럽게 구동할 수 있도록 3D 모델링과 개발을 적절하게 섞어서 결과물을 만들고 있어요.
Q. 그렇다면 3D 디자이너와 개발자 간의 팀워크가 중요하겠어요.
맞아요. 3D 디자이너와 개발자는 각자의 역할과 전문성이 다르기 때문에 생각하는 방향이 다를 수 있어요. 그래서 먼저 프로젝트의 목표를 정하고 각자의 방식으로 콘셉트와 프로토타입을 제작해요. 이 과정 동안 최고의 결과물을 위한 방법을 모색하기 위해 지속적으로 소통하죠. 한편으론 프로그램 간의 합도 중요해요. 3D 제작 프로그램으로 주로 시네마 4D를 사용하지만, 개발 환경 최적화를 위해 블렌더(Blender) 프로그램을 병행하면서 더 나은 성능을 내는 방법을 찾기도 하죠. 이렇게 작업할 수 있는 이유는 좋은 팀워크가 바탕되기 때문이라고 생각해요.
플러스엑스 디지털 쇼룸 제작 과정. DX팀이 처음 선보인 디지털 쇼룸이었습니다.Q. 3D로 공간을 구현할 때, 제일 먼저 고려하는 점은요?
브랜드의 콘셉트와 프로젝트 성격을 파악한 후, 플러스엑스만의 아이덴티티를 담아 새로운 경험을 제공하느냐를 첫 번째로 생각해요. 그리고 누구나 쉽고 편하게 경험해야 한다고 생각하기 때문에 사용성과 인터페이스 구성에 공을 많이 들여요. UX/UI 뿐만 아니라 모션, 인터랙션의 디테일과 완성도에도 많은 시간을 할애하고요. 사용자가 어떤 환경에서든 동일한 경험을 할 수 있도록 구축하는 것이 기본이라고 생각해서 트랙패드, 마우스, 키보드 등 각각 인터페이스를 사용했을 때를 테스트하며 평균값을 맞춰요.
무신사 쇼룸은 무한대라는 콘셉트 아래, 공간 내의 동선을 정밀하게 계산해서 개발로 구현했습니다.Q. 무신사 쇼룸을 보면 3D 공간에서는 움직임도 중요하다는 생각이 들어요.
무신사 쇼룸은 3D 파트에서 카메라 동선을 미리 만들고 개발로 조정해서 더 부드러운 움직임을 구현했어요. 이 방법은 프로젝트를 완료한 후에 수정하기 어렵다는 단점이 있지만, 카메라 위치와 회전을 세밀하고 정확하게 만들 수 있다는 장점이 있어요. 그래서 무신사 쇼룸처럼 브랜드를 강조하는 이벤트 성격의 프로젝트에 적합하다고 판단해서 적용했어요. 이어 디폰데 쇼룸에도 적용하여 디테일하게 만들되, 작업 시간은 단축하는 효과를 얻었어요.
─ 디폰데의 콘셉트를 시각화한 디지털 쇼룸
Q. 최근 공개한 디폰데 쇼룸은 앞선 두 프로젝트와 분위기가 달랐어요.
플러스엑스와 무신사 쇼룸은 체험이 중심이었다면 디폰데 쇼룸은 브랜드 무드를 시각적으로 전달하는 것이 핵심이었어요. 그래서 안개와 구름같이 신비로움을 자아내는 요소를 넣고, 디폰데의 시그니처 패키지 용기에서 착안한 돔 형태의 건축물을 지었죠. 건물 내부에는 내면의 깊은 아름다움이라는 디폰데의 콘셉트와 리커버, 지속성과 같은 효능을 재질이나 색감, 라인 아트워크로 표현했어요.
Q. 디폰데 쇼룸도 3D 모델링과 개발을 병행한 결과죠?
표현하는 공간이 넓어서 다른 프로젝트보다 3D 모델링 비중이 컸지만, 디폰데 역시 효율성과 최적화를 위해 3D 모델링과 개발로 구현할 부분을 나누고 용량을 줄일 방법을 찾아서 작업했어요. 예를 들어 나무와 같이 세부 요소가 많은 오브제는 개발로 구현하고, 돔 형태 건축물은 3D 모델링으로 1/2만 제작해서 복사하는 방법으로 제작했죠.
Q. 디폰데 인스타그램에 업로드한 홍보 영상도 DX팀에서 제작했다고 들었어요.
3D로 영상을 제작할 때, 시네마4D로 모델링을 만든 후에 장면 속 움직임을 하나, 하나 만들어요. DX팀에서 제작한 영상은 화장품의 성분 중 하나인 목이버섯을 보여주는 영상이었는데 버섯 자체가 일반적인 형태가 아니다 보니 자연스러운 움직임을 구현하는 것이 어려워 긴 시간을 소요했어요. 마침 프로그램에 내장된 패브릭 엔진(Fabric Engine)의 '크로스 시뮬레이션(Cloth Simulation)' 기능이 업데이트되었길래 이를 이용해서 목이버섯이 피어나는 움직임을 자연스럽고 빠르게 구현할 수 있었어요. 이처럼 3D로 영상을 제작하는 건 시간이 오래 소요되지만, 첫 장면부터 마지막 장면까지 연출자의 의도대로 만들 수 있고, 화면을 구성하는 요소들 – 빛, 색, 재질 등을 정교하게 조절할 수 있다는 장점이 있어요.
3D로 제작한 디폰데 홍보 영상. 덕분에 버섯 잎의 움직임을 원하는 대로 연출할 수 있었습니다.Q. 디폰데 쇼룸에서는 페이지를 전환할 때마다 라인 아트워크가 등장해요. 이에는 어떤 의미가 있나요?
라인 아트워크는 디폰데의 특징을 추상적으로 표현한 아트워크예요. 화면 중앙에 등장하여 페이지의 전체 분위기를 전달하는 주요 요소죠. 페이지를 이동하면 라인 아트워크의 형태가 달라져요. 각 페이지마다 형태가 달라져도 일관된 브랜드 분위기가 전달될 수 있게 라인의 움직임을 개발로 구현했어요. 3D로 만들면 아트워크의 변화가 자연스럽게 이어지지 않고, 디테일을 위해 해상도를 높일수록 용량이 늘어나 성능 이슈도 발생하거든요.
Q. 디폰데 쇼룸에서 제일 신경 쓴 부분은 무엇인가요?
디폰데의 브랜드 콘셉트를 시각적으로 전달하는 전반적인 공간 구성은 물론, 디테일에 굉장히 신경 썼어요. 디테일할수록 완성도가 높아진다고 생각하거든요. 하늘 배경과 라인 아트워크가 수면에 반사되는 모습을 개발로 구현했는데, 수면에 반사되는 모습은 물론이고 물이 잔잔하게 흐르는 느낌까지 놓치지 않으려 심혈을 기울었어요.
두 번째로 신경 쓴 부분은 메뉴 간 부드러운 화면 전환이었어요. 사용자가 메뉴를 선택하면 원하는 방향으로 카메라가 이동하고, 메뉴별 라인 아트워크의 인/아웃을 자연스럽게 연결하고자 했어요. 이 부분을 개발로 작업한 덕분에 해상도에 영향 주지 않으면서 움직임을 가볍게 구현할 수 있었어요. 또, 렌더링 없이 코드 수정만으로 테스트가 가능해서 작업 시간을 단축할 수 있었고요.
디자이너와 개발자가 함께 아주 작은 요소까지 놓치지 않을 때, 비로소 완성도 높은 결과물이 탄생합니다.Q. 디폰데 쇼룸은 기존 프로젝트와 다른 부분이 많아서 작업 시 어려운 점이 많았을 것 같아요.
제일 힘들었던 건 자료 부족이었어요. 3D 모델링을 이용해서 개발할 때, 어떻게 혹은 어디까지 성능을 높일 수 있는지에 관한 정보가 많지 않았거든요. 결합 파일을 만드는 방법은 다양한데 정보가 부족하니까 새로운 걸 시도할 때마다 테스트해서 부족하거나 잘못된 부분을 찾아야 했죠. 안개와 구름같이 고밀도 파티클 작업은 렌더링 시간이 길어서 힘들었어요.
─ DX팀만의 크리에이티브, R&D 프로젝트
R&D project #01 - Pick up
인형 뽑기 콘셉트의 체험형 프로젝트로, 집게의 동작을 실제 게임과 비슷하게 구현했습니다. 튜토리얼이나 게임 진행 과정 등 UX/UI로도 재미 요소를 주고자 했습니다.
Q. 자체적으로 R&D 프로젝트를 진행하고 있다고 들었어요. 어떤 내용인지 설명해 줄 수 있나요?
플러스엑스의 업무는 UX/UI 위주로 진행되다 보니 그동안 DX팀의 크리에이티브를 보여줄 기회가 많지 않았어요. 그래서 프로젝트를 진행하면서 개발한 프로토타입과 R&D로 제작한 프로젝트를 효과적으로 전시하고 알리기 위한 플랫폼을 준비하고 있어요. 이 플랫폼을 통해 컨설팅 프로젝트 외 플러스엑스와 DX팀의 다채로운 크리에이티브를 자주 선보일 수 있을 거라 기대하고 있어요.
R&D project #02 - Face morphing & Point morphing
파티클로 구성된 3D 모델의 파티클이 분리되었다가 다른 형태의 3D 모델로 자연스럽게 재조합되는 모핑 프로토타입입니다.
Q. R&D 프로젝트에 참여하는 팀원이 따로 있는 건가요?
모든 팀원이 참여하고 있어요. DX팀은 개발자와 디자이너로 구성된, 회사 내에서 가장 다양한 롤을 가진 팀이에요. 각자 역할은 다르지만, 그만큼 다양한 시도를 할 수 있는 팀이기도 하죠. 이런 장점을 바탕으로 시너지를 낼 수 있는 프로젝트를 고민하며 R&D를 진행하고 있어요. DX팀은 함께 발전하려면 서로 의견을 편하게 이야기하고 도와줘야 한다고 생각해서 협업 중 막히는 부분이 생기면 편하게 질문하고 설명해 주는 문화가 자리 잡혀 있어요. 이러한 팀 문화가 DX팀의 강점이라고 할 수 있죠.
R&D project #03 - City
가상 도시에서 사용자가 자유롭게 이동할 수 있는 프로젝트입니다. 도시의 건물과 길은 3D 모델링으로 제작했고, 도시의 빛과 명암은 개발로 구현했습니다.
Q. R&D 프로젝트만을 보여주는 플랫폼을 곧 오픈할 예정이라고 들었어요.
플러스엑스의 DX팀이 구체적으로 무엇을 하는 팀인지, 어디까지 할 수 있는 팀인지 아직 외부에 알려지지 않았다고 생각해요. 단지 공개된 프로젝트를 통해서 짐작만 할 뿐이죠. 그래서 그동안 꾸준히 진행했던 R&D 프로젝트를 공개함으로써 플러스엑스만의 크리에이티브와 점점 확장하고 있는 영역을 보여주고자 해요. 본 플랫폼은 올 상반기 오픈을 목표로 기획부터 디자인, 제작까지 오롯이 DX팀 내부에서 열심히 준비하고 있어요. 오픈 후에도 주기적으로 R&D 프로젝트를 업데이트할 예정이에요.
R&D project #04 - Map
DX팀에서 개발한 알고리즘을 활용, 미로에서 탈출할 수 있는 가장 빠른 길을 계산해서 알려주는 프로젝트입니다. 어떻게 길을 막아도 재빠르게 계산해서 제일 짧은 길을 찾아줍니다. 간단한 미로 게임을 만들 수 있는 코드로, 이를 활용하면 사용자에게 즐거운 경험을 제공할 수 있습니다.
Q. R&D 플랫폼에서 보여줄 다양한 프로젝트가 기대되네요. 그렇다면 R&D 플랫폼의 궁극적인 목표는 무엇인가요?
지금까지 DX팀이 작업한 쇼룸들이 플러스엑스의 숨어있던 크리에이티브를 보여주고 가능성을 확인한 기회였다면, R&D 플랫폼은 그동안 플러스엑스가 축적한 새롭고 다양한 시도들과 크리에이티브한 작업을 선보이는 또 다른 쇼룸이라고 할 수 있어요. 그렇기에 R&D 플랫폼은 플러스엑스가 그동안 해보지 못했던 영역을 시도할 수 있는 발판이 될 거예요.
Plus 人(in)nspiration 은
앞으로도 계속 플러스엑스 브런치를 통해 발행됩니다.
