Engineering

클래스101에서 코딩없이 프로모션 페이지를 배포하는 방법

클래스 101은 성장을 위해 프로모션과 새로운 비즈니스 실험의 빈도가 잦습니다. 분기별 빅 프로모션, 새로운 비즈니스 모델 MVP 실험을 통해 고객들이 어떤 단어, 이미지에 반응하고 움직이는지 치열하게 실험해보면서 유저의 니즈를 적극적으로 찾아내고 있습니다.

비효율적인 기존 프로모션 빌딩 시스템

하지만 빠르고 간단하게 판을 깔고 그 안에서 많은 실험을 하다보니, 하드코딩으로 웹 랜딩 페이지를 만들고, 배포 이후에도 코드와 관련없는 텍스트, 이미지 수정 등이 이어지며 메이커들의 리소스가 낭비되고 있었습니다.

또한 간단한 수정사항에도 기획, 디자인, 개발, QA 프로세스를 거치며 여러 이해관계자 사이의 커뮤니케이션 코스트가 점점 가중되고 있었습니다.

기존 빅 프로모션 페이지 제작 프로세스

이러한 단순 수정의 반복, 소모적 업무의 증가로 제품의 고도화나 임팩트 있는 업무에 투입되어야 할 메이커에게 동기부여가 되지 않는 환경이었고,

단순한 문구 수정에도 많은 인력의 투입이 필요하여 과정의 복잡함 때문에 액션이 느려지거나 임팩트를 포기하는 경우가 생겼습니다.

그래서 클래스101은 고민했습니다.

단순한 수정은 기획자(마케터)가 직접 메이커 없이도 액션/실험 할 방법은 없을까?
제품을 잘 몰라도 누구나 쉽게 랜딩페이지를 만들 수 있는 직관적인 시스템이 없을까?

이러한 문제를 해결하기 위해 Editor101 프로젝트는 시작되었습니다.

우리는 더 많은 실험과 액션을, 더 적은 리소스로, 더 큰 임팩트를 낼 수 있도록 해야하니까.

목표는 비개발 직군의 클둥이(클래스101 직원)가 Editor101으로 랜딩페이지를 직접 만들 수 있게 하는 것이었습니다.

이러한 시스템을 만들기 위해 우리는 몇 가지 방법을 생각했습니다.

블록을 쌓듯이 쉽게.

전문가가 아니어도 쉽게 완성할 수 있도록 기본적인 템플릿을 제공하자.

Image + Text Box / Collection Box 를 선택할 수 있다.

프로모션 페이지에서 주로 사용하는 템플릿을 구조적으로 나눠 크게 Paper, Box, Block으로 구성하고, 주로 사용하는 Text, Image, Collection 등을 Block으로 만들어 Block들을 조합하는 것만으로도 완성도 있는 페이퍼를 만들 수 있도록 개발했습니다.

Text Block + Image Block이 결합된 Flex Box

자주 사용하는 UI를 Box형태의 템플릿으로 만들었다.

이렇게 템플릿을 만들면서 각 프로모션마다 디자인 에셋의 타이포, 마진, 레이아웃 등 구성요소가 일관성이 없어 담당 디자이너에 따라 풀어내는 방식과 표현이 달랐던 문제를 해결하게 되었습니다.

코딩하지 않고 UI가 바뀌게 하려면?

Server Driven UI

보통의 어플리케이션은 정적인 UI를 만들어두고 단순히 필요한 Data만 서버에서 받아오는 방식으로 구현합니다.

하지만 Editor101은 사용자가 동적으로 UI를 변경해야 했기 때문에, UI 구성요소를 서버에 저장해두고 요청받는 Server Driven UI 방식을 이용했습니다.

Block 하위에는 다양한 CSS Properties를 담고 있어 높은 자유도를 갖고 있으며, 서버로 UI 구성요소를 제어하기 때문에 코드 배포없이 사용자가 수정하여 UI 변경이 가능합니다.

Collection Block의 Field. 어떤 캐러셀 모양을 보여줄 것인지 서버에 저장한다.

모든 Box, Block은 Style Properties를 갖고있어 DB가 바뀌면 UI도 바뀐다.

사용자가 바꾼 그대로, WYSIWYG

WYSIWYG은 사용자가 편집한 화면 그대로 반영되는 것을 말합니다.

Editor101은 이름 그대로 웹을 편집하는 기능을 갖고 있고 텍스트, 컬러, 사이즈부터 CSS 속성들을 수정/편집 할 수 있습니다.

Text Block

텍스트 내용과 속성을 자유롭게 바꿀 수 있습니다.

텍스트를 자유롭게 바꿀 수 있다.

텍스트 크기, 컬러, 모바일 줄바꿈 위치 변경

Image Block

데스크탑, 모바일 사이즈의 이미지, 영상을 각각 넣어 반응형에 대응합니다. Full, Medium, Banner Block에서 공통으로 사용합니다.

데스크톱, 모바일 사이즈의 이미지를 각각 넣어 반응형에 대응

Collection Block

컬렉션 아이디를 넣으면 설정해둔 데이터를 불러옵니다. 카테고리를 자유롭게 추가, 수정, 삭제할 수 있고 Drag & Drop으로 위치를 변경할 수 있습니다.

또한 프로덕트 뷰 타입을 캐러셀/그리드, 가로, 세로 형태로 바꿀 수 있고 CTA 버튼 활성화 및 텍스트, 랜딩 URL 설정이 가능합니다.

카테고리 추가, 삭제, 위치 이동이 가능하다.

Flex Box

CSS Flex처럼 Column, Row를 설정할 수 있고 Padding, BackgroundColor를 설정할 수 있습니다. 또한 FlexBox의 복사, 삭제, 위치 변경이 가능합니다.

Box 전체의 위치변경, 복사, 삭제가 가능하다.

Flex 방향, 패딩, 배경 색상을 설정할 수 있다.

개발자, QA 도움없이 바로 배포 가능!

이렇게 수정한 UI의 저장을 하고나면, 페이퍼를 발행할 수 있는 버튼이 활성화됩니다. 발행을 하면 해당 페이퍼의 슬러그(URL)을 제공하고, 언제 배포할지 예약을 걸어둘 수도 있습니다.

추가 기능

임시저장 및 해당 버전 편집

이렇게 수정한 UI는 임시저장도 가능하고, 해당 버전으로 돌아가 편집할 수도 있습니다. 또한 누가 언제 수정했는지 확인할 수 있어 효율적인 커뮤니케이션이 가능합니다.

반응형 대응

또한, 수정단계에서 반응형 테스트도 할 수 있어 모바일에서도 어색한 부분이 없는지 확인할 수 있습니다.

포스트잇

포스트잇 기능은 Editor101 자체를 React Component 레벨로 제공하여, 개발자용 임베드 코드를 만들어 개발자가 해당 코드를 원하는 곳에 삽입하고 배포하면 추후에 포스트잇 부분은 추가 배포없이 수정할 수 있는 기능입니다.

개발자의 리소스가 부족하면서, 개발 요소보다 단순 텍스트, 이미지 수정이 자주 필요한 페이지를 담당하고 있는 클둥이들의 많은 환호를 받은 기능입니다.

Editor101으로 만들어진 프로모션 페이지

분기별 프로모션 뿐만 아니라 최대한 빠르게 만들어야 하는 랜딩페이지 무엇이든! 개발자의 도움없이 마케터가 랜딩페이지를 생성할 수 있게 되었습니다.

클둥이들의 Editor101 사용 후기

Editor101이 없던 시기에는 프로모션 페이지 하나를 만들고 나서 문구 하나 수정하는 데에도 배포 프로세스를 거쳐야 해서 핫픽스가 하루에도 몇 번씩 나가곤 했어요. Editor101으로 만든 페이지는 한 번 배포한 이후에도 계속해서 수정 및 개선을 운영자가 직접 할 수 있게 되었어요. 또한, 페이지 구성의 자유도가 높지 않아 한계가 있었는데, Editor101으로 원하는 대로 페이지를 구성할 수 있게 되면서 임팩트 있는 액션을 할 수 있게 되었어요. PC, 모바일 반응형, 줄바꿈 등의 섬세한 기능은 물론이고 클래스를 많이 노출해야 하는 니즈에 맞게 컬렉션을 불러오고 보여주는 UI도 다양하게 구성되어 있어서 좋았습니다. 앞으로도 자주 활용할게요. 감사해요!
- 은짱, Promotion Manager

Editor101이 없을 당시 키즈 홈페이지는 어드민이 제대로 되어있지 않았어요. 오픈할 때마다 캐러셀을 정리해야 했고, 순서도 조정할 수 없어서 하나 추가하면 처음부터 다시 모든 클래스를 넣어야 했죠ㅠㅠ. 모바일과 PC버전도 따로 관리해야 했습니다. Editor101은 저희에겐 기적이었어요! 키즈는 카테고리도 8개로 무척 다양한 편이라 어드민 관리에 오랜 시간이 걸렸는데, Editor101 개발 이후에는 편리하게 추가, 수정, 삭제할 수 있게 되었고, 모바일 대응도 알아서 가능해서 오픈 세팅에 필요한 시간이 대폭 감소되었어요! 또한 프로모션 때마다 홈페이지 테마 컬러를 바꾸는 등, 쉽고 간단하게 데코를 할 수 있다는 것도 너무 좋았어요. 앞으로도 키즈 홈페이지는 더욱 예뻐질 예정이랍니다. 멋진 서비스 개발해주셔서 진심으로 감사드려요!
- 단, Class MD

최근 국방부 사업에 대한 안내를 진행하기 위해 랜딩페이지가 필요했습니다. 랜딩페이지를 새롭게 개발하고 구성하는 것은 사업 준비기간 (약 2주) 동안 진행하기 어려운 부분이 있어, 최대한 린하게 안내페이지를 만들기 위해 Editor101을 사용하게 되었습니다. 웹페이지 구성에 필요한 시간을 단축시킬 수 있었던 것은 물론이고, 사업을 진행하면서 국방부 담당자님의 요청을 최대한 빠르고 간편하게 페이지에 반영할 수 있었다는 것이 좋았습니다. 직접 돌발 상황마다 이미지를 변경하거나 텍스트를 수정하는 등 공지사항을 변경하여 안내할 수 있었습니다.
- 덴버, Account Manager

마치며

첫 MVP 배포 이후 전사 타운홀에서 발표하자마자 뜨거운 반응이 쏟아졌던 것을 잊을 수 없습니다. 메이커로써 사용자가 효용을 크게 느끼는 제품을 만드는 것 만큼 뿌듯한 일은 없기 때문입니다.

제품을 만들면서 Editor101이 얼마나 많은 곳에 쓰일 수 있을까 걱정했던 시간이 무색하게 개발팀이 따로 없어 MVP 상태의 어드민으로 힘들게 페이지를 수정하고 있던 팀이 Editor101을 적용하여 어드민 없이도 빠르게 페이지를 수정할 수 있게 되고,

전투 태세를 유지해야 했던 프로모션 기간은 이제 메이커들의 도움없이 자유롭게 실험하고 임팩트를 낼 수 있는 기간이 되어 빠른 액션으로 효과적인 비즈니스 아웃풋을 만들 수 있게 되었습니다.

앞으로 Editor101은 클래스101 앱 적용 및, 더 많은 자유도와 다양한 템플릿을 만드는 등 고도화할 예정입니다.

클래스101이 문제를 해결해 나가는 여정, 앞으로도 많은 기대 부탁드립니다! 😄

Makers : Jiwoo Kim(Ocean), retno, GenHo Han(Tony), Jieun Lee(Zinna), Taegeun Hwang(Teddy), Youngmin Lee(Yammi)

👉채용중인 포지션 확인가기👈