1. Software Requirements Specification (SRS)
Web Based
Presentation &
Controller
지금부터 CRUD의 요구사항 분석 발표를 시작하도록 하겠습니다.
Team Crud

2. contents. Requirement Definition Storyboard 3. Resource Requirement
CRUD
목차는 다음과 같습니다.
먼저 요구사항을 정의와,
Storyboard 발표 후,
개발 요구사항 명세를 진행하도록 하겠습니다.
Contents
Team CRUD

3. Requirements Definition Web based Presentation & Controller
Requirements
Definition
Writer – 전용훈, 조익찬
요구사항 정의 입니다.
CRUD

4. Webpresenter Application Name We are make.. Web based Presentation
And Controller my
app.
design
Controller
Speaker
Note
Presentation
저희가 만들 어플리케이션은 지난 발표때 말씀드린바와 같이
웹을 기반으로한 프레젠테이션 및 컨트롤러입니다.
앱이름은 다음과 같이 정해보았습니다.
Web + Presenter
웹과 프레젠터의 합성어입니다.
컨트롤한다는 의미는 넣지 못했지만
웹기반의 프레젠테이션이라는 의미를 담는데 중점을 두었습니다.
User Requirements
Team CRUD

5. feature. Webpresenter Core Function 01. Presentation Import 02.my
app.
design
We considering
How to make Presentation in Web
and decision “Let's import PPT or PPTX files!”
02.
Presentation Control
No more used Pointer
And We Want to see Speaker Note
03.
Multi Screen (Mobile / PC)
그다음으로 핵심기능.들을 세가지로 정리해보았습니다.
첫번째로 프레젠테이션 임포트 기능인데요,
팀내에서 아이디어 회의결과, 조잡하게 에디터기능을 넣는것 보다
차라리 기존에 사용하던 Power Point 를 사용하여 만든 PPT파일과, PPTX파일 또는 PDF파일을
임포트하여 이미지화, 프레젠테이션에 사용하는 것으로 기능의 가닥을 \잡았습니다.
두번째는 프레젠테이션 컨트롤 기능입니다.
원격으로 페이지를 넘기는 기본적인 기능 외에
아직까지 구현은 미지수이지만 포인터기능을 고려중에 있으며,
발표자를 위한 스피커노트 기능을 핵심기능으로 두었습니다.
마지막으로 멀티 스크린기능입니다.
PC/Mobile 등 플랫폼을 가리지않고, 발표자의 View을 공유하는 기능입니다.
이 기능에는 추가적으로 발표View에 QR코드를 삽입하여 유저들의 접근 편의성을 높이는 방안을 고려하고있습니다.
Not only Main Screen
but also We want see Presentation
In My Device
User Requirements
Team CRUD

6. process. Webpresenter Process More Simple More eideticmy
app.
design
Member
Login
Presentation
Import My
Presentation
List
View My
Presentation
Control
Presentation
(Other View)
Logout
다음은 웹프레젠터의 개략적인 처리흐름도 입니다.
기능은 최대한 단순하게 그리고 직관적이게 구성하여
User가 어렵지 않게 사용하는 것을 중점으로 둘 것입니다.
먼저 회원이 Login을 하고, 프레젠테이션을 임포트합니다. 이후 자신의 프레젠테이션 목록을 확인하고
프레젠테이션의 컨트롤 View과 발표View을 선택하여 각각의 장치에 보여줍니다.
이후 프레젠테이션을 진행하고 종료하게되면 로그아웃을 통해 어플리케이션의 라이프사이클이 종료됩니다.
1st.
2nd.
3rd.
4th.
5th.
6th.
User Requirements
Team CRUD

7. ui structure. Webpresenter UI Structure ex ) Mobile View Presentationmy
app.
design
PT List
d. ppt
e. ppt
More 01
b. ppt
a. ppt
c. ppt
Speaker note
Prev
Next
Controller 02 03
Presentation
View
주요 View의 유저인터페이스를 나타내 보았습니다.
보시는 바와같이 첫번째 View은 발표자 노트와 함께 발표View을 제어하는 컨트롤러의 모습입니다.
두번째 View은 Login후 자신의 프레젠테이션 목록을 확인할 수 있는 View입니다.
마지막으로 세번째 View은 모바일에서 프레젠테이션View을 띄웠을때의 View입니다.
각 View에 붙은 번호에 대해 설명드리면
1번은 목록을 더 볼 수 있는 버튼, 2번은 리스트로 돌아가는 버튼, 3번은 발표View을 컨트롤하는 버튼입니다.
01. Back / 설명 / 설명 – 나눔고딕 B, 7pt
User Requirements
Team CRUD

8. ui design. Webpresenter UI design There is no Designer..
SenchaTouch Default Design my
app.
design
저희가 사용할 디자인을 임시로 입혀보았습니다.
하이브리드 웹앱 라이브러리인 센차터치를 사용하여
기본으로 제공되는 디자인을 입힌 View입니다.
발표View의 경우에는 html5를 사용하여 프레젠테이션뷰를 구성한 View입니다.
기능은 전과 같습니다.
01. 설명 / 설명 / 설명 – 나눔고딕 B, 7pt
User Requirements
Team CRUD

9. Webpresenter StoryBoard 20074488 전용훈 20084689 조익찬
Web Based Presentation & Controller
Webpresenter
StoryBoard #2
Requirements
Computer
Science
Department
Project Name
Team
CRUD
Documentation
전용훈
다음은 좀더 구체적인 Storyboard를 설명드리겠습니다.
TEAM CRUD

10. 앞에 처리흐름도에서 설명드렸던 내용을 바탕으로 스토리 보드를 작성해 보았습니다.
Storyboard
Job#
title
abstraction
Client
User View
platform
PC / Mobile
View 1
Login View
View 4
Import View
Func.
Login
Func.
Import
View 2
Join View
View 5
Presentation View( PCView)
Func.
Join
Func.
Paging
앞에 처리흐름도에서 설명드렸던 내용을 바탕으로 스토리 보드를 작성해 보았습니다.
여섯가지 화면으로 분류하여 손으로 스케치 해보았습니다.
한장씩 살펴보겠습니다.
View 3
My Document LIST View
View 6
Speaker Note View &
Controller View (Mobile View)
Func.
List & Import
Func.
PCView Control 10

11. #View 1 Login Func. 로그인 화면입니다.
Storyboard
Job# 1
Title
LoginView
Client
User View
Platform
PC / Mobile
#View 1
Login
Login View.
로그인 화면입니다.
임시로 구성한 화면이며, 회원가입버튼을 누를시 회원가입화면이 나타나게 됩니다.
가입한 아이디와 비밀번호를 입력하면 나의 문서화면이 나타나게됩니다.
Func.
Login 11

12. #View 1 Join Func. 회원가입 화면을 임시로 구성해 보았습니다. 개인정보는 다루지 않고, 아이디와 비밀번호,
Storyboard
Job# 2
Title
Join View
Client
User View
Platform
PC / Mobile
#View 1
Join
Just Userid and Passwd
No Private Infomation
회원가입 화면을 임시로 구성해 보았습니다.
개인정보는 다루지 않고, 아이디와 비밀번호,
그리고 패스워드 분실시 질문과 답을 등록하도록 구성하였습니다.
Func.
Join member in webpresenter 12

13. #View 1 My Document List View Func. 내 문서 리스트를 나타내는 화면입니다.
Storyboard
Job# 3
Title
ListView
Client
User View
Platform
PC / Mobile
#View 1
My Document List View
Listing My Document
내 문서 리스트를 나타내는 화면입니다.
왼쪽 상단의 버튼은 뒤로가기,
오른쪽상단의 버튼은 글쓰기 버튼으로 대체할 예정입니다.
Func.
List, Import Button 13

14. #View 1 Import View Func. 글쓰기 버튼을 눌렀을때의 화면입니다.
Storyboard
Job# 4
Title
Import View
Client
User View
Platform
PC / Mobile
#View 1
Import View
Import outside Documents
Ppt, pptx, pdf
글쓰기 버튼을 눌렀을때의 화면입니다.
글쓰기 폼같은 경우에는 구상이 아직 구상이 덜 진행 되었습니다.
파일업로드를 할 수 있는 입력 폼과,
미리보기를 할 수 있는 기능을 추가 할 예정입니다.
Func.
Import file and generating Slide 14

15. #View 1 Presentation View Func.
Storyboard
Job# 5
Title
PresentationView
Client
User View
Platform
PC / Mobile
#View 1
Presentation View
Presentation User Documents
문서 목록에서 문서를 선택하면 발표자노트화면과 발표화면을 선택하게됩니다.
그 중에 발표 화면이 되겠습니다.
전에 프로토타입에서 보셨던 바와같은 화면으로
키보드로 슬라이드의 페이징이 가능하며
컨트롤러에 의해 조작됩니다.
Func.
Slide Paging 15

16. #View 1 Speaker View Func. 발표자 노트화면을 눌렀을때의 화면입니다. 화면은 캐러셀로 구성될 예정이며,
Storyboard
Job# 6
Title
SpeakerView
Client
User View
Platform
PC / Mobile
#View 1
Speaker View
Display Speaker note and
Control Presentation View
발표자 노트화면을 눌렀을때의 화면입니다.
화면은 캐러셀로 구성될 예정이며,
마우스로 드래그하여 넘기거나, 모바일의 경우 손가락으로 스와이프할경우,
발표자노트와 발표화면이 같이 넘어가게됩니다.
만약 발표화면만 움직이고 싶다면 하단의 버튼을 이용합니다.
프레젠테이션이 끝나면 사용이 끝나게 됩니다.
로그아웃 기능도 추가해야겠습니다.
Func.
Control Presentation View 16

17. Resources Requirement
Webpresenter
Resources Requirement
Use Web Technic Only
다음으로 개발시 필요한 자원에 대한 요구사항 명세입니다.

18. Simple system configuration
Architecture
Simple system configuration 1
Mobile
Database
JSP Pc
Node js
data
Response / Request
Broadcast
event
시스템 구조를 간략히 표현해 보았습니다.
Mobile에 해당하는 부분이 컨트롤러,
PC에 해당하는 부분이 발표View입니다.
해당 두 브라우저는 컨트롤러로 부터 발표View을 컨트롤하기위해 Nodejs서버를 통해 통신합니다.
JSP에서는 해당 프레젠테이션 페이지 요청이 올때마다 필요한 데이터를 데이터베이스로부터 반환합니다.

19. Details System Configuration2
Desktop Client
- Internet Browser
Mobile Client
- Smart Phone
- Tablet PC
Oracle
Database
Sencha touch 2.x (Mobile)
jQuery
HTML5
Web Socket
Client Reference
Java (JSP + Servlet)
Spring 3.x
iBatis
Eclipse
Node.js
Server Reference
Tomcat 6 Web Server(WAS)
Client Response
+ Transaction
Java, JSP, Servlet
Node.js Server
Sencha touch, node.js
Client Request
상세 시스템 구성도입니다.
가장 상단에 보이는 데스크탑과 모바일이 클라이언트에 해당하는 유저의 브라우져이며,
두 클라이언트끼리 다른 브라우져를 컨트롤하기위해 nodejs서버를 통해 통신합니다.
이를 위해 사용되는 자원으로는 앞서 말씀드린 하이브리드 웹앱 제작에 용이한 센차터치, jquery, html5의 websocket등이 있습니다.
아래쪽은 프레젠테이션 데이터가 저장되는 데이터베이스와 웹 요청을 처리하는 웹어플리케이션 서버의 모습입니다.
이쪽에서는 JSP를 사용하며 스프링프레임워크, 아이바티스 등의 라이브러리를 사용합니다.

20. Client / Server Software &
Hardware Requirement
Client / Server Software &
Hardware Requirement 3
OS : Windows 7
Browser : IE 9, Chrome, Firefox, Safari
Mobile : Android 2.2(Froyo) I-phone 3G (ios 4.0)
Client
(PC/Mobile)
WAS : Tomcat 6.0
Database : Oracle 10G XE
Server
(PC)
Hardware
(Minimum)
CPU : Dual core
RAM : 2G
Graphic : minimum used
Mobile : Smart Phone or tarblet PC
하드웨어 요구명세입니다.
그전에 사용되는 소프트웨어들을 살펴보겠습니다.
클라이언트에서는 단지 웹 브라우져만을 필요로합니다.
PC의 경우에는 IE는 9부터 타 브라우져의 경우 백그라운드에서 최신버전으로 업데이트 되고 있으므로, 최신버전을 사용하며
대부분의 스마트폰 모바일 기기에서는 html5를 지원하는 웹브라우져를 장착하고 있으므로 많은 사용자층이 확보될 것입니다.
서버는 일단 개발피시를 기준으로 윈도우7 WAS는 6.0 데이터베이스는 오라클 10G를 사용합니다.
결과적으로 하드웨어 요구사항을 측정하자면 서버피시를 제외하고
하드웨어의 별다른 요구사항은 필요하지 않을 것으로 판단됩니다.

21. First & second is Client side Third & fifth is Server side
Resources Requirement
First & second is Client side
Third & fifth is Server side 4
다음은 개발에 사용되는 라이브러리들입니다.
앞에 자바스크립트와 html5에 해당하는 오픈소스들은 클라이언트, User 브라우저 영역
뒤에 jsp와 db에 해당하는 오픈소스들은 서버영역입니다.
Nodejs의 경우 서버와 클라이언트의 작업이 모두 필요할것으로 예상됩니다.
Javascript
HTML5
JSP
Database

22. 나눔고딕 B 9.5pt, 문자 간격은 넓게 0.1pt, 줄 간격은 고정 14pt입니다.
Development Process
가운데 정렬로 내용을 입력하세요.
나눔고딕 B 9.5pt, 문자 간격은 넓게 0.1pt, 줄 간격은 고정 14pt입니다.
상황에 맞게 조절하실 수 있습니다. 5
make up
Display 내용 내용
Need Data
Request
Client Side
(Html / Jsp)
Request
Analysis
Mapping
Service
Getting Data
From DB
Return Data
Server Side
(Java)
이로써 개발되는 개발절차를 도식화 해 보았습니다.
먼저 클라이언트영역의 경우
User에게 표시할 View을 구성한 뒤 필요한 데이터를 요청하는 정도로 작업후,
서버 측에서는 해당 요청을 분석 후 해당 로직을 실행하고
데이터베이스로부터 필요한 데이터를 받아 필요한 형태(JSON, JSP)로 반환합니다.
이벤트 서버는 NODEJS를 뜻하는 부분으로 컨트롤러에서 명령이 들어오면
해당 명령을 각기 다른 브라우져에 브로드캐스트하는 구문을 개발 할 것입니다.
이와 같은 방식으로 개발이 진행될 예정입니다.
Event
Catch
Broadcast
Event
Event Server Side
(Nodejs)

23. Thanks. Have any questions? Web Based Presentation & Controller
이상으로 발표를 마치겠습니다.
감사합니다.
Team Crud