KR102150545B1 - 웹 앱 개발 장치, 방법 및 컴퓨터로 판독 가능한 기록 매체 - Google Patents

웹 앱 개발 장치, 방법 및 컴퓨터로 판독 가능한 기록 매체 Download PDF

Info

Publication number
KR102150545B1
KR102150545B1 KR1020130119047A KR20130119047A KR102150545B1 KR 102150545 B1 KR102150545 B1 KR 102150545B1 KR 1020130119047 A KR1020130119047 A KR 1020130119047A KR 20130119047 A KR20130119047 A KR 20130119047A KR 102150545 B1 KR102150545 B1 KR 102150545B1
Authority
KR
South Korea
Prior art keywords
server
client
development
web
interface
Prior art date
Application number
KR1020130119047A
Other languages
English (en)
Other versions
KR20150040483A (ko
Inventor
곽노현
Original Assignee
에스케이플래닛 주식회사
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by 에스케이플래닛 주식회사 filed Critical 에스케이플래닛 주식회사
Priority to KR1020130119047A priority Critical patent/KR102150545B1/ko
Publication of KR20150040483A publication Critical patent/KR20150040483A/ko
Application granted granted Critical
Publication of KR102150545B1 publication Critical patent/KR102150545B1/ko

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F17/00—Digital computing or data processing equipment or methods, specially adapted for specific functions
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/20—Software design
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Audiology, Speech & Language Pathology (AREA)
  • Artificial Intelligence (AREA)
  • Health & Medical Sciences (AREA)
  • Computational Linguistics (AREA)
  • General Health & Medical Sciences (AREA)
  • Human Computer Interaction (AREA)
  • Data Mining & Analysis (AREA)
  • Databases & Information Systems (AREA)
  • Mathematical Physics (AREA)
  • Stored Programmes (AREA)

Abstract

본 발명은 웹 앱 개발 장치, 방법 및 컴퓨터로 판독 가능한 기록 매체에 관한 것으로, 보다 상세하게는 출력부, 사용자 명령을 입력받는 입력부, 웹 앱 인터페이스 개발 자동화 툴을 구동시켜 웹 애플리케이션 파일을 불러오고, 상기 웹 애플리케이션 파일에서 반복적으로 발생하는 구조를 가지는 부분을 추출하여 상기 출력부에 표시하며, 상기 표시된 부분에서 서버 인터페이스가 필요한 데이터를 사용자로부터 선택받고, 서버 또는 클라이언트의 개발방식이 입력된 경우, 상기 선택된 데이터에 상기 개발 방식을 적용하여 웹 기반 인터페이스에 대한 설계 문서를 생성하는 툴 구동부를 포함한다.

Description

웹 앱 개발 장치, 방법 및 컴퓨터로 판독 가능한 기록 매체{Apparatus, method and computer-readable medium for development web application}
본 발명은 웹 앱 개발 장치, 방법 및 컴퓨터로 판독 가능한 기록 매체에 관한 것으로, 보다 상세하게는 웹 애플리케이션 파일에서 반복적으로 발생하는 구조를 가지는 부분을 추출하여 표시하고, 그 표시된 부분에서 서버 인터페이스가 필요한 데이터, 서버 또는 클라이언트의 개발방식이 입력되면, 선택된 데이터에 상기 개발 방식을 적용하여 웹 기반 인터페이스에 대한 설계 문서를 생성하는 웹 앱 개발 장치, 방법 및 컴퓨터로 판독 가능한 기록 매체에 관한 것이다.
점차 일상화되어가는 인터넷 문화는 더 방대하고 더 빠르게 진화하는 웹 애플리케이션을 끊임없이 요구하고 있다. 이러한 웹 애플리케이션의 개발 방향은 새로운 요구에 맞춘 혁신적인 프로그래밍 언어나 코딩 기법을 연구하는 것과, 현재 사용되고 있는 프로그래밍 언어나 코딩 기법을 더욱 효과적으로 활용할 수 있도록 하는 방법을 연구하는 것으로 나눌 수 있다. 또한, 이러한 웹 애플리케이션의 개발 동향 역시 웹 서버측에서 수행되는 스크립트 언어를 이용하는 방식과 웹 클라이언트 측에서 독립적으로 수행되는 스크립트 언어를 이용하는 방식으로 나뉘어 발전하고 있다.
한편, 웹 기반으로 개발된 웹 애플리케이션은 웹 브라우저가 탑재된 다양한 환경에서 구동이 가능하다. 그래서 최근에는 안드로이드나 iOS의 애플리케이션에서도 webView를 이용하여 사용자 인터페이스(UI)부분을 웹 기반으로 개발하고 있다. 웹의 특성을 그대로 이용하기 때문에 Ajax와 같은 기존 웹 애플리케이션 개발에서 클라이언트(client)-서버(server) 인터페이스 기술을 그대로 사용한다.
SNS(Social Networking Service) 애플리케이션에서 볼 수 있듯이 리스트와 같은 구성 요소는 서버에서 Ajax 방식으로 정보를 가져온다. 이런 요소는 범용적으로 사용되고 그 특성도 다양하지 않기 때문에 자동화할 수 있는데, 실제 개발 프로세스에서 이를 협의하여 설계하고 연동 테스트를 진행해야 하므로, 시간과 비용이 많이 드는 단점이 있다.
선행기술 1 : 한국공개특허 제2011-0060419호(2011.06.08 공개)
본 발명은 상기한 문제점을 해결하기 위하여 안출된 것으로, 웹 기반의 인터페이스를 개발할 때 이를 쉽게 개발할 수 있도록 반복적인 부분을 자동화해주는 툴을 제공하는 것을 목적으로 한다.
본 발명의 다른 목적은 웹 애플리케이션을 개발할 때 서버 인터페이스(Server Interface)가 필요한 리스트와 같이 범용적으로 사용되는 구성 요소를 자동으로 찾고, 찾아진 구성요소에 서버 또는 클라이언트의 개발방식을 적용하여 웹 기반 인터페이스에 대한 설계 문서를 자동으로 생성하는 웹 앱 개발 장치, 방법 및 컴퓨터로 판독 가능한 기록 매체를 제공하는데 있다.
본 발명의 또 다른 목적은 서버 인터페이스가 필요한 데이터에 서버 개발방식 또는 클라이언트 개발방식을 적용하여 생성된 설계 문서를 다양한 종류의 개발방식에도 적용할 수 있도록 하는 서버 로직 또는 클라이언트 로직을 자동으로 생성하는 웹 앱 개발 장치, 방법 및 컴퓨터로 판독 가능한 기록 매체를 제공하는데 있다.
본 발명의 또 다른 목적은 웹 애플리케이션을 개발하는 단계에서 사용자 인터페이스(UI) 디자인이 끝난 이후 client단과 server단의 개발자가 개발 환경을 쉽고 빠르게 자동으로 구성하여, 개발 및 테스트에 소요되는 비용을 절감할 수 있도록 하는 웹 앱 개발 장치, 방법 및 컴퓨터로 판독 가능한 기록 매체를 제공하는데 있다.
상술한 과제를 해결하기 위한 본 발명의 일 측면에 따르면, 출력부, 사용자 명령을 입력받는 입력부, 웹 앱 인터페이스 개발 자동화 툴을 구동시켜 웹 애플리케이션 파일을 불러오고, 상기 웹 애플리케이션 파일에서 반복적으로 발생하는 구조를 가지는 부분을 추출하여 상기 출력부에 표시하며, 상기 표시된 부분에서 서버 인터페이스가 필요한 데이터를 사용자로부터 선택받고, 서버 또는 클라이언트의 개발방식이 입력된 경우, 상기 선택된 데이터에 상기 개발 방식을 적용하여 웹 기반 인터페이스에 대한 설계 문서를 생성하는 툴 구동부를 포함하는 웹 앱 개발 장치가 제공된다.
상기 웹 애플리케이션 파일은 사용자 인터페이스와 화면 구성만 적용된 마크업 언어 mock-up 페이지일 수 있다.
상기 툴 구동부는 트리구조의 웹 애플리케이션 파일에서 같은 부모 노드를 가지는 노드들을 비교하여 반복적으로 발생하는 구조를 가지는 부분을 추출하고, 상기 추출된 부분이 표시된 서버 인터페이스 데이터 선택 화면을 상기 출력부에 표시하는 추출모듈, 상기 서버 인터페이스 데이터 선택 화면에서 서버 인터페이스가 필요한 데이터를 선택받고, 서버 개발방식 또는 클라이언트 개발방식을 상기 입력부를 통해 사용자로부터 입력받는 선택모듈, 상기 선택된 데이터에 서버 개발방식 또는 클라이언트 개발방식을 적용하여 웹 기반 인터페이스에 대한 설계 문서를 자동으로 생성하고, 상기 설계 문서를 각 개발방식에 적용하기 위한 서버 로직 또는 클라이언트 로직을 생성하는 생성 모듈을 포함할 수 있다.
상기 생성 모듈은 해당 인터페이스의 요청에 따라 상기 설계 문서를 전송해주는 서버 로직을 서버 개발방식별로 자동으로 생성하고, 상기 설계 문서를 마크업 언어 코드로 생성할 수 있는 클라이언트 로직을 클라이언트 개발방식별로 자동으로 생성할 수 있다.
상기 서버 개발방식은 서버에서 지원하는 스크립트 언어이고, 상기 클라이언트 개발방식은 클라이언트에서 지원하는 스크립트 언어일 수 있다.
본 발명의 다른 측면에 따르면, 웹 앱 개발장치가 웹 앱을 개발하기 위한 방법에 있어서, 웹 앱 인터페이스 개발 자동화 툴을 구동시켜 웹 애플리케이션 파일을 불러오는 단계, 상기 웹 애플리케이션 파일에서 반복적으로 발생하는 구조를 가지는 부분을 추출하여 표시하는 단계, 상기 표시된 부분에서 서버 인터페이스가 필요한 데이터를 사용자로부터 선택받고, 서버 또는 클라이언트의 개발방식을 입력받는 단계, 상기 선택된 데이터에 상기 개발 방식을 적용하여 웹 기반 인터페이스에 대한 설계 문서를 생성하는 단계를 포함하는 웹 앱 개발 방법이 제공된다.
상기 웹 앱 개발 방법은 상기 설계 문서를 각 개발방식에 적용하기 위한 서버 로직 또는 클라이언트 로직을 생성하는 단계를 더 포함할 수 있다.
본 발명의 또 다른 측면에 따르면, 웹 앱 개발장치에 의해 실행될 때, 웹 앱 인터페이스 개발 자동화 툴을 구동시켜 웹 애플리케이션 파일을 불러오는 단계, 상기 웹 애플리케이션 파일에서 반복적으로 발생하는 구조를 가지는 부분을 추출하여 표시하는 단계, 상기 표시된 부분에서 서버 인터페이스가 필요한 데이터를 사용자로부터 선택받고, 서버 또는 클라이언트의 개발방식을 입력받는 단계, 상기 선택된 데이터에 상기 개발 방식을 적용하여 웹 기반 인터페이스에 대한 설계 문서를 생성하는 단계를 포함하는 웹 앱 개발 방법이 프로그램으로 기록되고 전자 장치에서 판독 가능한 기록매체가 제공된다.
본 발명에 따르면, 웹 앱을 개발하는 단계에서 UI 디자인이 끝난 이후 클라이언트(client)단과 서버(server)단의 개발자가 개발 환경을 쉽고 빠르게 자동으로 구성함으로써, 개발 및 테스트에 소요되는 비용을 절감할 수 있다.
또한, 웹 기반의 인터페이스를 개발할 때 이를 쉽게 개발할 수 있도록 반복적인 부분을 자동화해주는 툴을 제공함으로써, 서버 인터페이스(Server Interface)가 필요한 리스트와 같이 범용적으로 사용되는 구성 요소를 자동으로 찾고, 찾아진 구성요소에 서버 또는 클라이언트의 개발방식을 적용하여 웹 기반 인터페이스에 대한 설계 문서를 자동으로 생성할 수 있다.
또한, 서버 인터페이스가 필요한 데이터에 서버 개발방식 또는 클라이언트 개발방식을 적용하여 생성된 설계 문서를 다양한 종류의 개발방식에도 적용할 수 있도록 하는 서버 로직 또는 클라이언트 로직을 자동으로 생성할 수 있다.
도 1은 본 발명의 실시예에 따른 웹 앱 개발장치의 구성을 개략적으로 나타낸 블럭도.
도 2는 도 1에 도시된 툴 구동부의 구성을 상세히 나타낸 블럭도.
도 3은 본 발명의 실시예에 따른 웹 앱 개발장치가 웹 앱을 개발하는 방법을 나타낸 흐름도.
도 4 내지 도 7은 본 발명의 실시예에 따른 웹 앱을 개발하는 방법을 설명하기 위한 화면 예시도.
본 발명의 전술한 목적과 기술적 구성 및 그에 따른 작용 효과에 관한 자세한 사항은 본 발명의 명세서에 첨부된 도면에 의거한 이하 상세한 설명에 의해 보다 명확하게 이해될 것이다.
이하에서 기재된 앱은 애플리케이션(application)의 약어로, 설명의 편의를 위해 애플리케이션을 앱으로 칭한 것이다.
도 1은 본 발명의 실시예에 따른 웹 앱 개발장치의 구성을 개략적으로 나타낸 블럭도, 도 2는 도 1에 도시된 툴 구동부의 구성을 상세히 나타낸 블럭도이다.
도 1을 참조하면, 웹 앱 개발장치(100)는 통신부(110), 입력부(120), 출력부(130), 저장부(140), 툴 구동부(150), 제어부(160)를 포함한다.
통신부(110)는 웹 앱 개발장치(100)와 서버 또는 단말장치를 통신망을 통해 상호 연결시키는 통신 수단으로서, 예를 들어 이동통신, 위성통신 등의 무선 통신모듈, 인터넷 등의 유선 통신모듈, 와이파이 등의 근거리 무선 통신모듈 등을 포함할 수 있다.
입력부(120)는 웹 앱 개발장치(100)의 동작 제어를 위한 사용자 요청을 입력받기 위한 수단으로서, 사용자의 조작에 따라서 사용자의 요청을 전기 신호로 변환한다. 입력부(120)는 사용자로부터 문자, 숫자, 텍스트, 음성, 움직임, 촉각, 시각 등을 입력받는 입력 수단으로 예컨대, 입력 수단은 키보드, 키패드, 터치 스크린, 시각 감지 수단, 촉각 감지 수단, 움직임 감지 수단, 음성 입력 수단 등 다양한 형태로 구현될 수 있다. 사용자는 입력부(120)를 통해 서버 인터페이스가 필요한 데이터를 선택하거나, 서버 또는 클라이언트의 개발 방식을 입력할 수 있다.
출력부(130)는 애플리케이션 구동에 따른 화면 정보를 디스플레이하는 디스플레이 수단, 예를 들어 LCD(Liquid Crystal Display) 또는 OLED(Organic Light Emitting Diodes) 등 소형 평판 디스플레이장치로 구현되는 것이 바람직할 수 있다.
저장부(140)는 웹 앱 개발장치(100)의 동작 제어 시 필요한 프로그램과, 그 프로그램 수행 중에 발생되는 데이터를 저장한다.
저장부(140)에는 웹 앱 인터페이스 개발 자동화 툴이 저장되어 있다. 웹 앱 인터페이스 개발 자동화 툴은 웹 앱을 개발하는 단계에서 사용자 인터페이스 디자인이 끝난 이후 클라이언트(client)단과 서버(server)단의 개발자가 개발 환경을 쉽고 빠르게 자동으로 구성할 수 있도록 하는 툴일 수 있다.
툴 구동부(150)는 저장부(140)에 저장된 웹 앱 인터페이스 개발 자동화 툴을 구동시켜 웹 애플리케이션 파일을 불러오고, 웹 애플리케이션 파일에서 반복적으로 발생하는 구조를 가지는 부분을 추출하여 출력부(130)에 표시하며, 출력부(130)에 표시된 부분에서 서버 인터페이스가 필요한 데이터, 서버 또는 클라이언트의 개발방식이 사용자로부터 입력된 경우, 상기 선택된 데이터에 상기 개발 방식을 적용하여 웹 기반 인터페이스에 대한 설계 문서를 생성한다.
이러한 툴 구동부(150)에 대해 도 2를 참조하면, 툴 구동부(150)는 추출모듈(152), 선택모듈(154), 생성모듈(156)을 포함한다.
추출모듈(152)은 웹 애플리케이션 파일에서 반복적으로 발생하는 구조를 가지는 부분을 추출하여 출력부(130)에 표시한다. 즉, 추출모듈(152)은 마크업 언어 mock-up 페이지인 웹 앱 파일을 웹 앱 인터페이스 개발 자동화 툴에서 불러온다. 여기서, 마크업 언어 mock-up 페이지는 서버 연동이나 자바스크립트(JavaScript) 로직없이 디자인만을 적용하여 사용자 인터페이스와 화면 구성만 적용한 프로토타입과 같은 초안의 페이지일 수 있고, 마크업 언어는 예컨대, html 등일 수 있다.
마크업 언어는 트리(tree)구조로 구성될 수 있으므로, 추출모듈(152)은 트리구조의 노드(node) 중에서 sibling 관계(즉, 같은 부모 노드를 가지는 관계)의 노드들을 비교하여 반복적으로 발생하는 구조를 가지는 부분을 추출할 수 있다.
선택 모듈(154)은 출력부(130)에 표시된 부분에서 서버 인터페이스가 필요한 데이터를 사용자로부터 선택받고, 서버 개발방식 또는 클라이언트 개발방식을 입력부(120)를 통해 사용자로부터 입력받는다. 여기서, 서버 개발방식은 서버가 지원하는 환경(스크립트 언어)을 의미하는 것으로, 예컨대, JSP(JavaServer Pages), PHP(Personal Hypertext Preprocessor), ASP(Active Server Pages) 등을 포함할 수 있다. 클라이언트 개발방식은 클라이언트가 지원하는 환경(스크립트 언어)을 의미하는 것으로, 예컨대, pure JavaScript, Mustache.js 등을 포함할 수 있다.
웹 앱의 개발단계에서는 웹 서버측에서 수행되는 스크립트 언어를 이용하는 방식과 웹 클라이언트 측에서 독립적으로 수행되는 스크립트 언어를 이용하는 방식으로 나누어진다. 웹 클라이언트 측에서 독립적으로 수행되는 스크립트 언어는 널리 알려진 바와 같은 자바 스크립트나 비주얼 베이직 스크립트 등이 있고, 서버측 스크립트 언어는 PHP(Professional HTML Preprocessor), 자바 스크립트, 비주얼 베이직 스크립트 등이 있다. 따라서, 사용자는 웹 앱을 개발하기 위해서 서버 개발방식 또는 클라이언트 개발 방식을 입력해야 한다.
생성모듈(156)은 선택모듈(154)에서 선택된 데이터에 서버 개발방식 또는 클라이언트 개발방식을 적용하여 웹 기반 인터페이스에 대한 설계 문서를 생성하고, 생성된 설계 문서를 다른 개발방식에도 적용하기 위해 서버 로직 또는 클라이언트 로직으로 생성한다. 즉, 생성모듈(156)은 설계 문서가 생성되면, 서버 로직과 클라이언트 로직을 각 환경별 프로토타입으로 만들 수 있다. 다시 말하면, 생성모듈(156)은 해당 인터페이스의 요청에 대해서 설계 문서를 전송해주는 서버 로직을 서버 환경별로 자동으로 생성하고, 설계 문서를 마크업 언어 코드로 생성할 수 있는 클라이언트 로직을 클라이언트 환경별로 자동으로 생성한다.
제어부(160)는 통신부(110), 입력부(120), 출력부(130), 저장부(140), 툴 구동부(150) 등의 각 부의 동작을 제어한다.
도 3은 본 발명의 실시예에 따른 웹 앱 개발장치가 웹 앱을 개발하는 방법을 나타낸 흐름도, 도 4는 본 발명의 실시예에 따른 웹 앱을 개발하는 방법을 설명하기 위한 화면 예시도이다.
도 3을 참조하면, 웹 앱 개발장치는 웹 앱 인터페이스 개발 자동화 툴을 구동시켜 웹 애플리케이션 파일을 불러온다(S302).
그런 후, 웹 앱 개발장치는 웹 애플리케이션 파일에서 반복적으로 발생하는 구조를 가지는 부분을 추출하여 표시한다(S304). 이때, 웹 앱 개발장치는 트리구조를 가지는 웹 애플리케이션 파일의 노드 중에서 sibling 관계의 노드들을 비교하여 반복적으로 발생하는 구조를 가지는 부분을 추출하고, 추출된 부분을 포함하는 인터페이스 데이터 선택 화면을 표시한다. 인터페이스 데이터 선택 화면에는 반복적으로 발생하는 구조를 가지는 부분에 대한 마크업 언어 영역, 개발방식 선택 영역이 표시된다.
사용자는 인터페이스 데이터 선택 화면에서 서버 인터페이스가 필요한 데이터를 선택하고(S306), 서버 또는 클라이언트의 개발방식을 입력한다(S308). 즉, 사용자는 인터페이스 데이터 선택 화면의 마크업 언어 영역에서 서버 인터페이스가 필요한 데이터를 선택하고, 개발방식 선택 영역에서 서버 또는 클라이언트의 개발방식을 입력한다.
그러면, 웹 앱 개발장치는 상기 선택된 데이터에 개발 방식을 적용하여 웹 기반 인터페이스에 대한 설계 문서를 생성한다(S310). 이때, 웹 앱 개발장치는 상기 설계 문서를 다른 개발방식에도 적용할 수 있는 서버 로직 또는 클라이언트 로직으로 생성할 수 있다.
이하, 도 4 내지 도 7을 참조하여 웹 앱 개발장치가 웹 앱을 개발하는 방법에 대해 상세히 설명하기로 한다.
웹 앱의 디자인 및 화면 구성을 적용한 마크업 언어 mock-up 페이지가 도 4와 같을 때, 웹 앱 개발장치는 이 마크업 언어 파일을 웹 앱 인터페이스 개발 자동화 툴에서 불러온다.
그러면, 웹 앱 개발장치는 마크업 언어 mock-up에서 반복적으로 발생하는 구조를 가지는 부분을 찾게 되는데, (A)영역을 반복적으로 발생하는 구조를 가지는 부분으로 찾을 수 있다. (A)영역의 반복되는 마크업 언어 태그는 도 5와 같다.
웹 앱 개발장치는 도 5와 같은 마크업 언어에서 서버(server) 인터페이스를 통해 데이타를 가져와야 하는 부분을 사용자가 선택할 수 있도록 하는 서버 인터페이스 데이터 선택 화면을 도 6과 같이 디스플레이한다.
서버 인터페이스 데이터 선택 화면에는 반복적으로 발생하는 구조를 가지는 부분에 대한 마크업 언어 영역(610), 개발방식 선택 영역(620)이 표시된다. 사용자는 마크업 언어 영역(610)에서 서버 인터페이스가 필요한 데이터를 선택한다. 이때, 사용자는 하이라이트, 밑줄 등의 다양한 방법을 이용하여 서버 인터페이스를 위한 데이터를 선택할 수 있다.
그런 후 사용자는 개발방식 선택 영역(620)에서 서버 환경 또는 클라이언트 환경을 개발방식으로 각각 선택한 후, 자동 생성 명령을 선택한다. 즉, 개발방식 선택 영역(620)에는 서버 환경 선택 영역(622), 클라이언트 환경 선택 영역(624), 자동 생성 명령(626)이 표시되고, 서버 환경 선택 영역(622)에는 JSP, PHP, ASP 등의 서버 환경(개발방식) 리스트가 표시되고, 클라이언트 환경 선택 영역(624)에는 pure JavaScript, Mustache.js 등의 클라이언트 환경(개발방식) 리스트가 표시된다. 사용자는 서버 환경 선택 영역(622)에 표시된 서버 환경 리스트에서 서버 환경을 선택하고, 클라이언트 환경 선택 영역(624)에 표시된 클라이언트 환경 리스트에서 클라이언트 환경을 선택한다. 그러면, 웹 앱 개발장치는 서버 또는 클라이언트 개발방식에 맞게 설계 문서를 생성한다.
서버 또는 클라이언트의 개발방식을 적용하여 자동으로 생성된 설계 문서는 도 7과 같을 수 있다.
즉, 도 6에서 사용자가 "2013-12-24T23:59", 3min ago, "#profile", "http://dummyimage.com/84x84/000/fff", "chan”, “Does sombody Know the Starting song from 0 Seconds to about 30 secound??”, “999”, "http://dummyimage.com/50x50/000/ffe" alt="Jeong", "http://dummyimage.com/50x50/000/fff"alt="Chan", "http://dummyimage.com/50x50/000/ffe" alt="Myeong", "http://dummyimage.com/50x50/000/fff"alt="Aram", "http://dummyimage.com/50x50/000/ffe" alt="Eden"를 서버 인터페이스를 위한 데이터로 선택하였으므로, 웹 앱 개발장치는 도 6에서 선택한 데이터에 대한 설계 문서를 도 7과 같은 JSON(JavaScript Object Notation) data로 생성할 수 있다.
서버에서는 도 7과 같은 데이터 형식으로 응답을 주는 것으로 정의하기 때문에 클라이언트측 개발자와 서버측 개발자가 인터페이스(Interface)를 쉽게 협의할 수 있다.
도 7과 같은 설계 문서가 생성되면, 웹 앱 개발장치는 도 7과 같은 설계 문서를 클라이언트 측에 전송해 주는 서버 로직을 자동으로 생성한다. 또한, 웹 앱 개발장치는 도 7과 같은 설계 문서를 Ajax로 전송받고, 전송받은 데이터로 HTML 코드를 생성할 수 있는 클라이언트 로직을 자동으로 생성한다.
한편, 본 발명의 다른 측면에 따르면, 웹 앱 개발장치에 의해 실행될 때, 웹 앱 인터페이스 개발 자동화 툴을 구동시켜 웹 애플리케이션 파일을 불러오는 단계, 상기 웹 애플리케이션 파일에서 반복적으로 발생하는 구조를 가지는 부분을 추출하여 표시하는 단계, 상기 표시된 부분에서 서버 인터페이스가 필요한 데이터를 사용자로부터 선택받고, 서버 또는 클라이언트의 개발방식을 입력받는 단계, 상기 선택된 데이터에 상기 개발 방식을 적용하여 설계 문서를 생성하는 단계를 포함하는 웹 앱 개발 방법이 프로그램으로 기록되고 컴퓨터로 판독 가능한 기록매체가 제공된다.
이러한 웹 앱 개발 방법은 프로그램으로 작성 가능하며, 프로그램을 구성하는 코드들 및 코드 세그먼트들은 당해 분야의 프로그래머에 의하여 용이하게 추론될 수 있다. 또한, 웹 앱 개발 방법에 관한 프로그램은 전자장치가 읽을 수 있는 정보저장매체(Readable Media)에 저장되고, 전자장치에 의하여 읽혀지고 실행될 수 있다.
지금까지 기술한 웹 앱 개발 방법은 이를 실행하기 위한 프로그램이 수록된 컴퓨터로 판독 가능한 기록 매체의 형태에 의해 생산, 사용, 양도될 수 있다. 뿐만 아니라, 본 발명은 상기 프로그램을 온라인 상에서 송수신하는 방식에 의해 양도되는 경우, 송수신의 주체가 되는 장치 및 송수신 행위에 대해서도 권리 범위가 미친다고 봄이 당연하다.
이와 같이, 본 발명이 속하는 기술분야의 당업자는 본 발명이 그 기술적 사상이나 필수적 특징을 변경하지 않고서 다른 구체적인 형태로 실시될 수 있다는 것을 이해할 수 있을 것이다. 그러므로 이상에서 기술한 실시예들은 모든 면에서 예시적인 것이며 한정적인 것이 아닌 것으로서 이해해야만 한다. 본 발명의 범위는 상기 상세한 설명보다는 후술하는 특허청구범위에 의하여 나타내어지며, 특허청구범위의 의미 및 범위 그리고 그 등가개념으로부터 도출되는 모든 변경 또는 변형된 형태가 본 발명의 범위에 포함되는 것으로 해석되어야 한다.
본 발명은 웹 앱 개발 장치, 방법 및 컴퓨터로 판독 가능한 기록 매체를 제공함으로써, 웹 애플리케이션을 개발할 때 서버 인터페이스(Server Interface)가 필요한 리스트와 같이 범용적으로 사용되는 구성 요소를 자동으로 찾고, 찾아진 구성요소에 서버 또는 클라이언트의 개발방식을 적용하여 웹 기반 인터페이스에 대한 설계 문서를 자동으로 생성할 수 있다.
100 : 웹 앱 개발장치 110 : 통신부
120 : 입력부 130 : 출력부
140 : 저장부 150 : 툴 구동부
152 : 추출모듈 154 : 선택모듈
156 : 생성 모듈 160 : 제어부

Claims (8)

  1. 출력부;
    사용자 명령을 입력받는 입력부; 및
    웹 앱 인터페이스 개발 자동화 툴을 구동시켜 웹 애플리케이션 파일을 불러오고, 상기 웹 애플리케이션 파일에서 반복적으로 발생하는 구조를 가지는 부분을 추출하여 상기 출력부에 표시하며, 상기 표시된 부분에서 서버 인터페이스가 필요한 데이터를 사용자로부터 선택받고, 서버 또는 클라이언트의 개발방식이 입력된 경우, 상기 선택된 데이터에 상기 개발 방식을 적용하여 웹 기반 인터페이스에 대한 설계 문서를 생성하는 툴 구동부;
    를 포함하고,
    상기 툴 구동부는 트리구조의 웹 애플리케이션 파일에서 같은 부모 노드를 가지는 노드들을 비교하여 반복적으로 발생하는 구조를 가지는 부분을 추출하고, 상기 추출된 부분이 표시된 서버 인터페이스 데이터 선택 화면을 상기 출력부에 표시하는 추출모듈;
    상기 서버 인터페이스 데이터 선택 화면에서 서버 인터페이스가 필요한 데이터를 선택받고, 서버 개발방식 또는 클라이언트 개발방식을 상기 입력부를 통해 사용자로부터 입력받는 선택모듈; 및
    상기 선택된 데이터에 상기 서버 개발방식 또는 클라이언트 개발방식을 적용하여 웹 기반 인터페이스에 대한 설계 문서를 자동으로 생성하고, 상기 설계 문서를 각 개발방식에 적용하기 위한 서버 로직 또는 클라이언트 로직으로 생성하는 생성 모듈을 포함하고,
    상기 추출 모듈은
    상기 반복적으로 발생하는 구조를 가지는 부분에 대한 마크업 언어 영역 및 개발방식 선택 영역을 상기 서버 인터페이스 데이터 선택 화면에 표시하고,
    상기 선택 모듈은
    상기 마크업 언어 영역에서 상기 사용자로부터 상기 서버 인터페이스를 위한 데이터를 선택 받고,
    상기 개발방식 선택 영역에 서버 환경 선택 영역과 클라이언트 환경 선택 영역 및 자동 생성 명령을 표시하고,
    상기 사용자로부터 상기 서버 환경 선택 영역에 표시된 서버 환경 리스트에서 서버 환경을 선택 받고,
    상기 클라이언트 환경 선택 영역에 표시된 클라이언트 환경 리스트에서 클라이언트 환경을 선택 받고,
    상기 생성모듈은
    상기 서버 환경과 상기 클라이언트 환경에 따라 상기 서버 개발방식과 상기 클라이언트 개발방식을 적용하여 상기 설계 문서를 생성하는 것을 특징으로 하는 웹 앱 개발 장치.
  2. 제1항에 있어서,
    상기 웹 애플리케이션 파일은 사용자 인터페이스와 화면 구성만 적용된 마크업 언어 mock-up 페이지인 것을 특징으로 하는 웹 앱 개발장치.
  3. 삭제
  4. 제1항에 있어서,
    상기 생성 모듈은 해당 인터페이스의 요청에 따라 상기 설계 문서를 전송해주는 서버 로직을 서버 개발방식별로 자동으로 생성하고, 상기 설계 문서를 마크업 언어 코드로 생성할 수 있는 클라이언트 로직을 클라이언트 개발방식별로 자동으로 생성하는 것을 특징으로 하는 웹 앱 개발장치.
  5. 제1항에 있어서,
    상기 서버 개발방식은 서버에서 지원하는 스크립트 언어이고, 상기 클라이언트 개발방식은 클라이언트에서 지원하는 스크립트 언어인 것을 특징으로 하는 웹 앱 개발장치.
  6. 삭제
  7. 삭제
  8. 삭제
KR1020130119047A 2013-10-07 2013-10-07 웹 앱 개발 장치, 방법 및 컴퓨터로 판독 가능한 기록 매체 KR102150545B1 (ko)

Priority Applications (1)

Application Number Priority Date Filing Date Title
KR1020130119047A KR102150545B1 (ko) 2013-10-07 2013-10-07 웹 앱 개발 장치, 방법 및 컴퓨터로 판독 가능한 기록 매체

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
KR1020130119047A KR102150545B1 (ko) 2013-10-07 2013-10-07 웹 앱 개발 장치, 방법 및 컴퓨터로 판독 가능한 기록 매체

Publications (2)

Publication Number Publication Date
KR20150040483A KR20150040483A (ko) 2015-04-15
KR102150545B1 true KR102150545B1 (ko) 2020-10-26

Family

ID=53031809

Family Applications (1)

Application Number Title Priority Date Filing Date
KR1020130119047A KR102150545B1 (ko) 2013-10-07 2013-10-07 웹 앱 개발 장치, 방법 및 컴퓨터로 판독 가능한 기록 매체

Country Status (1)

Country Link
KR (1) KR102150545B1 (ko)

Families Citing this family (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR102377607B1 (ko) * 2020-06-23 2022-03-23 (주)지산웨어 정보시스템을 설계하여 프로그램과 데이터베이스를 자동으로 생성하고 테스트를 자동 수행하는 소프트웨어 공학플랫폼
CN111782330B (zh) * 2020-07-07 2024-01-26 赞同科技股份有限公司 一种基于Web应用的页面数据获取方法、装置及设备

Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
JP2000137600A (ja) * 1998-10-29 2000-05-16 Nec Corp クライアント／サーバアプリケーション作成方法及びその装置並びに情報記録媒体
JP2011128970A (ja) 2009-12-18 2011-06-30 Entermotion Co Ltd ウェブページ作成支援装置、ウェブページ作成支援方法、コンピュータプログラム
JP2011248574A (ja) 2010-05-26 2011-12-08 Mitsubishi Electric Corp データ処理装置及びデータ処理方法及びプログラム

Family Cites Families (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR20110060419A (ko) 2009-11-30 2011-06-08 한국전자통신연구원 자바스크립트를 이용한 웹 기반 소프트웨어 생성 장치 및 방법
KR20120091601A (ko) * 2011-02-09 2012-08-20 주식회사 엘지유플러스 애플리케이션 개발 및 등록을 위한 애플리케이션 자동 개발 툴

Patent Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
JP2000137600A (ja) * 1998-10-29 2000-05-16 Nec Corp クライアント／サーバアプリケーション作成方法及びその装置並びに情報記録媒体
JP2011128970A (ja) 2009-12-18 2011-06-30 Entermotion Co Ltd ウェブページ作成支援装置、ウェブページ作成支援方法、コンピュータプログラム
JP2011248574A (ja) 2010-05-26 2011-12-08 Mitsubishi Electric Corp データ処理装置及びデータ処理方法及びプログラム

Also Published As

Publication number Publication date
KR20150040483A (ko) 2015-04-15

Similar Documents

Publication Publication Date Title
KR102186865B1 (ko) 컨트롤 및 파트 부합 계층구조
Bruns et al. Web application tests with selenium
US10908928B2 (en) Rules-based workflow messaging
US20140173454A1 (en) Method and system for designing, deploying and executing transactional multi-platform mobile applications
US8370752B2 (en) Automatic personalization of user visualization and interaction in a service-oriented architecture interface
US11714625B2 (en) Generating applications for versatile platform deployment
US9311063B2 (en) Method for generating user interface using unified development environment
Ivanova et al. Using modern web frameworks when developing an education application: a practical approach
Genaro Motti et al. Simplifying the development of cross-platform web user interfaces by collaborative model-based design
Halliday Vue. js 2 Design Patterns and Best Practices: Build enterprise-ready, modular Vue. js applications with Vuex and Nuxt
KR102150545B1 (ko) 웹 앱 개발 장치, 방법 및 컴퓨터로 판독 가능한 기록 매체
KR102181630B1 (ko) 앱 에뮬레이션 장치 및 방법
Cocchiaro Selenium Framework Design in Data-driven Testing: Build Data-driven Test Frameworks Using Selenium WebDriver, AppiumDriver, Java, and TestNG
Nagesh et al. Cross-platform mobile application development
Colombo-Mendoza et al. Alexandria: A visual tool for generating multi-device rich internet applications.
Avdic React native vs xamarin-mobile for industry
KR101587637B1 (ko) 아이콘 기반 프로그래밍 보조 방법 및 이를 위한 제어장치
Phan Ionic 2 Cookbook
Usmani GUIDELINES FOR SELECTION OF WEB DESIGNING TOOL & FRAMEWORK FOR WEB FRONT-END APPLICATION
Ortiz Introducción a jQuery Mobile
Ho et al. Taking Control of Control Systems: A Student Developed, Multimedia and Simulation Tool for Control Systems Education
Hatfield et al. Taking Control of Control Systems: A student developed, multimedia and simulation tool for control systems education
Nagy Integrated Design Pattern for Intelligent Web Applications
Atanasova et al. IRIS STUDIO–Ide prototype for modeling adaptive user interfaces for business information systems
Resig et al. AngularJS and Testing

Legal Events

Date Code Title Description
A201 Request for examination
E902 Notification of reason for refusal
E701 Decision to grant or registration of patent right
GRNT Written decision to grant