Deo
한이음 프로젝트
군 제대 후 넓은 시야를 위한 교외 프로젝트 참여
– 한이음에서 지원하는 프로젝트를 진행함
– 기술이 없어서 개발의 주체로서 활동을 할 수 없었지만 시야를 넓히는 계기가 됨
한이음 프로젝트
Deo
영상 창작 플랫폼
개발기간 / 개발인원
2015.06 ~ 2015.08 / 8명 – 1차
2015.10 ~ 2015.11 / 3명 – 2차
분야
Android app, Java GUI app, Web
나의 역할
Java Swing을 이용한 GUI app 개발 및
Android app 개발
개발언어 / 개발환경
Java, PHP, SQL/
Android Studio, Notepad++, Eclipse
 프로젝트 소개
• 한국전자통신 연구원의 융합기술연구소의 연구연수생으로 2달 동안 개발한
프로젝트
 개발한 내용 및 사용 기술(1차)
• Java의 Swing을 이용하여 프로그램의 UI를 구현
- GridBagLayout을 사용
• JDBC를 이용한 회원가입 및 로그인 구현
• JAXB를 사용하여 작업내용을 XML로 저장 및 불러오기 구현
• 영상을 저장 및 불러오기 위한 Data format 설계
- 영상의 제작단위를 Scene과 Shot으로 구별
- Java의 ArrayList를 이용하여 Data format 설계
• Java의 Swing을 이용하여 프로그램의 UI를 구현
• Vlcj를 이용한 자체 영상 플레이어 제작
 개발한 내용 및 사용 기술(2차)
• Websocket을 이용한 실시간 통신 기술 구현
• Android의 STT를 이용한 음성인식과 Websocket을 이용한 실시간 통신 개발
• FFMPEG을 이용한 영상편집기능 구현
• Github와 SourceTree를 이용한 버전관리
영상 창작 플랫폼
Deo
영상 창작 플랫폼
영상 창작 플랫폼
Deo
인제대 웹센터 현장실습
개발기간 / 개발인원
2015.12 ~ 2016.01 / 3명
분야
Web site
나의 역할
Javscript(+jQuery), php를 이용한 다양
한 모듈 개발과 Database 설계
개발언어 / 개발환경
PHP, Javascript(+jQuery), SQL/
Aptana studio, HeidiSQL
인제대학교 웹센터
 프로젝트 소개
• 15년 9월에 창립된 학교 기업으로 인제대학교 학과 홈페이지 재개발과 학생
의 실무능력을 경험하기 위한 동계 현장실습 진행
• 2명의 디자인 학부생과 1명의 컴퓨터공학 학부생 참여
• 반응형 웹사이트 개발 및 홈페이지 템플릿 제작을 위한 각종 모듈 개발
 개발한 내용 및 사용 기술
• Javscript(+jQuery), HTML5, CSS3와 DB, PHP를 이용한 개발 진행
• 이미지 편집 모듈
- 오픈소스 Croppic을 사용하여 사용자가 원하는 좌표를 중심으로 이미지를 자르는 모듈 개발
• 접속자 통계, 설문조사 게시판 모듈
- Naver에서 제공하는 오픈소스 Nwagon.js를 이용하여 Database에 저장된 설문조사, 접속 통
계를 시각화
• 일정관리 게시판 모듈
- Javascript(+jQuery), Ajax, SQL를 이용하여 1년의 일정을 등록, 수정 가능한 게시판 개발
Deo
이미지 편집 모듈
페이지에 사용될 Image를 편집할 수 있는 모듈 개발
– 오픈소스 Croppic.js를 사용
인제대학교 웹센터
Deo
접속자 통계 모듈
접속자 통계 모듈 개발
– 시각화를 위한 Naver의 오픈소스 Nwagon을 사용
인제대학교 웹센터
Deo
설문조사 게시판 모듈
설문조사 게시판 모듈 개발
– 시각화를 위한 Naver의 오픈소스 Nwagon을 사용
인제대학교 웹센터
Deo
일정관리 게시판 모듈 & 수료증
일정관리 게시판 모듈 개발
– 1년의 일정을 등록할 수 있는 게시판 모듈 제작
인제대학교 웹센터
Deo
커리어 앵커
개발기간 / 개발인원
2016.01 ~ 2016.01(3주) / 1명
분야
Web application
나의 역할
PHP, Javascript(+jQuery),
Bootstrap을 이용한 웹 애플리케이션
개발
개발언어 / 개발환경
PHP, Javascript(+jQuery), SQL/
Aptana studio, HeidiSQL
커리어 앵커
프로젝트 소개
• 부산 시청에서 발주한 프로젝트로 설문을 통하여 자신의 진로 성향을 파악하고
가장 적합한 방향으로 진로를 이끌어주는 프로토타입 웹 앱 개발
• 교육 목적의 프로그램으로 교육부의 국가 사업을 위한 프로젝트의 일환
개발한 내용 및 사용 기술
• Front-End
- Javscript와 Ajax를 이용하여 페이지 변화를 구현하였으며 Bootstrap을 이용하여 웹 앱 개발
• Back-End
- PHP를 사용하여 클라이언트의 request에 대하여 설문문항 response와 결과 response를 개발
• 설문조사 기능구현
- 주어진 설문문항을 Database에 Table을 작성하여 삽입한 뒤 랜덤으로 설문 문항을 뿌려줌
- PHP를 사용하여 설문 문항을 불러와 랜덤으로 설문 문항을 뿌려주는 서버 프로그램 작성
- Ajax를 사용하여 서버에 request를 보내고 설문 문항을 받아서 Javascript로 5지 선다형 View 개발
- 결과 값 계산과 데이터 통신은 Ajax를 사용하여 개발
• 설문결과 시각화
- Naver의 오픈소스인 Nwagon.js를 사용하여 다각형 그래프와 막대 그래프 두 가지 표현 개발
Deo
디자이너와 함께 협업
 첫 시작 화면
• 디자이너와 함께 웹의 전반적인 디자인을 같이 제작
• 일러스트레이터를 사용하여 디자인
 클릭 이벤트 방식
• 하나의 이미지로 되어있어 좌표를 비율로 계산하여
해당 범위를 클릭했을 때 이벤트가 발생하도록 구현
커리어 앵커
Deo
PHP와 Bootstrap을 이용한 웹 앱(1/2)
 설문조사 화면
• Bootstrap을 이용하여 display에 따라 크기 및 배치가
적절하게 되도록 구현
• PHP를 이용하여 DB에 저장된 설문 문항을 랜덤으로
사용자에게 뿌려줌
• 한 문항당 5지 선다형으로 1~5점으로 계산하여 처리
커리어 앵커
Deo
PHP와 Bootstrap을 이용한 웹 앱(2/2)
 검사 끝 화면
• 설문 항목 중 자신이 가장 긍정적으로 대답한 항문에
대하여 다시 질문하고 적합한 설문을 체크하여 추가적
인 계산법을 사용
 검사 결과화면 1
• Naver의 오픈소스 Nwagon.js를 사용하여 설문에 대한
결과를 시각적으로 표현
• 다양한 그래프중 Radar와 Column을 표본으로 사용하
였고, 요구사항에 따른 색깔 변경, 정렬 등의 간단한 커
스터마이징
 검사 결과화면 2
• 자신의 결과에 따라 1~3순위 성향과 최하 순위 성향을
보여주고 그 성향에 대한 설명 출력
커리어 앵커
Deo
문화정보공유앱
개발기간 / 개발인원
2016.02 ~ 2016.03 / 4명
분야
Web application, C# App
나의 역할
Php(+CodeIgniter),
javascript(+jQuery), C#, SQL을 이용
한 문화정보 크롤링과 웹앱 개발
개발언어 / 개발환경
PHP(+CodeIgniter), C#
Javascript(+jQuery), SQL/
Aptana studio, HeidiSQL
문화정보 공유앱
프로젝트 소개
• 창업을 준비하는 외주 프로젝트로 주변에서 쉽게 접할 수 있는 값싼 문화정
보(길거리 공연 등)을 제공하여 국민의 다양한 여가활동의 기회를 제공하는
커뮤니티조성 사업 프로젝트
개발한 내용 및 사용 기술
• C# 크롤러(데이터 수집용)
- C#과 Facebook Graph API, Web parsing을 통한 문화정보 crawling 프로그램 개발
• Front-End
- Javascript(+jQuery)를 이용하여 웹 앱의 기본적인 UI 설계와 UI 기능 구현
- 디자이너가 제작한 디자인을 HTML code로 구현
• Back-End
- PHP의 프레임워크인 CodeIgniter을 사용하여 MVC 개발과 RESTful한 개발
• Database
- 커뮤니티, 유저, 문화정보을 효율적으로 관리하기 위한 Database 설계
Deo
C#으로 개발한 문화정보 크롤러
 C# Facebook 크롤러
• Facebook과 Kakao story에 있는 문화정보를
Crawling
• Facebook은 Facebook Graph API를 사용하면
JSON 형식으로 response를 받아 해당 페이지의 게
시물의 정보들을 사용할 수 있음(비교적 빠름)
• JSON data는 100개씩만 전달해주므로 Next key가
없을 때까지 JSON을 읽어오도록 개발
 C# KakaoStory 크롤러
• KakaoStory는 위와 같은 지원 API가 없으므로 해당
문화정보를 게재하는 페이지 리스트를 저장하고
C#의 WebBrowser Component를 사용하여 html
parsing을 통한 Crawling 개발(매우 오래걸림)
문화정보 공유앱
Deo
웹 프레임워크(CodeIgniter)를 사용한 웹 앱 개발(1/3)
 MVC 패턴으로 개발
• 유지보수를 위하여 웹 프레임워크를 사용
• Database 정보는 Model 사용
• Browser에서 보이는 페이지는 View 사용
• 문화공연, 게시물, 커뮤니티, 기타 등을 클릭했
을 때 발생하는 이벤트 처리는 Controller 사용
문화정보 공유앱
Deo
 HTML5, CSS3, jQuery-ui, Bootstrap 사용
• 빠른 생산성을 위해 다양한 오픈소스 사용
• 사이드 메뉴와 햄버거 버튼의 토글 기능, 아코디언 토
글 기능 사용
웹 프레임워크(CodeIgniter)를 사용한 웹 앱 개발(2/3)
문화정보 공유앱
Deo
 커뮤니티 개발(미완성)
• 문화 정보 뿐만 아니라 문화를 제공하는 문화인에게
커뮤니티를 만들 수 있도록 지원할 수 있도록 개발
• 자신의 소식 또는 공연 일정을 등록할 수 있도록 하며
가입을 통하여 채팅 또는 소식을 주고 받을 수 있기 위
한 Front 개발
웹 프레임워크(CodeIgniter)를 사용한 웹 앱 개발(3/3)
문화정보 공유앱
Deo
교육용 슬라이드 플랫폼
개발기간 / 개발인원
2016.03 ~ 2016.04 / 2명
분야
Web application, Android app
나의 역할
PHP(+CodeIgniter), Java(android),
Javascript(+jQuery), SQL을 이용하여 잠금
화면과 웹 사이트 개발
개발언어 / 개발환경
PHP(+CodeIgniter), Javascript(+jQuery),
SQL/
Aptana studio, HeidiSQL
교육용 슬라이드 플랫폼
프로젝트 소개
• 스마트 폰 중독이 사회적 이슈가 되고 있는 이 시대에 스마트 폰 사용의 긍
정적인 효과를 위하여 잠금 화면을 교육적인 슬라이드를 제공하여 사용자의
지적 소양을 향상시켜주는 플랫폼 개발( ‘U300 대학 창업 유망팀 선발’ )
개발한 내용 및 사용 기술
• Android App
- AsyncTask와 Http를 사용하여 서버와 데이터(JSON형태)를 주고 받도록 개발
- WebView를 사용하여 웹 애플리케이션을 Android 앱에 탑재
• Front-End
- Javascript(+jQuery)를 이용하여 웹 사이트의 기본적인 UI 설계와 UI 기능 구현
- MetroUI 오픈 소스를 사용하여 웹 사이트 페이지 구축
• Back-End
- PHP의 프레임워크인 CodeIgniter을 사용하여 MVC 개발과 RESTful한 개발
• Database
- 유저의 사용과 콘텐츠를 관리하기 위한 Database 설계
Deo
 반응형 웹 페이지 개발
• Display에 따라 레이아웃이 변경되도록 개발
• 최신 디자인 트레드인 Metro 디자인을 사용
웹 사이트 개발(1/2)
반응형 웹 페이지
교육용 슬라이드 플랫폼
Deo
 사용자 취향 분석
• 사용자의 취향을 선택하여 자신의 취향에 맞는 콘텐츠를
보여주도록 설계
 다양한 콘텐츠
• 교육, 배경화면, 명언 등의 다양한 콘텐츠에 접목가능
 찜하기
• 찜을 통하여 사용자가 스마트 폰에서 사용할 슬라이드를
저장하고 스마트 폰에서 찜 목록을 볼 수 있음
웹 사이트 개발(2/2)
찜하기
다양한 콘텐츠사용자 취향 분석
교육용 슬라이드 플랫폼
Deo
 최초 로그인 화면
• 서버의 User DB를 사용하여 로그인을 해야하므로
AsyncTask와 Http를 이용하여 로그인 인증 개발
• Password의 암호화는 CI의 helper를 사용하여
password_hash 오픈 소스를 이용
안드로이드 개발(1/4)
최초 로그인 화면
교육용 슬라이드 플랫폼
Deo
 메인 화면
• 웹 사이트에서 자신이 찜한 목록을 가져와 리스트로 뿌려줌
• 로그인과 방법은 동일
• 인터넷의 연결 여부에 따른 중지 구현
(Service와 BroadCastReceiver를 사용)
안드로이드 개발(2/4)
메인 화면
교육용 슬라이드 플랫폼
Deo
 슬라이드 마켓
• Android의 Webview 컴포넌트를 사용하여 Hybrid로 구현
• ‘찜 하기’ Dialog는 웹 페이지에서 뜨는 Dialog Tag
• 찜 목록은 User id와 Contents의 id를 FK로 하는 테이블 사용
• 이를 이용하여 인기도 순으로 콘텐츠 제공
안드로이드 개발(3/4)
WebView를 활용한 하이브리드
교육용 슬라이드 플랫폼
Deo
 프로그램 사용
• Android의 Dialog Activity를 이용하여 사용
• Preference Activity를 사용하여 설정 메뉴 개발
• ImageView Activity는 Slide로 개발하여 좌우로 슬라이드하여
이미지 변경 가능
안드로이드 개발(4/4)
프로그램 사용
교육용 슬라이드 플랫폼
Deo
2016 창업유망팀 300 선정 – 교육용 슬라이드 플랫폼
교육용 슬라이드 플랫폼
Deo
스마트 도어락 스위치
개발기간 / 개발인원
2016.04 ~ 2016.04 / 1명
분야
Web application, Android app
나의 역할
Nodejs(+socket.io), Java(android),
Javascript(+jQuery)를 이용하여 개발
개발언어 / 개발환경
Nodejs(+socket.io), Javascript(+jQuery)
스마트 도어락 스위치
프로젝트 소개
• 건망증에 대하여 보완해주며, 바쁜 일상의 시작을 빠르게 체크할 수 있으며 바쁜 아침시
간을 효과적으로 사용할 수 있도록 해주는 시스템 개발
개발한 내용 및 사용 기술
• Android App
- socket.io를 사용하여 서버와 연결할 수 있도록 구현하였으며, 사용자가 도어락 스위치
를 사용했을 때(출근, 등교) 자주 까먹는 리스트를 보여주어 잊지 않도록 도와 줌
• Back-End
- Nodejs와 socket.io를 사용하여 서버 개발
Deo
스마트 도어락 스위치
 Nodejs를 이용하여 웹 서버 개발
• Nodejs를 통하여 만들어진 웹서버와 아두이노를 연결
• 라우팅을 이용하여 아두이노의 LED 전구를 ON/OFF할 수 있음
 Android 개발
• Socket.io를 이용하여 서버와 통신하여 자신이 체크해야 할 항
목을 간단하게 띄워주도록 개발
 Arduino 개발
• 사용하기 쉬운 보드 중 하나인 아두이노 보드를 사용하여 스마
트 도어락 스위치의 하드웨어 부분을 개발함
• 현재는 서버 컴퓨터와 직접 연결하여 Serial 통신을 사용했지만
추 후 Wifi 모듈 또는 인터넷 모듈을 장착하여야 함
스마트 도어락 스위치
Deo
스마트 도어락 스위치
 Nodejs를 이용하여 웹 서버 개발
• Nodejs를 통하여 만들어진 웹서버와 아두이노를 연결
• 라우팅을 이용하여 아두이노의 LED 전구를 ON/OFF할 수 있음
 Android 개발
• Socket.io를 이용하여 서버와 통신하여 자신이 체크해야 할 항
목을 간단하게 띄워주도록 개발
 Arduino 개발
• 사용하기 쉬운 보드 중 하나인 아두이노 보드를 사용하여 스마
트 도어락 스위치의 하드웨어 부분을 개발함
• 현재는 서버 컴퓨터와 직접 연결하여 Serial 통신을 사용했지만
추 후 Wifi 모듈 또는 인터넷 모듈을 장착하여야 함
스마트 도어락 스위치
Deo
스마트 도어락 스위치
 Nodejs를 이용하여 웹 서버 개발
• Nodejs를 통하여 만들어진 웹서버와 아두이노를 연결
• 라우팅을 이용하여 아두이노의 LED 전구를 ON/OFF할 수 있음
 Android 개발
• Socket.io를 이용하여 서버와 통신하여 자신이 체크해야 할 항
목을 간단하게 띄워주도록 개발
 Arduino 개발
• 사용하기 쉬운 보드 중 하나인 아두이노 보드를 사용하여 스마
트 도어락 스위치의 하드웨어 부분을 개발함
• 현재는 서버 컴퓨터와 직접 연결하여 Serial 통신을 사용했지만
추 후 Wifi 모듈 또는 인터넷 모듈을 장착하여야 함
스마트 도어락 스위치
Deo
스마트 도어락 스위치
 Nodejs를 이용하여 웹 서버 개발
• Nodejs를 통하여 만들어진 웹서버와 아두이노를 연결
• 라우팅을 이용하여 아두이노의 LED 전구를 ON/OFF할 수 있음
 Android 개발
• Socket.io를 이용하여 서버와 통신하여 자신이 체크해야 할 항
목을 간단하게 띄워주도록 개발
 Arduino 개발
• 사용하기 쉬운 보드 중 하나인 아두이노 보드를 사용하여 스마
트 도어락 스위치의 하드웨어 부분을 개발함
• 현재는 서버 컴퓨터와 직접 연결하여 Serial 통신을 사용했지만
추 후 Wifi 모듈 또는 인터넷 모듈을 장착하여 통신
스마트 도어락 스위치
Deo
스마트 도어락 스위치 – 동남권 연합 액셀러레이팅 캠프
창의 우수상 수상
스마트 도어락 스위치
Deo
창업 활동
 창업활동
- 창업유망팀 300으로 시작
- 인제대학교 LINC 창업동아리 개설 (Gang of Development)
- 비즈니스에 대한 공부를 통해 기술만 중시하던 개발자의 입장
에서 기술과 고객을 생각을 개발자로 변함
- 고객이 만족하는 시스템이 중요하다는 것을 깨달음
Deo
포켓강의 - 포켓스쿨
개발기간 / 개발인원 / 기획인원 / 디자이너
2017.02 ~ 2017.12 / 1명 / 2명 / 1명
분야
Android app
나의 역할
Java(android) 개발, CTO 담당
개발언어 / 개발환경
Java, php / Android, CodeIgniter,
mariaDB
포켓스쿨
프로젝트 소개
• 3분으로 보고 듣고 말하는 음성 복습노트, 수업이 끝나면 학생이 음성을 녹음하여 3분 안
에 복습용 음성노트를 만들어 여러 번 반복 복습할 수 있는 앱 개발
• 부산대 창업팀 포켓 강의 팀 프로젝트
• Gang of Development의 교육용 슬라이드 플랫폼과 융합하여 진행
• 부산 스마트 벤처 캠퍼스 선정(최대 1억 지원)
개발한 내용 및 사용 기술
• Android App
- Service와 BroadCastReciver를 이용하여 잠금화면 구현
- AsyncTask와 Callable을 이용하여 API 호출
- Open source project를 이용하여 개발
• Back-End
- CI를 이용하여 REST API 개발
- DB 모델링 작업
Deo
포켓스쿨 – 안드로이드 앱 (1/4)
 로그인, 숙제, 학생, 설정 페이지
- Calendar을 기본 페이지로 구성하여 자신이 등록한 콘텐츠를 날
짜별로 확인
- 자신이 관리하는 학생들의 리스트가 나오고 숙제(음성노트)를 확
인
- 잠금화면 사용, 로그아웃 기능
메인 구성
포켓스쿨
Deo
포켓스쿨 – 안드로이드 앱 (2/4)
 음성노트 등록 기능
- 날짜 선택시 과목별 앨범이 있으며, 추가 버튼 클릭, 이미지 선택,
제목 입력을 한 뒤 등록을 하면 서버에 음성노트 업로드
- 업로드 서버단은 CI를 이용하여 multipart upload 구현
- 안드로이드에서 서버로의 request 부분은 multipart upload
opensource를 이용하여 백그라운드 작업 수행
음성노트 등록
포켓스쿨
Deo
포켓스쿨 – 안드로이드 앱 (3/4)
 음성노트 확인
- 업로드된 음성노트를 클릭하면 슬라이드 형식의 노트 확인
- Image는 이미지 로더 오픈소스인 Glide를 이용하여 서버에 저장
된 이미지를 보여줌
- 잠금화면은 앱이 종료되어도 계속 실행되어야 하므로 Service로
구성하였으며 Notification bar를 이용하여 foreground 방식으로
서비스 구동
음성노트 확인 및 사용
포켓스쿨
Deo
포켓스쿨 – 안드로이드 앱 (4/4)
 학생 노트 확인, 잠금화면 사용, 설정 화면
- 학생들이 등록한 음성노트 확인
- 잠금화면으로 등록할 수 있으며 잠금화면에서 음성 녹음 가능
- 설정 탭에서 잠금화면 해제 가능
학생 음성노트 확인 및 잠금화면 사용
포켓스쿨
Deo
포켓스쿨 – DB
 포켓스쿨 DB modeling
- 학생, 학부모, 선생을 관리하기 위한 users
- 음성노트를 관리하기 위한 contents, attaches
- 학원과 선생을 관리하기위한 company
- 학생에게 음성노트 만들기 숙제를 요청하기 위한 assignments
- 학급별 숙제 요청을 위한 class
- 학급별 진도(교재 목차)를 관리하기 위한 state, part
포켓스쿨 Database Modeling
포켓스쿨
Deo
포켓스쿨 – 웹 서버단
// RESTful API routing
$route['api/users/(:num)'] = 'api/api/users/$1';
$route['api/users/(:num)/contents']='api/api/contents_/$1';
$route['api/users/(:num)/contents/(:num)'] = 'api/api/contents_2/$1/$2';
$route['api/users/(:num)/contents/((19|20)d{2}-(0[1-9]|1[012])-(0[1-9]|[12][0-9]|3[0-1])$)']='api/api/contents_date/$1/$2';
$route['api/users/(:num)/contents/([가-힣a-z0-9A-Z%]+)/((19|20)d{2}-(0[1-9]|1[012])-(0[1-9]|[12][0-9]|3[0-1])$)']
= 'api/api/contents_/$1/$2/$3';
 서버단 구성
- CodeIgniter 사용
- docker container에 LAMP 설치(mariaDB)
- Android App을 위한 DB의 CRUD 코드 작성
유저정보 음성노트
포켓스쿨

my activities before getting a job

  • 2.
    Deo 한이음 프로젝트 군 제대후 넓은 시야를 위한 교외 프로젝트 참여 – 한이음에서 지원하는 프로젝트를 진행함 – 기술이 없어서 개발의 주체로서 활동을 할 수 없었지만 시야를 넓히는 계기가 됨 한이음 프로젝트
  • 3.
    Deo 영상 창작 플랫폼 개발기간/ 개발인원 2015.06 ~ 2015.08 / 8명 – 1차 2015.10 ~ 2015.11 / 3명 – 2차 분야 Android app, Java GUI app, Web 나의 역할 Java Swing을 이용한 GUI app 개발 및 Android app 개발 개발언어 / 개발환경 Java, PHP, SQL/ Android Studio, Notepad++, Eclipse  프로젝트 소개 • 한국전자통신 연구원의 융합기술연구소의 연구연수생으로 2달 동안 개발한 프로젝트  개발한 내용 및 사용 기술(1차) • Java의 Swing을 이용하여 프로그램의 UI를 구현 - GridBagLayout을 사용 • JDBC를 이용한 회원가입 및 로그인 구현 • JAXB를 사용하여 작업내용을 XML로 저장 및 불러오기 구현 • 영상을 저장 및 불러오기 위한 Data format 설계 - 영상의 제작단위를 Scene과 Shot으로 구별 - Java의 ArrayList를 이용하여 Data format 설계 • Java의 Swing을 이용하여 프로그램의 UI를 구현 • Vlcj를 이용한 자체 영상 플레이어 제작  개발한 내용 및 사용 기술(2차) • Websocket을 이용한 실시간 통신 기술 구현 • Android의 STT를 이용한 음성인식과 Websocket을 이용한 실시간 통신 개발 • FFMPEG을 이용한 영상편집기능 구현 • Github와 SourceTree를 이용한 버전관리 영상 창작 플랫폼
  • 4.
  • 5.
    Deo 인제대 웹센터 현장실습 개발기간/ 개발인원 2015.12 ~ 2016.01 / 3명 분야 Web site 나의 역할 Javscript(+jQuery), php를 이용한 다양 한 모듈 개발과 Database 설계 개발언어 / 개발환경 PHP, Javascript(+jQuery), SQL/ Aptana studio, HeidiSQL 인제대학교 웹센터  프로젝트 소개 • 15년 9월에 창립된 학교 기업으로 인제대학교 학과 홈페이지 재개발과 학생 의 실무능력을 경험하기 위한 동계 현장실습 진행 • 2명의 디자인 학부생과 1명의 컴퓨터공학 학부생 참여 • 반응형 웹사이트 개발 및 홈페이지 템플릿 제작을 위한 각종 모듈 개발  개발한 내용 및 사용 기술 • Javscript(+jQuery), HTML5, CSS3와 DB, PHP를 이용한 개발 진행 • 이미지 편집 모듈 - 오픈소스 Croppic을 사용하여 사용자가 원하는 좌표를 중심으로 이미지를 자르는 모듈 개발 • 접속자 통계, 설문조사 게시판 모듈 - Naver에서 제공하는 오픈소스 Nwagon.js를 이용하여 Database에 저장된 설문조사, 접속 통 계를 시각화 • 일정관리 게시판 모듈 - Javascript(+jQuery), Ajax, SQL를 이용하여 1년의 일정을 등록, 수정 가능한 게시판 개발
  • 6.
    Deo 이미지 편집 모듈 페이지에사용될 Image를 편집할 수 있는 모듈 개발 – 오픈소스 Croppic.js를 사용 인제대학교 웹센터
  • 7.
    Deo 접속자 통계 모듈 접속자통계 모듈 개발 – 시각화를 위한 Naver의 오픈소스 Nwagon을 사용 인제대학교 웹센터
  • 8.
    Deo 설문조사 게시판 모듈 설문조사게시판 모듈 개발 – 시각화를 위한 Naver의 오픈소스 Nwagon을 사용 인제대학교 웹센터
  • 9.
    Deo 일정관리 게시판 모듈& 수료증 일정관리 게시판 모듈 개발 – 1년의 일정을 등록할 수 있는 게시판 모듈 제작 인제대학교 웹센터
  • 10.
    Deo 커리어 앵커 개발기간 /개발인원 2016.01 ~ 2016.01(3주) / 1명 분야 Web application 나의 역할 PHP, Javascript(+jQuery), Bootstrap을 이용한 웹 애플리케이션 개발 개발언어 / 개발환경 PHP, Javascript(+jQuery), SQL/ Aptana studio, HeidiSQL 커리어 앵커 프로젝트 소개 • 부산 시청에서 발주한 프로젝트로 설문을 통하여 자신의 진로 성향을 파악하고 가장 적합한 방향으로 진로를 이끌어주는 프로토타입 웹 앱 개발 • 교육 목적의 프로그램으로 교육부의 국가 사업을 위한 프로젝트의 일환 개발한 내용 및 사용 기술 • Front-End - Javscript와 Ajax를 이용하여 페이지 변화를 구현하였으며 Bootstrap을 이용하여 웹 앱 개발 • Back-End - PHP를 사용하여 클라이언트의 request에 대하여 설문문항 response와 결과 response를 개발 • 설문조사 기능구현 - 주어진 설문문항을 Database에 Table을 작성하여 삽입한 뒤 랜덤으로 설문 문항을 뿌려줌 - PHP를 사용하여 설문 문항을 불러와 랜덤으로 설문 문항을 뿌려주는 서버 프로그램 작성 - Ajax를 사용하여 서버에 request를 보내고 설문 문항을 받아서 Javascript로 5지 선다형 View 개발 - 결과 값 계산과 데이터 통신은 Ajax를 사용하여 개발 • 설문결과 시각화 - Naver의 오픈소스인 Nwagon.js를 사용하여 다각형 그래프와 막대 그래프 두 가지 표현 개발
  • 11.
    Deo 디자이너와 함께 협업 첫 시작 화면 • 디자이너와 함께 웹의 전반적인 디자인을 같이 제작 • 일러스트레이터를 사용하여 디자인  클릭 이벤트 방식 • 하나의 이미지로 되어있어 좌표를 비율로 계산하여 해당 범위를 클릭했을 때 이벤트가 발생하도록 구현 커리어 앵커
  • 12.
    Deo PHP와 Bootstrap을 이용한웹 앱(1/2)  설문조사 화면 • Bootstrap을 이용하여 display에 따라 크기 및 배치가 적절하게 되도록 구현 • PHP를 이용하여 DB에 저장된 설문 문항을 랜덤으로 사용자에게 뿌려줌 • 한 문항당 5지 선다형으로 1~5점으로 계산하여 처리 커리어 앵커
  • 13.
    Deo PHP와 Bootstrap을 이용한웹 앱(2/2)  검사 끝 화면 • 설문 항목 중 자신이 가장 긍정적으로 대답한 항문에 대하여 다시 질문하고 적합한 설문을 체크하여 추가적 인 계산법을 사용  검사 결과화면 1 • Naver의 오픈소스 Nwagon.js를 사용하여 설문에 대한 결과를 시각적으로 표현 • 다양한 그래프중 Radar와 Column을 표본으로 사용하 였고, 요구사항에 따른 색깔 변경, 정렬 등의 간단한 커 스터마이징  검사 결과화면 2 • 자신의 결과에 따라 1~3순위 성향과 최하 순위 성향을 보여주고 그 성향에 대한 설명 출력 커리어 앵커
  • 14.
    Deo 문화정보공유앱 개발기간 / 개발인원 2016.02~ 2016.03 / 4명 분야 Web application, C# App 나의 역할 Php(+CodeIgniter), javascript(+jQuery), C#, SQL을 이용 한 문화정보 크롤링과 웹앱 개발 개발언어 / 개발환경 PHP(+CodeIgniter), C# Javascript(+jQuery), SQL/ Aptana studio, HeidiSQL 문화정보 공유앱 프로젝트 소개 • 창업을 준비하는 외주 프로젝트로 주변에서 쉽게 접할 수 있는 값싼 문화정 보(길거리 공연 등)을 제공하여 국민의 다양한 여가활동의 기회를 제공하는 커뮤니티조성 사업 프로젝트 개발한 내용 및 사용 기술 • C# 크롤러(데이터 수집용) - C#과 Facebook Graph API, Web parsing을 통한 문화정보 crawling 프로그램 개발 • Front-End - Javascript(+jQuery)를 이용하여 웹 앱의 기본적인 UI 설계와 UI 기능 구현 - 디자이너가 제작한 디자인을 HTML code로 구현 • Back-End - PHP의 프레임워크인 CodeIgniter을 사용하여 MVC 개발과 RESTful한 개발 • Database - 커뮤니티, 유저, 문화정보을 효율적으로 관리하기 위한 Database 설계
  • 15.
    Deo C#으로 개발한 문화정보크롤러  C# Facebook 크롤러 • Facebook과 Kakao story에 있는 문화정보를 Crawling • Facebook은 Facebook Graph API를 사용하면 JSON 형식으로 response를 받아 해당 페이지의 게 시물의 정보들을 사용할 수 있음(비교적 빠름) • JSON data는 100개씩만 전달해주므로 Next key가 없을 때까지 JSON을 읽어오도록 개발  C# KakaoStory 크롤러 • KakaoStory는 위와 같은 지원 API가 없으므로 해당 문화정보를 게재하는 페이지 리스트를 저장하고 C#의 WebBrowser Component를 사용하여 html parsing을 통한 Crawling 개발(매우 오래걸림) 문화정보 공유앱
  • 16.
    Deo 웹 프레임워크(CodeIgniter)를 사용한웹 앱 개발(1/3)  MVC 패턴으로 개발 • 유지보수를 위하여 웹 프레임워크를 사용 • Database 정보는 Model 사용 • Browser에서 보이는 페이지는 View 사용 • 문화공연, 게시물, 커뮤니티, 기타 등을 클릭했 을 때 발생하는 이벤트 처리는 Controller 사용 문화정보 공유앱
  • 17.
    Deo  HTML5, CSS3,jQuery-ui, Bootstrap 사용 • 빠른 생산성을 위해 다양한 오픈소스 사용 • 사이드 메뉴와 햄버거 버튼의 토글 기능, 아코디언 토 글 기능 사용 웹 프레임워크(CodeIgniter)를 사용한 웹 앱 개발(2/3) 문화정보 공유앱
  • 18.
    Deo  커뮤니티 개발(미완성) •문화 정보 뿐만 아니라 문화를 제공하는 문화인에게 커뮤니티를 만들 수 있도록 지원할 수 있도록 개발 • 자신의 소식 또는 공연 일정을 등록할 수 있도록 하며 가입을 통하여 채팅 또는 소식을 주고 받을 수 있기 위 한 Front 개발 웹 프레임워크(CodeIgniter)를 사용한 웹 앱 개발(3/3) 문화정보 공유앱
  • 19.
    Deo 교육용 슬라이드 플랫폼 개발기간/ 개발인원 2016.03 ~ 2016.04 / 2명 분야 Web application, Android app 나의 역할 PHP(+CodeIgniter), Java(android), Javascript(+jQuery), SQL을 이용하여 잠금 화면과 웹 사이트 개발 개발언어 / 개발환경 PHP(+CodeIgniter), Javascript(+jQuery), SQL/ Aptana studio, HeidiSQL 교육용 슬라이드 플랫폼 프로젝트 소개 • 스마트 폰 중독이 사회적 이슈가 되고 있는 이 시대에 스마트 폰 사용의 긍 정적인 효과를 위하여 잠금 화면을 교육적인 슬라이드를 제공하여 사용자의 지적 소양을 향상시켜주는 플랫폼 개발( ‘U300 대학 창업 유망팀 선발’ ) 개발한 내용 및 사용 기술 • Android App - AsyncTask와 Http를 사용하여 서버와 데이터(JSON형태)를 주고 받도록 개발 - WebView를 사용하여 웹 애플리케이션을 Android 앱에 탑재 • Front-End - Javascript(+jQuery)를 이용하여 웹 사이트의 기본적인 UI 설계와 UI 기능 구현 - MetroUI 오픈 소스를 사용하여 웹 사이트 페이지 구축 • Back-End - PHP의 프레임워크인 CodeIgniter을 사용하여 MVC 개발과 RESTful한 개발 • Database - 유저의 사용과 콘텐츠를 관리하기 위한 Database 설계
  • 20.
    Deo  반응형 웹페이지 개발 • Display에 따라 레이아웃이 변경되도록 개발 • 최신 디자인 트레드인 Metro 디자인을 사용 웹 사이트 개발(1/2) 반응형 웹 페이지 교육용 슬라이드 플랫폼
  • 21.
    Deo  사용자 취향분석 • 사용자의 취향을 선택하여 자신의 취향에 맞는 콘텐츠를 보여주도록 설계  다양한 콘텐츠 • 교육, 배경화면, 명언 등의 다양한 콘텐츠에 접목가능  찜하기 • 찜을 통하여 사용자가 스마트 폰에서 사용할 슬라이드를 저장하고 스마트 폰에서 찜 목록을 볼 수 있음 웹 사이트 개발(2/2) 찜하기 다양한 콘텐츠사용자 취향 분석 교육용 슬라이드 플랫폼
  • 22.
    Deo  최초 로그인화면 • 서버의 User DB를 사용하여 로그인을 해야하므로 AsyncTask와 Http를 이용하여 로그인 인증 개발 • Password의 암호화는 CI의 helper를 사용하여 password_hash 오픈 소스를 이용 안드로이드 개발(1/4) 최초 로그인 화면 교육용 슬라이드 플랫폼
  • 23.
    Deo  메인 화면 •웹 사이트에서 자신이 찜한 목록을 가져와 리스트로 뿌려줌 • 로그인과 방법은 동일 • 인터넷의 연결 여부에 따른 중지 구현 (Service와 BroadCastReceiver를 사용) 안드로이드 개발(2/4) 메인 화면 교육용 슬라이드 플랫폼
  • 24.
    Deo  슬라이드 마켓 •Android의 Webview 컴포넌트를 사용하여 Hybrid로 구현 • ‘찜 하기’ Dialog는 웹 페이지에서 뜨는 Dialog Tag • 찜 목록은 User id와 Contents의 id를 FK로 하는 테이블 사용 • 이를 이용하여 인기도 순으로 콘텐츠 제공 안드로이드 개발(3/4) WebView를 활용한 하이브리드 교육용 슬라이드 플랫폼
  • 25.
    Deo  프로그램 사용 •Android의 Dialog Activity를 이용하여 사용 • Preference Activity를 사용하여 설정 메뉴 개발 • ImageView Activity는 Slide로 개발하여 좌우로 슬라이드하여 이미지 변경 가능 안드로이드 개발(4/4) 프로그램 사용 교육용 슬라이드 플랫폼
  • 26.
    Deo 2016 창업유망팀 300선정 – 교육용 슬라이드 플랫폼 교육용 슬라이드 플랫폼
  • 27.
    Deo 스마트 도어락 스위치 개발기간/ 개발인원 2016.04 ~ 2016.04 / 1명 분야 Web application, Android app 나의 역할 Nodejs(+socket.io), Java(android), Javascript(+jQuery)를 이용하여 개발 개발언어 / 개발환경 Nodejs(+socket.io), Javascript(+jQuery) 스마트 도어락 스위치 프로젝트 소개 • 건망증에 대하여 보완해주며, 바쁜 일상의 시작을 빠르게 체크할 수 있으며 바쁜 아침시 간을 효과적으로 사용할 수 있도록 해주는 시스템 개발 개발한 내용 및 사용 기술 • Android App - socket.io를 사용하여 서버와 연결할 수 있도록 구현하였으며, 사용자가 도어락 스위치 를 사용했을 때(출근, 등교) 자주 까먹는 리스트를 보여주어 잊지 않도록 도와 줌 • Back-End - Nodejs와 socket.io를 사용하여 서버 개발
  • 28.
    Deo 스마트 도어락 스위치 Nodejs를 이용하여 웹 서버 개발 • Nodejs를 통하여 만들어진 웹서버와 아두이노를 연결 • 라우팅을 이용하여 아두이노의 LED 전구를 ON/OFF할 수 있음  Android 개발 • Socket.io를 이용하여 서버와 통신하여 자신이 체크해야 할 항 목을 간단하게 띄워주도록 개발  Arduino 개발 • 사용하기 쉬운 보드 중 하나인 아두이노 보드를 사용하여 스마 트 도어락 스위치의 하드웨어 부분을 개발함 • 현재는 서버 컴퓨터와 직접 연결하여 Serial 통신을 사용했지만 추 후 Wifi 모듈 또는 인터넷 모듈을 장착하여야 함 스마트 도어락 스위치
  • 29.
    Deo 스마트 도어락 스위치 Nodejs를 이용하여 웹 서버 개발 • Nodejs를 통하여 만들어진 웹서버와 아두이노를 연결 • 라우팅을 이용하여 아두이노의 LED 전구를 ON/OFF할 수 있음  Android 개발 • Socket.io를 이용하여 서버와 통신하여 자신이 체크해야 할 항 목을 간단하게 띄워주도록 개발  Arduino 개발 • 사용하기 쉬운 보드 중 하나인 아두이노 보드를 사용하여 스마 트 도어락 스위치의 하드웨어 부분을 개발함 • 현재는 서버 컴퓨터와 직접 연결하여 Serial 통신을 사용했지만 추 후 Wifi 모듈 또는 인터넷 모듈을 장착하여야 함 스마트 도어락 스위치
  • 30.
    Deo 스마트 도어락 스위치 Nodejs를 이용하여 웹 서버 개발 • Nodejs를 통하여 만들어진 웹서버와 아두이노를 연결 • 라우팅을 이용하여 아두이노의 LED 전구를 ON/OFF할 수 있음  Android 개발 • Socket.io를 이용하여 서버와 통신하여 자신이 체크해야 할 항 목을 간단하게 띄워주도록 개발  Arduino 개발 • 사용하기 쉬운 보드 중 하나인 아두이노 보드를 사용하여 스마 트 도어락 스위치의 하드웨어 부분을 개발함 • 현재는 서버 컴퓨터와 직접 연결하여 Serial 통신을 사용했지만 추 후 Wifi 모듈 또는 인터넷 모듈을 장착하여야 함 스마트 도어락 스위치
  • 31.
    Deo 스마트 도어락 스위치 Nodejs를 이용하여 웹 서버 개발 • Nodejs를 통하여 만들어진 웹서버와 아두이노를 연결 • 라우팅을 이용하여 아두이노의 LED 전구를 ON/OFF할 수 있음  Android 개발 • Socket.io를 이용하여 서버와 통신하여 자신이 체크해야 할 항 목을 간단하게 띄워주도록 개발  Arduino 개발 • 사용하기 쉬운 보드 중 하나인 아두이노 보드를 사용하여 스마 트 도어락 스위치의 하드웨어 부분을 개발함 • 현재는 서버 컴퓨터와 직접 연결하여 Serial 통신을 사용했지만 추 후 Wifi 모듈 또는 인터넷 모듈을 장착하여 통신 스마트 도어락 스위치
  • 32.
    Deo 스마트 도어락 스위치– 동남권 연합 액셀러레이팅 캠프 창의 우수상 수상 스마트 도어락 스위치
  • 33.
    Deo 창업 활동  창업활동 -창업유망팀 300으로 시작 - 인제대학교 LINC 창업동아리 개설 (Gang of Development) - 비즈니스에 대한 공부를 통해 기술만 중시하던 개발자의 입장 에서 기술과 고객을 생각을 개발자로 변함 - 고객이 만족하는 시스템이 중요하다는 것을 깨달음
  • 34.
    Deo 포켓강의 - 포켓스쿨 개발기간/ 개발인원 / 기획인원 / 디자이너 2017.02 ~ 2017.12 / 1명 / 2명 / 1명 분야 Android app 나의 역할 Java(android) 개발, CTO 담당 개발언어 / 개발환경 Java, php / Android, CodeIgniter, mariaDB 포켓스쿨 프로젝트 소개 • 3분으로 보고 듣고 말하는 음성 복습노트, 수업이 끝나면 학생이 음성을 녹음하여 3분 안 에 복습용 음성노트를 만들어 여러 번 반복 복습할 수 있는 앱 개발 • 부산대 창업팀 포켓 강의 팀 프로젝트 • Gang of Development의 교육용 슬라이드 플랫폼과 융합하여 진행 • 부산 스마트 벤처 캠퍼스 선정(최대 1억 지원) 개발한 내용 및 사용 기술 • Android App - Service와 BroadCastReciver를 이용하여 잠금화면 구현 - AsyncTask와 Callable을 이용하여 API 호출 - Open source project를 이용하여 개발 • Back-End - CI를 이용하여 REST API 개발 - DB 모델링 작업
  • 35.
    Deo 포켓스쿨 – 안드로이드앱 (1/4)  로그인, 숙제, 학생, 설정 페이지 - Calendar을 기본 페이지로 구성하여 자신이 등록한 콘텐츠를 날 짜별로 확인 - 자신이 관리하는 학생들의 리스트가 나오고 숙제(음성노트)를 확 인 - 잠금화면 사용, 로그아웃 기능 메인 구성 포켓스쿨
  • 36.
    Deo 포켓스쿨 – 안드로이드앱 (2/4)  음성노트 등록 기능 - 날짜 선택시 과목별 앨범이 있으며, 추가 버튼 클릭, 이미지 선택, 제목 입력을 한 뒤 등록을 하면 서버에 음성노트 업로드 - 업로드 서버단은 CI를 이용하여 multipart upload 구현 - 안드로이드에서 서버로의 request 부분은 multipart upload opensource를 이용하여 백그라운드 작업 수행 음성노트 등록 포켓스쿨
  • 37.
    Deo 포켓스쿨 – 안드로이드앱 (3/4)  음성노트 확인 - 업로드된 음성노트를 클릭하면 슬라이드 형식의 노트 확인 - Image는 이미지 로더 오픈소스인 Glide를 이용하여 서버에 저장 된 이미지를 보여줌 - 잠금화면은 앱이 종료되어도 계속 실행되어야 하므로 Service로 구성하였으며 Notification bar를 이용하여 foreground 방식으로 서비스 구동 음성노트 확인 및 사용 포켓스쿨
  • 38.
    Deo 포켓스쿨 – 안드로이드앱 (4/4)  학생 노트 확인, 잠금화면 사용, 설정 화면 - 학생들이 등록한 음성노트 확인 - 잠금화면으로 등록할 수 있으며 잠금화면에서 음성 녹음 가능 - 설정 탭에서 잠금화면 해제 가능 학생 음성노트 확인 및 잠금화면 사용 포켓스쿨
  • 39.
    Deo 포켓스쿨 – DB 포켓스쿨 DB modeling - 학생, 학부모, 선생을 관리하기 위한 users - 음성노트를 관리하기 위한 contents, attaches - 학원과 선생을 관리하기위한 company - 학생에게 음성노트 만들기 숙제를 요청하기 위한 assignments - 학급별 숙제 요청을 위한 class - 학급별 진도(교재 목차)를 관리하기 위한 state, part 포켓스쿨 Database Modeling 포켓스쿨
  • 40.
    Deo 포켓스쿨 – 웹서버단 // RESTful API routing $route['api/users/(:num)'] = 'api/api/users/$1'; $route['api/users/(:num)/contents']='api/api/contents_/$1'; $route['api/users/(:num)/contents/(:num)'] = 'api/api/contents_2/$1/$2'; $route['api/users/(:num)/contents/((19|20)d{2}-(0[1-9]|1[012])-(0[1-9]|[12][0-9]|3[0-1])$)']='api/api/contents_date/$1/$2'; $route['api/users/(:num)/contents/([가-힣a-z0-9A-Z%]+)/((19|20)d{2}-(0[1-9]|1[012])-(0[1-9]|[12][0-9]|3[0-1])$)'] = 'api/api/contents_/$1/$2/$3';  서버단 구성 - CodeIgniter 사용 - docker container에 LAMP 설치(mariaDB) - Android App을 위한 DB의 CRUD 코드 작성 유저정보 음성노트 포켓스쿨