TeamVR조

프로젝트 개요

기술개발 과제

국문 : 동영상 기반 네일아트샵 홍보 플랫폼

영문 : 00000000..

과제 팀명

TeamVR

지도교수

김성환 교수님

개발기간

2018년 11월 ~ 2018년 12월 (총 1개월)

구성원 소개

서울시립대학교 컴퓨터과학부 2013920042 윤종석(팀장)

서울시립대학교 컴퓨터과학부 2013920006 김기진

서울시립대학교 수학과 2012540020 서동민

서울시립대학교 컴퓨터과학부 2012560021 송영찬

서론

개발 과제의 개요

개발 과제 요약

동영상을 올리고 볼 수 있는 웹사이트를 제작한다.

개발 과제의 배경

최근 스마트폰 플랫폼을 기반으로 하지 않던 기존의 서비스에 앱이나 웹을 이용하여 더 많은 사용자에게 서비스를 제공하기 위한 움직임이 보이고 있습니다. 네일아트 분야 또한 스마트폰 기반이 아니었던 기존의 서비스라고 볼 수 있는데, 아직은 시장을 확실하게 장악한 서비스나 앱이 없습니다. 네일 샵 주인 입장에서는 자신들의 네일 아트를 홍보하고 손님의 예약을 받을 수단이 없으며, 손님 입장에서는 원하는 샵에 예약을 쉽게 할 수 없는 불편함이 있습니다. 이번 프로젝트에서는 이런 불편함을 해소하고자 네일아트 관련 정보를 공유하고, 네일 샵을 예약할 수 있는 플랫폼을 개발하고자 하였습니다.. 이러한 플랫폼을 제작하는 것에 있어 앱이나 웹과 같은 선택지가 존재하는데 설치가 필요한 앱 보다는 접근이 용이한 웹을 이용하여 개발을 시도하기로 하였습니다. 최근 사용되고 있는 react와 같은 프레임워크는 웹에서도 마치 앱과 같은 동적인 웹 애플리케이션을 구현하는 것이 간편하여 이러한 도구를 이용하여 네일아트 샵을 홍보, 예약할 수 있는 동적인 웹 사이트를 구현하는 것을 목표로 진행하였습니다.

개발 과제의 목표 및 내용

네일아트샵을 효과적으로 홍보하기 위하여 동영상을 올리고 볼 수 있는 웹사이트를 제작한다.

구성원 및 추진체계

윤종석 : 웹 프론트엔드 김기진 : 웹 백엔드 서동민 : 스트리밍 서버 송영찬 : 클라우드, DB 구축

설계

설계사양

제품의 요구사항

웹 브라우저만 있으면 사용 할 수 있도록 Web Application 형태로 제작한다.

설계 사양

1. react.js . React.js는 Facebook에서 개발한 웹 프론트엔드 라이브러리입니다. React.js의 특징은 페이지의 요소를 상태를 가진 Component 단위로 나누어 관리하기 쉽다는 것입니다. React는 어떻게 보여줄지에 대해서만 집중하기 때문에 기존의 다른 프론트엔드 프레임워크와 같이 사용할 수 있습니다. 현재 가장 많이 사용되는 프론트엔드 라이브러리 중 하나입니다. React 자체로는 많은 것을 할 수 없기 때문에 같이 사용할 라이브러리 들은 다음과 같습니다.

Redux: React의 컴포넌트 상태 관리를 더욱 용이하게 해준다. React-router : React에는 없는 라우팅 기능이 있다. Babel: 자바스크립트는 최근 많은 변화가 있었는데 모든 라이브러리나 브라우저가 그 변화를 아직 적용하지 못했다. 따라서 최신 자바스크립트 코드를 이전 버전으로 변환해 주어 많은 환경에서 동작하게 해준다. Styled-component: css 코드 관리를 편리하게 해주는 라이브러리이다.

2. create-react-app

리엑트의 개발환경을 간단하게 구현해주는 보일러플레이트앱으로 여러 부가요소들을 신경쓸필요없이 잘 만들어준다.

4. AWS EC2 Linux 인스턴스

아마존에서 제공하는 서비스의 일종으로 가상 리눅스 서버 인스턴스를 발급해 줍니다. 이 서버에 api서버와 스트리밍 서버를 올려서 개발을 진행하였습니다.

5. PHP

동적 웹페이지를 만들기 위해 설계된 언어로 애플리케이션의 백엔드 서버를 구축하는데 사용하였습니다.

6. Apache HTTP Server

아파치 소프트웨어 재단에서 관리하는 웹서버로 애플리케이션의 백엔드 서버로 사용하고 있습니다.

8. MariaDB

이번 애플리케이션에 사용된 데이터베이스입니다. MySQL의 불확실한 라이선스 상태에 반발하여 만들어 졌으며, MySQL API와 명령에 정확히 매칭하기 때문에 사용 및 상호교체가 편리합니다.

개념설계안

내용

이론적 계산 및 시뮬레이션

내용

상세설계 내용

네일아트 게시물 업로드&조회

주위 네일아트 샵 조회

 팔로우, 좋아요 기능

설치가 필요없는 웹 접근
기존 설치가 필요해 접근성이 떨어지던 앱 방식의 단점을 극복하여 설치가 필요없이 웹으로 접근할 수 있도록 구현하였습니다.

동영상 위주의 게시물 & 페이지단위 스크롤

유저들의 관심을 끌 수 있도록 동영상 위주의 게시물을 구현하였고 또 이러한 게시물을 최적화되게 볼 수 있도록 페이지단위 스크롤을 구현하였습니다.

탭방식 페이지 이동
기존 애플리케이션에서 주로 사용하던 하단 탭 메뉴를 웹에서도 사용할 수 있도록 구현하였습니다.

무한스크롤
처음부터 모든 정보를 로딩하지 않고 사용자가 스크롤을 내려서 모든 정보를 확인했을경우 새로운 정보를 바로 아래에 추가 로딩하는 방식입니다. 페이지를 일일이 넘겨야하는 단점을 보완하고 필요한만큼만의 정보를 표시할 수 있습니다.

리액트 앱

애플리케이션의 UI를 담당하는 프론트엔드 프로그램으로 유저와 직접 상호작용하는 부분입니다. 유저의 요청을 받아 api서버와 스트리밍 서버에서 정보를 받아와 보여주고 또 유저의 활동을 api서버를 통해 등록합니다.

스트리밍 서버

애플리케이션의 동영상을 가지고 있는 서버로 유저의 동영상을 업로드 하고 또 스트리밍 받아오는 곳입니다.

API 서버

애플리케이션에 필요한 모든 정보들을 합의된 api를 통해서 주고받을수 있는 서버입니다.

데이터베이스

애플리케이션에 필요한 정보들을 보관하는 곳입니다. 마리아DB를 통해 구현되어있으며, 유저정보, 게시물정보, 팔로우 정보 등 동영상을 제외한 모든 것이 저장되어있습니다.

결과 및 평가

완료 작품의 소개

프로토타입 사진 혹은 작동 장면

내용

포스터

내용

완료작품의 평가

내용

향후계획

내용

특허 출원 내용

내용