https://capstone.uos.ac.kr/cdc/api.php?action=feedcontributions&feedformat=atom&user=TeamVR%EC%A1%B0cdc wiki - 사용자 기여 [ko]2026-05-04T09:55:50Z사용자 기여MediaWiki 1.28.2https://capstone.uos.ac.kr/cdc/index.php?title=TeamVR%EC%A1%B0&diff=963TeamVR조2018-12-21T08:09:48Z<p>TeamVR조: /* 설계 사양 */</p>
<hr />
<div><div>__TOC__</div><br />
<br />
==프로젝트 개요==<br />
=== 기술개발 과제 ===<br />
''' 국문 : ''' 동영상 기반 네일아트샵 홍보 플랫폼<br />
<br />
''' 영문 : ''' 00000000..<br />
<br />
===과제 팀명===<br />
TeamVR<br />
<br />
===지도교수===<br />
김성환 교수님<br />
<br />
===개발기간===<br />
2018년 11월 ~ 2018년 12월 (총 1개월)<br />
<br />
===구성원 소개===<br />
서울시립대학교 컴퓨터과학부 2013920042 윤종석(팀장)<br />
<br />
서울시립대학교 컴퓨터과학부 2013920006 김기진<br />
<br />
서울시립대학교 수학과 2012540020 서동민<br />
<br />
서울시립대학교 컴퓨터과학부 2012560021 송영찬<br />
<br />
==서론==<br />
===개발 과제의 개요===<br />
====개발 과제 요약====<br />
동영상을 올리고 볼 수 있는 웹사이트를 제작한다.<br />
<br />
====개발 과제의 배경====<br />
최근 스마트폰 플랫폼을 기반으로 하지 않던 기존의 서비스에 앱이나 웹을 이용하여 더 많은 사용자에게 서비스를 제공하기 위한 움직임이 보이고 있습니다. 네일아트 분야 또한 스마트폰 기반이 아니었던 기존의 서비스라고 볼 수 있는데, 아직은 시장을 확실하게 장악한 서비스나 앱이 없습니다. 네일 샵 주인 입장에서는 자신들의 네일 아트를 홍보하고 손님의 예약을 받을 수단이 없으며, 손님 입장에서는 원하는 샵에 예약을 쉽게 할 수 없는 불편함이 있습니다. 이번 프로젝트에서는 이런 불편함을 해소하고자 네일아트 관련 정보를 공유하고, 네일 샵을 예약할 수 있는 플랫폼을 개발하고자 하였습니다..<br />
이러한 플랫폼을 제작하는 것에 있어 앱이나 웹과 같은 선택지가 존재하는데 설치가 필요한 앱 보다는 접근이 용이한 웹을 이용하여 개발을 시도하기로 하였습니다. 최근 사용되고 있는 react와 같은 프레임워크는 웹에서도 마치 앱과 같은 동적인 웹 애플리케이션을 구현하는 것이 간편하여 이러한 도구를 이용하여 네일아트 샵을 홍보, 예약할 수 있는 동적인 웹 사이트를 구현하는 것을 목표로 진행하였습니다.<br />
<br />
====개발 과제의 목표 및 내용====<br />
네일아트샵을 효과적으로 홍보하기 위하여 동영상을 올리고 볼 수 있는 웹사이트를 제작한다.<br />
<br />
===관련 기술의 현황===<br />
====관련 기술의 현황 및 분석(State of art)====<br />
*전 세계적인 기술현황<br />
내용<br />
*특허조사 및 특허 전략 분석<br />
내용<br />
*기술 로드맵<br />
내용<br />
<br />
====시장상황에 대한 분석====<br />
*경쟁제품 조사 비교<br />
젤라또<br />
<br />
사진 기반의 네일아트샵 홍보 플랫폼이다. 안드로이드, IOS 애플리케이션 형태.<br />
*마케팅 전략 제시<br />
내용<br />
<br />
===개발과제의 기대효과===<br />
====기술적 기대효과====<br />
내용<br />
====경제적, 사회적 기대 및 파급효과====<br />
내용<br />
<br />
===기술개발 일정 및 추진체계===<br />
====개발 일정====<br />
<br />
====구성원 및 추진체계====<br />
윤종석 : 웹 프론트엔드 <br />
김기진 : 웹 백엔드 <br />
서동민 : 스트리밍 서버 <br />
송영찬 : 클라우드, DB 구축 <br />
<br />
==설계==<br />
===설계사양===<br />
====제품의 요구사항====<br />
웹 브라우저만 있으면 사용 할 수 있도록 Web Application 형태로 제작한다.<br />
<br />
====설계 사양====<br />
<br />
1. react.js<br />
. React.js는 Facebook에서 개발한 웹 프론트엔드 라이브러리입니다. React.js의 특징은 페이지의 요소를 상태를 가진 Component 단위로 나누어 관리하기 쉽다는 것입니다. React는 어떻게 보여줄지에 대해서만 집중하기 때문에 기존의 다른 프론트엔드 프레임워크와 같이 사용할 수 있습니다. 현재 가장 많이 사용되는 프론트엔드 라이브러리 중 하나입니다. React 자체로는 많은 것을 할 수 없기 때문에 같이 사용할 라이브러리 들은 다음과 같습니다.<br />
<br />
Redux: React의 컴포넌트 상태 관리를 더욱 용이하게 해준다.<br />
React-router : React에는 없는 라우팅 기능이 있다.<br />
Babel: 자바스크립트는 최근 많은 변화가 있었는데 모든 라이브러리나 브라우저가 그 변화를 아직 적용하지 못했다. 따라서 최신 자바스크립트 코드를 이전 버전으로 변환해 주어 많은 환경에서 동작하게 해준다.<br />
Styled-component: css 코드 관리를 편리하게 해주는 라이브러리이다.<br />
<br />
2. create-react-app<br />
리엑트의 개발환경을 간단하게 구현해주는 보일러플레이트앱으로 여러 부가요소들을 신경쓸필요없이 잘 만들어준다.<br />
4. AWS EC2 Linux 인스턴스<br />
아마존에서 제공하는 서비스의 일종으로 가상 리눅스 서버 인스턴스를 발급해 줍니다. 이 서버에 api서버와 스트리밍 서버를 올려서 개발을 진행하였습니다.<br />
5. PHP<br />
동적 웹페이지를 만들기 위해 설계된 언어로 애플리케이션의 백엔드 서버를 구축하는데 사용하였습니다.<br />
6. Apache HTTP Server<br />
아파치 소프트웨어 재단에서 관리하는 웹서버로 애플리케이션의 백엔드 서버로 사용하고 있습니다.<br />
8. MariaDB<br />
이번 애플리케이션에 사용된 데이터베이스입니다. MySQL의 불확실한 라이선스 상태에 반발하여 만들어 졌으며, MySQL API와 명령에 정확히 매칭하기 때문에 사용 및 상호교체가 편리합니다.<br />
<br />
===개념설계안===<br />
내용<br />
<br />
===이론적 계산 및 시뮬레이션===<br />
내용<br />
<br />
===상세설계 내용===<br />
네일아트 게시물 업로드&조회<br />
<br />
주위 네일아트 샵 조회<br />
<br />
팔로우, 좋아요 기능<br />
<br />
설치가 필요없는 웹 접근<br />
기존 설치가 필요해 접근성이 떨어지던 앱 방식의 단점을 극복하여 설치가 필요없이 웹으로 접근할 수 있도록 구현하였습니다. <br />
<br />
동영상 위주의 게시물 & 페이지단위 스크롤<br />
유저들의 관심을 끌 수 있도록 동영상 위주의 게시물을 구현하였고 또 이러한 게시물을 최적화되게 볼 수 있도록 페이지단위 스크롤을 구현하였습니다. <br />
<br />
탭방식 페이지 이동<br />
기존 애플리케이션에서 주로 사용하던 하단 탭 메뉴를 웹에서도 사용할 수 있도록 구현하였습니다.<br />
<br />
무한스크롤<br />
처음부터 모든 정보를 로딩하지 않고 사용자가 스크롤을 내려서 모든 정보를 확인했을경우 새로운 정보를 바로 아래에 추가 로딩하는 방식입니다. 페이지를 일일이 넘겨야하는 단점을 보완하고 필요한만큼만의 정보를 표시할 수 있습니다.<br />
<br />
<br />
<br />
리액트 앱<br />
애플리케이션의 UI를 담당하는 프론트엔드 프로그램으로 유저와 직접 상호작용하는 부분입니다. 유저의 요청을 받아 api서버와 스트리밍 서버에서 정보를 받아와 보여주고 또 유저의 활동을 api서버를 통해 등록합니다.<br />
<br />
스트리밍 서버<br />
애플리케이션의 동영상을 가지고 있는 서버로 유저의 동영상을 업로드 하고 또 스트리밍 받아오는 곳입니다. <br />
<br />
API 서버<br />
애플리케이션에 필요한 모든 정보들을 합의된 api를 통해서 주고받을수 있는 서버입니다.<br />
<br />
데이터베이스<br />
애플리케이션에 필요한 정보들을 보관하는 곳입니다. 마리아DB를 통해 구현되어있으며, 유저정보, 게시물정보, 팔로우 정보 등 동영상을 제외한 모든 것이 저장되어있습니다.<br />
<br />
<br />
==결과 및 평가==<br />
===완료 작품의 소개===<br />
====프로토타입 사진 혹은 작동 장면====<br />
내용<br />
====포스터====<br />
내용<br />
<br />
===관련사업비 내역서===<br />
내용<br />
<br />
===완료작품의 평가===<br />
내용<br />
<br />
===향후계획===<br />
내용<br />
<br />
===특허 출원 내용===<br />
내용</div>TeamVR조https://capstone.uos.ac.kr/cdc/index.php?title=TeamVR%EC%A1%B0&diff=962TeamVR조2018-12-21T08:08:56Z<p>TeamVR조: /* 구성원 소개 */</p>
<hr />
<div><div>__TOC__</div><br />
<br />
==프로젝트 개요==<br />
=== 기술개발 과제 ===<br />
''' 국문 : ''' 동영상 기반 네일아트샵 홍보 플랫폼<br />
<br />
''' 영문 : ''' 00000000..<br />
<br />
===과제 팀명===<br />
TeamVR<br />
<br />
===지도교수===<br />
김성환 교수님<br />
<br />
===개발기간===<br />
2018년 11월 ~ 2018년 12월 (총 1개월)<br />
<br />
===구성원 소개===<br />
서울시립대학교 컴퓨터과학부 2013920042 윤종석(팀장)<br />
<br />
서울시립대학교 컴퓨터과학부 2013920006 김기진<br />
<br />
서울시립대학교 수학과 2012540020 서동민<br />
<br />
서울시립대학교 컴퓨터과학부 2012560021 송영찬<br />
<br />
==서론==<br />
===개발 과제의 개요===<br />
====개발 과제 요약====<br />
동영상을 올리고 볼 수 있는 웹사이트를 제작한다.<br />
<br />
====개발 과제의 배경====<br />
최근 스마트폰 플랫폼을 기반으로 하지 않던 기존의 서비스에 앱이나 웹을 이용하여 더 많은 사용자에게 서비스를 제공하기 위한 움직임이 보이고 있습니다. 네일아트 분야 또한 스마트폰 기반이 아니었던 기존의 서비스라고 볼 수 있는데, 아직은 시장을 확실하게 장악한 서비스나 앱이 없습니다. 네일 샵 주인 입장에서는 자신들의 네일 아트를 홍보하고 손님의 예약을 받을 수단이 없으며, 손님 입장에서는 원하는 샵에 예약을 쉽게 할 수 없는 불편함이 있습니다. 이번 프로젝트에서는 이런 불편함을 해소하고자 네일아트 관련 정보를 공유하고, 네일 샵을 예약할 수 있는 플랫폼을 개발하고자 하였습니다..<br />
이러한 플랫폼을 제작하는 것에 있어 앱이나 웹과 같은 선택지가 존재하는데 설치가 필요한 앱 보다는 접근이 용이한 웹을 이용하여 개발을 시도하기로 하였습니다. 최근 사용되고 있는 react와 같은 프레임워크는 웹에서도 마치 앱과 같은 동적인 웹 애플리케이션을 구현하는 것이 간편하여 이러한 도구를 이용하여 네일아트 샵을 홍보, 예약할 수 있는 동적인 웹 사이트를 구현하는 것을 목표로 진행하였습니다.<br />
<br />
====개발 과제의 목표 및 내용====<br />
네일아트샵을 효과적으로 홍보하기 위하여 동영상을 올리고 볼 수 있는 웹사이트를 제작한다.<br />
<br />
===관련 기술의 현황===<br />
====관련 기술의 현황 및 분석(State of art)====<br />
*전 세계적인 기술현황<br />
내용<br />
*특허조사 및 특허 전략 분석<br />
내용<br />
*기술 로드맵<br />
내용<br />
<br />
====시장상황에 대한 분석====<br />
*경쟁제품 조사 비교<br />
젤라또<br />
<br />
사진 기반의 네일아트샵 홍보 플랫폼이다. 안드로이드, IOS 애플리케이션 형태.<br />
*마케팅 전략 제시<br />
내용<br />
<br />
===개발과제의 기대효과===<br />
====기술적 기대효과====<br />
내용<br />
====경제적, 사회적 기대 및 파급효과====<br />
내용<br />
<br />
===기술개발 일정 및 추진체계===<br />
====개발 일정====<br />
<br />
====구성원 및 추진체계====<br />
윤종석 : 웹 프론트엔드 <br />
김기진 : 웹 백엔드 <br />
서동민 : 스트리밍 서버 <br />
송영찬 : 클라우드, DB 구축 <br />
<br />
==설계==<br />
===설계사양===<br />
====제품의 요구사항====<br />
웹 브라우저만 있으면 사용 할 수 있도록 Web Application 형태로 제작한다.<br />
<br />
====설계 사양====<br />
내용<br />
<br />
===개념설계안===<br />
내용<br />
<br />
===이론적 계산 및 시뮬레이션===<br />
내용<br />
<br />
===상세설계 내용===<br />
네일아트 게시물 업로드&조회<br />
<br />
주위 네일아트 샵 조회<br />
<br />
팔로우, 좋아요 기능<br />
<br />
설치가 필요없는 웹 접근<br />
기존 설치가 필요해 접근성이 떨어지던 앱 방식의 단점을 극복하여 설치가 필요없이 웹으로 접근할 수 있도록 구현하였습니다. <br />
<br />
동영상 위주의 게시물 & 페이지단위 스크롤<br />
유저들의 관심을 끌 수 있도록 동영상 위주의 게시물을 구현하였고 또 이러한 게시물을 최적화되게 볼 수 있도록 페이지단위 스크롤을 구현하였습니다. <br />
<br />
탭방식 페이지 이동<br />
기존 애플리케이션에서 주로 사용하던 하단 탭 메뉴를 웹에서도 사용할 수 있도록 구현하였습니다.<br />
<br />
무한스크롤<br />
처음부터 모든 정보를 로딩하지 않고 사용자가 스크롤을 내려서 모든 정보를 확인했을경우 새로운 정보를 바로 아래에 추가 로딩하는 방식입니다. 페이지를 일일이 넘겨야하는 단점을 보완하고 필요한만큼만의 정보를 표시할 수 있습니다.<br />
<br />
<br />
<br />
리액트 앱<br />
애플리케이션의 UI를 담당하는 프론트엔드 프로그램으로 유저와 직접 상호작용하는 부분입니다. 유저의 요청을 받아 api서버와 스트리밍 서버에서 정보를 받아와 보여주고 또 유저의 활동을 api서버를 통해 등록합니다.<br />
<br />
스트리밍 서버<br />
애플리케이션의 동영상을 가지고 있는 서버로 유저의 동영상을 업로드 하고 또 스트리밍 받아오는 곳입니다. <br />
<br />
API 서버<br />
애플리케이션에 필요한 모든 정보들을 합의된 api를 통해서 주고받을수 있는 서버입니다.<br />
<br />
데이터베이스<br />
애플리케이션에 필요한 정보들을 보관하는 곳입니다. 마리아DB를 통해 구현되어있으며, 유저정보, 게시물정보, 팔로우 정보 등 동영상을 제외한 모든 것이 저장되어있습니다.<br />
<br />
<br />
==결과 및 평가==<br />
===완료 작품의 소개===<br />
====프로토타입 사진 혹은 작동 장면====<br />
내용<br />
====포스터====<br />
내용<br />
<br />
===관련사업비 내역서===<br />
내용<br />
<br />
===완료작품의 평가===<br />
내용<br />
<br />
===향후계획===<br />
내용<br />
<br />
===특허 출원 내용===<br />
내용</div>TeamVR조https://capstone.uos.ac.kr/cdc/index.php?title=TeamVR%EC%A1%B0&diff=960TeamVR조2018-12-21T08:08:02Z<p>TeamVR조: /* 시장상황에 대한 분석 */</p>
<hr />
<div><div>__TOC__</div><br />
<br />
==프로젝트 개요==<br />
=== 기술개발 과제 ===<br />
''' 국문 : ''' 동영상 기반 네일아트샵 홍보 플랫폼<br />
<br />
''' 영문 : ''' 00000000..<br />
<br />
===과제 팀명===<br />
TeamVR<br />
<br />
===지도교수===<br />
김성환 교수님<br />
<br />
===개발기간===<br />
2018년 11월 ~ 2018년 12월 (총 1개월)<br />
<br />
===구성원 소개===<br />
서울시립대학교 컴퓨터과학부 2011XXX0** 윤종석(팀장)<br />
<br />
서울시립대학교 컴퓨터과학부 2011XXX0** 김기진<br />
<br />
서울시립대학교 수학과 2011XXX0** 서동민<br />
<br />
서울시립대학교 컴퓨터과학부 2011XXX0** 송영찬<br />
<br />
<br />
==서론==<br />
===개발 과제의 개요===<br />
====개발 과제 요약====<br />
동영상을 올리고 볼 수 있는 웹사이트를 제작한다.<br />
<br />
====개발 과제의 배경====<br />
최근 스마트폰 플랫폼을 기반으로 하지 않던 기존의 서비스에 앱이나 웹을 이용하여 더 많은 사용자에게 서비스를 제공하기 위한 움직임이 보이고 있습니다. 네일아트 분야 또한 스마트폰 기반이 아니었던 기존의 서비스라고 볼 수 있는데, 아직은 시장을 확실하게 장악한 서비스나 앱이 없습니다. 네일 샵 주인 입장에서는 자신들의 네일 아트를 홍보하고 손님의 예약을 받을 수단이 없으며, 손님 입장에서는 원하는 샵에 예약을 쉽게 할 수 없는 불편함이 있습니다. 이번 프로젝트에서는 이런 불편함을 해소하고자 네일아트 관련 정보를 공유하고, 네일 샵을 예약할 수 있는 플랫폼을 개발하고자 하였습니다..<br />
이러한 플랫폼을 제작하는 것에 있어 앱이나 웹과 같은 선택지가 존재하는데 설치가 필요한 앱 보다는 접근이 용이한 웹을 이용하여 개발을 시도하기로 하였습니다. 최근 사용되고 있는 react와 같은 프레임워크는 웹에서도 마치 앱과 같은 동적인 웹 애플리케이션을 구현하는 것이 간편하여 이러한 도구를 이용하여 네일아트 샵을 홍보, 예약할 수 있는 동적인 웹 사이트를 구현하는 것을 목표로 진행하였습니다.<br />
<br />
====개발 과제의 목표 및 내용====<br />
네일아트샵을 효과적으로 홍보하기 위하여 동영상을 올리고 볼 수 있는 웹사이트를 제작한다.<br />
<br />
===관련 기술의 현황===<br />
====관련 기술의 현황 및 분석(State of art)====<br />
*전 세계적인 기술현황<br />
내용<br />
*특허조사 및 특허 전략 분석<br />
내용<br />
*기술 로드맵<br />
내용<br />
<br />
====시장상황에 대한 분석====<br />
*경쟁제품 조사 비교<br />
젤라또<br />
<br />
사진 기반의 네일아트샵 홍보 플랫폼이다. 안드로이드, IOS 애플리케이션 형태.<br />
*마케팅 전략 제시<br />
내용<br />
<br />
===개발과제의 기대효과===<br />
====기술적 기대효과====<br />
내용<br />
====경제적, 사회적 기대 및 파급효과====<br />
내용<br />
<br />
===기술개발 일정 및 추진체계===<br />
====개발 일정====<br />
<br />
====구성원 및 추진체계====<br />
윤종석 : 웹 프론트엔드 <br />
김기진 : 웹 백엔드 <br />
서동민 : 스트리밍 서버 <br />
송영찬 : 클라우드, DB 구축 <br />
<br />
==설계==<br />
===설계사양===<br />
====제품의 요구사항====<br />
웹 브라우저만 있으면 사용 할 수 있도록 Web Application 형태로 제작한다.<br />
<br />
====설계 사양====<br />
내용<br />
<br />
===개념설계안===<br />
내용<br />
<br />
===이론적 계산 및 시뮬레이션===<br />
내용<br />
<br />
===상세설계 내용===<br />
네일아트 게시물 업로드&조회<br />
<br />
주위 네일아트 샵 조회<br />
<br />
팔로우, 좋아요 기능<br />
<br />
설치가 필요없는 웹 접근<br />
기존 설치가 필요해 접근성이 떨어지던 앱 방식의 단점을 극복하여 설치가 필요없이 웹으로 접근할 수 있도록 구현하였습니다. <br />
<br />
동영상 위주의 게시물 & 페이지단위 스크롤<br />
유저들의 관심을 끌 수 있도록 동영상 위주의 게시물을 구현하였고 또 이러한 게시물을 최적화되게 볼 수 있도록 페이지단위 스크롤을 구현하였습니다. <br />
<br />
탭방식 페이지 이동<br />
기존 애플리케이션에서 주로 사용하던 하단 탭 메뉴를 웹에서도 사용할 수 있도록 구현하였습니다.<br />
<br />
무한스크롤<br />
처음부터 모든 정보를 로딩하지 않고 사용자가 스크롤을 내려서 모든 정보를 확인했을경우 새로운 정보를 바로 아래에 추가 로딩하는 방식입니다. 페이지를 일일이 넘겨야하는 단점을 보완하고 필요한만큼만의 정보를 표시할 수 있습니다.<br />
<br />
<br />
<br />
리액트 앱<br />
애플리케이션의 UI를 담당하는 프론트엔드 프로그램으로 유저와 직접 상호작용하는 부분입니다. 유저의 요청을 받아 api서버와 스트리밍 서버에서 정보를 받아와 보여주고 또 유저의 활동을 api서버를 통해 등록합니다.<br />
<br />
스트리밍 서버<br />
애플리케이션의 동영상을 가지고 있는 서버로 유저의 동영상을 업로드 하고 또 스트리밍 받아오는 곳입니다. <br />
<br />
API 서버<br />
애플리케이션에 필요한 모든 정보들을 합의된 api를 통해서 주고받을수 있는 서버입니다.<br />
<br />
데이터베이스<br />
애플리케이션에 필요한 정보들을 보관하는 곳입니다. 마리아DB를 통해 구현되어있으며, 유저정보, 게시물정보, 팔로우 정보 등 동영상을 제외한 모든 것이 저장되어있습니다.<br />
<br />
<br />
==결과 및 평가==<br />
===완료 작품의 소개===<br />
====프로토타입 사진 혹은 작동 장면====<br />
내용<br />
====포스터====<br />
내용<br />
<br />
===관련사업비 내역서===<br />
내용<br />
<br />
===완료작품의 평가===<br />
내용<br />
<br />
===향후계획===<br />
내용<br />
<br />
===특허 출원 내용===<br />
내용</div>TeamVR조https://capstone.uos.ac.kr/cdc/index.php?title=TeamVR%EC%A1%B0&diff=959TeamVR조2018-12-21T08:07:39Z<p>TeamVR조: /* 시장상황에 대한 분석 */</p>
<hr />
<div><div>__TOC__</div><br />
<br />
==프로젝트 개요==<br />
=== 기술개발 과제 ===<br />
''' 국문 : ''' 동영상 기반 네일아트샵 홍보 플랫폼<br />
<br />
''' 영문 : ''' 00000000..<br />
<br />
===과제 팀명===<br />
TeamVR<br />
<br />
===지도교수===<br />
김성환 교수님<br />
<br />
===개발기간===<br />
2018년 11월 ~ 2018년 12월 (총 1개월)<br />
<br />
===구성원 소개===<br />
서울시립대학교 컴퓨터과학부 2011XXX0** 윤종석(팀장)<br />
<br />
서울시립대학교 컴퓨터과학부 2011XXX0** 김기진<br />
<br />
서울시립대학교 수학과 2011XXX0** 서동민<br />
<br />
서울시립대학교 컴퓨터과학부 2011XXX0** 송영찬<br />
<br />
<br />
==서론==<br />
===개발 과제의 개요===<br />
====개발 과제 요약====<br />
동영상을 올리고 볼 수 있는 웹사이트를 제작한다.<br />
<br />
====개발 과제의 배경====<br />
최근 스마트폰 플랫폼을 기반으로 하지 않던 기존의 서비스에 앱이나 웹을 이용하여 더 많은 사용자에게 서비스를 제공하기 위한 움직임이 보이고 있습니다. 네일아트 분야 또한 스마트폰 기반이 아니었던 기존의 서비스라고 볼 수 있는데, 아직은 시장을 확실하게 장악한 서비스나 앱이 없습니다. 네일 샵 주인 입장에서는 자신들의 네일 아트를 홍보하고 손님의 예약을 받을 수단이 없으며, 손님 입장에서는 원하는 샵에 예약을 쉽게 할 수 없는 불편함이 있습니다. 이번 프로젝트에서는 이런 불편함을 해소하고자 네일아트 관련 정보를 공유하고, 네일 샵을 예약할 수 있는 플랫폼을 개발하고자 하였습니다..<br />
이러한 플랫폼을 제작하는 것에 있어 앱이나 웹과 같은 선택지가 존재하는데 설치가 필요한 앱 보다는 접근이 용이한 웹을 이용하여 개발을 시도하기로 하였습니다. 최근 사용되고 있는 react와 같은 프레임워크는 웹에서도 마치 앱과 같은 동적인 웹 애플리케이션을 구현하는 것이 간편하여 이러한 도구를 이용하여 네일아트 샵을 홍보, 예약할 수 있는 동적인 웹 사이트를 구현하는 것을 목표로 진행하였습니다.<br />
<br />
====개발 과제의 목표 및 내용====<br />
네일아트샵을 효과적으로 홍보하기 위하여 동영상을 올리고 볼 수 있는 웹사이트를 제작한다.<br />
<br />
===관련 기술의 현황===<br />
====관련 기술의 현황 및 분석(State of art)====<br />
*전 세계적인 기술현황<br />
내용<br />
*특허조사 및 특허 전략 분석<br />
내용<br />
*기술 로드맵<br />
내용<br />
<br />
====시장상황에 대한 분석====<br />
*경쟁제품 조사 비교<br />
젤라또 <br />
사진 기반의 네일아트샵 홍보 플랫폼이다. 안드로이드, IOS 애플리케이션 형태.<br />
*마케팅 전략 제시<br />
내용<br />
<br />
===개발과제의 기대효과===<br />
====기술적 기대효과====<br />
내용<br />
====경제적, 사회적 기대 및 파급효과====<br />
내용<br />
<br />
===기술개발 일정 및 추진체계===<br />
====개발 일정====<br />
<br />
====구성원 및 추진체계====<br />
윤종석 : 웹 프론트엔드 <br />
김기진 : 웹 백엔드 <br />
서동민 : 스트리밍 서버 <br />
송영찬 : 클라우드, DB 구축 <br />
<br />
==설계==<br />
===설계사양===<br />
====제품의 요구사항====<br />
웹 브라우저만 있으면 사용 할 수 있도록 Web Application 형태로 제작한다.<br />
<br />
====설계 사양====<br />
내용<br />
<br />
===개념설계안===<br />
내용<br />
<br />
===이론적 계산 및 시뮬레이션===<br />
내용<br />
<br />
===상세설계 내용===<br />
네일아트 게시물 업로드&조회<br />
<br />
주위 네일아트 샵 조회<br />
<br />
팔로우, 좋아요 기능<br />
<br />
설치가 필요없는 웹 접근<br />
기존 설치가 필요해 접근성이 떨어지던 앱 방식의 단점을 극복하여 설치가 필요없이 웹으로 접근할 수 있도록 구현하였습니다. <br />
<br />
동영상 위주의 게시물 & 페이지단위 스크롤<br />
유저들의 관심을 끌 수 있도록 동영상 위주의 게시물을 구현하였고 또 이러한 게시물을 최적화되게 볼 수 있도록 페이지단위 스크롤을 구현하였습니다. <br />
<br />
탭방식 페이지 이동<br />
기존 애플리케이션에서 주로 사용하던 하단 탭 메뉴를 웹에서도 사용할 수 있도록 구현하였습니다.<br />
<br />
무한스크롤<br />
처음부터 모든 정보를 로딩하지 않고 사용자가 스크롤을 내려서 모든 정보를 확인했을경우 새로운 정보를 바로 아래에 추가 로딩하는 방식입니다. 페이지를 일일이 넘겨야하는 단점을 보완하고 필요한만큼만의 정보를 표시할 수 있습니다.<br />
<br />
<br />
<br />
리액트 앱<br />
애플리케이션의 UI를 담당하는 프론트엔드 프로그램으로 유저와 직접 상호작용하는 부분입니다. 유저의 요청을 받아 api서버와 스트리밍 서버에서 정보를 받아와 보여주고 또 유저의 활동을 api서버를 통해 등록합니다.<br />
<br />
스트리밍 서버<br />
애플리케이션의 동영상을 가지고 있는 서버로 유저의 동영상을 업로드 하고 또 스트리밍 받아오는 곳입니다. <br />
<br />
API 서버<br />
애플리케이션에 필요한 모든 정보들을 합의된 api를 통해서 주고받을수 있는 서버입니다.<br />
<br />
데이터베이스<br />
애플리케이션에 필요한 정보들을 보관하는 곳입니다. 마리아DB를 통해 구현되어있으며, 유저정보, 게시물정보, 팔로우 정보 등 동영상을 제외한 모든 것이 저장되어있습니다.<br />
<br />
<br />
==결과 및 평가==<br />
===완료 작품의 소개===<br />
====프로토타입 사진 혹은 작동 장면====<br />
내용<br />
====포스터====<br />
내용<br />
<br />
===관련사업비 내역서===<br />
내용<br />
<br />
===완료작품의 평가===<br />
내용<br />
<br />
===향후계획===<br />
내용<br />
<br />
===특허 출원 내용===<br />
내용</div>TeamVR조https://capstone.uos.ac.kr/cdc/index.php?title=TeamVR%EC%A1%B0&diff=958TeamVR조2018-12-21T08:06:34Z<p>TeamVR조: </p>
<hr />
<div><div>__TOC__</div><br />
<br />
==프로젝트 개요==<br />
=== 기술개발 과제 ===<br />
''' 국문 : ''' 동영상 기반 네일아트샵 홍보 플랫폼<br />
<br />
''' 영문 : ''' 00000000..<br />
<br />
===과제 팀명===<br />
TeamVR<br />
<br />
===지도교수===<br />
김성환 교수님<br />
<br />
===개발기간===<br />
2018년 11월 ~ 2018년 12월 (총 1개월)<br />
<br />
===구성원 소개===<br />
서울시립대학교 컴퓨터과학부 2011XXX0** 윤종석(팀장)<br />
<br />
서울시립대학교 컴퓨터과학부 2011XXX0** 김기진<br />
<br />
서울시립대학교 수학과 2011XXX0** 서동민<br />
<br />
서울시립대학교 컴퓨터과학부 2011XXX0** 송영찬<br />
<br />
<br />
==서론==<br />
===개발 과제의 개요===<br />
====개발 과제 요약====<br />
동영상을 올리고 볼 수 있는 웹사이트를 제작한다.<br />
<br />
====개발 과제의 배경====<br />
최근 스마트폰 플랫폼을 기반으로 하지 않던 기존의 서비스에 앱이나 웹을 이용하여 더 많은 사용자에게 서비스를 제공하기 위한 움직임이 보이고 있습니다. 네일아트 분야 또한 스마트폰 기반이 아니었던 기존의 서비스라고 볼 수 있는데, 아직은 시장을 확실하게 장악한 서비스나 앱이 없습니다. 네일 샵 주인 입장에서는 자신들의 네일 아트를 홍보하고 손님의 예약을 받을 수단이 없으며, 손님 입장에서는 원하는 샵에 예약을 쉽게 할 수 없는 불편함이 있습니다. 이번 프로젝트에서는 이런 불편함을 해소하고자 네일아트 관련 정보를 공유하고, 네일 샵을 예약할 수 있는 플랫폼을 개발하고자 하였습니다..<br />
이러한 플랫폼을 제작하는 것에 있어 앱이나 웹과 같은 선택지가 존재하는데 설치가 필요한 앱 보다는 접근이 용이한 웹을 이용하여 개발을 시도하기로 하였습니다. 최근 사용되고 있는 react와 같은 프레임워크는 웹에서도 마치 앱과 같은 동적인 웹 애플리케이션을 구현하는 것이 간편하여 이러한 도구를 이용하여 네일아트 샵을 홍보, 예약할 수 있는 동적인 웹 사이트를 구현하는 것을 목표로 진행하였습니다.<br />
<br />
====개발 과제의 목표 및 내용====<br />
네일아트샵을 효과적으로 홍보하기 위하여 동영상을 올리고 볼 수 있는 웹사이트를 제작한다.<br />
<br />
===관련 기술의 현황===<br />
====관련 기술의 현황 및 분석(State of art)====<br />
*전 세계적인 기술현황<br />
내용<br />
*특허조사 및 특허 전략 분석<br />
내용<br />
*기술 로드맵<br />
내용<br />
<br />
====시장상황에 대한 분석====<br />
*경쟁제품 조사 비교<br />
내용<br />
*마케팅 전략 제시<br />
내용<br />
<br />
===개발과제의 기대효과===<br />
====기술적 기대효과====<br />
내용<br />
====경제적, 사회적 기대 및 파급효과====<br />
내용<br />
<br />
===기술개발 일정 및 추진체계===<br />
====개발 일정====<br />
<br />
====구성원 및 추진체계====<br />
윤종석 : 웹 프론트엔드 <br />
김기진 : 웹 백엔드 <br />
서동민 : 스트리밍 서버 <br />
송영찬 : 클라우드, DB 구축 <br />
<br />
==설계==<br />
===설계사양===<br />
====제품의 요구사항====<br />
웹 브라우저만 있으면 사용 할 수 있도록 Web Application 형태로 제작한다.<br />
<br />
====설계 사양====<br />
내용<br />
<br />
===개념설계안===<br />
내용<br />
<br />
===이론적 계산 및 시뮬레이션===<br />
내용<br />
<br />
===상세설계 내용===<br />
네일아트 게시물 업로드&조회<br />
<br />
주위 네일아트 샵 조회<br />
<br />
팔로우, 좋아요 기능<br />
<br />
설치가 필요없는 웹 접근<br />
기존 설치가 필요해 접근성이 떨어지던 앱 방식의 단점을 극복하여 설치가 필요없이 웹으로 접근할 수 있도록 구현하였습니다. <br />
<br />
동영상 위주의 게시물 & 페이지단위 스크롤<br />
유저들의 관심을 끌 수 있도록 동영상 위주의 게시물을 구현하였고 또 이러한 게시물을 최적화되게 볼 수 있도록 페이지단위 스크롤을 구현하였습니다. <br />
<br />
탭방식 페이지 이동<br />
기존 애플리케이션에서 주로 사용하던 하단 탭 메뉴를 웹에서도 사용할 수 있도록 구현하였습니다.<br />
<br />
무한스크롤<br />
처음부터 모든 정보를 로딩하지 않고 사용자가 스크롤을 내려서 모든 정보를 확인했을경우 새로운 정보를 바로 아래에 추가 로딩하는 방식입니다. 페이지를 일일이 넘겨야하는 단점을 보완하고 필요한만큼만의 정보를 표시할 수 있습니다.<br />
<br />
<br />
<br />
리액트 앱<br />
애플리케이션의 UI를 담당하는 프론트엔드 프로그램으로 유저와 직접 상호작용하는 부분입니다. 유저의 요청을 받아 api서버와 스트리밍 서버에서 정보를 받아와 보여주고 또 유저의 활동을 api서버를 통해 등록합니다.<br />
<br />
스트리밍 서버<br />
애플리케이션의 동영상을 가지고 있는 서버로 유저의 동영상을 업로드 하고 또 스트리밍 받아오는 곳입니다. <br />
<br />
API 서버<br />
애플리케이션에 필요한 모든 정보들을 합의된 api를 통해서 주고받을수 있는 서버입니다.<br />
<br />
데이터베이스<br />
애플리케이션에 필요한 정보들을 보관하는 곳입니다. 마리아DB를 통해 구현되어있으며, 유저정보, 게시물정보, 팔로우 정보 등 동영상을 제외한 모든 것이 저장되어있습니다.<br />
<br />
<br />
==결과 및 평가==<br />
===완료 작품의 소개===<br />
====프로토타입 사진 혹은 작동 장면====<br />
내용<br />
====포스터====<br />
내용<br />
<br />
===관련사업비 내역서===<br />
내용<br />
<br />
===완료작품의 평가===<br />
내용<br />
<br />
===향후계획===<br />
내용<br />
<br />
===특허 출원 내용===<br />
내용</div>TeamVR조https://capstone.uos.ac.kr/cdc/index.php?title=TeamVR%EC%A1%B0&diff=788TeamVR조2018-12-17T06:23:34Z<p>TeamVR조: /* 개발 과제 요약 */</p>
<hr />
<div><div>__TOC__</div><br />
<br />
==프로젝트 개요==<br />
=== 기술개발 과제 ===<br />
''' 국문 : ''' 동영상 기반 네일아트샵 홍보 플랫폼<br />
<br />
''' 영문 : ''' 00000000..<br />
<br />
===과제 팀명===<br />
TeamVR<br />
<br />
===지도교수===<br />
김성환 교수님<br />
<br />
===개발기간===<br />
2018년 11월 ~ 2018년 12월 (총 1개월)<br />
<br />
===구성원 소개===<br />
서울시립대학교 컴퓨터과학부 2011XXX0** 윤종석(팀장)<br />
<br />
서울시립대학교 컴퓨터과학부 2011XXX0** 김기진<br />
<br />
서울시립대학교 수학과 2011XXX0** 서동민<br />
<br />
서울시립대학교 컴퓨터과학부 2011XXX0** 송영찬<br />
<br />
<br />
==서론==<br />
===개발 과제의 개요===<br />
====개발 과제 요약====<br />
동영상을 올리고 볼 수 있는 웹사이트를 제작한다.<br />
<br />
====개발 과제의 배경====<br />
내용<br />
====개발 과제의 목표 및 내용====<br />
네일아트샵을 효과적으로 홍보하기 위하여 동영상을 올리고 볼 수 있는 웹사이트를 제작한다.<br />
<br />
===관련 기술의 현황===<br />
====관련 기술의 현황 및 분석(State of art)====<br />
*전 세계적인 기술현황<br />
내용<br />
*특허조사 및 특허 전략 분석<br />
내용<br />
*기술 로드맵<br />
내용<br />
<br />
====시장상황에 대한 분석====<br />
*경쟁제품 조사 비교<br />
내용<br />
*마케팅 전략 제시<br />
내용<br />
<br />
===개발과제의 기대효과===<br />
====기술적 기대효과====<br />
내용<br />
====경제적, 사회적 기대 및 파급효과====<br />
내용<br />
<br />
===기술개발 일정 및 추진체계===<br />
====개발 일정====<br />
<br />
====구성원 및 추진체계====<br />
윤종석 : 웹 프론트엔드<br />
김기진 : 웹 백엔드<br />
서동민 : 스트리밍 서버<br />
송영찬 : 클라우드, DB 구축<br />
<br />
==설계==<br />
===설계사양===<br />
====제품의 요구사항====<br />
내용<br />
====설계 사양====<br />
내용<br />
<br />
===개념설계안===<br />
내용<br />
<br />
===이론적 계산 및 시뮬레이션===<br />
내용<br />
<br />
===상세설계 내용===<br />
내용<br />
<br />
==결과 및 평가==<br />
===완료 작품의 소개===<br />
====프로토타입 사진 혹은 작동 장면====<br />
내용<br />
====포스터====<br />
내용<br />
<br />
===관련사업비 내역서===<br />
내용<br />
<br />
===완료작품의 평가===<br />
내용<br />
<br />
===향후계획===<br />
내용<br />
<br />
===특허 출원 내용===<br />
내용</div>TeamVR조https://capstone.uos.ac.kr/cdc/index.php?title=TeamVR%EC%A1%B0&diff=787TeamVR조2018-12-17T05:58:04Z<p>TeamVR조: </p>
<hr />
<div><div>__TOC__</div><br />
<br />
==프로젝트 개요==<br />
=== 기술개발 과제 ===<br />
''' 국문 : ''' 동영상 기반 네일아트샵 홍보 플랫폼<br />
<br />
''' 영문 : ''' 00000000..<br />
<br />
===과제 팀명===<br />
TeamVR<br />
<br />
===지도교수===<br />
김성환 교수님<br />
<br />
===개발기간===<br />
2018년 11월 ~ 2018년 12월 (총 1개월)<br />
<br />
===구성원 소개===<br />
서울시립대학교 컴퓨터과학부 2011XXX0** 윤종석(팀장)<br />
<br />
서울시립대학교 컴퓨터과학부 2011XXX0** 김기진<br />
<br />
서울시립대학교 수학과 2011XXX0** 서동민<br />
<br />
서울시립대학교 컴퓨터과학부 2011XXX0** 송영찬<br />
<br />
<br />
==서론==<br />
===개발 과제의 개요===<br />
====개발 과제 요약====<br />
내용<br />
====개발 과제의 배경====<br />
내용<br />
====개발 과제의 목표 및 내용====<br />
네일아트샵을 효과적으로 홍보하기 위하여 동영상을 올리고 볼 수 있는 웹사이트를 제작한다.<br />
<br />
===관련 기술의 현황===<br />
====관련 기술의 현황 및 분석(State of art)====<br />
*전 세계적인 기술현황<br />
내용<br />
*특허조사 및 특허 전략 분석<br />
내용<br />
*기술 로드맵<br />
내용<br />
<br />
====시장상황에 대한 분석====<br />
*경쟁제품 조사 비교<br />
내용<br />
*마케팅 전략 제시<br />
내용<br />
<br />
===개발과제의 기대효과===<br />
====기술적 기대효과====<br />
내용<br />
====경제적, 사회적 기대 및 파급효과====<br />
내용<br />
<br />
===기술개발 일정 및 추진체계===<br />
====개발 일정====<br />
<br />
====구성원 및 추진체계====<br />
윤종석 : 웹 프론트엔드<br />
김기진 : 웹 백엔드<br />
서동민 : 스트리밍 서버<br />
송영찬 : 클라우드, DB 구축<br />
<br />
==설계==<br />
===설계사양===<br />
====제품의 요구사항====<br />
내용<br />
====설계 사양====<br />
내용<br />
<br />
===개념설계안===<br />
내용<br />
<br />
===이론적 계산 및 시뮬레이션===<br />
내용<br />
<br />
===상세설계 내용===<br />
내용<br />
<br />
==결과 및 평가==<br />
===완료 작품의 소개===<br />
====프로토타입 사진 혹은 작동 장면====<br />
내용<br />
====포스터====<br />
내용<br />
<br />
===관련사업비 내역서===<br />
내용<br />
<br />
===완료작품의 평가===<br />
내용<br />
<br />
===향후계획===<br />
내용<br />
<br />
===특허 출원 내용===<br />
내용</div>TeamVR조