인프런은 어떻게 에디터를 개편했을까?
– TinyMCE 에서 Tiptap Editor 로
인프런에는 UCC 셀이 있습니다. User Create Contents 라는 뜻을 담고 있어요. UCC 셀은 인프런에 들어온 유저가 쉽게 콘텐츠를 만들고 재미있고 유익하게 놀 수 있는 방법을 고민하는 조직이에요.
지금의 인프런은 지식공유자 – 학습자 간의 커뮤니티이지만,
UCC 셀은 학습자 – 학습자 간의 커뮤니티로 발전할 수 있는 방법을 고민하고 실행하고 있어요
얼마 전 UCC 셀은 첫 발걸음으로 인프런 곳곳에 적용된 ‘에디터 개편*’ 작업을 진행했습니다. 글을 쓰거나 질문을 남길 때 편하게 작성할 수 있는 환경이 중요하기 때문인데요. UCC 셀을 만나 인프런 에디터 개편 비하인드 스토리를 들어보았어요.
*[업데이트 소식] 인프런 에디터 개편 안내
UCC 셀은 어떤 문제를 풀고 있나요?
몰리 : 저희 셀에서는 유저가 얼마나 많이 콘텐츠를 생성하느냐가 중요하거든요. 저희 셀에서 그 문제를 풀려고 하고요. 예를 들어 디시*나 블라인드는 심심해서 들어가잖아요. 인프런 커뮤니티에서도 사람들이 강의를 듣지 않더라도 유입되고 활동할 수 있도록 하려고 해요.
*디시인사이드, https://www.dcinside.com/
예박 : 점점 범위가 넓어지는 것 같아요. 인프런이 플랫폼에 가깝다 보니 강의 외에도 사용자가 콘텐츠를 생성할 수 있도록 돕는 셀로 범위가 넓어진 것 같아요. 그래서 앞으로 굉장히 많은 일을 다루게 될 것 같아요.
비케이 : 강의를 올리고 또 보는 주된 흐름 이외에, 인프런에 왜 와야 하지?를 고민하고 있어요. 질문도 하고 ‘저 이런 거 만들었어요.’ 올려서 북적북적 놀기도 하고 서로 답변도 달고 블로그에 글도 쓰는 그런 활동을 잘 할 수 있도록 만드는 일을 하고 있어요.
보니 : 강의를 듣지 않더라도 공부하거나 지식을 나누고 질문 답변을 주고받는 공간을 어떻게 만들어낼지 고민하는 셀이라고 생각해 주시면 될 것 같아요.
많은 일들을 하고 계시네요. 에디터를 개편하게 된 배경이 궁금해요. 어떻게 시작하게 되었나요?
어텀 : 기존의 에디터가 불편했다는 게 제일 큰 이유였어요. 인프런에는 개발 공부하는 분들이 많잖아요. 요즘 개발자분들은 주로 마크다운을 써서 글을 작성하거든요. 인프런에 있던 기존 에디터는 마크다운 지원이 안 되고 코드를 작성하기도 굉장히 불편했어요. 그래서 에디터 개편을 해보자는 이야기가 많았어요.
인프런 대부분의 페이지가 VanillaJS 로 되어 있는데요. 에디터 교체를 모던 스택인 리액트로 전환하고 나서 진행을 하려고 했었는데, 에디터가 불편하다는 유저 목소리가 많이 들어왔어요. 그래서 예상보다 빨리 시작하게 됐어요.
에디터에서는 어떤 것들이 개편되었나요.
몰리 : 공통적으로 많이 사용되는 마크다운 기능을 지원하고 있고요. 마크다운을 쓰게 되면 바로 사용자 눈에 바뀐 모습을 바로 볼 수 있는 형태로요. 그리고 헤드리스 에디터 라이브러리* 의 경우에는 모양이 잡혀 있지 않아요. 그런 것들을 저희가 커스텀하게 디자인해서 UI UX 적으로 사용자가 편하게 쓸 수 있도록 바꿨어요. 그리고 헤드리스 에디터다 보니 저희가 UI나 UX를 여러 형태로 실험하고 유저에게 제공할 수 있다는 장점이 있어요.
*headless UI library : UI는 제공하지 않고, 기능만 제공하는 라이브러리
비케이 : 이번에 플레이스 홀더*가 들어갔어요. 전에는 회색 글자로 스타일이 남아있는 경우가 있었는데 제거 되었고요. 전에는 플레이스 홀더로 안내글로 작성된 내용들이 그대로 남아 있는 경우도 있었는데 에디터 개편 이후로 모니터링했을 때는 보이지 않는 것 같습니다.
*텍스트 필드 내에 있는 짧은 도움말
훨씬 더 깔끔해졌어요.
보니 : 그리고 추가로 보수해야 할 작업들이 있었는데요. 글을 길게 쓰면 에디터 툴바가 가려졌거든요. 마크다운을 쓸 줄 모르는 분들은 에디터를 클릭해서 사용했어야 했는데 최근에 스티키(*)라는 걸 적용해서 툴바 고정 헤더를 만들고 스크롤 할 때도 에디터 기능이 따라올 수 있도록 적용했어요. 뿐만 아니라 댓글 작성란 크기가 작았어서 작성란 크기도 늘리고 긴 글을 쓸 때 작성란이 자동으로 늘어나도록 하는 등 보수 작업을 하고 있는 상황이에요.
각자 에디터 개편하면서 어떤 부분에 신경 쓰셨나요?
예박 : 서포터로서 TF를 일정 내에 마무리할 수 있도록 돕는 게 저의 미션이었던 것 같고요. 어떤 기능을 MVP*로 만들 수 있는지 어떤 걸 체크해야 되는지를 위주로 봤어요. PO가 발의해 시작한 프로젝트가 아니라서 따라가야 되는 면이 있었거든요.
*최소 기능 제품 – Minimum Viable Product
어텀 : 원래 VanillaJS 에서 리액트로 개편한 후에 진행하려 했다가 앞당겨서 했다고 말씀드렸잖아요. VanillaJS 로 되어 있는 페이지와 리액트로 되어 있는 페이지 둘 다 에디터를 교체를 해야 되는 상황이었어요. 그래서 두 기술 스택에서 동시에 사용할 수 있으면서 기존의 에디터 기능을 모두 지원하고 또 마크다운 기능이 지원되는 에디터를 찾는 걸 제일 많이 신경 썼어요.
비케이 : 이전의 TinyMCE 에디터와 비교하면 원래 제공하고 있던 기능 중에서 일부 기능을 빼와서 디자인을 했어요. 기간이 한정적인 것도 있었지만 이런 생각도 있었어요. ‘모든 기능을 제공하는 게 좋은 UX 인가?’ 하는 의심도 있었고요. GTM을 달아서 사용성을 데이터로 확인해 보자는 이야기도 했어요. 이렇게 해서 일부 기능들만 먼저 제공하는 것도 신경 썼던 부분이에요.
몰리 : 저는 커스텀이 가능한 에디터인지를 많이 봤어요. 왜냐면 사용자 친화적인 에디터를 제공하기 위해서는 어느 정도 커스텀이 필요하거든요. 저희가 생각하는 기능이 라이브러리에서 다 구현이 안 돼 있을 수도 있는 거잖아요. 그래서 커스텀이 잘 되는지를 고려해서 개발을 진행했어요.
비케이 : 에디터가 쓰이는 데가 굉장히 많잖아요. 그래서 이걸 가져다가 다른 데서 또 사용할 수 있는지를 계속 이야기했던 것 같아요. 스티키(Sticky) 기능도 ON/OFF 로 제공해서 선택지를 준다든지 그런 범용성적인 부분도 고려했고요.
보니 : 여러 환경에서 에디터 기능이 구현되고 동일하게 동작하는가를 가장 신경 썼어요. 이 프로젝트를 잘 완수한다는 건 에디터가 잘 동작하는 거라고 생각했기 때문에 QA 쪽에 신경을 많이 썼고 티켓도 굉장히 많이 나왔어요. 앞으로 보수해야 될 부분도 남아 있고요. 에디터 교체하는 작업이 단순한 프로젝트가 아니라는 생각이 들었어요.
에디터 개편하면서 기억에 남는 에피소드가 있었을까요.
몰리 : 개발자가 에디터 라이브러리에 기여할 수 있는데요. 에디터 자체의 코드를 바꿀 수 있어서 어텀과 제가 에디터의 코드에 기여하는 경험을 했어요. 현재 저희가 쓰는 에디터에서 코드블록* 기능을 조금 미흡하게 지원하는 부분이 있어서 어텀과 제가 디깅을 해서 에디터에 기여를 했었거든요. 이 경험이 처음이기도 했고 기억에 남아요.
*코드를 입력하면 하이라이팅을 주는 기능. 문법에 맞게 색상이 바뀌기도 한다.
비케이 : 첫 CS가 기억나요. 장문으로 왔었는데 미리 생각해 볼 수 있는 부분이기도 해서요. 예를 들면 글자 간격이라든지 말씀해 주신 게 맞는 내용이기도 했고요. 반성했어요. (웃음) 아무래도 고객의 목소리가 바로 오다 보니 기억에 남아요.
보니 : CS에서도 에디터를 갑자기 왜 바꾸냐는 뉘앙스가 종종 있었어요. 모든 사람이 그렇게 느끼는 건 아니어서 의견을 들어가며 조금씩 개선하고 있어요.
어텀 : 문제를 해결하는 방법을 몰리한테 많이 배운 것 같아요. 평소에는 문제를 만나면 구글링 하거나, GitHub의 Iuuse 탭에서 찾아보거나, 디스코드에 들어가서 채팅으로 질문 답변을 하는 방식으로 문제를 해결했었는데요. 이번에 직접 코드를 바꿔서 빠르게 해결할 수 있다는 걸 배웠어요.
보니 : 저는 입사하자마자 셀이 생기고 TF에 바로 들어갔거든요. 저희가 처음에는 너무 어색했었고 서로 커뮤니케이션이 많이 부족했거든요. 한 3주차 지나고 부터는 안 되겠다 싶어서 그때 이후로 얘기하기 시작했고 그때부터 핑퐁을 많이 했던 것 같아요. 그래서 TF 과정 자체가 기억에 남아요. 친해지기 전부터 후까지 분위기가 많이 달라졌어요. 많이 좋아졌어요.
몰리 : 회고할 때 이야기했는데, 보니는 저를 무서워했었고 저는 보니를 무서워했었더라고요. (웃음)
에디터를 개편하면서 새롭게 배우거나 알게 된 부분이 있었나요.
어텀 : 도입한 에디터가 완성형 에디터가 아니라 기능만 제공하는 헤드리스 라이브러리였어요. 저는 헤드리스 라이브러리를 처음 써봤는데요. 쉬울 줄 알았는데 생각보다 기능이나 스타일 이슈, 버그들이 많이 나와서 헤드리스 라이브러리를 도입할 때 일정을 보수적으로 잡아야겠다고 생각했어요.
그리고 사실상 VanillaJS 와 리액트, 이렇게 두 개의 에디터를 만드는 거나 다름이 없었는데 이렇게 되면 업데이트해야 될 내용이 생겼을 때 양쪽에 적용시켜줘야 해요. 그래서 유지보수 하기가 어려워요. 이번에는 유저의 요청이 많아서 두 벌의 에디터를 만들게 됐지만 다음에는 유지보수 측면도 고민해 봐야겠다고 생각했어요.
보니 : 저는 기능을 개발한다면 개발자가 뚝딱뚝딱 처음부터 끝까지 만든다고 생각했는데요. 스타트 지점을 다르게 생각하고 라이브러리를 활용해 우리에게 맞는 방식으로 커스텀하는 새로운 방식을 알게 됐어요
몰리 : 저는 있는 것에 맞추는 사람이거든요. 그래서 과연 이게 불편한가? 하는 의문이 있었어요. 인프런 UX/UI가 안 이쁘다고 하지만 저한테는 예쁘게 느껴지 거든요. 너무 편해요.(웃음) 근데 CS로 여러 사람들의 의견을 들어보니까 이게 불편하다는 걸 알게 된 것 같아요. 그래서 사용자 편의성과 관련한 생각이 바뀌게 됐어요.
진행하면서 어렵거나 아쉬운 부분은 무엇이었나요?
보니 : 엄청 많죠
예박 : 각 기능을 브라우저 별로 다 체크를 해야 되니까 체크리스트의 양이 많아서 어려웠던 것 같아요. 툴바 기능이 있고 마크다운도 직접 해봐야 되고 단축키 기능도 있어서 세 가지 기능에 대해서 각각 체크해야 되는 거예요. 미처 알지 못했죠. (웃음)
어텀 : 다들 느끼셨을 것 같은데요. 저희가 만들고 싶은 기능은 많았는데 일정이 정해져 있어서 빠른 배포를 위해서 꼭 필요한 것만 놔두고 기능을 많이 쳐냈어요. 그래서 조금 아쉬웠어요. 앞으로는 UCC 셀에서 에디터를 계속 고도화할 예정이니까 많은 관심 부탁드립니다.
몰리 : 시간이 많이 부족했어요. 한정된 시간 내에 두 벌을 만들어서 적용을 시켜야 되다 보니까 QA 하는 분들도 헷갈리고 개발하는 입장에서도 유지 보수가 힘들었고요. 커스텀까지 하게 되면 내부 코드까지 까봐야 하는 상황이 오거든요. 그래서 시간적으로 여유가 없었다는 게 아쉬웠어요.
비케이 : 지금은 커뮤니티 내부 에디터로 한정해 개편되어 있어요. 강의실은 그대로인 거죠. 근데 질문을 작성하는 건 대부분 강의실에서 하거든요. 그런 측면에서 에디터는 교체됐지만 전반적으로 같이 개편했으면 좋았겠다는 아쉬움이 있어요.
몰리 : 사실 배포하고 나서 연휴가 있었거든요. 근데 연휴 동안 커뮤니티 게시판에 글 작성 수가 너무 적은 거예요. 상처받았어요.
보니 : 강의실에서 쓰는데 커뮤니티 메인에서는 작성한 글이 없었던 거죠.
몰리 : 데이터를 먼저 보고 우선순위를 정했으면 좋았을 것 같다는 생각도 들고 조금 아쉬웠어요.
에디터 개편 후에 여기저기서 피드백이 들어오는 것 같았어요. 반응은 어떤가요?
예박 : ‘너무 좋아요. 그런데….’ 하고 여러 개의 피드백이 들어와요. 개선해 달라는 요청이 백로그에 쌓이고 있습니다.
보니 : 백로그가 엄청 많습니다. 저희가 할 일이 많다는 얘기이기도 하고요. 개선을 하니까 더 할 수 있다는 걸 이제 아신 거예요. 에디터에 리소스를 쓰고 있다는 걸 아시니까 요청이 많아진 것 같아요. (웃음) 어쨌든 좋게 반응해주시고 잘 사용하고 계신 것 같아서 좋아요.
일복이 많은 셀이네요. UCC 셀은 다음으로 어떤 기능을 준비하고 있나요?
보니 : 에디터가 좋다는 의견이 많아서 지식공유자가 새소식을 작성하는 곳과 안내글 작성란에도 에디터를 붙이고 있어요. 커뮤니티 뿐만 아니라 에디터를 붙일 수 있는 곳이라면 최대한 적용하는 작업을 하고 있습니다. 다음 스텝으로는 스터디 개편을 크게 하려고 했는데요. 지금 하고 있는 에디터 고도화 작업을 진행하면서 스터디를 개편할 것 같아요.
UCC 셀이 그리는 커뮤니티의 미래는 어떤지 궁금합니다.
몰리 : 한국의 스택오버플로우*가 되면 좋지 않을까 생각해요. 인프런 서비스의 강점 중 하나가 질문이 많고 질문에 대한 답변이 많다는 건데요. 구글링을 하면 인프런 사이트도 많이 나오거든요. 질문들이 많으니까요. 스택오버플로우처럼 유저가 서로 질문을 하고 답변을 달고 많은 지식들이 쌓이는 게 최종적인 그림이지 않을까요.
*https://stackoverflow.com/
비케이 : UCC 쪽은 생산성이 좋아야 한다고 생각해요. 유저가 콘텐츠를 만드는 과정이 유려해야만 커뮤니티가 복작복작해질 것 같아요. 결국엔 사람들이 모여서 재밌게 노는 환경이 갖춰지고 스택오버플로우처럼 되면 좋을 것 같습니다. 인프런에서 회고도 작성하고 공유도 되면 좋지 않을까요.
보니 : 커뮤니티 활동도 하나의 이력으로서 내가 커리어 활동을 잘하고 있다는 걸 증명할 수 있는 수준까지 만들어 나가면 좋을 것 같아요.
개인적인 소감이 궁금해요.
예박 : 저는 몸은 떠났지만 마음은 안 떠났다는 말씀을 드리고 싶습니다. 점점 일도 많아지고 범위도 넓어지지만 서비스의 한 축으로 잘 성장하고 중요한 셀이 될 거 같아요. 앞으로 여러분 수고해 주시고요 (웃음)
어텀 : 많은 유저가 사용하는 기능을 직접 개편하게 돼서 재밌게 작업했어요. 또 유저 피드백이 즉각적으로 와서 더 즐거웠던 것 같아요.
보니 : 지나고 보니 남는 것들이 많았어요. 라이브러리를 활용해서 적용하는 것도 처음이었고요. po의 역할이 어떤 부분에서 중요한지도 알게 되었어요. 에디터를 계속 고도화해 나가는 것도 좋은 거 같아요. 보통 에디터는 이미 교체했으니까 끝!하고 넘어갈 수도 있는데 계속 퀄리티를 높여나가는 것도 좋은 상황이고요. 좋은 경험이라고 생각합니다.
몰리 : UCC 셀에서 많이 배웠어요. 개발자도 직장인이잖아요. 그래서 협업 하는 방식이나 소통하는 방식, 리드하고 공유하는 방식들을 배웠어요. 그리고 필요한 게 있으면 직접 만들 줄 알아야 된다, 라는 사고 방식을 가지게 되었어요. 저희가 원하는 기능이 있을 수도 있고 없을 수도 있잖아요. 완벽한 건 없더라고요.
비케이 : UCC 셀의 첫 번째 프로젝트였는데요. 절대 완벽하다고 생각하지 않고 아직도 많이 부족하지만 좋은 셀원들이 있으니까 앞으로 열심히 개선하겠습니다. 많은 관심 부탁드립니다.
배움과 성장의 토대를 만드는 사람들,
인프랩에서 함께 성장할 동료를 기다리고 있어요