KR101981228B1 - 이미지 스크롤에 적합한 시퀀스 이차원 이미지의 태그정보 처리 장치 - Google Patents

Abstract

본 발명은 웹페이지를 통하여 서비스 아이템의 이미지와 태그정보를 포함한 디지털 콘텐츠를 제공하는 웹 서버; 서비스 아이템을 시각적으로 나타내기 위한 개별 이차원 이미지 또는 가상 이차원 이미지의 이미지 파일을 저장하는 이미지 데이터베이스; 이미지 파일에 부가된 태그정보를 저장하는 태그정보 데이터베이스; 이미지 데이터베이스와 태그정보 데이터베이스에 저장된 이미지 파일과 태그정보를 웹서버에 공급하는 이미지 뷰어; 이미지 뷰어에 연동하여 새로운 이미지의 추가 또는 이미지의 수정 작업에 수반하는 태그정보를 편집하기 위한 뷰어 편집기;를 포함한다. 이미지 뷰어는 스크롤 조작에 따라 다른 각도의 시퀀스 이차원 이미지를 이미지 데이터베이스로부터 로딩하여 뷰어 화면에 연속으로 표시하고, 이차원 이미지에 맵핑된 태그정보를 로딩된 이미지가 표시되는 뷰어 화면의 주변 영역에 표시한다. 뷰어 편집기는 편집 기능이 활성화되어 뷰어 화면에 제공되는 이미지 편집창과 태그 편집창을 이용하여 편집 대상의 이차원 이미지 또는 태그정보의 세부 사항을 각각 설정하고, 설정된 입력 데이터를 바탕으로 생성한 파일을 이미지 데이터베이스와 태그정보 데이터베이스에 각각 저장하는 것을 특징으로 한다.

Description

이미지 스크롤에 적합한 시퀀스 이차원 이미지의 태그정보 처리 장치{Apparatus For Processing Tag Information Of Sequence Two-Dimensional Image Suitable For Image Scroll}

본 발명은 이미지 스크롤에 적합한 시퀀스 이차원 이미지의 태그정보 처리 장치에 관한 것으로, 더욱 상세하게는 스크롤 조작에 따라 연속으로 표시되는 시퀀스 이차원 이미지에 맵핑된 태그정보를 신속 정확하게 사용자에게 제공할 수 있고, 이미지의 추가 및 수정에 수반한 태그정보를 쉽고 간편하게 편집할 수 있는 이미지 스크롤에 적합한 시퀀스 이차원 이미지의 태그정보 처리 장치에 관한 것이다.

정보통신 기술의 비약적인 발달로 컴퓨터를 이용하여 인터넷 쇼핑몰에서 상품을 구매하는 전자상거래가 일상화되고, 최근 인터넷 기능을 구비한 스마트 가전제품으로 IPTV(인터넷 프로토콜 TV) 및 스마트 냉장고 등이 개발되고 있다.

연동형 IPTV 전자상거래는 기존의 홈쇼핑과 다르게 방송 내용과 관련된 상품 정보를 프로그램 시청 중에 제공해 구매까지 할 수 있도록 한 서비스로서, 예를 들어 건강 프로그램 방송 중에 출연자가 기능성 음료를 마시는 장면에서 해당 음료에 대한 팝업이 우측 상단에 노출되게 하고, 이 기능성 음료 구입을 원하는 시청자는 리모컨의 특정 버튼을 눌러 제품의 자세한 정보를 확인 후 QR 코드나 전화를 통해 제품을 바로 구매할 수 있다. 다른 예로서, 냉장고 도어에 고해상도 터치 디스플레이를 마련하고 음성 인식 기능과 웹OS를 탑재한 스마트 냉장고가 출시되었고, 이 스마트 냉장고는 내장된 앱으로 온라인 쇼핑하고, 거실 TV에서 방송 중인 TV 채널을 미러링해 주방에서 감상하는 키친 TV 기능, 그리고 스마트폰 사진이나 동영상을 재생하는 폰 미러링 기능을 지원하며, 인터넷 연결을 위해 Wi-Fi, 블루투스 무선 연결을 지원한다.

매장 방문하지 않고 고객이 직접 스마트폰의 애플리케이션을 통하여 홈페이지에 접속하여 서비스 아이템(예를 들어 음식, 화환, 생활용품 등)을 주문 및 결제할 수 있다. 또한 극장이나 공연장, 경기장, 레스토랑 등에서 무인 주문시스템으로 티켓 발매, 대금 결제 등을 고객 스스로 처리하는 서비스가 널리 이용되고 있다.

컴퓨터와 IPTV 및 스마트 냉장고 등에서 온라인 쇼핑몰의 상품 정보 제공받는 경우, 스마트폰의 애플리케이션으로 웹 사이트의 제품 정보를 제공받거나 사용자 단말에 탑재된 무인 주문시스템으로 주문 정보를 제공받는 경우에서는 디지털 콘텐츠를 다운받아 재생하게 되며, 일반적으로 이미지와 부가 정보(제품소개, 광고, 사용법 등)를 조합한 디지털 콘텐츠를 제공한다.

그런데 종래에는 디지털 콘텐츠의 이미지와 부가 정보가 개별 제공된다. 예를 들어 서비스 아이템을 선택시 화면에 이미지와 부가 정보가 표시되는데, 고객은 해당 이미지를 보고 일시적으로 주의를 기울이지만 해당 이미지와 연계되지 않고 별개로 분리 나열된 부가 정보를 자세하게 읽지 않는 경향을 보이기 때문에 정보 전달력이 떨어진다는 미흡한 문제가 있다.

한편 동영상에 음성 삽입한 디지털 콘텐츠를 전달하는 방법을 이용할 수 있으나, 온라인 쇼핑몰과 같이 수많은 상품을 거래하기 위하여 다수 사용자가 접속하는 사용 환경에서는 통신 트래픽이 과도하여 접속 속도가 느려져 이용 불편을 초래하고 대용량의 저장 공간 및 데이터 처리 장비 등 소요 비용이 증가하게 된다.

상기 종래기술의 문제점을 고려할 때, 종래와 같이 이미지와 부가 정보를 나열하여 제공하는 대신에 사용자에 의한 스크롤 조작에 따라 관련 이미지들을 연속으로 보여주고, 사용자 명령에 따라 화면상의 이미지에 맵핑된 부가 정보를 선별적으로 표시하여 정보 전달력을 높이는 것이 필요하다. 또한 서비스 아이템의 변경과 추가 작업이 필요할 때 디지털 콘텐츠의 이미지와 부가 정보를 간편하게 수정할 수 있는 편집 기술이 필요하다.

한국등록특허 제10-0360220호(2002.10.25 등록)

없음

본 발명의 목적은 사용자에 의한 스크롤 조작시 시퀀스 이차원 이미지들을 연속으로 표시하고, 스크롤 조작에 따라 연속 표시되는 이차원 이미지에 맵핑된 태그정보를 신속 정확하게 사용자에게 제공할 수 있고, 이미지의 추가 및 수정에 수반한 태그정보를 쉽고 간편하게 편집할 수 있는 이미지 스크롤에 적합한 시퀀스 이차원 이미지의 태그정보 처리 장치를 제공함에 있다.

상기 목적을 달성하기 위한 본 발명의 실시예에 따른 이미지 스크롤에 적합한 시퀀스 이차원 이미지의 태그정보 처리 장치는, 웹페이지를 통하여 서비스 아이템의 이미지와 태그정보를 포함한 디지털 콘텐츠를 제공하는 웹 서버; 상기 서비스 아이템을 시각적으로 나타내기 위한 개별 이차원 이미지 또는 가상 이차원 이미지의 이미지 파일을 저장하는 이미지 데이터베이스; 상기 이미지 파일에 부가된 태그정보를 저장하는 태그정보 데이터베이스; 상기 이미지 데이터베이스와 태그정보 데이터베이스에 저장된 이미지 파일과 태그정보를 상기 웹서버에 공급하는 이미지 뷰어; 상기 이미지 뷰어에 연동하여 새로운 이미지의 추가 또는 이미지의 수정 작업에 수반하는 태그정보를 편집하기 위한 뷰어 편집기;를 포함하되, 상기 이미지 뷰어는, 스크롤 조작에 따라 다른 각도의 시퀀스 이차원 이미지를 상기 이미지 데이터베이스로부터 로딩하여 뷰어 화면에 연속으로 표시하고, 상기 이차원 이미지에 맵핑된 태그정보를 상기 로딩된 이미지가 표시되는 뷰어 화면의 주변 영역에 표시하며, 상기 뷰어 편집기는, 편집 기능이 활성화되어 상기 뷰어 화면에 제공되는 이미지 편집창과 태그 편집창을 이용하여 편집 대상의 이차원 이미지 또는 태그정보의 세부 사항을 각각 설정하고, 설정된 입력 데이터를 바탕으로 생성한 파일을 상기 이미지 데이터베이스와 태그정보 데이터베이스에 각각 저장하는 것을 특징으로 한다.

또한 상기 이미지 뷰어는 스크롤 조작에 따라 연속으로 표시하는 이차원 이미지에 맵핑된 태그 지점의 좌표를 자동 계산하여 해당하는 태그 지점의 태그정보를 제공하는 것을 특징으로 한다.

또한 상기 뷰어 편집기는 상기 이미지 편집창과 태그 편집창의 입력 작업이 완료되면 계층 구조의 관련 파일로서 html 파일, js 파일, 및 json 파일을 생성하며, 상기 html 파일은 상기 뷰어 화면을 구성하는 기본 파일이고, 상기 js 파일은 상기 뷰어 화면의 초기 설정을 위한 파일이며, 상기 json 파일은 태그정보를 설정하기 위한 파일인 것을 특징으로 한다.

또한 상기 이미지 편집창은 상기 서비스 아이템을 식별하기 위한 이름, 추가 또는 수정을 위하여 선택된 이미지, 선택된 이미지 중에서 뷰어 로딩시 처음 나타나는 초기 이미지, 스크롤 조작에 따른 좌우방향 또는 상하방향으로 연속으로 나타나는 이미지의 개수, 상기 뷰어 화면의 사이즈, 상기 초기 이미지의 사이즈에 대하여 설정 입력하는 것을 특징으로 한다.

또한 상기 태그 편집창은 상기 태그정보를 식별하기 위한 이름, 태그에 부속된 서브 태그의 유무, 태그내용, 태그 지정을 위한 이미지를 식별하기 위한 이미지번호, 태그 지정된 이미지에서의 태그지점, 태그내용을 나타내기 위한 태그팝업 화면의 사이즈, 상기 뷰어 화면에 나타나는 태그팝업 화면의 위치, 태그지점과 태그팝업 화면을 연결하는 연결선의 유무를 설정 입력하는 것을 특징으로 한다.

또한 상기 웹 서버로부터 디지털 콘텐츠를 제공받는 사용자 단말을 포함하되, 상기 사용자 단말은 인트라넷에 연결된 개인용 컴퓨터에 접근할 수 있는 사용 환경에서 인터넷에 연결된 게이트웨이를 통하여 디지털 콘텐츠를 제공받거나 또는 댁내에 홈네트워크를 구축하고 인터넷 서비스하는 스마트 가전기기로서 IPTV 및 스마트 냉장고에 접근할 수 있는 사용 환경에서 인터넷에 연결된 홈게이트웨이를 통하여 디지털 콘텐츠를 제공받을 수 있는 것을 특징으로 하는 이미지 스크롤에 적합한 시퀀스 이차원 이미지의 태그정보 처리 장치.

이상과 같은 본 발명에 따르면 뷰어 화면의 서비스 아이템에 대한 스크롤 조작시 서로 다른 각도에서 바라본 시퀀스 이차원 이미지들을 연속으로 표시함으로써 서비스 아이템에 대한 정보 전달력을 높일 수 있다.

또한 본 발명은 이미지 뷰어에 연동하는 뷰어 편집기를 이용하여 편집 작업을 수행할 수 있어 새로운 이미지의 추가와 수정에 수반되는 태그 정보의 편집 작업이 용이하다.

또한 본 발명은 기존기술과 같이 동영상을 제작하여 제공하는 방식에 비하여 통신 트래픽이 현저히 적을 뿐 아니라 이미지 뷰어를 초기화하는 과정과 사용자 조작에 따라 해당 이미지를 불러올 때만 비동기적으로 이미지 파일을 로딩하므로 통신 트래픽을 더욱 줄일 수 있다.

도 1은 본 발명에 따른 이미지 스크롤에 적합한 시퀀스 이차원 이미지의 태그정보 처리 장치의 구성을 나타낸 블록도이다.
도 2는 본 발명에 따른 이미지 파일의 생성 방법을 설명하기 위한 흐름도이다.
도 3은 본 발명에 따른 이미지 뷰어의 상세 구성을 나타낸 블록도이다.
도 4a는 본 발명에 따른 이미지 뷰어에 의해 개별 이차원 이미지에 맵핑된 태그정보를 제공받는 기능을 예시적으로 설명하는 도면이다.
도 4b는 본 발명에 따른 확대 기능을 설명하기 위한 도면으로, 이미지 창에서 확대 이미지를 표시하는 동작을 나타낸다.
도 4c는 본 발명에 따른 확대 기능을 설명하기 위한 도면으로, 웹페이지의 화면에 확대 이미지를 표시하는 동작을 나타낸다.
도 5a는 본 발명에 따른 가상 이차원 이미지의 생성과 태그 설정 방법을 설명하기 위한 도면이다.
도 5b는 본 발명에 따른 생성된 이미지 파일을 구성하는 가상의 이차원 이미지들을 설명하기 위한 도면이다.
도 5c는 본 발명에 따른 가상 이차원 이미지에 연계된 태그설정 파일을 설명하기 위한 도면이다.
도 6은 본 발명에 따른 가상 이차원 이미지에 대해 수평 회전시 변화하는 좌표값과 태그 범위를 설명하기 위한 도면이다.
도 7은 본 발명에 다른 가상 이차원 이미지에 대해 스크롤 조작에 따라 왼쪽 방향으로 수평 회전시 좌표값의 변화를 설명하기 위한 도면이다.
도 8은 본 발명에 따른 가상 이차원 이미지에 대해 스크롤 조작에 따라 오른쪽 방향으로 수평 회전시 좌표값의 변화를 설명하기 위한 도면이다.
도 9는 본 발명에 따른 기준이 되는 중심부의 가상 이차원 이미지에 대해 스크롤 조작에 따라 왼쪽, 오른쪽, 위쪽으로 회전시 태그 범위의 변화를 설명하기 위한 도면이다.
도 10a는 본 발명에 따른 뷰어 편집기의 이미지 편집창을 예시적으로 나타낸 도면이고, 도 10b는 본 발명에 따른 뷰어 편집기의 태그 편집창을 예시적으로 나타낸 도면이며, 도 10c는 본 발명에 따른 뷰어 편집기의 이미지 편집창과 태그 편집창에 입력된 정보를 바탕으로 파일을 생성되는 동작과 폴더 구조를 설명하기 위한 도면이고, 도 10d는 본 발명에 따른 뷰어 편집기를 이용한 편집 과정을 설명하기 위한 흐름도이다.
도 11은 본 발명에 따른 이미지 뷰어를 초기화하고 태그정보를 제공하기 위한 각 구성부의 처리 과정을 나타낸 도면이다.
도 12a 내지 도 12f는 본 발명에 따른 웹 페이지에서 가상 이차원 이미지와 태그정보를 제공받는 과정을 예시하여 설명하기 위한 도면이다.

이하 첨부한 도면을 참조하여 본 발명의 실시 예를 설명함으로써 본 발명을 설명한다. 각 도면에 제시된 동일한 참조부호는 동일한 부재를 나타낸다. 또한 본 발명을 설명함에 있어, 관련된 공지 기능 또는 구성에 대한 구체적인 설명이 본 발명의 요지를 불필요하게 흐릴 수 있다고 판단되는 경우에는 그 상세한 설명을 생략할 것이다. 또한 어떤 부분이 어떤 구성요소를 "포함"한다고 할 때, 이는 특별히 반대되는 기재가 없는 한 다른 구성요소를 제외하는 것이 아니라 다른 구성요소를 더 포함할 수 있는 것을 의미한다.

도 1에 도시한 바와 같이, 본 발명에 따른 이미지 스크롤에 적합한 시퀀스 이차원 이미지의 태그정보 처리 장치는 웹 서버(30)로부터 디지털 콘텐츠를 제공받는 사용자 단말(10)과, 사용자 단말(10)와 웹 서버(30)가 서로 통신할 수 있도록 연결하는 통신부(20)와, 디지털 콘텐츠를 공급하기 위한 서비스를 수행하는 웹 서버(30)와, 웹 서버(30)에 디지털 콘텐츠를 구성하는 이미지 및 이미지에 부가된 태그정보를 제공하는 이미지 뷰어(40), 이미지 파일을 저장하는 이미지 데이터베이스(50), 태그 설정파일과 태그 데이터를 저장하는 태그정보 데이터베이스(60), 그리고 이미지 데이터베이스(50)의 이미지와 태그정보 데이터베이스(60)의 태그 설정파일 및 태그 데이터를 추가 또는 수정하기 위한 뷰어 편집기(70)를 포함한다.

사용자 단말(10)은 사용자 환경에 따라 여러 접속 경로를 통하여 웹 서버(30)에 접속할 수 있다. 예를 들어 사용자가 회사의 인트라넷에 연결된 개인용 컴퓨터(10a)에 접근할 수 있는 사용 환경에서 인터넷(20c)에 연결된 게이트웨이(20a)를 통하여 디지털 콘텐츠를 제공받는다. 다른 예로서, 댁내에 홈네트워크를 구축하고 인터넷 서비스하는 스마트 가전기기로서 IPTV(10b) 및 스마트 냉장고(10c)에 접근할 수 있는 사용 환경에서 인터넷(20c)에 연결된 홈게이트웨이(20b)를 통하여 디지털 콘텐츠를 제공받을 수 있다. IPTV(10b)는 방송신호를 받아 시청할 수 있는 공지기술의 디지털 가전기기의 일종이고, 스마트 냉장고(10c) 역시 인터넷 기능을 구비한 공지기술의 디지털 가전 기기의 일종이 채택될 수 있다.

이러한 개인용 컴퓨터(10a), IPTV(10b), 및 스마트 냉장고(10c)는 사용자 조작에 의한 제어 명령을 수행할 수 있도록 키보드, 마우스, 푸시 버튼, 리모콘 등의 사용자용 입력 디바이스를 사용할 수 있고, 또한 디지털 콘텐츠를 디스플레이하는 출력수단으로 터치패널을 채택하는 경우 사용자의 터치 입력에 따라 제어 명령을 수행할 수도 있다.

실시예에서는 통신부(20)가 유선 인터넷(20c)으로 웹 서버(30)에 접속하는 방식을 예시하고 있으나, 공지된 일반적인 무선 인터넷을 구축하여 웹 서버(30)에 접속하는 것도 가능하다. 또한 사용자 단말(10)은 웹 서버(30)로부터 이미지, 텍스트, 동영상, 이메일을 다운로드 받을 수 있는 정보 기기를 포함하는 개념으로 이해하여야 하며, 예를 들어 태블릿 컴퓨터, 스마트 폰 등 웹 브라우저를 이용하여 웹 사이트에 구축된 홈페이지, 온라인 쇼핑몰 등에 접속할 수 있다.

웹 서버(30)는 통신모듈(33)에 의해 사용자 단말(10)과 인터페이스 하여 다양한 웹 서비스를 제공하기 위한 웹 페이지(32)를 제공하는데, 사용자는 웹 페이지(32)를 통하여 사용자 인증 처리, 이미지의 검색과 열람 기능을 수행할 수 있다.

홈페이지와 온라인 쇼핑몰을 운영하는 주체는 백화점, 중고품 중개회사, 여행사, 부동산 회사, 음식점, 배달음식 주문대행사, 극장, 경기장, 공연장, 공연 기획사, 관공서, 여객 터미널 등으로 이들이 제공하는 디지털 콘텐츠는 서비스 아이템의 이용 목적과 이용 편의에 적합하게 제작된 이미지, 텍스트, 동영상, 어플리케이션 프로그램 등 매우 다양하다.

웹 서버(30)는 서비스 아이템에 관련된 디지털 콘텐츠를 제공하는 디지털 콘텐츠 처리부(31)를 포함한다. 디지털 콘텐츠 처리부(31)는 사용자 명령에 응답하여 서비스 아이템 예를 들어 검색 리스트를 제공하고, 사용자에 의해 선택되고 이미지 뷰어(40)로부터 제공된 이미지와 부가정보를 포함하는 디지털 콘텐츠를 제공할 수 있다.

이미지 뷰어(40)는 디지털 콘텐츠 처리부(31)의 디지털 콘텐츠를 조달하는 공급원으로서, 이미지 데이터베이스(50)의 이미지 파일과 태그정보 데이터베이스(60)의 태그정보를 바탕으로 가공한 디지털 콘텐츠를 공급한다.

이미지 데이터베이스(50)에 저장된 이미지 파일은 개별 이차원 이미지에 의해 생성되거나 스크롤 조작에 연계된 시퀀스 이차원 이미지로서 복수의 이차원 이미지에 의해 생성되는 것으로 구분할 수 있다. 여기서 개별 이차원 이미지는 서비스 아이템을 1장의 이미지로 보여주기 위한 낱개 이미지 파일로 생성되고, 스크롤 조작에 연계된 복수의 이차원 이미지는 좌우 또는 상하방향으로 마우스를 드래그하는 경우 이동 방향을 따라 연속으로 나타나는 복수의 이차원 이미지에 대응하는 한 세트의 이미지 파일로 생성될 수 있다.

스크롤 조작에 연계된 복수의 이차원 이미지가 이미지 뷰어(40)에 의해 짧은 시간 동안 연속으로 보일 때 마치 서비스 아이템의 오브젝트가 가상으로 회전하는 것으로 인식될 수 있고, 이를 본 발명에서는 스크롤 조작에 따라 이차원 이미지를 회전하는 스크롤 기능이라고 하고, 스크롤 조작에 연계된 복수의 이차원 이미지는 가상 이차원 이미지라고 지칭하여 설명하기로 한다.

이미지 데이터베이스(50)에 저장할 이미지 파일의 생성 방법을 설명한다.

하나의 방법으로 서비스 아이템을 대상으로 촬영 스튜디오에서 촬영 및 디지털화하여 개별 이차원 이미지 또는 가상 이차원 이미지의 이미지 파일을 직접 생성할 수 있다. 가상 이차원 이미지의 이미지 파일을 생성할 때 피사체인 서비스 아이템을 스크롤 방향으로 서로 다른 각도만큼 회전시켜 촬영하거나, 서비스 아이템을 고정시켜 놓고 스크롤 방향으로 촬영수단을 이동시켜 서로 다른 각도에서 촬영하여 이미지 파일을 획득할 수 있다.

서비스 아이템의 실제 크기가 매우 크거나 미제작 제품을 취급할 수밖에 없어 서비스 아이템의 실물 촬영이 어렵고 부적합한 경우, 또는 실물 촬영한 일부의 촬영 이미지를 가지고 복수 개의 가상 이차원 이미지를 만들어야 하는 경우에는 다른 방법으로서 도 2와 같이 컴퓨터 작업을 통하여 이미지 파일을 생성할 수 있다.

도 2를 참고하여, 디지털 카메라 등 촬영 수단으로 촬영한 임시 이미지를 변환하여 서비스 아이템의 기초 이미지 데이터를 획득하거나 AutoCad와 같은 캐드 프로그램을 이용한 작업으로 서비스 아이템의 기초 이미지 데이터를 획득한다(100). 여기서 기초 이미지 데이터는 서비스 아이템의 외관을 나타내는 전면, 후면, 좌측면, 우측면, 상부면, 하부면 중 적어도 하나를 시각적으로 나타내게 된다. 그런 다음 모델링 프로그램을 이용하여 기초 이미지 데이터를 가공하여 해당 서비스 아이템의 오브젝트를 모델링한다(110). 이후 모델링된 서비스 아이템의 오브젝트에 대해 색상과 텍스쳐를 디자인하여 렌더링한다(120). 이렇게 완성된 서비스 아이템의 렌더링 데이터를 이용하여 이미지 파일을 생성한다(130). 도 2에서의 이미지 생성 방법을 반복하여 복수 개의 이미지에 대응하는 한 세트의 이미지 파일을 생성할 수 있다.

태그정보 데이터베이스(60)는 서비스 아이템을 자세하게 소개하는 상세 정보로서 태그정보를 저장하며, 이러한 태그정보는 개별 이차원 이미지 또는 가상 이차원 이미지에 연계시켜 뷰어 화면에 나타내는데 필요한 태그 설정 파일과 태그 데이터를 포함한다.

디지털 콘텐츠 처리부(31)는 이미지 뷰어(40)에 의해 처리된 이미지 파일(개별 이차원 이미지 또는 가상 이차원 이미지) 및 태그정보를 바탕으로 웹 페이지(32)를 통하여 디지털 콘텐츠를 출력한다.

이미지 뷰어(40)는 개별 이차원 이미지를 렌더링하여 디지털 콘텐츠 처리부(31)에 제공하거나 가상 이차원 이미지를 렌더링하여 디지털 콘텐츠 처리부(31)에 제공한다. 즉, 이미지 뷰어(40)는 웹 서버(30)의 입력 이벤트에 따라 개별 이차원 이미지 또는 가상 이차원 이미지를 선택적으로 제공할 수 있다.

이미지 뷰어(40)에 의해 개별 이차원 이미지 또는 가상 이차원 이미지에 맵핑된 태그정보를 제공할 수 있다. 예를 들어, 마우스 등의 포인팅 장치를 이용하여 개별 이차원 이미지 또는 가상 이차원 이미지상에서 드래그하거나 태그 버튼의 선택만으로 사용자 의도를 파악하여 이미지상에 맵핑된 태그정보를 웹 페이지(32)에 디스플레이할 수 있다. 즉 뷰어 화면에 나타나는 이미지상에서 마우스의 커서를 이동시킬 때 설정된 태그 범위에 마우스의 커서가 위치하면 태그정보가 뷰어 화면에 출력되도록 하여 사용자가 태그정보를 확인할 수 있도록 한다.

또한 이미지 뷰어(40)는 사용자에 의해 마우스의 커서를 드래그하는 스크롤 조작에 따라 가상 이차원 이미지를 뷰어 화면에 연속으로 보여줄 수 있고, 스크롤 도중 정지된 어느 하나의 이미지상에서 마우스의 커서가 설정된 태그 범위에 위치하거나 태그버튼을 선택하는 경우 태그정보가 뷰어 화면에 출력되도록 하여 사용자가 태그정보를 확인할 수 있도록 한다.

도 3은 본 발명에 따른 이미지 뷰어의 상세 구성을 나타낸 블록도이다.

도 3에 도시한 바와 같이, 이미지 뷰어(40)는 인터페이스를 수행하기 위한 사용자 인터페이스(411)를 구비한다. 사용자 인터페이스(411)는 웹페이지(32)에 접속한 사용자가 이미지 뷰어(40)를 조작하기 위한 입력 이벤트를 처리하거나, 관리자에 의한 태그 좌표의 설정 동작을 수행하기 위한 입력 이벤트를 처리한다.

비율 조정모듈(412)은 돋보기 기능을 활성화시킨 상태에서 마우스 커서가 지시하는 일부 영역을 확대하여 보여주는 기능을 처리하고, 또한 마우스 휠의 조작에 따라 서비스 아이템에 대한 전체 이미지를 확대하거나 축소하여 보여주는 기능을 처리한다.

가상 이차원 이미지 회전모듈(413)은 스크롤 기능을 활성화시킨 상태에서 마우스 커서를 드래그하는 동작에 응답하여 도 2에 따라 생성된 한 세트의 이미지 파일을 연속으로 로딩하여 가상 이차원 이미지를 연속으로 보여줌으로써 뷰어 화면에서 서비스 아이템의 오브젝트가 가상으로 회전하는 것처럼 디스플레이하는 기능을 처리한다.

태그정보 처리모듈(414)은 태그 기능을 활성화시킨 상태에서 마우스 커서가 지시하는 영역이 사전 설정된 태그 범위에 위치하면 해당 이미지에 맵핑된 태그정보가 자동적으로 디스플레이되는 기능을 처리한다. 이러한 태그정보는 서비스 아이템에 관련된 정보 예를 들어 제품 사양과 사용법 등을 알려주기 위한 텍스트, 이미지, 동영상 등이 포함될 수 있다.

이차원 이미지 렌더링 모듈(415)은 개별 이차원 이미지를 웹 페이지(32)에 그려주는 기능을 한다. 가상 이차원 이미지 렌더링 모듈(416)은 가상 이차원 이미지들을 웹 페이지(32)에 그려주는 기능을 한다.

이차원 좌표 검사모듈(417)과 가상 이차원 좌표 검사모듈(418)은 각각 개별 이차원 이미지와 가상 이차원 이미지상에 위치하는 마우스 커서의 좌표가 태그 범위에 존재하는지를 검사한다.

설정정보 로더(419)는 이차원 설정부(420)와 가상 이차원 설정부(421)에 의해 각각 개별 이차원 이미지와 가상 이차원 이미지에 설정된 태그 설정파일과 뷰어 설정 정보를 로딩하고 적용한다.

초기화 모듈(422)은 이미지 뷰어(40)를 초기화하는 기능을 수행한다.

비동기 이미지 로딩모듈(423)은 뷰어를 이용하여 디스플레이되는 이미지 파일을 필요한 시기에만 로딩함으로써 로딩 시간을 줄이기 위한 것으로, 다수의 이미지 파일들을 한꺼번에 로딩하지 않고 해당하는 이미지 파일을 개별적으로 로딩하는 기능을 수행한다.

가상 이차원 좌표 계산모듈(424)은 스크롤 조작에 따라 가상 이차원 이미지가 연속으로 나타날 때 해당 이미지에 맵핑된 태그 범위가 변경될 수 있고, 이렇게 변경된 태그 범위의 태그 좌표를 자동 계산한다. 한 세트의 이미지 파일 중 초기에 나타나는 가상 이차원 이미지를 기준으로 정한다(이하 기준 가상 이차원 이미지(또는 초기 이미지)라고 지칭하고, 기준 가상 이차원 이미지(또는 초기 이미지)에 맵핑된 태그 좌표는 관리자에 의해 사전 설정된다). 이 기준 가상 이차원 이미지를 중심으로 좌우 방향(왼쪽 또는 오른쪽), 상하방향(위쪽 또는 아래쪽)으로 스크롤 조작하거나, 뷰어 화면의 이미지를 확대 또는 축소할 때 해당하는 가상 이차원 이미지의 크기가 바뀌게 되는데, 기준 가상 이차원 이미지에 설정된 태그 범위의 좌표가 변경되므로 이러한 변경 좌표를 자동 계산한다.

파일 처리모듈(425)은 이미지 뷰어(40)에서 사용하는 파일(개별 이차원 이미지 파일, 가상 이차원 이미지 파일, 설정 파일)을 로딩하고 로딩된 데이터를 파싱하는 기능을 한다.

소스코드 보호모듈(426)은 텍스트 파일 형태로 배포되는 소스 코드를 보호하기 위해 난독화된 코드로 변환하는 기능을 하며, URL 및 날짜를 지정하여 특정 웹 사이트 및 일정 기간 동안 제한적으로 사용할 수 있도록 한다.

외부 인터페이스 모듈(427)은 사용자 단말(10)의 웹 페이지에서 이미지 뷰어(40)을 제어하기 위하여 제공되는 인터페이스 모듈로서, API(application programming interface)를 이용하여 구현한다.

도 4a는 본 발명에 따른 이미지 뷰어에 의해 개별 이차원 이미지에 맵핑된 태그정보를 제공받는 기능을 예시적으로 설명하는 도면이다.

사용자 단말(10)에 제공된 웹 페이지는 웹 브라우저 화면(200)을 통하여 검색된 서비스 아이템에 대한 다양한 쇼핑 정보를 볼 수 있는데, 뷰어 화면(210)에 예를 들어 상품 리스트에서 선택된 상품 이미지(Ia)와 함께 태그 버튼(211)이 표시된다. 태그 버튼(211)으로 팝업 창을 열어 '돋보기 기능'을 활성화시킨 상태에서 사용자에 의해 마우스 커서가 뷰어 화면(210)에서 이동되고, 이에 응답하여 전체 이미지 중에서 부분 확대된 이미지(221)가 보조창(220)에 표시된다.

실시예와 다르게 마우스 커서의 이동에 따라 뷰어 화면(210) 안에서 부분 확대된 이미지가 오버랩되어 표시되게 할 수도 있다. 또한 뷰어 화면(210)에 로딩된 상품 이미지(Ia)에 맵핑된 태그 범위들을 시각적으로 쉽게 구분할 수 있도록 마킹하여 나타낼 수 있다(노랑색 파선 안에 적색 점을 표시한다). 실시예에서는 표시되는 서비스 아이템의 오브젝트에 대응하는 상품 이미지(Ia)에 3개 태그를 맵핑하였으나, 그 상품 이미지(Ia)에 맵핑하는 태그 개수는 변경할 수 있다. 또한 이러한 태그들은 평상시 나타나지 않다가 태그 버튼(211)으로 태그 기능을 활성화시킨 상태에서만 태그 범위가 표시되거나, 사용자에 의해 이동하는 마우스 커서가 해당 태그 범위에 위치하면 시각적으로 마킹되어 나타나게 할 수 있다.

이렇게 마우스 커서로 태그 범위를 클릭하여 선택하는 경우, 보조창(220) 안에 태그정보의 태그 데이터가 나타나는 태그 보조창(222)이 제공된다. 태그 보조창(222)은 해당 상품의 제원, 사용법, 관련 웹사이트로 이동하기 위한 주소 정보 등을 포함할 수 있다. 또한 태그 보조창(222)에는 다양한 정보를 제공하기 위한 이미지 또는 동영상 등으로 구현할 수도 있다.

도 4a에 따라 설명한 바와 같이, 서비스 아이템의 외관이 단순하고 태그정보의 분량이 적으면 개별 이차원 이미지를 동원하고, 서비스 아이템 특성상 서로 다른 각도에서 바라본 이미지를 보여줄 필요가 있고 많은 분량의 태그정보를 제공할 필요가 있는 경우에는 가상 이차원 이미지를 동원한다.

가상 이차원 이미지를 동원하는 경우, '돋보기 기능'과 '태그 기능' 뿐만 아니라 '스크롤 기능'을 수행할 수 있다. 여기서 '스크롤 기능'은 동일한 서비스 아이템에 대하여 마우스 커서를 이용하여 좌우방향 또는 상하방향으로 이동하는 경우, 이동 방향과 회전 각도에 따라 복수의 가상 이차원 이미지를 연속으로 표시하고, 이때 이미지에 맵핑된 태그 범위도 동적으로 변경된다.

도 4b를 참고하여, 이미지에 대한 '확대 기능'을 설명한다.

실시예에서 '확대 기능'은 사용자에 의해 마우스의 휠 조작으로 확대와 축소 비율을 선택하여 이미지 크기를 변경한다. 예를 들어 이미지를 확대하는 경우, 도 4b (a)에서 뷰어 화면(210)에 표시된 이미지의 중심(Cm)에서 일정 거리 떨어진 태그지점1(T1)의 2차원 좌표(x1, y1)는 도 4b (b)의 확대된 이미지에서 이미지 중심(Cm)의 위치는 변동 없이 표시되나 태그 지점1(Ta1)의 2차원 좌표(x2, y2)는 변화하게 된다. 뷰어 화면(210)의 크기가 정해지고, 확대 또는 축소 비율을 알고 있으므로 뷰어 화면(210)의 태그지점1(T1)의 2차원 좌표(x1, y1)로부터 변화된 태그 지점1(Ta1)의 2차원 좌표(x2, y2)를 계산할 수 있다.

실시예에서 '확대 기능'의 다른 방법으로, 도 4c에 도시한 바와 같이, 웹 브라우저 화면(200) 전체 영역을 활용하여 이미지를 확대 또는 축소할 수 있다. 이때 확대 또는 축소되는 이미지의 크기가 변화하므로 절대좌표를 이용한 좌표 계산을 적용하지 않고, 대신에 웹브라우저 화면(200)에서 상대적인 위치 변화를 이용하여 태그 지점의 좌표를 계산한다. 웹 브라우저 화면(200)의 중심 즉 이미지 중심(Cm)을 일치시키고 이를 원점으로 좌우상하 방향으로 떨어진 거리 비율을 이용하여 태그 지점의 좌표값을 설정한다. 예를 들어 수평 방향의 x축 좌표값은 좌측 방향으로 원점에서 떨어진 거리에 대응하는 거리비율(0 ~ -100%)과 우측 방향으로 원점에서 떨어진 거리에 대응하는 거리비율(0 ~ +100%)로부터 해당 태그 지점의 x값을 설정한다. 또한 상하 방향의 y축 좌표값은 상측 방향으로 원점에서 떨어진 거리에 대응하는 거리비율(0 ~ +100%)과 하측 방향으로 원점에서 떨어진 거리에 대응하는 거리비율(0 ~ -100%)로부터 해당 태그 지점의 y값을 설정한다. 마우스의 휠 조작으로 확대 또는 축소하는 경우, 거리 비율로 설정된 좌표값(x축 거리비율, y축 거리비율)에 대한 확대 비율 또는 축소 비율에 따라 좌표값을 계산하여 확대 또는 축소된 이미지에서 변화된 태그 지점의 좌표값을 계산한다.

실시예에서 '스크롤 기능'에 적용하는 가상 이차원 이미지와 태그 설정 방법을 상세히 설명한다.

도 5a를 참고하여, 서비스 아이템의 이미지 즉 오브젝트를 대상으로 가상 회전축을 기준으로 수평 방향과 상하 방향으로 회전할 때 해당 오브젝트에 대한 가상의 이미지를 생성할 수 있다. 이때 오브젝트 상에서 태그 지점에 대응하는 소정의 포인터를 지정하고, 이 포인터의 좌표를 태그 지점의 좌표로 설정할 수 있다.

실시예에서는 수평 방향 회전시 40단계로 구분하고 상하 방향 회전시 9단계로 구분하여 다양한 각도에서 생성되는 가상의 이차원 이미지를 획득할 수 있다. 예를 들어 동일한 서비스 아이템에 대해 생성된 이미지 파일은, 도 5b에 도시한 바와 같이, 하나의 상품에 대해 상하 방향으로 9단계, 수평 방향으로 40단계로 나누어 360개의 이미지 파일로 구성하고, 각 이미지 파일에 파일명을 부여한다. 파일명은 '제1번호_제2번호' 형태로 부여하는 경우, 제1번호가 상하 방향의 촬영 단계번호를 의미하고, 제2번호는 수평 방향의 촬영 단계번호를 의미하도록 설정함으로써, 이미지 파일을 로딩시 이미지 파일의 파일명에 대한 정보로부터 상하 방향 및 수평 방향의 회전 각도를 인식할 수 있다.

도 5c에 도시한 바와 같이, 서비스 아이템에 대응한 한 세트의 이미지 파일은 복수의 가상 이차원 이미지를 포함한다. 이러한 가상 이차원 이미지에 대해 태그정보를 맵핑할 수 있다. 도 5c에 예시한 바와 같이, 좌표 설정의 기준이 되는 가상 이차원 이미지(파일명 0_16)의 태그지점(C)의 x좌표와 y좌표는 각각 250px, 240px 이고, 적색의 원으로 표기한 태그 범위는 태그 지점(C)을 중심으로 직경 30px로 설정할 수 있다. 여기서 태그 지점(C)에 대한 x,y 좌표값과 태그 범위는 관리자에 의해 설정하고, 다른 가상 이차원 이미지에 대응하는 태그 범위와 태그 지점의 좌표는 가상 이차원 좌표 계산 모듈(424)에 의해 자동 계산된다.

가상 이차원 좌표 계산 모듈(424)은 부여된 이미지 파일의 파일명(제1번호_제2번호)으로부터 상하 방향과 수평 방향에 대한 회전 각도를 알아낸다. 가상 이차원 좌표 계산 모듈(424)은 서비스 아이템의 오브젝트를 스크롤하기 위한 가상 회전축의 좌표를 지정하는데, 즉 전체 이미지의 중심에 해당하는 좌표로 지정한다. 또한 가상 이차원 이미지에 맵핑된 동일 태그가 스크롤 방향에 따라 좌표값이 변화되는데, 가상 이차원 좌표 계산모듈(424)은 회전 각도와 가상 회전축 좌표 그리고 스크롤 방향으로 변경된 태그 좌표를 이용하여 가상의 원을 설정하고, 이 가상 원에 해당하는 좌표를 계산한다. 이렇게 태그 좌표를 계산하여 변경된 태그 범위를 설정할 수 있다.

자동 계산된 태그 좌표값과 태그 범위는 해당 가상 이차원 이미지에 따라 다를 수 있다. 도 6에 예시한 바와 같이, 기준이 되는 가상 이차원 이미지(파일명 0_16)에 대해서는 x,y 좌표 및 태그 범위를 250px, 240px, 30px로 직접 설정한 경우, 스크롤 조작에 따라 왼쪽으로 수평 회전된 가상 이차원 이미지(파일명 0_12)에 대해서 x,y 좌표 및 태그 범위는 각각 265px, 240px, 15px로 변경된다. 즉 스크롤 조작에 따라 수평 회전된 가상 이차원 이미지에 대해 태그 좌표의 y좌표는 일정하며 x좌표와 태그 범위는 바뀌게 된다.

도 7을 참고하면, 스크롤 조작에 따라 왼쪽으로 수평 회전하는 경우 위쪽에 있는 기준 가상 이차원 이미지의 태그 설정 좌표(관리자에 의해 직접 설정된다)는 라인 L1에 위치하고, 가운데 있는 가상 이차원 이미지에 맵핑되고 가상 이차원 좌표 계산 모듈(424)에 의해 계산되는 태그 좌표는 가장 우측의 라인 L2에 위치하며, 아래쪽에 있는 가상 이차원 이미지에 맵핑되고 가상 이차원 좌표 계산 모듈(424)에 의해 계산되는 태그 좌표는 라인 L1과 라인 L2 사이의 라인 L3에 위치하게 된다.

도 6에서 스크롤 조작에 따라 오른쪽으로 수평 회전된 가상 이차원 이미지(파일명 0_20)에 대해서 x,y 좌표 및 태그 범위는 각각 240px, 240px, 15px로 변경된다. 도 8에 도시한 바와 같이 스크롤 조작에 따라 오른쪽으로 수평 회전하는 경우, 위쪽에 있는 기준 가상 이차원 이미지에 직접 설정한 태그 설정 좌표는 라인 R1에 위치하고, 가운데 있는 가상 이차원 이미지에 맵핑되고 가상 이차원 좌표 계산 모듈(424)에 의해 계산되는 태그 좌표는 라인 R2에 위치하며, 아래쪽에 있는 가상 이차원 이미지에 맵핑되고 가상 이차원 좌표 계산 모듈(424)에 의해 계산되는 태그 좌표는 가장 좌측의 라인 R3에 위치하게 된다.

스크롤 조작에 따라 상하 방향으로 수직 회전하는 경우에도, 자동 계산되는 좌표값은 변화하는 것을 알 수 있다. 도 9에 예시한 바와 같이, 기준 가상 이차원 이미지를 스크롤 조작에 따라 위쪽으로 수직 회전하는 경우 가상 이차원 이미지에 맵핑된 태그 좌표의 x좌표값은 동일하고 y좌표값이 변화하게 된다.

가상 이차원 좌표 계산 모듈(424)은 기준 가상 이차원 이미지에 대해 설정된 x,y 좌표값과 태그범위를 바탕으로 왼쪽, 오른쪽, 위쪽, 아래쪽으로 스크롤되는 각각의 가상 이차원 이미지에 대해서 알고 있는 회전각도를 적용하여 해당하는 가상 이차원 이미지의 x,y 좌표값과 태그 범위를 자동 계산하기 위한 계산 파일을 구비한다. 도 9에서 스크롤 조작에 따라 수평 방향 또는 상하 방향으로 회전시 기준 가상 이차원 이미지(파일명(0_16)에 대응하는 태그 범위가 변경된다. 예를 들어 스크롤 조작에 따라 상하 방향 또는 좌우 방향으로 회전시 태그 범위는 감소되며(도 6 참조), 변경된 태그 범위는 계산 프로그램을 이용하여 계산한다.

본 발명은 홈페이지 또는 온라인 쇼핑몰을 매개로 이미지와 태그 정보를 바탕으로 디지털 콘텐츠를 제공하도록 웹 환경에 적합한 html 언어로 프로그램작업을 하고, 이러한 사전 준비작업으로 웹 사이트를 구축한 이후 앞서 설명한 바와 같이 서비스하는 도중에 서비스 아이템에 관련된 이미지를 추가하거나 수정할 수 있고 이러한 이미지와 연계된 태그 정보를 편집해야 하는 상황에 처할 수 있다. 서비스 아이템의 이미지와 태그 정보에 대한 편집 작업을 하려면 종래에는 프로그램 작업을 능숙하게 다루는 전문가에 의존해서 소스 코드를 작성하는 편집 과정을 이용할 수밖에 없었기 때문에 사용상의 불편이 따른다. 따라서 프로그램 작업에 관련된 지식을 습득하지 않은 비숙련자라도 이미지와 태그 정보를 쉽게 편집할 수 있는 방법이 요구된다.

이를 고려하여, 본 발명에서는 이미지와 태그 정보를 쉽게 편집할 수 있는 뷰어 편집기(70)를 이용한다. 편집 작업의 활성화는 웹페이지에서 접근 권한을 가진 관리자가 편집 작업을 수행하며, 뷰어 화면에 나타나는 "뷰어 편집기" 버튼을 선택하여 편집 모드로 전환하고 후술하는 뷰어 편집기(70)의 이미지 편집창(71)과 태그 편집창(72)을 이용하여 세부적인 사항을 편집하게 된다. 이를 상세히 설명한다.

도 10a는 본 발명에 따른 뷰어 편집기의 이미지 편집창을 예시적으로 나타낸 도면이고, 도 10b는 본 발명에 따른 뷰어 편집기의 태그 편집창을 예시적으로 나타낸 도면이며, 도 10c는 본 발명에 따른 뷰어 편집기의 이미지 편집창과 태그 편집창에 입력된 정보를 바탕으로 만들어지는 파일 생성과 폴더 구조를 설명하기 위한 도면이고, 도 10d는 본 발명에 따른 뷰어 편집기를 이용한 편집 과정을 설명하기 위한 흐름도이다.

편집 권한을 가진 관리자에 의한 제어 명령에 따라 웹페이지(32)에서 이미지 뷰어(40)의 뷰어 화면을 출력하고, 뷰어 화면의 "뷰어 편집기" 버튼을 선택하여 뷰어 편집기(70)를 활성화한다(700). 그런 다음 편집 작업의 대상을 선택한다(710).

이미지 데이터베이스(50)에 새로운 이미지를 추가하거나 저장된 이미지를 수정하려면 이미지 편집창(71)을 관리자 단말(미도시)에서 불러와서 출력하고, 이미지 추가 또는 수정에 관련하여 태그정보를 편집하려면 태그 편집창(72)을 관리자 단말에서 불러와서 출력한다(720, 740).

뷰어 화면에서 이미지 편집창(71)을 열어 편집하는 과정을 설명한다. 도 10a를 참고하여, 추가하거나 수정할 이미지와 설정 정보를 입력한다. 예를 들어 이미지 편집창(71)에서 서비스 아이템 타이틀(①), 이미지 선택(②), 초기 이미지(③), 상하방향 이미지 개수(④), 좌우방향 이미지 개수(⑤), 뷰어 화면 사이즈(⑥), 초기 이미지 사이즈(⑦)에 해당하는 설정 데이터를 각각 입력한다. 서비스 아이템 타이틀(①)의 입력칸에 서비스 아이템을 식별하기 위한 이름을 입력하고, 이미지 선택(②)의 입력칸에 이미지 데이터베이스(50)에서 불러와서 보조창(71-1)에 나타나는 이미지 리스트에서 선택하거나 도 2에 따라 새로 생성되어 보조창(71-1)에 나타나는 이미지 아이콘에서 선택하는 방법으로 선택 이미지를 입력할 수 있다. 초기 이미지(③)의 입력칸에 이미지 선택(②)에서 선택된 이미지들 중에서 뷰어 로딩시 처음 나타나는 초기 이미지를 입력하게 된다.

상하방향 이미지 개수와 좌우방향 이미지 개수(④)의 입력칸에 스크롤 조작에 따라 상하방향 또는 좌우방향으로 연속으로 나타나는 이미지의 개수를 각각 설정하기 위한 것으로, 해당하는 수치를 입력한다. 뷰어 화면 사이즈(⑤)의 입력칸에는 뷰어 화면(210)의 세로(height)와 가로(width)에 대응한 픽셀 단위(px)의 수치를 입력하고, 초기 이미지 사이즈(⑥)의 입력칸에는 뷰어 화면(210)에 처음 나타나는 초기 이미지의 세로(height)와 가로(width)에 대응한 픽셀 단위(px)의 수치를 입력한다(730).

도 10b를 참고하여, 뷰어 화면에서 태그 편집창(72)을 열고, 추가하거나 수정할 이미지와 관련된 태그 정보를 입력한다. 예를 들어 태그 편집창(72)에서 태그 타이틀(⑦), 서브 태그 유무(⑧), 태그 내용(⑨), 지정 이미지번호(⑩), 지정 이미지위치(⑪), 태그팝업 화면 사이즈(⑫), 태그팝업 화면 위치(⑬), 연결선 유무(⑭)에 해당하는 설정 데이터를 입력한다.

태그 타이틀(⑦)의 입력칸에 수정하거나 추가하는 해당 이미지에 관련된 태그 정보를 식별하기 위한 이름을 입력하고, 서브 태그 유무(⑧)의 입력칸에는 태그 타이틀(⑦)의 태그에 부속된 서브 태그가 있는지를 입력한다. 태그 내용(⑨)의 입력칸에는 서비스 아이템에 관련된 제품 제원, 출처, 생산지, 원산지, 성분명, 취급 방법, 가격, 안내 설명, 주의사항 등을 제공하기 위한 것으로 텍스트로 입력하는데, 반드시 텍스트로 제한될 필요는 없으며 이미지 및 동영상 등을 볼 수도 있도록 링크 걸기를 이용할 수도 있다.

지정 이미지번호(⑩)의 입력칸에는 태그 지정을 위한 이미지를 식별하기 위한 이미지 파일을 입력하는데, 실시예에서 이미지 파일에 대해 제1번호_제2번호를 부여하고 있으므로 해당하는 이미지 번호를 입력한다.

지정 이미지위치(⑪)의 입력칸에 태그가 지정될 이미지에서의 태그 지점을 수치 또는 비율(%)로 입력하고, 태그팝업 화면 사이즈(⑫)의 입력칸에는 태그 데이터를 나타내기 위한 팝업 화면의 세로와 가로에 대응한 픽셀 단위(px)의 수치를 입력하고, 태그팝업 화면 위치(⑬)의 입력칸에는 뷰어 화면에서 태그 팝업 화면이 나타나는 위치를 수치 또는 비율(%)로 입력하며, 연결선 유무(⑭)의 입력칸에는 태그 지점과 태그 팝업 화면을 연결하는 연결선을 나타나게 할 것인지를 설정하게 된다(750).

뷰어 편집기(70)에 의한 편집 작업에 따른 파일 생성 과정을 상세히 설명한다. 설명의 편의상 서비스 아이템 타이틀은 "AAA"라고 예시하여 설명한다.

이미지 편집창(71)과 태그 편집창(72)을 이용한 입력 작업이 완료되면, 관련 파일들로서 html 파일, js 파일, json 파일 등이 생성되는데, 도 10c에 도시한 바와 같이 계층 구조로 생성된다. 편집 작업이 완료되면, 새로운 기본 폴더(73)가 만들어지고, 기본 폴더(73) 하부에는 AAA.html과 VR 폴더(74)가 만들어지며, VR 폴더(74) 하부에는 AAA.js, AAA.json과 AAA 폴더(75)가 만들어지고, AAA 폴더(75) 하부에는 복수 이미지(이미지1, 이미지2, ..., 이미지n)와 info.json 이 만들어진다. 여기서 html 파일은 뷰어 화면을 구성하는 기본 파일이다. js 파일은 뷰어 화면의 초기 설정을 위한 파일로서 이미지 경로, 뷰어 화면의 전체 사이즈, 초기 이미지 사이즈, 초기 이미지의 번호를 설정하게 된다. json 파일은 태그정보를 설정하기 위한 파일로서 태그 타이틀, 서브 태그의 유무, 태그 팝업 화면의 사이즈, 태그 팝업 화면이 나타날 화면 위치, 태그 지정된 이미지 번호, 해당 이미지에서의 태그 지점, 태그 지점과 태그 팝업 화면의 연결선의 유무, 스크롤에 따른 회전 유무 등을 설정하게 된다. info.json은 스크롤 조작에 따라 좌우방향과 상하방향으로 연속으로 보여지는 이미지의 개수를 설정하기 위한 파일이다.

뷰어 편집기(70)를 통하여 생성된 파일들을 예시하면 다음과 같다.

『예시 1 』 AAA.html

<!DOCTYPE html>

<html lang="kr">

<head>

<meta charset="UTF-8">

<title>AAA</title> ☜ ①에 입력한 내용

<link rel="stylesheet" href="SamterImgViewer.css">

<style>

body ｛

padding: 0px;

margin: 0px;

｝

</style>

</head>

<body>

<div id="target"></div>

<script src="SamterImgViewer.js"></script>

<script src="./VR/AAA.js"></script> ☜ ①에 입력한 내용으로 js 파일명 지정

</body>

</html>

『예시 2 』 AAA. js

// 이미지 뷰어 선언

var viewer = new eSamter.SamterImgViewer(｛

target: $('#target'),

imgURL: 'AAA.turntable', ☜ ②에 입력한 내용으로 js 파일명 지정

height: 1000, ☜ ⑤에 입력한 내용으로 뷰어 화면 사이즈의 height 지정

width: 1000, ☜ ⑤에 입력한 내용으로 뷰어 화면 사이즈의 width 지정

imgWidth: 500, ☜ ⑥에 입력한 내용으로 초기 이미지 사이즈의 width 지정

imgHeight: 400, ☜ ⑥에 입력한 내용으로 초기 이미지 사이즈의 height 지정

showLinkChain: true, ☜ ⑫에 입력한 내용으로 연결선 설정 여부 지정

useLink: true,

turntableStartName: '0_0.jpg', ☜ ③에 입력한 내용으로 초기 이미지 번호

cursorType:'mGlass'

｝);

『예시 3 』 AAA. json (서브태그가 없는 경우)

[｛"type": "manual"｝,

｛"type": "reset"｝,

｛"type": "mgglass"｝,

｛

"type": "detail",

"id": "samter-menu-tagMenu",

"menuClassName": "samter-menu-tagMenu",

"child": [｛ ☜ ⑧에 입력한 내용으로 서브 태그의 유무

"type": "tag",

"name": "Spec", ☜ ⑦에 입력한 태그 타이틀

"className": "samter-animation-left",

"menuClassName": "samter-menu-block-button",

"w": 250, ☜ ⑫에 입력한 태그팝업의 가로 사이즈

"h": 200, ☜ ⑫에 입력한 태그팝업의 세로 사이즈

"x": 74, ☜ ⑬에 입력한 태그팝업이 나타날 위치 %로 입력

"y": 5, ☜ ⑬에 입력한 태그팝업이 나타날 위치 %로 입력

"linkX": 50, ☜ ⑪에 입력한 이미지의 태그지점 x축 지점 %입력

"linkY": 50, ☜ ⑪에 입력한 이미지의 태그지점 y축 지점 %입력

"linkZ": 5, ☜ ⑪에 입력한 이미지의 태그지점 깊이

"useLink": false,

"useLinkMagnifyingGlass": false,

"showLinkTarget": false,

"showLinkPointer": false,

"linkSize": 20,

"linkPointerSize": 15,

"turntableH": 2, ☜ ⑩의 입력내용으로 태그가 지정될 이미지파일 이름의 앞번호

"turntableV": 21, ☜ ⑩의 입력내용으로 태그가 지정될 이미지파일 이름의 뒷번호

"content": "test"

｝

]｝

]

『예시 4 』 info. json

｛"maxH":0, "maxV":23｝ ☜ ④의 입력내용으로 이미지 개수(maxH : 상하방향, maxV : 좌우방향)

이와 같이 뷰어 편집기(70)의 이미지 편집창(71)과 태그 입력창(72)에 입력된 데이터는 별도의 변환 과정을 거치지 않고 js 파일과 json 파일 등으로 생성되고, 생성된 파일들은 이미지 데이터베이스(50)와 태그정보 데이터베이스(60)에 업로드 되는데, 이는 node.js 라는 파일 시스템을 이용하여 구현할 수 있다(760, 770).

이미지 뷰어(40)가 이미지 데이터베이스(50)에서 추가 또는 수정된 이미지 파일을 불러와서 뷰어 화면에 나타낼 수 있으며, 추가 또는 수정된 이미지 파일에 맵핑된 태그정보 데이터베이스(60)의 태그 설정파일과 태그 데이터를 불러와서 뷰어 화면에 나타낼 수 있다.

도 11은 본 발명에 따른 이미지 뷰어를 초기화하고 태그정보를 제공하기 위한 각 구성부의 처리 과정을 나타낸 도면이다.

사용자 단말(10)이 웹 서버(30)에 접속하는 경우, 디지털 콘텐츠 처리부(31)는 이미지 뷰어 초기화 요청하며, 이에 따라 이미지 뷰어(40)는 설정 파일을 요청하여 태그정보 데이터베이스(60)로부터 설정 파일을 제공받는다. 설정파일은 이미지 저장 경로, 로딩시 적용하는 이미지 파일, 돋보기 사이즈, 돋보기 기능에서 적용하는 확대 비율 등을 포함한다.

이미지 뷰어(40)는 이미지 파일을 요청하여 이미지 데이터베이스(50)로부터 이차원 이미지 파일 또는 가상 이차원 이미지 파일을 제공받으며, 제공받은 이미지 파일은 회전각 정보를 포함한다.

이미지 뷰어(40)는 설정 파일과 이미지 파일을 바탕으로 초기화를 수행하고, 초기화 수행시 설정 파일 로딩 과정은 설정정보 로더(419)에 의해 수행되고 이미지 파일 로딩 과정은 비동기 이미지 로딩모듈(423)에 의해 수행된다.

초기화 과정이 완료되면, 초기화 완료 명령을 디지털 콘텐츠 처리부(31)에 입력하고, 이에 따라 디지털 콘텐츠 처리부(31)는 웹 페이지(32)를 통하여 온라인 쇼핑이 시작될 수 있도록 한다.

사용자 단말(10)에 다운로드 받은 웹 페이지 상에서 고객에 의해 마우스 조작을 통하여 상품의 부가정보에 대한 검색을 수행할 수 있다. 마우스 커서의 이동에 따라 제공되는 좌표값을 전달받은 이미지 뷰어(40)의 이차원 좌표 검사모듈(417) 또는 가상 이차원 좌표 검사모듈(418)은 웹 페이지 상에 디스플레이되는 이미지의 태그 범위에 커서가 위치하는지를 검사한다. 커서가 태그 범위에 해당하지 않으면 그대로 응답하고, 커서가 태그 범위에 해당하는 것으로 판단되면 해당 태그정보를 태그정보 데이터베이스(60)에 요청하고 전달받은 태그정보를 디지털 콘텐츠 처리부(31)에 전달하여 고객 웹 페이지 상에서 태그정보를 확인할 수 있도록 한다.

도 12a 내지 도 12f는 본 발명에 따른 웹 페이지의 상품 검색창에서 가상 이차원 이미지와 태그정보를 제공받는 과정을 예시하여 설명하기 위한 도면이다.

사용자 단말(10)은 통신망(20)을 통하여 웹 사이트에 구축된 온라인 쇼핑몰에 접속한다. 소정의 인증 절차를 거쳐 인증 성공하면, 디지털 콘텐츠 처리부(31)의 요청에 따라 이미지 뷰어(40)를 초기화 한다. 초기화 과정은 도 11에 따라 진행된다.

사용자 단말(10)을 보유한 사용자는 도 12a와 같은 쇼핑 안내 화면(320)을 이용하여 해당 서비스 아이템을 검색할 수 있다. 쇼핑 안내화면(320)에는 검색창(330)과, 이미지 창(340)과, 썸네일 이미지(350)와, 주문 안내창(360)과, 임시 구매버튼(370)과, 구매 확정버튼(380) 등이 표시된다.

사용자 단말(10)에서 서비스 아이템의 리스트를 검색하여 원하는 서비스 아이템을 마우스로 클릭하여 선택하면, 이미지 창(340)에 선택된 서비스 아이템에 대응한 이미지가 표시된다. 이때 디지털 콘텐츠 처리부(31)는 해당 이미지를 이미지 데이터베이스(50)에서 불러와서 웹페이지(32)에 제공한다. 도 12b에 도시한 바와 같이, 이미지 창(340)에는 가상 이차원 이미지(Im)와 태그 버튼(341)과 함께 표시된다. 고객은 마우스를 이용하여 태그 버튼을 클릭하고 해당 서비스 기능을 선택하여 상품 구매를 위한 정보를 얻는다. 예를 들어 태그 버튼(341)을 클릭하는 경우, 도 12c에서와 같이 일측에 서비스 기능(돋보기 기능, 회전 기능, 제품 사용법, 태그 목록 등)을 선택하기 위한 기능 버튼들이 나타난다.

도 12d를 참고하여, 마우스를 이용하여 돋보기 기능버튼(3411)을 클릭하면 돋보기 기능이 활성화되고 이미지 창(340)에는 마우스 커서가 지시하는 일부 영역을 확대 표시하게 된다. 다른 서비스 기능으로서 도 12e에서와 같이 마우스를 이용하여 회전 기능버튼(3412)을 클릭하면 회전 기능이 활성화되고 마우스 커서의 이동에 따라 가상 이차원 이미지가 로딩되어 이미지 창(340)에 표시되는데, 앞서 도 6과 도 9에서 설명한 바와 같이, 커서 이동에 따라 좌측 또는 우측으로 수평 회전하는 경우 해당하는 가상 이차원 이미지가 연속으로 표시되고, 커서를 위로 또는 아래로 이동하는 마우스 조작에 따라 해당하는 가상 이차원 이미지가 연속으로 표시될 수 있다.

또 다른 서비스 기능으로서 도 12f에서와 같이 고객이 마우스를 이용하여 태그 기능버튼(3413)을 클릭하면 태그 기능이 활성화되고 이미지 창(340)에 표시되는 가상 이차원 이미지(Im)상에서 드래그하는 마우스 커서가 태그 범위에 위치하면 연결선(340b)에 연결된 태그 팝업 화면(340a)이 일측에 나타난다. 태그 팝업 화면(340a)에 태그정보가 표시된다. 태그정보는 텍스트, 이미지, 동영상, 애니메이션 등을 포함할 수 있다.

상술한 실시예에서는 이차원 이미지 또는 가상 이차원 이미지를 제작하는 과정이 간편하고, 동영상을 제작하여 제공하는 방식에 비하여 통신 트래픽이 현저히 적을 뿐 아니라 이미지 뷰어를 초기화하는 과정과 마우스 조작에 따라 해당 이미지를 불러올 때마다 비동기적으로 이미지 파일을 로딩하므로 통신 트래픽을 더욱 줄일 수 있다.

또한 상술한 실시예에서는 스크롤 조작을 통하여 동일한 서비스 아이템을 시각적으로 나타내는 시퀀스 이미지를 좌우방향 또는 상하방향으로 연속으로 표시할 수 있어 서비스 아이템의 전체 외관 및 구조를 살펴보기가 수월하고, 뷰어 화면에 나타나는 이미지에 맵핑된 태그 범위에 마우스 커서를 이동시키는 간편한 동작만으로 해당 태그정보를 신속 정확하게 제공받을 수 있는 사용 편리성이 있다.

이상에서 설명한 본 발명의 실시예는 장치를 통해서만 구현되는 것은 아니며, 본 발명의 실시예의 구성에 대응하는 기능을 실현하는 프로그램 또는 그 프로그램이 기록된 기록 매체를 통해 구현될 수도 있으며, 이러한 구현은 앞서 설명한 실시예의 기재로부터 본 발명이 속하는 기술분야의 전문가라면 쉽게 구현할 수 있는 것이다.

이상에서 본 발명의 실시예에 대하여 상세하게 설명하였지만 본 발명의 권리범위는 이에 한정되는 것은 아니고 다음의 청구범위에서 정의하고 있는 기본 개념을 이용한 여러 변형 및 개량 형태 또한 본 발명의 권리범위에 속하는 것이다.

10 : 사용자 단말 20 : 통신부
30 : 웹 서버 31 : 디지털 콘텐츠 처리부
32 : 웹 페이지 33 : 통신 모듈
40 : 이미지 뷰어 50 : 이미지 데이터베이스
60 : 태그정보 데이터베이스 70 : 뷰어 편집기

Claims (6)

1. 웹페이지를 통하여 서비스 아이템의 이미지와 태그정보를 포함한 디지털 콘텐츠를 제공하는 웹 서버; 상기 서비스 아이템을 시각적으로 나타내기 위한 개별 이차원 이미지 또는 가상 이차원 이미지의 이미지 파일을 저장하는 이미지 데이터베이스; 상기 이미지 파일에 부가된 태그정보를 저장하는 태그정보 데이터베이스; 상기 이미지 데이터베이스와 태그정보 데이터베이스에 저장된 이미지 파일과 태그 정보를 상기 웹서버에 공급하는 이미지 뷰어; 상기 이미지 뷰어에 연동하여 새로운 이미지의 추가 또는 이미지의 수정 작업에 수반하는 태그정보를 편집하기 위한 뷰어 편집기;를 포함하되,
   상기 이미지 뷰어는, 스크롤 조작에 따라 다른 각도의 시퀀스 이차원 이미지를 상기 이미지 데이터베이스로부터 로딩하여 뷰어 화면에 연속으로 표시하고, 한 세트의 상기 이차원 이미지 파일 중 초기에 나타나는 기준 가상 이차원 이미지에 태그 좌표를 맵핑하고, 상기 이차원 이미지에 맵핑된 태그정보를 상기 로딩된 이미지가 표시되는 뷰어 화면의 주변 영역에 표시하며, 각 이미지 파일명으로부터 좌우 방향 또는 상하 방향에 대한 회전 각도 정보를 추출하고, 스크롤 조작에 따라 좌우 방향 또는 상하 방향으로 연속 표시되는 이차원 이미지에 맵핑된 태그 범위가 동적으로 변경될 때 가상 이차원 좌표 계산모듈에 의해 변경된 태그 범위의 태그 좌표를 자동 계산하여 해당하는 태그 지점의 태그정보를 제공하며,
   상기 뷰어 편집기는, 웹페이지에 접근 권한을 가진 관리자에 의해 편집 모드로 전환함으로써 편집 기능이 활성화되어 상기 뷰어 화면에 제공되는 이미지 편집창과 태그 편집창을 이용하여 편집 대상을 선택하고,
   상기 이미지 편집창은 상기 서비스 아이템을 식별하기 위한 이름, 추가 또는 수정을 위하여 선택된 이미지, 선택된 이미지 중에서 뷰어 로딩시 처음 나타나는 초기 이미지, 스크롤 조작에 따른 좌우방향 또는 상하방향으로 연속으로 나타나는 이미지의 개수, 상기 뷰어 화면의 사이즈 및 상기 초기 이미지의 사이즈에 대하여 설정하고,
   상기 태그 편집창은 상기 태그정보를 식별하기 위한 이름, 태그에 부속된 서브 태그의 유무, 태그내용, 태그 지정을 위한 이미지를 식별하기 위한 이미지번호, 태그 지정된 이미지에서의 태그지점, 태그내용을 나타내기 위한 태그팝업 화면의 사이즈, 상기 뷰어 화면에 나타나는 태그팝업 화면의 위치 및 태그지점과 태그팝업 화면을 연결하는 연결선의 유무를 설정하고,
   설정된 입력 데이터를 바탕으로 생성한 파일을 상기 이미지 데이터베이스와 태그정보 데이터베이스에 각각 저장하는 것을 특징으로 하는 스크롤 조작에 따라 연속 표시되는 이차원 이미지의 태그정보 처리 장치.
2. 삭제
3. 제1항에 있어서,
   상기 뷰어 편집기는 상기 이미지 편집창과 태그 편집창의 입력 작업이 완료되면 계층 구조의 관련 파일로서 html 파일, js 파일, 및 json 파일을 생성하며, 상기 html 파일은 상기 뷰어 화면을 구성하는 기본 파일이고, 상기 js 파일은 상기 뷰어 화면의 초기 설정을 위한 파일이며, 상기 json 파일은 태그정보를 설정하기 위한 파일인 것을 특징으로 하는 스크롤 조작에 따라 연속 표시되는 이차원 이미지의 태그정보 처리 장치.
4. 삭제
5. 삭제
6. 제1항에 있어서,
   상기 웹 서버로부터 디지털 콘텐츠를 제공받는 사용자 단말을 포함하되,
   상기 사용자 단말은 인트라넷에 연결된 개인용 컴퓨터에 접근할 수 있는 사용 환경에서 인터넷에 연결된 게이트웨이를 통하여 디지털 콘텐츠를 제공받거나 또는 댁내에 홈네트워크를 구축하고 인터넷 서비스하는 스마트 가전기기로서 IPTV 및 스마트 냉장고에 접근할 수 있는 사용 환경에서 인터넷에 연결된 홈게이트웨이를 통하여 디지털 콘텐츠를 제공받을 수 있는 것을 특징으로 하는 스크롤 조작에 따라 연속 표시되는 이차원 이미지의 태그정보 처리 장치.

Images