나만의 무기 아이디어 초안 공유 - (가제)라이브드로잉 서비스 소개

emplam27·2021년 3월 8일

안녕하세요. 김용욱입니다.

이번 나만의 무기 만들기 프로젝트를 위한 주제로 '(가제)라이브드로잉' 서비스를 준비하게 되었습니다. 읽어보시고 궁금한 점이 있으시면 편하게 물어봐주세요! 😀😀

프로젝트 배경

워라벨이 중요시 되면서 직장인들이 여가 시간을 알차게 보낼 수 있는 취미활동, 자기개발 활동을 찾고 있습니다.
코로나가 겹치면서 서적, 동영상 등 성인대상 취미생활 시장이 증가하고 있습니다. 특히 비대면 드로잉 클래스에 대한 수요가 증가하고 있는데, 실례로 'Class 101'의 인기강의 1위로 아이패드 드로잉 강의가 선정되었습니다.
이러한 수요에 맞춰 다른 사람이 그렸던 드로잉 과정을 쉽게 따라그릴 수 있게하는 어플리케이션을 제작하고자 합니다. 드로잉 강의에 사용될 뿐만 아니라 여러사람과 다양한 기기와 환경에서 즐길 수 있는 드로잉 엔터테인먼트 서비스를 만들고자 합니다.
또한, 성인이나 아동 대상 드로잉 교육이나, 수학, 영어 등 아동들의 교육용 어플리케이션으로 활용하며 강의를 녹화하고 수익을 창출할 수 있습니다.

프로젝트 기능

라이브드로잉 서비스는 두가지의 주요한 기능을 가지고 있습니다. 두가지 기능의 초안을 공유드리며, 팀원들의 의견에 따라 언제든지 기능은 변경될 수 있습니다.

기능 1. 라이브 드로잉 기능

실시간 드로잉 기능
- 여러 사용자와 한 그림을 공동으로 그릴 수 있는 라이브 기능입니다. 호스트는 방을 개설하여 방에 입장한 여러 사용자들과 캔버스를 공유할 수 있습니다.
- 특정 사용자만 입장이 가능한 프라이빗 룸을 개설하거나 공개라이브를 통해 불특정 다수의 사용자와 소통할 수 있습니다.
드로잉 레이어 기능
- 드로잉 레이어 기능이 없으면 자신이 그린 부분을 지우다가 남의 그림에 영향을 줄 수 있습니다.
- 특정 사용자는 자신만의 레이어에 그림을 그릴 수 있으며, 레이어의 위치를 변경하여 그림간의 위치나 표현 높이를 조절할 수 있습니다.
- 호스트는 특정 사용자의 레이어를 지워 덮어써진 그림을 쉽게 없에거나 그림을 자신의 레이어에 병합할 수 있습니다.
드로잉 & 음성채팅 권한 기능
- 불특정 다수가 입장하는 공개라이브의 경우 아무나 그림을 수정하게되면 문제가 발생할 수 있습니다.
- 호스트는 사용자들의 음성대화나 드로잉 권한들을 부여할 수 있으며, 권한이 부여된 사용자들만 음성대화를 하거나 그림을 그릴 수 있습니다.

기능 2. 드로잉 클래스 제작 & 수강 기능

드로잉 클래스 제작 기능
- 드로잉 튜터는 본인의 드로잉 과정을 단계별로 녹화 및 저장할 수 있습니다.
- 튜터의 드로잉 과정과 목소리가 함께 녹화되며, 튜티가 드로잉 과정을 시간대별로 마음껏 재생할 수 있습니다.
- 튜터가 저장하여 공개한 드로잉 과정은 게시판을 통해 튜터들과 공유하거나 판매할 수 있습니다.
드로잉 클래스 수강 기능
- 튜터가 그렸던 드로잉이 튜터의 화면에 목소리와 함께 단계별로 재생됩니다. 튜터는 모든 과정을 마음껏 이동하며 확인할 수 있고, 해당 드로잉의 투명도를 낮춰서 밑그림으로 활용할 수 있습니다.
- 튜티는 재생되고 있는 튜터의 드로잉 과정을 멈추고 해당 드로잉 위에 자신이 직접 그림을 그리거나 지우며 편집할 수 있습니다.
커뮤니티 기능
- 드로잉 클래스를 열거나 수강, 요청할 수 있습니다.
- 인기있는 강의들의 순위를 확인하고, 검색할 수 있습니다.
- 난이도나 유사한 클래스 등 사용자에 맞는 강의를 추천받을 수 있습니다.
- 튜티와 튜터 간에 실시간 채팅, 음성채팅 기능을 지원합니다.

기술스택

Web 클라이언트
- React를 사용하여 다양한 기기에서 사용할 수 있는 반응형 웹을 제작할 예정입니다.
- 유지보수와 일괄편집을 위해 styled-component 또는 SCSS(SASS)를 사용할 생각입니다.
- 언어는 TypeScript를 사용할 예정입니다.
App 클라이언트
- Web 클라이언트를 통해 서비스를 구현한 후에 이를 기반으로 App 클라이언트를 제작합니다. 멘토님들이 배정된다면 어떤 방법으로 App을 구현할지 의견을 여쭤볼 예정입니다.
- React Native 또는 Flutter를 사용한 크로스플랫폼 앱을 제작 예정입니다.
- 또는 React로 제작한 웹을 PWA(Progressive Web App)로 만드는 방법 역시 생각 중입니다.
백엔드
- 팀원들이 원하는 도메인(Spring, Node.js 등)을 사용 예정입니다. DB 역시 사용성에 따라 선택할 예정입니다.
- API 서버와 실시간 통신을 위한 Websocket 서버 등 총 2개의 서버를 제작할 예정입니다.
단위테스트
- JS 환경(React, Node.js 등)에서는 Jest, JAVA 환경(Spring)에서는 JUnit을 사용하여 단위 테스트를 진행할 생각입니다.
- 정적분석을 위해 SonaQube 역시 활용 가능합니다.
CI/CD
- AWS, NGINX, Docker, Jenkins, Github action을 이용한 자동배포 환경을 구성할 예정입니다.
- 또한 Slack과 연동하여 에러 메세지나 빌드 실패 여부 등을 받을 수 있게 자동화 세팅을 진행할 예정입니다. 팀원들 모두 경험해보면 매우 좋은 기술이라고 생각합니다.
협업툴
- Slack, Notion을 활용한 칸반보드, 스플린트 단위의 일정관리를 수행해볼 예정입니다. 실제 업무환경에 많이 적용되는 일정관리 방법인 만큼 직접 적용해보면 좋을 것 같습니다.

기술적 특이점 및 기대경험

다양한 기기나 환경(웹과 앱 등)에서 동작하는 서비스를 제작하려고 합니다. 하나의 서버에서 여러 기기의 요청을 받을 수 있게 하고, 웹 브라우저별 또는 안드로이드, iOS 기기별 고려사항을 이해하고 개발할 것입니다. 앱 버전이 출시된다면 Play Store에 배포할 예정이나, App Store에 경우 등록까지 오래 걸리는 점이 고민입니다.
드로잉 어플리케이션에서 사용자가 필요로 하는 기능들은 대부분 구현한 드로잉 앱을 제작해야 할 것입니다. 배경화면이나 대지, 다양한 브러쉬의 종류나 자연스러움 또한 고려해야 할 사항입니다.
녹음되는 목소리와 기기에 그려지는 그림의 좌표가 동시에 다른 클라이언트에 전송되거나, 한 파일로 저장되어 다른 기기에서도 재생되어 그림이 그려질 수 있어야 합니다. 이러한 데이터를 어떻게 저장하고 관리할 것 인지, 관련 파일의 포맷을 어떤식으로 설정할 것인지 등 시스템적인 이해를 할 수 있습니다.

운영진 코멘트

드로잉과 목소리의 싱크, 통신, 레이어링 등 기술적이나 시스템적인 역량을 보여줄 수 있을 것 같음
드로잉 기능보다도 실시간 통신같이 추가적으로 붙일 기능들이 풍성한 느낌
앱도 괜찮지만 웹에서도 동작한다면 웹에 대해 깊이있는 느낌의 포트폴리오가 될 수 있음
앱으로 이관하는 작업은 앱으로 이관하는 작업이 기술적으로 많이 어려울 수도 있음. 앱 이관은 웹 기능 구현 이후 진행하는 것을 추천
시스템적인 성능 최적화를 생각해볼 수 있음 - 음성과 드로잉을 한번에 전달하려면? 저장한다면 어떻게 용량을 작게?
데모에 용이하기에 실시간 드로잉 기능이 더 임팩트 있을 것 같음.
실시간성, 서버가 없이 진행되는 경우에는 고민해야 할 요소들이 엄청 많아짐 - 그것들을 어떤식으로 풀었다라는 과정이 포트폴리오에 들어갈 내용들임