Journal Search Engine
Search Advanced Search Adode Reader(link)
Download PDF Export Citaion korean bibliography PMC previewer
ISSN : 1229-3431(Print)
ISSN : 2287-3341(Online)
Journal of the Korean Society of Marine Environment and Safety Vol.19 No.4 pp.352-358
DOI : https://doi.org/10.7837/kosomes.2013.19.4.352

해양오염 방제작업자를 위한 모바일 앱의 개발과 구현

최종욱*†, 김상운**, 김창균**, 이찬근**, 주영환**
*, **해양경찰청 해양오염방제국

Development and Implementation of Mobile APP for Marine Pollution Responder

Jong-Wook Choi*†, Sang-Woon Kim**, Chang-Gyuen Kim**, Chan-Geun Lee**, Young-Hwan Joo**
*, **Marine Pollution Response Bureau, Korea Coast Guard, Incheon, 406-741, Korea

Abstract

The objective of this paper is to introduce on a mobile APP called MAMIS(Marine pollution Accident response Mobile InformationSystem) and it's functions. MAMIS was developed by Korea Coast Guard for marine pollution responder in 2012. Users can get information onmarine pollution response easily without being restricted by time and place. MAMIS can be operated by smart phones with Android OS and iOS,both of which are the most popular mobile operating systems in Korea. And it has been developed in the form of hybrid APP which combined thefunctions of mobile APP and mobile WEB. MAMIS is composed of 9 menus, 5 mobile-based ones and 4 web-based ones. The mobile-based menusare on substance information, clean-up skills, response measures, QR code scanning, and volunteer’s safety, and the web-based ones on weatherinformation, response equipment, clean-up materials, and SNS.

KSME_19-4_352.pdf1.38MB

1. 서 론

 전 세계적으로 스마트폰의 보급률이 기하급수적으로 증가하고 있고 아이폰과 앱스토어의 성공은 스마트폰에서 사용될 어플리케이션(앱, APP)에 대한 관심을 한층 끌어올리고 있다. 우리나라의 경우 방송통신위원회 내부자료에 따르면 국내 휴대폰 가입자 중 스마트폰의 누적 가입자 수는 2009년 75만 명이던 것이 2012년 8월 20일 기준으로 3,000만 명을 넘어섰다. 이러한 3세대 이동통신의 발달과 무선인터넷 기술의 발달로 모바일 인터넷 시대가 본격적으로 왔고 이젠 4세대 통신기술발달로 하드웨어보다는 그 위에 탑재되는 소프트웨어 플랫폼에 대한 관심이 더 증가하고 있는 실정이다. 최근에는 모바일을 이용한 HD급 양방향 실시간 방송교육시스템을 개발하는 단계에 이르렀으며 앞으로의 발전방향은 언제든지 어디서나 누구나 쉽게 설치하고 휴대성 및 이동성을 강조하는 시스템을 요구하고 있다(Kim and Lee, 2012).

 이러한 시스템도 해양오염방제분야에 적용해 볼 수 있는데, 대규모 기름유출사고를 겪으면서 해양오염방제에 관한 각종 정보를 시간과 장소에 구애받지 않고 누구나 손쉽게 이용할 수 있도록 스마트시대에 걸맞은 시스템의 필요성을 인식하게 되었다. 2007년 태안해역에서 발생한 허베이 스피리트호 기름유출사고 당시 해안방제작업을 위하여 찾은 일일 최대 44,511명의 자원봉사자들 중 일부는 인터넷 포털사이트를 이용하거나 직장, 가족 등을 통하여 정보와 경험을 공유하며 방제작업에 참여하는 양상을 보이기도 하였다(MLTM et al., 2008). 그러나 이들에게 방제책임기관에서 안전과 방제에 관한 교육을 제대로 실시하지 못함으로써 마구잡이식 방제기자재의 사용으로 낭비 요소가 발생하고 작업시 마스크 미착용 및 부실한 보호장비 사용으로 두통, 어지럼증을 호소하거나 기름과의 직접적인 피부접촉으로 인한 피부염이 발생하는 문제점을 야기하였다(MOPAS, 2008). 만일 그 당시 스마트폰 보급률이 지금처럼 높아서 필요한 정보를 즉시 얻을 수 있었다면 이와 같은 문제는 어느 정도 해소되었을지 모른다.

 이에 본 연구개발에서는 자원봉사자 등 현장방제작업자들이 방제작업에 필요한 방제방법과 방제기자재의 사용방법, 조석 간만의 차가 심한 지역에서의 작업 가능시간을 알 수 있는 조석정보 등의 각종 정보를 쉽게 얻을 수 있고 작업자간 정보를 공유할 수 있는 대 국민 해양오염방제관련 정보제공 시스템인 해양오염대응정보시템(MAMIS; Marine pollution Accident response Mobile Information System)을 Android와 iOS 기반하에서 구동되도록 모바일앱과 웹의 기능을 합친 하이브리드 앱 형식으로 개발하고 운영체제 및 플랫폼 제한 없이 플래시나 동영상, 멀티미디어 파일 구동이 될 수 있도록 HTML1)을 기반으로 전자정부프레임워크2.0에서 분석 및 설계한 후 구현하였다.

1) HTML(Hyper Text Markup Language) ; 웹브라우저에서 하이퍼 텍스트 기능을 가진 문서를 만드는 언어

2. 모바일 플랫폼 현황

2.1 스마트폰 운영체제

 스마트폰은 휴대전화에 인터넷 통신과 정보검색 등 컴퓨터 지원 기능을 추가한 지능형 단말기로서 스마트폰도 일종의 컴퓨터라 할 수 있어 컴퓨터를 사용할 때 ‘Windows’, ‘MAC’, ‘UNIX’, ‘LINUX’ 등을 사용하듯이 스마트폰도 이러한 운영체제를 사용한다.

스마트폰 운영체제에는 애플이 개발한 iOS와 구글이 개발한 Android가 대표적이고, 이 두 체제는 최근 국내 스마트폰 시장에서 전체의 90 % 이상을, 세계적으로는 85 % 이상을 차지하고 있다. 이외에도 마이크로소프트사의 Windows Mobile, 노키아의 Symbian, RIM의 BlackBerry, 삼성의 Bada, HP의 Web 등이 있으며 이들에 대한 장단점을 Table 1에서 비교하였다(Jin, 2011). 

Table 1. Comparative table of Smartphone OSs

2.2 모바일 정보 이용 도구

 일반적으로 모바일에서 구동하는 어플리케이션은 크게 모바일앱, 모바일웹 그리고 하이브리드앱으로 나눌 수 있고 Fig. 1은 이들 유형별 특징을 나타낸 것이다. 모바일앱은 스마트폰에 설치하여 사용할 수 있는 프로그램을 뜻하며 모바일웹은 모바일의 인터넷 기능을 통해 각종 웹사이트로 접속할 수 있도록 모바일 환경을 고려하여 설계된 모바일 전용 웹사이트를 의미한다.

Fig. 1. Structure diagram of three types of mobile applications.

모바일앱과 모바일웹, 이 두 가지 모바일 정보이용도구에 대하여 구현 방식과 구축 절차 단계에서의 종합적인 구현, 설치, 배포 및 작동방식과 장단점을 비교하여 Table 2에 정리하였다. 

Table 2. Compare with mobileAPP and mobileWEB

하이브리드앱은 Fig. 2와 같이 모바일앱과 모바일웹의 장점을 가져와서 혼합한 형태의 앱으로서 웹표준을 준수한 모바일웹을 만든 후 앱에 연동시켜 형식은 앱으로 만들고 내용은 웹으로 만든 형태이다. 모바일 앱과 동일한 환경을 가지고 있지만 부분적으로는 HTML과 CSS2)로 작성된다. 하이브리드 앱은 인터넷 환경과 와이파이 환경에 다른 영향에 유연하고 모바일앱보다 로딩속도가 빠르며, 개발비용을 상대적으로 절감할 수 있는 특징이 있어 최근 모바일 기기들 대부분에 적용되어 있어 해양오염대응정보시스템에서도 적용하였다. 

Fig. 2. Conceptual drawing of Hybrid APP.

2) CSS(Cascading Style Sheets) ; HTML은 웹문서를 다양하게 설계하고 수시로 변경하는데 많은 제약을 따르는데 이를 보완하기 위하여 만들어진 웹문서의 전반적인 스타일을 미리 저장해 둔 스타일 시트의 표준안. 문서 전체의 일관성을 유지하고 세세한 쉬트 지정의 필요를 줄어들게 한다.

 하이브리드앱의 작동원리는 기본적으로 웹기술을 통해 내부 구조와 인터페이스를 만들고, 카메라나 단말기 센서 조작 등 웹 기술이 지원하지 않는 기능만을 단말기 전용 어플리케이션 프로그래밍 인터페이스(API; Application Programming Interface)를 쓴다. 그 뒤 HTML과 CSS, JavaScript API 코드로 구성된 프로그램 소스를 일반 앱처럼 단말기에서 실행되는 형태로 변환한다.

3. 해양오염대응정보시스템의 설계 및 구성

3.1 개발환경

 모바일앱 기반의 해양오염대응정보시스템 개발에 있어서 시스템 이용자의 대부분이 내국인 점을 반영하여 국내 스마트폰 이용자의 90 % 이상이 사용하고 있는 Android와 iOS 두 운영체제를 채택하고 갤럭시노트, 갤럭시탭10.1, iPhone4s, iPAD 등 4종류를 타깃 기기로 선정했다.

 모바일앱으로 개발하는 부분은 iOS, Android와 같은 모바일 운영체제가 제공하는 개발 환경에서 Objective-C 또는 Java와 같은 전용 개발 언어를 사용하였으며 Table 3는 해양오염대응정보시스템에 적용한 iOS와 Android 운영제체에서의 개발환경을 비교한 것이다.

Table 3. Development Environment of MAMIS

한편, 모바일웹 부분은 웹 기술 중 가장 주목받고 있는 HTML5를 이용하였는데 이는 진일보된 웹 표준 기술로 편리함을 제공하며, 개발비용을 절감할 수 있고, 저사양의 단말기에서도 다양한 서비스 이용이 가능하여 모바일에서의 웹활용도가 점차 증가할 것으로 예상된다(Oh, 2011). 

3.1.1 시스템 구축 적용 기술

 전자정부 표준프레임워크를 기반으로 하여 개발된 해양오염대응정보시스템에 적용된 세부기술로는 빠른 데이터 처리와 안정적 브라우저 동작 및 데이터 재사용과 정보공유촉진을 장점으로 하는 XHTML을 웹브라우저에 적용하였으며, 서로 다른 OS, 아키텍쳐, 프로그래밍 언어를 사용하는 어플리케이션 간의 단일한 통신을 위해 웹서비스에 SOAP을 적용하였다. 데이터 베이스는 향후 변화될 경우에 쉽게 적용 가능하고 데이터의 관리와 데이터의 무결성 보장을 장점으로 하는 RDBMS을 채택하였다. 이밖에도 웹 실행을 위해 페이지 이동 없이 고속으로 화면 전환을 할 수 있고 서버 처리를 기다리지 않고 비동기 요청이 가능한 AJAX기술을 적용하였다.

Table 4는 해양오염대응정보시스템의 전자정부 프레임워크 기술 적용여부를 확인한 결과이다.

Table 4. The check result of eGovframework

3.1.2 사용자 인터페이스 설계

 해양오염대응정보시스템은 해양오염방제작업에 참여하는 자원봉사자 등 대민 서비스를 위한 시스템이다. 대민 서비스용 시스템의 사용자 인터페이스는 다양한 브라우저에서 본래 제공하려고 하는 컨텐츠의 깨짐 및 오작동이 발생할 수 있으므로 다양한 사용자 환경에서도 서비스를 이용할 수 있도록 전자정부 표준프레임워크 2.0을 기반으로 채택된 HTML5를 활용하여 개발하였다. 또한 작은 스크린에 적합한 콘텐츠로 개발되는 만큼 특정 해상도에 최적화된 사이트 디자인은 지양하고 스크린 및 구성요소 크기는 CSS를 사용하여 지정하였으며, 수평스크롤 기능은 사용하지 않도록 설계하였다.

3.2 시스템 구성

 본 시스템은 사용자측면에서는 사용자가 앱에 접근해서 사용하는 구조로 간단하게 구성되어 있으나 개발자의 측면에서는 크게 모바일앱, 모바일웹 그리고 관리자 모드의 3가지 모드로 개발하였으며 그 구성도는 Fig. 3에서 보는 바와 같다.

Fig. 3. Structure diagram of MAMIS.

Table 5과 같이 9개의 메뉴 중 용량이 크거나 타 시스템과 연동되어 정보가 실시간으로 변하는 것은 모바일웹 방식으로 구축하였으며, 나머지는 모바일앱 방식으로 구축하였다. 모바일 기기의 제한된 환경을 고려하여, Fig 4와 같이 텍스트가 긴 화면은 화면 펼침 및 접힘과 스크롤 등의 기능을 적용함으로써 사용자 편의성을 높이고 가독성을 향상시켰다. 한편, 주요 메뉴는 화면 하단에 배치하여 같은 레벨의 메뉴로 빠르게 페이지 이동할 수 있도록 함으로써 전단계로 돌아가거나 아니면 처음 화면으로 돌아가서 원하는 페이지로 이동해야하는 번거로움이 없도록 하였고 한 메뉴 안에서는 홈버튼과 전단계로 돌아가기 버튼을 배치하여 사용자가 언제든지 다른 메뉴 또는 레벨로 이동하는 것이 쉽도록 하였다. 

Table 5. Menu of Mobile App and Mobile Web

Fig. 4. Applied example of folder and scroll method.

3.2.1 앱 구성 메뉴

 모바일앱으로 구축된 메뉴는 기름 및 위험유해물질에 대한 물질정보와 방제기술, QR code 스캐너, 사고대응자별 행동지침과 자원봉사자용 애니메이션이다. 물질정보에는 25종의 기름과 153종의 위험유해물질에 대한 기본적인 물성과 독성 그리고 환경영향 등에 관한 정보 등을 수록하고 있으며, 방제기술에는 해상과 해안에서 적용할 수 있는 각종 방제방법에 대한 설명과 현장안전에 관한 내용을 포함하고 있다. 사고대응자별 행동지침에는 사고신고자 및 접수자, 현장대응자 등이 취해야할 내용으로 구성되어 있으며 자원봉사자용 애니메이션은 방제작업 시 주의, 안전사항과 구체적인 방제방법을 쉽게 이해할 수 있도록 동영상으로 제작하였다. 해양경찰청에서 보유하고 있는 각종 방제장비 및 자재에는 QR code를 부착하여 관리하고 있으며, 사고현장에서 QR code 스캐너를 이용하면 이들 장비 및 자재의 사용방법 설명서나 동영상을 바로 확인할 수 있다.

3.2.2 웹 구성 메뉴

 웹 메뉴에서 작동되는 기능은 타기관에서 제공하는 정보와 연계되는 조석정보, SNS이다. 이 중 해상에서의 날씨와 조석정보는 방제작업환경에 큰 영향을 주는 중요인자로 이러한 정보를 생산하는 기관에서는 이미 모바일용 웹으로 구축하여 수시로 정보를 제공하고 있어 해양오염대응정보시스템에서는 사용자의 편의성을 고려하여 다시 해당 웹으로 찾아가지 않더라고 바로 이용할 수 있도록 국립해양조사원에서 제공하는 조석정보, 연안정보 및 바다갈라짐 정보를 본 시스템과 연동시켰다. 또한, 지난 허베이스피리트호 방제작업과정에서서 자원봉사자들에게 충분한 정보를 제공하지 못해 발생한 문제점을 해결하기 위한 한가지 방편으로 서로 습득한 각종 정보와 경험을 신속하게 전파․공유할 수 있도록 블로그, 페이스북, 미투데이, 트위터 등 4개의 SNS를 바로 이용할 수 있도록 연계시켰다.

 이외에도 본 시스템에서 타 기관의 정보와 연동되는 것을 제외하고 하이브리드앱으로 구축된 항목은 저장용량을 많이 차지하는 방제장비 및 자재와 관련된 것들이다. 이는 새로 개발된 방제장비 및 자재를 신규로 등록하고 장비 사용법 등을 지속적으로 수정·보완 할 수 있도록 한 것이다.

4. 해양오염대응정보시스템의 구현

 이상과 같은 Android 및 iOS 운영체제에서 개발한 해양오염대응정보시스템은 각각 ‘Playstore’와 ‘Appstore’에서 무료로 다운로드할 수 있다.

 해양오염대응정보시스템을 구현한 메인 화면은 Fig. 5와 같으며 앱이 실행되는 화면순서는 왼쪽의 인트로 화면이 2~3초간 나온 후 자동적으로 우측의 메인 화면으로 이동하게 된다.

Fig. 5. Intro(left) and main menu(right) scenes.

4.1 모바일앱 인터페이스 구현

모바일앱 인터페이스에서 구현 가능한 기름 및 위험유해물질에 대한 “물질정보” 메뉴를 실행시켜 찾고자하는 물질을 선택하면 해당물질에 대한 물리화학적 특성과 건강정보 등의 정보를 확인할 수 있으며 스크롤바 기능도 탑재되어 있다. “방제방법” 메뉴에서는 유흡착재 사용과 같은 해상에서 이루어지는 해상방제방법에 대한 설명과 해안의 형태에 따른 방제방법을 다룬 해안방제방법, 위험유해물질 사고의 특성과 물질 유형별 대응기술을 다룬 위험유해물질의 방제 그리고 방제작업시에 주의해야할 사항을 기술한 현장안전, 이렇게 4개의 세부 정보가 수록되어 있으며 기술된 내용이 화면에 모두 보이지 않으므로 하이퍼텍스트 기능을 이용하였다. “대응지침” 메뉴에서는 사고발생 및 대응과정에 종사하는 신고자 및 접수자, 현장근무자, 자원봉사자 등이 조치해야하는 내용을 간략하게 수록하고 있다. 또한 “자원봉사” 메뉴를 선택하게 되면 해안에서의 방제방법과 안전수칙을 다룬 동영상이 2개 있고 방제작업 시 필요한 개인보호장구에 대한 설명이 포함되어 있다. Fig. 6은 “물질정보”와 “자원봉사” 메뉴를 실행하였을 때 보여주는 옥텐의 물질정보와 자원봉사자용 애니메이션에 대한 실행화면이다.

Fig. 6. Mobile App scenes of substance information and animation for volunteer.

4.2 모바일웹 인터페이스 구현

 웹 기술을 접목하여 하이브리드앱 인터페이스에서 구현되는 조석정보와 SNS의 접속 화면을 Fig. 7에 나타냈다.

Fig. 7. Linkage scenes of tidal information and SNS.

 “기상정보” 메뉴에서는 국립해양조사원에서 제공하는 지역별 날짜별 조석예보를 알려주는 조석정보, 현재의 수위와 수온, 풍향, 풍속 등의 정보를 알려주는 연안정보, 그리고 무창포, 진도 등 12개 지역에 대하여 모세의 기적으로 일컫는 바다갈라짐 정보를 이용할 수 있다. “SNS” 메뉴에서는 포털사이트 네이버에서 제공하는 블로그와 미투데이 그리고 전세계적으로 많이 사용하고 있는 트위터와 페이스북에 해양오염방제작업에 필요한 각종 정보를 등재하였으며 회원가입없이 정보를 이용할 수 있고 회원으로 한번 가입하면 접속할 때마다 별도의 로그인 필요 없이 자신의 경험과 정보를 고유할 수 있다.

“대응장비” 메뉴에서는 크게 방제장비와 HNS 사고대응장비로 구분되며 방제장비에는 스크류 유회수기 등 유회수기의 종류와 특성을 사진과 함께 설명하고 HNS 사고대응장비에는 공기호흡기 등 장비에 대한 사용방법을 동영상으로 제작․수록하였으며 스마트폰을 이용하여 접속한 화면을 Fig. 8에 나타냈다. 

Fig. 8. Linkage scenes of response equipments.

이외에도 유흡착재, 유처리제 등 방제작업시 사용되는 자재에 대한 사진과 사용방법을 포함하는 “방제자재” 메뉴와 각각의 해양오염방제장비 및 자재에 부착되어 있는 QR code를 인식하여 즉시 해당정보를 손쉽게 습득할 수 있도록“QR스캔”메뉴도 웹 환경으로 구현된다. 

4.3 관리자 모드 구현

 해양오염대응정보시스템은 지속적인 관리 필요성이 있거나 추가, 수정, 보완해야 하는 정보를 웹으로 구축한 만큼 별도의 관리자 모드를 필요로 하며 사용자의 접근 실적을 이용하여 콘텐츠별 사용실적과 메뉴별 사용실적에 대한 통계관리하는 기능을 갖추고 있다. 관리자 모드로 로그인하기 위한 화면과 관리자모드에서만 보여주는 통계관리 화면은 Fig. 9와 같다.

Fig. 9. Manager login Scene and screen of statistics management.

또한, 신규로 등록되는 방제장비 또는 자재를 별도의 QR 코드로 관리할 경우를 고려하여 QR 코드도 신규로 등록하거나 수정할 수 있도록 하여 확장성을 확보하였으며 관리자 모드로 접속한 방제장비 및 자재의 신규 등록화면과 검색화면은 Fig. 10과 같다. 

Fig. 10. Registration and search menu scenes of response equipments and materials.

5. 결 론

 2012년 8월 기준, 대한민국정부포털 등록 공공앱은 모바일앱 410개, 모바일웹 329개이나 낮은 시장성과 활용성 및 특정업무 수행자에게 필요한 정보의 제한성 등으로 인하여 해양오염사고 대응에 필요한 각종 정보를 어플리케이션으로 개발하여 제공한 사례가 없었다. 이제야 본 시스템 개발로 대규모 해양오염사고 발생 시 현장에 찾아오는 수많은 사람들을 대상으로 보다 손쉽게 교육을 실시할 수 있으며, 페이스북이나 트위터와 같은 소셜네트워크(SNS)를 이용하여 짧은 시간에 많은 사람과 정보를 공유할 수 있는 체제를 마련하였다.

그러나 이 시스템이 성공적인 앱/웹으로 발전하려면 두개의 관문을 통과해야 한다. 그 첫번째는 사용자가 본인의 모바일 기기에 설치하게 만들어야 한다는 것이다. 대부분의 사람들이 이러한 앱이 있는지 조차 모르고 있어 우선 내부직원에 대한 교육을 실시하고 관계기관에 전파하여 이들이 사고 발생시 자원봉사자 등 국민을 대상으로 교육하고 홍보하여 활용할 수 있도록 하여야 할 것이다. 두 번째는 어떠한 경로로든 사용자가 설치했다 하더라도 꾸준히 사용해야 한다는 것이다. 미국 Flurry Analytics의 조사결과에서도 밝혔듯이 앱 설치 이후 62 %가 1개월을 버티지 못하는 현실에서 사고 발생시에만 사용하는 본 시스템을 지속적으로 활용한다는 것은 매우 어려운 일이다. 

인터넷의 급속한 확산과 웹 2.0/3.0의 진화 그리고 무선통신 인프라 구축과 스마트폰, 테블릿 PC와 같은 모바일 인터넷 기기의 확산으로 모바일 앱이나 웹 환경을 기반으로 하는 모바일 환경은 더 급속히 전개되고(Lee and Han, 2012) 있고 국민들은 이러한 환경에서 더 많은 분야의 모바일 서비스를 제공하기를 원하고 있기 때문에 본 시스템도 향후 지속적인 콘텐츠 품질과 사용자 편의성을 고려한 활용도 높은 서비스로 발전해 나가야 할 것이다. 

Reference

1.Jin, H. F.(2011), A case study on Mobile SNS based on Smartphone : Focusing on KakaoTalk, Graduate school, Hallym University, pp. 10-15.
2. Kim, T. D. and B. K. Lee(2012), Mobile Interactive Broadcasting Learning Solution Study on Development of Education, Journal of Korean Society for Internet Information, Vol. 13, No. 1, pp. 57-63.
3. Lee, M. H. and J. S. Han(2012), Design and Implementation of JPetStore Oder System Based Mobile WebApp Office, The Journal of Digital Policy and Management, Vol. 10, No. 3, pp. 149-154.
4. MLTM, KCG and Chuncheongnam-do(2008), The White Paper on the Hebei Spirit oil spill accident response activity, pp. 251-261.
5. MOPAS(2008), Voluntary work White Paper on the Hebei Spirit oil spill accident response activity, pp. 107-108.
6. Oh, H. Y.(2011), Implementation of Mobile Web Interface Design for Smart-Phone Users, Journal of the Korea contents Association, Vol. 11, No. 12, pp. 639-648.