1

2013 소프트웨어 공학

Design Document

다함께 뽐뽐뽐

재능 자랑 플랫폼

뽐팀

2009147039 김지현

2009147035 정준식

2009147055 조영현

2

목차

1. Introduction 3

1.1. Objectives 3

1.2. Note for Architecture Design 3

1.3. Revision 3

2. System Architecture Overview 4

2.1. System Architecture Diagram (Block Diagram) 4

2.2. System Architecture Description 5

3. Design Description 6

3.1. System Design Overview 6

3.2. Subsystem Description 6

3.2.1. Client 6

3.2.2. Server 6

3.2.3. Youtube 9

3.3. Class Diagram 9

3.3.1. Client-Side 10

3.3.2. Server-Side 12

3.4. Sequence Diagram 14

4. User Interface Design 20

4.1. User Interface Overview 20

4.2. Page Description 21

5. Schedule Management 28

5.1. Task Duration and Dependencies 28

5.2. Activity Network 28

3

1. Introduction

1.1. Objectives

- 본 문서는 뽐팀의 다함께 뽐뽐뽐 개발을 위한 상세한 설계 정보가 기록된 문서이다. 모든 개발자와

디자이너들은 본 문서를 참조하여 다함께 뽐뽐뽐을 일관적이고 효율적으로 개발 할 수 있다. 본 문서는

지속적으로 업데이트 가능성이 있으며, 개발시 수정 사항에 따라 유의하여 참조하도록 한다.

1.2. Note for Architecture Design

- 다함께 뽐뽐뽐은 다수의 사용자에게 동일한 서비스를 제공하기 위해 클라이언트-서버 형태의 시스템으로

개발된다. 또한 동영상 파일을 저장하기 위해 Youtube 시스템을 사용하였다.

1.3. Revision

- Version 0.1 : 초안 (2013. 11. 05.)

- Version 0.2 : 내용 추가 (2013. 11. 08.)

- Version 0.9 : 내용 정리 및 다이어 그램 추가 (2013. 11. 09.)

- Version 1.0 : 배포판 완성 (2013. 11. 10.)

4

2. System Architecture Overview

2.1. System Architecture Diagram (Block Diagram)

5

2.2. System Architecture Description

- 다함께 뽐뽐뽐은 클라이언트-서버 시스템으로 개발한다. 클라이언트는 Android 어플리케이션 이며,

서버는 웹 서비스를 제공할 수 있는 일반적인 Linux 서버이다.

- 클라이언트는 사용자와 직접적으로 연결되는 User Interface, 스마트폰의 파일에 접근하는 File Manager,

서버의 응답을 적절히 처리해주는 Parsing Manager, 서버와 통신하는 Network Manager 로 구성된다.

- 서버는 클라이언트의 요청을 처리하는 Web Application Server(WAS), 다양한 정보들을 저장하는

Database, 사용자가 업로드한 파일들을 저장하는 File Server 로 구성된다.

- Web Application Server 는 Database, File Server 와 연결하여 사용자가 요청하는 작업들을 수행한다.

작업 수행을 완료한 후에는 결과를 다시 클라이언트에게 전송한다. WAS 는 PHP 언어로 작성한다.

Database 는 사용자 정보, 뽐방 정보, 뽐 정보, 댓글 정보, 대분류 정보들을 저장한다. File Server 는

사용자가 뽐내기로 업로드한 파일들을 저장한다. 여기에는 사진 파일과 텍스트 파일이 저장된다.

- File Server 에서는 동영상파일을 관리할 수 없으므로, Youtube 를 이용하여 동영상 파일을 저장하고

재생한다.

- 클라이언트-서버 통신에서 클라이언트는 사용자의 요청에 따른 HTTP request 를 WAS 로 요청하고,

WAS 에서는 해당 요청을 처리하여 결과값을 클라이언트로 전송한다. 클라이언트는 HTTP response 를

받으면 그 정보를 알맞게 처리하여 화면에 나타낸다.

- 클라이언트는 서버와 연결시 Socket 을 쓰지 않고 HTTP request 를 사용한다. 스마트폰의 특성상

네트워크 연결이 불안정 할 가능성이 크기 때문에, 연결지향적인 Socket 을 사용하기에는 적절하지 않다고

판단하였다. 또한, 단순히 클라이언트가 요청을 할 때만 서버가 응답하면 되므로 HTTP request 를 사용한다.

6

3. Design Description

3.1. System Design Overview

- 클라이언트는 Android 기반의 어플리케이션이다. 개발환경은 Java 언어에 Android SDK 를 이용한다.

- 서버는 Linux 기반의 Ubuntu 운영체제를 사용하며, Apache, PHP, MySQL 를 이용하여 웹 서비스가

가능하도록 구축한다. Block Diagram 에는 WAS, Database, File Server 가 각각 분리되어 있지만, 동일한

서버 컴퓨터에서 구축할 수도 있다.

- 클라이언트의 요청에 따라서, 서버는 각각의 요청에 대응하는 적절한 결과값을 JSON Object 로 돌려준다.

JSON Object 를 이용함으로써 데이터 전송 및 클라이언트에서의 데이터 파싱이 용이하다.

3.2. Subsystem Description

3.2.1. Client

3.2.1.1. User Interface

- 이용자의 편의를 위하여 최대한 직관적이고 이용하기 쉬운 UI 를 구성한다. 실제 사용자의 입력을 받는

부분이며, 동시에 뽐방 목록, 뽐방, 댓글 등을 표시하는 부분이다.

3.2.1.2. Parsing Manager

- 사용자의 요청에 의한 결과값으로 WAS 가 보내는 JSON Object 를 적절히 처리하는 부분이다. 클라이언트

내부에서 데이터 관리를 유용하게 하고, UI 로 손쉽게 표현 할 수 있도록 한다.

3.2.1.3. File Manager

- 스마트폰의 저장장치에 저장된 동영상, 사진 및 텍스트 파일에 액세스하기 위한 부분이다.

3.2.1.4. Network Manager

- 서버와 통신하는 부분으로 WAS 에 HTTP request 를 요청하고, 그 결과로 WAS 에서 해당하는 HTTP

response 를 받는다.

3.2.2. Server

3.2.2.1. Web Application Server (WAS)

7

- Web Application Server 는 클라이언트의 요청을 받아 Database 나 File Server 를 통하여 그에 맞는

처리를 하고, 그 결과를 저장하거나 클라이언트에게 전송하는 역할을 한다. 이는 크게 네 개의 모듈로

이루어져 있다.

3.2.2.1.1. Member Manager

- 사용자 정보에 관련된 작업을 하는 것으로 로그인, 회원가입과 같은 것들이 있다.

3.2.2.1.2. Room Manager

- 뽐방에 관련된 작업을 하는 것으로 사용자의 뽐방 만들기, 뽐방 들어가기 요청에 따른 작업을 한다.

3.2.2.1.3. Bbom Manager

- 뽐에 관련된 작업을 하는 것으로 사용자의 뽐내기, 뽐보기, 뽐업 요청에 따른 작업을 한다.

3.2.2.1.4. Comment Manager

- 댓글에 관련된 작업을 하는 것으로 사용자의 댓글 달기, 댓글 보기에 따른 작업을 한다.

3.2.2.2. File Server

- 사용자가 뽐내기를 통하여 업로드한 텍스트, 사진 파일들이 실제 하드웨어에 저장되는 시스템이다. 모든

파일이 안전하게 보관될 수 있도록 관리한다. 파일 중복 저장을 피하기 위하여

“사용자식별자_날짜시간_파일명” 형식의 파일명으로 저장한다.

3.2.2.3. Database

- Database 는 사용자 관련 정보, 뽐방 관련 정보, 뽐 관련 정보, 댓글 관련 정보, 대분류 관련 정보들을

저장한다.

8

3.2.2.3.1. User_table

- 회원에 관련된 정보를 저장하는 것으로 회원가입할 때 데이터가 생성된다.

- user_id : 회원을 식별할 수 있는 고유 primary key.

- email : 회원의 이메일, 로그인 할 때 회원의 아이디로 이용.

- password : 회원의 비밀번호, 로그인 할 때 이용.

- nickname : 회원의 닉네임, 실질적으로 보여지는 회원 이름.

3.2.2.3.2. Category_table

- 대분류에 관련된 정보를 저장하는 것으로 데이터는 관리자가 생성한다.

- category_id : 대분류를 식별할 수 있는 고유 primary key.

- category_name : 대분류의 실제 이름. (ex. 음악, 엔터테인먼트, 스포츠 등)

3.2.2.3.3. Room_table

- 뽐방에 관련된 정보를 저장하는 것으로 뽐방 만들기 할 때 데이터가 생성된다.

- room_id : 뽐방을 식별할 수 있는 고유 primary key.

- room_category : 뽐방이 속하는 대분류. Category_table 의 category_id 값.

- room_user : 뽐방을 만든 회원. User_table 의 user_id 값.

- room_title : 뽐방의 제목.

- room_content : 뽐방의 내용.

- room_date : 뽐방이 만들어진 날짜.

- room_due_date : 뽐방 내에서 뽐내기를 할 수 있는 기한 날짜.

- room_hit : 뽐방의 조회수.

- room_hot_hit : 뽐방의 핫이슈 선정을 위한 조회수.

- room_up_type : 뽐방 내에서 뽐내기 할 수 있는 파일의 타입. (동영상, 사진, 텍스트 중 하나)

3.2.2.3.4. Bbom_table

- 뽐에 관련된 정보를 저장하는 것으로 뽐방 내에서 뽐내기 할 때 데이터가 생성된다.

- bbom_id : 뽐을 식별할 수 있는 고유 primary key.

- bbom_room : 뽐이 속해있는 뽐방. Room_table 의 room_id 값.

- bbom_user : 뽐내기 한 회원. User_table 의 user_id 값.

- bbom_title : 뽐의 제목.

- bbom_date : 뽐내기 한 날짜.

- bbom_up : 뽐의 뽐업 개수.

- bbom_address : 뽐이 저장된 주소. (동영상은 Youtube 에 업로드 된 주소, 사진과 텍스트는 File

Server 의 파일 경로)

3.2.2.3.5. Comment_table

- 댓글과 관련된 정보를 저장하는 것으로 뽐방 내에서 댓글 달기 할 때 데이터가 생성된다.

- comment_id : 댓글을 식별할 수 있는 고유 primary key.

9

- comment_room : 댓글이 속해있는 뽐방. Room_table 의 room_id 값.

- comment_user : 댓글을 쓴 회원. User_table 의 user_id 값.

- comment_content : 댓글 내용.

- comment_date : 댓글을 쓴 날짜.

3.2.3. Youtube

3.2.3.1. OAuth

- 구글에서 제공하는 로그인 프로토콜이다. 사용자가 구글과 직접적으로 인증 과정을 거친다. 다함께 뽐뽐뽐

Server 가 사용자와 구글간의 로그인 과정에 개입되지 않기 때문에 사용자 정보에 대한 보안성이 강화된다.

3.2.3.2. Youtube Data API

- Youtube Data API 를 이용하여 다함께 뽐뽐뽐 클라이언트에서 Youtube 에 동영상을 업로드하고, 업로드

한 동영상의 주소를 얻어올 수 있다.

3.3. Class Diagram

10

3.3.1. Client-Side

3.3.1.1. HttpRequest

- Network Manager 에 해당하는 부분. WAS 및 Youtube 와의 네트워크 연결을 담당한다.

HttpRequest

requestLogin() // WAS 에 로그인을 요청한다.

requestJoin() // WAS 에 회원가입을 요청한다.

requestRoomList() // WAS 에 뽐방 목록을 요청한다. (대분류를 눌렀을 때)

requestMyBbom() // WAS 에 마이뽐 페이지를 요청한다.

requestRoom() // WAS 에 뽐방 내용을 요청한다. (뽐방 목록에서 뽐방 클릭시)

requestSearch() // WAS 에 뽐방 검색을 요청한다.

requestMakeRoom() // WAS 에 뽐방 만들기를 요청한다.

requestMakeBbom() // WAS 에 뽐 올리기를 요청한다.

requestBbomUp() // WAS 에 특정 뽐에 대한 뽐업을 요청한다.

requestWriteComment() // WAS 에 특정 뽐방에 댓글 달기를 요청한다.

requestGet() // WAS 에 GET method 로 데이터를 요청한다.

// (ex. 대분류 목록 얻기 등등)

requestYoutubeToken() // Youtube 에 사용자 로그인을 요청한다.

requestYoutubeUploadMetaData() // Youtube 에 동영상 정보를 업로드 한다.

requestYoutubeUploadVideo() // Youtube 에 실제 동영상 파일을 업로드 한다.

requestYoutubeRetrieveVideo() // Youtube 에 업로드한 동영상을 요청한다.

3.3.1.2. JsonParser

- 서버에서 받아온 JSON Object 를 적절하게 처리한다.

JsonParser

parseUserJson() // 사용자 데이터를 파싱한다.

parseCategoryJson() // 대분류 데이터를 파싱한다.

parseRoomJson() // 뽐방 데이터를 파싱한다.

parseBbomJson() // 뽐 데이터를 파싱한다.

parseCommentJson() // 댓글 데이터를 파싱한다.

3.3.1.3. Units

- 파싱한 데이터를 효율적으로 관리하기 위한 단위 클래스들.

3.3.1.3.1. UserUnit

- 사용자 정보를 가진다.

11

UserUnit

boolean _isLoggedIn // 로그인 되었는지 아닌지를 구분한다.

int _id // 로그인 된 사용자의 식별자 id. (User_table 의 user_id)

String _email // 로그인 된 사용자의 이메일.

String _nickname // 로그인 된 사용자의 닉네임.

3.3.1.3.2. CategoryUnit

- 대분류 정보를 가진다.

CategoryUnit

int _id // 대분류의 식별자 id. (Category_table 의 category_id)

String _name // 대분류의 이름. (화면에 나타나는 이름)

3.3.1.3.3. BbomUnit

- 뽐 정보를 가진다.

BbomUnit

int _id // 뽐의 식별자 id. (Bbom_table 의 bbom_id)

int _roomId // 뽐이 속한 뽐방의 식별자 id. (Bbom_table 의 bbom_room)

int _userId // 뽐을 올린 사용자의 식별자 id. (Bbom_table 의 bbom_user)

String _userNickname // 뽐을 올린 사용자의 닉네임.

String _title // 뽐의 제목.

String _date // 뽐을 올린 날짜.

int _up // 해당 뽐의 뽐업 수.

int _type // 해당 뽐방의 타입. (동영상, 사진, 텍스트)

3.3.1.3.4. RoomUnit

- 뽐방 정보를 가진다.

RoomUnit

int _id // 뽐방의 식별자 id. (Room_table 의 room_id)

int _categoryId // 뽐방이 속한 카테고리의 식별자 id. (Room_table 의 room_category)

int _userId // 뽐방을 생성한 사용자의 식별자 id. (Room_table 의 room_user)

String _userNickname // 뽐방을 생성한 사용자의 닉네임.

String _title // 뽐방의 제목.

String _content // 뽐방의 내용.

12

String _date // 뽐방을 생성한 날짜.

String _dueDate // 뽐방의 기한 날짜.

int _hit // 뽐방의 조회수.

int _type // 뽐방의 타입. (동영상, 사진, 텍스트)

3.3.1.3.5. CommentUnit

- 코멘트 정보를 가진다.

CommentUnit

int _id // 댓글의 식별자 id. (Comment_table 의 comment_id)

int _roomId // 댓글이 속한 뽐방의 식별자 id. (Comment_table 의 comment_room)

int _userId // 댓글을 쓴 사용자의 식별자 id. (Comment_table 의 comment_user)

String _userNickname // 댓글을 쓴 사용자의 닉네임.

String _content // 댓글의 내용.

String _date // 댓글을 쓴 날짜.

3.3.2. Server-Side

3.3.2.1. User class

- 회원과 관련된 클라이언트의 요청을 처리한다.

User

join() // Database 에 회원 정보를 저장하고 리턴한다.

login() // Database 에 있는 회원 정보를 확인하여 리턴한다.

myBbom() // Database 에 있는 회원의 활동 현황을 검색하여 리턴한다.

3.3.2.2. Category Class

- 대분류와 관련된 클라이언트의 요청을 처리한다.

Category

getCategory() // Database 에 있는 대분류 리스트를 리턴한다.

getHotIssue() // Database 에서 핫이슈 뽐방을 검색하여 리턴한다.

getRoomList() // 특정 대분류에 속하는 뽐방들을 Database 에서 검색하여 리턴한다.

3.3.2.3. Room Class

- 뽐방과 관련된 클라이언트의 요청을 처리한다.

13

Room

getBbomList() // 특정 뽐방에 속하는 뽐들을 Database 에서 검색하여 리턴한다.

makeRoom() // Database 에 뽐방 정보를 저장하고 리턴한다.

search() // Database 에서 특정 키워드에 맞는 뽐방을 검색하여 리턴한다.

3.3.2.4. Bbom Class

- 뽐과 관련된 클라이언트의 요청을 처리한다.

Bbom

getBbom() // File Server 에 있는 특정 뽐의 파일을 리턴한다.

makeBbom() // Database 에 뽐 정보를 저장하고 리턴한다.

bbomUp() // Database 에서 특정 뽐에 속하는 뽐업을 증가시킨다.

3.3.2.5. Comment Class

- 댓글과 관련된 클라이언트의 요청을 처리한다

Comment

getComment() // Database 에서 특정 뽐방에있는 댓글을 검색하여 리턴한다.

makeComment() // Database 에 댓글 정보를 저장한다.

14

3.4. Sequence Diagram

3.4.1. 회원가입

3.4.2. 로그인

15

3.4.3. 마이뽐

3.4.4. 대분류 보기 (뽐방 목록 보기)

16

3.4.5. 검색 (뽐방 목록 보기)

3.4.6. 뽐방 보기

17

3.4.7. 뽐방 만들기

3.4.8. 뽐내기 (사진, 텍스트)

18

3.4.9. 뽐내기 (동영상)

3.4.10. 뽐업

19

3.4.11. 댓글 쓰기

20

4. User Interface Design

4.1. User Interface Overview

- User Interface(UI)는 최초 Main 화면에서 시작한다. 여러 기능에 접근할 수 있도록 하는 ‘메뉴선택’과

뽐방을 검색할 수 있는 ‘검색기능’은 로그인 화면과 회원가입 화면을 제외한 모든 화면에서 가능하도록 한다.

- 몇몇 화면들과 기능들은 로그인 유,무가 접근에 대한 결정을 짓는다. 해당 화면과 기능은 위의 diagram 에

나타나 있다. Main 화면은 대분류별 뽐방 리스트화면 중 핫이슈 대분류로 한다.

21

4.2. Page Description

4.2.1. Main 화면 (핫이슈 대분류)

- 앱 실행시 최초화면인 Main 화면은 대분류 중 핫이슈 대분류 화면으로 한다. 상단에는 메뉴기능,

검색기능을 할 수 있는 바가 기본으로 되어 있으며, 아래에는 일정 기간내 가장 조회수가 높은 뽐방순으로

나열한다.

22

4.2.2. 메뉴 선택

- 좌측 상단에 있는 아이콘을 눌러

들어갈 수 있는 메뉴는 로그인,

회원가입, 뽐방 만들기, 마이뽐,

대분류별 뽐방 리스트로 이루어져

있다. 로그인 상태에 따라 메뉴에

변동이 있다.

4.2.2.1. 로그인 화면

- 로그인은 이메일(아이디)과 비밀번호를 필요로 한다.

23

4.2.2.2. 회원가입 화면

4.2.2.3. 뽐방 만들기 화면

- 회원가입은 이메일(아이디), 비밀번호, 닉네임을

필요로 한다. 이메일은 추후 비밀번호 찾기 등으로

이용할 수 있다.

- 뽐방 만들기는 대분류, 뽐방 제목, 뽐방 내용, 뽐방

기한, 뽐방 종류를 결정해야 한다. 대분류는 개발자가

미리 정해 놓은 목록이며 사용자는 해당 뽐방의

성격에 맞는 대분류를 정해야 한다. 뽐방 제목과 뽐방

내용, 뽐방 기한은 뽐방 리스트가 나올 때 표시된다.

뽐방 기한은 해당 기한이 지나면 더 이상 뽐을 올릴

수 없도록 하는 것이다. 뽐방 종류는 그림, 동영상,

텍스트 중에 선택가능하며 해당 종류로만 뽐을 올릴

수 있다.

24

4.2.2.4. 마이뽐 화면

4.2.2.5. 대분류별 뽐방 리스트 화면

- 마이뽐 화면은 내가 만든 방, 내가 올린 뽐, 내가 쓴

댓글이 나타난다. 각각 일정 개수 이상의 컨텐츠가

있을 시 더 보기 기능을 통하여 구현된다.

- 대분류별 뽐방 리스트 화면 중 음악 대분류의

모습이다. 음악 대분류에 해당되는 방들이

최신순으로 나열되어 있다. 조회수를 기준으로 하는

정렬도 가능하다. 각 방들은 뽐방 제목, 뽐방 내용,

뽐방 기한, 뽐방 만든 이의 닉네임, 조회수가

나타난다. 또한, 뽐방에서 제일 높은 뽐업수를

기록하는 뽐의 대표화면을 그 뽐방의 대표화면으로

한다.

25

4.2.2.6. 뽐 리스트 화면 (뽐방 화면)

- 뽐 리스트 화면은 뽐 올리기, 뽐, 뽐업, 더 보기 기능, 댓글 기능으로 구성되어 있다. 로그인이 안되어 있을

시에는 뽐 올리기 기능과 뽐업, 댓글쓰기 기능이 제한된다. 각 뽐들은 뽐 제목, 대표화면과 닉네임, 뽐업수를

나타내며 해당 뽐을 추천하고자 하는 사용자는 손모양 아이콘을 통하여 뽐업을 할 수 있다.

26

4.2.2.7. 뽐 올리기 화면

- 뽐을 올리고자 할 때에는 뽐 제목과 올릴 뽐을 선택하면 된다. 올릴 뽐이 동영상 파일인 경우

Youtube 계정을 통하여 파일이 올라간다.

27

4.2.3. 검색 기능

- 최초 상위의 돋보기 모양의 아이콘을 클릭하면

위와 같은 화면의 형태를 띄게 된다. 검색어를

입력하면 검색어에 맞는 뽐방들이 나타나게 된다.

4.2.3.1. 검색된 뽐방 리스트 화면

- 다음과 같이 검색된 뽐방들이 나타난다.

28

5. Schedule Management

5.1. Task Duration and Dependencies

Task Title Developer Depen-

dencies

Start

Date

End

Date

T1 개발 환경 기초 조사 전체 10. 28. 10. 30.

T2 클라이언트 UI 기본 디자인 전체 10. 29. 10. 30.

T3 클라이언트 프로토타입 개발 김지현, 조영현 T1, T2 10. 31. 11. 10.

T4 Database 개발 정준식 T1 10. 31. 11. 10.

T5 WAS 개발 정준식 T1 11. 31. 11. 10.

T6 클라이언트 최적화 김지현, 조영현 T3 11. 11. 11. 17.

T7 서버 최적화 정준식 T4, T5 11. 11. 11. 17.

T8 전체 기능 연동 전체 T6, T7 11. 18. 11. 24.

T9 데이터 입력 및 개발자 테스트 전체 T8 11. 25. 12. 01.

T10 디버깅 및 최종 테스트 전체 T9 12. 02. 12. 08.

5.2. Activity Network