* 인프런 모바일 웹 강의실 TF 팀원들 (왼쪽부터) 빠삐코(Frontend Developer), 리온(Frontend Developer), 개수(Product Owner), 엠제이(Product Designer)
인프런 모바일 웹 강의실 개편기
인프런 모바일 웹 강의실이 개편*되었습니다. 발단은 인프런 앱에 남겨진 좋지 않은 평가였어요. 인프런이 개발 강의를 다루는 회사이고 개발 팀이 작은 편이 아닌데 인프런 모바일 앱은 왜 불편한가에 대한 이야기가 많았거든요. 그래서 급히 모바일 웹 강의실 개선을 진행하기로 했어요. 인프런 팀이 앱보다는 웹을 더 잘 다룰 수 있다고 판단했기에 비교적 빠르게 진행할 수 있는 모바일 웹을 개선하기로 했고요.
* 인프런 모바일 웹 강의실 개편 공지사항
프로젝트에 참여한 팀원들의 이야기를 들어보니 모바일 웹*을 개선하는 일은 쉬운 작업이 아니었어요. 모두 하고 싶은 말이 많은 듯했습니다. 개수(Product Owner), 리온(Frontend Developer), 빠삐코(Frontend Developer), 엠제이(Product Designer)의 인프런 모바일 웹 강의실 개편기를 인프랩 실록에 기록해 봅니다.
*데스크톱 PC용 웹사이트와 별개로 모바일 브라우저에서 이용자들이 편하게 이용할 수 있도록 PC용 웹사이트를 모바일 크기에 맞춰 줄여놓은 것.
🌱
모바일 웹 강의실을 개선하게 된 이유가 궁금해요.
개수 : 모바일 웹 강의실 학습 편의성을 개선하려고 프로젝트를 진행했어요. 이전까지는 인프런에 개발 강의가 많다 보니까 인프런 서비스의 PC 사용률이 거의 90%거든요. 그래서 지금까지는 PC 위주로 강의실 사용성 개선을 진행했었어요. 모바일에서의 사용성에 대해 내부 팀원들도 아쉬움이 있었고 그래서 모바일 웹 개선을 하게 되었어요. 근데 앱 이야기를 하는 게 조금 멋쩍긴 해요.
빠삐코 : 모바일 웹 강의실 개편기라고 해서 앱에 들어갔는데 앱 바뀐 거 없던데?라는 반응이 나올 수도 있어요. 모바일 웹 강의실이 개선된 거라서 설명을 잘 해야 될 것 같아요.
모바일 웹 강의실 개선 전과 후를 비교를 했을 때 어떤 게 달라졌을까요?
개수 : 강의실 셀조직이 따로 있진 않아요. 그래서 이번 프로젝트의 초점은 모바일 웹 강의실의 장기적인 고도화를 위한 기본기를 다져 놓는 거였어요.
그래서 모바일 웹 사용자에게 익숙한 사용성을 구현해 주는 게 핵심이었고요. 다른 영상 콘텐츠 플랫폼에 들어갔을 때와 같이 엄지손가락만 가지고 정보를 확인하고 액션을 수행하는 게 용이하다고 느껴지게 하는 거예요. 그 자연스러움을 만들기 위해서 전반적인 UX 수정이 있었어요.
구체적으로 차이를 만들어낸 부분은 4가지가 있는데, 먼저 수업 자료와 커뮤니티, 학습 노트 등이 포함된 [학습 보조 기능]의 활용성을 개선했어요.
* 모바일 웹 강의실 UX 개편 화면 (전과 후)
[수업 자료]의 경우, 기존에는 영상 하단 영역에 불규칙하게 노출돼서 인지하기 어렵거나 가독성이 떨어지는 문제가 있었고요. 이번에 개선하면서 수업 자료를 별도의 탭으로 분리해 풀 페이지 형태로 노출시키도록 변경했어요.
[커뮤니티]도 게시글의 조회 및 작성이 하단의 한정된 영역에서만 이루어졌는데요. 여기도 풀페이지로 변경해서 조회와 작성을 용이하도록 했고 질문 게시글에 대한 검색 UX와 성능을 개선해 원하는 글을 빠르게 찾을 수 있도록 수정했어요.
[학습 노트]는 글이 길어지면 항상 상단으로 스크롤 해야 되는 문제가 있었거든요. 그래서 작성란이 상시 상단에 노출되어 영상 시청과 작성을 용이하게 만들었어요.
마지막으로는 강의 형식 따라서 다른 뷰(View)로 노출되게 변경했어요. 기존에는 영상 강의에 적합한 형태로만 보여줄 수 있었는데, 이제는 텍스트나 이미지로 구성된 전자책 강의도 풀 페이지에서 해당 형식에 맞는 뷰로 노출되도록 변경했어요.
리온 : 개발적으로는 개수가 말씀해 주신 기능들을 크로스 브라우징 이슈가 없도록 구현했고요. 추후에 유지 보수나 협업에 용이하게 디자인 시스템으로 구축했어요.
엠제이 : VOC*에서도 진도율 시간이나 분 단위로 보여달라라는 내용이 있었거든요. 작업하면서 VOC를 참고해 개선했습니다.
*Voice Of Customer : 고객의 목소리 (줄임말)
진입하자마자 강의 진도율과 커리큘럼, 목차 중심으로 보여주는 디자인으로 변경했고, 진도율이나 섹션 강의 시간 등을 시/분으로 볼 수 있도록 개선했어요. 자연스럽게 내가 어느 세션을 들었는지 알 수 있게끔 목차 중심으로 탐색할 수 있는 방식으로요.
* 인프런 강의 플레이어에서 영상 화면의 우측/좌측을 두 번 탭하면 특정 초(sec.) 단위로 건너 뛰는 기능의 예시
강의 플레이어에서는 유튜브와 같이 더블 탭으로 스킵 하는 기능이 추가됐고, [뒤로 가기]를 직관적으로 보여줄 수 있도록 맨 위에 내비게이션 바(Navigation Bar)를 변경해 주는 개선이 있었어요. 이것도 VOC에서 강의에서 나가는 방법들이 직관적이지 않다는 의견을 참조했어요.
임베딩(embeding)된 영상 강의와 텍스트로만 구성된 두 가지 강의 형식에서 모두 일관된 경험을 제공하기 위한 작업을 진행했고요. 또 버튼을 눌렀을 때 의도치 않은 경로로 가는 경우들이 있었는데 그 부분도 함께 수정했어요.
* 수강 권한이 없을시 의도치 않은 경로로 이동하는 UX 수정 예시 화면
디테일한 내용들이 많이 수정 되었네요.
개수 : 네. 전반적인 UX가 수정되었고, 전체적인 틀 자체가 바뀌었어요.
리온 : 모바일에서 자연스럽다고 여겨지는 행동이 있거든요. 예를 들어 끝부분을 잡아서 스크롤 했을 때 이전 페이지로 간다거나 그런 것들이요. 사용자가 모바일 웹에서 자연스럽게 동작한다고 느끼게 만드는 작업을 했어요. 기존에는 스크롤(scroll)해서 드래그(drag)하면 바로 강의실에서 탈출했거든요. 그런 흐름을 가로막는 액션들을 수정했습니다.
개수 : 손가락으로 수행하는 액션들을 모바일 웹 상태로 두면 모바일 앱하고는 현저히 다른 사용성이 나오는데요. 이번에는 모바일 웹에서 구현했지만 앱과 유사한 사용 경험을 드릴 수 있도록 작업했어요. (유튜브 같은) 다른 영상 콘텐츠 플랫폼들처럼 쓰고 있다고 느끼게 만드는 작업의 일환이었어요. 요즘은 모바일 웹을 개선할 때 이런 방향을 많이 선택하거든요. 웹인데 앱에 가깝게 만드는 형태로 구현하고 저희도 이 부분을 녹여내려고 노력했어요.
엠제이 : 영상 콘텐츠나 교육 콘텐츠를 제공하는 서비스에서 익숙한 사용성이 무엇인지 리서치를 하고 참조해서 적용시켰어요.
모바일 웹으로 강의를 들으셨던 분들은 확실히 편해지겠어요. 인프런 모바일 웹 강의실을 개편하면서 어떤 것들을 가장 중요하게 생각하셨나요?
개수 : 모바일 웹이지만 앱처럼 느껴지는 사용성이라고 생각해요. 유저들이 정확히 뭐가 바뀐지 몰라도 그냥 자연스러워졌다고 생각하면 성공이라는 생각으로 작업했어요.
레퍼런스를 참조하고 저희가 잡은 디테일들이 모여서 자연스럽다고 느끼면 성공이다. 그걸 중요하게 생각했던 것 같아요.
불편하지 않았다고 느꼈으면 성공이다. 가장 기본적이면서도 중요한 부분인 것 같아요.
개수 : 저희가 기존 모바일 웹에서는 제공해 드리지 못했던 것 같아요.
리온 : 그리고 기술적으로는 기존에 있던 코드들이 통일되어 있지 않았거든요. 기존 디자인과 똑같지만 다른 코드를 사용하고 있었어요. 조금씩 다른 코드를 통일하기 위해 디자인 시스템을 구축하면서 모바일 웹 강의실을 함께 개발했어요.
모바일 웹 강의실 기능은 원래도 있었기 때문에 기존의 코드를 기반으로 작업해야 되는 경우가 많았어요. 기술적으로는 레거시 코드를 살리면서 개선된 기능이 동작하도록 만드는 게 가장 중요했어요.
엠제이 : 저는 익숙하고 일관된 경험으로 제공하는 게 가장 중요하다고 생각했어요.
* 영상 강의와 텍스트로 구성된 강의에서 모두 일관된 경험을 제공하기 위한 작업.
개수 : 익숙함이랑 일관된, 이라는 표현이 딱 맞는 것 같아요. 지식공유자가 강의를 어떤 형식으로 세팅해도 강의 형식에 어울리는 형태로 보여야 하는데 기존 모바일 웹에서는 그렇게 하지 못했거든요. 강의를 어떤 형태로 올렸냐에 따라 뷰가 영향을 받는 구조였다면 지금은 강의 형식에 적합하게 보이는 방향으로 구성했어요.
진행하면서 어려웠거나 아쉬운 부분은 어떤 지점이었어요?
개수 : 강의실 영역은 오랫동안 유지된 레거시이고 개발을 맡아오셨던 빠삐코가 있었지만 담당 PO가 없던 영역이었어요. 그래서 강의실 내부의 기능과 로직이 어떻게 동작하는지를 이해하는 게 빡셌던 것 같아요. 강의실 개발 히스토리가 문서로 잘 정리되어 있거나, 제가 강의실을 다뤄봐서 이해도가 높았으면 흡수가 빨랐을텐데 그렇지 않았거든요.
리온 : 저는 다른 TF와 작업 영역이 약간 겹치면서 컨트롤하기가 힘들었던 것 같아요. 에디터 관련 작업들을 다른 TF에서 하고 있었거든요. 그런데 변경 사항이 저희 쪽에 반영이 안 돼서 충돌이 난다거나 버그가 터지는 이슈가 있어서 컨트롤하는 게 어려웠어요.
빠삐코 : PC 강의실을 개편 하고, 강의실 모바일 웹 개편을 진행했거든요. 사실 처음엔 모바일 웹 사용성은 고려하지 않고 개발했어요. 그래서 불편한 점이 많았어요. 기존 레거시(legacy) 영역에서 신규 스펙으로 변환하는 과정에서 누락된 기능들이나 UX가 있었는데 그걸 이번에 모바일 웹에서 새로이 구현하는 작업이 어려웠어요. (웃음)
개수 : 모바일 앱으로 개발하면 핸드폰 자체에 네이티브 기능을 쓸 수 있어서 구현 영역이 넓고 컨트롤 할 수 있는 영역이 많은데, 모바일 웹으로 구현하면 iOS나 androidOS의 자체 기능을 활용할 수가 없어요. 그래서 모바일 웹으로 구현하는 작업이 개발자한테도 난이도가 높고 기획자에게도 제약이 있어요.
빠삐코 : 당연한 기능인데 앱처럼 만들기 위해 웹에서 적용해야 되는 꼼수들이나 여러 가지 동작들을 자연스럽게 서빙하는 게 어려웠어요.
엠제이 : 모바일 웹에서 강의를 볼 때는 가로모드 사용률이 제일 높은데요. 가로모드를 최적의 환경으로 제공하려면 웹에서는 한계가 있다고 생각을 하거든요. 앱까지 개선을 못한 게 많이 아쉬워요. 일단 사파리나 크롬 모바일 웹 브라우저도 특성상 위아래에 주소창이 나오거나 아래 툴바가 나와서 항상 차지하는 영역도 있고요. 앱으로 개발하면 그런 영역도 다 활용할 수 있거든요. 제한된 영역에서 많은 것들을 넣다 보니까 어려움이 있었어요.
개수 : 모바일 웹에서는 휴대폰 자체 기능에 대한 통제권이 없기 때문에 우리가 원하는 동작이나 기능을 보여주는 게 힘들어요.
리온 : 브라우저 간의 동작 차이도 있었어요. 예를 들어서 크롬에서는 잘 동작하던 게 사파리에서는 동작을 안 하는 케이스가 많았어요. 이전에는 잘 동작했던 키보드 액션도 크롬에서 잘리거나, 사파리에서는 생각지도 못한 공백이 생겨서 UI를 깨뜨린다거나 하는 경우도 있었고요.
당연하게 구현될 것처럼 생각했던 것들이 발목을 잡았군요.
개수 : 유저 입장에서는 이걸 왜 이렇게 만들어놨지?라고 느낄 수도 있지만 피와 눈물이 다 들어가 있는 기능이에요. 하고 싶어도 못하고 그렇게 남겨진 게 웹 환경에서 개발했기 때문에 그럴 수도 있어요.
엠제이 : 작업하면서 발견한 것도 있어요. 크롬에서 가로 모드로 돌리면 뷰가 잘려서 안 보이는 현상을 모르고 있었거든요. 이번에 개선했어요.
리온 : 이전에도 있었던 문제였는데 티가 안 나서 몰랐던 거였어요.
개수 : 프로젝트 기간이 두 달인데 쌓여 있는 인입 CS는 많고, 기술적 제약도 빡세다 보니까 우선순위를 정리하고 욕심을 버리는 과정이 힘들었던 것 같아요. 하고 싶은 건 많은데 할 수 없으니까요.
고생하셨습니다. 다음 계획은 어떻게 되는지 궁금해요.
개수 : 이번에는 자연스러운 사용성을 확보하고 기본을 잘하는 게 중점이었다 보니, 기능 추가가 거의 없었어요. 그래서 다음 기회가 생기면 사용자가 필요로 하는 기능들을 추가하고 싶어요.
엠제이 : 정리하다가 VOC에서 해결되지 않은 부분을 보게 되었는데요. 진도율이 실제 시청 기록과 일치하게 만드는 부분, 그리고 디자인은 해두고 반영하지 못한 건데 일시정지 후 재생할 때 (유튜브처럼) 터치하면 아이콘이 띄워지는 기능이 있거든요. 그 기능도 다음 계획으로 진행하면 좋겠어요.
그리고 여타 영상 서비스에서 재생 영역의 바를 드래그하면 미리 보기 화면이 뜨는 기능도 제공하고 싶어요. 할 수 있다면 적용해 보고 싶어요.
영상 플레이어가 고도화되는 방향이네요.
개수 : 그렇죠 원하는 건 플레이어 쪽에 많이 몰려 있는데 플레이어 쪽을 컨트롤하는 게 쉽지 않거든요.
리온 : 자잘한 버그도 없애고 싶어요. 고백하자면 제가 군대 훈련소 갔다 와서 처음 맡은 프로젝트였거든요. 사람이 일을 한 달만 안 잡고 있어도 까먹더라고요. 멋모르고 짠 코드를 한번 정리하는 시간을 가지고 싶네요. 기능에 문제가 있거나 한 건 아닙니다. (웃음)
빠삐코 : 확실히 강의실 담당 팀원이 있으면 좋을 것 같긴 해요.
개수 : 강의실을 담당하는 셀이 아직 예정에 없어요. 지금으로서는 커뮤니티 셀이 제일 많이 보게 될 것 같아요. PO끼리는 다 잘 알고 있어야 하는 영역이니 강의실은 공통 영역이라고 생각하고, 여유가 되는 팀원이 대응하자고 이야기했어요.
마무리를 해볼까요. 하고 싶은 말이 있다면 한 마디 부탁드려요.
개수 : 강의실 영역을 계속 팔로우 할 수 있었다면 좀 더 할 말이 많을 것 같아요. 지금은 인프런에서 학습하면 편하고 집중이 잘 된다는 말을 나중에라도 들을 수 있으면 좋겠다, 그런 마음입니다.
빠삐코 : 어려워요. 담당이 아니게 되니까 붕뜨는 것 같긴 해요.
엠제이 : 지금은 각자 다른 프로젝트를 진행하고 있으니까 강의실에 대해서 고민하고 추적하고 있지 않아서 그런 것 같아요. 어쨌든 다들 수고하셨어요.
개수 : 그래도 강의실을 만져볼 기회가 있어서 좋았어요.
리온 : 어떻게 보면 인프런 서비스의 메인 영역이잖아요. 만져볼 수 있어서 영광이었습니다.
개수 : 핵심 코어를 만들어볼 수 있어서 저도 영광이었어요. 강의실을 모바일 웹으로 다뤄보는 경험도 많지 않을 것 같아요.
엠제이 : 다음에는 앱을 개편해 보고 싶어요.
개수 : 저도 교훈이 이쪽으로 남았어요. 웹으로 하는 건 힘들다. (웃음)
엠제이 : 나중에는 앱으로 제공하면 좋겠어요. 유저분들의 만족도를 높일 수 있을 것 같아요.
인터뷰하는 내내 모바일 웹 강의실 TF 담당 팀원들의 아쉬움이 느껴졌어요. 지금은 다른 셀에 소속되어 각자 인프런의 다른 기능들을 만들고 있지만 마음 한켠에는 강의실에 대한 불씨가 남아 있달까요.
아직 부족하고 아쉬운 점도 많은 인프런 모바일 웹 강의실입니다. 저희 팀도 뚝딱뚝딱 고쳐야 할 부분이 많다는 걸 알고 있어요. 조금씩 수리해 나가겠습니다. 모바일 웹으로 강의를 보며 제안하고 싶은 내용이 있다면 [인프런에게 바란다]로 남겨주세요. 감사합니다.
인프런에 아직 개선할 점이 많이 보이시나요?
그렇다면 우리 함께 개선해나가요.
