하이퍼클라우드가 말하는 CMS 개발의 A to Z
(feat. 하이퍼솔루션)
시작하며
CMS란 Content Management System의 약자로 콘텐츠 관리 시스템을 뜻하는 용어인데요, 쉽게 말하자면 블로그에 글을 쓸 때 사용하는 블로그 에디터처럼 콘텐츠 내용을 쉽게 작성하거나 수정 · 배포할 수 있는 시스템을 의미합니다. 콘텐츠를 작성하고 관리하는 데에 있어 비용과 시간을 모두 절약시켜주는 아주 중요한 시스템이죠.
저희 하이퍼클라우드도 현재 AR/XR 마케팅 맞춤형 CMS인 ‘하이퍼솔루션’을 개발 중에 있는데요, 오늘은 그 내밀한 이야기를 듣기 위해 네 분의 멤버를 모셨습니다! 기획부터 개발까지 모든 과정을 낱낱이 밝혀주신다고 하는데요, 멤버들에게 직접 듣는 ‘하이퍼솔루션’은 과연 어떤 모습일까요? 함께 만나보시죠!
‘하이퍼솔루션’의 청사진, 기획
하이퍼클라우드의 AR/XR 전용 CMS인 ‘하이퍼솔루션’에 대해 알아보기 위해 가장 먼저 기획자인 알렉스(Alex)를 만나 보았습니다. 알렉스는 ‘하이퍼솔루션’의 기획을 도맡아 진행해 주셨는데요, 시스템 전반에 대해 오래 고심하셨던 만큼 ‘하이퍼솔루션’의 큰 그림을 함께 그려볼 수 있었습니다.
하이퍼클라우드 PO 알렉스 (Alex)Q: 안녕하세요, 알렉스! 간단한 소개 부탁드릴게요.
알렉스: 안녕하세요. 새로운 기술에 관심이 많은 앱 서비스 기획자이자 협업의 Facilitator가 되고 싶은 PO, 알렉스입니다.
Q: 알렉스께서는 ‘하이퍼솔루션’의 기획을 맡아주셨는데요, ‘하이퍼솔루션’에 대해 살짝 설명해 주실 수 있으실까요?
알렉스: ‘하이퍼솔루션’은 향후 더 멋진 이름으로 리뉴얼 될 수 있겠지만, AR/XR 서비스 콘텐츠 또는 이를 통해 진행되는 마케팅 캠페인을 관리할 수 있는 AR/XR CMS입니다. 하이퍼클라우드의 핵심 프로덕트로 개발되고 있습니다.
하이퍼클라우드 PO 알렉스 (Alex)Q: 하이퍼솔루션을 개발하게 된 계기가 있을까요?
알렉스: 우리가 일상에서 접할 수 있는 AR 콘텐츠는 앞으로 시간이 갈수록 더 다양해지고 풍부해질 것으로 예상하고 있는데요. 아직은 AR 기반의 콘텐츠가 빛을 보기까지 개발과 구현에 투입되는 시간과 비용이 상당한 편입니다.
그 부분을 해결해 줄 수 있는 솔루션으로서 콘텐츠 관리에 핵심이 되는 AR/XR 전용 CMS가 필요한 시기였고, AR 분야에 경험이 있지 않은 업체들도 원하는 AR 콘텐츠를 시장에 쉽게 내놓을 수 있도록 진입장벽을 낮추는 데 기여할 수 있다면 향후 더 많은 가능성을 열어 줄 수 있겠다고 생각했기 때문입니다.
‘하이퍼솔루션’ 프로젝트를 위한 업무 타임라인Q: 하이퍼솔루션의 핵심 기능이나 장점이 있다면 무엇일까요?
알렉스: 모바일에서 동작하는 AR/XR 서비스를 개발하려면 예상보다 많은 개발 시간과 비용이 들어가게 되는데요. 하이퍼솔루션은 엔드유저가 경험하고 싶어 하는 XR 콘텐츠들을 미리 구현해 두었기 때문에 각 기능별로 커스텀이 가능하도록 설계되고 있다는 것이 장점입니다.
예를 들어 AR 포털 기능이 있습니다. AR 포털이란 사용자가 특정 장소에 도착했을 때 스마트폰이 이를 인식하고 VR 공간을 볼 수 있는 포털을 열어 XR 경험을 제공하는 기능입니다. 하이퍼솔루션의 경우 이 VR 가상현실 공간 내부를 운영자가 360도 영상을 직접 업로드하여 꾸밀 수 있도록 설계되어 있습니다.
Q:기획 단계에서 가장 고민하셨던 부분은 무엇이었나요?
알렉스: CMS는 웹사이트를 기반으로 하기에 상대적으로 어렵지 않았지만, AR 콘텐츠는 일반적으로 2D 화면과는 달리 카메라 뷰를 배경으로 콘텐츠가 보여지는 입체적인 환경을 고려해야 하기 때문에 사용자의 위치나 주변 반경 정보 등 환경적인 요소들을 고려해야 하는데요. 실제로 스마트폰에서 XR 경험을 시작해서 마치기까지 유저가 어떤 정보를 얻기를 원하는지, 그 기대를 잘 충족시키고 있는지가 설계할 때 가장 고민했던 포인트입니다.
그리고 앱 화면에서는 XR 콘텐츠가 주(Main)가 되어야 하기에 UI 요소들이 상당히 압축되어야 하는데, 이를 효과적으로 표현할 수 있는 방법에 대한 고민이 가장 컸습니다.
‘하이퍼솔루션’의 테스트 시나리오Q: 어떤 것을 필요로 하는 기업이 어떤 상황에서 하이퍼솔루션을 사용할 수 있을까요?
알렉스: ‘하이퍼솔루션’은 스마트폰이나 AR글래스를 통해 우리가 경험하고 싶었던 콘텐츠를 누구나 편하게 만들 수 있도록 설계되고 있기 때문에 신속하게 AR 서비스에 진출하고 싶어 하는 기업들이 관심을 가지면 좋을 것 같습니다.
AR 콘텐츠 기반으로 진행하고 싶은 마케팅 캠페인이 있거나 고객에게 XR 기술을 활용한 특별한 경험을 제공하고 싶을 때, 상대적으로 적은 개발 비용과 시간으로 기존에 서비스되고 있는 앱에 콘텐츠를 통합하여 탑재할 수 있다는 기능이 차별점이 될 것입니다.
Q: 하이퍼솔루션은 앞으로 어떻게 나아갈 예정인가요?
알렉스: 앞으로도 갈 길은 멀다고 생각하지만, 현재 ‘하이퍼솔루션’은 위치 기반 서비스를 바탕으로 하는 주요 AR 콘텐츠들을 설정하고 제어할 수 있게 되어 있습니다.
앞으로는 사용자의 위치를 기반으로 XR 경험을 할 수 있는 콘텐츠를 계속해서 보강할 예정이고, 이후에는 인식 기반의 XR 콘텐츠도 추가할 계획입니다. 또 추후 커스텀 영역이나 앱 호환성까지 크게 향상시키는 것이 저희의 목표입니다.
‘하이퍼솔루션’의 든든한 기둥, 백엔드
이렇게 전체 그림을 살펴보았으니 디테일한 개발 과정을 살펴보지 않을 수 없겠죠. 먼저 시스템의 기둥과도 같은 백엔드 파트를 만나보겠습니다! 백엔드 파트는 서버 및 데이터 관리를 전담하고 있는데요, 백엔드 리드이신 준(Jun)과 개발자 올리(Ollie)를 모시고 인터뷰를 진행했습니다.
Q: 안녕하세요! 두 분 간단한 소개 부탁드릴게요.
준: 안녕하세요, 서비스개발팀에서 백엔드 파트 리드를 맡고 있는 Jun이라고 합니다. 하이퍼솔루션 프로젝트에서 CMS와 Unity에서 호출할 API 개발을 전반적으로 설계하고 업무를 분배하는 일을 맡아서 하고 있습니다.
올리: 안녕하세요. 하이퍼클라우드에서 백엔드 개발을 맡고 있는 Ollie라고 합니다.
Q: 백엔드 파트는 ‘하이퍼솔루션’의 서버를 책임져 주셨는데요, 서버를 설계하고 구축하는 과정에서 특별히 고려하셨던 부분이 있었나요?
준: ‘하이퍼솔루션’은 Saas로서 다양한 업체가 사용할 수 있고, 업체마다 커스터마이징이 이루어질 수 있는 환경이라는 점을 가장 많이 고려하며 서버를 설계했습니다.
업체에 맞게 커스터마이징을 하면서도, ‘하이퍼솔루션’에서 개발하고 시도하고자 하는 방향성에 영향을 주지 않도록 유지 보수에 시간을 많이 쓰지 않도록 하는 것이 목표였습니다.
백엔드개발자 준(Jun)Q: 제품을 개발하면서 기획자나 프론트엔드 팀과도 많은 이야기를 나누셨을 것 같은데요, 타 팀 멤버들과는 어떻게 커뮤니케이션하셨나요?
준: 저희는 프론트 개발팀과 얘기를 많이 나눴는데요, 어떤 기능을 개발하기 전에 ‘프론트엔드와 백엔드에서 어떤 식으로 요청을 할 것이고 그때 이런 응답 값이 나와야 한다’는 내용을 먼저 정의하고 그 뒤에 요청 데이터와 응답 값에 맞춰서 개발을 진행했습니다.
솔루션 개발 초기에는 이런 방식으로 개발을 하지 않았는데, 이렇게 요청을 먼저 정의하고 개발하는 방식을 채택한 뒤로는 개발이 완료된 후에 내용이 누락되거나 의도했던 방식과 다르게 개발되는 상황을 방지하는 데 큰 도움이 되었습니다. 덕분에 개발도 더 빠르고 효율적으로 진행되었다고 생각합니다. 이런 부분이 가장 의미 있었던 커뮤니케이션이었던 것 같아요.
올리: 맞아요. 이런 방식 덕분에 개발할 때 시간적 효율을 많이 높일 수 있었습니다.
또 기획자인 알렉스와 대화할 때는 바로바로 자리에 찾아가서 문제를 해결했습니다. 기획은 솔루션을 구성하는 가장 중요한 요소이기 때문에 빈틈이 없어야 한다고 생각했습니다. 그래서 의문이 생기거나, 의견이 있으면 바로 달려가서 함께 논의하며 문제를 해결하고 있습니다.
백엔드 개발자 올리 (Ollie)마지막으로 저희 백엔드팀와 프론트엔드팀은 매일 스크럼을 진행하는데요, 여기서 서로 가지고 있는 이슈가 무엇인지, 혹은 무엇 때문에 업무가 막혀있는지 파악하고 즉각적인 피드백을 주고받으며 프로젝트를 진행하고 있습니다.
백엔드&프론트엔드 회의록Q: ‘하이퍼솔루션’의 최적화를 위해서는 어떤 일을 하셨나요?
올리: 아직 솔루션이 정식으로 출시된 상태가 아니기 때문에 최적화보다는 서비스 안정에 초점을 맞춰서 작업했습니다.
준: 맞습니다. CMS의 특성상 많은 API 호출이 발생하진 않아서 기능적인 최적화보다는 서비스의 안정성과 코드 가독성을 높이는 데 집중했습니다. 이후 유지 보수나 추가 개발 시 효율을 높이려고 노력했어요.
백엔드 파트의 개발자들이 개발하는 내용에 대해 모두 이해하고 왜 그렇게 개발을 하는지에 대해 동의할 수 있도록 개발자들끼리의 싱크를 맞추는 하는 미팅을 자주 갖기도 했습니다. 또 처음 보는 사람이 코드를 보더라도 빠르게 이해할 수 있도록 코드를 가독성 있게 작성하는 부분에도 신경을 썼습니다.
뿐만 아니라 이후에 조금 더 안정적으로 서비스를 운영할 수 있도록 테스트 코드를 조금 더 열심히 작성한 것도 시간이 지날수록 도움이 될 것이라고 생각합니다.
높아지는 테스트 진행률‘하이퍼솔루션’의 더 나은 사용자 경험을 위해, 프론트엔드
백엔드가 시스템의 기둥이라고 한다면 프론트엔드는 그 시스템의 인테리어를 맡고 있다고 표현할 수 있을 것 같은데요, 사용자가 직접 마주하는 영역인 만큼 효율적이고 편리한 UI/UX 설계가 필요하겠죠. 프론트엔드 개발자인 고(GO)를 모셔서 프론트 설계의 모든 이야기를 들어보았습니다!
프론트엔드 개발자 고(GO)Q: 고, 안녕하세요! 간단한 소개 부탁드릴게요.
고: 안녕하세요, 하이퍼클라우드 서비스개발 팀의 웹 프론트엔드 개발자 GO입니다. ‘하이퍼솔루션’을 개발하면서 가장 중요하게 생각하는 것은 ‘사용자’의 입장을 최우선으로 최고의 사용자 경험을 제공하는 것입니다.
Q: ‘하이퍼솔루션’의 프론트엔드 개발자로서 UIUX 개선을 위해 많은 고민이 있으셨을 텐데요, 어떤 부분을 가장 중요하게 생각하셨나요?
고: CMS는 디자인보다 기능이 우선시되는 경우가 많기 때문에 프론트엔드 개발자가 유저의 입장을 고려해 시스템을 조금 더 편하게 사용할 수 있도록 UI/UX를 설계하는 것이 매우 중요합니다.
그렇기 때문에 ‘하이퍼솔루션’을 개발할 때에도 엔드 유저가 기능을 사용할 때 어떤 목적과 생각으로 사용할지 고려해 보고, 이를 기획자 Alex와 협의하여 반영하였습니다.
예를 들어, AR 캠페인을 수정 및 저장하면 완료 안내 팝업이 표시되는데, 이때 ESC 키나 팝업 외부를 클릭하면 팝업이 닫히는 UX가 부자연스럽게 느껴져서 취소 버튼으로만 팝업이 닫히도록 기능을 개선하였습니다.
프론트엔드 노션 페이지Q: 고 역시도 기획자인 알렉스나 백엔드 개발팀과 계속 이야기를 나누셨을 것 같아요. 다른 멤버들과 어떤 부분을 주로 논의하셨나요?
고: 네, ‘하이퍼솔루션’을 개발하면서 협업 기회가 정말 많았습니다. 특히 백엔드 파트와는 서로 주고받는 데이터 형식과 API 개선 등에 대한 얘기를 많이 나누었습니다.
예를 들어서, 에러 컨벤션 회의를 통해 어떻게 에러를 처리할 것인지 논의했었는데요, 그 결과 백엔드 파트에서는 에러를 관리하고 프론트 파트에서는 에러 메시지 팝업창을 통해 에러 코드와 에러 메시지를 보여주기로 합의하기도 했습니다.
기획자인 알렉스와는 주로 사용자 경험을 개선하기 위한 내용들을 많이 얘기했습니다. 이렇게 계속 대화를 나누는 과정 속에서 업데이트 순서에 따른 캠페인 리스트 정렬 필터를 추가하는 등 사용자 경험을 개선할 수 있는 아이디어가 많이 나온 것 같습니다.
프론트엔드 개발자 고(GO)Q: 프론트엔드에서도 서비스 최적화를 위해 많은 노력을 해주신 걸로 알고 있는데요, 어떤 방법들을 사용하셨나요?
고: 프론트엔드 관점에서 최적화란, 웹 애플리케이션의 성능을 향상시키기 위한 과정입니다. 이를 위해서는 사용자 경험을 개선하고, 불필요한 리소스 사용을 방지하며, 로딩 속도를 빠르게 하고 작은 파일 크기를 유지하여 웹 애플리케이션의 효율성을 높여야 합니다.
하이퍼 솔루션에서는 상태 관리 라이브러리로 Redux Toolkit을 사용하고 있으며, 이를 개선하기 위해 RTK Query를 도입했습니다. RTK Query는 Redux와 완벽하게 통합되어 데이터 요청 및 관리를 간편하게 할 수 있도록 도와주며, API 응답을 자동으로 캐싱하여 불필요한 API 호출을 방지하고 성능을 향상시킬 수 있습니다.
또한, RTK Query는 TypeScript를 지원하여 타입 안정성을 보장하고, 상태를 쉽게 업데이트하고 관리할 수 있도록 도와줍니다. 더불어 API 호출을 처리하기 위한 코드를 간소화하여 코드량을 줄이고 유지보수성을 높여주며, 다양한 백엔드 API와 호환되어 높은 확장성을 제공합니다. 이에 따라, 실제 API 호출을 위한 코드량이 약 36% 줄어들었습니다.
인터뷰를 마치며
이렇게 시스템 개발에 참여하셨던 멤버분들을 모셔서 함께 이야기를 나눠보았는데요, 하이퍼클라우드의 ‘하이퍼솔루션’에 대해 더 깊이 알아갈 수 있었던 시간이었습니다! 여러분들은 어떠셨나요?
정식 출시는 아직이지만 올해 제품 출시를 목표로 기능 고도화를 이어가고 있습니다. 인터뷰에 등장하지 않은 수많은 멤버들도 더 완성도 있는 제품을 만들기 위해 열심히 아이디어를 나누며 고민하고 있어요.
‘하이퍼솔루션’은 AR/XR 마케팅에 최적화된 CMS인 만큼 색다른 마케팅 방법을 찾고 있는 수많은 기업들에게 새로운 기회를 제공할 수 있을 것으로 예상되는데요, 여러분께서도 ‘하이퍼솔루션’의 최종 버전을 함께 기대해 주시길 부탁드릴게요!
다른 흥미로운 콘텐츠 보러가기>>
"메타버스 전문 기획자될 분, 하이퍼클라우드로 오세요" - 기획자 알렉스 인터뷰
'기업 홍보영상' 제작기, 영상 콘텐츠 제작 가이드 활용 Tip까지
하이퍼클라우드 조직문화 - 메타버스 스타트업 첫 출근한 에디터의 아침
BX 디자이너에게 듣는 기업 브로슈어 제작기 - 별색, 옵셋 인쇄 감리 꿀팁까지
하이퍼클라우드 YEAR-END Party! 한 해를 마무리하는 하클러 방식 ✌️
IT 스타트업 콘텐츠 마케팅 인턴 한 달 차 후기 (제가 어떻게 일하고 있냐면요...)
하이퍼클라우드에 대해 더 자세히 알고 싶다면, 아래 홈페이지를 방문해 보세요.
