Project Telltale Diary

Javascript를 배우고 있습니다.
스토리 기반 언어 교육 서비스 프로젝트를 시작하려 합니다.

1. Project Idea

1. 프로젝트에 들어가기에 앞서

• 1달 간 길고양이 돌봄 커뮤니티 모바일 어플리케이션을 만든 후 최근 들어서 자잘한 서비스 유지보수를 해왔다. (기기별로 글씨가 잘리는 부분 수정, 리스트 정렬 부분 수정, 마이페이지에서 고양이 지도 쪽으로 이동하는 기능 추가 등)
• 나름 재미있는 프로덕트라서 비단 길고양이만을 위한 서비스가 아니라 길고양이 + 집냥이들을 타겟으로 서비스를 확대해서 길고양이에게 친화적인 유저들을 확보하고 비즈니스 가능성도 높이면 좋겠다는 생각에 팀원들과 추가 개발 논의를 하는 중이다.
• 그와 별개로 개인 프로젝트를 진행하려고 한다. 프로덕트를 만드는 것도 재미있지만 지난 프로젝트에서는 React Native와 Mobx를 경험하는 좋은 기회였기 때문에 이번 프로젝트에서도 스택을 배우고 적용해볼 수 있는 좋은 기회로 삼으려 한다.

2. 그래서 내가 진행할 프로젝트

• 이번 프로젝트 이름은 Telltail이다. tell(말하다)+tail(이야기)를 가리키는데 영어교육을 전공한 남편의 아이디어를 서비스로 구현해보기로 했다.
• 주요 키워드는 "개인화, 스토리 기반, 언어 학습"이다. 학습자가 인터랙티브 스토리 기법 기반으로 글을 읽어나가면 그에 맞게 단어를 설명해주고 학습 진도에 따른 스크립트를 개인화하여서 보여주는 서비스이다.
• 학습 효과와 콘텐츠 설계에 대한 부분은 전공자에게 맡기기로 했다.(나도 교육을 전공하긴 했으나.. 이번 프로젝트에서 나는 유일한 개발자이므로 여기에 집중하기로 한다. 뿌듯한 순간)

3. Stack

• 이번 프로젝트는 데스크탑 위주의 웹앱으로 갈 예정이므로, 클라이언트에서는 내 주력 스택인 React를 적용하고 Redux를 활용해볼 생각이다. 지난 프로젝트에서 채택했던 Mobx와의 차이를 확연하게 느껴보고 싶어서이기도 하고, 정말 React가 Redux와 죽이 잘 맞아 단방향 데이터 통제가 잘 되는지 검증해보고 싶은 마음도 있기 때문이다.
• 이번에는 개인 프로젝트이기 때문에 백엔드도 내가 구성해야 하므로 그간 배웠던 Express로 서버를 만들어 보려고 한다. DB는 학습 콘텐츠 등 최초 주입 시 대량의 데이터가 들어가고, 나머지는 부가적인 업데이트가 있을 것으로 예상되어(조금 더 구체적으로 스키마를 들여다 보긴 해야겠지만...) 일단은 MongoDB를 생각하고 있다.
• 이번에는 나 혼자 작업을 하기 때문에 누가 실수를 잡아주기 어려울 것 같아 Jest를 이용해 유닛 테스트에 신경을 써야겠다는 다짐을 한다.

2. 기획

1. 전체 서비스 구조 파악

• 이번 프로젝트는 내 아이디어가 아니라 아이디어를 듣고 구현하는 입장이기 때문에 어떤 식으로 서비스를 설계하기 원하는지 설명을 들어야 했다. 이것도 좋은 훈련이 될 것 같다.. communication communication communication!!
• 지금까지 확정된 내용
  • 사용자 구분 : 비즈니스 모델이 '구독형 서비스'이기 때문에(꿈은 일단 크게 잡자) 비회원, 비구독 회원, 구독 회원(2개 레벨 존재)으로 구분하기로 했다.
  • 메인 프로덕트 : 인터랙티브 스토리(tale), 사용자가 스토리를 선택해 학습하는 형태이며, 학습 내용/진도/적정 코스 등 모든 것이 스토리 기반으로 이뤄질 예정이다.
  • 콘텐츠 형태 : 1) 사진 + 오디오 파일 + 스크립트 혹은 2) 동영상 + 스크립트
  • 주요 학습은 스토리 페이지에서 이뤄지고, 개인화 된 복습 콘텐츠를 마이페이지에서 확인할 수 있게끔 구성한다.
• 지금까지 합의된 User Story
  • trial 콘텐츠를 경험한 유저가 가입/구독을 결정한다.
  • 메인 화면에 노출된 스토리를 선택한다.(장르, 언어, 스토리로 필터 가능)
  • 스토리 상세 내용(주요 스토리 소개, 학습 레벨, 학습 가능한 언어)을 확인한 후 자신에 맞는 학습 레벨과 학습 언어를 선택한다.
  • 각 스토리를 여러 개의 챕터로 구성되어 있어 chapter1부터 '시작하기'를 누를 수 있다. 원한다면 chapter2나 chapter3부터 시작할 수도 있다. 다만 내용이 이어지지 않을 수도 있어서 사용자는 이에 대한 알림을 받고 학습을 시작한다.
  • 챕터별로 오디오나 영상 기반의 스토리를 실행하면 우측 스크립트에서 실시간으로 단어를 하이라이팅한다.(이 부분이 아주 tricky할 것으로 예상됨)
  • 모르는 단어가 있으면 단어를 클릭하고 하단에 단어 정보와 예문을 볼 수 있다. 원한다면 본인이 공부 후 자신만의 예문을 넣을 수 있다.
  • 스토리 브랜치가 나뉘는 순간에는 2~4개의 선택지가 사용자에게 주어지고, 사용자는 원하는대로 스토리를 선택할 수 있다.
  • chapter를 마치면 전체 chapter 스크립트가 나오고 독해 내용을 확인할 수 있다. (독해도 3가지 레벨이 존재함)
  • 마이페이지의 my study에서 학습하고 있는 스토리들과 학습 진도를 확인할 수 있고 검색했던 단어를 my voca로 모아서 볼 수 있다.
  • 한 스토리를 모두 학습하면 스토리 별 뱃지를 모을 수 있다.

2. 추후 진행사항

• 일단 기획 범위를 듣고 1달 가지고는 안된다는 생각이 들었다. 장기 프로젝트로 생각하고, bare minimum/advanced로 기획 내용을 나눠볼 생각이다.
• 유저 스토리도 구체적으로 보완해 mock design을 진행할 예정이다.
• 기획 내용이 더 정리가 되면 가장 먼저 db 스키마를 짤 예정이다.
• 만만치 않은 프로젝트일 것 같지만 그만큼 성장할 것을 기대하면서 Telltail 첫번째 dev log 끝.