[논문]효율적인 화면요소 배치에 관한 연구

김태우; 박선이; 여정모

doi:10.9717/kmms.2020.23.2.274

효율적인 화면요소 배치에 관한 연구
A Study on the Efficient Layout Method of the Screen Components 원문보기

멀티미디어학회논문지 = Journal of Korea Multimedia Society, v.23 no.2, 2020년, pp.274 - 281

김태우 (Dept. of Computer Science Eng., Graduate School, Pukyong National University) , 박선이 (Dept. of Computer Science Eng., Pukyong National University) , 여정모 (Dept. of Computer Science Eng., Pukyong National University)

Abstract ▼ AI-Helper

The use of information systems improves a company's service quality and provides efficient information management. The establishment of an information system has become an essential element. In designing and developing a large number of screens when building an information system, As the number of screens increases, so does the cost and time. In addition, modifications can increase the cost of maintenance and exceed the cost of development. In order to solve these problems, there have been studies to design the screen simply and easily, but there is a shortage in reducing the maintenance cost. In this paper, we have studied the layout algorithm for managing the attributes of the screen components as data structures based on the designed screen and arranging the components on the screen. And we compared the proposed method and the methods that have been studied in the related studies. Screen component layout methods can automatically deploy screen components to consistently develop a large number of screens and reduce cost and manpower by reducing the time it takes to deploy screens.

주제어

표/그림 (6)

그림 Fig. 1. Part of the Structure of Screen Component.
그림 Fig. 2. Part of the Screen of Employee.
표 Table 1. Part of Data of Employee Modify
그림 Fig. 3. Algorithm of Screen Layout.
그림 Fig. 4. Implemented Employee Screen.
표 Table 2. Comparison Proposal Study to Related Study

AI 본문요약
AI-Helper

* AI 자동 식별 결과로 적합하지 않은 문장이 있을 수 있으니, 이용에 유의하시기 바랍니다.

문제 정의

개발과 유지보수에 소요되는 비용을 감소시키고자 자동화 설계 방법에 많은 연구가 이루어졌다. 그중 본 절에서는 화면 자동화 설계 방법으로 그래픽 기반, 모델 기반 설계 방법에 대해 다루고자 한다.
본 연구에서는 ITA/EA구조에 따라 애플리케이션 영역에서 설계한 화면의 내용을 데이터로 저장하고, 데이터를 이용하여 화면을 구성하여 보여주는 알고리즘을 제안하였다. 이를 바탕으로 제안 방법과 기존의 방법들을 몇 가지 항목들에 대해 비교 수행하였고, 이를 통해 화면의 요소를 데이터로 관리하여 표현할 경우 많은 설계자간의 공유와 수정이 용이 함을 알 수 있었다.
이러한 문제를 해결하기 위해 본 연구에서는 설계 단계에서 설계한 화면을 검토 후 개발 단계에 적용할 수 있고, 애플리케이션 유형이나 프로그래밍 언어에 제한받지 않고 사용할 수 있도록 화면의 구조를 설계하고 이를 데이터로 추상화하여 관리하는 방법을 제안하고자 한다.

제안 방법

하지만 프로그램 도구와 시스템의 분류가 발전함에 따라 많은 모델들을 도출하고, 다양한 모델의 조합으로 화면을 구성하기 때문에 분석이 쉽지 않다는 점이 존재한다. 도출된 도메인 모델에 CRUD(Create, Read, Update, Delete) 동작을 적용하여 화면이 수행하는 동작을 기준으로 화면의 모습을 추상적으로 도출한다[16,17]. 또는 클래스 다이어그램, Task 모델을 기반으로 해당 화면에 필요한 입/출력 값을 수행할 수 있는 화면 요소들을 정의하여 화면을 생성하고 화면들의 구조를 관리한다[5].
그렇기 때문에 기존에는 만들고자하는 애플리케이션에 중점을 두어 개발이 이루어지는 경향이 존재해왔다. 본 연구에서는 ITA/EA(Information Architecture/Enterprise Architecture) 구조[18]에 따라 업무, 데이터베이스, 애플리케이션, 기술 영역으로 구분하고, 영역별로 설계 및 개발 절차 중 애플리케이션 설계영역에서 화면이 설계[19-21]된 가정에서 화면요소 배치를 진행한다. 그리고 Java 기반의 윈도우 프로그램기준으로 화면요소를 데이터로 추상화 하여 화면을 구성하고 추후에 프로그램 언어와 애플리케이션 유형별로 확장해 나가고자 한다.
버튼과 텍스트필드와 같이 화면을 구성하는 요소들은 프로그래밍 도구나 애플리케이션 유형에 관계없이 고유한 요소들이며, 화면을 구성하는 요소들의 속성은 이름, 크기, 위치 등의 기본적인 속성과, 프로그래밍 도구 및 애플리케이션 유형별로 디자인적인 부분에 의해 관리되는 추가적인 속성으로 구분 된다. 본 연구에서는 화면을 구성하는 요소들의 기본적인 속성을 기준으로 화면 구성요소 데이터를 추상화하여 데이터 모델로 관리한다.
본 절에서는 화면을 효율적으로 만들기 위해 관련 연구에서 연구되어진 방법들과 제안 방법 간에 몇 가지 항목들을 비교하였고, 그 결과는 아래의 Table 2와 같다.
사용자가 구성할 화면을 정하면 Container 테이블에서 해당 정보를 읽어 ContainerNo를 가져온다. 이후 ContainerNo를 이용하여 ContainerInf 테이블에서 배치하고자 하는 화면에 포함된 객체별 수를 확인하고, CntCpntMapping 테이블에서 화면의 컴포넌트번호를 저장한다. 객체별 수에 맞추어 객체 정보를 가져오기 위해 앞에서 읽은 정보를 바탕으로 ComponenetRef테이블을 참고하여 화면 요소들을 읽어서 화면에 보여준다.

성능/효과

본 연구에서는 ITA/EA구조에 따라 애플리케이션 영역에서 설계한 화면의 내용을 데이터로 저장하고, 데이터를 이용하여 화면을 구성하여 보여주는 알고리즘을 제안하였다. 이를 바탕으로 제안 방법과 기존의 방법들을 몇 가지 항목들에 대해 비교 수행하였고, 이를 통해 화면의 요소를 데이터로 관리하여 표현할 경우 많은 설계자간의 공유와 수정이 용이 함을 알 수 있었다. 또한 생성된 화면의 소스코드는 화면의 정보를 이용하여 구조적인 코드에 적용할 수 있어 프로그래밍 도구에 종속되지 않고 사용이 가능하였다.
기존의 화면생성 도구는 그래픽요소를 이용하여 시각적이고 직관적으로 화면을 생성하고 검토를 수행할 수 있다. 제안된 연구는 설계된 화면을 팔레트가 아닌 데이터로 저장하여 생성과정을 시각적으로 확인하지는 못하지만, 설계 시 정확한 수치를 지정하게 되면 설계한 화면과 동일하게 구현할 수 있다.
제안된 연구는 시스템과 별개로 화면의 내용만 저장하는 데이터베이스에 화면요소를 저장하여 사용하기 때문에 프로젝트를 수행하는 많은 사람과 쉽게 공유하고, 수정사항을 확인할 수 있다. 또한 개발 이후 화면배치의 수정이 발생할 경우에는 해당 요소의 데이터 값을 찾아가기 때문에 소스 코드를 찾아가야 하는 것 보다 쉽게 찾아 수정이 가능하다.

후속연구

본 연구에서는 ITA/EA(Information Architecture/Enterprise Architecture) 구조[18]에 따라 업무, 데이터베이스, 애플리케이션, 기술 영역으로 구분하고, 영역별로 설계 및 개발 절차 중 애플리케이션 설계영역에서 화면이 설계[19-21]된 가정에서 화면요소 배치를 진행한다. 그리고 Java 기반의 윈도우 프로그램기준으로 화면요소를 데이터로 추상화 하여 화면을 구성하고 추후에 프로그램 언어와 애플리케이션 유형별로 확장해 나가고자 한다.
이후에는 개발 단계에서 화면을 실시간으로 확인하고 수정할 수 있는 UI생성 프레임워크의 개발이 이루어져야 할 것이며, 프로그래밍 도구와 프로그램 유형에 독립적으로 적용할 수 있도록 자바 윈도우 프로그램외의 다른 유형 및 도구에서 구현하여 기능을 추가해야 할 것이다.

질의응답

핵심어	질문	논문에서 추출한 답변
	정보시스템의 구축의 두가지 단계는?	정보시스템이 기업 운영에 필수적으로 활용되도록 효율적인 개발을 위해 정보시스템 구축방법에 관한 많은 연구가 이루어졌다[1,2]. 정보시스템의 구축은 크게 설계와 개발 두 가지 단계로 이루어진다.
	애플리케이션 설계 단계에서 설계된 화면이 무엇을 정확하게 반영했는지 검토가 필요한가?	애플리케이션 설계 단계에서는 시스템의 규모에 따라 수많은 화면을 생성하게 되고, 설계된 화면이 고객의 요구사항을 정확하게 반영했는지 검토가 필요하다. 많은 화면을 검토하고 수정사항을 반영하기 위해서는 화면을 생성하는 도구가[3] 필요하며, 이를 위한 도구로 그래픽 기반 도구와 모델 기반 도구에 대한 연구가 이루어졌다.
	화면 자동화 설계 방법으로 그래픽 기반을 설명하라	그래픽기반 화면 자동화 설계 방법은 개략적으로 스케치 된 화면의 모습을 바탕으로 개발자가 시각적인 도구[4-6]를 활용하여 UI(User Interface)를 직관적이고 간편하게 구현하는 방법을 제공한다. 그래픽기반 화면 자동화 설계 방식에서는 각각의 프로그래밍 도구에서 제공하는 기본 프레임워크를 기반으로 화면 표현 요소들을 위젯 형태로 제공하고, 사용자는 위젯을 원하는 위치에 마우스로 끌어다 놓으면 프로그램 도구가 해당 위젯의 정적 코드를 생성한다. 그래픽 기반과 모델 기반 설계 방법은 제공되는 팔레트를 이용하여 직관적이고 쉽게 화면의 모습을 표현함과 동시에 개발자가 작성해야 하는 코드 일부분을 자동으로 생성하여 개발 시간을 단축시킬 수 있지만, 수동으로 코드를 편집하거나 속성을 세분화하여 관리하는 경우 개발자 간에 통일성을 저하하는 문제도 발생할 수 있으며, 수정사항의 검토가 개발 단계에서 이루어져 유지보수 비용을 줄이는데 어려움이 존재한다.

참고문헌 (21)

H.K. Park, G.H. Kwon, and K.W. Lee, "A Study on a Design and Implementation of AIGS (Automatic interface code Generating System)," Journal of The Korean Institute of Information Scientists and Engineers, Vol. 16, No. 2, pp. 11-14, 1989.
B.S. Choi, Study on the Information Expression Techniques for Object-oriented Software Testing Tools, Master's Thesis of Mokwon University of Computer Engineering and Software Engineering, 2005.
Y.S. Yun, J.S. Park, J.M, Jung, S.B. Eun, S. Cha, S.S. So, et al., "Automatic Mobile Screen Translation Using Object Detection Approach Based on Deep Neural Networks," Journal of Korea Multimedia Society, Vol. 21, No. 11, pp. 1305-1316, 2018.

원문보기 상세보기
K. Adam, L. Netz, S. Varga, J. Michael, B. Rumpe, P. Heuser, et al., "Model-Based Generation of Enterprise Information Systems," Proceeding of International Workshop on Enterprise Modeling and Information Systems Architectures, Vol. 2097, pp. 75-79, 2018.
E. Schlungbaum and T. Elwert, "Automatic User Interface Generation from Declarative Models," Journal of Travaux-Institut D Informatique, pp. 3-18, 1996.
D.S. Lee, Study on the Mobile Programming Automation Using UIDL(User Interface Description Language) , Master's Thesis of Chonnam National University of Electronic Computer Engineering, 2009.
W.Y. Lee and D.S. Park, "A Design and Implementation of Parallel Programming Environment using Graphical User Interface," Journal of Korea Multimedia Society, Vol. 4, No. 6, pp. 579-587, 2001.
C.A. Kim, Method of Test Automation Based on UML and Implementation, Master's Thesis of Ewha Womans University of Computer Engineering, 2000.
A. Kraus, A. Knapp, and N. Koch, "Model-Driven Generation of Web Applications in UWE," Proceedings of the 3rd International Workshop on Model-Driven Web Engineering, pp. 493-496, 2007.
S. Ahmed and G. Ashraf, "Model-based User Interface Engineering with Design Patterns," Journal of Systems and Software, Vol. 80, No. 8, pp. 1408-1422, 2007.

상세보기
H. Traetteberg, Model-based User Interface Design, Doctoral Thesis of Norwegian University of Science and Technology, 2002.
C.Y. Song, E.S. Cho, and C.J. Kim, "An User Interface Hierarchical Modeling Process based on Metamodel," Journal of Korea Multimedia Society, Vol. 11, No. 4, pp. 525-543, 2008.
J. Nichols and A. Faulring, "Automatic Interface Generation and Future User Interface Tools," Proceeding of ACM CHI 2005 Workshop on the Future of User Interface Design Tools, 2005.
R. Kennard and R. Steele, "Application of Software Mining to Automatic User Interface Generation," Journal of Frontiers in Artificial Intelligence and Applications, Vol. 182, pp. 244-256, 2008.
A.R. Puerta, "A Model-Based Interface Development Environment," Journal of IEEE Software, Vol. 14, No. 4, pp. 40-50, 1997.

상세보기
A. Schramm, A. Preussner, M. Heinrich, and L. Vogel, "Rapid UI Development for Enterprise Applications: Combining Manual and Model-Driven Techniques," Journal of Lecture Notes in Computer Science, Vol. 6394, pp. 271-285, 2010.
A.M.R.d. Cruz and J.P. Faria, "A Metamodel-Based Approach for Automatic User Interface Generation," Journal of Lecture Notes in Computer Science, Vol. 6394, pp. 256-270, 2010.
KDPC, Dataarchitecture Expert Guide, Korea Database Agency, Seoul, Korea, 2013.
S.Y. Park and J.M. Yeo, "A Study on Elicitation Method of Target Businesses for Application Development," J ournal of Korea Institute of Information and Communication Engineering, Vol. 15, No. 12, pp. 2599-2608, 2011.

원문보기 상세보기
S.Y. Park, T.W. Kim, and J.M. Yeo, "Study on the Business Process Procedure based on the Analysis of Requirements," Proceeding of International Conference on Future Information Technology, pp. 479-486, 2018.
T.W. Kim, S.Y. Park, and J.M. Yeo, "Study on the Design Process of Screen using a Prototype Method," Proceeding of International Conference on Future Information Technology, pp. 471-478, 2018.

저자의 다른 논문 :

표제어: PCR

동의어: Packet Collision Rate

용어 설명 출처 목록 (6)

용어 설명: PCR은 세균 특이성이 있는 primer를 이용하여 적은 수의 세균이 있을지라도 쉽게 검출할 수 있는 유용한 방법이며, 이를 이용하여 구강 내 치면세균막이나 타액에서 직접 세균을 검출할 수 있게 되었다[8].

내보내기 구분	파일저장 인쇄 메일전송
구성항목	기본정보 상세정보 관리번호, 논문명, 저널/프로시딩명, 저자 , 발행년, 권, 호, 시작페이지, 끝페이지, 발행기관 관리번호, 논문명, 대등논문명, 저자 , 저널/프로시딩명, 발행기관, 발행년, 발행언어, 권, 호, 시작페이지, 끝페이지, ISBN, ISSN, 주제분야, 키워드, 초록(한글), 초록(영문), 저자(소속기관)
저장형식	Text(ASCII format) Excel format RefWorks Direct Export RIS format (for Reference Manager, ProCite, EndNote), Scholar's Aids, Mendeley
메일정보	받는사람 (필수) @ 보내는사람 (선택) @ 제목 내용 KISTI 검색결과 이메일 서비스
안내	총 건의 자료가 검색되었습니다. 다운받으실 자료의 인덱스를 입력하세요. (1-10,000) 검색결과의 순서대로 최대 10,000건 까지 다운로드가 가능합니다. 데이타가 많을 경우 속도가 느려질 수 있습니다.(최대 2~3분 소요) 다운로드 파일은 UTF-8 형태로 저장됩니다. 파일의 내용이 제대로 보이지 않을실 때는 웹브라우저 상단의 보기 -> 인코딩 -> 자동선택 여부를 확인하십시오. ~ Text(ASCII format) Excel format

연합인증