Journal of the Korea Convergence Society (한국융합학회논문지)

Korea Convergence Society (한국융합학회)
권호 표지
DOI QR코드

DOI QR Code

Design and Implementation of Hybrid Apps Design based on Spring MVC

스프링 MVC 기반에서 하이브리드 앱 디자인 설계 및 구현

  • 이명호 (세명대학교 전자상거래학과)
  • Received : 2019.02.07
  • Accepted : 2019.03.20
  • Published : 2019.03.28
Download PDF
⟨ Previous Next ⟩

Abstract

The Web environment of the frontend domain is increasingly competitive to preempt the new standard of presentation layer. N-Screen, a service that enables users to seamlessly use one content in various devices in Korea, is competing for market preemption by recognizing it as a core service of the future. In the cloud computing, N-screen is a typical service type. However, most of the frontend research required for groupware in enterprise environments has been limited to responsive web design for the web and native apps for mobile. Gradually, the need for MVC design patterns is increasingly widening in enterprise environments to overcome the cultural differences of companies and to support one source multi-use strategy supporting multiple devices and development productivity. Therefore, in this study, we will analyze and design JPetStore with hybrid application design based on Spring MVC, e-government standard framework environment of next generation web standard, and provide reference model of frontend hybrid apps design in future enterprise environment.

프론트엔드 영역의 웹 환경은 표현층의 새로운 표준을 선점하고자 하는 경쟁이 높아지고 있다. 국내에서도 다양한 기기에서 하나의 콘텐츠를 끊김없이 이용할 수 있게 해주는 서비스인 N-스크린을 미래의 핵심 서비스로 인지하여 시장선점을 위하여 경쟁을 하고 있으며, 클라우드 컴퓨팅 시대에서 대표적인 서비스 형태가 N-스크린이다. 그러나 엔터프라이즈 환경의 그룹웨어에 필요한 프론트엔드 연구는 대부분 웹에 대해서는 반응형 웹 디자인과 모바일은 네이티브 앱에 국한되어져 왔다. 점차 기업들의 문화적인 차이를 극복하고 하나의 소스를 여러 가지 디바이스를 지원하는 원소스 멀티유즈 전략과 개발 생산성을 위하여 MVC 디자인 패턴의 필요성은 엔터프라이즈 환경에서는 점차 확대되고 있다. 따라서 본 연구에서는 차세대 웹표준의 전자정부 표준프레임워크 환경인 스프링 MVC 기반에서 하이브리드 앱 디자인으로 JPetStore를 분석 및 설계한 후 구현함으로써 향후 엔터프라이즈 환경에서의 프론트엔드 하이브리드 앱 디자인의 참조 모델을 제공하고자 한다.

Keywords

OHHGBW_2019_v10n3_395_f0001.png 이미지

Fig. 1. View of Responsive Web

OHHGBW_2019_v10n3_395_f0002.png 이미지

Fig. 2. View of Adaptive Web

OHHGBW_2019_v10n3_395_f0003.png 이미지

Fig. 3. Relationship of MyBatis-Spring Components

OHHGBW_2019_v10n3_395_f0004.png 이미지

Fig. 4. Physical Model of JPetStore

OHHGBW_2019_v10n3_395_f0005.png 이미지

Fig. 5. Main Views of Hybrid Apps

OHHGBW_2019_v10n3_395_f0006.png 이미지

Fig. 6. Account Views of Hybrid Apps

OHHGBW_2019_v10n3_395_f0007.png 이미지

Fig. 7. Items List Views of Hybrid Apps

Table 1. Comparison Table by Development Method

OHHGBW_2019_v10n3_395_t0001.png 이미지

Table 2. Development Environment of Pilot System

OHHGBW_2019_v10n3_395_t0002.png 이미지

References

  1. MDN web docs, Modules and the standardization process, https://developer.mozilla.org/en-US/docs/Web/CSS/CSS3
  2. Wikipedia, , ECMAScript, https://en.wikipedia.org/wiki/ECMAScript
  3. Luke Wroblewski, (2011). Mobile First, A Book Apart, 1-120.
  4. eGovFrame, Release Note, http://www.egovframe.go.kr/
  5. M.H. Lee and J.S. Han, (2012). Design and Implementation of JPetStore Order System Based Mobile WebApp Office, The Society of Digital Policy & Management, 10(3), 149-154. DOI : 10.14400/JDPM.2012.10.3.149
  6. Wikipedia, Responsive web design, https://en.wikipedia.org/wiki/Responsive_web_design
  7. Aaron Gustafson, (2011). Adaptive Web Design, Easy Readers, 1-116.
  8. Martin Fowler, GUI Architectures, https://martinfowler.com/eaaDev/uiArchs.html
  9. M.H. Lee, (2015). A Study on N-Screen Convergence Application with Mobile WebApp Environment, Journal of the Korea Convergence Society, 6(2), 43-48. DOI : 10.15207/JKCS.2015.6.2.043
  10. Ethan Marcotte, (2011). Responsive Web Design, A Book Apart, pp. 1-139.
  11. Brad Frost, responsive navigation patterns, http://bradfrost.com/blog/web/responsive-nav-patterns/
  12. Wikipedia, Adaptive web design, https://en.wikipedia.org/wiki/Adaptive_web_design
  13. Wikipedia, Otto Neurath, https://en.wikipedia.org/wiki/Otto_Neurath
  14. Mike Bostock, Data-Driven Documents, https://d3js.org/
  15. TERASOLUNA, Database Access(MyBatis3) https://terasolunaorg.github.io/guideline/5.0.1.RELEASE/en/ArchitectureInDetail/DataAccessMyBatis3.html