[Project] 아이를 가르치는 바른소리, 훈동정음 (2021.08.30 ~ 2021.10.05)

TASON·2021년 10월 5일
0

프로젝트

목록 보기
3/3

훈동정음: 아이를 가르치는 바른소리


(저작권 문제로 인하여 소스코드 제공은 10월 11일 공개예정)

목차

  • 훈동정음 개요
    • 유저를 위한 고급기술
  • 프로젝트 명세
    • 배포환경
    • 개발환경
    • 주요기능
    • 참조 라이브러리

훈동정음 개요

여러 아이콘을 조합하여 만들어진 그림을 AI가 분석하여 하나의 문장을 만들어주고, 네 개의 그림을 만들어 기승전결 이야기를 만들어 한글을 보다 재미있게 배울 수 있는 교육 플랫폼입니다.

유저를 위한 고급기술

  • 초간단 사용법! 드래그만 할 줄 안다면 당신은 곧 만능 이야기꾼!!

  • 응? 만들어진 그림과 이야기가 너무 좋다고?? 걱정마! 캡쳐 기능이 모든 것을 저장해준다구!!

프로젝트 명세

배포 환경

개발환경


Front-end

  • 프레임워크 : Vue
  • 지원 환경 : Web
  • 담당자 : 김태현, 심찬인

Back-end

  • 프레임워크 : PyTorch, Django
  • 담당자 : 김보인 / 박효진 / 이혜은

DevOps

  • 프로그램 : Jenkins, Docker, Git
  • 담당자 : 박효진

Design

  • 프레임워크 사용하지 않음

  • Vanilla JavaScript

  • UI 디자인 프로그램 : Figma

  • 담당자 : 김태현, 심찬인

주요기능


드래그 앤 드롭 기능

  • Wrapper 라이브러리의 v-movable 기능으로 드래그 앤 드롭 기본 기능 구현
  • getBoundingClientRect() 함수의 top, bottom, left, right 좌표를 사용하여 드롭 범위 설정
  • 위 기능을 조합하여 아이콘 CRUD 기능 구현
  • 담당자 : 김태현, 심찬인

캡쳐 기능

  • Canvas API를 사용한 캡쳐 기능 구현
  • v-movable 기능과 충돌하는 상황 발생 => 필요한 요소가 아닌 <body>를 통채로 캡쳐
  • 캡쳐된 <canvas> 태그 요소 정보의 크기조절 및 Vuex 저장하여 마지막 페이지에 표시할 예정
  • 담당자 : 김태현, 심찬인

라이브러리 참조

기본 제공하는 라이브러리 외 핵심 기능 구현에 사용한 라이브러리가 있다면 작성해주세요.
예시 ) VR/AR 라이브러리, 애니메이션 라이브러리, 텍스트/사진/동영상 지원, 편집 라이브러리 등

profile
프론트엔드 개발자 / iOS 개발 스터디 중

0개의 댓글