KR102536567B1 - 그리드 규칙이 적용된 블록단위의 컨텐츠를 조립하여 적응형 웹페이지를 제작하는 웹페이지 제작 지원 방법 및 시스템 - Google Patents

그리드 규칙이 적용된 블록단위의 컨텐츠를 조립하여 적응형 웹페이지를 제작하는 웹페이지 제작 지원 방법 및 시스템 Download PDF

Info

Publication number
KR102536567B1
KR102536567B1 KR1020220147271A KR20220147271A KR102536567B1 KR 102536567 B1 KR102536567 B1 KR 102536567B1 KR 1020220147271 A KR1020220147271 A KR 1020220147271A KR 20220147271 A KR20220147271 A KR 20220147271A KR 102536567 B1 KR102536567 B1 KR 102536567B1
Authority
KR
South Korea
Prior art keywords
block
container
web page
user interface
blocks
Prior art date
Application number
KR1020220147271A
Other languages
English (en)
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 PCT/KR2022/018522 priority Critical patent/WO2023128285A1/ko
Application granted granted Critical
Publication of KR102536567B1 publication Critical patent/KR102536567B1/ko

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/103—Formatting, i.e. changing of presentation of documents
    • G06F40/106—Display of layout of documents; Previewing
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/103—Formatting, i.e. changing of presentation of documents
    • G06F40/117—Tagging; Marking up; Designating a block; Setting of attributes
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/166—Editing, e.g. inserting or deleting
    • G06F40/186—Templates
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/34—Graphical or visual programming
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06Q—INFORMATION AND COMMUNICATION TECHNOLOGY [ICT] SPECIALLY ADAPTED FOR ADMINISTRATIVE, COMMERCIAL, FINANCIAL, MANAGERIAL OR SUPERVISORY PURPOSES; SYSTEMS OR METHODS SPECIALLY ADAPTED FOR ADMINISTRATIVE, COMMERCIAL, FINANCIAL, MANAGERIAL OR SUPERVISORY PURPOSES, NOT OTHERWISE PROVIDED FOR
    • G06Q30/00—Commerce
    • G06Q30/06—Buying, selling or leasing transactions
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06Q—INFORMATION AND COMMUNICATION TECHNOLOGY [ICT] SPECIALLY ADAPTED FOR ADMINISTRATIVE, COMMERCIAL, FINANCIAL, MANAGERIAL OR SUPERVISORY PURPOSES; SYSTEMS OR METHODS SPECIALLY ADAPTED FOR ADMINISTRATIVE, COMMERCIAL, FINANCIAL, MANAGERIAL OR SUPERVISORY PURPOSES, NOT OTHERWISE PROVIDED FOR
    • G06Q30/00—Commerce
    • G06Q30/06—Buying, selling or leasing transactions
    • G06Q30/0601—Electronic shopping [e-shopping]
    • G06Q30/0641—Shopping interfaces

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • Computational Linguistics (AREA)
  • General Health & Medical Sciences (AREA)
  • Health & Medical Sciences (AREA)
  • Artificial Intelligence (AREA)
  • Audiology, Speech & Language Pathology (AREA)
  • Business, Economics & Management (AREA)
  • Finance (AREA)
  • Databases & Information Systems (AREA)
  • Accounting & Taxation (AREA)
  • Software Systems (AREA)
  • Data Mining & Analysis (AREA)
  • Development Economics (AREA)
  • Economics (AREA)
  • Marketing (AREA)
  • Strategic Management (AREA)
  • General Business, Economics & Management (AREA)
  • Information Transfer Between Computers (AREA)
  • Document Processing Apparatus (AREA)

Abstract

그리드 규칙이 적용된 블록단위의 컨텐츠를 조립하여 적응형 웹페이지를 제작하는 방법 및 이를 지원하는 컨테이너 블록형 구축을 이용한 전자상거래 솔루션 제공이 가능한 웹페이지 제작 지원 방법 및 시스템에 관한 것으로, 프론트엔드 등록 기능이 포함된 콘텐츠 단위의 블록을 구조화하는 단계, 상기 구조화된 블록 등록 정보 및 상기 구조화된 블록을 적어도 하나 이상 포함하는 컨테이너 정보를 생성하기 위한 사용자 인터페이스를 사용자 단말로 제공하는 단계, 사용자 단말로 제공된 사용자 인터페이스를 통해 상기 컨테이너 내에 포함되는 블록 편집 신호 및 컨테이너 배치를 위한 컨테이너 위치 변경 신호를 입력받는 단계 및 상기 입력받은 블록 편집 신호 및 컨테이너 위치 변경 신호에 대응되게 웹페이지를 구축하는 페이지 구축 단계를 포함하는 방법에 의해 웹페이지 제작 및 웹사이트 구축에 관련 지식이 없더라도 다양한 기능과 형태의 블록을 이용하여 손쉽게 조합하여 웹페이지 제작 및 웹사이트 구축이 가능한 웹페이지 제작 지원 시스템 및 방법을 제공할 수 있는 효과가 도출된다.

Description

그리드 규칙이 적용된 블록단위의 컨텐츠를 조립하여 적응형 웹페이지를 제작하는 웹페이지 제작 지원 방법 및 시스템{method and System of producing adaptive web pages by assembling block-by-block content to which grid rules are applied}
본 발명은 웹페이지 제작 지원 방법 및 시스템에 관한 것으로, 그리드 규칙이 적용된 블록단위의 컨텐츠를 조립하여 적응형 웹페이지를 제작하여 이를 지원하는 컨테이너 블록형 구축을 이용한 전자상거래 솔루션 제공이 가능한 웹페이지 제작 지원 방법 및 시스템에 관한 것이다.
일반적으로 웹페이지 제공 시스템은 서비스 관련 내용이 미리 정의된 템플릿을 이용하여 특정 컨텐츠가 포함된 웹페이지를 사용자들에게 제공한다. 또한, 개인에게 할당되는 개인 웹페이지 역시 미리 정의된 템플릿을 제공하고, 사용자가 입력한 컨텐츠가 미리 정의된 템플릿을 통해 노출된다. 즉, 사용자는 단순히 미리 정의된 템플릿 내에서 개별 컨텐츠들을 제어할 수 있을 뿐이다.
예를 들어, 상품 판매 사이트에서 사용자에게 할당되는 개인 웹페이지를 통해 자신의 상품을 광고하고자 하는 사용자들은 단순히 복수개의 테마들별로 미리 정의된 템플릿들 중에서 자신이 원하는 테마에 따른 템플릿을 선택할 수 있다. 이때, 사용자들은 선택한 템플릿에 따라 개별 컨텐츠들을 입력할 수 있고, 웹페이지 제공 시스템은 단순히 선택한 템플릿에 미리 정의된 위치에 대응하여 입력된 개별 컨텐츠들이 해당 위치에 노출되도록 개인 웹페이지를 구성하여 제공한다.
그러나, 이러한 종래기술에서 사용자들은 개인 웹페이지의 구성을 변경하기 위해, 테마를 변경하여 단순히 미리 정의된 다른 템플릿을 통해 개인 웹페이지를 구성하거나 또는 컨텐츠 단위로 직접 사용자가 입력한 컨텐츠의 위치를 변경해야 한다. 예를 들어, 웹페이지의 하단에 위치한 복수개의 컨텐츠들을 상단으로 이동시키는 경우, 사용자들은 복수개의 컨텐츠들 각각의 위치를 하단에서 상단으로 이동시켜야만 하는 불편함이 있다.
한편, 현재 웹페이지는 관련 지식을 가진 사람이 직접 제작을 하거나, 이미 만들어진 템플릿 사이트를 구입 또는, 구입한 사이트의 스킨을 교체하는 방식으로 제작될 수 있다.
또는 블로그 에디터 형식으로 화면에 글을 쓰거나 텍스트나 도형, 이미지를 넣어 웹페이지를 제작하는 방식으로 제공된다.
이때, 사용자들은 원하는 기능을 추가하거나 위치를 바꾸기 위해, 관련 지식이 있으면 소스를 수정하고, 관련 지식이 없으면 원하는 기능이 있는 템플릿이나 스킨으로 교체하여 새로 만들어야하는 불편함이 있다.
뿐만 아니라, 개인 웹 사이트가 아닌 쇼핑몰처럼 다양한 기능이 필요한 웹사이트에서는 개인이 직접 웹페이지를 수정하거나 새로운 기능을 직접 제작하는 데에는 어려움이 있다.
KR 10-1576095 B1
본 발명은 이 같은 기술적 배경에서 도출된 것으로, 웹페이지 제작 및 웹사이트 구축에 관련 지식이 없더라도 다양한 기능과 형태의 블록을 이용하여 손쉽게 조합하여 웹페이지 제작 및 웹사이트 구축이 가능한 웹페이지 제작 지원 시스템 및 방법을 제공함에 그 목적이 있다.
또한 전자상거래 쇼핑몰 구축시 기획과 디자인, 퍼블리싱, 개발 과정을 보다 쉽고 편리하게 수행할 수 있는 솔루션을 제공하여 쇼핑몰 구축 및 웹페이지 제작, 편집에 필요한 시간 및 노력을 단축시킬 수 있는 웹페이지 제작 지원 시스템 및 방법을 제공하고자 한다.
상기의 과제를 달성하기 위한 본 발명은 다음과 같은 구성을 포함한다.
즉 본 발명의 일 실시예에 따른 웹페이지 제작 지원 시스템에서 수행되는 방법은 프론트엔드 등록 기능이 포함된 콘텐츠 단위의 블록을 구조화하는 단계, 상기 구조화된 블록 등록 정보 및 상기 구조화된 블록을 적어도 하나 이상 포함하는 컨테이너 정보를 생성하기 위한 사용자 인터페이스를 사용자 단말로 제공하는 단계, 사용자 단말로 제공된 사용자 인터페이스를 통해 상기 컨테이너 내에 포함되는 블록 편집 신호 및 컨테이너 배치를 위한 컨테이너 위치 변경 신호를 입력받는 단계 및 상기 입력받은 블록 편집 신호 및 컨테이너 위치 변경 신호에 대응되게 웹페이지를 구축하는 페이지 구축 단계를 포함한다.
한편, 웹페이지 제작 지원을 위한 시스템은 프론트엔드 등록 기능이 포함된 콘텐츠 단위의 블록을 구조화하는 구조화부, 상기 구조화부에서 구조화된 블록 등록 정보 및 상기 구조화된 블록을 적어도 하나 이상 포함하는 컨테이너를 생성하기 위한 사용자 인터페이스를 사용자 단말로 제공하는 사용자 인터페이스 제공부, 상기 사용자 인터페이스 제공부에서 제공된 사용자 인터페이스를 통해 상기 컨테이너 내에 포함되는 블록 편집 신호 및 컨테이너 배치를 위한 컨테이너 위치 변경 신호를 입력받는 신호 입력부 및 상기 입력받은 블록 편집 신호 및 컨테이너 위치 변경 신호에 대응되게 웹페이지를 구축하는 웹페이지 구축부를 포함한다.
본 발명에 의하면 웹페이지 제작 및 웹사이트 구축에 관련 지식이 없더라도 다양한 기능과 형태의 블록을 이용하여 손쉽게 조합하여 웹페이지 제작 및 웹사이트 구축이 가능한 웹페이지 제작 지원 시스템 및 방법을 제공할 수 있는 효과가 도출된다.
또한 전자상거래 쇼핑몰 구축시 기획과 디자인, 퍼블리싱, 개발 과정을 보다 쉽고 편리하게 수행할 수 있는 솔루션을 제공하여 쇼핑몰 구축 및 웹페이지 제작, 편집에 필요한 시간 및 노력을 단축시킬 수 있는 웹페이지 제작 지원 시스템 및 방법을 제공할 수 있는 효과가 있다.
도 1 은 본 발명의 일 실시예에 따른 웹페이지 제작 지원을 위한 시스템의 동작을 설명하기 위한 예시도이다.
도 2 는 본 발명의 일 실시예에 따른 웹페이지 제작 지원 시스템에서 수행되는 웹페이지 제작 지원을 위한 방법의 전반적인 프로세스를 도시한 예시도이다.
도 3 은 본 발명의 일 실시예에 따른 웹페이지 제작 지원을 위한 방법의 흐름도이다.
도 4 는 일 실시예에 따른 블록 및 컨테이너의 개념을 설명하기 위한 예시도이다.
도 5 는 일 실시예에 따른 그리드 구조를 설명하기 위한 예시도이다.
도 6 은 일 실시예에 따른 그리드와 블록을 조합한 상태를 설명하기 위한 예시도이다.
도 7 은 본 발명의 일 실시예에 따른 블록 및 컨테이너 이동 방향을 도시한 예시도이다.
도 8 및 도 9 는 일 실시예에 따른 웹 페이지 템플릿 선택 과정을 설명하기 위한 예시도이다.
도 10 내지 도 17은 일 실시예에 따른 화면 유형별 블록 등록 정보 입력을 위한 블록 어드민 등록 화면의 예시도이다.
도 18 및 도 19는 일 실시예에 따른 웹페이지 구축 화면의 예시도이다.
본 발명에서 사용되는 기술적 용어는 단지 특정한 실시 예를 설명하기 위해 사용된 것으로, 본 발명을 한정하려는 의도가 아님을 유의해야 한다. 또한, 본 발명에서 사용되는 기술적 용어는 본 발명에서 특별히 다른 의미로 정의되지 않는 한, 본 발명이 속하는 기술 분야에서 통상의 지식을 가진 자에 의해 일반적으로 이해되는 의미로 해석되어야 하며, 과도하게 포괄적인 의미로 해석되거나, 과도하게 축소된 의미로 해석되지 않아야 한다.
이하, 첨부된 도면을 참조하여 본 발명에 따른 바람직한 실시예를 상세히 설명한다.
본 발명의 일 실시예에 따른 웹페이지 제작 지원을 위한 시스템은 적어도 하나의 컴퓨터 장치에 의해 구현될 수 있으며, 일 실시예에 따른 웹페이지 제작 지원 방법은 웹페이지 제작 지원을 위한 웹페이지 제작 지원 시스템(10)에 포함되는 적어도 하나의 컴퓨터 장치를 통해 수행될 수 있다.
이때, 웹페이지 제작 지원 시스템에는 본 발명의 일실시예에 따른 컴퓨터 프로그램이 설치 및 구동될 수 있고, 웹페이지 제작 지원 시스템은 구동된 컴퓨터 프로그램의 제어에 따라 본 발명의 실시예들에 따른 웹페이지 제작 지원 방법을 수행할 수 있다. 상술한 컴퓨터 프로그램은 웹페이지 제작 지원 시스템과 결합되고, 웹페이지 제작 지원 방법은 웹페이지 제작 지원을 위한 방법을 컴퓨터에 실행시키기 위해 컴퓨터 판독 가능한 기록매체에 저장될 수 있다.
이때, 컴퓨터 장치에는 본 발명의 일실시예에 따른 컴퓨터 프로그램이 설치및 구동될 수 있고, 컴퓨터 장치는 구동된 컴퓨터 프로그램의 제어에 따라 본 발명의 실시예들에 따른 웹페이지 제작 지원 방법은 웹페이지 제작 지원을 위한 방법을 수행할 수 있다. 상술한 컴퓨터 프로그램은 컴퓨터 장치와 결합되어 웹페이지 제작 지원 방법은 웹페이지 제작 지원을 위한 방법을 컴퓨터에 실행시키기 위해 컴퓨터 판독 가능한 기록매체에 저장될 수 있다.
도 1 은 본 발명의 일 실시예에 따른 웹페이지 제작 지원을 위한 시스템의 동작을 설명하기 위한 예시도이다.
도 1 의 네트워크 환경은 웹페이지 제작 지원을 위한 시스템(10) 및 사용자 단말(20) 이외에 복수의 전자기기들, 복수의 서버들, 네트워크(30)를 포함한다.
전자기기의 수나 서버의 수는 한정되는 것은 아니다. 사용자 단말(20)과 같은 복수의 전자기기들은 컴퓨터 장치로 구현되는 고정형 단말이거나 이동형 단말일 수 있다.
사용자 단말(20)은 예를 들면, 스마트폰(smart phone), 휴대폰, 내비게이션, 컴퓨터, 노트북, 디지털방송용 단말, PDA(Personal Digital Assistants), PMP(Portable Multimedia Player), 태블릿 PC 등이 있다. 본 발명의 실시예들에서 사용자 단말(20)은 실질적으로 무선 또는 유선 통신 방식을 이용하여 네트워크(30)를 통해 다른 전자 기기들 및/또는 서버와 통신할 수 있는 다양한 물리적인 컴퓨터 장치들 중 하나를 의미할 수 있다.
통신 방식은 제한되지 않으며, 네트워크가 포함할 수 있는 통신망(일례로, 이동통신망, 유선 인터넷, 무선 인터넷, 방송망)을 활용하는 통신 방식뿐만 아니라 기기들간의 근거리 무선 통신 역시 포함될 수 있다. 예를 들어, 네트워크(30)는, PAN(personal area network), LAN(local area network), CAN(campus area network), MAN(metropolitan area network), WAN(wide area network), BBN(broadband network), 인터넷 등의 네트워크 중 하나 이상의 임의의 네트워크를 포함할 수 있다. 또한, 네트워크(30)는 버스 네트워크, 스타 네트워크, 링네트워크, 메쉬 네트워크, 스타-버스 네트워크, 트리 또는 계층적(hierarchical) 네트워크 등을 포함하는 네트워크 토폴로지 중 임의의 하나 이상을 포함할 수 있으나, 이에 제한되지 않는다.
적응형 웹페이지 제작 지원 시스템(10)은 복수의 전자 기기들 및 사용자 단말(20)과 네트워크(30)를 통해 통신하여 명령, 코드, 파일, 컨텐츠, 서비스 등을 제공하는 컴퓨터 장치 또는 복수의 컴퓨터 장치들로 구현될 수 있다. 예를 들어, 웹페이지 제작 지원 시스템(10)은 네트워크(30)를 통해 접속한 복수의 전자 기기들로 서비스(일례로, 온라인 쇼핑몰 제작 서비스 등)를 제공하는 시스템일 수 있다.
일 실시예에 따른 적응형 웹페이지 제작 지원 시스템(10)은 사용자 단말(20)을 대상으로 클라이언트 상에 설치된 전용 어플리케이션이나 웹페이지 제작 지원 시스템(10)에 관련된 웹/모바일 사이트 접속을 통해 웹페이지 제작 지원 서비스를 제공할 수 있다. 적응형 웹페이지 제작 지원 시스템(10)에는 컴퓨터로 구현된 적응형 웹페이지 제작 지원 서비스를 위한 시스템이 구성될 수 있다. 일 예로 적응형 웹페이지 제작 지원 서비스를 위한 시스템은 독립적으로 동작하는 프로그램 형태로 구현되거나, 특정 어플리케이션의 인-앱(in-app) 형태로 구성되어 특정 어플리케이션 상에서 동작이 가능하도록 구현될 수 있다.
적응형 웹페이지 제작 지원 시스템(10)의 프로세서는 적응형 웹페이지 제작 서비스 지원 방법을 수행하기 위한 구성 요소로서 적어도 하나 이상의 구성요소를 포함할 수 있다. 실시예에 따른 프로세서의 구성요소들은 선택적으로 프로세서에 포함되거나 제외될 수 있다. 또한 실시예에 따라 프로세서 구성요소들은 프로세서의 기능을 표현하기 위해 분리 또는 병합될 수 있다.
적응형 웹페이지 제작 지원 시스템(10)의 프로세서는 메모리, 통신부, 입출력 인터페이스를 포함할 수 있다.
메모리(160)는 컴퓨터에서 판독 가능한 기록매체로서, RAM(random access memory), ROM(read only memory) 및 디스크 드라이브와 같은 비소멸성 대용량 기록장치(permanent mass storage device)를 포함할 수 있다. 여기서 ROM과 디스크 드라이브와 같은 비소멸성 대용량 기록장치는 메모리와는 구분되는 별도의 영구 저장 장치로서 적응형 웹페이지 제작 지원 시스템(10)에 포함될 수도 있다.
또한, 메모리(160)에는 운영체제와 적어도 하나의 프로그램 코드가 저장될 수 있다. 이러한 소프트웨어 구성요소들은 메모리와는 별도의 컴퓨터에서 판독 가능한 기록매체로부터 메모리로 로딩될 수 있다. 이러한 별도의 컴퓨터에서 판독 가능한 기록매체는 플로피 드라이브, 디스크, 테이프, DVD/CD-ROM 드라이브, 메모리 카드 등의 컴퓨터에서 판독 가능한 기록매체를 포함할 수 있다. 다른 실시예에서 소프트웨어 구성요소들은 컴퓨터에서 판독 가능한 기록매체가 아닌 통신부를 통해 메모리에 로딩될 수도 있다. 예를 들어, 소프트웨어 구성요소들은 네트워크를 통해 수신되는 파일들에 의해 설치되는 컴퓨터 프로그램에 기반하여 적응형 웹페이지 제작 지원 시스템(10)의 메모리(160)에 로딩될 수 있다.
프로세서는 기본적인 산술, 로직 및 입출력 연산을 수행함으로써, 컴퓨터 프로그램의 명령을 처리하도록 구성될 수 있다. 명령은 메모리(160) 또는 통신부(110)에 의해 프로세서로 제공될 수 있다. 예를 들어 프로세서는 메모리와 같은 기록 장치에 저장된 프로그램 코드에 따라 수신되는 명령을 실행하도록 구성될 수 있다.
통신부(110)는 네트워크를 통해 적응형 웹페이지 제작 지원 시스템(10)이 다른 장치(일례로, 앞서 설명한 저장 장치들)와 서로 통신하기 위한 기능을 제공할 수 있다. 일례로, 컴퓨터 장치의 프로세서가 메모리와 같은 기록 장치에 저장된 프로그램 코드에 따라 생성한 요청이나 명령, 데이터, 파일 등이 통신부(110)의 제어에 따라 네트워크를 통해 다른 장치들로 전달될 수 있다. 역으로, 다른 장치로부터의 신호나 명령, 데이터, 파일 등이 네트워크를 거쳐 통신부(110)를 통해 적응형 웹페이지 제작 지원 시스템(10)으로 수신될 수 있다. 통신부(110)를 통해 수신된 신호나 명령, 데이터 등은 프로세서나 메모리로 전달될 수 있고, 파일 등은 적응형 웹페이지 제작 지원 시스템(10)이 더 포함할 수 있는 저장 매체(영구 저장장치 등)로 저장될 수 있다.
또한, 다른 실시예들에서 적응형 웹페이지 제작 지원 시스템(10)은 도 1의 구성요소들보다 더 적은 혹은 더 많은 구성요소들을 포함할 수도 있다.
이하에서는 적응형 웹페이지 제작 지원 서비스를 제공하는 방법 및 시스템의 구체적인 실시예를 설명하기로 한다.
일 실시예에 따른 웹페이지 제작 지원을 위한 시스템(10)의 프로세서는 구조화부(120), 사용자 인터페이스 제공부(130), 신호 입력부(140) 및 웹페이지 구축부(150)를 더 포함한다.
구조화부(120)는 프론트엔드 등록 기능이 포함된 콘텐츠 단위의 블록을 구조화한다. 구조화부(120)는 웹페이지에 포함될 콘텐츠 단위의 블록을 프론트(화면)과 어드민(등록기능)이 조합되도록 구조화한다.
사용자 인터페이스 제공부(130)는 구조화부(120)에서 구조화된 블록 등록 정보 및 구조화된 블록을 적어도 하나 이상 포함하는 컨테이너를 생성하기 위한 사용자 인터페이스를 사용자 단말(20)로 제공한다. 예를 들어 사용자 단말(20)에서 구동되는 웹페이지 제작 지원 서비스 전용 앱 또는 사용자 단말(20)이 네트워크를 통해 접속가능한 웹페이지 제작 지원 서비스 웹사이트에 접속한 상태에서 사용자 인터페이스를 제공할 수 있다.
일 실시예에 있어서 컨테이너는 웹페이지가 개시되는 화면 너비를 기준으로 동일한 높이의 블록을 적어도 하나 이상 포함한다.
이때 사용자 인터페이스 제공부(130)는 너비와 간격이 일정한 격자 형태로 분할한 그리드에 기반하여 그리드 컬럼 단위로 상기 구조화된 블록의 이동에 의한 블록 편집 신호 및 상기 컨테이너 위치 변경 신호를 입력받는다.
사용자 인터페이스 제공부(130)는 컨테이너 내에 포함되는 블록들 중 하나를 선택받고, 선택받은 블록에 포함될 콘텐츠 정보를 입력받는다.
이때 콘텐츠 정보는, 텍스트 콘텐츠, 영상 콘텐츠, 배너 정보, 간편 결제 기능, 생체 인증 기능, 랭킹 기능 중 적어도 하나를 포함할 수 있다.
다른 실시예에 있어서 사용자 인터페이스 제공부(130)는 블록 및 컨테이너를 상이한 형태로 배치한 적어도 하나 이상의 템플릿 샘플을 사용자 단말(20)로 제시하고, 제시된 템플릿 중 하나를 선택받는다.
또한 사용자 인터페이스 제공부(130)는 블록별 노출 기간, 적어도 하나 이상의 메인 문구 및 서브 문구를 포함하는 배너 정보, 이미지 정보, 상품 등록 정보를 포함하는 블록 등록 정보를 입력받는다.
신호 입력부(140)는 사용자 인터페이스 제공부(130)에서 제공된 사용자 인터페이스를 통해 컨테이너 내에 포함되는 블록 편집 신호 및 컨테이너 배치를 위한 컨테이너 위치 변경 신호를 입력받는다.
그리고 웹페이지 구축부(150)는 신호 입력부(140)로 입력받은 블록 편집 신호 및 컨테이너 위치 변경 신호에 대응되게 웹페이지를 구축한다.
도 2 는 본 발명의 일 실시예에 따른 웹페이지 제작 지원 시스템에서 수행되는 웹페이지 제작 지원을 위한 방법의 전반적인 프로세스를 도시한 예시도이다.
일 실시예에 따른 웹페이지 제작 지원을 위한 방법은 PC 버전과 모바일 버전 디바이스마다 각각 최적화된 적응형 사용자 인터페이스를 제공한다.
즉, PC 버전과 모바일 버전 각각에 대해 블록으로 구조화된 콘텐츠를 조합하여 페이지를 구성할 수 있다. 이때 쉽고 간편한 사용을 위해서 블록이 미리 조합된 템플릿 페이지를 제공하는 것도 가능하다. 공통 페이지는 통합 스타일로 선택할 수 있도록 제공하고, 개별적으로 커스터마이징도 가능하게 구현된다.
또한 그리드 체계를 적용하여 다양한 블록 크기에 대한 규칙을 정립하도록 구현될 수도 있다. 그리드는 다양한 블록 크기에 대한 규칙을 정하기 위한 기준 용도로 사용된다.
개략적으로 일 실시예에 따른 웹페이지 제작 지원을 위한 방법은 사용자 단말로부터 솔루션 버전을 선택받는다. 예를 들어 BASIC, PRO, SPECIAL 버전 중 하나를 선택받을 수 있다. 그리고 블록(템플릿)을 조합하여 페이지 제작 부가 서비스를 신청한다. 그러면 고객 신청 사항에 대한 검수 및 상담 절차를 수행한 후 AWS 클라우드 서버, 데이터베이스(DB), API, 프론트(공통영역, 블록페이지), 어드민, SCM, CSM 등 추가 솔루션을 자동 생성한다. 이후에 사용자 인터페이스(UI), ERP, SI 추가기능 및 상품추천, 채팅등의 부가 서비스를 커스터마이징하고 제작된 웹페이지들로 구성된 웹사이트를 테스트 및 오픈하는 과정을 거칠 수 있다.
일반적으로 전자상거래 쇼핑몰 구축시에 기획+디자인+퍼블리싱+개발과정을 진행해야 한다. 개발 환경은 APP와 웹과 같은 프론트엔드, 백엔드, 어드민을 포함한다.
프론트 엔드(Front end)는 사용자에게 노출되는 서비스 화면이다. 프론트 엔드는 웹이나 앱의 화면 단위를 다루는 곳이다. 어떤 콘텐츠가 화면에 들어가고, 어디에 들어가는지, 어떻게 보일지 다루는 것이다.
프론트 엔드 개발자는 웹사이트나 앱 서비스에 들어가는 사용자 인터페이스(UI) 컴포넌트를 코드로 작성하고, 배치를 바꾸거나, 웹페이지 제작 지원 시스템(10)에 필요한 정보를 요청하는 기능을 만든다. 여기에 시각적으로 아름다운 배치와 편의성 등 모든 것을 한꺼번에 다루게된다. 백엔드 개발자는 이런 시스템을 설계하고 만드는 작업을 수행한다. 서비스 완성 이후 보수하는 역할도 수행한다. 백엔드는 프론트엔드와 달리 화면에 직접 보이지 않는다. 사용자가 입력한 정보와 각 화면에 들어가는 정보를 담고 있다.
백엔드는 단순한 페이지 이동에서부터 아이템 만들기, 수정, 삭제를 수행한다. 따라서 백엔드 개발자들에게는 시각적인 요소보다 데이터가 얼마나 정확한지, 데이터 전달 속도가 얼마나 빠른지가 중요요소이다.
일 실시예에 있어서, 블록은 프론트(화면)과 어드민(등록기능)이 조합되고, 컨테이너는 블록이 여러개 배치될 수 있도록 구현됨으로써 컨테이너의 위치를 변경함에 따라 다양한 전자상거래 형태를 다양하고 손쉽게 변경하여 구축할 수 있다.
블록은 새로운 템플릿을 제작하여 소비자에게 제공할 수 있고 이를 선택하여 조합형으로 사용할 수 있으며 간편 결제, 생체 인증, 랭킹, 래플 등의 특화된 기능을 편리하게 배치하여 SI 전자상거래 솔루션의 기능을 손쉽게 세팅함으로써 자체 기획자 없이도 솔루션 구축이 가능하다는 효과를 도출할 수 있다.
특히 임대몰의 경우에 솔루션 구매 후 스킨(디자인)을 별도 구매하고, 이후 개발사를 통한 퍼블리싱이나 어드민(백앤드)연결 작업을 별도로 진행함으로써 시간 및 비용이 지속적으로 발생하게 된다. 일 실시예에 따른 웹페이지 제작 지원을 위한 방법은 블록을 구조화하고 컨테이너 내에서 배치 가능케 함으로써 블록 및 컨테이너 조합만으로도 웹상에서 오픈이 가능하다. 또한 신규 기능 추가시에도 블록을 신청하면 바로 반영되는 형태로 구현될 수 있다.
도 3 은 본 발명의 일 실시예에 따른 웹페이지 제작 지원을 위한 방법의 흐름도이다.
일 실시예에 따른 웹페이지 제작 지원 시스템에서 수행되는 방법은 프론트엔드 등록 기능이 포함된 콘텐츠 단위의 블록을 구조화한다(S300).
블록은 화면상에 사각형 박스로 나타나는 부분으로, 하나의 블록ㅇㄴ 하나의 컨텐츠를 나타내는 단위로 구현될 수 있다. 블록은 프론트와 어드민 한 세트로 연결되어 있다. 블록은 크기가 다양하게 구현될 수 있다. 따라서 한 화면인 웹페이지에 배치시에 잘못 조합하며 레이아웃이 깨지게 보일 우려가 있다.
그리고 구조화된 블록 등록 정보 및 상기 구조화된 블록을 적어도 하나 이상 포함하는 컨테이너 정보를 생성하기 위한 사용자 인터페이스를 사용자 단말로 제공한다(S310).
즉, 블록이 한 화면상에서 배치가 잘못될 경우를 없애기 위해 컨테이너라는 개념 요소를 추가도입한다.
컨테이너는 한 화면 너비를 기준으로 동일한 높이를 가지는 블록을 1개 이상 조합할 수 있는 가상의 울타리와 같은 역할을 한다.
도 4 는 일 실시예에 따른 블록 및 컨테이너의 개념을 설명하기 위한 예시도이다.
도 4 와 같이 높이는 동일하지만 그 너비가 다양한 크기의 블록(400a, 400b)을 하나의 컨테이너(410a, 410b, 410c)에 담아서 입체적으로 컨테이너를 쌓아올려 웹페이지를 제작할 수 있다.
그리고 컨테이너(410a, 410b, 410c))는, 웹페이지가 개시되는 화면 너비를 기준으로 동일한 높이의 블록을 적어도 하나 이상 포함할 수 있다. 예를 들어 컨테이너 400a는 하나의 블록이 포함되고, 컨테이너 400b에는 3개의 블록이 포함된다. 이때 하나의 컨테이너에 포함되는 적어도 하나 이상의 블록들은 그 높이가 동일하도록 구현된다.
이후에 사용자 단말로 제공된 사용자 인터페이스를 통해 컨테이너 내에 포함되는 블록 편집 신호 및 컨테이너 배치를 위한 컨테이너 위치 변경 신호를 입력받는다(S320).
본 발명의 일 양상에 있어서, 위치 변경 신호를 입력받는 단계는, 너비와 간격이 일정한 격자 형태로 분할한 그리드에 기반하여 그리드 컬럼 단위로 구조화된 블록의 이동에 의한 블록 편집 신호 및 컨테이너 위치 변경 신호를 입력받는다.
도 5 는 일 실시예에 따른 그리드 구조를 설명하기 위한 예시도이다.
도 5 와 같이 그리드는 화면을 크기와 간격이 일정한 격자 형태로 분할한 형태로 구현되며, 블록 및 컨테이너 편집을 위한 가이드라인을 제공할 수 있다.
그리드 컬럼 단위로 블록 및 컨테이너 위치 변경을 수행함으로써 페이지 편집시 페이지 가독성과 심미성을 향상시킬 수 있다.
도 6 은 일 실시예에 따른 그리드와 블록을 조합한 상태를 설명하기 위한 예시도이다.
도 6과 같이 그리드를 적용하여 다양한 화면을 체계적으로 구성할 수 있다.
그리드는 한 화면상에서 예를 들어 12 컬럼 그리드를 적용하도록 구현될 수 있고 좌우 구분하여 각각 상이한 비율로 화면을 구성하도록 구현될 수도 있다.
즉 그리드를 적용함으로써 화면이 정돈되도록 보일 수 있고 블록 이동의 가이드가 될 수 있다.
도 7 은 본 발명의 일 실시예에 따른 블록 및 컨테이너 이동 방향을 도시한 예시도이다.
도 7과 같이 블록은 컨테이너 내에서 좌우로 이동가능하고, 컨테이너는 상하로 이동할 수 있다. 또한 블록의 이동은 그리드 단위로 이동 가능하고 높이가 동일한 컨테이너 내에서 수행되어야 한다.
한편 블록을 상이한 컨테이너로 이동하고자 하는 경우에는, 이동 대상 컨테이너의 높를 파악하고 이동하고자 하는 블록의 높이가 이동 대상 컨테이너에 일치하도록 블록 사이즈를 가변시키도록 이미지 스케일링(image scaling)을 수행하도록 구현될 수 있다. 또는 컨테이너와 블록의 높이 사이즈가 일치하지 않는 경우에 이에 대한 통보 및 진행 불가 메시지를 출력할 수도 있다.
이때 그리드 기반의 화면상에서 블록을 배치함에 있어서, 블록이 배치되지 않은 비어있는 그리드가 있거나 높이가 다른 블록이 상이한 컨테이너 영역으로 상호 침범하지 않도록 배치해야 한다. 즉, 그리드 패턴상에 다양한 블록의 크기와 위치를 설정하면서 블럭이나 컨테이너가 존재하지 않는 빈 그리드가 존재하거나, 높이나 사이즈가 다른 블록이 상호 인접하여 비율을 해치는 경우에도 해당 사항의 통보 및 진행 불가 메시지를 출력하도록 구현될 수 있다.
진행 불가 메시지를 출력하는 경우 다음 단계로 진행이 되지 않도록 구현되거나, 개선을 위한 동작을 수행하도록 편집 기능을 제공할 수 있다.
본 발명의 일 양상에 있어서, 위치 변경 신호를 입력받는 단계는 적어도 하나 이상의 블록 및 컨테이너를 상이한 형태로 배치한 템플릿을 제시하고, 제시된 템플릿 중 하나를 선택받는다.
블록을 조합하여 화면을 디자인할 수 있는데, 화면에 디자인된 블록은 외부 사용자에게 공개하거나 내부에서 사용될 때 각각의 블록에 대해 이미지화하여 보여주고 선택받는 기술적 구성을 포함한다.
도 8 및 도 9 는 일 실시예에 따른 웹 페이지 템플릿 선택 과정을 설명하기 위한 예시도이다.
도 8 및 도 9 와 같이 화면을 구성할 수 있는 다양한 형태의 블록 조합으로 이루어진 화면의 템플릿 포트폴리오를 제공할 수 있다.
템플릿 포트폴리오 목록에서 하나를 선택함으로써 블록 및 컨테이너 조합을 선택하여 웹페이지 템플릿 형태를 입력받을 수 있다.
예를 들어 템플릿 포트폴리오 목록은 상품이나 기획전 리스트에 활용할 수 있는 템플릿 포맷을 제공한다. 이때 블록의 조합은 다양한 형태로 구현될 수 있다. 템플릿 포트폴리오의 각 블록은 블로그, 뉴스, 매거진 등의 포맷마다 다양한 형태 조합으로 이루어진다.
일 실시예에 있어서, 위치 변경 신호를 입력받는 단계는 컨테이너 내에 포함되는 블록들 중 하나를 선택받고, 선택받은 블록에 포함될 콘텐츠 정보를 입력받되, 콘텐츠 정보는 텍스트 콘텐츠, 영상 콘텐츠, 배너 정보, 간편 결제 기능, 생체 인증 기능, 랭킹 기능, 래플 기능 중 하나를 포함한다. 그러나 이에 한정되는 것은 아니다.
일 양상에 있어서, 사용자 인터페이스를 제공하는 단계는 블록별 노출 기간, 적어도 하나 이상의 메인 문구 및 서브 문구를 포함하는 배너 정보, 이미지 정보, 상품 등록 정보를 포함하는 블록 등록 정보를 입력받는 블록 어드민 등록화면을 제공한다.
도 10 내지 도 17은 일 실시예에 따른 화면 유형별 블록 등록 정보 입력을 위한 블록 어드민 등록 화면의 예시도이다.
도 10과 같이 단일 블록 어드민 등록의 경우 메인 타이틀과 서브타이틀을 입력받고 각각에 대한 노출 여부를 설정받을 수 있다. 그리고 해당 블록에 대한 노출기간, 모바일 버전과 PC 버전에 대한 배너 정보 및 상품 등록 정보를 입력받는다.
도 11과 같이 목록 드롭다운이 가능한 복수 등록형 화면을 제공할 수도 있다. 적어도 하나 이상의 배너에 대해 모바일 버전과 PC 버전에 대한 배너 정보 및 노출 설정 정보, 순서 편집 신호를 입력받기 위한 블록 어드민 등록화면을 제공한다.
도 12는 블록 어드민 등록화면에서 배너 타입을 입력받는 화면의 예시도이다. 적어도 하나 이상의 배너(배너1, 배너2..)의 노출기간과 사용 여부, 모바일 버전과 PC 버전에 대한 메인문구와 서브문구, 링크 URL 정보 및 이미지 정보를 입력받는다.
그리고 도 13은 블록 어드민 등록화면에서 상품 타입을 입력받는 화면의 예시도이다. 도 13과 같이 각 상품에 대한 노출 여부설정, 상품 타이틀, 상품 등록 정보를 입력받는 화면을 제공한다.
도 14는 탭+배너타입 설정을 위한 블록 어드민 등록화면 예시도이다.
이에 따라 화면상에 표시되는 적어도 하나 이상의 탭들 중 선택받은 탭에 매칭되게 출력될 배너를 설정받을 수 있다.
도 15는 탭+상품타입 설정을 위한 블록 어드민 등록화면 예시도이다.
화면상에 표시되는 적어도 하나이상의 탭들 중 선택받은 탭에 매칭되게 출력될 적어도 하나 이상의 상품을 설정받을 수 있다.
도 16은 배너+상품타입 설정을 위한 블록 어드민 등록화면 예시도이고, 도 17은 탭+배너+상품타입 설정을 위한 블록 어드민 등록화면 예시도이다.
그리고 입력받은 블록 편집 신호 및 컨테이너 위치 변경 신호에 대응되게 웹페이지를 구축한다(S330).
도 18 및 도 19는 일 실시예에 따른 웹페이지 구축 화면의 예시도이다.
도 18은 탭+배너타입 설정을 위한 블록 어드민 등록화면을 통해 입력된 블록 편집 신호 및 컨테이너 위치 변경 신호에 대응되게 구축된 웹페이지이고, 도 19는 탭+상품타입 설정을 위한 블록 어드민 등록화면을 통해 입력된 블록 편집 신호 및 컨테이너 위치 변경 신호에 대응되게 구축된 웹페이지이다. 즉, 블록 편집 신호 및 컨테이너 위치 변경 신호에 대응되게 콘텐츠들이 각각 해당 위치에 표시되도록 웹페이지를 구축한다.
전술한 방법은 애플리케이션으로 구현되거나 다양한 컴퓨터 구성요소를 통하여 수행될 수 있는 프로그램 명령어의 형태로 구현되어 컴퓨터 판독 가능한 기록 매체에 기록될 수 있다. 상기 컴퓨터 판독 가능한 기록 매체는 프로그램 명령어, 데이터 파일, 데이터 구조 등을 단독으로 또는 조합하여 포함할 수 있다.
상기 컴퓨터 판독 가능한 기록 매체에 기록되는 프로그램 명령어는 본 발명을 위하여 특별히 설계되고 구성된 것들이거니와 컴퓨터 소프트웨어 분야의 당업자에게 공지되어 사용 가능한 것일 수도 있다.
컴퓨터 판독 가능한 기록 매체의 예에는, 하드 디스크, 플로피 디스크 및 자기 테이프와 같은 자기 매체, CD-ROM, DVD 와 같은 광기록 매체, 플롭티컬 디스크(floptical disk)와 같은 자기-광 매체(magneto-optical media), 및 ROM, RAM, 플래시 메모리 등과 같은 프로그램 명령어를 저장하고 수행하도록 특별히 구성된 하드웨어 장치가 포함된다.
프로그램 명령어의 예에는, 컴파일러에 의해 만들어지는 것과 같은 기계어 코드뿐만 아니라 인터프리터 등을 사용해서 컴퓨터에 의해서 실행될 수 있는 고급 언어 코드도 포함된다. 상기 하드웨어 장치는 본 발명에 따른 처리를 수행하기 위해 하나 이상의 소프트웨어 모듈로서 작동하도록 구성될 수 있으며, 그 역도 마찬가지이다.
이상에서는 실시예들을 참조하여 설명하였지만, 해당 기술 분야의 숙련된 당업자는 하기의 특허 청구범위에 기재된 본 발명의 사상 및 영역으로부터 벗어나지 않는 범위 내에서 본 발명을 다양하게 수정 및 변경시킬 수 있음을 이해할 수 있을 것이다.
10 : 웨베이지 제작 지원 시스템 20 : 사용자 단말
30 : 네트워크 110 : 통신부
120 : 구조화부 130 : 사용자 인터페이스 제공부
140 : 신호 입력부 150 : 웹페이지 구축부
160 : 메모리

Claims (12)

  1. 웹페이지 제작 지원 시스템에서 수행되는 방법에 있어서,
    프론트엔드 등록 기능이 포함된 콘텐츠 단위의 블록을 구조화하는 단계;
    상기 구조화된 블록 등록 정보 및 상기 구조화된 블록을 적어도 하나 이상 포함하는 컨테이너 정보를 생성하기 위한 사용자 인터페이스를 사용자 단말로 제공하는 단계;
    사용자 단말로 제공된 사용자 인터페이스를 통해 상기 컨테이너 내에 포함되는 블록 편집 신호 및 컨테이너 배치를 위한 컨테이너 위치 변경 신호를 입력받는 단계; 및
    상기 입력받은 블록 편집 신호 및 컨테이너 위치 변경 신호에 대응되게 웹페이지를 구축하는 페이지 구축 단계;를 포함하고,
    상기 위치 변경 신호를 입력받는 단계는,
    너비와 간격이 일정한 격자 형태로 분할한 그리드에 기반하여 그리드 컬럼 단위로 상기 구조화된 블록의 이동에 의한 블록 편집 신호 및 상기 컨테이너 위치 변경 신호를 입력받으며,
    상기 컨테이너는,
    웹페이지가 개시되는 화면 너비를 기준으로 동일한 높이의 블록을 적어도 하나 이상 포함하고,
    상기 위치 변경 신호를 입력받는 단계는,
    블록별 노출 기간, 적어도 하나 이상의 메인 문구 및 서브 문구를 포함하는 배너 정보, 이미지 정보, 상품 등록 정보를 포함하는 블록 등록 정보를 입력받는 블록 어드민 등록화면을 제공하며,
    상기 사용자 단말로 제공하는 단계는 컨테이너 내에 포함되는 블록들 중 하나를 선택받고, 선택받은 블록에 포함될 콘텐츠 정보를 입력받고,
    PC 버전과 모바일 버전 각각에 대해 블록으로 구조화된 콘텐츠를 조합하여 페이지를 구성하며,
    상기 사용자 단말로 제공하는 단계는 블록 및 컨테이너를 상이한 형태로 배치한 적어도 하나 이상의 템플릿 샘플을 사용자 단말로 제시하고, 제시된 템플릿 포트폴리오 목록에서 하나를 선택받아, 블록 및 컨테이너 조합을 선택하여 웹페이지 템플릿 형태를 입력받거나, 개별적으로 커스터마이징가능하도록 블록 편집 화면을 제공하고,
    블록을 상이한 컨테이너로 이동하고자 하는 경우에는, 이동 대상 컨테이너의 높이를 파악하고 이동하고자 하는 블록의 높이가 이동 대상 컨테이너에 일치하도록 블록 사이즈를 가변시키도록 이미지 스케일링(image scaling)을 수행하는, 적응형 사용자 인터페이스를 제공하는 방법.
  2. 삭제
  3. 삭제
  4. 제 1 항에 있어서,
    상기 위치 변경 신호를 입력받는 단계는,
    상기 컨테이너 내에 포함되는 블록들 중 하나를 선택받고, 선택받은 블록에 포함될 콘텐츠 정보를 입력받되,
    상기 콘텐츠 정보는,
    텍스트 콘텐츠, 영상 콘텐츠, 배너 정보, 간편 결제 기능, 생체 인증 기능, 랭킹 기능, 래플 기능 중 하나를 포함하는 방법.
  5. 제 1 항에 있어서,
    상기 위치 변경 신호를 입력받는 단계는,
    적어도 하나 이상의 블록 및 컨테이너를 상이한 형태로 배치한 템플릿을 제시하고, 제시된 템플릿 중 하나를 선택받는 방법.
  6. 삭제
  7. 프론트엔드 등록 기능이 포함된 콘텐츠 단위의 블록을 구조화하는 구조화부;
    상기 구조화부에서 구조화된 블록 등록 정보 및 상기 구조화된 블록을 적어도 하나 이상 포함하는 컨테이너를 생성하기 위한 사용자 인터페이스를 사용자 단말로 제공하는 사용자 인터페이스 제공부;
    상기 사용자 인터페이스 제공부에서 제공된 사용자 인터페이스를 통해 상기 컨테이너 내에 포함되는 블록 편집 신호 및 컨테이너 배치를 위한 컨테이너 위치 변경 신호를 입력받는 신호 입력부; 및
    상기 입력받은 블록 편집 신호 및 컨테이너 위치 변경 신호에 대응되게 웹페이지를 구축하는 웹페이지 구축부;를 포함하고,
    상기 사용자 인터페이스 제공부는,
    너비와 간격이 일정한 격자 형태로 분할한 그리드에 기반하여 그리드 컬럼 단위로 상기 구조화된 블록의 이동에 의한 블록 편집 신호 및 상기 컨테이너 위치 변경 신호를 입력받으며,
    상기 컨테이너는,
    웹페이지가 개시되는 화면 너비를 기준으로 동일한 높이의 블록을 적어도 하나 이상 포함하고,
    상기 사용자 인터페이스 제공부는,
    블록별 노출 기간, 적어도 하나 이상의 메인 문구 및 서브 문구를 포함하는 배너 정보, 이미지 정보, 상품 등록 정보를 포함하는 블록 등록 정보를 입력받는 블록 어드민 등록화면을 제공하며,
    상기 사용자 인터페이스 제공부는 컨테이너 내에 포함되는 블록들 중 하나를 선택받고, 선택받은 블록에 포함될 콘텐츠 정보를 입력받고,
    PC 버전과 모바일 버전 각각에 대해 블록으로 구조화된 콘텐츠를 조합하여 페이지를 구성하며,
    상기 사용자 인터페이스 제공부는 블록 및 컨테이너를 상이한 형태로 배치한 적어도 하나 이상의 템플릿 샘플을 사용자 단말로 제시하고, 제시된 템플릿 포트폴리오 목록에서 하나를 선택받아, 블록 및 컨테이너 조합을 선택하여 웹페이지 템플릿 형태를 입력받거나, 개별적으로 커스터마이징가능하도록 블록 편집 화면을 제공하고,
    블록을 상이한 컨테이너로 이동하고자 하는 경우에는, 이동 대상 컨테이너의 높이를 파악하고 이동하고자 하는 블록의 높이가 이동 대상 컨테이너에 일치하도록 블록 사이즈를 가변시키도록 이미지 스케일링(image scaling)을 수행하는, 웹페이지 제작 지원 시스템.
  8. 삭제
  9. 삭제
  10. 제 7 항에 있어서,
    상기 사용자 인터페이스 제공부는,
    상기 컨테이너 내에 포함되는 블록들 중 하나를 선택받고, 선택받은 블록에 포함될 콘텐츠 정보를 입력받되,
    상기 콘텐츠 정보는,
    텍스트 콘텐츠, 영상 콘텐츠, 배너 정보, 간편 결제 기능, 생체 인증 기능, 랭킹 기능 중 적어도 하나를 포함하는, 웹페이지 제작 지원 시스템.
  11. 제 7 항에 있어서,
    상기 사용자 인터페이스 제공부는,
    블록 및 컨테이너를 상이한 형태로 배치한 적어도 하나 이상의 템플릿 샘플을 사용자 단말로 제시하고, 제시된 템플릿 중 하나를 선택받는 웹페이지 제작 지원 시스템.
  12. 삭제
KR1020220147271A 2021-12-29 2022-11-07 그리드 규칙이 적용된 블록단위의 컨텐츠를 조립하여 적응형 웹페이지를 제작하는 웹페이지 제작 지원 방법 및 시스템 KR102536567B1 (ko)

Priority Applications (1)

Application Number Priority Date Filing Date Title
PCT/KR2022/018522 WO2023128285A1 (ko) 2021-12-29 2022-11-22 그리드 규칙이 적용된 블록단위의 컨텐츠를 조립하여 적응형 웹페이지를 제작하는 웹페이지 제작 지원 방법 및 시스템

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
KR20210191236 2021-12-29
KR1020210191236 2021-12-29

Publications (1)

Publication Number Publication Date
KR102536567B1 true KR102536567B1 (ko) 2023-05-26

Family

ID=86536870

Family Applications (1)

Application Number Title Priority Date Filing Date
KR1020220147271A KR102536567B1 (ko) 2021-12-29 2022-11-07 그리드 규칙이 적용된 블록단위의 컨텐츠를 조립하여 적응형 웹페이지를 제작하는 웹페이지 제작 지원 방법 및 시스템

Country Status (2)

Country Link
KR (1) KR102536567B1 (ko)
WO (1) WO2023128285A1 (ko)

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR20020019328A (ko) * 2000-09-05 2002-03-12 주재선 홈페이지 제작 지원서버 및 제작 지원방법
JP2011170865A (ja) * 2011-03-18 2011-09-01 Canon Inc レイアウト決定方法および情報処理装置およびレイアウト決定プログラム
KR101576095B1 (ko) 2012-02-20 2015-12-10 네이버 주식회사 컴포넌트 단위로 구성된 웹페이지를 제공하는 웹페이지 제공 시스템 및 방법
JP2016502718A (ja) * 2012-11-14 2016-01-28 アマゾン テクノロジーズ インコーポレーテッド ページ取得イベント中のページプレビューの配信および表示
JP2020517039A (ja) * 2017-04-14 2020-06-11 ガムガム インコーポレイテッドＧｕｍｇｕｍ， Ｉｎｃ． オーバーレイコンテンツとのページの相互作用機能の維持

Family Cites Families (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR20030073001A (ko) * 2002-03-08 2003-09-19 (주) 오픈랩 웹사이트 제작을 위한 웹페이지 생성 및 편집방법
US7730082B2 (en) * 2005-12-12 2010-06-01 Google Inc. Remote module incorporation into a container document

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR20020019328A (ko) * 2000-09-05 2002-03-12 주재선 홈페이지 제작 지원서버 및 제작 지원방법
JP2011170865A (ja) * 2011-03-18 2011-09-01 Canon Inc レイアウト決定方法および情報処理装置およびレイアウト決定プログラム
KR101576095B1 (ko) 2012-02-20 2015-12-10 네이버 주식회사 컴포넌트 단위로 구성된 웹페이지를 제공하는 웹페이지 제공 시스템 및 방법
JP2016502718A (ja) * 2012-11-14 2016-01-28 アマゾン テクノロジーズ インコーポレーテッド ページ取得イベント中のページプレビューの配信および表示
JP2020517039A (ja) * 2017-04-14 2020-06-11 ガムガム インコーポレイテッドＧｕｍｇｕｍ， Ｉｎｃ． オーバーレイコンテンツとのページの相互作用機能の維持

Also Published As

Publication number Publication date
WO2023128285A1 (ko) 2023-07-06

Similar Documents

Publication Publication Date Title
US11853728B2 (en) System integrating a mobile device application creation, editing and distribution system with a website design system
CN107820701B (zh) 开发者交换系统
US10740548B2 (en) Dynamic report building using a heterogeneous combination of filtering criteria
CN111125560A (zh) 数据可视化处理方法、装置及计算机系统
US20090113317A1 (en) System and Method for Website Design
CN111367514B (zh) 页面卡片的开发方法和装置、计算设备和存储介质
KR101576095B1 (ko) 컴포넌트 단위로 구성된 웹페이지를 제공하는 웹페이지 제공 시스템 및 방법
CN117742832A (zh) 页面引导的配置方法、页面引导方法及设备
KR102536567B1 (ko) 그리드 규칙이 적용된 블록단위의 컨텐츠를 조립하여 적응형 웹페이지를 제작하는 웹페이지 제작 지원 방법 및 시스템
KR101602940B1 (ko) 컴포넌트 구조를 이용하여 사이트의 제작을 지원하는 사이트 관리 방법 및 시스템
KR20200110951A (ko) 생산자, 공급자 및 판매자를 온라인 쇼핑몰로 연결하는 프랜차이즈 가맹점 기반 온라인 쇼핑몰 서비스 제공 방법
KR101697290B1 (ko) 웹 브라우저에서 구현되는 웹사이트 제작 방법 및 시스템
CN112528204B (zh) 专题网页的制作方法及装置
CN108399173A (zh) 一种页面组件的样式配置、页面生成方法及其装置
Stavrakis et al. User Experience Requirements and Interface Design for the TouristHub Trip Planning Platform
CN116700701B (zh) 无代码软件开发方法、装置及电子设备
US20240086159A1 (en) System integrating a mobile device application creation, editing and distribution system with a website design system
Sonebäck et al. Navigating Trust: Developing a User-Centric Web Application for Parking Space Rentals: Enhancing Clarity and Trustworthiness through Navigability and Design
JP6485427B2 (ja) 情報処理装置、帳票システム、その処理方法及びプログラム
Mohammad Evaluating the Suitability of the MERN Stack in the Development of Food Delivery Applications
Masresha Changing Desktop application to real time Web application
Thombare et al. Web Based Tourist Travel Guide System
KR20230137120A (ko) 웹사이트 모듈 기반 웹사이트 제작 시스템 및 그 방법
Mooney Using Computer Science in Online Retail Careers
CN114527971A (zh) 一种业务流程导航模型设计方法、设备及介质

Legal Events

Date Code Title Description
E701 Decision to grant or registration of patent right
GRNT Written decision to grant