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. Deo
영상 창작 플랫폼
영상 창작 플랫폼

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 코드 작성
유저정보 음성노트
포켓스쿨