SlideShare a Scribd company logo
1 of 18
홍익대학교 컴퓨터공학과 
이 장 호
1. Intro 
2. 선정배경 
3. App 소개 
4. Architecture 
5. 기술사항 
6. 작품시연 
목차
Intro
Intro 
• 반려동물이 테마인 동영상 SNS 
• 팀 프로젝트 ( / 기획 / 클라이언트 / 디자이너) 
서버 
• 개발언어 : Javascript, Java 
• Platform : Node.js, Android
선정배경
선정배경 
저도 참 좋아하는 데요 
제가 한번 
반려동물, 
만들어 보겠습니다.
선정배경 
8 
6 
4 
2 
0 
반려동물 시장 규모 
2010 2012 2020 
조(원) 
년도
선정배경 
귀여운 반려동물 관련 동영상의 인기
Application
App 소개 
Feed 
인기순 / 최신순 / 이웃새글 
Category 
개 / 고양이 / 곤충류 / 파충류 / 
조류 / 어류 / 포유류 / 양서류 
My page 
내 동물 / 친구 / 게시글 관리 
Profile 
동물 별 프로필 관리
Architecture
System Architecture 
Amazon RDS Amazon EC2 
Ubuntu 13.04 
Node.js 
MySQL 
Client 
Request 
JSON 
Streaming
Server Architecture 
Media 
process 
JSON 
Thumbnail 
Manager 
Crop 
Manager 
Module 
Async 
File 
Manager 
Client 
HTTP 
Node.js 
Single 
Thread 
Connection 
pool 
RESTful 
Web Server 
Login 
Module 
Timeline 
Module 
User 
Module
Technology
Technology 
Client 
Thumbnail 추출 방식 
Server 
Media Process
Connection Pool 
Request 
Request 
Server 
Technology
Technology 
Async 
Task #1 
Task #2 
Exception handler 
& Final task
Q & A

More Related Content

Viewers also liked

정혜인 포트폴리오
정혜인 포트폴리오정혜인 포트폴리오
정혜인 포트폴리오henni31
 
포트폴리오 오경원
포트폴리오 오경원포트폴리오 오경원
포트폴리오 오경원Sio Oh
 
디발자가 말하는 시선을 끄는 PPT
디발자가 말하는 시선을 끄는 PPT디발자가 말하는 시선을 끄는 PPT
디발자가 말하는 시선을 끄는 PPTJungwon An
 
김승지 포트폴리오
김승지 포트폴리오김승지 포트폴리오
김승지 포트폴리오승지 김
 
PPTver_박유진_커리어 포트폴리오
PPTver_박유진_커리어 포트폴리오PPTver_박유진_커리어 포트폴리오
PPTver_박유진_커리어 포트폴리오Candice J. Park
 
[피키캐스트] 5학년선배 ppt 템플릿 레이아웃
[피키캐스트] 5학년선배 ppt 템플릿 레이아웃[피키캐스트] 5학년선배 ppt 템플릿 레이아웃
[피키캐스트] 5학년선배 ppt 템플릿 레이아웃o_senior
 
종합 포트폴리오
종합 포트폴리오종합 포트폴리오
종합 포트폴리오hogyun yu
 
포트폴리오
포트폴리오포트폴리오
포트폴리오hamjoohee
 
최종샘플 방선화 포트폴리오
최종샘플 방선화 포트폴리오최종샘플 방선화 포트폴리오
최종샘플 방선화 포트폴리오Sunhwa Bang
 
5모먼츠 4월 정기교육 - 나만의 웹 포트폴리오/사이트 만들기
5모먼츠 4월 정기교육 - 나만의 웹 포트폴리오/사이트 만들기5모먼츠 4월 정기교육 - 나만의 웹 포트폴리오/사이트 만들기
5모먼츠 4월 정기교육 - 나만의 웹 포트폴리오/사이트 만들기5moments
 
(포트폴리오) 이화정
(포트폴리오) 이화정(포트폴리오) 이화정
(포트폴리오) 이화정clarelee
 
포트폴리오 조정훈
포트폴리오 조정훈포트폴리오 조정훈
포트폴리오 조정훈정훈 조
 
포트폴리오 (SW 마에스트로)
포트폴리오 (SW 마에스트로)포트폴리오 (SW 마에스트로)
포트폴리오 (SW 마에스트로)Do Hoerin
 
서광을 비추기 위한 준비
서광을 비추기 위한 준비서광을 비추기 위한 준비
서광을 비추기 위한 준비JeongHeon Lee
 
포트폴리오 이준석
포트폴리오  이준석포트폴리오  이준석
포트폴리오 이준석guesta324f27
 
Wooseok Jeon - Portfolio
Wooseok Jeon - PortfolioWooseok Jeon - Portfolio
Wooseok Jeon - PortfolioWooseok Jeon
 
portfolio-201608NS-ko-s
portfolio-201608NS-ko-sportfolio-201608NS-ko-s
portfolio-201608NS-ko-sHyein Kim
 
야매피티 : 피피티로 날밤새지 말고 피피티로 무시받지 말자
야매피티 : 피피티로 날밤새지 말고 피피티로 무시받지 말자야매피티 : 피피티로 날밤새지 말고 피피티로 무시받지 말자
야매피티 : 피피티로 날밤새지 말고 피피티로 무시받지 말자Yunseok Song
 
Quest 4 상상유니브 2기 활동 결과 - 꿈숨품(고유진, 김영옥) 포트폴리오
Quest 4 상상유니브 2기 활동 결과 - 꿈숨품(고유진, 김영옥) 포트폴리오Quest 4 상상유니브 2기 활동 결과 - 꿈숨품(고유진, 김영옥) 포트폴리오
Quest 4 상상유니브 2기 활동 결과 - 꿈숨품(고유진, 김영옥) 포트폴리오Budher (Jung-hyun) Song
 
[학교발표] 예비광고인을 위한 퍼포먼스마케팅 개념
[학교발표] 예비광고인을 위한 퍼포먼스마케팅 개념[학교발표] 예비광고인을 위한 퍼포먼스마케팅 개념
[학교발표] 예비광고인을 위한 퍼포먼스마케팅 개념승지 김
 

Viewers also liked (20)

정혜인 포트폴리오
정혜인 포트폴리오정혜인 포트폴리오
정혜인 포트폴리오
 
포트폴리오 오경원
포트폴리오 오경원포트폴리오 오경원
포트폴리오 오경원
 
디발자가 말하는 시선을 끄는 PPT
디발자가 말하는 시선을 끄는 PPT디발자가 말하는 시선을 끄는 PPT
디발자가 말하는 시선을 끄는 PPT
 
김승지 포트폴리오
김승지 포트폴리오김승지 포트폴리오
김승지 포트폴리오
 
PPTver_박유진_커리어 포트폴리오
PPTver_박유진_커리어 포트폴리오PPTver_박유진_커리어 포트폴리오
PPTver_박유진_커리어 포트폴리오
 
[피키캐스트] 5학년선배 ppt 템플릿 레이아웃
[피키캐스트] 5학년선배 ppt 템플릿 레이아웃[피키캐스트] 5학년선배 ppt 템플릿 레이아웃
[피키캐스트] 5학년선배 ppt 템플릿 레이아웃
 
종합 포트폴리오
종합 포트폴리오종합 포트폴리오
종합 포트폴리오
 
포트폴리오
포트폴리오포트폴리오
포트폴리오
 
최종샘플 방선화 포트폴리오
최종샘플 방선화 포트폴리오최종샘플 방선화 포트폴리오
최종샘플 방선화 포트폴리오
 
5모먼츠 4월 정기교육 - 나만의 웹 포트폴리오/사이트 만들기
5모먼츠 4월 정기교육 - 나만의 웹 포트폴리오/사이트 만들기5모먼츠 4월 정기교육 - 나만의 웹 포트폴리오/사이트 만들기
5모먼츠 4월 정기교육 - 나만의 웹 포트폴리오/사이트 만들기
 
(포트폴리오) 이화정
(포트폴리오) 이화정(포트폴리오) 이화정
(포트폴리오) 이화정
 
포트폴리오 조정훈
포트폴리오 조정훈포트폴리오 조정훈
포트폴리오 조정훈
 
포트폴리오 (SW 마에스트로)
포트폴리오 (SW 마에스트로)포트폴리오 (SW 마에스트로)
포트폴리오 (SW 마에스트로)
 
서광을 비추기 위한 준비
서광을 비추기 위한 준비서광을 비추기 위한 준비
서광을 비추기 위한 준비
 
포트폴리오 이준석
포트폴리오  이준석포트폴리오  이준석
포트폴리오 이준석
 
Wooseok Jeon - Portfolio
Wooseok Jeon - PortfolioWooseok Jeon - Portfolio
Wooseok Jeon - Portfolio
 
portfolio-201608NS-ko-s
portfolio-201608NS-ko-sportfolio-201608NS-ko-s
portfolio-201608NS-ko-s
 
야매피티 : 피피티로 날밤새지 말고 피피티로 무시받지 말자
야매피티 : 피피티로 날밤새지 말고 피피티로 무시받지 말자야매피티 : 피피티로 날밤새지 말고 피피티로 무시받지 말자
야매피티 : 피피티로 날밤새지 말고 피피티로 무시받지 말자
 
Quest 4 상상유니브 2기 활동 결과 - 꿈숨품(고유진, 김영옥) 포트폴리오
Quest 4 상상유니브 2기 활동 결과 - 꿈숨품(고유진, 김영옥) 포트폴리오Quest 4 상상유니브 2기 활동 결과 - 꿈숨품(고유진, 김영옥) 포트폴리오
Quest 4 상상유니브 2기 활동 결과 - 꿈숨품(고유진, 김영옥) 포트폴리오
 
[학교발표] 예비광고인을 위한 퍼포먼스마케팅 개념
[학교발표] 예비광고인을 위한 퍼포먼스마케팅 개념[학교발표] 예비광고인을 위한 퍼포먼스마케팅 개념
[학교발표] 예비광고인을 위한 퍼포먼스마케팅 개념
 

Similar to Furkid 이장호 포트폴리오

my activities before getting a job
my activities before getting a jobmy activities before getting a job
my activities before getting a jobDeo Kim
 
U&i insight2012스터디설명회
U&i insight2012스터디설명회U&i insight2012스터디설명회
U&i insight2012스터디설명회Amy Young Ah Kim
 
김찬웅_그룹웨어에 새 에너지를_NDC15
김찬웅_그룹웨어에 새 에너지를_NDC15김찬웅_그룹웨어에 새 에너지를_NDC15
김찬웅_그룹웨어에 새 에너지를_NDC15Chanwoong Kim
 
Open source engineering - 0.1
Open source engineering - 0.1Open source engineering - 0.1
Open source engineering - 0.1YoungSu Son
 
차세대 웹비즈니스를 위한 "HTML5"
차세대 웹비즈니스를 위한 "HTML5"차세대 웹비즈니스를 위한 "HTML5"
차세대 웹비즈니스를 위한 "HTML5"Changhwan Yi
 
Open source engineering
Open source engineeringOpen source engineering
Open source engineeringYoungSu Son
 
네이티브 웹앱 기술 동향 및 전망
네이티브 웹앱 기술 동향 및 전망네이티브 웹앱 기술 동향 및 전망
네이티브 웹앱 기술 동향 및 전망Wonsuk Lee
 
네이티브 웹앱 기술 동향 및 전망
네이티브 웹앱 기술 동향 및 전망네이티브 웹앱 기술 동향 및 전망
네이티브 웹앱 기술 동향 및 전망Wonsuk Lee
 
모바일앱개발 교육자료
모바일앱개발 교육자료모바일앱개발 교육자료
모바일앱개발 교육자료JinHyuck Churn
 
Hybrid App Platform - HyWAI 3.5
Hybrid App Platform - HyWAI 3.5Hybrid App Platform - HyWAI 3.5
Hybrid App Platform - HyWAI 3.5Jonathan Jeon
 
반응형 웹 디자인
반응형 웹 디자인반응형 웹 디자인
반응형 웹 디자인준극 김
 
유비온 스마트플래시 소개자료
유비온 스마트플래시 소개자료유비온 스마트플래시 소개자료
유비온 스마트플래시 소개자료Byung Seok Kang
 
Android발표자료 홍종진
Android발표자료 홍종진Android발표자료 홍종진
Android발표자료 홍종진Jong Jin Hong
 
Web app 개발 방법론
Web app 개발 방법론Web app 개발 방법론
Web app 개발 방법론Sang Seok Lim
 
Cloud ide를 이용한_모바일_개발의_가능성과_전망
Cloud ide를 이용한_모바일_개발의_가능성과_전망Cloud ide를 이용한_모바일_개발의_가능성과_전망
Cloud ide를 이용한_모바일_개발의_가능성과_전망Sung-tae Ryu
 
[Hello World 천안아산] 안드로이드 입문
[Hello World 천안아산] 안드로이드 입문[Hello World 천안아산] 안드로이드 입문
[Hello World 천안아산] 안드로이드 입문Taeho Kim
 
[1B3]모바일 앱 크래시 네이버에서는 어떻게 수집하고 보여줄까요
[1B3]모바일 앱 크래시 네이버에서는 어떻게 수집하고 보여줄까요[1B3]모바일 앱 크래시 네이버에서는 어떻게 수집하고 보여줄까요
[1B3]모바일 앱 크래시 네이버에서는 어떻게 수집하고 보여줄까요NAVER D2
 
한양대학교 셔틀시스템 셔틀콕 개발기
한양대학교 셔틀시스템 셔틀콕 개발기한양대학교 셔틀시스템 셔틀콕 개발기
한양대학교 셔틀시스템 셔틀콕 개발기Yunhwan Na
 

Similar to Furkid 이장호 포트폴리오 (20)

my activities before getting a job
my activities before getting a jobmy activities before getting a job
my activities before getting a job
 
U&i insight2012스터디설명회
U&i insight2012스터디설명회U&i insight2012스터디설명회
U&i insight2012스터디설명회
 
김찬웅_그룹웨어에 새 에너지를_NDC15
김찬웅_그룹웨어에 새 에너지를_NDC15김찬웅_그룹웨어에 새 에너지를_NDC15
김찬웅_그룹웨어에 새 에너지를_NDC15
 
Open source engineering - 0.1
Open source engineering - 0.1Open source engineering - 0.1
Open source engineering - 0.1
 
차세대 웹비즈니스를 위한 "HTML5"
차세대 웹비즈니스를 위한 "HTML5"차세대 웹비즈니스를 위한 "HTML5"
차세대 웹비즈니스를 위한 "HTML5"
 
Open source engineering
Open source engineeringOpen source engineering
Open source engineering
 
네이티브 웹앱 기술 동향 및 전망
네이티브 웹앱 기술 동향 및 전망네이티브 웹앱 기술 동향 및 전망
네이티브 웹앱 기술 동향 및 전망
 
네이티브 웹앱 기술 동향 및 전망
네이티브 웹앱 기술 동향 및 전망네이티브 웹앱 기술 동향 및 전망
네이티브 웹앱 기술 동향 및 전망
 
모바일앱개발 교육자료
모바일앱개발 교육자료모바일앱개발 교육자료
모바일앱개발 교육자료
 
Hybrid App Platform - HyWAI 3.5
Hybrid App Platform - HyWAI 3.5Hybrid App Platform - HyWAI 3.5
Hybrid App Platform - HyWAI 3.5
 
반응형 웹 디자인
반응형 웹 디자인반응형 웹 디자인
반응형 웹 디자인
 
유비온 스마트플래시 소개자료
유비온 스마트플래시 소개자료유비온 스마트플래시 소개자료
유비온 스마트플래시 소개자료
 
Android발표자료 홍종진
Android발표자료 홍종진Android발표자료 홍종진
Android발표자료 홍종진
 
Web app 개발 방법론
Web app 개발 방법론Web app 개발 방법론
Web app 개발 방법론
 
Cloud ide를 이용한_모바일_개발의_가능성과_전망
Cloud ide를 이용한_모바일_개발의_가능성과_전망Cloud ide를 이용한_모바일_개발의_가능성과_전망
Cloud ide를 이용한_모바일_개발의_가능성과_전망
 
[Hello World 천안아산] 안드로이드 입문
[Hello World 천안아산] 안드로이드 입문[Hello World 천안아산] 안드로이드 입문
[Hello World 천안아산] 안드로이드 입문
 
[1B3]모바일 앱 크래시 네이버에서는 어떻게 수집하고 보여줄까요
[1B3]모바일 앱 크래시 네이버에서는 어떻게 수집하고 보여줄까요[1B3]모바일 앱 크래시 네이버에서는 어떻게 수집하고 보여줄까요
[1B3]모바일 앱 크래시 네이버에서는 어떻게 수집하고 보여줄까요
 
Portfolio
PortfolioPortfolio
Portfolio
 
Unity소개
Unity소개Unity소개
Unity소개
 
한양대학교 셔틀시스템 셔틀콕 개발기
한양대학교 셔틀시스템 셔틀콕 개발기한양대학교 셔틀시스템 셔틀콕 개발기
한양대학교 셔틀시스템 셔틀콕 개발기
 

Furkid 이장호 포트폴리오

Editor's Notes

  1. 안녕하십니까 홍익대학교 컴퓨터공학과 3학년 2학기까지 이수한 이장호입니다. 발표 시작하겠습니다.
  2. 목차는 다음과 같습니다. 간단한 프로젝트 소개를 하고, 개발내용, 그리고 시연순으로 발표하겠습니다.
  3. 프로젝트에 대해 간단하게 소개해드리겠습니다.
  4. 선정배경에 대해 설명드리겠습니다.
  5. 혹시 반려동물을 키우고 계십니까? -click- 반려동물, 저도 참 좋아하는데요 반려동물만을 위한 어플리케이션, 제가 한번 만들어보겠습니다.
  6. 반려동물 시장규모는 나날이 증가하고 있습니다. 2020년에는 오늘날의 3배에 이르는 6조원에 육박할 것으로 예상되고 여러 대기업에서도 반려동물을 대상으로 하는 사업을 시작한다는 기사들도 많이 보이고 있습니다.
  7. 그리고 Facebook같은 SNS를 하다 보면 적어도 한번쯤은 귀여운 동물이 나오는 동영상을 보셨을겁니다. -click- 이러한 귀여운 동물들이 나오는 동영상이 인기 있는데 착안하여 제가 좋아하는, 그리고 여러분들도 좋아하실 반려동물이 주인공인 어플리케이션을 만들어보면 어떨까 하고 기획하게 되었습니다.
  8. 그럼 작품을 잠시 살펴보겠습니다.
  9. 대표적으로 다음과 같은 화면이 있습니다. 메인화면, 카테고리, 사용자 페이지, 그리고 등록한 동물의 프로필 페이지입니다. 좀더 자세한 설명은 동영상을 보면서 해드리겠습니다. -click- 어플을 실행하게 되면 가장 먼저 뜨는 페이지 입니다. 전체 사용자들의 글을 인기순으로 볼 수 있습니다. 메뉴를 클릭하여 My page에서는 사용자가 등록한 동물들의 사진을 볼 수 있고 사진을 클릭하면 해당 동물의 프로필과 그 동물로 쓴 글들을 확인할 수 있는 페이지로 가게 됩니다. 카테고리 메뉴를 클릭하게 되면 게시글을 카테고리 별로 볼 수 있게 구성되어 있습니다. 그리고 우측 상단의 카메라 버튼을 누르면 동영상 촬영을 할 수 있습니다. 촬영을 마치면 글을 작성할 수 있는 페이지가 나오고 글을 작성한 후 자신이 소유한 동물들 중 한 마리를 선택하고 카테고리를 정해서 글을 게시할 수 있습니다. 여기까지 어플리케이션 소개를 마치고 –click-
  10. 아키텍쳐에 대해 설명드리겠습니다.
  11. 전체적인 구조는 다음과 같이 간단하게 나타낼 수 있습니다. 우선 서버는 컴퓨팅 요구사항에 따라 유동적으로 서버를 확장하거나 축소할 수 있는 클라우드 서비스인 Amazon Web Service를 사용했습니다. 그 중 서버구성을 위해 Amazon에서 제공하는 EC2를 사용하였고 OS는 우분투 13.04버전을 설치하였습니다. 서버플랫폼은 single Thread 기반의 non-blocking I/O를 지원하는 Node.js를 사용하여 개발하였습니다. 데이터베이스도 마찬가지로 Amazon에서 제공하는 RDS를 사용하여 MySQL을 이용해 관리하였습니다. 클라이언트에서 요청이 오게 되면 JSON객체를 통해 응답을 하고 동영상은 Streaming 방식으로 재생하도록 하였습니다.
  12. 서버 내부 동작에 대해 좀더 자세히 설명 드리겠습니다. 서버는 HTTP방식으로 RESTful API를 설계하여 클라이언트와 통신하였습니다. 내부적으로는 미디어 프로세서와 모듈, 그리고 JSON과 DB형식으로 되어 있습니다. Media Process에서는 File Manager, Thumbnail Manager, Crop Manager 등을 사용하여 미디어 처리를 하였습니다. 모듈은 Async 모듈을 사용했고, DB와 매번 커넥션을 연결하는 부하를 줄이기 위해서 커넥션 풀을 사용하여 DB와 연결 하였습니다. 그리고 최종적으로 클라이언트에게 응답을 주기 위해, 설계한 RESTful API에 맞는 요청에 따라 클라이언트 개발자와 상의를 하여 JSON객체를 통해 데이터를 보내주는 형식으로 서버를 구성하였습니다.
  13. 이어서 기술사항에 대해 설명 드리겠습니다.
  14. 저희 어플은 서버에서 Thumbnail을 추출하는 방식을 선택하였습니다. 클라이언트에서 Thumbnail을 추출하여 동영상과 Thumbnail을 업로드를 하는 방법도 있지만 저는 이 방식보다는 클라이언트의 메모리나 데이터 통신량의 부담을 줄이기 위해서 클라이언트는 동영상만을 업로드하고 서버에서 Thumbnail을 추출하여 클라이언트가 요청을 하게 되면 Thumbnail과 동영상을 전송하는 방식으로 시도해 보았습니다. ---------잠시 쉬었다가 다음페이지--------------
  15. 다음으로 Connection pool 에 대해 설명 드리겠습니다. . Connection Pool 을 사용한 이유는 어떠한 기능을 높이기 위해서라기 보다는 서비스를 하는데 있어서 Connection pool 이 없으면 서버에 훨씬 더 부담이 되기 때문에 당연한 선택이라고 생각되어 connection pool을 사용했습니다. Connection pool에는 PHP나 자바의 JDBC,나 JNDI…뭐…..자바look up도 있고 또는 직접 Hash map을 통해서 Connection pool을 구현하는 등 여러 가지가 있는데 저는 Node.js에서 제공하는 모듈을 사용하여 Connection Pool을 구성했습니다.
  16. 그리고 DB에서 데이터를 삭제할 때 CASCADE를 사용하게 되면 예상치 못한 데이터들 까지 지워질 수 있습니다. 이를 방지하기 위해서 제가 원하는 테이블의 정보들만 테이블 제약조건에 따라 순차적으로 지워줘야 하는데 비 동기 방식인 Node.js 에서 순차적인 진행을 하게 하려면 callback함수를 여러 번 중첩해서 사용하게 됩니다. 그렇게 코딩을 하게 되면 나중에 보았을 때 코드의 가독성이 안 좋아 유지보수가 힘든 단점이 있습니다. 따라서 저는 순차적인 진행이 필요할 때 일반적으로 익숙한 동기방식으로 코딩 할 수 있고, 데이터 무결성을 위해 transaction을 지원하는 Async 모듈을 사용하여 개발하였습니다.