"TeamVR조"의 두 판 사이의 차이
(→시장상황에 대한 분석) |
(→설계 사양) |
||
| (같은 사용자의 중간 판 2개는 보이지 않습니다) | |||
| 17번째 줄: | 17번째 줄: | ||
===구성원 소개=== | ===구성원 소개=== | ||
| − | 서울시립대학교 컴퓨터과학부 | + | 서울시립대학교 컴퓨터과학부 2013920042 윤종석(팀장) |
| − | 서울시립대학교 컴퓨터과학부 | + | 서울시립대학교 컴퓨터과학부 2013920006 김기진 |
| − | 서울시립대학교 수학과 | + | 서울시립대학교 수학과 2012540020 서동민 |
| − | |||
| − | |||
| + | 서울시립대학교 컴퓨터과학부 2012560021 송영찬 | ||
==서론== | ==서론== | ||
| 49번째 줄: | 48번째 줄: | ||
====시장상황에 대한 분석==== | ====시장상황에 대한 분석==== | ||
*경쟁제품 조사 비교 | *경쟁제품 조사 비교 | ||
| − | 젤라또 | + | 젤라또 |
| + | |||
사진 기반의 네일아트샵 홍보 플랫폼이다. 안드로이드, IOS 애플리케이션 형태. | 사진 기반의 네일아트샵 홍보 플랫폼이다. 안드로이드, IOS 애플리케이션 형태. | ||
*마케팅 전략 제시 | *마케팅 전략 제시 | ||
| 75번째 줄: | 75번째 줄: | ||
====설계 사양==== | ====설계 사양==== | ||
| − | + | ||
| + | 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와 명령에 정확히 매칭하기 때문에 사용 및 상호교체가 편리합니다. | ||
===개념설계안=== | ===개념설계안=== | ||
2018년 12월 21일 (금) 00:09 기준 최신판
프로젝트 개요
기술개발 과제
국문 : 동영상 기반 네일아트샵 홍보 플랫폼
영문 : 00000000..
과제 팀명
TeamVR
지도교수
김성환 교수님
개발기간
2018년 11월 ~ 2018년 12월 (총 1개월)
구성원 소개
서울시립대학교 컴퓨터과학부 2013920042 윤종석(팀장)
서울시립대학교 컴퓨터과학부 2013920006 김기진
서울시립대학교 수학과 2012540020 서동민
서울시립대학교 컴퓨터과학부 2012560021 송영찬
서론
개발 과제의 개요
개발 과제 요약
동영상을 올리고 볼 수 있는 웹사이트를 제작한다.
개발 과제의 배경
최근 스마트폰 플랫폼을 기반으로 하지 않던 기존의 서비스에 앱이나 웹을 이용하여 더 많은 사용자에게 서비스를 제공하기 위한 움직임이 보이고 있습니다. 네일아트 분야 또한 스마트폰 기반이 아니었던 기존의 서비스라고 볼 수 있는데, 아직은 시장을 확실하게 장악한 서비스나 앱이 없습니다. 네일 샵 주인 입장에서는 자신들의 네일 아트를 홍보하고 손님의 예약을 받을 수단이 없으며, 손님 입장에서는 원하는 샵에 예약을 쉽게 할 수 없는 불편함이 있습니다. 이번 프로젝트에서는 이런 불편함을 해소하고자 네일아트 관련 정보를 공유하고, 네일 샵을 예약할 수 있는 플랫폼을 개발하고자 하였습니다.. 이러한 플랫폼을 제작하는 것에 있어 앱이나 웹과 같은 선택지가 존재하는데 설치가 필요한 앱 보다는 접근이 용이한 웹을 이용하여 개발을 시도하기로 하였습니다. 최근 사용되고 있는 react와 같은 프레임워크는 웹에서도 마치 앱과 같은 동적인 웹 애플리케이션을 구현하는 것이 간편하여 이러한 도구를 이용하여 네일아트 샵을 홍보, 예약할 수 있는 동적인 웹 사이트를 구현하는 것을 목표로 진행하였습니다.
개발 과제의 목표 및 내용
네일아트샵을 효과적으로 홍보하기 위하여 동영상을 올리고 볼 수 있는 웹사이트를 제작한다.
관련 기술의 현황
관련 기술의 현황 및 분석(State of art)
- 전 세계적인 기술현황
내용
- 특허조사 및 특허 전략 분석
내용
- 기술 로드맵
내용
시장상황에 대한 분석
- 경쟁제품 조사 비교
젤라또
사진 기반의 네일아트샵 홍보 플랫폼이다. 안드로이드, IOS 애플리케이션 형태.
- 마케팅 전략 제시
내용
개발과제의 기대효과
기술적 기대효과
내용
경제적, 사회적 기대 및 파급효과
내용
기술개발 일정 및 추진체계
개발 일정
구성원 및 추진체계
윤종석 : 웹 프론트엔드 김기진 : 웹 백엔드 서동민 : 스트리밍 서버 송영찬 : 클라우드, 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를 통해 구현되어있으며, 유저정보, 게시물정보, 팔로우 정보 등 동영상을 제외한 모든 것이 저장되어있습니다.
결과 및 평가
완료 작품의 소개
프로토타입 사진 혹은 작동 장면
내용
포스터
내용
관련사업비 내역서
내용
완료작품의 평가
내용
향후계획
내용
특허 출원 내용
내용
