Wadiz Reward Studio

프로젝트 신청부터 오픈 및 관리까지의 프로세스를 담는 서비스 구축하기

리워드 스튜디오 프로젝트의 목표는 프로젝트 신청부터 오픈 및 관리까지의 프로세스에서 발생하는 메이커와 와디즈의 커뮤니케이션 리소스를 낮추는 것이였다. 전체 리워드 시스템 개선 중 일부이며, 메이커의 처음 진입점인 프로젝트 개설을 시작으로 서비스 안에서 메이커와 와디즈간의 모든 커뮤니케이션이 이뤄질 수 있도록 시스템을 만드는 것을 의미했다.

Project Manaer: Hong Nayoung
Product Designer: Lee Junha
UI Designer: Lee Junha, Lee Kyunghoon
Fron-End Developer: Kim Minjun
Period: 2017.06. – 2017.10.
Participation Rate: 40%

Spec Document

Problem

분리되어있는 커뮤니케이션 툴
심사 요청 정보 작성(google form), 프로젝트 스토리 작성(프로젝트 신청 페이지), 약정서 확인(Docusign), 프로젝트 약정 관련 정보 입력(google sheet), 메이커 안내(e-mail 및 유선전화) , 프로젝트 수정 및 오픈(메이커 대시보드) 등 각 프로세스마다 다른 외부 서비스를 사용하여 관리가 어렵고, 메이커의 혼란을 야기한다.

안내 없이는 작성이 어려운 대쉬보드와 산재된 운영 이슈
메이커 가이드가 나가고 있지만, 제 때 업데이트 되지 않으며 사용자 입장에서 너무 길어 읽지 않는 경우가 다반사다.
어떤식으로 화면에 반영 되는지 예상이 불가하고 너무 많은 필드를 한 페이지에 노출하고 있어 운영자의 불필요한 리소스가 들고 있다.

모든 프로젝트에 운영 리소스 발생
불필요한 프로젝트에도 불구하고, 모두 같은 양의 피드백과 관리 업무를 진행해주고 있다.
메이커와 와디즈가 합리적으로 서비스를 이용할 수 있도록 개설 단계의 분리가 필요하다.

Goal

메이커 안내 자동 DM 세팅
상태값을 나누어 안내 가능한 부분은 자동 DM발송으로 처리한다. (정산 안내까지 평균 14개의 수동 이메일 발송중)

오픈부터 신청까지의 상태값 정리 및 Admin 반영
신청, 피드백, 오픈예정 서비스까지 상태값을 새로 세팅한다.

안내 없이도 작성이 가능하도록 메이커 대시보드 개선 및 확장
스튜디오 안에서 피드백, 도움말, 프로세스 안내, 약정서 등을 제공하여 큰 수정 없이 메이커 스스로 오픈 가능하도록 한다.

패키지 서비스 시스템화
메이커 오픈 과정을 패키지화 하고, 스스로 선택하게 하여 피드백 운영 리소스를 분배한다.

Requirement

유저
1) 자연스럽게 프로젝트를 신청하고 오픈하고 싶다. 오픈까지의 프로세스가 예상가능하고 플로우대로만 따르면 멋진 프로젝트가 생성되었으면 좋겠다. 2) 커뮤니케이션 소통 창구가 통일되었으면 한다. 메일, 카카오톡, 전화, 외부 플랫폼… 헷갈린다. 피드백이 주관적이고 가이드가 명확하지 않다.

운영 담당자
1) 외부 플랫폼 사용 없이 와디즈 내부에서 상태를 확인했으면 좋겠다. 구글시트 등에 복사 붙여넣기하는 리소스가 많이 들고, 정산 등의 과정에서 실수가 잦다. 2) 반복된 메시지를 보내는 것은 자동발송 되었으면 좋겠다. 평균 14개 메일 중 피드백을 제외한 모든 메일은 자동발송 가능하다. 3) 피드백을 주는 방식이 편리했으면 좋겠다. 매번 PPT로 캡쳐하여 코멘트를 달아주고 있다.

Communication Step

커뮤니케이션 단계

리워드 스튜디오 상태 및 플로우

프로젝트가 많아지는 경우와 메이커 수정 시점을 명확하게 하기 위해 대기 상태를 추가하여 승인 과정 로직을 설계하였다.
기본 로직을 기준(약정 체결 단계 제외)으로 상태값을 나누고 플로우를 설계하였다.

오픈예정의 경우, 정식 프로젝트와 성격이 달라 ‘홍보’와 ‘오픈전 데이터 수집’을 목적으로 플로우를 간소화하였다.

약정 체결 동선

기존 Docusign을 사용하던 전자 약정 프로세스를 내재화하기 위해 본인인증 및 메일을 통한 서명 요청 프로세스를 설계하였다.

화면 구조 잡기

Navigation & State

사용자가 접근 하는 경로, 작성 단계별 상태, 관리자 심사 기능, 피드백 알림, 필드 Validator 알림 등 Studio의 메뉴에서 필요한 플로우를 충분히 보여주되 항목 수가 부담스럽지 않고 과정을 명확하게 인지할 수 있도록 각 단계별 플로우를 선 진행하고 페이지 상세 작업을 진행하였다.

Intros

프로젝트 신청 후 첫 진입하였을 때 보여주는 Intro와 오픈예정과 같은 서브 서비스에서 접근할 때의 Intro를 분리하였다.

Studio Basic Structure

Studio 페이지는 기존 대시보드, 개설 페이지 등과 달리 반응형 스펙으로 잡았다. 때문에 각 스크린의 구조가 명확하고 모바일에서도 쉽게 사용할 수 있도록 구조를 잡아야했다.
페이지 구조는 Navigation, Header(SNB), Body, Feedback으로 크게 구조화하였다.

UI요소 최적화하기

Form Validator

프로젝트 개설을 위해 메이커로 부터 많은 필드 입력값을 받아야했기 때문에 기존에 정리가 안되어있던 Form 요소를 공통화하였다. 함께 View.js를 활용하여 Validator를 구성하고 UI단에서 빠르게 검수할 수 있도록 설계하였다.

Form으로 구성된 페이지가 절반을 넘는다

이미지 최적화

메이커 프로필, 대표 이미지 등 메이커로 부터 받는 이미지는 프로젝트 페이지와 카드, 메타 이미지 등에 노출되는 중요한 파일이다.
때문에 기존에 4:3 비율로 받던 이미지를 디지털 이미지 비율 3:2로 바꾸고, 필요한 경우 Cropper.js를 커스텀하여 이미지를 간단하게 편집할 수 있도록 개발하였다.

이미지 퀄리티 문제도 많았는데, 이를 방지하기 위해 사진 이미지의 크기를 확인하여 최소 사이즈 미만의 파일일 경우 다른 사진을 선택하도록 UI를 구성하였다.

영상 미디어 최적화

메이커가 대표 영상을 삽입하는 경우 펀딩율이 올라간다는 일종의 불문율(?)이 있는데, 모든 메이커의 영상을 CDN으로 관리하기에도 사실 용량 문제가 있어 YouTube, Vimeo 등 영상 미디어 플랫폼을 통해 호출하여 페이지에 제공하도록 하고있다.

폼에서는 입력한 URL이 올바른 경로인지 확인하고, 첫 프레임을 이미지로 변환하여 자동 생성하도록 하였다. 영상 미디어는 16:9의 일반 비율로 포맷을 통일하였다.

Body 내 컨텐츠 반응형 최적화

Body안에 Form이 들어가기도 하고, 전혀 다른 Component나 모듈이 삽입되기도 하는데(심지어 아이프레임이 삽입되어야 하는 경우도 있었다) 이를 기기별로 최적화하기 위해 lg사이즈 화면은 600px로 최대 값을 잡고, 12col 그리드를 사용하여 PC, Tablet, Mobile 모두 Body에 있는 컨텐츠가 잘 노출되도록 설계하였다.

Helper 모듈 설계하기

Studio에서 개별 기능을 가진 모듈은 ‘도움말과 예시’, ‘피드백’ 2가지로 나뉜다. 물론 달력 모듈 등 특정 기능을 수행하는 것들도 있으나 Studio 서비스 목적에 크게 기여하고 있지는 않다.

도움말과 예시

도움말 모듈은 각 항목에서 좀 더 디테일한 설명이 필요하거나, 추천하는 예시물이 있을 때 이를 메이커가 가볍게 볼 수 있도록 노출하는 Functional Dialogue다. 텍스트와 미디어 영역 2단으로 나누어 이미지와 함께 설명할 수 있도록 하고 있다. pager를 포함하여 기존 PDF문서로 배포하던 가이드 파일의 내용을 항목별로 적절히 분배할 수 있도록 하였다.

Feedback

피드백은 각 항목마다 운영자가 검수하면서 수정이 필요한 내용을 적어두고 메이커가 확인하여 처리할 수 있도록 하였다. 각 진행 항목은 수정이 완료되었다고 판단되면 완료 카테고리로 넘기고, 더 이상 대시보드에 알림을 주고나 항목별 Validator에 영향을 주지 않도록 설계하였다.

피드백 모듈을 새로 개발하기에는 무리가 있다고 판단하여, 게시판 플러그인을 커스텀하여 Studio 성격에 맞도록 구성하였다. 또한 피드백의 경우 메이커가 컨텐츠를 작성하는 단계가 아닌 경우가 많다고 판단하여, 모바일에서 빠르게 확인하고 수정 또한 용이하도록 모바일 최적화에 집중하였다.

Plugin 내재화하기

스튜디오 내에서 외부 오픈소스 라이브러리를 차용하거나 API를 구성하여 SEO에 대응하고 있는 플러그인이 몇가지 있는데, 이중에 위지윅에디터와 검색용 태그 입력이 영향도가 큰 플러그인이다.

Froala Editor & Tag Input

에디터의 경우 스토리 등의 포스팅 개념의 입력이 필요할 때 사용하는데, 컨텐츠 내용에 따라 필드 높이가 자동으로 늘어나도록 하였고, 높이값이 늘어남에 따라 페이지 스크롤링이 되면 Toolbox 접근이 어려운 점이 있어(모바일은 더욱 심하다) 스크린 상단에 고정되도록 하였다. 또한 최대, 최소 입력 validation 체크가 가능하도록 하였다. 또한 편의성을 위해 툴박스의 아이콘을 Wadizicon 내부 아이콘 폰트로 대체하고, 기능을 커스텀 개발하였다.

검색용 태그 입력은, 폼 요소로 라벨 입력이 가능한 input 박스를 개발하였는데, 뛰어쓰기 자동 삭제, 뛰어쓰기 2번 입력은 enter 기능, enter시 라벨 입력 종료 등 키보드 입력이 용이하도록 설계하였다.

패키지 시스템과 전자약정 내재화

패키지 설계

패키지 시스템은 프로젝트 개설단기 초기에 선택하도록 하였고, 크게 3종(Basic, Standard, Advanced)로 나누어 기존 운영으로 풀던 ‘퀵오픈’을 Basic으로 두고 내재화하였다. 기존에 메이커마다 굉장히 운영 리소스가 천차만별로 소요되었는데, 이를 메이커가 직접 선택하도록 하고 이에 따라 운영 담당자의 서비스에 단계를 두었다. 프로젝트 심사가 완료되면 전자약정 체결 단계 전에 결재 시스템을 통해 선택한 패키지를 결재하도록 동선을 설계했다.

개설 단계시 선택하고, 심사가 완료되면 결재를 진행한다

전자 약정 체결 단계 내재화

기존 Docusign 외부 프로그램을 사용하여 진행하던 약정체결을 Studio 서비스에 내재화하였다. 사업자의 정보를 입력 받고, 유효성 체크와 함께 메일을 통해 서명을 받도록 하였다. Studio에서 입력 후 개인 메일을 통해 입력 값을 호출해야하는 동선이 있었기 때문에 유효성 체크 및 동선 마다 길을 잃지 않도록 링크를 지속 제공해주는 것이 중요했다.

전자 약정 체결이 완료되면, Studio에서 PDF 문서 포맷을 생성하여 제공해준다. 약정 체결 수정은 없고, 수정시 다시 처음 플로우를 거쳐야만 하도록 등급을 높였다.

전자 약정 체결 문서

 

후기 또는 잡담

메이커와 내부 운영자의 Paine Point가 매우 쌓여있던 상황에서, 최대한 인터뷰와 미팅을 진행하고 요구사항을 받았다. 기획 담당자의 호흡이 꽤 길었던 프로젝트였는데, 내부적으로 정책문제, 개인적인 의견 문제, GUI 선호 문제, 인력 문제 등 다양한 문제도 많았고 사공도 많았고 도움이 되지 않는 의견들도 많았다.

설계하면서 고민도 많았고, 진행하면서 토론을 통해 계속 스펙문서를 업데이트하고 설계 화면도 업그레이드 될 수 있었다. 나름 어려웠지만 뿌듯하고, 뿌듯하면서도 아쉬움이 많은 프로젝트이기도하다.

이제와서 생각하지만, 이 프로젝트를 통해 설계된 것들이 서비스 전반에 꽤 영향을 끼치고 있음을 새삼 깨달았다.