Codeflow
Online Programming Education Platform
The overview
Codeflow는 비영리로 운영되는 온라인 프로그래밍 학습 서비스로, 기존에 오프라인으로 진행되던
웹 서비스 개발 강의를 온라인으로 전환한 프로젝트였다.
나는 Codeflow에서 운영하던 오프라인 수업을 듣던 차에 온라인 서비스 개발에 합류하게 되어, UI 컴포넌트 프레임워크를 활용한 기획 및 디자인을 담당했다.
Role
UX Architect
UX Researcher
Contribution
50 %
Duration
2017.10 ~ 2018.03
Company
Benzen
Background
2017년 봄, 나는 스타트업에서 UI / UX 디자이너라는 타이틀로 커리어를 시작했다.
당시에는 서비스 기획 및 개발 경험이 부족하고 개발 용어를 잘 이해하지 못해 개발자들과의 소통에 불편함이 있었다.
그러던 중 '웹 서비스 풀스택 입문'이라는 프로그래밍 수업을 신청하여 수강하게 되었다. 이 때 수업을 담당하던 강사님은 오프라인 수업을 온라인 서비스로
전환하려는 계획을 하고 있었는데, 나에게 UI / UX 부분에서 도움을 주면서 프로젝트를 함께 진행해보자는 제의를 했다. 나는 개발자와 밀접하게 커뮤니케이션하면서 프로젝트의 기획 단계에서 서비스 런칭까지 참여해볼 수 있겠다는 생각에 Codeflow 서비스의 디자인을 담당하기로 하였다.
강사님 및 다른 개발자분들과 함께 협업을 하게 되었는데, 개발팀의 디자인에 대한 요구사항은 매우 명료했다. 개발자들에 의한, 개발자를 위한 서비스다보니 심미성보다도 UX를 최대한 고려해 달라, 또 개발 기간이 짧은 만큼 UI를 최대한 간결하고 빠르게 개발 할 수 있도록 UI 컴포넌트 프레임워크에 기반해 디자인해 달라는 요구를 받았다.
한창 개발팀과의 원활한 소통과 기능 중심의 용어 습득에 관심이 많았던 차라, 흥미를 갖고 컴포넌트 기반 디자인을 시도하게 되었다. 개발팀과 협의하여
초기에 Semantic Design을 UI 프레임워크로 선정했으나, 프로토타이핑 이후 Ant Design으로 프레임워크를 변경하였다.
Ant Design
Semantic Design
Brief
- 백개 이상의 강의로 구성된 커리큘럼의 흐름을 파악하고 체계적으로 학습 할 수 있도록
- 온라인 수업에서 다른 학생들과 교재 및 코드에 대해 토론 할 수 있도록
- 강의 교재 및 게시글 수정, 파일 업로드 등 잦은 작업을 페이지 이동 없이 수행할 수 있도록
- 작은 모바일 기기에서 동영상, 교재, 코드 등의 많은 컨텐츠를 소비 할 수 있도록
Solution 01.
좌측엔 커리큘럼 대목차가 보이는 Vertical Menu,
우측에는 소목차와 현재 페이지 위치를 확인할 수 있도록.
컨텐츠가 방대한 경우 목차의 역할은 중요하다.
학습 흐름이 깨지지 않도록 연관된 페이지로 쉽게 이동하고, 학습 진도를 시각적으로 파악 할 수 있도록 이와 같은 레이아웃을 구성하였다.
Solution 02.
영상이 포함된 강의는 교재 페이지 스크롤을 하더라도 항상 따라다니도록.
교재 상단에 영상이 포함된 강의가 있다. 영상을 듣다보면 교재 내용을 따라가야 하기 때문에 스크롤을 내리게 되는데, 이런 경우에는 다시 영상을 볼 수게 된다. 이러한 문제를 해결하고자 on-off 할 수 있는 '따라다니기' 기능을 고안했다. 따라다니는 영상은 항상 최상단에 노출되어 교재와 영상을 함께 확인 할 수
있도록 했다. 또한 영상을 드래그하면 크기와 위치를 조절 할 수 있도록 하여 모바일 기기 및 해상도가 작은 브라우저를 지원 할 수 있도록 했다. 이 기능은
런칭 후에 실제로 온라인으로 수업을 들으면서 가장 편리했던 기능이다.
Solution 03.
다른 학생들과 서로 수업 내용에 대해 토론할 수 있는 커뮤니티 페이지와 교재 연동.
교재에서 특정 내용에 대한 질문 또는 의견이 있는 경우 원하는 단락에 자유롭게 질문을 달 수 있다. 이는 '포럼'이라는 페이지와 연동되어, 한 학생이 질문을 달면 '포럼' 페이지에서 다른 학생, 선생님들과 함께 의견을 주고 받을 수 있다. 집단 지성 효과를 볼 수 있는 공간이다.
Solution 04.
강의 정보 수정 또는 문서 수정할땐 페이지 이동 없이 Drawer 컴포넌트로.
드로어는 일반적으로 측면에서 들어오며 최상단 레이어에 노출되는 패널이다.
주로 추가적인 정보 입력, 정보 확인용으로 이용한다. 많은 강의를 집필하는 강사 입장에서는 교재 내용 수정, 질문 답변 등 어떠한 정보를 수정하거나 작성하는 일이 많다. 강사가 페이지를 이동하지 않고도 효율적으로 작업을 수행 할 수 있도록, 강사의 사용 빈도가 높은
회원 정보 조회, 강의 정보 수정, 문서 수정 등 다양한 기능에 드로어를 적용했다.
Solution 05.
직접 코딩을 치면서 학습 가능하도록, 에디터 형태의 코드 입력창 추가.
교재와 영상만 보면서 학습하는 경우에는 코드 편집기 또는 소스코드와 웹 브라우저를 전환해가면서, 강의를 들어야하는 번거로움이 있다.
화면을 전환하는 번거로움을 줄이는 동시에 많은 파일과 폴더로 구성된 소스코드를 읽기에 적합한 툴이 필요했다.
교재 페이지에 소스코드가 포함된 코드 편집기를 삽입하는 아이디어를 제안했다.
Conclusion
컴포넌트 기반의 UI 설계나 세밀한 UX 설계 등 완성된 서비스의 사용성에 대한 기존 오프라인 수강생들의 반응은 훌륭했다. 하지만 오프라인 수업을 단순히 온라인으로 이전한 서비스에 그쳐 비즈니스적인 측면의 고려가 충분한 이루어지지 못한 문제가 있었다.
런칭 후 강사님은 신규 유저의 유입이나 강의 컨텐츠 관리에 부담을 느끼고 곧 구독 서비스를 무료 서비스로 전환하고 관리를 중단하였다. 프로젝트가 이렇게 종료되고, 나는 디자인이란 단순히 시각적이고 기능적인 측면에서의 관점 뿐만 아니라, 비즈니스의 측면에서 사용자 및 데이터 흐름 또한 고려 할 필요가 있다는 시각을 얻을 수 있었다.