다빈치 SW 공모전

'언택트 시대에 유용한 앱 혹은 서비스를 주제로한 SW 공모전으로
2020-2학기 비공학 전공 재학생 2인 이상이면 참가 가능합니다.

자세히 알아보기

캡스톤 디자인 경진대회

캡스톤 디자인 교과목 수행 결과물 또는 졸업 작품 심사
2019년 2학기, 2020년 1학기 중 한 학기 이상 캡스톤 디자인 교과목을
수강한 학생만 참가 가능합니다.

자세히 알아보기

PE연구활동 발표대회

PE연구/개발 활동을 수행하면서 얻어진 다양한 형태의 결과물
(논문형태의 결과보고서, 논문, 발명품, 작품, 콘텐츠 등)을 심사

자세히 알아보기

SW·AI 창업아이디어경진대회

SW 관련 전공 학부생 여러분!
반짝이는 SW창업 아이디어로 여러분의 미래를 바꾸십시오!

자세히 알아보기

SW·AI융합우수성과 발표회

SW융합전공 / 복수 전공 학생 여러분!
SW융합전공 / 복수전공을 이수하는 과정에서 얻어진 성과를 뽐내 주세요.

자세히 알아보기

다빈치 주니어 SW 작품대회

창의적인 아이디어와 소프트웨어를 활용한
멋진 SW 작품을 만들어 보세요!

자세히 알아보기

다빈치오픈소스 SW·AI 딥러닝 해커톤

4차 산업혁명을 견인하는 심층학습을 주제로한 SW·AI 딥러닝 해커톤으로
소프트웨어대학 재학생으로 구성된 2인 이하 팀으로 참가 가능합니다.

자세히 알아보기

코딩경진대회

소프트웨어 중심 대학으로서 중앙대학교의 소프트웨어 관련
교육 프로그램 성과를 공유합니다.

자세히 알아보기

캡스톤 디자인 경진대회

  • CoCoding

    팀장
    정채문 (소프트웨어학부 | 4학년)
    팀원
    명세교 (소프트웨어학부 | 4학년)
    이준석 (소프트웨어학부 | 4학년)
좋아요 140
답변 수 75

작품영상

작품(아이디어)명 : CoCoding: 코딩 교육 비대면 서비스
  • 작품 소개
  • 작품 개요

            실시간 화상채팅과 함께 웹 상에서 여러 유저가 함께 비대면으로 실시간 소통을 하며 코드를 작성, 수정, 실행할 수 있는 웹 플랫폼


    개발 동기

            프로젝트를 위한 아이디어가 아닌, 현재 가장 필요한 것을 아이디어로 하여 프로젝트를 진행하고 싶었습니다. 현재 우리가 가장 크게 겪고 있는 불편함은 단연 코로나 19로 기인된 여러 제약사항이라 생각했고, 이를 해결할 수 있는 아이디어를 고민하였습니다. 이에 더 나아가 현재 상황에만 국한된 것이 아닌 포스트 코로나 시대에도 가치를 발전시켜 나갈 수 있는 프로젝트를 개발하기로 결심하였습니다.


    제작 목적

            전염병의 대유행으로 발생한 가장 큰 불편함은 단연 사람과의 단절일 것 입니다. 이로 인해서 많은 기업, 교육 기관들은 상당 부분 비대면으로 전환하여 업무를 진행하고 있습니다. 하지만 여전히 많은 부분, 특히 SW분야에서는 비대면으로 전환하기에 난관이 있어 해결되지 못한 문제들이 많습니다. SW분야의 면접의 경우 온라인 코딩 시험 뿐만 아니라 실시간 코딩 면접을 상당 수 활용하고 있지만, 현재의 상황에서 실시간 코딩 면접을 비대면으로 실시하기에는 많은 불편함이 있습니다. '2020년 삼겅 신입 채용 직무 시험'에서 처음으로 비대면 채용을 진행했지만, SW직군만 유일하게 대면 채용을 유지했습니다. 이를 통해 SW분야는 채용 과정을 비대면으로 전환하기에 어려움이 있다는 것을 알 수 있습니다. 또한 2019년 기준 컴퓨터 공학 관련 학과를 운영 중인 4년제 대학은 309개나 되고, 이러한 학과들의 코딩관련 수업은 필수적일 것 입니다. 하지만 비대면 강의가 진행되고 있는 지금, 코딩 수업을 비대면으로 진행하기에는 많은 불편함이 따릅니다. 학생들의 코딩 과정을 실시간으로 살펴 보고, 피드백을 줄 수 있는 대면 실습 강의를 대체하기 위한 방안이 마땅치 않기 때문입니다. 이러한 교육의 문제는 대학에서만 발생하는 문제가 아닙니다. SW의 중요성이 대두되고, 의무 교육 과정인 초등학교에서도 코딩 관련 과목이 필수 교육 과목으로 지정되었습니다. 따라서 초등학교에서도 대학과 동일한 불편함이 발생할 수 있습니다. 이러한 불편함들을 CoCoding을 통해서 해결하고자 하였습니다.


    사회/기술적 필요성

            현재 다수의 비대면 화상 채팅 프로그램이 있습니다. 하지만, 이러한 화상 채팅 프로그램의 경우 단순 화면, 음성만 서로 공유할 수 있기 때문에 SW분야에서 비대면 전환으로 발생하는 불편함을 해소하기에는 역부족입니다. 이에 CoCoding은 SW분야에 초점을 맞추어 기존 화상 채팅 프로그램들이 제공하는 편리함을 넘어서 컴퓨터 공학 전공자들에게 새로운 경험을 통한 편리함을 제공합니다. CoCoding은 화상 채팅 기능, 음성 채팅, 문자 채팅 기능을 기본으로 제공합니다. 이에 더해서 각 유저들은 각각의 코딩 환경을 제공 받습니다. 이러한 환경안에서 코딩은 다른 유저와 실시간 공유가 가능하며, CoCoding 환경 안에서 해당 코드를 실행하고, 결과를 확인할 수 있습니다. 개인의 코딩 환경은 권한이 있는 유저만이 접근할 수 있고, 권한이 있는 유저는 코드의 주인이 아니더라도 함께 코드를 수정할 수 있습니다.


    주요 특징 및 장점

    CoCoding은 다음과 같은 특징과 장점을 가지고 있습니다.

    1.  실시간으로 면접관과 면접자 또는 교수와 학생이 코드 작성/수정 가능

    사용자는 Google Docs 처럼 실시간으로 한 화면에서 코드를 작성 수정 할 수 있으며 Pair Coding 형식으로 진행할 수 있습니다.

    2.  웹 상에서 코드를 실행하여 함께 결과를 확인
    사용자들은 원하는 Input에 해당하는 프로그램의 실행 결과의 Standard Output과 Standard Error를 실시간으로 함께 확인 할 수 있습니다.

    3.  면접과 학습에 필요한 여러 프로그래밍 언어 지원
    기본적으로 가장 많이 쓰이는 Python, Java, C 언어를 지원합니다.

    4.  실시간으로 상대방의 영상과 목소리를 확인할 수 있음
    원격 면접, 학습 상황의 특성상 실시간 캠과 목소리를 공유하면서 더 원할한 의사소통을 할 수 있습니다.

    5.  실시간 채팅 기능
    영상과 목소리의 품질로 발생할 수 있는 문제들을 텍스트 채팅으로 보완할 수 있습니다.

    6.  회원가입 및 계정관리 기능
    세부 정보 입력과 인증 시스템으로 권한이 부여된 사용자만 서비스를 적절히 이용할 수 있습니다.

    7.  실시간 코딩 채팅 공간 생성, 관리 및 초대 기능
    사용자들은 자유롭게 미팅을 생성하고 초대하여 면접 또는 학습을 진행 할 수 있습니다.
     
  • 세부내용
  • 서비스 아키텍처
    nTA0_DO_mWmmy_A3ET3S_cu5AIepoYGsm4vOG1ObHc5uvKQRIT5cQMfdAGdDCI6O58RwT-0QZ6fkguTuxiWywsrUZO7GGUm1sk4jx7panIO8mZVh1bz9AJwFcJM3_vmRCwD58sm5
    세부 기술 설명


    WebRTC

    기존의 웹 소켓을 사용하는 실시간 화상 채팅 구현 방법은 모든 트래픽이 서버를 경유하기 때문에 높은 서버 부하와 높은 지연율을 가지게 되어 UX를 현저히 떨어뜨립니다. 그러한 문제를 해결하고자 코코딩은 최신 웹 기술중 하나인 WebRTC를 사용하였습니다. 

    WebRTC는 Web RealTime Communication의 약자로 웹 브라우저 간에 실시간, 플러그인이 필요없이 영상 및 음성, 데이터 통신에 대한 공개 된 표준입니다.

    즉, 별도의 프로그램 설치 없이 웹 브라우저 사이에 화상통신, 음성, 채팅을 가능하게 하며 서버를 경유하지 않고 클라이언트간 직접 통신을 지원하여 빠른 반응성으로 다대다 통신을 원활하게 만들고 동시에 낮은 서버 부하로 비용적인 측면에서도 효율적입니다.
    gKe76SmA_7ltvlwfBWvsBXEnWKq4PWY8fxivSiIqANpkaekqrLVUKoccj_WA1QONawAmbNm0HzSCgqDgODsl1DEra7hFaoxB5LWTPfRVDHGUlZmLzroz0gzhisSgoB4IyFa_qvXi

     

    Signaling 과정을 통해서 App간의 크게 3가지 정보를 교환하여 웹브라우저간 P2P 통신이 가능하도록 합니다.
     

    1. Network Configuration: ip address, port 교환
    2. Session Control message: App간의 통신초기화, 종료, 에러 리포트
    3. Media Capabilities: 웹 브라우저간의 사용가능한 코덱 및 해상도 전송

     



    Django
    파이썬 웹프레임워크 중 하나로, 웹 구성요소 중 많은 부분이 미리 개발되어 있어 익히기 쉽고 빠른 개발 속도와 높은 코드 완성도를 달성할 수 있습니다. 또한 Django ORM 기능을 사용하여 데이터베이스 스키마의 개발과 마이그레이션 관리를 체계적으로 할 수 있습니다. CoCoding의 스키마 구현 및 관리 웹서버의 메인 프레임워크로써 사용하였습니다.


    Django Rest Framework
    Django의 third-party 라이브러리 중 하나로 장고를 확장하여 Rest API를 편리하게 구현 할 수 있도록 도와줍니다. Serializer와 ViewSet으로 CRUD API를 간결한 코드로 구현할 수 있습니다. CoCoding은 React 기반의 Single Page Application으로 구성되기 때문에 프론트 클라이언트와 모든 http 통신을 Rest API로 하게되고 이러한 API를 Django Rest Framework를 사용하여 구현하였습니다.


    Django Channels
    Django의 third-party 라이브러리 중 하나로 장고를 확장하여 웹소켓을 효율적으로 처리 할 수 있게 해줍니다. 기존의 웹서버와 장고 어플리케이션의 미들웨어로 gunicorn을 주로 사용하여 배포하였지만 웹소켓 처리를 지원하기 위해서는 Django Channels에 포함된 Daphne 미들웨어로 배포하게 됩니다. CoCoding의 실시간 채팅 및 실시간 코딩 editing 기능을 구현하기 위해서 사용하였습니다.


    Nginx
    웹서버로써 Django로 구현된 웹어플리케이션의 리버스 프록시로 사용되고 static 파일 호스팅에 사용됩니다. 장고와는 Daphne를 사이에 두고 통신하게 됩니다.


    Daphne
    Django application은 Rest API 요청은 uWSGI 프로토콜을 사용하여 Nginx와 통신하게 됩니다.. 또한 Web Socket 요청은 ASGI 프로토콜을 사용하여 통신하게 됩니다. 그러한 분기 처리와 미들웨어의 역할을 Daphne가 하게됩니다.


    MySQL
    가장 보편적으로 쓰는 오픈소스 RDBMS로 CoCoding의 데이터베이스로 사용됩니다. Django ORM으로 추상화되어 사용되어 프레임워크 코드 로직에서 사용됩니다.


    Redis
    in memory 데이터베이스로써 Django cachalot 라이브러리를 사용하여 테이블 단위 캐싱과 Django channels 세션 저장에 사용하였습니다.


    RabbitMQ
    메시지 브로커로써 장고에서 요청된 비동기 Task queue로써 사용됩니다. CoCoding에서 각 프로그래밍언어 컴파일 및 실행 비동기 Task를 Celery로 구현된 워커서버에 할당해주는 역할로 사용됩니다.


    Celery
    비동기로 처리될 Task들을 처리하는 Worker로서 CoCoding의 각 프로그래밍 언어별 컴파일 및 실행을 담당하게 됩니다. 서버로 보내질 수 있는 어뷰징 코드를 막기 위해서 워커에서는 호스트 운영체제를 보호하기 위해서 docker 기반의 컴파일/실행 컨테이너의 프로세스로 standard input을 보내고 standard output과 standard error를 받아 처리합니다.


    Docker
    사용자가 입력된 어뷰징코드로 부터 호스트 운영체제를 보호하기 위하여 모든 사용자의 코드들은 docker container 안에서 실행하게 됩니다. 안정적인 코드 실행을 위하여 지속적으로 container의 health 체크를 하여container 프로세스를 유지해야 합니다.

     
  • 기대 효과
  • 코로나19의 여파로 비대면 서비스의 발전에 따라 라이브 스트리밍 서비스를 활용한 코딩 인터뷰 및 교육 플랫폼을 개발하고자 하였습니다. 따라서 최대한 UI/UX를 사용자가 쉽게 사용할 수 있도록 설계하여 구현하였으며 또한 WebRTC, Socket 통신 기반 화상 채팅, 실시간 코딩, 채팅 등 핵심적인 기능들을 축으로 최대한 다양한 기능들을 구현하고자 하였습니다. 또한 해당 프로젝트를 서버에 배포하여 사용자가 실제로 사용할 수 있을 정도의 수준으로 구현하였습니다. 이를 통해 프로그래밍에 대한 학생의 의문점을 학생의 말과 표현으로만 전해들어 추측을 통해 지도하는 것이 아닌, 직접 학생이 작성한 코드를 같이 살펴보고 수정하면서 기존의 플랫폼이 갖고 있는 기술적 한계를 넘어서는 원활한 학습 환경을 비대면으로 제공할 수 있습니다. 더나아가 여러 프로그래머가 서로 다른 나라와 같이 멀리 떨어져 있더라도 하나의 프로그램을 실시간으로 소통하며 개발하는 혁신적인 user experience를 제공하는 프로그램으로서 발전 가능성이 있습니다. 또한 비대면 코딩 플랫폼을 넘어서 화상채팅 부분을 모듈화하여 여러 특정 전문 분야의 비대면 서비스들 개발에 활용할 예정입니다.

  • 결과물
  • Screen Shot 2020-08-27 at 4.25.28 PM.jpg

    Screen Shot 2020-08-27 at 4.25.34 PM.jpg

    Screen Shot 2020-08-27 at 4.25.38 PM.jpg

    Screen Shot 2020-08-27 at 4.25.41 PM.jpg

    Screen Shot 2020-08-27 at 4.25.44 PM.jpg

    Screen Shot 2020-08-27 at 4.25.48 PM.jpg

    Screen Shot 2020-08-27 at 4.25.52 PM.jpg

    Screen Shot 2020-08-27 at 4.25.55 PM.jpg

    Screen Shot 2020-08-27 at 4.26.00 PM.jpg

    Screen Shot 2020-08-27 at 4.26.03 PM.jpg

    Screen Shot 2020-08-27 at 4.26.06 PM.jpg

    Screen Shot 2020-08-27 at 4.26.10 PM.jpg

    Screen Shot 2020-08-27 at 4.26.13 PM.jpg

    Screen Shot 2020-08-27 at 4.26.16 PM.jpg

    Screen Shot 2020-08-27 at 4.26.19 PM.jpg

    Screen Shot 2020-08-27 at 4.26.22 PM.jpg

    Screen Shot 2020-08-27 at 4.26.26 PM.jpg

    Screen Shot 2020-08-27 at 4.26.29 PM.jpg

    Screen Shot 2020-08-27 at 4.26.32 PM.jpg

    Screen Shot 2020-08-27 at 4.26.35 PM.jpg

좋아요 참여 140

  • 학년 별

  • 학과 별

QnA 참여 76

중앙대학교 다빈치 sw tech fair 참가신청 닫기