선택한 단어 수는 입니다.
최소 단어 이상 선택하여야 합니다.
최소 단어 이상 선택하여야 합니다.
선택한 단어 수는 30입니다.
최대 10 단어까지만 선택 가능합니다.
최대 10 단어까지만 선택 가능합니다.
문제 정의
- 줄어드는 입학자원의 안정적 확보를 위해 대학들은 재학생, 동문이나 인근 지역민은 물론 예비 신입생을 대상으로 한 모바일 컨텐츠 확보가 매우 중요하게 되었다. 따라서 본 연구에서는 HTML5를 이용한 대학의 웹 애플이케이션 개발을 방안을 제시하고 그 일부의 구현사례를 소개하고자 한다.
- 부산지역의 2년제 사립대학의 신규 웹사이트 개발프 로젝트에서 HTML5을 도입한 과정과 결과물을 소개하 였다. 대학의 웹사이트를 모바일환경으로 구현하는 것 이 주는 의미는 상당하다.
제안 방법
- HTML5기반하여 대학 모바일 웹사이트의 구축에 프로젝트 수행의 필요성과 구현과정 그리고 구현이후의 효과를 제시하였다. 본 연구를 통해 실무와 학문측면에서 HTML5의 가능성을 확인할 수 있었지만 한계점도 있다.
- 설계단계는 [그림 6]과 같이 요구사항을 컴퓨터 시스템의 구현 관점에서 어떻게 해결할 것인가를 결정하고 시스템 내의 단위 시스템간 세부작업설계 및 자료 연동 체계를 포함하였다. 구현단계는 [그림 7]과 같이 설계 명세를 바탕으로 프로그램을 원시코드로 구현하는데 연동방 안에 따른 구축 및 커스터마이징을 수행하였다. 테스트 단계에서는 [그림 8]과 같이 시스템에 대한 모든 요구사 항과 분석, 설계 명세서의 내용들이 시스템에 정확히 반 영되고 기능들이 정상적으로 수행 되는지를 시스템 개 발자 측면에서 검증하였다.
- [그림 12]에서와 같이 여러 웹 브라우저에서 동일하게 깨지는 서비스 영역없이 완벽한 서비스를 제공하였다. 단말기 를 가로 혹은 세로로 바꾸었을 때 자동으로 최적의 화면 비율로 재구성해서 서비스하였다. 동영상의 재생화면에 서도 동일하였다.
- 단말기의 앱 스토어에서 크롬, 사파리, 파이어 폭스 웹 브라우저를 다운로드 받아 설치 후 버전 업그레이드 를 하였다. 그런 다음 모바일 웹으로 접속하였다.
- [그림 13] 웹폼구현 화면 HTML5는 브라우저가 디바이스의 위치정보를 접근 할 수 있는 지오로케이션 기능을 제공하고 있다. 디바이 스의 GPS를 활용하여 위치조회를 통한 구글 지도 매쉬업을 [그림 14]처럼 구현하였다.
- 웹 브라우저는 표준 및 디버깅, 랜더링 등을 위하여 가장 대중적으로 사용되는 크롬, 안드로이드, 사파리, 돌핀과 익스플로어 브라우저를 기반으로 하였다. 또한 사용자 요구에 맞는 지도서비스의 제공을 위하여 HTML5의 지오로케이션과 NHN사에서 제공되는 지도 Open Api를 추가하였다. 전반적인 아키텍처는 <표 4>와 같다.
- 테스트 단계에서는 [그림 8]과 같이 시스템에 대한 모든 요구사 항과 분석, 설계 명세서의 내용들이 시스템에 정확히 반 영되고 기능들이 정상적으로 수행 되는지를 시스템 개 발자 측면에서 검증하였다. 마지막 설치단계에서는 [그 림 9]와 같이 사용자 승인 테스트가 완료된 후에 기존 운영 시스템을 신규 시스템으로 전환하고 시행하고 새 로운 어플리케이션에 대한 사용자들의 교육을 실시하였다.
- 계획단계는 [그림 4]와 같이 프로젝트의 전체를 조감해 보았다. 사용자가 개발 요청한 업무에 대하여 업무정의를 하며 문제점을 추출하고 개선기준을 정하여 상위수준요구사항을 정의하고 상위수준요구사항과 웹 요구사항을 만족시키는 정보시스템 구조를 정의하였다. 요구 분석단계는 [그림 5]와 같이 개발영역에 대해 수행업무 및 현행시스템에 대한 이해와 사용자 요구사항분석을 통한 신규 업무 절차 및 필요 정보를 정의, 기초 서비스를 정의하였다.
- 요구 분석단계는 [그림 5]와 같이 개발영역에 대해 수행업무 및 현행시스템에 대한 이해와 사용자 요구사항분석을 통한 신규 업무 절차 및 필요 정보를 정의, 기초 서비스를 정의하였다. 설계단계는 [그림 6]과 같이 요구사항을 컴퓨터 시스템의 구현 관점에서 어떻게 해결할 것인가를 결정하고 시스템 내의 단위 시스템간 세부작업설계 및 자료 연동 체계를 포함하였다. 구현단계는 [그림 7]과 같이 설계 명세를 바탕으로 프로그램을 원시코드로 구현하는데 연동방 안에 따른 구축 및 커스터마이징을 수행하였다.
- 앞서 사용자들의 요구에서 도출된 요인을 반영하기 위해서 HTML5의 주요 기능 중에서 웹폼과 지오로케이 션을 적용을 확인하였다. 사용자의 입력정보를 받기위 해 사용되는 입력형태를 정의하는 웹폼과 관련하여 HTML4는 정의 가능한 입력형태가 7개정도였으나 HTML5는 전자메일, URL, 숫자, 범위, 달력 등의 12개 로 늘어났다.
- 서버사이드 스크립트 언어인 PHP, MYSQL과 JS스크립트, JQUERY, CSS을 이용하였다. 웹 브라우저는 표준 및 디버깅, 랜더링 등을 위하여 가장 대중적으로 사용되는 크롬, 안드로이드, 사파리, 돌핀과 익스플로어 브라우저를 기반으로 하였다. 또한 사용자 요구에 맞는 지도서비스의 제공을 위하여 HTML5의 지오로케이션과 NHN사에서 제공되는 지도 Open Api를 추가하였다.
- 첫째, HTML5의 모든 기능을 망라하지는 않았다. 전체적으로는 HTML5의 기본정신인 다양한 기기와 운영 체제 그리고 브라우저에서 통일된 서비스를 제공하는 사이트 구축을 완료했지만 HTML5의 9개 주요 기능중 에서 2가지만을 적용하였다. 둘째, 구현효과의 검증에서 현재의 모든 모바일기기와 운영체제를 통해 전수로 확인하지는 못했다.
- 구현단계는 [그림 7]과 같이 설계 명세를 바탕으로 프로그램을 원시코드로 구현하는데 연동방 안에 따른 구축 및 커스터마이징을 수행하였다. 테스트 단계에서는 [그림 8]과 같이 시스템에 대한 모든 요구사 항과 분석, 설계 명세서의 내용들이 시스템에 정확히 반 영되고 기능들이 정상적으로 수행 되는지를 시스템 개 발자 측면에서 검증하였다. 마지막 설치단계에서는 [그 림 9]와 같이 사용자 승인 테스트가 완료된 후에 기존 운영 시스템을 신규 시스템으로 전환하고 시행하고 새 로운 어플리케이션에 대한 사용자들의 교육을 실시하였다.
- 구축방법은 CBD SW개발 표준 산출물 관리 가이드를 선택하였다. 프로젝트 계획, 요구사항 분석, 설계, 구현, 테스트 후 설치의 6단계로 진행하였다. 계획단계는 [그림 4]와 같이 프로젝트의 전체를 조감해 보았다.
- 개발일정은 착수일로부터 2개월이 소요되었다. 학교 요구사항 정리 및 구축범위의 협의, 프로젝트 추진계획 도출, 실무자 미팅을 통하여 1차 시안을 만들었으며 이후 보완과정을 통해 검수 및 개발완료보고를 하였다. 개발 환경은 <표 3>과 같다.
대상 데이터
- 모바일 단말기의 정보는 [그림 10]에서와 같은 안드 로이드계열의 단말기를 이용하였다.
이론/모형
- 구축방법은 CBD SW개발 표준 산출물 관리 가이드를 선택하였다. 프로젝트 계획, 요구사항 분석, 설계, 구현, 테스트 후 설치의 6단계로 진행하였다.
성능/효과
- 사용자 동의가 있으면 단말기의 GPS관련 모듈에 접 근하여 X,Y 좌표를 획득하여 네이버 API에 위치 표시한다. 개발 목표로 하였던 웹폼과 지오로케이션은 원만하게 잘 구현 되었음을 확인하였다.
- 자동양식 제공의 웹폼과 위치기반 지오로케이션도 잘 구현되었다. 구현이후 실질적인 응답시간이 크롬 스피 드 페이지를 이용한 평가결과 85점으로 기존보다 10점 을 상회하였다. 또한 교직원 선생님 48명을 대상으로 한 설문에서 동작속도, 사용편의성, 접속횟수에 대한 만 족도가 5점척도기준으로 모두 4.
- 개발이전에 HTML5에 대한 정확한 이해가 중요하였다. 그리고 한꺼번에 모두 수용하는 것보다는 조금씩 기능을 확장하는 것이 좋은 접근임을 알 수 있었다.
- 본 연구의 시사점은 HTML5기반의 대학 웹사이트 개발에 대한 효과를 직접 증명하는 좋은 계기가 될 수 있었다는 것이다. 또한 대학이 HTML5기반의 웹사이트 개발에서 고려해야 할 요인이 무엇인지도 알 수 있었다.
- 앞서 사용자들의 요구에서 도출된 요인을 반영하기 위해서 HTML5의 주요 기능 중에서 웹폼과 지오로케이 션을 적용을 확인하였다. 사용자의 입력정보를 받기위 해 사용되는 입력형태를 정의하는 웹폼과 관련하여 HTML4는 정의 가능한 입력형태가 7개정도였으나 HTML5는 전자메일, URL, 숫자, 범위, 달력 등의 12개 로 늘어났다. 웹폼은 사용자가 모바일 웹 환경에서 값을 입력할 때 자동으로 적절한 키보드를 보여주는 기능과 입력된 값에 대한 오류도 점검한다.
- 만약 그러한 과정을 수행할 수 있었다면 각 환경별로 응답속도나 화면 구성의 차이를 추가 분석할 수 있다. 셋째, 구축에 대한 효과측정에서 개인적 차이를 고려하지 않았다. 개인적 차이에 따라 HTML5 기반의 모바일 웹사이트에 대한 인식이 달라질 수 있다.
후속연구
- 첫째, HTML5의 모든 기능을 포함 하여 완벽한 모바일 웹 구현을 대상으로 한 연구가 필요 하다. 둘째, 다양한 모바일 단말기와 운영체제를 이용하여 각각의 모바일 브라우저에서 응답속도, 화면 구성 그리고 내비게이션을 대상으로 한 연구가 필요하다. 마지막으로 사용자 대상 평가에서 다양한 설문을 포함하여 개인적 특성에 따른 모바일 웹 만족도 조사가 필요하다.
- 둘째, 다양한 모바일 단말기와 운영체제를 이용하여 각각의 모바일 브라우저에서 응답속도, 화면 구성 그리고 내비게이션을 대상으로 한 연구가 필요하다. 마지막으로 사용자 대상 평가에서 다양한 설문을 포함하여 개인적 특성에 따른 모바일 웹 만족도 조사가 필요하다.
- HTML5기반하여 대학 모바일 웹사이트의 구축에 프로젝트 수행의 필요성과 구현과정 그리고 구현이후의 효과를 제시하였다. 본 연구를 통해 실무와 학문측면에서 HTML5의 가능성을 확인할 수 있었지만 한계점도 있다.
- 한계점을 극복하기 위한 방안으로서 다음과 같은 추가 연구를 제안한다. 첫째, HTML5의 모든 기능을 포함 하여 완벽한 모바일 웹 구현을 대상으로 한 연구가 필요 하다. 둘째, 다양한 모바일 단말기와 운영체제를 이용하여 각각의 모바일 브라우저에서 응답속도, 화면 구성 그리고 내비게이션을 대상으로 한 연구가 필요하다.
※ AI-Helper는 부적절한 답변을 할 수 있습니다.