brunch

You can make anything
by writing

C.S.Lewis

by 아리언니 Dec 24. 2018

업무 효율성을 증대하기 위한  모바일 웹 서비스 론칭

교사들이 해야 할 일에만 집중할 수 있게,

프로젝트 공유의 목적

내가 프로젝트의 시작부터 끝을 공유하는 이유는 몇 가지가 있다. 그중 가장 중요한 것은 프로젝트를 다시 복기하며 반추해 성장하기 위한 것이다.

그 외에는 주니어 기획자가 특정회사에서 일하는 방식을 공유하기 위해서이다.

해당 프로젝트에서 눈여겨보았으면 좋겠는 점은 초기 기획부터 개발팀과 긴밀히 협조하고 유저들과 호흡하며 모든 과정을 진행해나간 것이다. 물론 초기 기획 일정보다는 일정이 조금 늘어나긴 했지만 오히려 디자인, 마크업, 개발 부분에서는 더 많은 시간을 아낄 수 있었다고 자신한다.




00. 배경


현재 2030 나이라면 유년시절 상당수가 경험했을 방문학습.

 과목은 영어, 수학, 국어 등 과목도 다양하고 선생님도 다양했고 사업도 호황을 이뤘다.무엇보다 디지털 미디어의 발달이 현재와 같이 빠르지 않아 주로 CD/교재/ 방문학습으로 학생들을 관리하곤 했다.


그런데 세상이 너무 편해지고 좋아졌다.

2009년 아이폰이 국내에 상륙한 뒤로 한국의 산업 생태계는 180도 달라졌다.

사람이 사용하는 대부분의 서비스들을 언제나, 어디서나  모바일/PC로 처리할 수 있게 되었다.


이제는 단순히 task를 달성하게 하는 것뿐 아니라 서비스를 사용하는 사용자가 혼란스럽지 않게

task를 수행하도록 서비스를 설계하는 것이 중점이 되고 있다. 이는 특정 사업군만의 변화가 아닌 전반적인 생태계 변화로 교육업계도 이와 같은 변화를 직시하게 되었다.


그러나 우리나라 대부분의 영유아, 초등학생 타깃의 영어학습은 전집 시장, 방문학습 시장으로 꽤 오랜 시간 동안 사업을 해온 터줏대감들의 싸움이었다.  그러다 보니 해당 도메인의 경쟁력에만 초점을 두어 정작 실제 업무를 수행하는 교사들의 편의성 증대에 대해서는 몇십 년째 개선되지 않은 채로 방치되어있었다.


이제 사용자, 즉 우리에겐 고객/교사들의 눈은 하늘만큼 높아져 있다.

그만큼 좋은 서비스를 많이 경험했기 때문이다.

우리가 어떻게 하면 교육업계에서 좋은 서비스 경험을 도 줄 수 있는지 고민이 시작되었다.




01. Problem

 Outdated Plarform : 세상은 좋아졌는데 아직도 플래시 사이트에서 학습관리


교사의 업무는 두 가지가 있다.

1/ 방문하여 학습을 하는 것2/ 방문하지 않은 시간 동안 아이들이 자기 주도 학습을 한 내용을 확인하고 피드백을 주는 일이다.

방문하는 일은 교재와 선생님의 수업이란 콘텐츠가 이미 몇십 년 동안 정착했고 사람들은 이 일에 익숙하다. 그럼 다른 일인 학생이 학습 시간 외에 학습을 확인하고 칭찬하는 일은 어떻게 진행되고 있을까?

아이들이 언제 학습을 할지 선생님은 학습하기 전까지 알 수 없고 물리적 이동이 많은 직업 특성에도 불구하고 오로지 인터넷 익스플로러에서만 정상적으로 구동되는 플래시 기반 웹사이트이다.

상당을 파악하고 나서 처음 심정은 참담했다. 교육에 질을 높이기 위해 고민해야 할 선생님들이 일과를 마치고 집에 와서 컴퓨터를 켜고 노트에 적은 아이들 학습 스케줄과 아이들이 학습한 내용 피드백을 시작한다.  물론 할 수는 있지만 이로 인해 업무효율은 하락되고 불만은 늘어간다.


발의 부서에서 요청한 내용은 딱 두 가지였다.

사용 편의성과 학습결과 확인하는 페이지 사용성 향상이었다. 이외의 문제점은 실제 유저 인터뷰를 통해 살을 붙여나갔다.




02. Define

(1) 과연 몇 명의 교사가 몇 명의 학생을 케어하고 있을까?

약 85%가 30명 미만의 학생들을 가르치고 있었고 5%는 50명 이상의 학생을 가르치고 있었다.  


(2) 교사(유저) 인터뷰

어떻게 하면 교사들이 많이 사용할 서비스를 구축할 수 있을까 고민을 하고 실제로 현장에 나가 교사 인터뷰를 진행했다. 인터뷰는 Focus Group Interview로 진행했다.

참여인원은 10명 내외였으며 미리 질문 목록을 작성했고 답변에 따라 서비스의 방향성에 대한 아이데이션을 구체화해나갔다.  중점적으로 얻고 싶었던 답변은 우리가 데스크 리서치를 통해 중요하다고 생각하는 기능 우선순위와 실제 현업에서 중요하게 생각하는 기능 우선순위에 대한 간극을 줄이기 위한 것이었다.


2017-11-21

인터뷰를 통해 얻을 수 있는 Insight는 실제 교사들의 업무행태가 플랫폼의 한계 때문에 발생한다는 점이었고 서비스 오픈 후에 외면받지 않기 위해 현장의 목소리를 귀 기울여 들어야 한다는 것이다.

(실제로 2014년, 해당 기능을 수행하는 앱을 개발해 배포한 적이 있었는데 패드용으로 개발되어 현장에서 외면받은 사례가 있다. 데이터형 패드는 비싸기 때문에 보통  wfi패드를 샀기에 이동성이 많은 교사에겐 적절한 플랫폼이 아니었다.)


(3) 타사 리서치

우리의 서비스와 비슷한 방문학습을 진행하는 중국어 수업 시 선생님의 Task수행을 눈여겨봤다.

이곳도 선생님이 직접 필요한 책을 본인 노트에 적어서 발주를 하고 받아오며 이 외에 결제 및 학습관리도 불편한 서비스로 학생들을 관리하고 있었다.  




03. Develop

앞선 인터뷰를 바탕으로 서비스 스펙 정의와 화면 기획을 진행했다.


(1) 스펙 정의

서비스 제공 형태 : 모바일 웹사이트

최적대응 기기: Samsung Galaxy S7 / 기존 PC를 대응하는 에듀 서포터가 있어 태블릿/모바일만 대응


(2) 퍼소나 / 시나리오

사업, 기획, 디자인, 마크업, 개발이 각각 투입되는 프로젝트라 구성원들의 이해를 높이기 위해 서비스의 지향점을 퍼소나를 통해 구체화시켰다. 해당 퍼소나는 인터뷰 바탕, 실제 서비스가 워킹될 때 유저에게 이점이 되는 아이디어를 접목해 최대한 구체적으로 기입했다. 실무에서 퍼소나를 적절하게 사용하니 유관부서들과 작업할 때 미스커뮤니케이션을 줄이고 선 개발해야 하는 요소를 근거를 가지고 진행할 수 있었다.

(3) 유저 시나리오

위의 퍼소나와 시나리오를 바탕으로 유저 시나리오를 작성했다.

해당 서비스가 적절히 구현되었을 때 어떤 부분에서 유저의 행동이 변화할지 작성한 문서이다.

(4) Information Architecture

화면 기획에 앞서 해당 서비스는 어떤 구조를 가져야 할지 먼저 구조를 짰다.

웹사이트에서 모바일로 사이트를 변환했을 때 해당 환경에서 수행하면 가장 효과적일 기능들부터 번호를 설정했다. 해당 번호는 개발 순서와도 연계되어있어 해당 구조를 짜기까지 개발팀과 많은 논의를 했기에 개발 일정에서도 크게 이슈없이 번호 순서대로 개발이 진행되었다.


(5) Flow Chart & 화면 기획

앞선 과정을 거쳐 기능별 플로우 차트와 화면 기획을 진행했다. 모든 기능들이 웹사이트에서 사용되고 있었기에 각각 플로우와 예외사항이 있어 개발팀과 긴밀히 협조하며 기획서를 작성했다. 화면 기획 세부사항과 정책, Back end개발 시 참고해야 할 사이트를 적어놨다.

기획할 당시  Description이 구체적이지 않아 회의를 통해 지속적으로 구체화했고 나중에 정책은 한 페이지로 따로 빼서 관리했다.

일부 기능 플로우차트 예시
(전체 기획서는 대외비라 일부 페이지만 공유한다)

기획 당시 해당 서비스에서 사용성 개선을 위해 동일한 화면 규칙을 설정해 모든 페이지에 적용했다.

위의 화면에서 보면 [스케줄 생성]이라는 최종 Task가 하단에 뜨는데 위의 모든 사항을 체크하면 자동으로 색상이 들어오게 통일성을 주었다.  익숙한 기능을 수행하기 위해 적어도 하나의 기능만 사용해보면 다른 기능들은 손쉽게 사용할 수 있게 고민했다. 이러한 룰을 잡고 나니 한결 수월하게 화면 기획을 했고 디자인 및 마크업 외주작업 시에도 이견없이 작업을 진행할 수 있었다. 약 80페이지의 화면 기획서가 완성되었고 회의와 작업 과정 틈틈이 현행화하며 버전을 관리했다. (2018년 12월 현재도 버전 관리를 하고 있다)


(6) BI

이전에 쓰던 이름은 그대로 쓰지만 현재 디자인 트렌드에 맞지 않는 브랜드 아이덴티티를 가지고 있던 서비스라 팀 내 디자이너가 한 달 동안 BI 및 전체 디자인 무드를 잡기 위한 브랜딩 작업을 진행했다. 해당 작업에 집중할 수 있게 최대한 업무환경을 조성하며 최대의 아웃풋이 나오도록 모두가 협조했고 발의 부서와 사업부 모두가 만족하는 작업이 나왔다.

컬러칩은 기존에 해당 브랜드에서 캠페인에 사용하던 색상에서 추출했다.
어디서나 아이들을 케어할 수 있는 일주일 관리 선생님의 내용을 담아 심벌을 제작했다.

(7) GUI 디자인

GUI 디자인은 위의 BI 디자인과 함께 진행되었다. GUI 디자인을 진행한 디자이너는 앞서 화면 기획에서 만든 룰을 디자인하고 규칙을 상세화하며 디자인 가이드라인을 만들었다. 버튼 크기, 폰트 크기, Padding, Margin 등 디테일한 부분을 문서화했고 회의를 통해 지속적으로 업데이트했다.


(8) 마크업

내부 디자이너들이 보통 마크업을 소화했지만 당시 일정 상 외주업체에 마크업을 맡겨서 진행했다.

당시 세 군데 업체와 미팅해 견적을 받고 해당 서비스의 PC확장성 및 작업자가 파견 올 수 있는 업체를 선정해 진행했다. 마크업 개발하기 전엔 개발팀과 몇 번의 회의를 거쳐 개발환경에 대한 이해와 마크업의 토대를 정하고 작업을 진행했다. 한 번에 다 주게 되면 개발 일정이 딜레이 될 일정이라 Information Architecture에 나온 순서대로 마크업 산출물을 개발팀에 전달했다.

유료 간트차트 툴인데 가시성이 좋지만 A4사이즈로 볼때 다음 프로세스가 끊겨서 보인다는 단점이 있다.

(9) 내부개발

마크업 산출물이 내부로 인입되며 서버에 해당 파일을 안착하고 기존 개발을 서비스에 맞게 다시 개발하는 작업이 진행되었다.  그런데 부트스트랩 4.0으로 만든 마크업이 내부 개발을 붙이며 많이 틀어져 마크업 개발사가 다시 파견와 대응을 했고 주말출근과 무한 야근을 통해 일정에 맞게 내부 개발이 완료되었다.


(10) QA

내부에 QA팀이 따로 없기에 기획, 발의 부서, 개발팀이 모두 함께 검수를 진행했다. 당시 문서를 주고받는 일은 파일이 섞여 누락 위험이 있어 초기엔 엑셀로 전달하다가 구글 스프레스 시트로 옮길까 했지만 파일 관리 책임을 강화하기 위해 검수자 포함 2명만 문서 업데이트를 할 수 있게 주고받았다.  한 명은 기획 및 기능 검수, 한 명은 디자인 검수로 나눠 진행했고 그 결과 누락 없이 수정사항을 모두 반영할 수 있었다.




04. Deliver

이렇게 완성된 서비스가 오픈되었다. 교사들을 위한 서비스라 로그인을 해야만 사이트를 탐험할 수 있어 교사교육 시 사용할 매뉴얼을 제작했다. 신규 기능이 아닌 기존에 사용하던 기능들의 접근성과 편의성을 높여주었기 때문에 간단한 매뉴얼 배포로도 충분했다.


사용률은 2018년 7월 3일 기준 98%이며 버그 리포트는 0건 인입되었다.

다음 버전을 위한 사용자 의견 취합은 발의 부서의 해당 프로젝트 담당자분께서 네이버 카페를 이용해 받고 취합된 내용을 기반으로 업데이트를 진행할 예정이다.


결과적으로 발의 부서에서 요청한 사용성과 학습결과 페이지 활성화와 더불어 Task에 군더더기를 빼고 짧은 시간에 교사들이 업무를 수행할 수 있게 개편했다. 또 브랜딩 작업을 통해 앞으로 개편할 PC 사이트와의 연계성도 강화할 수 있어 성공적인 마무리가 되었다.




마치며

총 8개월의 시간 동안 PM으로 일하며 기획, 디자인 일정관리, 마크업 일정관리, 이슈관리, 개발 일정관리, QA 등 주니어 직급에서 하기 힘든 일들을 경험했다. 당시엔 부담도 많이 되고 프로젝트가 원활히 풀리지 않을 때도 있어 스트레스도 많이 받았지만 이 프로젝트를 시작으로 다른 프로젝트에서 예상될 문제와 일어난 문제를 해결할 때 큰 도움이 되었기에 성장할 수 있는 초석이 된 프로젝트라고 볼 수 있다.

오픈 후 버그리포트 0건, DAU 현재 교사의 98%에 해당하는 숫자가 기록된 서비스로 앞으로도 이런 서비스를 기획하긴 힘들 것 같다는 생각이 들었다.


실제 사용자의 목소리에 귀 기울이고 실무자들과 끈질기게 소통한 결과를 바탕으로 차후 프로젝트도 온고지신의 자세로 임해야겠다는 마음이 든다.


브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari