- Developed responsive SongareeIT web page. - Published responsive SongareeIT web page. - Designed animation at web page. Environment - Webpack - Html5 - Sass - javascript ------------------------------------ *프로젝트 설명 - 서비스 오픈에 따라 송아리 앱 소개 및 회사소개, 팀 정보, 채용정보, 공지사항 정보를 위한 웹 페이지 개발. *개발 환경 - AWS EC2 - Firebase realtime database - HTML5, Sass, javascript, bootstrap - Git 형상관리 (gitlab, source tree) - Zepline, sketch (design 공유) - Webpack *기여 내용 - 홈페이지 개발을 책임지고 진행. 디자이너와 협업. (Zepline) - Webpack을 사용 ->ES6 문법을 ECMAScript 5 기준에 충족 시키도록하여 홈페이지의 지원 범위를 넓힘(babel) ->Sass를 css로 컴파일 ->production을 위해 js 파일을 Uglify, Mangling 및 압축 ->Webpack-dev-server를 이용하여 실시간으로 수정사항들을 확인할 수 있는 환경 구축 - 공지사항 정보를 Firebase database에서 가져오도록 함. - 스크롤 시점에 따라 애니메이션이 trigger되도록함. (internet explorer 제외) (javascript, html, sass) - SVG path 를 활용하여 배경 그래프 그리기. (html, sass) - 미디어 쿼리를 활용하여 반응형 웹페이지 구성 (html, sass)

스마트 헬스케어 모바일 앱 '송아리' - Publishing and Polishing application - Support front-end development - Animation design and development Environment - Ionic framework -> Web based application platform -> HTML5, typescript, Sass, Angular, Sass, Cordova, livereload, ChartJS, Webpack - RESTful API - Spring boot, Mysql, AWS EC2, Firebase messaging service - Git (gitlab, source tree) - Zepline, sketch --------------------------------- *프로젝트 설명 - 스마트 헬스케어 모바일 앱 ‘송아리’ 개발 프로젝트 진행. - 건강 관리 통합 플랫폼으로 개인의료기록 데이터를 기반으로 혈압관리, 혈당관리를 할 수 있으며, 그 외에도 처방전관리와 투약 알림 기능을 갖추고 있다. 또한 가족의 계정을 연동하여 부모님, 배우자, 아이의 건강을 관리할 수 있게 하여 개인 건강뿐만 아니라 가족의 건강도 함께 관리하고 모니터링 할 수 있는 앱이다. *개발 환경 - Ionic framework -> 어플리케이션 플랫폼 -> HTML5, typescript, Sass, Angular, Sass, Cordova, webpack, livereload, ChartJS - RESTful API -Spring boot, Mysql, AWS EC2, Firebase messaging service(json 방식) -Git 형상관리 (gitlab, source tree) -Zepline, sketch (design 공유) *기여 내용 - 메인 퍼블리셔로 디자이너와 협업하며 어플리케이션의 전체적인 디자인을 적용 (html, Sass, javascript, ionic UI components) - 웹 기반 어플리케이션 이기에 적정 수준의 animation 구상 및 구현. (css3) - 당시 복잡한 네비게이션을 간소화. Depth가 깊은 문제 제시 및 해결. - 입사 당시 javascript API 기반의 구글 지도에서 Native 기반의 구글지도로 검색페이지 다시 제작하여 지도 렌더링 속도 개선 - front end (Angular, Sass, Google map ionic native plugin, typescript) - 개인의료기록(Personal Medical Record) 신규 기능 추가 개발 - front end (Angular, Sass, typescript) -> 질문의 유형, 종류에 따라 페이지를 구조화하여 향후 확장성 및 유지보수에 유리하게 제작. - 페이지 전환에 따른 mobile status bar 글자색 전환을 페이지에 적절한 색으로 페이지마다 세팅. - 기존 투약알림에 적용된 push notification의 시간 부정확의 이슈로 인해 일부 조건에 한해 local notificaiton으로 전환작업 - front-end (Local notification ionic plugin 활용, typescript, angular) - 혈압, 혈당 관리 페이지에서 그래프 슬라이딩 시 현재 focus되어 있는 날짜의 전날 혹은 다음날의 상세 정보를 볼 수 있게 함. (ionic slides, typescript) -> 터치 이벤트 객체를 통해 움직임, 변화를 측정하여 그에 따라 적절한 데이터를 로드하도록 이벤트 trigger. - 어플리케이션 출시 전, 소스 사이즈 최소화를 위해 css를 최대한으로 활용하고 사용되는 이미지는 최적화 하였다.

- Assembled PIXHAWK based drone (size - 550) - Structured network for requesting and responding flight information and flight commands between drone and server.(Web socket is used for information communication) - Developed flight command information process using ROS and socket communication c.f. This project is supported financially by 박안원. So this system have developed by FOR Peter Pan and reported as his capstone project. ----------------------- *프로젝트 설명 Pixhawk 기반의 드론을 이용하여 실시간으로 드론의 위치를 확인하고 명령을 내릴 수 있는 웹기반 시스템 구축. 참고로 기본 프로토타입은 2016년 8월에서 2016년 12월 까지 진행된 ‘항공 소프트웨어 프로젝트’를 통하여 처음 제작되었다. *개발 환경 - ROS 환경에서 Pixhawk기반의 드론과 통신 (telemetry를 통해 정보를 수신, mavros c++라이브러리 활용) - Web Server : tomcat 8 (ubuntu) - Web Front-end : html, css, javascript(web socket - STOMP protocol) - Web Back-end : Java Server (Spring Framework) *기여 내용 - Full stack으로 프로젝트 참여. - 전체 시스템 구조 구상 - ROS(Robot Operating System)을 활용하여 드론의 데이터를 받아오는 Java program 개발. -> ROS의 mavros 라이브러리를 활용하여 드론의 데이터 topic을 subscribe하여 Web socket방식으로 web서버에 실시간으로 전송하는 Java program개발. -> 웹 클라이언트에서 비행정보 데이터를 쉽게 핸들링 하기위해 데이터를 구조화하여 전송. -> ROS 프로그램과 Java program 사이의 데이터 통신은 socket방식의 통신을 활용. - 드론에서 데이터를 받아오는 ROS program 개발 (C++). -> Mavros node와 연결된 Pixhawk 드론의 각종 비행정보를 받아오기 위한 ROS 프로그램 제작. -> 비행정보 데이터 송신과 명령 데이터 수신을 동시에 진행하기 위해 멀티 스레드 방식으로 제작. -> 비행정보를 Web server로 보내주는 Java program과의 통신을 위해 socket통신 적용. - 비행정보를 표시하는 웹 클라이언트 제작. -> Bootstrap을 활용하여 간편하게 클라이언트 제작. -> 비행정보 표시를 위해 Google map과 Flight indicators (1.0.3) 라이브러리를 사용. -> Google map의 위치에 기반한 날씨정보를 불러오기 위해 simpleWeather 라이브러리 사용. -> 웹서버를 통해 오는 정보를 실시간으로 받기위해 Web socket (STOMP 프로토콜)을 사용. - Spring Framework 기반의 웹서버 제작. -> 실시간 통신에 사용될 Web socket 통신 모듈 구현 (STOMP 프로토콜)

자체개발 SW 유지, 보수에 기여

- Stabilized socket communication, customizing SocketJS(front-end) and Vertx(backend). - Supplemented authority vulnerabilities using session filtering - Added end to end data encryption function for security - Protected SQL injection by using Mybatis framework - Prevented XSS (Cross site scripting) ----------------------------- *프로젝트 설명 합동참모본부(합참) 원격전자서명체계 (이하 JESS - Joint Electronic Signature System)는 전쟁 상황 시 각군의 참모총장 그리고 합참의장이 한 자리에 모일 수 없는 상황에 대비하여 실시간으로 전장망을 통해 각종 안건에 대해 실시간으로 의견을 제시하고 서명을 진행할 수 있는 웹 체계입니다. 따라서 매우 높은 수준의 신뢰도가 요구. 따라서 실시간 통신의 신뢰도를 높이는 작업과 보안 취약점 개선을 위한 프로젝트를 진행 *개발 환경 - Server : tomcat 7 (Unix) - DB : Oracle database ( Oracle 10g ) - Front-end : html, css, javascript (jquery, sockJS) - Back-end : Java Server (JSP), iBatis framework, Vertx (socket 통신을 위한 java server library) *기여 내용 - Full stack으로 프로젝트 참여. - SockJS 라이브러리를 분석 후 코드를 수정하여 실시간 통신을 안정적으로 유지시켜 주도록 개선 (javascript) - 안건 페이지내 실시간 통신 여부 확인 할 수 있도록 페이지 개선 (javascript, html, css) - 서버와 클라이언트간 데이터 교환시 양단 암호화 기능 적용 -> AES256 방식의 암호화를 할 수 있는 클래스파일 그리고 암호화 라이브러리를 활용한 javascript파일을 각각 서버(JAVA)와 클라이언트(Javascript)에 적용하여 양단에서 데이터를 암호화 복호화 하여 보안을 개선 - XSS 취약점 보완 -> 정규표현식을 이용하여 문제가 될 수 있는 문자열을 필터링. - 세션 정보를 클라이언트에서 확인하여 관리자권한을 획득하는 문제를 해결 -> 주소를 이용하여 jsp 페이지에 접근할 때 Session filter를 이용하여 권한체크, 기존 세션 수정을 클라이언트에서 할 수 있는 심각한 취약점을 해결. -> Internet Explorer 7 + 에 맞게 페이지 제작 (cross browsing 가능)