CLASSBOX 서비스 리뉴얼

CLASSBOX는 웅진컴퍼스가 국내·외 영어 강사를 위해 운영한 온라인 교육 플랫폼이다. 2022년 12월 첫 회의에서 웅진컴퍼스는 커뮤니티와 구인구직을 열어 플랫폼을 키우고 싶다고 했다. 2023년 2월부터 7월까지 그 개편을 맡았다. 디자이너는 두 명이었고, 기획과 PM은 한 사람이 맡았다. 브랜드는 전략까지 맡았고, 그 방향을 심볼과 로고로 그린 것은 다른 디자이너다.

문제 — 교재만 받고 나가는 사이트

대다수 강사에게 CLASSBOX는 무료로 학습 교재를 찾고 부가 자료를 제공받는 '인터넷 사이트'였다. 로그인만 하면 교재를 사지 않아도 자료를 다 받을 수 있었고, 받고 나면 더 할 일이 없었다. 교습법을 따로 배운 적 없는 강사가 많았고, 수업 관리와 교재 판매와 구인구직은 이 사이트가 다루지 않는 영역이었다.

첫 회의에서 웅진컴퍼스가 적은 오픈 취지 가운데 하나가 탑강사의 인터랙션을 강화하고 수익이 생기면 나누는 것이었다. 강사가 서로 아는 것을 나눌 자리도, 그 활동이 값으로 돌아올 자리도 서비스 안에 없었다.

화면도 같은 상태였다. 대메뉴는 일곱 개였고 그 아래 하위 항목이 스물아홉 개 붙어 있었다. 많은 메뉴가 노출되는데도 그룹핑이 복잡해 진입점을 찾기 어려웠다. 마우스를 올리면 형태가 달라져 원하는 항목으로 들어가기도 힘들었다. 메뉴에 들어간 뒤 나타나는 좌측 메뉴는 위계를 흐렸고, 누를 수 있는 요소와 정보만 보여 주는 요소가 같은 표현을 쓰고 있었다.

첫 화면은 강좌를 파는 탑클래스의 배너 하나가 80%를 차지하고 있었다. 여러 페이지로 이어 주는 자리를 그 배너가 덮고 있으니, 사이트에서 무엇을 더 할 수 있는지 알 방법이 없었다.

시각 쪽은 규정 자체가 없었다. 서비스의 결정권이 사업팀에 있어 전체 로드맵이 없다는 답을 1월 회의에서 들었다. 브랜드 컬러가 페이지마다 다르게 쓰였고 포인트 컬러에도 정책이 없었다. 버튼만 모아 봐도 주황과 하늘색, 파랑과 검정이 한 화면에 함께 있었다.

리서치 — 안에서 이미 알고 있던 문제

임직원 인터뷰에서 돌아온 답은 네 가지로 모였다. 명확한 사용 환경이 없다, 메뉴가 복잡하고 콘텐츠끼리 이어지지 않는다, 브랜드 아이덴티티가 없어 이미지가 일관되지 않는다, 상업적인 느낌보다 교사를 지원하는 교육적인 목표를 원한다. 문항은 서른다섯 개로 짰다. 목적과 비전, 브랜드 현황, 아이덴티티 방향성, 현 서비스 분석, 사용자 분석, To-Be 분석 여섯 항목으로 나눠 서른세 문항을 넣고 추가 질문 둘을 뒤에 뒀다. 브랜드 이미지는 열세 쌍의 양극 척도로 따로 물었다.

익명으로 받은 시각자산 설문도 네 가지로 같은 곳을 짚었다. 사이트를 한눈에 파악하기 힘들다, 표현 방법이 적절하지 않아 만족도가 낮다, 웹페이지 구성의 효율성이 낮고 디자인 일관성이 떨어진다, 무게감이 약해 브랜드 정체성이 낮다.

3월 고객 설문에서는 고충이 생겼을 때 어떻게 푸는지를 물었다. 스스로 역량을 키워 푼다는 답이 50.5%로 가장 많았다. 그 답 아래에는 다수의 강사가 스스로 역량을 키울 수 있는 소통과 정보 글을 찾는다고 적었다. 커뮤니티에서 불편했던 점으로는 정보성 콘텐츠의 부재, 자료를 찾기 부적절한 구조, 등급을 올려야 정보가 열리는 제한이 나왔다. 쓰고 싶은 기능의 앞자리는 세미나 관리와 홍보, 질의응답, 정보 게시물이었다.

동종 업계는 e-book과 LMS, 커뮤니티, 구인구직 네 분야에서 세 곳씩 살폈다. e-book에서는 Bricks와 e-future, NE_books를, LMS에서는 e-Smart Campus와 NE_Build&Grow, 매쓰플랫을 봤다. 커뮤니티에서는 Remember와 Linkedin, Blind를, 구인구직에서는 사람인과 잡플래닛, 훈장마을을 골랐다. e-book은 분류가 명확할수록 콘텐츠에 닿기 쉬웠고, LMS는 쓸 수 있는 기능이 무엇인지 알아보게 해야 했다. 커뮤니티는 흥미를 유도하되 시선이 흩어지지 않아야 했고, 구인구직은 위계를 세워 원하는 정보를 빠르게 찾게 해야 했다.

접속 환경은 한쪽으로 기울어 있었다. 웅진컴퍼스는 탑클래스를 뺀 나머지 서비스에서는 모바일로 들어오는 사람이 많지 않고 접속의 90%가 PC라고 했다. 반응형으로 이미 돌아가고 있었지만 라운지와 구인구직은 새로 그리는 자리라, 어느 쪽을 기준으로 설계할지가 첫 아젠다로 올라갔다.

인사이트 — 들어오는 이유와 참여하는 이유

커뮤니티를 한 덩어리로 놓고 보면 진단이 「사람이 오지 않는다」 하나로 끝난다. 그래서 활성화를 방문과 참여 둘로 나눴다. 방문은 나에게 유용한 정보와 관심 있는 글이 있을 때 일어나고, 참여는 고충을 풀거나 소통하려 할 때 일어난다. 각각의 이유를 다섯 개씩 적어 두고, 홈은 콘텐츠로 들어가는 진입점으로 라운지는 고충을 풀고 정보를 관리하는 소통 창구로 역할을 정했다.

임직원이 말한 것을 나눠 보면 절반은 사용성이고 절반은 이미지였다. 둘은 같은 곳에서 갈라져 나왔다. 규정이 없으니 화면마다 표현이 달라졌고, 일관된 브랜드 이미지도 생기지 않았다.

전략 — 기능마다 어떤 경험을 주는지

3월 대표 보고에서 전략을 다섯으로 세웠다. 경쟁력 있는 정보 제공, 빠른 고민 해결, 맞춤형 정보 습득 및 관리, 흥미를 유도하는 소통, 경쟁력을 키우는 강좌다. 전략마다 실행 기능을 달아 스무 개를 만들었다. 기능만 나열하면 무엇을 위한 것인지 회의마다 다시 물어야 해서, 실행 기능과 그것이 만드는 경험을 한 면에 나란히 두었다. 스무 개가 다 살아남지는 않았다. 형광펜 메모와 게시판 구독, 출석체크는 최종 범위에 들어가지 않았고, 초기 기능 정의에 있던 토론과 투표와 익명 글쓰기도 같이 빠졌다. 개발 공수와 일정을 확인하면서 함께 정리했다.

브랜드가 설 자리도 같은 단계에서 정했다. 브랜드 인사이트는 "당신의 성장과 성공이 있는 공간"이다. 이 문장으로 서비스의 자리를 교재와 부가 자료를 주던 곳에서 강사가 다음 단계로 올라서는 곳으로 옮겼다.

탐색 — 첫 화면에 무엇을 고정할지

2월 말 보고에서 커뮤니티의 첫 화면이 될 포럼 홈을 세 안으로 냈다. 정보 중심형은 트렌드 글과 베스트 글을 위에 고정하고 검색과 카테고리와 소모임을 왼쪽에 세웠다. 진입점 강화형은 여덟 자리를 나란히 놓고 그중 소모임과 탑강사 게시판, 뉴스레터와 세미나 일정을 진입점으로 뒀다. 게시판 중심형은 홍보 배너와 게시판을 앞세우고 검색과 피드를 고정했다. 세 안 모두 첫 화면에 들어오는 영역을 One View로 표시하고, 고정되는 자리와 스크롤에 따라 움직이는 자리를 색으로 구분했다.

3월 중순에는 같은 정보 구조 위에 시안을 세 개 더 냈다. 확장과 연결을 축으로 배너를 넓힌 안, 로고의 슬릿을 썸네일과 태그로 옮긴 안, 니즈가 높은 콘텐츠를 위로 올려 따로 누르지 않아도 콘텐츠를 만나게 한 안이다. 어느 안을 왜 골랐는지는 두 회차 모두 문서에 적지 않았다.

해결 1 · 일곱 개 메뉴를 세 개로

문제는 메뉴가 많다는 것이 아니라 묶여 있지 않다는 것이었다. 새 대메뉴는 탑클래스, 수업지원, 클래스몰 셋이다. 이 골격은 1월 회의에서 웅진컴퍼스가 말한 구성에서 왔고, 일곱 개를 어디에 접어 넣을지를 정했다. 일곱 중 다섯이던 교재·부가자료와 온라인 학습관리, 커리큘럼, 레벨테스트, 리딩오션스를 수업지원 하나로 모았다. 라운지는 탑클래스 아래 두 번째 단계에 뒀다. 강사가 상세 페이지까지 두세 단계 안에서 닿도록 내비게이션 규정에 적었다.

여기까지 오는 데 안이 하나가 아니었다. 3월 초 기능 정의의 대메뉴는 FORUM 홈과 Lounge, 소모임, 구인구직 넷이었다. 나흘 뒤 대표 보고에서 소모임이 빠져 셋이 됐고, 3월 중순 정보 구조에는 TOP CLASS가 올랐다. 5월 가이드라인은 같은 자리를 탑클래스, 수업지원, 클래스몰로 적었다.

해결 2 · 게시판 열한 개가 될 뻔한 라운지

3월 20일에 웅진컴퍼스가 포럼 홈과 라운지에 넣고 싶은 것을 열한 줄로 적어 보냈다. 라운지 몫은 다섯 줄이었고 미디어 공유와 소모임 활동 내역, 소모임 챌린지, 소식과 일정, 토론과 투표가 거기 들어 있었다. 그대로 두면 포럼 홈과 라운지에 게시판이 열한 개 생기고, 강사는 들어올 때마다 어디로 갈지 고른다.

방문과 참여의 축으로 다시 묶어 라운지를 다섯 구획으로 냈다. 라운지NOW는 지금 일어나는 일을, 교육 인사이트는 운영이 싣는 정보를, 소셜 피드는 사용자가 올리는 글을, 챌린지박스는 기간이 정해진 참여를, CLUB은 관심사로 모이는 자리를 맡는다. 클라이언트 목록의 미디어 공유는 소셜 피드로, 소모임 활동 내역은 CLUB으로, 소모임 챌린지는 챌린지박스로 들어갔다. 토론과 투표는 최종 범위에 들어가지 않았다.

탑클래스 홈과 라운지NOW는 블록으로 쌓았다. 섹션이 세로로 쌓이는 구조여서 운영 상황에 따라 블록의 순서와 형식을 바꿀 수 있다.

커뮤니티를 여는 일에는 화면 말고도 준비할 것이 있었다. 금지어 목록은 1,546개였고 닉네임으로 쓸 수 없는 말은 다섯 개였다.

해결 3 · 유료 클럽과 정산까지

임직원은 인터뷰에서 상업적인 느낌보다 교사를 지원하는 교육적인 목표를 원한다고 답했다. 첫 회의의 「수익 발생 시 분배」와 2월 클라이언트 자료의 「커뮤니티 개설은 무료, 가입에 수익 쉐어」는 사업 조건으로 먼저 와 있었다. 그것이 화면에서 어떻게 돌아가는지는 정해져 있지 않았다.

CLUB은 무료와 유료 두 종류로 뒀다. 유료 클럽을 열 때는 가입비와 가입 기간, 운영 기간, 검색에 쓰일 키워드를 개설자가 직접 정한다. 기간을 정하면 그 기간이 지난 뒤에는 목록과 검색에서 빠지고, 이미 가입한 사람은 들어올 수는 있으나 글을 쓰지 못한다.

번 돈을 받아 가는 절차도 화면으로 냈다. 유료 클럽 가입과 챌린지박스에서 생긴 금액이 쌓이고, 강사가 계좌와 증빙을 등록해 인증을 받은 뒤 정산을 신청하면 운영자가 지급한다. 인증 절차에는 신청 전과 대기중, 인증, 거절 네 상태를 두고 거절에는 사유를 적게 했다.

해결 4 · 아무것도 없는 화면과 권한

내용이 없을 때의 화면을 아홉 개 따로 그렸다. 목록이 비는 곳이 일곱, 검색 결과가 없는 곳이 둘이다. 커뮤니티는 여는 날 비어 있는 것이 정상이고, 그 화면을 그리지 않으면 개발 단계에서 각자 다르게 채운다.

CLUB 안의 권한도 정했다. 리더와 매니저는 일반 멤버에게 경고를 줄 수 있고, 경고는 7일 활동 정지와 글 작성 불가 두 가지다. 이미 정지된 사람에게 같은 정지를 다시 줘도 기간이 덮어써지지 않게 막고, 대신 경고 해제를 뒀다. 리더와 매니저는 경고를 받지 않는다.

모바일은 흐름이 달라지는 화면만 골라 그렸다. 90%가 PC로 들어오는 서비스라 PC를 기준으로 잡았고, 그렇게 달라지는 화면 스물두 개를 모바일로 냈다. 정산과 CLUB 가입처럼 단계가 있는 화면이 거기 들어간다.

해결 5 · 입력할 수 있는 글자 수 제한

화면 열여덟 개의 입력 항목 마흔두 개에 글자 수 상한을 정했다. 값은 한 자에서 이천 자까지 열다섯 종이고, 검색은 운영자가 쓰는 어드민과 강사가 보는 프론트 모두 백 자로 통일했다. 운영자가 글자를 넣다가 화면이 밀리는 일은 나중에 오류로 돌아오기 때문에, 화면을 그릴 때 상한을 함께 적었다.

배너와 썸네일은 모두 열다섯 종이고 종마다 규격을 따로 냈다. 크기와 여백에 더해 서체와 웨이트, 포인트, 텍스트 높이, 최대 글자 수까지 넣었다. 가려지는 영역도 지면에 표시했다. 탑클래스 홈 메인 배너는 오른쪽 308px을 '다가오는 세미나' 위젯이 덮는다. 그 폭을 Safety Zone으로 칠하고, 실제로 디자인할 수 있는 너비를 999px로 적었다.

화면마다 다르던 표현은 컴포넌트 한 벌로 묶었다. 누를 수 있는 요소와 정보만 보여 주는 요소가 같아 보이던 자리는 컴포넌트를 행에 두고 상태를 열에 둔 규격표로 구분했다. 버튼과 배지, 입력과 검색, 셀렉터, 테이블, 팝업까지 열네 항목을 정리했고, 기기에 따라 달라지는 항목은 PC와 모바일 두 벌로 냈다. 아이콘은 마흔여덟 종을 그레이와 컬러 두 벌로 갖췄다.

실행 — 기획서에서 개발 답변까지

기획서에 적힌 문장은 저절로 화면이 되지 않는다. 4월 27일에 화면을 한 장씩 그려 그 안의 동작까지 적은 스토리보드 첫 판을 내고 6월 12일까지 다섯 번 고쳐 냈다. 홈과 세미나 일정으로 시작해 라운지NOW와 교육 인사이트, 소셜 피드와 챌린지박스, CLUB과 활동 관리, 로그인을 차례로 붙였다. 비어 있는 목록 화면은 네 번째 판에서 한꺼번에 채웠고, 대메뉴(GNB)와 세미나 일정의 모바일은 마지막 판에 들어갔다. 최종본은 프론트 193장이고, 어드민은 따로 59장이다.

범위는 4월에 두 번 움직였다. 기능 정의 항목은 예순여섯에서 백스물하나로 늘었다. 여기에 들지 않는 추가 기능 일흔아홉 항목은 따로 세어 두었다. 닷새 뒤 문서에서는 백서른둘이 됐고 늘어난 열한 항목은 전부 어드민이었다. 유료 클럽을 열기로 하니 신청 승인과 결제 취소, 정산과 인증 관리가 운영자 쪽에 새로 생겼다.

구인구직은 여기서 빠졌다. 3월 초 안에서는 대메뉴 넷 중 하나였고 4월 25일에 구직과 구인 화면 스물아홉 장까지 냈지만, 개발 범위에는 들어가지 않았다. 1월 회의에서 웅진컴퍼스는 개발은 라운지까지 하고 구인구직은 기획까지 마치기를 바란다고 적었다. 2월에 처음 짠 일정표에도 구인구직에는 기획과 디자인 공정만 있었다. 설계는 남기고 1차 오픈 범위에서는 미뤘다.

개발이 시작되자 개발 쪽에서 문서를 읽고 질문을 보내왔다. 5월 9일부터 사흘 사이 서른여섯 건이었다. 기본값과 필수값처럼 문서가 덜 적은 자리도 있었고, 설계가 실제로 부딪히는 자리도 있었다. 인사이트 카테고리에서 기본 이미지를 두 개 지정하면 어느 것이 남는지, 챌린지가 시작되기 전에는 진행 상태를 무엇으로 표시하는지 같은 것들이다.

답을 정하면서 스토리보드를 함께 고쳤고, 진행 전 상태처럼 문서에 없던 값이 그때 생겼다. 배너의 비로그인 노출 조건을 묻는 질문에는 기준부터 정해야 한다고 답했고, 미가입자의 좋아요 권한을 묻는 질문에는 로그인 권한을 정리해 따로 넘겼다. 설계를 바꾸자는 제안도 있었다. 세미나를 홈에 띄울지 정하는 값은 목록에서만 고치게 하자는 의견이었는데, 상세에서도 고칠 수 있어야 한다고 보고 원안을 유지했다.

결과 — 끝난 서비스와 남은 문서

CLASSBOX는 오픈해 운영됐고, 이후 서비스는 종료됐다. 남은 것은 프론트와 어드민 스토리보드 두 권, 그리고 규정 144면이다. 브랜드 가이드라인 80면에는 브랜드 전략과 아이덴티티에 더해 정보 구조와 블록 시스템, 내비게이션 규정이 함께 들어갔다. 로고 규정은 로고 가이드라인 29면에 따로 담았고, 컴포넌트와 배너 규격은 UI 가이드라인 두 권 35면이다. 네 문서 모두 협의 없이 바꿀 수 없다는 규정을 앞에 두었고, 로고 가이드와 UI 가이드 두 권에는 원본 데이터로만 작업하라는 조항을 함께 넣었다.

돌아보면 계약 단계에서 세 가지를 지표로 걸어 뒀어야 했다. 상세 페이지까지 닿는 데 걸리는 클릭 수, 어드민으로 등록된 배너 가운데 규격을 벗어난 비율, 강사가 CLASSBOX를 부르는 호칭이다. 리뉴얼 전 이곳은 강사에게 '인터넷 사이트'였다.