KR20220022287A

KR20220022287A - 이미지 최적화 처리 기반의 단일 및 대량 제작이 가능한 상품페이지 통합 제작 시스템

Info

Publication number: KR20220022287A
Application number: KR1020200103274A
Authority: KR
Inventors: 정준호; 이상준; 채동호; 연규훈
Original assignee: (주)골든웨일스; 정준호
Priority date: 2020-08-18
Filing date: 2020-08-18
Publication date: 2022-02-25

Abstract

본 발명은 이미지 최적화 처리 기반의 단일 및 대량 제작이 가능한 상품페이지 통합 제작 시스템에 관한 것으로, 보다 구체적으로는, 온라인 상(자사몰, 오픈마켓 및 플랫폼 입점 등)에서 상품을 판매하는 쇼핑몰의 경우, 그리고 제조사처럼 제품이 개발되어 제품 카탈로그를 제작해야 하는 경우 디자인에 대한 전문성과 매우 많은 시간과 비용이 발생하는 문제를 해결하도록 하기 위한 이미지 최적화 처리 기반의 단일 및 대량 제작이 가능한 상품페이지 통합 제작 시스템에 관한 것이다.

Description

이미지 최적화 처리 기반의 단일 및 대량 제작이 가능한 상품페이지 통합 제작 시스템{Integrated product page production system capable of single and mass production based on image optimization processing}

하나의 상품 페이지를 제작하는데 기획, 디자인 툴(포토샵) 등에 대한 전문성을 필요로 할 뿐만 아니라, 상품 페이지를 제작하는데 발생하는 비용(시간, 기능별 전문적 인력)을 필요로 하며, 기존에 제작되어 있는 상품 페이지를 재활용 하라도 신규 작업과 동일한 비용이 소모된다.

또한, 상품의 특성이나 내용이 바뀜으로 업데이트가 빈번하게 필요하는데도 불구하고, 현재 상품 페이지를 제작해주는 솔루션 등에서는 하나의 템플릿으로 벌크 형태의 대량 제작해주는 기능들이 없다. 또한 온라인 서비스이므로 대량 벌크 처리작업을 많은 다수가 접속하는 서버에서 처리하기에는 자원에 대한 문제가 있다.

모바일이나 PC 등 온라인에서 쇼핑몰에 접속하여 상품 페이지 열람시 인터넷 환경에 따른 차이가 있을 수 있겠지만 기본적으로 큰 용량의 이미지는 열람시 속도에 큰 영향을 미친다. 이렇게 상품 페이지 제작 후에는 이미지 최적화 작업(무손실 압축, 썸네일 생성, 워터마크, 리사이즈)까지 추가적으로 하기에는 놓치는 경우가 많아서 페이지 열람이 느려지는 의도치 않는 오류가 발생하기 쉬운 구조적인 문제점이 있다.

또한, 기존에 운영중인 상품 페이지 제작 솔루션은 온라인 기반의 구독형태의 과금으로 지속적인 비용 부담이 증가한다.

뿐만 아니라, 기존에 상품 페이지 제작 솔루션 등은 정해진 포맷(예시로 FAQ, 홍보 이미지, 상품 이미지 등) 내에서 제작을 하므로 포맷으로부터의 의존성이 발생하여 디자인이 제한적인 한계점이 있어 왔다.

대한민국 공개특허공보 제10-2003-0008188호(2003.01.24. 공개) 엑스엠엘을 이용한 홈페이지제작시스템 및 그 제작방법

본 발명은 상기의 문제점을 해결하기 위한 것으로, 사전에 제공되는 기본 템플릿으로 목적에 맞는 약간의 수정작업으로만 전문성에 대한 차이를 보완할 수 있을 뿐만 아니라, 템플릿을 이용하여 보다 더 쉽고 빠르게 시간을 최대한 단축 시킬 수 있는 프로세스로서 상품정보(데이터) 연결 및 구성요소 직접 편집 기능을 제공하도록 하기 위한 이미지 최적화 처리 기반의 단일 및 대량 제작이 가능한 상품페이지 통합 제작 시스템을 제공하기 위한 것이다.

또한, 본 발명은 기존에 제작되어 있는 템플릿, 상품 페이지 재활용시에는 제작 속도를 더욱 향상되고, 상품 페이지의 내용 업데이트에 대하여 유연하게 대처할 수 있을 뿐만 아니라, 벌크 제작 기능으로 대량의 제작 작업도 최단 시간내에 처리하고, 이미지 최적화 처리 기반의 단일 및 대량 제작이 가능한 상품페이지 통합 제작 시스템을 제공하기 위한 것이다.

또한, 본 발명은 제작이 완료된 상품 페이지 이미지 파일들도 대량 상관없이 빠른 시간내에 이미지 최적화 및 일괄 작업(무손실 압축, 썸네일 생성, 워터마크, 리사이즈)까지 처리 가능할 뿐만 아니라, 상품 페이지 제작과정에 있어서 비용대비 높은 생산성, 그리고 설치형으로 1회 구매시 영구사용하게 됨으로, 정기적인 과금으로 인한 비용 부담없이 엄청난 비용 절감 효과 창출할 수 있도록 하기 위한 이미지 최적화 처리 기반의 단일 및 대량 제작이 가능한 상품페이지 통합 제작 시스템을 제공하기 위한 것이다.

또한, 본 발명은 기능 오류 처리 및 가끔 모두에게 도움이 될 만한 기능들은 자동업데이트를 통하여 제공하고, 서로 다른 운영체제에서도 정상적으로 작동되는 크로스 플랫폼 소프트웨어를 제공하도록 하기 위한 자유롭게 레이아웃 구성요소 그룹을 생성/편집하여 정해진 포맷 내에서 제작이 되어야 하는 의존성을 제거할 수 있도록 하기 위한 이미지 최적화 처리 기반의 단일 및 대량 제작이 가능한 상품페이지 통합 제작 시스템을 제공하기 위한 것이다

그러나 본 발명의 목적들은 상기에 언급된 목적으로 제한되지 않으며, 언급되지 않은 또 다른 목적들은 아래의 기재로부터 당업자에게 명확하게 이해될 수 있을 것이다.

상기의 목적을 달성하기 위해 본 발명의 실시예에 따른 이미지 최적화 처리 기반의 단일 및 대량 제작이 가능한 상품페이지 통합 제작 시스템은, 복수의 사용자 단말(100); 및 각 사용자 단말(100)에게 무손실 압축, 썸네일 생성, 워터마크 적용 및 크기조절을 위한 앱을 제공하는 서비스 서버(300);를 포함하고, 상기 각 사용자 단말(100)은, 앱 기반으로 템플릿 제작을 시작함에 따라 단말 자체의 저장부에 템플릿이 저장되어 있어 템플릿 구조에 맞게끔 편집을 수행함에 있어서, 템플릿을 선택하고, 페이지 생성을 선택된 템플릿 구조에 맞게끔 편집을 수행하되, 페이지 편집 시에는 구성요소 데이터 연결과 구성요소 직접 편집을 통해 구성요소에 데이터를 연결하거나, 캔버스에서 직접 편집 하거나 상황에 맞는 방식으로 페이지 편집을 수행하는 것을 특징으로 할 수 있다.

이때, 사용자 단말(100)은, 미리 설정된 형식에 따라서 출력 설정(형식 또한 템플릿에서 사전설정 가능)에 따라 내보내기 기능으로 이미지 파일, PDF 파일, 웹문서 파일, 멀티미디어 파일 중 적어도 하나 이상의 형태로 출력을 수행하는 것을 특징으로 할 수 있다.

또한, 사용자 단말(100)은, 이미지 파일에 대한 이미지 최적화 여부 설정에 따라서 이미지 파일 최적화 작업을 수행하는 것을 특징으로 할 수 있다.

또한, 사용자 단말(100)은, 이미지 최적화 및 일괄작업으로, 무손실 압축, 썸네일 생성, 워터마크 적용 및 크기조절을 수행하는 것을 특징으로 할 수 있다.

또한, 사용자 단말(100)은, 최종적으로 완료된 결과물인 이미지 파일에 대해서 최적화 및 일괄 작업이 수행된 것과, PDF 파일, 웹문서 파일, 멀티미디어 파일에 대해서 수집을 통해 최종적으로 완료된 결과물을 파일로 도출하는 것을 특징으로 할 수 있다.

본 발명의 실시예에 따른 이미지 최적화 처리 기반의 단일 및 대량 제작이 가능한 상품페이지 통합 제작 시스템은, 사전에 제공되는 기본 템플릿으로 목적에 맞는 약간의 수정작업으로만 전문성에 대한 차이를 보완할 수 있을 뿐만 아니라, 템플릿을 이용하여 보다 더 쉽고 빠르게 시간을 최대한 단축 시킬 수 있는 프로세스로서 상품정보(데이터) 연결 및 구성요소 직접 편집 기능을 제공하는 효과가 있다.

또한, 본 발명의 다른 실시예에 따른 이미지 최적화 처리 기반의 단일 및 대량 제작이 가능한 상품페이지 통합 제작 시스템은, 기존에 제작되어 있는 템플릿, 상품 페이지 재활용시에는 제작 속도를 더욱 향상되고, 상품 페이지의 내용 업데이트에 대하여 유연하게 대처할 수 있을 뿐만 아니라, 벌크 제작 기능으로 대량의 제작 작업도 최단 시간내에 처리하고, 이미지 최적화 처리 기반의 단일 및 대량 제작이 가능한 상품페이지 통합 제작 시스템을 제공할 수 있다.

또한, 본 발명의 다른 실시예에 따른 이미지 최적화 처리 기반의 단일 및 대량 제작이 가능한 상품페이지 통합 제작 시스템은, 제작이 완료된 상품 페이지 이미지 파일들도 대량 상관없이 빠른 시간내에 이미지 최적화 및 일괄 작업(무손실 압축, 썸네일 생성, 워터마크, 리사이즈)까지 처리 가능할 뿐만 아니라, 상품 페이지 제작과정에 있어서 비용대비 높은 생산성, 그리고 설치형으로 1회 구매시 영구사용하게 됨으로, 정기적인 과금으로 인한 비용 부담없이 엄청난 비용 절감 효과 창출할 수 있는 효과가 있다.

뿐만 아니라, 본 발명의 다른 실시예에 따른 이미지 최적화 처리 기반의 단일 및 대량 제작이 가능한 상품페이지 통합 제작 시스템은, 기능 오류 처리 및 가끔 모두에게 도움이 될 만한 기능들은 자동업데이트를 통하여 제공하고, 서로 다른 운영체제에서도 정상적으로 작동되는 크로스 플랫폼 소프트웨어를 제공하도록 하기 위한 자유롭게 레이아웃 구성요소 그룹을 생성/편집하여 정해진 포맷내에서 제작이 되어야하는 의존성을 제거하는 효과가 있다.

도 1은 본 발명의 실시예에 따른 이미지 최적화 처리 기반의 단일 및 대량 제작이 가능한 상품페이지 통합 제작 시스템(1)을 나타내는 도면이다.
도 2는 본 발명의 실시예에 따른 이미지 최적화 처리 기반의 단일 및 대량 제작이 가능한 상품페이지 통합 제작 시스템(1)에 의한 상품페이지 제작 과정을 나타내는 도면이다.
도 3은 본 발명의 실시예에 따른 이미지 최적화 처리 기반의 단일 및 대량 제작이 가능한 상품페이지 통합 제작 시스템(1) 상에서 운용하는 상품 페이지 제작 시스템 계층 구조의 개념을 설명하기 위한 도면이다.
도 4는 본 발명의 실시예에 따른 이미지 최적화 처리 기반의 단일 및 대량 제작이 가능한 상품페이지 통합 제작 시스템(1)에 의해 수행되는 상품 페이지 제작 중 템플릿 제작 과정을 설명하기 위한 도면이다.
도 5는 본 발명의 다른 실시예에 따른 이미지 최적화 처리 기반의 단일 및 대량 제작이 가능한 상품페이지 통합 제작 시스템(1)에 의해 수행되는 상품 페이지 제작 중 템플릿 제작 과정을 설명하기 위한 도면이다.
도 6 및 도 7은 본 발명의 실시예에 따른 이미지 최적화 처리 기반의 단일 및 대량 제작이 가능한 상품페이지 통합 제작 시스템(1)에서 사용자 단말(100)에 제공한 상품 페이지 제작 UI 화면 설계로, 템플릿 편집 인터페이스를 나타내는 도면이다.
도 8은 본 발명의 실시예에 따른 이미지 최적화 처리 기반의 단일 및 대량 제작이 가능한 상품페이지 통합 제작 시스템(1)에서 사용자 단말(100)에 제공한 상품 페이지 제작 UI 화면 설계로, 템플릿 편집 인터페이스로 이미지 리스트 편집 창 인터페이스 설명(P014, P024 관련)에 대한 추가적인 UI 화면을 나타내는 도면이다.
도 9는 본 발명의 실시예에 따른 이미지 최적화 처리 기반의 단일 및 대량 제작이 가능한 상품페이지 통합 제작 시스템(1)에서 사용자 단말(100)에 제공한 상품 페이지 제작 UI 화면 설계로, 데이터를 수정하는 방식(페이지 데이터 연결 방식 / 캔버스 직접 편집 방식)(P023, P025 관련)에 대한 추가적인 UI 화면을 나타내는 도면이다.
도 10은 본 발명의 실시예에 따른 이미지 최적화 처리 기반의 단일 및 대량 제작이 가능한 상품페이지 통합 제작 시스템(1)에 의한 상품페이지 제작 과정 중 벌크제작 과정을 설명하기 위한 도면이다.
도 11은 본 발명의 실시예에 따른 이미지 최적화 처리 기반의 단일 및 대량 제작이 가능한 상품페이지 통합 제작 시스템(1)에 의한 상품페이지 제작 과정 중 이미지 최적화 과정을 나타내는 도면이다.
도 12는 본 발명의 실시예에 따른 이미지 최적화 처리 기반의 단일 및 대량 제작이 가능한 상품페이지 통합 제작 시스템(1)에 의한 상품페이지 제작 과정 중 이미지 최적화 과정을 위한 이미지 최적화 UI 화면의 영역별 역할을 나타내는 도면이다.
도 13은 본 발명의 실시예에 따른 이미지 최적화 처리 기반의 단일 및 대량 제작이 가능한 상품페이지 통합 제작 시스템(1)을 위한 사용자 단말(100) 상에서의 서비스 프로세스를 나타내는 도면이다.

이하, 본 발명의 바람직한 실시예의 상세한 설명은 첨부된 도면들을 참조하여 설명할 것이다. 하기에서 본 발명을 설명함에 있어서, 관련된 공지 기능 또는 구성에 대한 구체적인 설명이 본 발명의 요지를 불필요하게 흐릴 수 있다고 판단되는 경우에는 그 상세한 설명을 생략할 것이다.

본 명세서에 있어서는 어느 하나의 구성요소가 다른 구성요소로 데이터 또는 신호를 '전송'하는 경우에는 구성요소는 다른 구성요소로 직접 상기 데이터 또는 신호를 전송할 수 있고, 적어도 하나의 또 다른 구성요소를 통하여 데이터 또는 신호를 다른 구성요소로 전송할 수 있음을 의미한다.

도 1은 본 발명의 실시예에 따른 이미지 최적화 처리 기반의 단일 및 대량 제작이 가능한 상품페이지 통합 제작 시스템(1)을 나타내는 도면이다. 도 1을 참조하면, 이미지 최적화 처리 기반의 단일 및 대량 제작이 가능한 상품페이지 통합 제작 시스템(1)은 복수의 사용자 단말(100)로 이루어진 사용자 단말 그룹(100g), 네트워크(200) 및 서비스 서버(300)를 포함할 수 있다.

여기서 서비스 서버(300)는 사용자가 운영하는 데스크톱 컴퓨터로 형성 가능한 각 사용자 단말(100)로 네트워크(200)를 통해 상품 페이지 통합 앱(이하, 앱)을 다운로드 서비스를 제공해주는 역할을 수행한다.

앱을 수신한 각 사용자 단말(100)을 운영하는 사용자가 사용권한을 획득하기 위하여 앱을 통해 서비스 서버(300)로 인증 요청 후 인증 결과를 앱을 통해 회신받을 수 있다.

한편, 서비스 서버(300)는 사용자 단말(100)에 설치된 앱에 대한 업데이트 내용에 다운로드 서비스를 제공해주는 역할을 수행하며, 하나의 사용자가 운영하는 사용자 단말(100)에 설치된 앱에서 작성한 템플릿을 서비스 서버(300)에 업로드하는 경우, 서비스 서버(300)를 매개로 다른 사용자가 운영하는 다른 사용자 단말(100)이 네트워크(200)를 통해 템플릿을 다운로드받아 단말에 설치한 앱을 통해 내용을 불러와 사용할 수 있도록 하는 템플릿 데이터를 공유 서비스를 서비스 서버(300)가 수행하는 것이다.

이와 같이 근본적으로 상품 페이지/템플릿 모두 제작하고 결과를 생성하는 행위는 오로지 사용자 단말(100) 상에서 수행되며, 서비스 서버(300)는 결과물의 공유 서비스를 제공하는 것이다.

도 2는 본 발명의 실시예에 따른 이미지 최적화 처리 기반의 단일 및 대량 제작이 가능한 상품페이지 통합 제작 시스템(1)에 의한 상품페이지 제작 과정을 나타내는 도면이다. 도 2를 참조하면, 사용자 단말(100)은 앱 기반으로 템플릿 제작을 시작함에 있어서 단말 자체의 저장부에 템플릿이 저장되어 있어 템플릿 구조에 맞게끔 편집을 수행을 시작함에 따라(S11) 저장부에 저장된 템플릿을 선택하고(S12), 페이지 생성을 선택된 템플릿 구조에 맞게끔 편집을 수행하되(S13, S14), 페이지 편집에 있어서 구성요소 데이터 연결과 구성요소 직접 편집을 통해 구성요소에 데이터를 연결 하거나, 캔버스에서 직접 편집 하거나 상황에 맞는 방식으로 페이지를 편집을 수행할 수 있다(S15).

이후, 사용자 단말(100)은 형식에 따라서 출력 설정(형식 또한 템플릿에서 사전설정 가능)에 따라 내보내기 기능으로 이미지 파일, PDF 파일, 웹문서 파일, 멀티미디어 파일 형태로 출력을 수행할 수 있다(S16, S17).

여기서, 사용자 단말(100)은 이미지 파일에 대한 사용자 단말(100)의 이미지 최적화 여부 설정에 따라서 이미지 파일 최적화 작업을 수행하되, 이미지 최적화 작업 중 각각 설정여부에 따라 이미지 최적화 처리를 수행한다(S19).

보다 구체적으로, 사용자 단말(100)은 앱 기반으로 이미지 최적화 및 일괄작업으로, 무손실 압축, 썸네일 생성, 워터마크 적용 및 크기조절을 수행하는 것이다.

이후, 사용자 단말(100)은 최종적으로 완료된 결과물인 이미지 파일에 대해서 최적화 및 일괄 작업이 수행된 것과, PDF 파일, 웹문서 파일, 멀티미디어 파일에 대해서 수집을 통해 최종적으로 완료된 결과물을 파일로 도출할 수 있다(S19a).

한편, 사용자 단말(100)은 서비스 서버(300)에서 제공한 앱 기반으로 서비스 서버(300)로부터 앱 데이터를 제공받아 앱을 설치한 뒤, 앱 기반으로 페이지 벌크 작업(S21), 템플릿 선택 및 데이터 등록(S22), 선택된 템플릿 구조에 맞게끔 편집(S23), 리소스 파일 선택(S24), 진행(제작)(S25)을 자체적으로 수행할 수 있다.

이와 같이, 템플릿 제작본 발명(소프트웨어)은 상품 페이지 및 제품 카달로그 등을 일련의 과정을 통하여 매우 간편하고 빠르게 제작하며 제작된 결과물을 온라인 상으로 게시하고 게시물을 열람 시 열람(로딩) 속도를 단축시키기 위한 최적화 처리된 결과물을 제공하는 방법에 관한 것으로서, 상품 페이지 및 제품 카달로그등을 그리기 영역(캔버스)에 원하는 디자인으로 화면상에서 그리는 방식(Drawing) 을 이용하여 제작할 수 있으며, 화면에 보이는 그대로의 최종 제작된 결과물을 이미지 최적화 및 일괄처리 작업(이미지 무손실 압축, 워터마크 적용, 썸네일 이미지 생성, 이미지 크기 조절 등)처리까지 완료할 수 있다.

또한 상기 제작물들을 제작함에 있어서 비용절감 및 생산성 향상을 위하여 벌크(대량) 제작 기능을 제공하는 것을 주요 특징으로 한다.

도 3은 본 발명의 실시예에 따른 이미지 최적화 처리 기반의 단일 및 대량 제작이 가능한 상품페이지 통합 제작 시스템(1) 상에서 운용하는 상품 페이지 제작 시스템 계층 구조의 개념을 설명하기 위한 도면으로, 도 3을 참조하면, "페이지"는 최종적으로 산출되는 전체 페이지이며, "템플릿"은 페이지에서 사용하기 위해 사전 정의된 레이아웃 및 디자인이며, " 레이아웃 구성요소 그룹(캔버스)"은 디자인하는 템플릿에서 다양한 구성요소들을 그룹화 한 세부 페이지적인 개념(예시. 제품 카달로그 표지)이며, " 레이아웃 구성요소"는 캔버스에 그려지는 편집 가능한 다양한 구성요소들이며, "텍스트"는 레이블 및 설명 글이 필요시 사용되는 글상자이며, "이미지"는 아이콘, 스티커 등 목적의 디자인 된 그림이나 상품 사진이며, "도형"은 디자인에 활용될 수 있는 원형, 삼각형, 사각, 선 등의 다양한 도형이며, "표"는 표 형태로 입력된 데이터를 이미지 처리된 구성요소이며, "영상"은 화면에서 재생하기 위한 영상(영상파일이거나 URL링크)이며, "소리"는 화면에서 재생하기 위한 소리(소리파일이거나 URL링크)이며, "이미지 리스트 구성요소"는 복수의 이미지를 카드나 타일 형태의 구조로 디자인 하기 위해 조합처리 하기 위한 캔버스로, 텍스트, 이미지, 도형, 표, 영상, 소리로 구성될 수 있다.

도 4는 본 발명의 실시예에 따른 이미지 최적화 처리 기반의 단일 및 대량 제작이 가능한 상품페이지 통합 제작 시스템(1)에 의해 수행되는 상품 페이지 제작 중 템플릿 제작 과정을 설명하기 위한 도면이다. 도 4를 참조하면, 사용자 단말(100)은 앱 기반으로 앱을 통해 사전에 제공받은 공유 데이터를 활용하여 템플릿 설정(P001), 템플릿 생성(P002), 생성된 템플릿 선택(P003) 과정을 수행할 수 있다.

즉, 서비스 서버(300)는 상품 상세페이지 레이아웃에 대해서 정해진 구조로 관리하지 않으므로, 사용자인 사용자 단말(100)이 앱을 기반으로 자유롭게 직접 레이아웃을 설정하고, 해당 레이아웃에서는 그룹화된 구성요소들을 편집 가능하도록 캔버스에 드로잉 하며, 레이아웃 구성요소 그룹을 프로그램 전체적으로 이미 사전 구성화해 놓은 경우 매우 유동적인 레이아웃 디자인 작업간 의존성으로부터 자유로울 수가 없기 때문에 한정적인 디자인만 가능하므로 이러한 문제점을 레이아웃 구성요소 그룹은 드로잉 한다는 개념으로 정의하여 구조적인 의존성으로부터 분리하여 최종적인 결과물은 캔버스에 보이는 그대로 출력하는 개념을 적용할 수 있다.

보다 구체적으로, 사용자 단말(100)의 앱은 템플릿 선택(P003)에 따른 템플릿 편집 과정에 있어서, 사용자에 의해 입력된 요청에 따라 공통 구성요소(P004)로, 템플릿 기본 정보 설정(폼 입력 방식)(P005), 레이아웃 구성요소 그룹 설정(P006), 출력형식 선택(이미지, PDF, HTML/CSS)(P007)을 제공할 수 있으며, 템플릿 기본 정보 설정(폼 입력 방식)(P005)에 있어서, 불러오기를 통해서 템플릿 가로 사이즈 설정(구성요소 그룹 일괄적용), 템플릿 배경 설정(이미지, 색상)(구성요소 그룹 일괄적용)을 제공할 수 있다.

다음으로, 사용자 단말(100)의 앱은 템플릿 선택(P003)에 따른 템플릿 편집 과정에 있어서, 레이아웃 제작(레이아웃 구성요소 그룹 / 캔버스)(P008)에 있어서, 텍스트 구성요소(글꼴(서체), 글꼴 스타일)(P009), 텍스트 박스 구성요소(글꼴(서체), 글꼴 스타일, 박스 크기 설정)(P010), 도형 구성요소(도형 크기, 도형 테두리, 도형 스타일)(P011), 이미지 구성요소(이미지 사이즈)(P012), 표 구성요소(파일연결, 셀에 대한 세부설정)(P013)을 제공할 수 있다.

또한, 사용자 단말(100)의 앱은 템플릿 선택(P003)에 따른 템플릿 편집 과정에 있어서, 캔버스에서는 실시간으로 구성요소를 직접적으로 편집이 가능하도록 이미지 리스트 구성요소(리스트 아이템 사이즈 설정, 리스트 아이템 정렬 방식(카드, 타일))(P014)를 제공하되, (P009) 내지 (P012)의 구성요소 외에 이미지 리스트 영역 구성요소(이미지 사이즈)를 사용자 단말(100)에 제공할 수 있다.

또한, 사용자 단말(100)의 앱은 템플릿 선택(P003)에 따른 템플릿 편집 과정에 있어서, 구성요소 그룹 캔버스 세로 사이즈 설정(P015), 구성요소간 캔버스 배치 순서 정렬(P016), 구성요소를 다른 구성요소 그룹으로 복사(P017), 구성요소 복수 선택 그룹화(P018), 구성요소 속성 설정(P009 내지 P014), HTML/CSS 코드 편집(P019) 과정을 제공할 수 있다.

한편, 사용자 단말(100)의 앱은 템플릿 선택(P003)에 따른 템플릿 편집 과정 이후, 삭제(P020), 새 이름으로 저장(P021), 저장(P022) 과정을 입출력부에 제공할 수 있으며, 저장시 JSON 형태의 파일로 서버가 아닌 로컬 컴퓨터인 사용자 단말(100) 상으로 저장할 수 있다.

다음으로 도 5는 본 발명의 다른 실시예에 따른 이미지 최적화 처리 기반의 단일 및 대량 제작이 가능한 상품페이지 통합 제작 시스템(1)에 의해 수행되는 상품 페이지 제작 중 템플릿 제작 과정을 설명하기 위한 도면이다. 도 5를 참조하면, 사용자 단말(100)은 도 4에서의 템플릿 기본 정보 설정(폼 입력 방식)(P005)에서 불러오기가 수행된 경우, 페이지 데이터 연결(P023) 과정을 추가로 제공할 뿐만 아니라, 도 4에서의 이미지 리스트 구성요소(P014) 과정에서 리스트 아이템 사이즈 설정, 리스트 아이템 정렬 방식(카드, 타일), 외에 데이터 연결(P0024) 과정을 추가로 제공할 수 있다.

또한, 도 4의 삭제(P020) 과정 이후에 미리보기 외에 내보내기(P025) 과정을 추가로 제공할 수 있으며, 저장완료 후 이미지 최적화로 이동(P026)도 사용자 단말(100)에 제공할 수 있다.

또한, 내보내기(P025)에 있어서, JSON 형태의 파일로 서버가 아닌 로컬 컴퓨터인 사용자 단말(100)에 저장하도록 제어할 수 있으며, 저장완료 후 이미지 최적화로 이동(P026)에 있어서 저장 완료 후 이미지 최적화로 이동 시, 작업이 완료된 이미지 파일을 가지고, 이미지 최적화 설정으로 이동할 수 있도록 사용자 단말(100)의 앱이 제공할 수 있다.

즉, 사용자 단말(100)은 사용자에 의한 템플릿을 선택시, 사용자 단말(100) 상에서 해당 템플릿에 대한 구조에 맞게끔 데이터를 직접 편집 또는 일괄 편집 하는 구조의 작업을 거쳐 “내보내기” 작업을 실행하면, 지정된 출력형식 (이미지, PDF)에 맞게끔 출력이 되도록 할 수 있다.

다음으로 도 6 및 도 7은 본 발명의 실시예에 따른 이미지 최적화 처리 기반의 단일 및 대량 제작이 가능한 상품페이지 통합 제작 시스템(1)에서 사용자 단말(100)에 제공한 상품 페이지 제작 UI 화면 설계로, 템플릿 편집 인터페이스를 나타내는 도면이다.

먼저, 도 6을 참조하면, 템플릿 기본정보(U001)는 구성(P004, P005, P006, P007, P020, P021, P022, P023)와 관련되며, 템플릿에 대한 기본정보를 설정할 수 있는 기능들의 영역을 포함하고 있다. 템플릿 기본정보(U001) 영역에서 포함하고 있는 기능들은 레이아웃 구성요소 전역에 영향을 미치게 되며, 템플릿 설정과 공통 리소스 2개의 탭으로 구성되어 있으며, 탭을 선택하면 해당 기능이 활성화될 수 있다.

다음으로, 레이아웃 구성요소 그룹 탭(U002)은 구성(P008)와 관련되며, 생성된 레이아웃 구성요소 그룹들이 탭 버튼 형태로 나열되어 있으며, 특정 탭을 선택하면 해당하는 레이아웃 구성요소 그룹 영역(U004)이 활성화되며 캔버스에 나타난다. 캔버스에 만일 사전에 추가되었던 구성요소들이 존재한다면 불러와서 캔버스에 그려준다(Rendering), 또한 현재 활성화된 탭에서 다른 탭을 선택하면 작업중인 캔버스에 대한 데이터는 저장하고 선택한 탭, 캔버스가 활성화되며, 이 구성요소 그룹은 구성(P006)와 동기화되어 작용할 수 있다.

다음으로, 레이아웃 구성요소 툴바(U003)는 구성(P009, P010, P011, P012, P013, P014, P015, P016)와 관련되며, 캔버스에 그려지게 되는 구성요소들을 추가할 수 있는 버튼들이 모여있는 도구모음으로 그리고 요소 배치 버튼 (상향 화살표, 하향 화살표)를 누르면 캔버스에 그려진 구성요소들간 배치 순서를 조정할 수 있도록 하는 기능을 제공할 수 있다.

다음으로, 레이아웃 구성요소 그룹(캔버스)(U004)은 최종적으로 결과물로 도출이 되게 될 대상으로 생성하고 편집된 구성요소들이 그려지고 배치되는 캔버스를 제공할 수 있다.

다음으로 도 7을 참조하면, 텍스트 구성요소로 속성패널(U005)은 구성(P009)와 관련되며, 텍스트 구성요소를 선택하면 활성화되어 텍스트에 대한 속성을 편집할 수 있는 패널을 제공할 수 있다.

이미지 구성요소 속성패널(U006)은 구성(P008)와 관련되며, 이미지 구성요소를 선택하면 활성화되어 이미지 파일, 레이블, 사이즈 등을 편집할 수 있는 패널을 제공할 수 있다.

표 구성요소 속성패널(U007)은 구성(P009, P010, P011, P012, P013, P014, P015, P016)와 관련되며, 표 구성요소를 선택하면 활성화되어 표에 대한 스타일 속성을 편집하거나 파일을 불러와 데이터를 교체할 수 있는 패널을 제공할 수 있다.

표 구성요소 스프레드시트 편집 창(U008)은 구성(P013)와 관련되며, 표 구성요소를 선택하고 더블클릭하면 스프레드 시트 편집 형태로 창이 활성화되어 직접 데이터를 편집할 수 있는 패널을 제공할 수 있다.

공통 색상설정 컴포넌트(U009)는 특정 구성요소를 선택하고 나타나는 패널 안의 색상 버튼을 누르면 활성화되어 캔버스 배경 및 구성요소들의 배경,테두리,글꼴색상들을 변경할 수 있는 공통 색상설정 컴포넌트를 제공할 수 있다.

도형 구성요소 속성 패널(U010)은 구성(P011)와 관련되며, 도형 구성요소를 선택하면 활성화되어 도형에 대한 속성을 편집할 수 있는 패널을 제공할 수 있다.

공통구성요소 탭(U011)은 구성(P004)와 관련되며, 공통 구성요소 탭을 선택하면 공통 구성요소 설정 패널이 활성화되어, 캔버스에 있는 특정 구성요소를 선택하고 공통구성요소 등록 버튼을 클릭하면 공통구성요소로 저장되어 페이지나 템플릿 구분 없이 전역으로 사용할 수 있게끔 되는 공통 구성요소 설정 패널을 제공하고, 공통 구성요소에 등록된 구성요소를 선택하고 드래그하여 캔버스내로 드롭을 하면 해당 구성요소가 캔버스에 추가 배치되어지게 되는 기능을 제공할 수 있다.

HTML 코드 편집 창(U012)은 구성(P019)와 관련되며, 보다 전문적인 기능을 보유한 역할의 편집자들이 직접 코드를 편집하여 웹문서 형태의 레이아웃 구성요소 그룹을 편집할 수 있는 코드 편집기로, 이 코드 편집기능을 사용하기 위해서는 레이아웃 구성요소 유형이 HTML 유형이어야 사용가능하며 상품 페이지의 출력형식이 HTML/CSS 형태이어야만 HTML, CSS 파일형태로 출력할 수 있다.

다음으로 도 8은 본 발명의 실시예에 따른 이미지 최적화 처리 기반의 단일 및 대량 제작이 가능한 상품페이지 통합 제작 시스템(1)에서 사용자 단말(100)에 제공한 상품 페이지 제작 UI 화면 설계로, 템플릿 편집 인터페이스로 이미지 리스트 편집 창 인터페이스 설명(P014, P024 관련)에 대한 추가적인 UI 화면을 나타내는 도면이다. 도 8을 참조하면, 사용자 단말(100)의 앱은 입출력부로 템플릿 편집 작업간 이미지 리스트 편집 창(R001), 페이지 편집 작업간 이미지 리스트 편집 창(R002), 이미지 리스트 데이터 설정화면(R003) 데이터를 제공할 수 있다.

템플릿 편집 작업간 이미지 리스트 편집 창(R001)은 데이터 설정 버튼 영역(U013), 이미지 리스트 공통설정 영역(U014), 이미지 리스트 구성요소 내 세부 구성요소 속성패널(U015), 이미지 리스트 구성요소 캔버스 툴바(U016), 이미지 리스트 구성요소 캔버스(U017)을 포함할 수 있다.

페이지 편집 작업간 이미지 리스트 편집 창(R002)은 데이터 설정 버튼 영역(U013)을 포함하며, 파일 불러오기 대화상자를 구비한다.

이미지 리스트 데이터 설정화면(R003)은 선택된 파일목록과 박스를 구비한다.

각각의 구성요소에 대해서 살펴보면, 데이터 설정 버튼(U013)은 구성(P024)와 관련되며, 버튼을 클릭하면 데이터를 연결 할 수 있는 패널이 활성화되며 파일로 불러오기, 폴더로 불러오기, 초기화 등 이미지 리스트 영역에 직접적인 데이터 연결이 가능한 상태로 변환되도록 제공할 수 있으며, 구성(R001)로부터 구성(R002) 까지에 제공하며, 템플릿 편집 작업간에는 비활성화되어 보이지 않으며, 페이지 편집 상태이어야 활성화 상태로 화면에 보여지게 되는 구성요소이다.

다음으로, 이미지 리스트 공통설정(U014)은 구성(P014)과 관련되며, 이미지 리스트 구성요소의 제목을 정의하고 가로/세로 사이즈, 리스트의 정렬 방향 (카드, 타일)을 설정한다.

다음으로, 이미지 리스트 구성요소 내 세부 구성요소 속성 패널(U015)은 이미지 리스트 에디터 캔버스 영역에서 구성요소를 선택하면 구성요소의 속성 패널이 활성화 되고 속성을 편집할 수 있는 기능을 제공할 수 있다.

또한, 이미지 리스트 구성요소 캔버스 툴바(U016)는 툴바내에 아이콘으로 된 버튼들을 목적에 맞게 클릭하면 이미지 리스트 에디터 캔버스에 텍스트/이미지/도형/이미지 리스트 영역 등에 구성요소를 추가되도록 할 수 있다.

또한, 이미지 리스트 구성요소 캔버스(U017)는 이미지 리스트를 구성하는 구성요소들을 그리고 편집할 수 있는 캔버스. 캔버스내에 있는 요소들이 조합되어 이미지 리스트 설정 사항에 맞게끔 이미지 제작되어 레이아웃 구성요소 그룹 캔버스에 적용되어지는 구성요소이다.

한편, 템플릿 편집 작업간 이미지 리스트 편집 창(R001)은 템플릿 제작 작업시 레이아웃 구성요소 그룹에 등록된 이미지 리스트 구성요소를 더블클릭하거나 구성요소 툴바에 있는 이미지 리스트 버튼을 클릭하면 활성화되는 구성요소이다.

페이지 편집 작업간 이미지 리스트 편집 창(R002)은 템플릿 제작 작업과 동일한 기능을 모두 가지고 있으며, 페이지 제작 작업간에는 데이터 설정영역 버튼이 활성화되는 구성요소로, 활성화된 데이터 설정 버튼을 클릭하면 파일로 불러오기, 폴더로 불러오기, 초기화 등의 버튼이 나타나는데 파일 또는 폴더로 불러오는 버튼을 클릭하면 이미지 형식 파일을 불러올 수 있는 대화상자가 나타나며, 해당 파일을 선택하여 열기 하면, 이미지 리스트 데이터 설정화면과 같이 불러온 파일들이 썸네일 형태로 보여진다. 또한, 만일 캔버스 내에 텍스트 구성요소가 있다면 상 도 8과 같이 해당 텍스트 구성요소를 편집할 수 있는 입력박스가 활성화 되어 편집할 수 있다.

다음으로 이미지 리스트 데이터 설정화면(R003)은 불러온 이미지들과 이미지 리스트 구성요소 캔버스내에 등록된 구성요소들의 데이터를 편집할 수 있으며, 초기화 버튼을 누를 시 불러온 파일들의 정보가 초기화 될 수 있다.

다음으로 도 9는 본 발명의 실시예에 따른 이미지 최적화 처리 기반의 단일 및 대량 제작이 가능한 상품페이지 통합 제작 시스템(1)에서 사용자 단말(100)에 제공한 상품 페이지 제작 UI 화면 설계로, 데이터를 수정하는 방식(페이지 데이터 연결 방식 / 캔버스 직접 편집 방식)(P023, P025 관련)에 대한 추가적인 UI 화면을 나타내는 도면이다. 도 9를 참조하면, 페이지 데이터 연결 방식에 있어서, 표(데이터 리스트)에서 편집을 수행한다. 또한, 캔버스 직접 편집 방식에 있어서, 구성요소를 선택하여 편집(더블 클릭시 편집 상태로 변경)을 수행한다. 또한, 내보내기 결과물에 있어서, 페이지 제목이 폴더명으로 적용되어 폴더 생성되며, 캔버스에 보이는 화면 그대로 출력된 이미지 파일을 나타내며, 레이아웃 구성요소 그룹(캔버스) 제목이 각각의 이미지 파일이 되어 출력될 수 있다.

한편, 공통적인 사항으로는 페이지 데이터 연결 방식이나 캔버스 직접 편집 방식이나 모두 실시간으로 수정되어 캔버스에 반영될 수 있다.

하기의 표 1 내지 3은 상술한 구성요소와 그에 대한 작용을 설명하는 도표이다.

구성 번호	구성	작용
P001	템플릿 설정	템플릿을 설정할 수 있는 기본 화면으로 새로운 템플릿을 생성하고 템플릿 목록을 확인할 수 있으며, 목록 중 템플릿을 선택하여 템플릿 편집 화면으로 진입할 수 있다.
P002	템플릿 생성	새로운 템플릿을 생성하는 과정임.
P003	생성된 템플릿 선택	새롭게 생성된 템플릿은 템플릿 목록에 표시되며, 표시되는 템플릿 목록 중에서 템플릿을 선택할 수 있다. (템플릿 편집화면으로 진입)
P004	공통구성요소	공통구성요소 기능을 사용하는 과정 공통구성요소의 사용에 대해 공통구성요소는 템플릿이나 페이지에 대한 제한을 받지 않고 소프트웨어내 전역적으로 사용할 수 있는 공통적인 구성요소를 의미한다. 공통구성요소는 사용자가 직접 등록하거나 클라우드 형태로 통신을 통하여 추가할 수 있다. 공통구성요소에 등록된 구성요소들은 구성요소를 선택하고 드래그 앤드롭으로 캔버스 안에 추가할 수 있다.
P005	템플릿 기본정보 설정	선택된 템플릿에 대한 기본정보를 설정할 수 있는 과정으로 기본정보로는 템플릿 가로사이즈, 템플릿 배경 이미지/색상, 레이아웃 구성요소 그룹, 출력형식이 있다. 설정되는 기본정보는 레이아웃 구성요소 그룹에 일괄 적용되어 진다.
P006	레이아웃 구성요소 그룹 설정	템플릿에 대한 레이아웃을 구성하는 구성요소 그룹에 대한 설정을 하는 과정으로 구성요소 그룹을 생성, 삭제, 구성요소 그룹명 편집등이 가능하다. 구성요소 그룹을 생성하는 방식으로는 두 가지로 단일과 벌크 방식이 있다. 단일방식 설정에 대해 단일방식으로는 텍스트 박스에 구성요소 그룹명을 입력하여 엔터키나 플러스 아이콘 버튼을 누르면 실시간으로 생성되어어 목록에 추가되며 캔버스에서도 바로 활성화된다. 벌크 방식 설정에 대해 벌크 방식으로는 구성요소 벌크등록이란 버튼을 클릭하면 벌크 등록창이 활성화되어 줄바꿈이 가능한 텍스트 박스(MultiLine)에 1줄을 한 그룹으로 인식하여 예시로 10줄에 데이터를 입력하고 확인버튼을 누르면 10개의 구성요소 그룹이 생성된다.
P007	출력형식 선택	출력형식을 이미지나 PDF, HTML 등 선택하여 최종결과물을 선택하는 과정임. PDF 형식에 대해 PDF 형식을 선택시에는 모든 레이아웃 구성요소 그룹(캔버스)에 작성된 내용이 하나로 취합된 PDF 파일로 출력되어지는 방법이다. 이미지 형식에 대해 이미지를 선택시에는 이미지 형식(확장자) PNG, JPG 등으로 선택할 수 있다. HTML/CSS 형식에 대해 HTML을 선택시에는 최종결과물의 확장자가 html 파일로 스타일 정보를 구성하는 스타일시트(css, scss, sass) 등의 파일, 이미지 파일들과 함께 파일로 생성되어 출력하는 방법이다.
P008	레이아웃 제작	현재 활성화중인 레이아웃 구성요소 그룹(캔버스)를 제작하고 편집할 수 있는 과정임. 레이아웃 제작에 대해 레이아웃을 제작 시에는 캔버스에 그린다는 구조로 레이아웃을 제작. 각각의 구성요소들(텍스트/이미지/도형/이미지 리스트 등)을 캔버스에 추가하고 편집이 가능하다.
P009	텍스트 구성요소	텍스트 구성요소를 추가하고 속성을 편집할 수 있는 과정임 텍스트 구성요소에 대해 텍스트 아이콘 버튼을 클릭하면 캔버스에 텍스트 박스가 추가되고 텍스트 구성요소 속성창이 활성화된다. 캔버스에 추가된 텍스트 박스를 더블클릭하면 텍스트를 편집할 수 있으며, 활성화된 속성창에서는 글꼴(서체), 글꼴 색상, 글꼴 크기, 글꼴 스타일(기울기, 밑줄, 가운데줄 긋기, 굵기, 정렬<왼쪽/가운데/중간> ) 설정이 가능하며 설정값을 바꿀시 실시간 반영된다.
P0010	텍스트 박스 구성요소	텍스트 박스 구성요소를 추가하고 속성을 편집할 수 있는과정임. 텍스트 박스 구성요소에 대해 텍스트 박스 아이콘버튼을 클릭하면 캔버스에 지정된 가로 크기의 텍스트 박스가 추가되고 텍스트 구성요소 속성창이 활성화된다. 캔버스에 추가된 텍스트 박스를 더블클릭하면 텍스트를 편집할 수 있으며, 활성화된 속성창에서는 글꼴(서체), 글꼴 색상, 글꼴 크기, 글꼴 스타일(기울기, 밑줄,가운데줄 긋기, 굵기, 정렬<왼쪽/가운데/중간> ), 박스 크기 설정이 가능하며 설정값을 바꿀시 실시간 반영된다.
P0011	도형 구성요소	도형 구성요소를 추가하고 속성을 편집할 수 있는 과정임. 도형 구성요소에 대해 도형 아이콘 버튼을 클릭하면 다양한 모형의 도형 아이콘(예시삼각형, 사각형, 원, 선 등)이 활성화되어 그 중 선택하면 캔버스에 추가되고, 도형 구성요소 창이 활성화된다. 속성창에서는 도형 크기, 테두리 굵기, 도형 및 테두리 색상을 설정할 수 있으며, 설정값 변경시 실시간 반영된다.

구성 번호	구성	작용
P012	이미지 구성요소	이미지 구성요소를 추가하고 속성을 편집할 수 있는 과정임. 이미지 구성요소에 대해 이미지 아이콘 버튼을 클릭하면 이미지 파일을 선택할 수 있는 대화상자가 활성화되고 그 중 파일을 선택하면 캔버스에 추가되고 속성창이 활성화된다. 속성창에서는 이미지 크기, 위치 등을 설정할 수 있으며 설정값 변경시 실시간 반영된다.
P013	표 구성요소	현재 활성화된 구성요소 그룹(캔버스)에 표 구성요소를 추가하고 편집하는 과정임. 표 구성요소에 대해 표 아이콘버튼을 클릭하거나 캔버스에 추가된 표를 더블클릭하면 표 편집 구성요소 패널이 활성화되어 표에 대한 속성을 편집할 수 있다. 표에 대한 속성에서는 제목셀과 본문셀로 구분하여 스타일을 설정할 수 있으며, 열 간격도 입력받아 설정할 수 있는 방식과, 직접표 편집기가 활성화되어 스프레드 시트를 편집할 수 있는 방식도 선택이 가능 하다. (화면설계에서 추가 설명)
P014	이미지 리스트 구성요소	다수의 이미지를 리스트 구조<단일 이미지이거나 바둑판(타일) > 형식으로 조합하여 캔버스에 등록하는 과정임. 이미지 리스트 구성요소에 대해 이미지 리스트 아이콘 버튼을 클릭하면 이미지 리스트 편집에 디터창이 활성화되고 그 창에서는 이미지 리스트 구성정보와 그리기 방식으로 아이템 템플릿을 구성하는 캔버스, 구성요소 (텍스트, 이미지, 도형, 이미지 리스트 영역 등)를 추가할 수 있는 툴바, 구성요소가 선택 되었을 때 속성을 편집할 수 있는 속성 창이 활성화 된다. 이미지 리스트 에디터 구성 편집을 완료하고 적용하면 레이아웃 구성요소 그룹(캔버스)에 이미지 리스트 영역이라는 이미지가 생성되어 추가 된다. ( 화면설계도면에서 추가 설명)
P015	구성요소 그룹 세로 사이즈 설정	현재 활성화된 구성요소 그룹(캔버스) 세로를 실시간으로 수정하는 과정임.
P016	구성요소간 캔버스 배치 순서 설정	현재 활성화된 구성요소 그룹의 선택된 구성요소들의 배치 순서를 설정하는 과정임. 구성요소간 캔버스 배치 순서 설정에 대해 캔버스 내의 구성요소를 선택하고 배치 순서(위로, 아래로)를 조정할 수 있다. 예시로 두개의 구성요소가 겹쳐져 있을 때 하나의 구성요소를 선택 후 위로(위쪽 화살표) 버튼을 클릭하면 선택된 구성요소가 위로 올라오며 배치가 된다.
P017	구성요소를 다른 구성요소 그룹으로 복사	현재 선택된 구성요소를 지정된 구성요소 그룹으로 일괄적으로 복사하는 과정임. 구성요소를 다른 구성요소 그룹으로 복사에 대해 캔버스 내에의 구성요소를 선택하고 구성요소 그룹 목록을 활성화 한 후 선택하여 복사 버튼을 누르면 선택된 구성요소 그룹에 복사가 된다. 예시로 정해진 포맷의 제목을 각각의 레이아웃 구성요소 그룹에 사용코자 할 때 일괄적으로 복사할 수 있다.
P018	구성요소를 복수로 선택하여 그룹화	다수의 구성요소를 선택하여 그룹화 하는 과정임. 구성요소를 복수로 선택하여 그룹화에 대해 캔버스 내의 다수의 구성요소를 시프트키를 누른 채 클릭하여 복수로 선택하여 이동하면 선택된 구성요소들이 일괄적으로 이동한다거나 그룹화 버튼을 클릭하여 그룹화 시킬수 있다.

구성 번호	구성	작용
P019	HTML/CSS 코드 편집	HTML/CSS 코드 편집하는 과정임. HTML/CSS 코드를 편집하는 과정 유형을 HTML로 변경했을 시 에는 코드 편집기가 활성화되며 보다 전문가들이 직접 코드를 작성하여 미리보기에서 웹문서 형태로 결과물을 확인할 수 있다.
P020	삭제	현재 편집중인 템플릿을 삭제하는 과정으로 해당하는 템플릿 정보 폴더(디렉토리)를 삭제하고 폴더안에 파일까지 삭제하는 과정임
P021	새 이름으로 저장	현재 편집중인 템플릿을 새로운 이름으로 복사하여 입력받은 새로운 이름으로 저장하는 과정임
P022	저장	현재 편집중인 템플릿을 저장하는 과정임.
P023	공통 구성요소	공통구성요소기능을사용하는과정임. 공통구성요소를 사용에 대해 공통구성요소는 템플릿이나 페이지에 대한 제한을 받지않고 소프트웨어내 전역적으로 사용할 수 있는 공통적인 구성요소를 의미한다. 공통구성요소는 사용자가 직접 등록하거나 클라우드 형태로 통신을 통하여 추가할 수 있다. 공통구성요소에 등록된 구성요소들은 구성요소를 선택하고 드래그 앤 드롭으로 캔버스 안에 추가할 수 있다.
P024	페이지 데이터 연결	현재 제작중인 페이지에 데이터를 연결하는 과정임. 페이지 데이터 연결에 대해 페이지 데이터 연결 스위치를 활성화 하면 캔버스에 등록된 구성요소들에 대하여 데이터를 편집할 수 있는 표가 활성화되어 속성 값을 변경시 실시간으로 반영된다. (화면설계 도면에서 추가 설명)
P025	이미지 리스트 구성요소 데이터 연결	현재 제작중인 페이지내 이미지 리스트 구성요소에 데이터를 연결하는 과정임. 이미지 리스트 구성요소 데이터 연결에 대해 캔버스에 등록된 이미지 리스트 구성요소를 더블 클릭하면 이미지 리스트 에디터가 활성화 되고, 그 창에서 데이터 연결 버튼을 누르면 이미지 리스트 에디터(캔버스)의 구성요소들과 연결된 표가 나타나 편집할 수 있게 된다. 편집이 가능한 표에서 데이터를 입력하고 적용버튼을 누르면 레이아웃 구성요소 그룹(캔버스)에 다수의 이미지가 하나의 이미지로 조합되어 구성요소로 추가된다. (화면설계 도면에서 추가 설명)
P026	내보내기	현재 화면에 보이는 페이지를 결과물로 내보내는 과정임

다음으로, 도 10은 본 발명의 실시예에 따른 이미지 최적화 처리 기반의 단일 및 대량 제작이 가능한 상품페이지 통합 제작 시스템(1)에 의한 상품페이지 제작 과정 중 벌크제작 과정을 설명하기 위한 도면이다. 도 10a를 참조하면, 사용자 단말(100)의 앱은 벌크 작업을 할 기준 템플릿에 대해서 선택을 수행하기 위해 입출력부를 통해 선택신호를 수신할 수 있다(B01).

단계(B01) 이후, 사용자 단말(100)의 앱은 선택한 템플릿에 대해서 사용자가 직접 대량으로 편집할 수 있는 스프레드 시트(엑셀 파일)로 추출하여 파일로 제공하여 사용자 단말(100) 상의 저장부로 저장되도록 하며, 포맷 파일에는 마스터 시트와 이미지 리스트 시트 2개의 시트를 생성하며, 마스터 시트에는 페이지 정보, 이미지 리스트 시트에는 마스터 시트에서 포함된 이미지 리스트 구성요소에 대한 이미지 리스트 정보를 포함시킬 수 있다(B02).

단계(SB02) 이후, 사용자 단말(100)의 앱은 벌크 포맷 파일 편집 버튼에 대한 선택 입력에 따라 표계산 프로그램(예, 엑셀 프로그램)을 바로 실행하며, 저장된 스프레드 파일에 대해서 오픈(Open)을 수행할 수 있다(B03).

단계(SB03) 이후, 사용자 단말(100)의 앱은 포맷에 맞게 데이터를 모두 입력하고 저장이 완료 되고, 벌크 포맷파일 선택 버튼에 대한 선택 입력에 따라 스프레드 시트 형식 파일(엑셀)을 불러오는 대화상자를 활성화한다(B04).

단계(B04) 이후, 사용자 단말(100)의 앱은 포맷 파일에 입력해 놓은 이미지 파일들을 불러오기 버튼에 대한 선택 입력에 따라, 파일 불러오는 대화상자를 통하여 파일들을 선택하며, 선택된 파일들은 도 10b의 B05-1 레이블옆에 보이는 .temp 폴더에 사전 복사를 수행함으로써, 원본 이미지 파일들을 손실하지 않기 위하여 복사하여 사용하는 방식을 제공할 수 있다(B05).

단계(B05) 이후, 사용자 단말(100)의 앱은 실행 버튼에 대한 선택 입력에 따라 입력을 마친 포맷파일과 현재 템플릿 정보를 매칭하고 조회하여 제작 프로세스를 실행함으로써, 도 10b의 (B05-2) 화면과 같이 포맷파일에 입력한 여러 페이지 정보에 맞게끔 페이지 이름으로 폴더가 생성되었으며, 해당 폴더내에는 벌크 제작 프로세스가 완료되어, 완성된 이미지들을 저장할 수 있다(B06).

이에 따라 사용자는 템플릿을 선택하여 해당 템플릿에 대한 구조에 맞게끔 엑셀 파일로 출력할 수 있으며, 해당 출력된 파일에 벌크에 필요한 데이터를 직접 대량 편집하여 포맷의 따른 다수의 폴더와 제작된 페이지 이미지가 결과물로 출력할 수 있으며, 벌크 형태로 제작된 결과물은 도 10b와 같은 UI 화면을 통해 사용자에 제공될 수 있다.

도 11은 본 발명의 실시예에 따른 이미지 최적화 처리 기반의 단일 및 대량 제작이 가능한 상품페이지 통합 제작 시스템(1)에 의한 상품페이지 제작 과정 중 이미지 최적화 과정을 나타내는 도면이다. 도 11을 참조하면, 사용자 단말(100)의 앱은 이미지 최적화 기본설정을 수행한다(OP01).

즉, 이미지 최적화 기본설정의 과정에 있어서, 사용자 단말(100)의 앱은 이미지 최적화 기본설정에 대해 이미지 최적화 작업을 하기에 앞서서 사전에 설정이 되어있다면, 설정 파일을 불러올 수 있다. 만일 저장된 설정 파일이 없다면 사용자 단말(100)은 처음부터 기본 설정을 진행하면 되는데, 최적화 작업 처리 단위를 파일 또는 폴더로 구분할 수 있으며 처리간 썸네일이 필요하다면 지정된 크기에 썸네일 이미지까지 동시에 생성하도록 생성 여부를 선택할 수 있다. 또한 사용자 단말(100)의 앱은 처리 진행 간 원본 파일과 구분하기 위하여 예시와 같이 A.jpg 파일을 THUMB_A.jpg 와 같은 이름으로 접두어를 연결하여 썸네일 파일을 생성할 수 있다. 사용자 단말(100)은 설정이 완료된 사항은 파일로 저장이 가능하며, 추후 재사용이 가능하다.

단계(OP01) 이후, 사용자 단말(100)의 앱은 설정 데이터 유효성 검사를 수행한다(OP01).

보다 구체적으로, 사용자 단말(100)의 앱은 설정한 데이터가 올바르게 입력 되었는지 검증하는 과정을 수행할 수 있다(OP02).

단계(OP02) 이후, 사용자 단말(100)의 앱은 최적화 프로세스를 시작하는데(OP03), 현재 이미지 최적화 프로세스 설정상태로 프로세스를 시작하는 진입점으로 사용자 단말(100)의 입력부로부터 프로세스 시작 버튼에 대한 선택 신호가 입력되는 경우 시작한다.

단계(OP03) 이후, 사용자 단말(100)의 앱은 대상파일에 대한 선택 신호를 입력받음으로써(OP04), 최적화 프로세스의 대상 파일들을 선택하는 과정을 수행한다.

단계(OP04) 이후, 사용자 단말(100)의 앱은 프로세싱 처리 대상 파일 복사 과정을 수행하되(OP05), 최적화 프로세스의 대상 파일들의 원본에는 영향을 미치지 않도록 임시 폴더로 복사하는 과정을 수행한다(OP05).

단계(OP05) 이후, 사용자 단말(100)의 앱은 리사이즈 설정 여부 확인을 수행하되(OP06), 보다 구체적으로, 프로세스 진행간 이미지의 리사이즈 설정 여부를 확인하는 과정을 수행할 수 있다.

단계(OP06) 이후, 사용자 단말(100)의 앱은 설정 시 리사이즈 처리를 수행하되(OP07), 프로세스 진행간 리사이즈 설정여부에 따라 이미지 크기를 조절하는 과정을 수행하는 것이다.

단계(OP07) 이후, 사용자 단말(100)의 앱은 워터마크 설정 여부 확인하되(OP08), 프로세스 진행간 이미지 위에 덧붙여 그릴 워터마크 설정 여부를 확인하는 과정을 수행하는 것이다.

단계(OP08) 이후, 사용자 단말(100)의 앱은 설정시 워터마크 처리하되(OP09), 프로세스 진행간 워터마크 설정 여부에 따라 워터마크를 그리는 데 워터마크를 그릴 포인트는 9가지 포인트로, 상단좌측, 상단 가운데, 상단 우측, 중단 좌측, 중단 가운데, 중단 우측, 하단 좌측, 하단 가운데, 하단 우측으로 체크박스로 설정되어 체크한 포인트를 중심으로 선택된 워터마크 파일을 프로세싱 중인 이미지위에 그리는 기능을 수행할 수 있다.

단계(OP09) 이후, 사용자 단말(100)의 앱은 프로세싱 진행 간 이미지 무손실 압축 설정 여부를 확인하는 이미지 무손실 압축 설정 여부를 확인 과정을 수행한다(OP10).

단계(OP10) 이후, 사용자 단말(100)의 앱은 단계(OP10)에서 설정시 이미지 무손실 압축 처리를 수행하되(OP11), 프로세스 진행간 이미지 무손실 압축 설정여부에 따라서 형식에 맞게끔 이미지를 무손실 압축 처리하는데, 원본 품질에는 지장이 없는 상태로 설정된 품질 기준에 따라 파일 크기를 줄여서 압축 처리를 하는 과정을 수행하는 것이다(OP11).

단계(OP11) 이후, 사용자 단말(100)의 앱은 결과 폴더에 복사 과정(OP12)으로, 프로세싱 진행 간 처리가 완료된 파일은 지정된 결과 폴더에 파일을 생성 및 복사를 수행한다(OP12).

단계(OP12) 이후, 사용자 단말(100)의 앱은 프로세싱 처리 대상 파일 용량 확인 과정(OP13)으로, 프로세싱 처리 대상에 대한 처리 결과를 취합하여 결과 영역에 보여주는 과정을 수행한다.

단계(OP13) 이후, 사용자 단말(100)의 앱은 프로세싱 처리간 발생한 임시파일 삭제 과정(OP14)으로, 프로세싱 처리간 발생한 임시파일들에 대하여 모두 삭제 처리하는 과정을 수행한다.

단계(OP14) 이후, 사용자 단말(100)의 앱은 프로세싱 처리 완료 후 폴더 정보 새로고침 과정(OP15)으로, 프로세싱 처리 완료 후 새로 생성된 파일들에 대하여 확인하기 위하여 폴더 정보를 새로고침 하는 과정을 수행한다.

이와 같은 이미지 최적화는 상술한 프로세스 구성 순서대로 대상 이미지 파일에 대한 최적화 작업을 진행함으로써, 온라인 상에서 이미지를 게시하고자 하는 사용자들에게 높은 이미지 용량으로 웹에서 열람시 많은 시간 및 트래픽을 소모하게 되는 문제를 해결하며, 목적에 맞게끔 출력 형식을 설정하여 온라인 상에 게시해야 하는 이미지 용량을 줄여주고 워터마크 그리기, 사이즈 조절, 썸네일 이미지 생성 등 이미지를 처리함에 있어서 반복적인 작업을 보다 쉽고 편리하게 처리할 수 있게끔 방법을 제공하고 결과물을 도출할 수 있는 기능을 제공하며 이러한 기능은 사용자 단말(100) 상의 앱이 네트워크(200)를 통해 서비스 서버(300)로부터 처리 모듈의 데이터를 제공받아 수행할 수도 있다.

도 12는 본 발명의 실시예에 따른 이미지 최적화 처리 기반의 단일 및 대량 제작이 가능한 상품페이지 통합 제작 시스템(1)에 의한 상품페이지 제작 과정 중 이미지 최적화 과정을 위한 이미지 최적화 UI 화면의 영역별 역할을 나타내는 도면이다. 도 12를 참조하면, 경로 정보(OU01)는 사용자 단말(100) 상에 서비스 서버(300)로부터 제공된 앱이 설치된 상태에서의 작업영역 경로(Work Space)를 알려주는 경로 정보를 표시해 준다.

기본 설정(OU02)은 상기 단계(OP01)에 구성에 기능을 설정하는 영역으로 설정 파일을 불러올 수 있으며, 처리 대상에 대한 범위(파일, 폴더)를 선택하고 썸네일에 대한 설정할 수 있도록 하는 기능을 제공한다.

워터마크 설정(OU03)은 워터마크 이미지를 불러와 선택하고, 적용 위치를 설정할 수 있도록 하는 기능을 제공한다.

최적화 설정(OU04)은 최적화 설정을 하기 위하여 각 이미지 형식에 맞는 품질, 크기 조절을 설정할 수 있으며, 크기는 비율이나 직접(픽셀 기준의 지정된 크기) 로 설정할 수 있도록 하는 기능을 제공한다.

프로세싱 컨트롤러(OU05)는 프로세싱을 진행하는 버튼과 진행 상태를 시각화로 표시해 주는 영역이다.

처리 대상 파일 확인(OU06)는 처리대상 파일의 수량, 용량에 대해 집계 형태로 표시해 주는 영역이다.

원본 파일(OU07)은 원본 파일들을 썸네일 형태로 표시해주고 원본 폴더를 바로 열 수 있는 버튼을 표시한다.

결과 파일(OU08)은 프로세싱이 완료된 결과 파일들을 썸네일 형태로 표시해주고 결과 폴더를 바로 열 수 있는 버튼을 표시한다.

GIF 프레임 설정 창(OU09)은 원본 및 결과에 있는 이미지 중 GIF 이미지 일 경우 선택하고 더블 클릭시 GIF 프레임 셋 창이 활성화 되고 프레임 리스트 중 삭제버튼을 해당 프레임을 삭제하여 GIF 애니메이션 이미지의 프레임을 조정할 수 있는 기능을 제공할 수 있다.

도 13은 본 발명의 실시예에 따른 이미지 최적화 처리 기반의 단일 및 대량 제작이 가능한 상품페이지 통합 제작 시스템(1)을 위한 사용자 단말(100) 상에서의 서비스 프로세스를 나타내는 도면이다. 도 13을 참조하면, 사용자 단말(100) 상에 소프트웨어를 수령하는 방식은 구매하거나 시험판(일정 기간만 사용가능한 체험판)을 다운로드 받아 설치하고(S01), 설치한 소프트웨어를 사용하기 위해서는 사용권한을 획득해야 하며, 권한을 획득하는 방식은 제품 라이센스 키를 발급받아 소프트웨어 내에서 키를 사용자 단말(100) 상의 앱 상에 입력하고 운영자 서버인 서비스 서버(300)에 인증 요청을 보낸다(S02).

이후, 서비스 서버(300)에서는 수신된 인증 요청정보를 확인하고 요청 정보에 포함된 제품 라이센스 키를 확인하고 유효한 라이센스 키 인지 확인하여 유효시에는 사용 가능한 권한을 사용자측인 사용자 단말(100)의 앱으로 회신하여 준다(S03).

이후, 권한을 수신 받은 사용자의 소프트웨어인 앱 상에서는 권한 허용 키 파일을 생성하여 소프트웨어 측에 사용 권한을 부여하며, 이 권한은 소프트웨어를 자동 업데이트할 때에나 실행을 할 때에도 동일한 방식으로 늘 검증하여 유효한 소프트웨어인지 사용자 단말(100)과 서비스 서버(300) 상의 통신을 통해 지속적으로 확인할 수 있다(S04).

본 발명은 또한 컴퓨터로 읽을 수 있는 기록매체에 컴퓨터가 읽을 수 있는 코드로서 구현하는 것이 가능하다. 컴퓨터가 읽을 수 있는 기록매체는 컴퓨터 시스템에 의하여 읽혀질 수 있는 데이터가 저장되는 모든 종류의 기록 장치를 포함한다.

컴퓨터가 읽을 수 있는 기록매체의 예로는 ROM, RAM, CD-ROM, 자기테이프, 플로피 디스크, 광 데이터 저장장치 등이 있으며, 또한 캐리어 웨이브(예를 들어, 인터넷을 통한 전송)의 형태로 구현되는 것도 포함한다.

또한 컴퓨터가 읽을 수 있는 기록매체는 네트워크로 연결된 컴퓨터 시스템에 분산되어, 분산방식으로 컴퓨터가 읽을 수 있는 코드가 저장되고 실행될 수 있다. 그리고 본 발명을 구현하기 위한 기능적인(functional) 프로그램, 코드 및 코드 세그먼트들은 본 발명이 속하는 기술 분야의 프로그래머들에 의해 용이하게 추론될 수 있다.

이상과 같이, 본 명세서와 도면에는 본 발명의 바람직한 실시예에 대하여 개시하였으며, 비록 특정 용어들이 사용되었으나, 이는 단지 본 발명의 기술 내용을 쉽게 설명하고 발명의 이해를 돕기 위한 일반적인 의미에서 사용된 것이지, 본 발명의 범위를 한정하고자 하는 것은 아니다. 여기에 개시된 실시예 외에도 본 발명의 기술적 사상에 바탕을 둔 다른 변형 예들이 실시 가능하다는 것은 본 발명이 속하는 기술 분야에서 통상의 지식을 가진 자에게 자명한 것이다.

1 : 이미지 최적화 처리 기반의 단일 및 대량 제작이 가능한 상품페이지 통합 제작 시스템
100 : 사용자 단말
100g : 사용자 단말 그룹
200 : 네트워크
300 : 서비스 서버

Claims

복수의 사용자 단말(100); 및
각 사용자 단말(100)에게 무손실 압축, 썸네일 생성, 워터마크 적용 및 크기조절을 위한 앱을 제공하는 서비스 서버(300);를 포함하고,
상기 각 사용자 단말(100)은, 앱 기반으로 템플릿 제작을 시작함에 따라 단말 자체의 저장부에 템플릿이 저장되어 있어 템플릿 구조에 맞게끔 편집을 수행함에 있어서,
템플릿을 선택하고, 페이지 생성을 선택된 템플릿 구조에 맞게끔 편집을 수행하되, 페이지 편집 시에는 구성요소 데이터 연결과 구성요소 직접 편집을 통해 구성요소에 데이터를 연결하거나, 캔버스에서 직접 편집 하거나 상황에 맞는 방식으로 페이지 편집을 수행하는 것을 특징으로 하는 이미지 최적화 처리 기반의 단일 및 대량 제작이 가능한 상품페이지 통합 제작 시스템.
청구항 1에 있어서, 사용자 단말(100)은,
미리 설정된 형식에 따라서 출력 설정(형식 또한 템플릿에서 사전설정 가능)에 따라 내보내기 기능으로 이미지 파일, PDF 파일, 웹문서 파일, 멀티미디어 파일 중 적어도 하나 이상의 형태로 출력을 수행하는 것을 특징으로 하는 이미지 최적화 처리 기반의 단일 및 대량 제작이 가능한 상품페이지 통합 제작 시스템.
청구항 1에 있어서, 사용자 단말(100)은,
이미지 파일에 대한 이미지 최적화 여부 설정에 따라서 이미지 파일 최적화 작업을 수행하는 것을 특징으로 하는 이미지 최적화 처리 기반의 단일 및 대량 제작이 가능한 상품페이지 통합 제작 시스템.
청구항 3에 있어서, 사용자 단말(100)은,
이미지 최적화 및 일괄작업으로, 무손실 압축, 썸네일 생성, 워터마크 적용 및 크기조절을 수행하는 것을 특징으로 하는 이미지 최적화 처리 기반의 단일 및 대량 제작이 가능한 상품페이지 통합 제작 시스템.
청구항 4에 있어서, 사용자 단말(100)은,
최종적으로 완료된 결과물인 이미지 파일에 대해서 최적화 및 일괄 작업이 수행된 것과, PDF 파일, 웹문서 파일, 멀티미디어 파일에 대해서 수집을 통해 최종적으로 완료된 결과물을 파일로 도출하는 것을 특징으로 하는 이미지 최적화 처리 기반의 단일 및 대량 제작이 가능한 상품페이지 통합 제작 시스템.