입사 1개월차 주니어 개발자도, 업계 경력 10년의 시니어 디자이너도 모두 성장에 대한 욕심을 가지고 있습니다. 특히 트렌드가 빠르게 변하고, 새로운 기술이 쏟아지는 업계에 있다면 성장은 선택이 아닌 필수입니다.
에이치나인에서는 실 별로 스터디를 통해 성장을 지원합니다.
최근 인터랙션실과 개발실의 PUB팀이 콜라보 프로젝트를 통해 함께 스터디를 진행하였는데요. 이렇게 두 개의 실이 함께 스터디를 진행했던 것은 처음이었어요. 서로 업무의 분야도, 업계의 경력도 모두 달랐던 에이치나이너들이 하나의 프로젝트를 통해 성장할 수 있었던 이야기를 소개합니다!
디바이스 스펙이 비약적으로 성장하며 실시간 렌더링의 품질이 매우 높은 수준에 와있고, 이로 인해 웹에서 3D를 적극적으로 사용하는 사례 역시 늘어나고 있는데요.
에이치나인의 인터랙션실과 개발실의 PUB팀은 이러한 웹 3D 기술 구현을 위해 함께 스터디를 진행하였습니다. 단순히 기술을 스터디하는 목적뿐만 아니라, 프로젝트 진행시 실 간 시너지를 높여 더 긴밀한 협업을 할 수 있길 기대하며 시작되었어요.
인터랙션실에서 모델링, 텍스쳐, 애니메이션 등 3D 리소스를 제작 후 웹 상에서 쓸 수 있는 형태로 변환해서 PUB 팀에 전달하면, PUB팀에서는 3D 리소스를 웹브라우저 상의 three.js 자바스크립트 3D 라이브러리를 통해 로드/동작 하게끔 구현하였습니다.
"우리가 처음 기획한 비주얼 그대로 타겟 플랫폼에 올라갈 수 있는지 테스트 해보자"
늘 그렇듯 아주 작게 시작되었습니다.
그리고 언제나 그랬듯 점점 일은 커지기 시작했어요(!)
처음 기획은 회사 홈페이지에 AR이나 VR 같은 3D 콘텐츠를 실제로 얹어 인터랙션 구현이 가능할지부터 시작되었습니다. 그래서 심플하게 실제 회사의 모습을 3D로 구현해 모델링을 진행하려 하였는데요.
회사 내의 책상과 컴퓨터 등을 제작을 하며 뭔가 더 재밌는 형태로 구현하고자 하는 욕심이 생겼습니다. 그래서 나온 아이디어는 각 실을 메타포의 형태로 구현하는 것이었습니다.
개발실에서는 기획한 서비스가 의도한 대로 작동할 수 있도록 시스템을 구축합니다.
다양한 개발 언어를 사용하지만, 공통적으로는 키보드를 타이핑하여 코드를 만든다는 점과 개발자들이 개인 키보드를 따로 구매할 만큼 키보드에 애착이 많다는 것을 고려하여 키보드를 메인 오브젝트로 선정하였습니다.
인터랙션실에서는 서비스와 사용자의 적극적인 상호작용을 만들어냅니다.
웹상에서 서비스와 사용자가 상호작용을 할 때 가장 많이 사용되는 것은 사람의 '손'입니다. 마우스 클릭이나 드래그 등을 통해 사용자의 적극적 의지를 확인할 수 있는 수단이기에 손을 메인 오브젝트로 정했습니다.
UX실은 다양한 사용자 경험을 분석하고, 이를 바탕으로 서비스의 큰 틀을 설계합니다. 스케치부터 PPT, 제플린, 슬랙 등 다양한 업무용 툴을 사용해 서비스를 정의하고, 와이어 프레임을 그려 화면을 기획하는 업무에서 착안해 크고 작은 박스들과 UX의 X를 담은 사각형의 메인 오브젝트로 만들었습니다.
전략기획실은 프로젝트의 방향성을 설정하고, 이끌어나가는 업무를 합니다.
이에 맞는 메타포로 '나침반'을 설정하여, 메인 오브젝트로 활용하였습니다. 또한 사람들과 긴밀한 커뮤니케이션을 진행하고, 업무를 분석하는 것을 말풍선과 그래프로 표현하였습니다.
비주얼실은 구상된 기획을 시각화하여, 세련된 디자인으로 뽑아내는 작업을 합니다.
이런 비주얼실에서 가장 많이 쓰이는 도구이자, 대표할 수 있는 것으로 '펜툴'을 선정하고, 함께 그려진 알파벳의 S나 A 역시 펜툴을 사용한 듯한 요소로 활용하였습니다. 또한 이미지를 플랫폼에 맞게 재단하고, 다양한 버전을 만들어내는 것을 표현하기 위해 타공판과 같은 요소도 추가되었습니다.
.gif)
각 실별 메인 오브젝트 (왼쪽 상단부터 차례대로 개발실-인터랙션실-UX실-전략기획실-비주얼실)
각 실을 상징하는 메타포에 대한 고민부터 3D 모델링, 플랫폼 별 테스트와 최적화 등 여러 작업과 시도 끝에 에이치나인의 3D 웹이 완성되었습니다.
첫 기획 의도가 회사 홈페이지에 3D 콘텐츠를 얹을 수 있는지 테스트를 하는 것이었던 만큼, 추후에는 이를 바탕으로 회사 약도를 3D 약도로 대신해 가까운 역부터 회사까지의 오는 길을 보여주는 등 재밌게 활용할 수 있길 기대합니다.
<aside> 🐶 웹에서 자유롭게 돌아가는 3D를 PUB팀과 함께 하게 되어 걱정 반, 신남 반으로 임했습니다.
첫 인하우스 콜라보 프로젝트다 보니 제약없이 자유로운 아이디어를 바탕으로 컨셉에 많은 힘을 주었습니다. 많은 자료를 찾고 이견 조율 하는 것 까진 좋았으나 일정 대비 작업 욕심으로 인해 제작 스케일이 너무 커져 버려 마무리가 조금 아쉬웠어요
제작 과정 중 저희 팀 간은 물론 PUB팀과도 커뮤니케이션을 좀 더 활발히 하여 하나의 목표 지점을 향해 맞춰 나갔어야 했는데 그러지 못했던 것 같아 이것도 아쉽네요.
이번 스터디를 계기로 새로운 파일 포맷인 gltf 에 대해 알게 되었고 거기에 대응하기 위한 다양한 방법들을 시도해 볼 수 있었습니다. 텍스쳐와 애니메이션등을 무난하게 컨버팅 하게 돼 3D에서 기본적인 퀄리티를 낸다면 어느 정도는 웹 상에도 좋은 결과물을 올릴 수 있을 거라는 자신감도 생기게 되어 만족스러워요!
</aside>
<aside> 🦁 레퍼런스에서 보기만했던 webgl을 직접 만져보게될 줄은 상상도 못했어요. 처음 시작할 땐 '내가 할 수 있을까? 어떻게 구현해야하지?'라는 막막함이 정말 컸는데 어느새 제가 그걸 하고 있었어요!
수많은 에러를 마주하다보면 지금 나랑 해보자는거지? 라는 생각에 승부욕이 불타오르기도 했어요. 결국 에러를 해결하면 그게 그렇게 통쾌할 수가 없었습니다 :-) 어려웠지만 처음 도전해본 webgl은 흥미롭고 매력적이었어요. 기회가 되면 다음에 또 도전해보고 싶어요.
</aside>
<aside> 🐰 이번 스터디를 통해 3D 리소스를 다양한 형태로 출력하는 방법에 대해 알게 되었어요. 제가 만든 3D를 렌더 과정을 거치지 않고도 웹에서 바로 볼 수 있어서 재미있는 경험이었습니다.
반면에 처음해보는 형태의 프로젝트라 어디까지 구현 가능한지에 대한 테스트 느낌이 강했던게 아쉬움이 남습니다. 다음 웹 3D 스터디가 더 기대되고 더 잘해보고 싶어요!
</aside>
<aside> 🐷 평소에 해오던 업무와는 다르게 JS만으로 화면을 구현해내야 했어요. 그래서 익숙하지 않았고 난이도가 높아 작업하는 내내 끊임없는 테스트를 받는 기분이 들었습니다.
그래도 하나씩 이해하면서 알아가는 재미가 있었어요! 이번에 Webgl을 살짝 맛보았으니 다음엔 좀 더 파헤쳐 볼 기회가 있었으면 좋겠어요.
</aside>
<aside> 🐻 실제로 이 스터디를 시작한 이후로 세가지 정도의 웹+3D 형태의 프로젝트를 제안하게 됐어요. 같이 스터디 하던 사람들도 이게 무슨 약속이나 한듯이 그런 프로젝트들이 보이기 시작하니 신기하면서도, 의미있는 스터디었다는 생각이 들었습니다.
</aside>
에이치나인의 9가지 원칙 중 하나는 Growth as a professinonal입니다.
에이치나이너는 맡은 미션에 대한 퀄리티와 일정을 스스로 컨트롤 할 수 있으며, 성장하기 위해 꾸준히 노력해야합니다. 또한 전문 분야에서 멘토로서 팀원을 성장시키는데 기여하고, 멘티는 학습자로서의 적극적 학습 자세를 가져야합니다. 궁극적으로는 한 분야의 전문가가 되어, 학습된 내용과 정보를 공유하고 전파할 의무를 가지고 있습니다.
이러한 코어 원칙아래, 각 실 별로 개개인의 성장을 지원하고 있습니다.
<aside> 🧞♂️ 인터랙션실
새로운 기술이 많이 나오고, 트렌드가 빠르게 변화하는 만큼, 인터랙션실에서는 스터디를 꾸준히 진행해왔습니다. 진행하고 있는 프로젝트나 최근에 관심가는 새로운 기술 등 평소 실원들끼리 자주 대화를 하며 세미나 주제를 선정합니다.
지금까지 AR 게임 만들기, C# 수학과 Pinch Interaction, Layered Approach 애니메이션 기법, Vray render elements 등 다양한 내용으로 스터디를 진행하였고, 모든 내용은 문서화하여 정리되고 있습니다.
</aside>
<aside> 👨💼 UX실
경력이 없는 신입이 입사할 경우, 본격적으로 실무에 투입되는 것이 아니라 최신 UI 컴포넌트 조사 및 Apple, Google 등 여러 디자인 시스템 리서치를 하며 스스로 학습할 기회를 먼저 제공합니다. 또한 멘토-멘티 시스템을 통해 부족한 부분은 시니어가 알려주기도 합니다.
이를 토대로 2개월이 지난 후, 수습 발표를 진행하는데요. 이 때 시니어가 리서치한 내용과 이를 어떻게 정리할지 함께 살펴보고 조언을 주며 업무에 필요한 지식과 발표자료 만드는 법을 자연스럽게 습득할 수 있도록 배울 수 있습니다.
</aside>
<aside> 👨💻 개발실
신규 직원이 실무에 투입될 경우, 빠르게 적응할 수 있도록 지식 관련 세미나를 진행합니다. 최근에 입사하신 분은 react 세미나를 진행했습니다.
또한 각 팀별로 필요한 신규 기술이 있다면, 업무 시간 내 스터디 시간을 따로 만들어 다같이 학습할 수 있도록 하고 있습니다.
PUB팀에서는 최근 webgl 스터디를 진행하였고, 프론트엔드팀에서는 자바 스크립트 심화 스터디를 진행하였습니다.
</aside>