Journal of the Korea Institute of Information and Communication Engineering 김호진 1 김창수 2* Design and Implementation of Job Training Management System by Considering Multi-Devices Ho-jin Kim 1 Chang-soo Kim 2* 1 Dept, of IT Convergence and Application Engineering, Pukyong National University, Busan 608-737, Korea 2* Dept, of IT Convergence and Application Engineering, Pukyong National University, Busan 608-737, Korea 요약 최근웹에접근할수있는다양한기기들의출현은웹개발분야에많은기술적변화를가져왔다. 그러나아직도일부웹사이트들은여전히 PC 중심으로운영되고있고, 특히직업훈련관리시스템은폐쇄적이고지원부족으로 PC 만을타깃으로한사용자웹인터페이스를제공하고있다. 본논문에서는직업훈련관리시스템을대상으로다양한디바이스에서적용할수있는기술과메뉴구성으로훈련생들이보다쉽게접근할수있는적용기술을제시하고, 구현된시스템을실제현장에서적용하여효율성을검증하였다. ABSTRACT Recently, the emergence of a variety of devices to be able to access web have brought many technological changes in the field of web development. However some web sites are still operating with a focus on computers, especially exclusive and slow developing job training related web sites which utilize a User Interface that targets only PCs. In this paper, we propose the job training management system which has a menu configuration and functions to be applied to a variety of devices, and also an applicable technologies for training students to access more easily. Finally, we evaluated its efficiency by applying the implemented system in the actual field. 키워드 : 웹 / 앱, 직업훈련, 멀티디바이스, 사용자웹인터페이스, 현장적용결과 Key word : Job-training, Multi-device, Results of field application, User web interface, Web/App 접수일자 : 2014. 01. 07 심사완료일자 : 2014. 02. 04 게재확정일자 : 2014. 02. 14 * Corresponding Author Chang-soo Kim(Email:cskim@pknu.ac.kr, Tel:+82-51-629-6245) Dept, of IT Convergence and Application Engineering, Pukyong National University, Busan 608-737, Korea Open Access http://dx.doi.org/10.6109/jkiice.2014.18.4.934 print ISSN: 2234-4772 online ISSN: 2288-4165 This is an Open Access article distributed under the terms of the Creative Commons Attribution Non-Commercial License(http://creativecommons.org/li-censes/ by-nc/3.0/) which permits unrestricted non-commercial use, distribution, and reproduction in any medium, provided the original work is properly cited. Copyright C The Korea Institute of Information and Communication Engineering.
Ⅰ. 서론 2000년대초반까지만해도웹에대한접근은주로정해진특정위치에서지정된컴퓨터를통해서접근이이루어졌다. 또한사용된웹브라우저들도몇개가시장점유율의대부분을차지하고있었다. 이런상황에서웹개발자들은웹표준화에대한필요성이나다양한디바이스를고려하지않은웹사이트를구축하고, 특정웹브라우저들에서만적용되도록구현하는것이관례였다. 또한웹브라우저개발사들은자사의필요와관점에의해 HTML 확장기술을제각기다른방법으로발전시키고적용하였으며, 이는웹개발의단편화를초래하였다. 그결과웹개발자들은웹사이트구축시각기다른기술때문에개발단계에서의혼란과웹브라우저별특성화개발이라는어려움에직면하게되었다. 특히국내 IT 환경에서는 ActiveX 등의무분별한사용으로웹환경이특정회사의웹브라우저에의해종속되어웹표준화에많은어려움을겪고있었다 [1]. 그러나현재의상황은웹접근이가능한다양한디바이스들의출현으로특정디바이스에만운용될수있는앱 (App) 의형태가아니라다양한디바이스의웹브라우저에서구동되는 N-스크린의형태에맞도록개발하고운영해야하는것이필수가되었다. 이에대한대응으로웹표준화기구인 W3C(WWW Consortium; www.w3c.or.kr) 가여러가지관련기술들을선도적으로개발하여제공하고있으며, 일부기술들은이미사용되고있다. 하지만아직까지는기술개발이진행중이라정확하게 W3C가제정한웹표준안을모두표현할수있고충족시킬수있는웹브라우저는현재제공되지않는것이현실이다. 이런상황에서특정한분야에해당하는직업훈련관리시스템은여러가지원인이있지만웹표준과 N-스크린관련기술들이적용된앱개발은초보상태에있다. 그러나직업훈련관리시스템구축을위해웹표준과 N-스크린관련기술들을도입하여다양한디바이스에서의사용이가능해지면이동성과편의성을중심으로그시너지효과는직업훈련관리시스템의운용과성과에있어서큰변화의포인트가될것으로예상된다. 본논문에서는이러한상황을고려하여이전에개발된직업훈련관리시스템에웹표준을적용하기위해 HTML5, CSS3, Media Query, jquery 등의관련기술을 적용하는연구를진행하였으며, 이전의레거시 (legacy) 직업훈련관리시스템에스마트폰, 태블릿, IP TV 등의장비를사용하여이동성을부여하고, 기존의메뉴를새롭게모바일환경에맞도록체계화하여디바이스비의존형웹으로의접근성과기능성을부여하여직업훈련관리시스템의효율성을높이는연구를진행하였다. Ⅱ. 본론 2.1. HTML5 / CSS3 HTML5는텍스트형식으로표현하던 HTML의기본에, 다양한멀티미디어콘텐츠와애플리케이션을웹브라우저에표현하고실행하기위해이전 ActiveX, Flash, Media Player 등의기능들을별도의플러그인없이구현할수있어데스크톱 PC, 스마트폰, 태블릿, IP TV 등의디바이스종류에상관없이제작이가능한범용표준개발언어로정의할수있다. 이전버전에비해가장큰특징은웹페이지의구조를작성하는태그들이추가되어, 다양하게개발되던직업훈련관리시스템에태그가표준화됨으로써기존에구성했던웹사이트의구조가더욱명확해지게되었다. 또한콘텐츠개발자도별도의플러그인설치나장소의제한없이웹브라우저를통해콘텐츠를수정가능하게되었다 [2]. 직업훈련시스템은앞에서도설명하였듯이관리의효율성은물론훈련생들이쉽게접근하고활용할수있는기능들이필요하다. 이러한관점에서 CSS (Cascading Style Sheet) 는마치워드프로세스에스타일을적용해쓰는것처럼웹에서도스타일로변경하여용이하게적용할수있는기능을제공한다. W3C는 HTML 과 CSS 표준에따라명확하고확장성이좋은마크업 (markup) 을위하여 CSS의표준사용을권장하고있다 [3]. 그리고 CSS3(Cascading Style Sheet 3) 는 CSS1과 CSS2의문법을전부포함하고이전의 CSS가갖지못했던화려하고역동적인내용들을추가하여포토샵, 자바스크립트및서버기술에만의존하던기능들의일부를가지도록하였다. 또한그래픽디자인이미지처리에의존하던작업들이 CSS3 만으로도상당부분처리가능해지면서웹사이트의성능향상에도크게기여할수있게되었다. 935
2.2. Media Query 웹사용에데스크톱 PC, 스마트폰, 태블릿, IP TV 등의다양한디바이스가존재하는현재의상황에서 UI(User Interface) 의통일성을해결할방법으로반응형 (responsive) 웹이라는개념이적용되고있다. 이것의목적은다양한환경에서사용자들이하나의웹을사용할수있게하는데있다. 반응형웹을사용하기위해서는레이아웃 (layout) 을 CSS로제작하고, 이를디바이스마다선택적으로적용해야하는데이때사용되어지는것이웹표준의핵심기술중하나인미디어쿼리 (Media Query) 이다 [4]. 현재미디어쿼리는 Internet Explorer 9/10( 마이크로소프트 ), Chrome( 구글 ), Safari ( 애플 ), Firefox( 모질라 ), Opera( 오페라소프트웨어 ) 등의모든최신웹브라우저에서사용될수있는기술로, 표 1은미디어쿼리의적용사례를나타낸것이다. 을통해직업학교내부에서만사용가능한폐쇄적인관리시스템으로운영되고있다. 이는직업학교에서회원 DB의비중이존립과관련되는중요한보안사항이기때문이다. 또한최근까지관리시스템업그레이드의중요성을낮게평가한직업훈련기관들의저조한투자로최근몇년간직업훈련관리시스템은별다른발전을하지못하고답보상태에머물러있다. 이런상황에서웹표준을적용한관리시스템의개발투자등은거의전무하며그림 1에서일부예를든것과같이메뉴나열식의일반적인데스크톱수준에서의구현과적용이전부인것이현실이다. 표 1. Media Query 적용사례 Table. 1 Cases of application - Media Query 사이트명서울시청현대자동차기업문화홍보 Media Query 사이트목록반응형웹사례연구 URL http://www.seoul.go.kr/ http://pr.hyundai.com/ http://mediaqueri.es/ http://blog.naver.com/chjoa 2.3. 직업훈련관리시스템직업훈련의정의를표준국어대사전에서살펴보면 직업을구하는사람에게직업상필요한기능을습득시키는일 이라고기술하고있다. 또한직업훈련연구소가언급한것처럼 1939년국제노동기구 (ILO) 가정의한바에따르면 직업훈련이란기술적이거나직업적인지식을습득하거나향상시킬수있는모든훈련방법을말하는것으로서이훈련을학교에서행하든작업장에서행하든상관없다. 고정의하고있다. 정규교육과그의미를달리하는직업훈련의중요성은날로증대되고있으며최근들어고용보험법, 근로자직업능력개발법, 국가기간 전략산업직종훈련실시규정등의관련법령제정및정비를통해발전을거듭하고있다 [5]. 현대사회의빠른기술의변화와직업에서의새로운환경의출현은다양하게세분화된직업훈련으로빠르게진화되고있다. 현재운영되고있는직업훈련관리시스템은각직업학교마다의독자개발 그림 1. 기존직업훈련관리시스템 Fig. 1 Example of Job Training System (Legacy System) Ⅲ. 직업훈련관리시스템설계및구현 3.1. 직업훈련관리시스템설계본논문에서제안된직업훈련관리시스템은다양한디바이스에서통일성있는인터페이스를통해운영할수있는방안을고려한것이다. 또한관리시스템의역할을위해훈련교사와행정직원들에게실시간피드백과모니터링을제공하고, 모바일디바이스에서도편리하게사용될수있도록메뉴를구성하여훈련운영에도움을줄수있는방법을제시한다. 그리고훈련생상호간에도다양한디바이스를통해서상호정보제공이이루어지고이를통해대화와교류의장을만들수있도록편리한입력과조회가가능하도록인터페이스를개편하여이동성과접근성이부여되도록하는것이필요하다. 936
3.2. 제안시스템의적용기술본절에서는다양한멀티미디어콘텐츠와앱을웹브라우저에표현하기위해필요한주요적용기술들을설명하고, 이를기반으로전체시스템을구성하고있다. 가.HTML5의입력유형 (input type) 에도입된 number, range, tel, email, date 등의속성값 (attribute value) 을모바일장비사용시입력편의를위해입력관련부분마다세분화하여구성하였다 [6]. 나. 글꼴은아이패드등의애플관련디바이스를통일감있게지원하기위해 NHN사의공개글꼴인나눔고딕을 TTF 형식의웹글꼴로링크하였으며, IE8 이하버전의빠른처리를위해서는 EOT(embedded open type) 컨버터를이용하여 EOT 파일포맷으로변환하여링크하였으며, IE9 이상을위해서는 WOFF (Web Open Font Format) 파일을링크하였다 [7]. 다. 디바이스들의다양한화면크기를제어하기위하여미디어쿼리를사용하였다. link 태그의 media 속성의속성값을 PC 1600px, 태블릿 1000px, 스마트폰 480px 로제한하고 href 태그를이용하여각자의화면크기에따라질의하고각각의 CSS 파일로링크하였다. 라. 메뉴는다양한디바이스에서의동적움직임이가능하도록 Flash 메뉴를배제하고 jquery의엘리먼트선택기능 (jquery Selectors) 을이용한 s3slider를적용하였다 [8]. 마. 인터넷익스플로러등에서나타나는하위브라우저와의호환성문제는구글 (Google) 사의 IE9.js, ie7- squish.js, html5.js의자바스크립트를관리시스템에링크시켜해결하였다 [9]. 바. 향후제안시스템을시맨틱 (semantic) 하게만들수있도록 <header>, <footer>, <nav>, <article>, <section>, <aside>, <hgroup> 등의시맨틱마크업 (Semantic Markup) 을사용하여문서구조의의미나문서에삽입된데이터의의미등을명확히표현하였다. 이는이후특정모듈을특정디바이스의앱 (App) 으로개발시정보전달이가능하도록하려는것이다 [10]. 3.3 제안된시스템의메뉴구성직업훈련의체계는정부의정책방향에따라계속적으로변화해왔다. 그러나이를위한기존시스템의메뉴는 PC 기반만충족하면되었기때문에주로추가를통해나열식으로이루어지는과정이진행되었다. 그러나본연구에서제안된시스템의메뉴구성도는표 2와같이직업능력개발시설에서행해지는국가사업을중심으로메뉴를재구성하였으며, 이는고용노동부의개편된직업훈련사이트인 HRD-Net의메뉴흐름을벤치마킹하여유사하게작성하였다. 그리고직업학교내부에서의태블릿이나스마트폰등의모바일디바이스를통한접근을염두에두고터치스크린등의메뉴의순서를재구성하였다 [11]. 표 2. 제안된시스템의메뉴 Table. 2 Main Menu (proposed) 메뉴내용 직원관리 입학관리 운영관리 사후관리 훈련교사와행정직원으로이원화함 ( 전체현황관리대시보드 ) 이력, 입 / 퇴사처리, 증명서처리근태관리 : 출퇴근, 연차관리 훈련종류별관리 : 내일배움카드제, 국가기간 전략사업, 재직자, 일반인훈련생모집관리 : 직종별세부처리 담임별업무관리 : 단과반형, 종합반형훈련생출결관리 : 국비지원, 자비과정 (HRD-Net View 형태유지 ) 훈련생상담관리, 이력관리 취업현황관리 : 대시보드형태, 기수별관리, 과정별관리취업처관리 : 기존 / 신규업체메뉴, 업체검색, 협약서관리, 업체메일링 3.4. N-스크린기반의서비스구현본연구에서는앞에서도설명하였듯이특정디바이스앱에종속된형태가아닌다양한디바이스환경에서도적용이가능한서비스구현에목적이있다. 이를위해제안된관리시스템의디바이스구현은그림 2와같이퀵메뉴 (Quick Menu; Sticky) 까지보이도록 PC 화면에서의직업훈련관리시스템을구축하였으며, PC 화면과그차이가많이없는태블릿에서는그림 2에서퀵메뉴를제외한나머지요소들로화면이전체구성되도록하였다. 937
Ⅳ. 제안된시스템의효과분석 그림 2. PC 화면에서의직업훈련관리시스템 Fig. 2 Job Training System (PC) 또한스마트폰화면에서는그림 3과같이미디어쿼리를통해동적으로 CSS를재구성하여메뉴와서브메뉴를상단으로배치되도록하였으며, 그결과는비슷하지만다른다양한모바일브랜드들의터치스크린에서통일감있는인터페이스구현과접근이가능하도록하였다. 또한작은화면의단점을극복하도록 jquery 기반의 s3slider를적용하여동적인메뉴들을구현함으로플래시의제약없이동적인슬라이더로편리한메뉴의선택이가능하도록하였다 [12]. 4.1. 상담횟수와상담장소의변화본제안시스템의효율성을검정하기위해구현된시스템을현재저자가재직하고있는직업학교에적용하여실제직업훈련관련자들을대상으로효과를분석하였다. 제안된시스템은훈련교사별로 DB의접속기록, 접속장비, 상담게시글분석등을통해이루어졌다. 기존시스템에서상담을실시할때는훈련교사 1명당월평균 17회의상담을지정된 PC에서만입력하던것을, 제안된시스템을적용하여테스트해본결과그림 4와같이상담내용입력이다양한디바이스로분산되어이동성의효과를보여주고있으며, 이러한이동성의효과는자연스럽게상담횟수의증가로도이어져훈련교사 1명당전년동월대비월평균 28회로 60.7% 증가한상담결과를보여주고있다. 그림 4. 상담횟수와장소 Fig. 4 The number of times - counseling 그림 3. 모바일화면에서의직업훈련관리시스템 Fig. 3 Job Training System (Mobile) 4.2. 학생피드백의현저한증가제안된시스템이직업훈련에관여하고있는훈련생, 훈련교사, 관리자들의소통에어떤영향을미쳤는지에대한조사를진행하였다. 분기별로로그인아이디를분류별로검색하여커뮤니티에올린게시글의개수를정리하고전년동기와비교하였다. 그림 5을살펴보면이전시스템에서는강사부즉, 훈련교사들이훈련생공지나학습에관련된내용을위해커뮤니티를많이사용하였으나, 제안된시스템은훈련생들이스마트폰을통해서도편리하게커뮤니티를사용할수있는환경을제공하도록웹표준을적용하여구성함으로, 훈련생의커뮤 938
니티사용이증가하고활성화되어결론적으로훈련생의점유율이상승하는결과가나타났다. 이는매월말에시행하는학생들의강의평가서의요소인 하고싶은말 항목의의견에서검증가능하였다. 을적용한관리및효율성에초점을맞추어연구되었기때문에다른기존연구혹은활용성부분에있어서다른관리시스템과의비교분석은추가연구과제로남겨두었다. 본연구의결론으로는다양한디바이스를대상으로시스템을개발할때웹표준방법을이용하여웹앱 (WebApp) 패키징개발을고려하는것이필요하다. REFERENCES 그림 5. 게시글점유율변화추이 Fig. 5 Share of bulletin board message Ⅴ. 결론 얼마전까지다양한디바이스를통한웹접근은웹개발자들에게표준화된웹을개발하는데많은어려움을초래하는것이현실이었다. 이러한문제를해결하기위해최근에는웹표준관련기술로다양성을해결할수있는기술들이제공되고있다. 본논문에서는이러한기술들을직업훈련관리시스템을대상으로웹표준기술을적용하여이동성과편의성을높이는방법을제시하고있다. 이를위해본연구에서는멀티미디어콘텐츠와앱을다양한디바이스에서적용하기위해 HTML5, EOT 파일포맷, WOFF파일링크, CSS 파일링크, jquery를이용한 s3slider 적용, 시맨틱마크업기술들을사용하였다 [13]. 그리고직업학교내부에서의모바일디바이스를통한접근을고려한메뉴순서를재구성하였으며, N-스크린기반의서비스를위해퀵메뉴및 jquery 기반의 s3slider를적용하여동적인슬라이더로편리한메뉴선택이가능하도록구현하였다. 또한본연구에서구현된시스템에대해현업에적용하여그효과를분석하였다. 기존시스템보다는제안된시스템이훈련교사의활용도측면에서 60.7% 효율성향상이이루어졌고, 직업학교내에서훈련생들의스마트폰활용도를높아졌음을확인할수있었다. 다만, 본연구의관점인직업훈련관리웹시스템을대상으로최근기술 [ 1 ] S. Y. Park and J. S. Moon, The Study on the Security Model for ActiveX Control Management through Security Authentication, Journal of the Korean Institute of Information Scientists and Engineers, vol. 19, no. 6, pp. 46-49, Dec. 2009. [ 2 ] Y. D. Kim, Implementation of E-Training Contents Authoring System based on HTML5, Journal of the Korea Institute of Information and Communication Engineering, vol.17, no. 6, pp. 1509-1514, Jun. 2013. [ 3 ] C. Y. Lee, The Next Generation of Web Standards HTML5, Journal of the Animation Society of Korea, vol. 8, no. 2, pp. 20-38, Jun. 2012. [ 4 ] H. J. Kim, A Study on the N-Screen System based on Web Standards, in Proceedings of the Korea Multimedia Society Conference, vol. 15, no. 2, pp. 55-59, 2012. [ 5 ] N. G. Jeung, Eine Studie über koreanisches bzw. deutsches Berufsbildungs system, Zeitschrift der Koreanisch- Deutschen Gesellschaft Für Sozialwissenschaften, vol. 22, no. 2, pp. 3-26, 2012. [ 6 ] WWW Consortium, HTML 5, Available: http://www.w3. org/tr/html5/. [ 7 ] Kirsle, EOT Converter, Available: http://www.kirsle.net/ wizards/ttf2eot.cgi/. [8] H. R. Kim, S. Y. Kang, H. T. Jeung, and S. H. Han, Implementation of medicinal plant information system using Ajax and jquery, Journal of the Korea Institute of Information and Communication Engineering, vol. 14, no. 7, pp. 1626-1633, Jul. 2010. [ 9 ] Google Project, JavaScript library, Available: http://code. google.com/p/ie7-js/source/browse/version/2.0(beta3)/ie7-s quish.js?r=26. [10] Y. S. Yang, Everything of HTML5&CSS3 Website Making, in RoadBook, pp. 45-57, 2012. 939
[11] HrdNet, Job Training Menu, Available: http://www.hrd. go.kr/. [12] Serie3, s3slider, Available: http://www.serie3.info/s3slider/ [13] Online Font Converter, Online Font Converter API, Available: http://onlinefontconverter.com/ 김호진 (Ho-Jin Kim) 2013 년 ~ 현재 : 부경대 IT 융합응용공학박사과정 2011 년 ~ 현재아이티윌부산교육센터원장 2001 년 ~ 2010 서울유니에듀기술팀장 관심분야 : 직업훈련, 인적자원관리, ERP, Web/App 김창수 (Chang-Soo Kim) 1991 년중앙대학교컴퓨터공학과공학박사 2006 년 ~ 현재유비쿼터스부산도시협회부회장 2006 년 ~ 현재 ( 사 ) 그레고리장학회이사 2013 년 ~ 현재한국정보통신학회이사 1992 년 ~ 현재부경대학교 IT 융합응용공학과교수 관심분야 : 운영체제, 방재 IT, 지리정보, 도시방재, u- 헬스, 바이오엔지니어링, 지식재산등 940