KR20130078944A - 복수의 이미지들을 포함하는 웹페이지의 이미지 로딩 속도 개선 장치, 방법 및 컴퓨터 판독 가능한 기록 매체 - Google Patents

복수의 이미지들을 포함하는 웹페이지의 이미지 로딩 속도 개선 장치, 방법 및 컴퓨터 판독 가능한 기록 매체 Download PDF

Info

Publication number
KR20130078944A
KR20130078944A KR1020120000115A KR20120000115A KR20130078944A KR 20130078944 A KR20130078944 A KR 20130078944A KR 1020120000115 A KR1020120000115 A KR 1020120000115A KR 20120000115 A KR20120000115 A KR 20120000115A KR 20130078944 A KR20130078944 A KR 20130078944A
Authority
KR
South Korea
Prior art keywords
image
images
image information
loading
web page
Prior art date
Application number
KR1020120000115A
Other languages
English (en)
Other versions
KR101328047B1 (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 KR1020120000115A priority Critical patent/KR101328047B1/ko
Publication of KR20130078944A publication Critical patent/KR20130078944A/ko
Application granted granted Critical
Publication of KR101328047B1 publication Critical patent/KR101328047B1/ko

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00Arrangements for program control, e.g. control units
    • G06F9/06Arrangements 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/30Arrangements for executing machine instructions, e.g. instruction decode
    • G06F9/38Concurrent instruction execution, e.g. pipeline or look ahead

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Information Transfer Between Computers (AREA)

Abstract

본 발명은 웹페이지의 이미지 로딩 속도 개선 장치, 방법 및 컴퓨터 판독 가능한 기록 매체에 관한 것으로, 사용자 단말에서 브라우징되는 웹페이지에 포함된 이미지들 중 적어도 일부 이미지에 대한 이미지 정보가 저장되는 큐(queue) 및 상기 큐에 저장된 순서대로 이미지 정보를 독출하여 순차적으로 로딩되도록 처리하는 이미지 정보 로딩 처리부를 포함한다.

Description

복수의 이미지들을 포함하는 웹페이지의 이미지 로딩 속도 개선 장치, 방법 및 컴퓨터 판독 가능한 기록 매체{APPARATUS, METHOD AND COMPUTER READABLE RECORDING MEDIUM FOR IMPROVING LOADING SPEED OF IMAGES IN A WEBPAGE HAVING A PLURALITY OF IMAGES}
본 발명은 웹페이지의 이미지 로딩 속도 개선 장치, 방법 및 컴퓨터 판독 가능한 기록 매체에 관한 것으로, 보다 상세하게는 복수의 이미지들을 포함하는 웹페이지를 사용자 단말에서 브라우징할 때, 웹페이지의 상단에 위치한 이미지가 우선적으로 로딩되도록 처리함으로써 사용자의 체감 속도를 개선하기 위한 복수의 이미지들을 포함하는 웹페이지의 이미지 로딩 속도 개선 장치, 방법 및 컴퓨터 판독 가능한 기록 매체에 관한 것이다.
일반적으로 인터넷은 전세계 어디서나, 누구나 접속하고자 하는 상대편 컴퓨터에 TCP/IP 라는 공통의 프로토콜을 적용하여 자유롭게 연결하여 사용할 수 있도록 구성된 개방형 네트워크로서, 기본적인 문자정보의 전달은 물론 압축기술의 발전과 더불어 멀티미디어 정보의 전달에 이용되는 등 전자우편, 파일전송, WWW(World Wide Web) 등의 다양한 서비스를 이용할 수 있다.
이와 같은 인터넷은 국내를 비롯하여 세계적으로 사용이 급격하게 증가되면서 기존 산업의 전 부분에 걸쳐 효율성과 생산성 제고를 위한 전략적인 도구로서 중요성이 급속히 증대되고 있으며, 인터넷을 통한 새로운 비즈니스 기회가 지속적으로 창출됨은 물론, 그 영역도 확장되고 있는 추세로서 인터넷을 이용한 사업자들도 점점 더 증가되고 있다.
인터넷의 광범위한 보급은 이제 유선을 넘어 무선 이동통신 기술로의 급발전을 가져오게 되었고, 실생활에 있어서도 휴대폰, PDA, 핸드헬드(Hand-Held) 컴퓨터 등의 이동 단말을 통한 인터넷상에서의 정보 검색이 시간과 장소에 구애받지 않고 가능하게 되었다.
한편, 웹페이지를 통해 유선 또는 무선의 사용자 단말에 제공되는 정보는 텍스트로 구성된 정보뿐만 아니라 사진, 동영상, 플래시, 음악 등 다양한 정보를 포함하며, 사용자는 이와 같이 각종 형태의 정보가 포함된 웹페이지를 통해 보다 다양한 정보를 얻을 수가 있다.
그러나, 이와 같이 웹페이지를 통해 제공되는 정보의 종류가 다양해지면서, 하나의 웹페이지에 포함되는 정보의 크기도 상당히 커지게 되었다. 예컨대, 포털 사이트 등에서 제공하는 웹툰(Webcomic) 서비스의 경우 하나의 웹페이지에 수많은 이미지가 포함된다. 한 회의 웹툰은 적게는 수 개, 많게는 수십 개의 이미지로 구성된다. 웹툰이란 웹(web)과 카툰(cartoon)의 합성어로, 인터넷을 통해 배포되는 만화를 뜻한다.
통상적으로 사용자 단말에서 이러한 웹툰을 브라우징하는 브라우저(browser)는 전체 웹페이지를 보다 빠르게 다운로드 하기 위해 동시에 여러 개의 커넥션을 열어서 이미지를 다운로드 받는다. 즉, 도 1 내지 도 3을 참조하면, 인터넷 브라우저(Internet Browser)를 통해 브라우징되는 복수의 웹툰 이미지들을 병렬로 다운로드 함으로써 전체적인 이미지의 다운로드 속도를 향상시킬 수 있다.
한편, 일반적으로 사용자는 웹브라우저를 통해 이미지를 볼 때, 예컨대 웹툰 이미지의 경우 이야기의 흐름 순서대로 웹툰을 본다. 즉, 웹페이지의 상단에 있는 이미지를 먼저 보기 시작하여 하부로 내려가면서 순차적으로 보게 된다. 그러나, 도 1에 도시된 바와 같이 각 이미지들을 병렬로 다운로드하게 될 경우, 전체적인 다운로드 속도는 증가되더라도, 도 2에 도시된 바와 같이 전체 이미지가 동시에 로딩되어 상부에 있는 이미지의 로딩 속도가 늦어지기 때문에 사용자는 전체 이미지의 로딩이 완료될 때까지 기다려야 하는 불편함이 있다.
즉, 사용자는 '웹툰 이미지 1'을 본 이후에 '웹툰 이미지 2'를 보려고 하기 때문에 '웹툰 이미지 1'의 로딩이 끝나기를 기다려야 한다. 따라서, 사용자의 경험과 로딩 방식의 불일치로 인해 체감 속도는 현저히 저하되는 문제점이 있다.
한편, 이러한 웹 브라우저에서의 사용자의 체감 속도를 향상시키기 위한 기술로서 대한민국등록특허공보 제10-0967337 프록시 서버를 이용한 이동통신 단말기의 웹 브라우저 시스템(주식회사 컴퍼니원헌드레드)(문헌 1)에는 이미지 파일에 대해서는 화질을 변환하며, 자바스크립트에 대해서는 바이트코드로 컴파일함으로써 전송할 데이터량을 줄이고, 이에 따라, 단말기에 탑재된 웹 브라우저의 처리 속도를 향상시키는 방법이 개시된다. 그러나, 문헌 1은 전송할 데이터량을 줄이기 위해 이미지 파일의 화질을 낮추기 때문에 사용자 측면에서는 제대로 된 고화질의 이미지를 감상할 수 없는 단점이 있다.
따라서, 대용량의 많은 이미지를 포함하는 웹페이지의 로딩에 대한 체감 속도를 개선할 수 있는 방법이 요구되고 있다.
[문헌 1] 대한민국등록특허공보 제10-0967337 프록시 서버를 이용한 이동통신 단말기의 웹 브라우저 시스템(주식회사 컴퍼니원헌드레드) 2010.06.24.
본 발명의 목적은 복수의 이미지들을 포함하는 웹페이지에 대한 요청 시, 상기 복수의 이미지들에 대해 상단에 위치한 이미지로부터 순차적으로 로딩되도록 전송 처리함으로써 사용자 단말에서의 웹페이지 로딩 체감 속도를 개선하는 복수의 이미지들을 포함하는 웹페이지의 이미지 로딩 속도 개선 장치, 방법 및 컴퓨터 판독 가능한 기록 매체를 제공함에 있다.
또한, 본 발명의 다른 목적은 복수의 이미지들을 포함하는 웹페이지에 대한 요청 시, 상기 복수의 이미지들에 대해 상단에 위치한 이미지로부터 설정된 개수의 이미지는 우선적으로 순차적으로 로딩되도록 전송 처리하고, 나머지 이미지에 대해서는 병렬적으로 동시에 로딩되도록 전송 처리함으로써 사용자 단말에서의 웹페이지 로딩 체감 속도를 개선하는 복수의 이미지들을 포함하는 웹페이지의 이미지 로딩 속도 개선 장치, 방법 및 컴퓨터 판독 가능한 기록 매체를 제공함에 있다.
또한, 본 발명의 또 다른 목적은 복수의 이미지들을 포함하는 웹페이지에 대한 요청 시, 상기 복수의 이미지들에 대해 순차적 방식 또는 혼합 방식으로 로딩되도록 전송 처리하고, 상기 이미지 전송 시 전송 큐에 로딩한 이미지를 순차적으로 탐색된 DOM 위치에 추가하여 전송 처리함으로써 사용자 단말에서의 웹페이지 로딩 체감 속도를 개선하는 복수의 이미지들을 포함하는 웹페이지의 이미지 로딩 속도 개선 장치, 방법 및 컴퓨터 판독 가능한 기록 매체를 제공함에 있다.
상기한 바와 같은 본 발명의 목적을 달성하고, 후술하는 본 발명의 특유의 효과를 달성하기 위한, 본 발명의 특징적인 구성은 하기와 같다.
본 발명의 일 태양에 따르면, 이미지 로딩 속도 개선 장치는 사용자 단말에서 브라우징되는 웹페이지에 포함된 이미지들 중 적어도 일부 이미지에 대한 이미지 정보가 저장되는 큐(queue) 및 상기 큐에 저장된 순서대로 이미지 정보를 독출하여 순차적으로 로딩되도록 처리하는 이미지 정보 로딩 처리부를 포함한다.
바람직하게는, 상기 이미지 로딩 속도 개선 장치는 상기 전체 이미지들의 개수를 확인하는 이미지 파일 계수부 및 상기 이미지 파일 계수부로부터 확인된 전체 이미지들 중에서 순차적으로 로딩되도록 처리할 순차 이미지 개수와 병렬 로딩되도록 처리할 병렬 이미지 개수를 결정하는 순차 처리 이미지 결정부를 더 포함하며, 상기 이미지 정보 로딩 처리부는, 상기 순차적으로 로딩되도록 처리할 이미지에 대한 로딩이 완료되면, 나머지 이미지들에 대해 병렬 로딩되도록 더 처리한다.
바람직하게는, 상기 큐에 최초 저장된 이미지 정보의 개수는 상기 순차 이미지 개수와 동일하다.
바람직하게는, 상기 이미지 로딩 속도 개선 장치는, 상기 로딩되도록 처리할 이미지에 대한 이미지 정보를 상기 큐에 저장하고, 상기 큐에 저장된 이미지 정보가 존재하는지 여부를 확인하는 큐 제어부, 상기 큐 제어부의 확인 결과에 따라 저장된 이미지 정보가 존재할 경우, 상기 웹페이지상에서 상기 이미지 정보가 부가될 위치를 탐색하는 이미지 정보 부가 위치 탐색부, 상기 이미지 정보 부가 위치 탐색부에 의해 탐색된 위치상에 상기 큐에 저장된 해당 이미지 정보를 부가하는 이미지 정보 부가 처리부 및 상기 이미지 정보 부가 처리부에 의해 부가된 이미지 정보에 대한 해당 이미지를 서버로 요청하는 전송 처리부를 포함한다.
바람직하게는, 상기 웹페이지상에서 부가되는 이미지 정보는 마크업 언어로 작성된다.
바람직하게는, 상기 웹페이지는 문서 객체 모델(DOM)의 트리 형태로 구성되는 파일이다.
바람직하게는, 상기 웹페이지에 포함된 전체 이미지들의 개수에 대한 정보는 상기 웹페이지의 데이터 내에 포함된다.
바람직하게는, 상기 전체 이미지들 중에서 순차적으로 로딩되도록 처리할 이미지의 개수와 병렬 로딩되도록 처리할 이미지의 개수에 대한 정보 중 적어도 하나는 상기 웹페이지의 데이터 내에 포함된다.
바람직하게는, 상기 순차 처리 이미지 결정부는, 병렬 로딩 시 이미지 로딩 시간이 순차 로딩시의 이미지 로딩 시간과 같거나 이보다 보다 짧아지는 순간의 이미지 개수를 순차 로딩할 이미지의 개수로 결정하고, 여기서 상기 로딩 시간은 화면에서 스크롤을 하지 않은 상태로 사용자가 볼 수 있는 영역을 로딩하는데 걸리는 시간을 의미한다.
바람직하게는, 상기 순차 이미지 개수는 접속 채널의 수 - 1개이다.
본 발명의 다른 태양에 따르면, 이미지 로딩 속도 개선 방법은 이미지 로딩 속도 개선 장치에서 수행되는 각 단계가 사용자 단말에서 브라우징되는 웹페이지에 포함된 전체 이미지들 중 적어도 일부 이미지에 대한 이미지 정보를 큐(queue)에 저장하는 단계 및 상기 큐가 비어 있지 않은 경우 상기 큐에 저장된 순서대로 이미지 정보를 독출하여 순차적으로 로딩되도록 처리하는 단계를 포함한다.
본 발명의 또 다른 태양에 따르면, 이미지 로딩 속도 개선을 위한 웹 서버는 사용자 단말의 요청에 의해 웹페이지 데이터를 제공하는 웹페이지 제공 수단 및 상기 사용자 단말로부터 상기 웹페이지 데이터에 포함된 이미지에 대한 요청을 수신하고, 해당 이미지를 상기 사용자 단말로 제공하는 이미지 제공 수단을 포함하고, 상기 웹페이지 데이터는, 상기 사용자 단말에서 순차적으로 로딩될 순차 이미지 정보를 포함하고, 상기 순차 이미지 정보에 따라 상기 사용자 단말에 제공된 이미지가 로딩된다.
한편, 상기 이미지 로딩 속도 개선 방법을 제공받기 위한 정보는 서버 컴퓨터로 읽을 수 있는 기록 매체에 저장될 수 있다. 이러한 기록 매체는 컴퓨터 시스템에 의하여 읽혀질 수 있도록 프로그램 및 데이터가 저장되는 모든 종류의 기록매체를 포함한다. 그 예로는, 롬(Read Only Memory), 램(Random Access Memory), CD(Compact Disk), DVD(Digital Video Disk)-ROM, 자기 테이프, 플로피 디스크, 광데이터 저장장치 등이 있으며, 또한 케리어 웨이브(예를 들면, 인터넷을 통한 전송)의 형태로 구현되는 것도 포함된다. 또한, 이러한 기록매체는 네트워크로 연결된 컴퓨터 시스템에 분산되어, 분산 방식으로 컴퓨터가 읽을 수 있는 코드가 저장되고 실행될 수 있다.
상술한 바와 같이, 본 발명에 따르면 웹툰과 같이 많은 이미지를 포함하는 웹페이지의 로딩시 이야기 흐름에 따른 순차적 로딩이 보장되며, 사용자의 경험과 일치하게 됨으로써 네트워크 전송 속도의 향상이 없이도 사용자가 실제로 느끼는 체감 속도가 개선될 수 있는 장점이 있다.
또한, 본 발명에 따르면 웹페이지 로딩시 순차적 로딩 방식과 병렬 로딩 방식을 혼합하여 적용함으로써 사용자가 느끼는 최적의 체감 로딩 속도를 제공할 수 있는 장점이 있다.
도 1 내지 도 3은 종래 기술에 따른 이미지 병렬 다운로드 방법에 의한 웹페이지 이미지 로딩의 개념을 나타내는 도면이다.
도 4 및 도 5는 본 발명의 제1 실시예에 따른 순차적 이미지 다운로드 방법에 의한 웹페이지 이미지 로딩의 개념을 나타내는 도면이다.
도 6은 본 발명의 제1 실시예에 따른 순차적 이미지 다운로드 방법이 적용된 이미지 로딩 속도 개선 장치를 나타내는 블록도이다.
도 7은 본 발명의 제1 실시예에 따른 순차적 이미지 다운로드 방법이 적용된 이미지 로딩 속도 개선 절차를 나타내는 흐름도이다.
도 8은 종래 기술과 본 발명에 따른 방법 간의 이미지 로딩 시간을 비교한 도면이다.
도 9는 종래의 이미지 병렬 다운로드 방법에 의한 이미지 로딩 화면을 시간 순서에 따라 캡쳐한 도면이다.
도 10은 본 발명의 제1 실시예에 따른 순차적 이미지 다운로드 방법에 의한 이미지 로딩 화면을 시간 순서에 따라 캡쳐한 도면이다.
도 11은 종래의 이미지 병렬 다운로드에서의 개별 이미지 로딩 간의 지연을 나타내는 도면이다.
도 12는 본 발명의 제1 실시예에 따른 순차적 이미지 다운로드에서의 개별 이미지 로딩 간의 지연을 나타내는 도면이다.
도 13은 본 발명의 제2 실시예에 따른 혼합 이미지 다운로드 방법에 의한 웹페이지 이미지 로딩의 개념을 나타내는 도면이다.
도 14는 본 발명의 제2 실시예에 따른 혼합 이미지 다운로드 방법에서 순차로딩할 이미지의 개수를 결정하는 방법을 나타내는 도면이다.
도 15는 본 발명의 제2 실시예에 따른 순차적 이미지 다운로드 방법이 적용된 이미지 로딩 속도 개선 장치를 나타내는 블록도이다.
도 16은 본 발명의 제2 실시예에 따른 순차적 이미지 다운로드 방법이 적용된 이미지 로딩 속도 개선 절차를 나타내는 흐름도이다.
도 17은 종래 방식과 본 발명의 제1 실시예에 따른 순차적 방식의 이미지 로딩 속도를 비교한 실험 예를 나타내는 도면이다.
후술하는 본 발명에 대한 상세한 설명은, 본 발명이 실시될 수 있는 특정 실시예를 예시로서 도시하는 첨부 도면을 참조한다. 이들 실시예는 당업자가 본 발명을 실시할 수 있기에 충분하도록 상세히 설명된다. 본 발명의 다양한 실시예는 서로 다르지만 상호 배타적일 필요는 없음이 이해되어야 한다. 예를 들어, 여기에 기재되어 있는 특정 형상, 구조 및 특성은 일 실시예에 관련하여 본 발명의 정신 및 범위를 벗어나지 않으면서 다른 실시예로 구현될 수 있다. 또한, 각각의 개시된 실시예 내의 개별 구성요소의 위치 또는 배치는 본 발명의 정신 및 범위를 벗어나지 않으면서 변경될 수 있음이 이해되어야 한다. 따라서, 후술하는 상세한 설명은 한정적인 의미로서 취하려는 것이 아니며, 본 발명의 범위는 적절하게 설명된다면 그 청구항들이 주장하는 것과 균등한 모든 범위와 더불어 첨부된 청구항에 의해서만 한정된다. 도면에서 유사한 참조부호는 여러 측면에 걸쳐서 동일하거나 유사한 기능을 지칭한다.
한편, 후술하는 상세한 설명에서는 본 발명이 '웹툰'을 포함하는 웹페이지에 적용되는 것으로 설명하고 있으나, 본 발명은 상기 웹툰뿐만 아니라 다수의 이미지들을 포함하는 어떠한 웹페이지의 전송에도 적용이 가능하다.
또한, 본 발명에서 적용되는 문서객체모델, 즉 DOM(Document Object Model)은 HTML(Hyper Text Markup Language), XML(eXtensible Markup Language) 등의 문서를 위한 응용 프로그래밍 인터페이스(API)이며, 문서를 접근하고 조작하기 위한 방법으로 문서의 논리적인 구조를 정의한다. 상기 DOM은 현재 W3C(World Wide Web Consortium)에서 권고안으로 정의하고 있으며 플랫폼 비종속적이다. DOM 트리(Tree)는 노드의 연결로서 표현되며, 상기 DOM 트리는 루트(root) 노드에서 시작되고 하위 노드까지 확장될 수 있다. DOM 오브젝트(Object)는 상기 DOM 트리를 구성하는 노드로서, DOM 속성(Property)과 DOM 메소드(Method)를 가진다.
또한, 본 발명의 '사용자 단말'은 통신 네트워크의 연결이 가능하며, 웹페이지에 대한 브라우징 기능을 하는 웹브라우저가 설치될 수 있는 어떠한 유무선 단말도 가능하다. 예컨대, 본 발명은 휴대폰을 포함하여 노트북 컴퓨터(laptop computer), 디지털방송용 단말기, PDA(Personal Digital Assistants), PMP(Portable Multimedia Player), 항법 장치 등 이동 단말기뿐만 아니라 컴퓨터, TV 등 고정 단말기를 포함하여 애플리케이션을 실행할 수 있는 모든 사용자 단말에 적용될 수 있으며, 웹브라우저가 설치되며 적어도 하나의 통신 네트워크에 접속 가능한 단말에 적용하는 것이 바람직하다.
본 발명은 종래의 병렬식 이미지 다운로드 방법으로 인한 체감 속도 저하 문제를 해결하기 위해 순차적으로 이미지가 로딩될 수 있도록 처리하는 장치 및 방법을 제안한다. 이를 위해, 본 발명의 제1 실시예에서는 사용자 단말에서 요청된 해당 웹페이지에 포함된 복수의 이미지들 중에서 가장 상단에 위치한 이미지로부터 하단에 위치한 이미지 방향으로 순차적으로 로딩되도록 전송 처리한다. 따라서, 가장 상단에 브라우징되는 이미지에 대한 정보를 큐(Queue)에 먼저 저장하고, 해당 큐에 저장된 이미지 정보를 순차적으로 웹페이지에 부가시킴으로써 웹페이지의 가장 상단에 위치한 이미지부터 하단 방향으로 순차적으로 로딩되도록 처리되어 사용자가 느끼는 체감 속도가 증가된다.
또한, 본 발명의 제2 실시예에서는 순차적 방식과 병렬 방식을 혼합하여 적용함으로써 사용자가 느끼는 체감 속도를 높임과 동시에, 전체적인 로딩 속도를 향상시킬 수 있다. 즉, 웹페이지에 포함된 복수의 이미지들 중에서 상단에서부터 설정된 특정 개수만큼의 이미지들을 순차적으로 로딩시키고, 상기 순차적인 로딩이 완료되면, 나머지 하나 이상의 이미지들을 병렬 방식으로 동시에 로딩시킨다.
이때, 상기 복수의 이미지들 중에서 순차적으로 로딩할 이미지의 개수와 병렬 방식으로 로딩할 이미지의 개수는 본 발명의 실시예에 따라 두 방식의 로딩 속도를 고려하여 최적의 개수를 산출한다.
이하, 본 발명이 속하는 기술분야에서 통상의 지식을 가진 자가 본 발명을 용이하게 실시할 수 있도록 하기 위하여, 본 발명의 바람직한 실시예들에 관하여 첨부된 도면을 참조하여 상세히 설명하기로 한다.
제1 실시예 - 순차적 방식
도 4 및 도 5는 본 발명의 제1 실시예에 따른 순차적 이미지 다운로드 방법에 의한 웹페이지 이미지 로딩의 개념을 나타내는 도면이다. 도 4를 참조하면, 본발명의 실시예에 따라 웹페이지의 상단에 위치하는 이미지로부터 아래쪽으로 순차적으로 이미지가 로딩 되도록 처리한다. 즉, 웹페이지의 가장 상단에 위치한 이미지의 로딩이 완료되면, 다음으로 바로 아래에 위치한 이미지의 로딩이 시작되고, 동일한 방식으로 순차적으로 로딩이 진행되어 가장 하단에 위치한 이미지의 로딩이 완료된다. 따라서, 도 5를 참조하면, 도 3에 도시된 바와 달리 이미지 데이터가 상단에 있는 이미지로부터 순차적으로 요청되어 서버로부터 순차적으로 전송된다. 즉, 순차적 로딩 방식에 따라 단일 이미지만 동일한 대역폭에 싣게 되므로, 단일 이미지에 대한 로딩 속도가 종래의 병렬 방식에 비해 빨라지게 된다. 이와 같이 초기 이미지에 대한 로딩 완료 시간이 빨라지고, 로딩 순서 또한 사용자가 이미지를 보는 순서대로 이루어짐으로 인해, 사용자가 시각적으로 느끼는 체감 성능이 개선될 수 있다.
이하, 상기 본 발명의 제1 실시예에 따른 방법을 구현하기 위한 장치 및 세부 처리 절차를 도 6 및 도 7을 참조하여 설명한다.
도 6은 본 발명의 제1 실시예에 따른 순차적 이미지 다운로드 방법이 적용된 이미지 로딩 속도 개선 장치를 나타내는 블록도이다. 도 6을 참조하면, 본 발명의 제1 실시예에 따른 이미지 로딩 속도 개선 장치(640)는 큐 제어부(641), 이미지 정보 로딩 처리부(642) 및 이미지 정보 부가 위치 탐색부(643)를 포함할 수 있다.
사용자 단말에서 요청한 웹페이지의 전체 웹페이지 데이터(600)가 복수의(즉, N개의) 이미지 정보(601)들(예컨대, 해당 이미지가 저장된 웹서버 상에서의 위치 정보들)을 포함하여 웹브라우징에 따라 하나의 웹페이지 상에서 복수의 이미지들이 로딩될 경우, 본 발명의 제1 실시예에 따라 상기 웹페이지의 가장 상단에 로딩되는 이미지(즉, 제1 이미지)로부터 순차적으로 아래에 위치되는 이미지가 로딩되도록 처리한다.
즉, 이미지 로딩 속도 개선 장치(600)의 큐 제어부(641)에서는 상기 전체 웹페이지 데이터(600) 중에서 제1 이미지 정보(601a)로부터 아래에 위치한 이미지 정보 순으로 순차적으로 큐(queue)(610)에 저장되도록 제어한다. 따라서, 큐 제어부(641)의 제어에 따라 이미지 정보 로딩 처리부(642)에서는 해당 로딩할 이미지에 대한 상기 이미지 정보(601)를 순차적으로 큐(610)에 저장시킨다.
한편, 상기 큐 제어부(641)에서는 상기 큐(610)에 서버로 전송 요청할 각 이미지에 대한 이미지 정보(예컨대, 해당 이미지를 서버에 요청하기 위한 이미지가 저장된 경로 정보 등)가 존재하는 지를 확인한다. 상기 확인 결과, 큐(610)에 서버로 요청할 이미지 정보가 존재할 경우, 즉 큐(610)가 비어 있지 않은 경우, 이미지 정보 부가 처리부(620)에서 상기 전송 요청할 이미지 정보를 웹페이지 소스 코드 상의 해당 위치에 부가하고 이미지 요청 처리부(630)를 통해 서버로 해당 이미지에 대한 전송 요청을 한다.
보다 구체적으로 설명하면, 큐 제어부(641)의 확인 결과 큐(610)가 비어 있지 않고 전송 요청할 이미지 정보가 존재할 경우, 이미지 정보 부가 위치 탐색부(643)에서는 이미지 정보 부가 처리부(620)로부터 웹페이지 상에서 해당 이미지를 추가할 위치(예컨대, DOM상에서의 위치 또는 웹브라우저 상에서 이미지가 로딩될 위치)를 탐색한다. 이에 따라, 큐 제어부(641)에서는 해당 이미지 정보를 상기 이미지 정보 로딩 처리부(642)를 통해 상기 탐색된 위치에 부가하도록 제어하며, 상기 이미지 정보 로딩 처리부(642)는 상기 전송할 이미지 정보를 큐(610)에서 독출하여 상기 이미지 정보 부가 처리부(620)로 제공한다. 이미지 정보 부가 처리부(620)에서는 상기 전송 요청할 이미지에 대한 이미지 정보를 상기 탐색된 해당 위치(예컨대, DOM상에서의 위치)에 부가하고, 이미지 요청 처리부(630)를 통해 서버로 해당 이미지에 대한 전송을 요청한다.
이와 같이, 본 발명의 제1 실시예에 따른 이미지 로딩 속도 개선 장치(600)는 사용자 단말에서 전체 웹페이지에 포함된 이미지들 중에서 가장 상단에 위치한 이미지로부터 아래쪽으로 순차적으로 로딩 되도록 처리한다.
상기 이미지 로딩 속도 개선 장치(600)에서의 상기 처리 기능은 마크업 언어(markup language) 및 자바 스크립트 코드 등으로 구현될 수 있다.
상기 처리 기능을 상술하면, 총 N개의 이미지가 존재한다고 가정하는 경우, N개의 이미지에 대한 이미지 정보를 그 로딩 순서대로 큐에 저장하게 되며, 큐에 저장된 이미지 정보 중 최초 이미지(즉, 가장 상단에 위치한 이미지(제1 이미지))에 대응되는 이미지 정보에 기초하여 상기 최초 이미지를 전송 요청하고 전송받은 상기 최초 이미지를 사용자 단말에 우선적으로 로딩한다. 이 때 상기 이미지의 로딩 완료시, 큐가 비어있지 않는지 확인한 후 큐에 저장된 이미지 정보를 그 순서대로 하나씩 독출하고, 해당 이미지를 부가할 웹페이지 상에서의 위치(예컨대 DOM 상에서의 위치)를 탐색하며, 큐에서 독출된 이미지 정보를 상기 탐색된 위치에 부가한다. 이러한 과정은 큐에서 N개의 모든 이미지 정보가 독출될 때까지 순차적으로 진행된다.
이와 같이, 상기 상술된 처리 기능을 수행할 수 있는 예시적인 프로그램에 의해 웹페이지에 포함된 복수의 이미지 정보로 서버에 복수의 이미지를 병렬로 요청하여 복수의 이미지들이 사용자 단말에 동시에 로딩되는 것이 아니라, 상단에 위치한 이미지로부터 순차적으로 로딩되도록 강제할 수가 있게 된다.
도 7은 본 발명의 제1 실시예에 따른 순차적 이미지 다운로드 방법이 적용된 이미지 로딩 속도 개선 절차를 나타내는 흐름도이다. 도 7을 참조하면, 먼저 사용자 단말에서 웹서버에 접속하여 웹페이지를 요청(S701)하면, 상기 요청에 따라 해당 웹페이지 데이터가 웹서버로부터 사용자 단말로 제공된다. 즉, 사용자 단말에서 웹서버로부터 복수의 이미지 정보가 포함된 웹페이지 데이터를 수신(S702)하면, 상기 수신된 웹페이지 데이터를 통해 웹페이지를 사용자 단말상에서 브라우징하게 된다. 이때, 사용자 단말에서는 상기 웹페이지 데이터로부터 해당 웹페이지에 포함된 이미지의 개수(NT)를 확인(S703)하고, 사용자 단말은 상기 웹페이지 데이터(600) 중에서 제1 이미지 정보(601a)로부터 아래에 위치한 이미지 정보 순으로 총 NT개의 이미지에 해당하는 이미지 정보를 순차적으로 큐(610)에 저장(S704)한다.
이후, 가장 상단에 위치한 이미지로부터 순차적으로 각 이미지를 로딩하는 바, 예컨대 상위 이미지로부터 제i 번째 이미지를 로딩하고자 할 경우, 큐(610)가 비어 있지 않고 전송 요청할 이미지 정보가 존재하는지 확인하기 위해 큐 사이즈를 검사(S706)하고, 상기 검사 결과 큐 사이즈가 0보다 크면(즉, 큐에 전송 요청할 이미지에 대한 이미지 정보가 존재하면)(S707), 상기 이미지 정보를 웹페이지 상에서 추가할 위치(예컨대, DOM상에서의 위치 또는 웹브라우저 상에서 이미지가 로딩될 위치)를 검색(S708)하고, 상기 큐에 저장된 이미지 정보를 독출하여 상기 검색된 위치에 부가(append)(S709)한다. 상기 단계 S709에서 독출되는 이미지 정보는 i번째 이미지에 대한 이미지 정보이며, 상기 독출에 따라 큐의 맨 앞에 남아있는 것은 i+1번째 이미지에 대한 이미지 정보임을 알 수 있다. 이와 같이 큐에 저장된 이미지 정보는 순차적으로 하나씩 독출될 수 있다.
이때, 상기 부가된 이미지 정보는 웹페이지의 동적 변경에 따라 실행되어, 상기 이미지 정보에 해당하는 이미지를 웹서버로 요청(S710)한다. 그런 다음, 상기 요청된 이미지를 수신하여 웹페이지 상에서 해당 위치에 로딩(S711)한다. 이와 같이 웹페이지 상단에서부터 순차적으로 각 이미지의 로딩이 완료되면, 바로 아래의 이미지에 대한 이미지 정보를 웹페이지 상에서 해당 위치에 추가함으로써 해당 이미지를 로딩하게 된다.
따라서, 상기와 같이 위에서부터 차례로 하나씩 이미지 정보를 전송 처리하고, 모든 이미지에 대한 로딩이 완료(S713)되면, 이미지에 대한 로딩을 종료한다.
이하, 도 8 내지 도 10을 참조하여 본 발명의 제1 실시예에 따른 순차적 로딩 방식과 종래 기술에 따른 병렬 로딩 방식의 성능을 비교하여 설명한다.
도 8은 종래 기술과 본 발명에 따른 방법 간의 이미지 로딩 시간을 비교한 도면이다. 도 8을 참조하면, 종래의 병렬 처리 방법에 대한 실험예에서는 1번 이미지가 완성되기까지 2.6초가 소요되며, 2번 이미지가 완성되기까지 3.8초가 소요되며, 3번 이미지가 완성되기까지 5.1초가 소요된다. 한편, 본 발명의 제1 실시예에 다른 순차적 방법에 대한 실험예에서는 1번 이미지가 완성되기까지 0.5초가 소요되며, 2번 이미지가 완성되기까지 0.7초가 소요되며, 3번 이미지가 완성되기까지 1.0초가 소요된다.
도 8에 도시된 바와 같이 로딩해야할 이미지가 많을 경우 종래의 병렬 처리 방법에서는 다수의 이미지를 일정한 전송 채널을 통해 동시에 전송하여 로딩하므로, 첫 번째 이미지가 완전히 로딩되기까지의 시간이 오래 소요된다. 즉, 종래의 방법으로는 2.6초가 소요되지만 본 발명의 제1 실시예에 다른 순차적 방법에 의해서는 0.5초가 소요되므로, 사용자의 입장에서 느끼는 체감 속도는 많은 차이가 나게 된다.
도 9는 종래의 이미지 병렬 다운로드 방법에 의한 이미지 로딩 화면을 시간 순서에 따라 캡쳐한 도면이고, 도 10은 본 발명의 제1 실시예에 따른 순차적 이미지 다운로드 방법에 의한 이미지 로딩 화면을 시간 순서에 따라 캡쳐한 도면이다.
도 9를 참조하면, 종래에는 이미지 로딩이 병렬로 처리되므로, 사용자가 웹페이지 상단에서부터 순차적으로 이미지를 확인할 경우 모든 이미지가 로딩될 때까지 대기하여야 하는 불편함이 따르게 된다. 그러나, 도 10을 참조하면, 본 발명의 제1 실시예에 따라 상단에서부터 순차적으로 이미지가 로딩되므로, 사용자는 전체 이미지가 모두 로딩되기 전에도 우선적으로 로딩된 제1 이미지를 확인할 수가 있으며, 사용자의 이미지 확인 속도보다 이미지 로딩 속도가 빠르므로, 사용자는 제1 이미지가 로딩된 시점부터 끊김 없이 자연스럽게 모든 이미지를 그 순서대로 확인할 수 있게 된다.
한편, 이와 같이 본 발명의 제1 실시예에 따라 순차적 로딩 방식을 적용하면, 사용자가 느끼는 체감 로딩 속도를 개선할 수 있다. 그러나, 순차적인 로딩 방식을 적용함으로써 전체적인 웹페이지에 대한 로딩 속도는 이하에서 설명하는 바와 같이 저하될 수 있다. 따라서, 본 발명의 제2 실시예에 따라 웹페이지 상단으로부터 일정 개수의 이미지까지는 순차적으로 로딩시키고, 나머지 이미지에 대해서는 병렬로 로딩시키는 혼합 방식을 적용할 수 있다.
도 11은 종래의 이미지 병렬 다운로드에서의 개별 이미지 로딩 간의 지연을 나타내는 도면이며, 도 12는 본 발명의 제1 실시예에 따른 순차적 이미지 다운로드에서의 개별 이미지 로딩 간의 지연을 나타내는 도면이다.
도 11을 참조하면, 종래의 병렬 로딩 방법에 따라 4개의 이미지가 동시에 병렬로 로딩된다고 가정할 경우, 상술한 바와 같이 예컨대, 한 개의 개별 이미지에 대해 로딩이 완료된 후 다른 이미지의 로딩이 시작될 때까지 발생되는 이미지 로딩 간 지연(Inter Request Delay)(1100)의 경우에도 병렬로 로딩되고 있는 다른 이미지에는 영향을 미치지 않는다. 즉, 제1 이미지의 로딩 완료 후, 제5 이미지의 로딩을 하기 위한 로딩 간 지연 시간 동안에도 다른 이미지들(예컨대, 제2 이미지, 제3 이미지 및 제4 이미지 등)은 이미 로딩중에 있으므로 로딩 간 지연 시간 동안 모든 이미지에 대한 로딩을 중단하는 일 없이 복수의 이미지를 병렬로 로딩할 수가 있게 된다.
반면, 도 12를 참조하면, 전체 이미지를 순차적 방식으로 로딩할 경우, 한 이미지에 대한 로딩 완료 후 다른 이미지에 대한 로딩을 수행할 때까지 다음 이미지의 경로를 넣기 위한 DOM상에서의 위치 탐색 및 DOM 부가 등에 따라 발생될 수 있는 로딩 간 지연 시간 동안에는 병렬로 전송 중에 있는 다른 이미지가 없으므로 전체적인 웹페이지 로딩 시간에 있어서 그 만큼의 지연이 발생할 수 있다.
따라서, 이를 개선하기 위해 본 발명의 제2 실시예에 따라 상술한 순차적 전송 방식과 병렬 전송 방식을 혼합하여 구현한다.
제2 실시예 - 혼합 방식
도 13은 본 발명의 제2 실시예에 따른 혼합 이미지 다운로드 방법에 의한 웹페이지 이미지 로딩의 개념을 나타내는 도면이다. 도 13을 참조하면, 전체 웹페이지에 포함된 복수의 이미지들 중에서 상단에서 일정 개수만큼을 순차 로딩 영역으로 결정하고, 나머지 이미지들에 대해서는 병렬 로딩 영역으로 결정한다.
예컨대, 도 13에 도시된 바와 같이 웹페이지 상단에서 4개의 이미지를 순차 로딩 영역으로 설정할 경우, 먼저 제1 이미지로부터 제4 이미지까지 상술한 제1 실시예에 따라 순차적 방식으로 처리하고, 상기 제4 이미지에 대한 로딩이 완료되면, 나머지 제5 이미지로부터 마지막 제N 이미지에 대해 종래와 같은 병렬 처리 방식을 적용하여 동시에 복수의 이미지들을 로딩하게 된다.
이와 같이 함으로서, 종래의 병렬 처리 방식에 대한 단점을 해결함과 동시에 전체적인 이미지 로딩 속도를 향상시킬 수가 있게 된다. 또한, 만화 등 이미지를 인터넷으로 보는 사용자에게 있어 이미지 로딩 속도가 사용자의 이미지 확인 속도, 즉 만화를 보는 속도보다 빠른 것이 일반적이므로, 사용자는 이미지 로딩에 대한 지연 없이 최초 이미지가 로딩된 시점에서 막힘 없이 자연스럽게 이미지를 순차적으로 확인할 수 있는 본 발명의 제1 실시예에 따른 효과 또한 동일하게 갖는다.
한편, 본 발명의 제2 실시예에 따른 혼합 방식에서 상기 순차 로딩 영역과 병렬 로딩 영역을 구분하는 이미지의 개수는 다양한 방법으로 결정할 수 있으며, 그 일 예시로서 병렬 로딩 시의 이미지 로딩 시간이 순차 로딩시의 이미지 로딩 시간과 같거나 이보다 짧아지는 순간(즉, 병렬 로딩에 따른 로딩 시간
Figure pat00001
순차 로딩에 따른 로딩 시간)에서의 이미지 개수를 순차 로딩할 이미지의 개수로 결정할 수 있다. 여기서, 로딩 시간은 AFT(Above-the-Fold Time)을 의미하는 것으로 긴 화면에서 스크롤을 하지 않은 상태로 사용자가 볼 수 있는 영역을 로딩하는데 걸리는 시간에 해당한다. 본 발명에서 로딩 시간으로 AFT를 사용하는 이유는 전체 이미지를 로딩하는데 걸리는 실제 속도보다, 사용자가 이미지를 확인하는데 불편함을 느낄 수 있는 척도인 체감속도가 더 중요한 요소이기 때문이다. 도 14는 본 발명의 제2 실시예에 따른 혼합 이미지 다운로드 방법에서 순차 로딩할 이미지의 개수를 결정하는 방법의 일 예를 나타내는 도면이다.
예컨대, 상기 순차 로딩할 이미지의 개수는 하기 <수학식 1> 및 <수학식 2>를 이용하여 산출할 수 있다.
Figure pat00002
Figure pat00003
이때, 'sizeof(image i)'는 제i 번째 이미지의 크기, 'bandwidth'는 전송 네트워크의 대역폭, 'connections'는 접속 채널 수, 'inter request delay'는 로딩 간 지연을 의미한다.
또한, 모든 이미지의 크기가 동일하다고 가정하고, sizeof(image i)/bandwidth 를 A로 치환하면, 상기 <수학식 1>과 <수학식 2>의 차(즉, 순차 로딩할 이미지의 개수가 결정되는 시점)는 하기 <수학식 3>과 같이 표현될 수 있다.
Figure pat00004
따라서, 상기 <수학식 3>의 결과가 0이하가 되는 시점의 x값이 최적의 순차 로딩할 이미지의 개수가 된다. 한편, 상기 x값은 하기 <수학식 4>와 같이 근사화될 수 있다.
Figure pat00005
한편, 상기 수학식들은 각종 환경적인 요인들을 배제하고, 다운로드에 걸리는 시간만을 고려한 식이다. 접속 채널 수는 웹서버의 특성, 사용자 단말에서 사용하는 웹브라우저의 특성, 네트워크의 연결 형태 등에 따라 상이하므로, 상기 수학식들에 따른 적절한 x값 역시 여러 상황에 따라 달라질 수 있다.
이하, 상기 본 발명의 제2 실시예에 따른 방법을 구현하기 위한 장치 및 세부 처리 절차를 도 15 및 도 16을 참조하여 설명한다.
도 15는 본 발명의 제2 실시예에 따른 혼합 방식의 이미지 다운로드 방법이 적용된 이미지 로딩 속도 개선 장치를 나타내는 블록도이다. 도 15를 참조하면, 본 발명의 제2 실시예에 따른 이미지 로딩 속도 개선 장치(1500)는 큐 제어부(1501), 이미지 정보 부가 위치 탐색부(1502), 이미지 정보 로딩 처리부(1503), 이미지 파일 계수부(1504) 및 순차 처리 이미지 결정부(1505) 등을 포함하여 구성될 수 있다.
사용자 단말에서 요청한 웹페이지의 전체 웹페이지 데이터(600)가 복수의(즉, NT개의) 이미지 정보(601)들(예컨대, 해당 이미지가 저장된 웹서버 상에서의 위치 정보들)을 포함하여 웹브라우징에 따라 하나의 웹페이지 상에서 복수의 이미지들이 로딩될 경우, 본 발명의 제2 실시예에 따라 상기 웹페이지의 가장 상단에 로딩되는 이미지(즉, 제1 이미지)로부터 설정된 이미지의 개수만큼 순차적으로 로딩되도록 처리하고, 나머지 이미지에 대해서는 병렬로 이미지가 로딩되도록 처리한다.
즉, 먼저 이미지 로딩 속도 개선 장치(1500)의 이미지 파일 계수부(1504)에서는 상기 전체 웹페이지 데이터(600)에 포함된 총 이미지 개수(NT)를 확인한다. 그런 다음, 순차 처리 이미지 결정부(1505)에서는 상기 확인된 총 이미지 개수(NT)로부터 상술한 계산 방법 등 다양한 방법을 통해 최적의 순차적으로 로딩 처리할 이미지 개수(NS)를 결정한다. 한편, 상기 순차적으로 로딩 처리할 이미지 개수는 서버로부터 결정되어 상기 수신된 전체 웹페이지 데이터 내에 미리 포함될 수도 있다. 즉, 도 15에 도시된 바와 같이 전체 이미지 개수 정보(602)뿐만 아니라 순차 처리 이미지 개수 정보(603) 및 병렬 처리 이미지 개수 정보(604) 등을 함께 포함할 수 있다.
그런 다음, 이미지 정보 로딩 처리부(1503)에서는 상기 결정된 방식에 따라 해당 이미지를 순차적 또는 병렬 방식으로 로딩되도록 서버에 전송 요청함으로써 사용자 단말에 순차적 또는 병렬로 이미지를 로딩하게 된다.
즉, 상기와 같이 순차적으로 로딩 처리할 이미지 개수(NS)가 결정되면 이미지 로딩 속도 개선 장치(1500)의 큐 제어부(1501)에서는 상기 전체 웹페이지 데이터(600) 중에서 제1 이미지 정보(601a)로부터 아래로 상기 결정된 개수만큼 순차적으로 큐(queue)(610)에 저장되도록 제어한다. 따라서, 큐 제어부(1501)의 제어에 따라 이미지 정보 로딩 처리부(1503)에서는 해당 로딩할 이미지에 대응하는 상기 이미지 정보(601)를 순차적으로 큐(610)에 저장시킨다.
한편, 상기 큐 제어부(641)에서는 상기 큐(610)에 서버로 전송 요청할 각 이미지에 대한 이미지 정보(예컨대, 해당 이미지를 서버에 요청하기 위한 이미지가 저장된 경로 정보 등)가 존재하는 지를 확인한다. 상기 확인 결과, 큐(610)에 서버로 요청할 이미지 정보가 존재할 경우, 이미지 정보 부가 처리부(620)에서 상기 전송 요청할 이미지 정보를 웹페이지 데이터(600) 상의 해당 위치에 부가하고 이미지 요청 처리부(630)를 통해 서버로 해당 이미지에 대한 전송 요청을 한다.
보다 구체적으로 설명하면, 큐 제어부(641)의 확인 결과, 큐(610)에 전송 요청할 이미지 정보가 존재할 경우, 이미지 정보 부가 위치 탐색부(1502)에서는 이미지 정보 부가 처리부(620)로부터 웹페이지 상에서 해당 이미지를 추가할 위치(예컨대, DOM상에서의 위치)(또는 웹브라우저 상에서 이미지가 로딩될 위치)를 탐색한다. 이에 따라, 큐 제어부(641)에서는 해당 이미지 정보를 상기 이미지 정보 로딩 처리부(1503)를 통해 상기 탐색된 위치에 부가하도록 제어하며, 상기 이미지 정보 로딩 처리부(1503)는 상기 전송할 이미지 정보를 큐(610)에서 독출하여 상기 이미지 정보 부가 처리부(620)로 제공한다. 이미지 정보 부가 처리부(620)에서는 상기 전송 요청할 이미지에 대한 이미지 정보를 상기 탐색된 해당 위치(예컨대, DOM상에서의 위치)에 부가하고, 이미지 요청 처리부(630)를 통해 서버로 해당 이미지에 대한 전송을 요청한다.
이와 같이, 순차적으로 로딩할 이미지의 개수(NS)만큼 순차적으로 로딩되도록 서버로 전송 요청하고, 순차적으로 로딩하기로 결정된 모든 이미지에 대한 순차적 로딩이 완료되면, 나머지 이미지들(즉, NP=NT-NS)은 병렬 로딩되도록 처리한다.
이와 같이, 본 발명의 제2 실시예에 따른 이미지 로딩 속도 개선 장치(1500)는 사용자 단말에서 전체 웹페이지 데이터(600) 중 가장 상단에 위치한 이미지에 대응되는 제1 이미지 정보(601a)로부터 아래쪽으로 상기 결정된 개수만큼 순차적으로 로딩되도록 처리하고, 나머지 이미지 정보들에 대해서는 병렬로 로딩되도록 처리한다.
상기 이미지 로딩 속도 개선 장치(1500)에서의 상기 처리 기능은 마크업 언어 및 자바 스크립트 코드 등으로 구현될 수 있다.
도 16은 본 발명의 제2 실시예에 따른 순차적 이미지 다운로드 방법이 적용된 이미지 로딩 속도 개선 절차를 나타내는 흐름도이다. 도 16을 참조하면, 먼저 사용자 단말에서 웹서버에 접속하여 웹페이지를 요청(S1601)하면, 상기 요청에 따라 해당 웹페이지 데이터가 웹서버로부터 사용자 단말로 제공된다. 즉, 사용자 단말에서 웹서버로부터 복수의 이미지 정보가 포함된 웹페이지 데이터를 수신(S1602)하면, 상기 수신된 웹페이지 데이터를 통해 웹페이지를 사용자 단말상에서 브라우징하게 된다. 이때, 사용자 단말에서는 상기 웹페이지 데이터로부터 해당 웹페이지에 포함된 이미지의 개수(NT)를 확인(S1603)한다.
그런 다음, 본 발명의 제2 실시예에 따라 순차 및 병렬 처리할 각 이미지의 개수(NS, NP)를 확인(S1604)한다. 이때, NS는 순차 로딩할 이미지의 개수이며, NP는 병렬 로딩할 이미지의 개수로서, 두 개수의 합은 NT가 된다.(S1605) 전술한 바와 같이 NS는 상기 수학식 1 내지 4에 기초하여 확인될 수 있고, 또는 웹페이지 데이터 내에 포함된 값으로부터 확인될 수도 있으나 반드시 이러한 예에 한정되는 것은 아니다.
한편 사용자 단말은 상기 웹페이지 데이터 중에서 제1 이미지 정보(601a)로부터 아래에 위치한 이미지 정보 순으로 총 NS개의 이미지에 해당하는, 순차 로딩할 이미지들에 대한 이미지 정보를 순차적으로 큐(610)에 저장(S1606)한다. 따라서, 단계 S704를 통해 큐(610)에는 전체 이미지 중 순차 로딩할 이미지들의 개수(NS)만큼의 이미지 정보들이 로딩되는 순서대로 저장되어 있음을 알 수 있다.
이후, 상기 순차 로딩할 이미지의 개수(NS)만큼 가장 상단에 위치한 이미지로부터 순차적으로 각 이미지를 로딩하는 바, 예컨대, 상위 이미지로부터 제i 번째 이미지(i는 NS 이하임)를 로딩하고자 할 경우, 큐(610)가 비어 있지 않고 전송 요청할 이미지 정보가 존재하는지 확인하기 위해 큐 사이즈를 검사(S1608)하고, 상기 검사 결과 큐 사이즈가 0보다 크면(즉, 큐에 전송 요청할 이미지에 대한 이미지 정보가 존재하면)(S1609), 상기 이미지 정보를 웹페이지 상에서 추가할 위치(예컨대, DOM상에서의 위치 또는 웹브라우저 상에서 이미지가 로딩될 위치)를 검색(S1610)하고, 상기 큐에 저장된 이미지 정보를 독출하여 상기 검색된 위치에 부가(append)(S1611)한다. 상기 단계 S1611에서 독출되는 이미지 정보는 i번째 이미지에 대한 이미지 정보이며, 상기 독출에 따라 큐의 맨 앞에 남아있는 것은 i+1번째 이미지에 대한 이미지 정보임을 알 수 있다. 이와 같이 큐에 저장된 이미지 정보는 순차적으로 하나씩 독출될 수 있다.
이때, 상기 부가된 이미지 정보는 웹페이지의 동적 실행에 따라 실행되어, 상기 이미지 정보에 해당하는 이미지를 웹서버로 요청(S1612)한다. 그런 다음, 상기 요청된 이미지를 수신하여 웹페이지 상에서 해당 위치에 로딩(S1613)한다. 이와 같이 웹페이지 상단에서부터 순차적으로 각 이미지의 로딩이 완료되면, 바로 아래의 이미지에 대한 이미지 정보를 웹페이지 상에서 해당 위치에 추가함으로써 해당 이미지를 로딩하게 된다.
상기와 같이 위에서부터 차례로 하나씩 이미지를 전송 처리하고, 순차적으로 전송할 모든 이미지에 대한 전송이 완료(S1615)되면, 나머지 이미지들(즉, NP개의 이미지들)에 대해 병렬 로딩되도록 전송 처리(S1616)한다.
도 17은 종래 방식과 본 발명의 제1 실시예에 따른 순차적 방식의 이미지 로딩 속도를 비교한 실험 예를 나타내는 도면이다. 도 17은 종래의 병렬 처리 방식과 상술한 본 발명의 제1 실시예에 따른 방식의 각 이미지별 로딩 속도를 비교한 그래프이다. 도 17을 참조하면, 종래의 병렬 처리 방식에 비해 본 발명에 따른 순차적 처리 방식에 의한 경우 사용자가 실제로 느끼는 체감 이미지 로딩 속도가 월등히 개선되었음을 알 수 있다. 보다 구체적으로, 전술한 AFT에 해당하는 이미지가 적게는 최초 1-2개, 많게는 3-4개에 한정된다고 가정할 수 있으므로 이를 감안하면 대략 3번째 이미지인 content_image_2.jpg까지를 로딩하는데 소요되는 시간은 종래 기술에 비해 제1 실시예의 경우 현격히 줄어든 것을 도 17로부터 확인할 수 있다. 한편, 본 발명의 제2 실시예에 따른 이미지 로딩 속도를 비교한 별도의 실험 예는 제시되지 않았으나, 전술한 바와 같이 제2 실시예는 제1 실시예에서의 장점 및 종래의 병렬 처리 방식의 장점을 겸비하였으므로 사용자가 실제로 느끼는 체감 로딩 속도에 관련된 상위 몇 개의 이미지 각각에 대한 개별적인 로딩 속도 및 전체 로딩 속도 모두 대조된 방식에 비해 월등함은 쉽게 추측할 수 있다.
이상과 같이 본 발명에서는 구체적인 구성 요소 등과 같은 특정 사항들과 한정된 실시예 및 도면에 의해 설명되었으나 이는 본 발명의 보다 전반적인 이해를 돕기 위해서 제공된 것일 뿐, 본 발명은 상기의 실시예에 한정되는 것은 아니며, 본 발명이 속하는 분야에서 통상적인 지식을 가진 자라면 이러한 기재로부터 다양한 수정 및 변형이 가능하다.
따라서, 본 발명의 사상은 설명된 실시예에 국한되어 정해져서는 아니되며, 후술하는 특허청구범위뿐 아니라 이 특허청구범위와 균등하거나 등가적 변형이 있는 모든 것들은 본 발명 사상의 범주에 속한다고 할 것이다.
600 : 전체 웹페이지 데이터 601 : 이미지 정보
602 : 전체 이미지 개수 정보 603 : 순차 처리 이미지 개수 정보
605 : 병렬 처리 이미지 개수 정보 610 : 큐(Queue)
620 : 이미지 정보 부가 처리부 630 : 이미지 요청 처리부
640 : 순차식 이미지 로딩 처리 장치
641 : 큐 제어부 642 : 이미지 정보 로딩 처리부
643 : 이미지 정보 부가 위치 탐색부
1100 : 이미지 로딩 간 지연(Inter Request Delay)
1500 : 혼합식 이미지 로딩 처리 장치
1501 : 큐 제어부 1502 : 이미지 정보 부가 위치 탐색부
1503 : 이미지 정보 로딩 처리부 1504 : 이미지 파일 계수부
1505 : 순차 처리 이미지 결정부

Claims (23)

  1. 사용자 단말에서 브라우징되는 웹페이지에 포함된 이미지들 중 적어도 일부 이미지에 대한 이미지 정보가 저장되는 큐(queue), 및
    상기 큐에 저장된 순서대로 이미지 정보를 독출하여 순차적으로 로딩되도록 처리하는 이미지 정보 로딩 처리부를 포함하는, 이미지 로딩 속도 개선 장치.
  2. 청구항 1에 있어서, 상기 이미지 로딩 속도 개선 장치는,
    상기 전체 이미지들의 개수를 확인하는 이미지 파일 계수부; 및
    상기 이미지 파일 계수부로부터 확인된 전체 이미지들 중에서 순차적으로 로딩되도록 처리할 순차 이미지 개수와 병렬 로딩되도록 처리할 병렬 이미지 개수를 결정하는 순차 처리 이미지 결정부를 더 포함하며,
    상기 이미지 정보 로딩 처리부는,
    상기 순차적으로 로딩되도록 처리할 이미지에 대한 로딩이 완료되면, 나머지 이미지들에 대해 병렬 로딩되도록 더 처리하는, 이미지 로딩 속도 개선 장치.
  3. 청구항 2에 있어서, 상기 큐에 최초 저장된 이미지 정보의 개수는 상기 순차 이미지 개수와 동일한, 이미지 로딩 속도 개선 장치.
  4. 청구항 2에 있어서, 상기 이미지 로딩 속도 개선 장치는,
    상기 로딩되도록 처리할 이미지에 대한 이미지 정보를 상기 큐에 저장하고, 상기 큐에 저장된 이미지 정보가 존재하는지 여부를 확인하는 큐 제어부;
    상기 큐 제어부의 확인 결과에 따라 저장된 이미지 정보가 존재할 경우, 상기 웹페이지상에서 상기 이미지 정보가 부가될 위치를 탐색하는 이미지 정보 부가 위치 탐색부;
    상기 이미지 정보 부가 위치 탐색부에 의해 탐색된 위치상에 상기 큐에 저장된 해당 이미지 정보를 부가하는 이미지 정보 부가 처리부; 및
    상기 이미지 정보 부가 처리부에 의해 부가된 이미지 정보에 대한 해당 이미지를 서버로 요청하는 전송 처리부를 포함하는, 이미지 로딩 속도 개선 장치.
  5. 청구항 4에 있어서, 상기 웹페이지상에서 부가되는 이미지 정보는 마크업 언어로 작성되는, 이미지 로딩 속도 개선 장치.
  6. 청구항 4에 있어서, 상기 웹페이지는 문서 객체 모델(DOM)의 트리 형태로 구성되는 파일인, 이미지 로딩 속도 개선 장치.
  7. 청구항 2에 있어서, 상기 웹페이지에 포함된 전체 이미지들의 개수에 대한 정보는 상기 웹페이지의 데이터 내에 포함되는, 이미지 로딩 속도 개선 장치.
  8. 청구항 2에 있어서, 상기 전체 이미지들 중에서 순차 이미지 개수 및 병렬 이미지 개수에 대한 정보 중 적어도 하나는 상기 웹페이지의 데이터 내에 포함되는, 이미지 로딩 속도 개선 장치.
  9. 청구항 2에 있어서, 상기 순차 처리 이미지 결정부는,
    병렬 로딩 시 로딩 시간이 순차 로딩시의 로딩 시간과 같거나 이보다 짧아지는 순간의 이미지 개수를 순차 이미지 개수로 결정하고,
    여기서 상기 로딩 시간은 화면에서 스크롤을 하지 않은 상태로 사용자가 볼 수 있는 영역을 로딩하는데 걸리는 시간을 의미하는, 이미지 로딩 속도 개선 장치.
  10. 청구항 9에 있어서, 상기 순차 이미지 개수는 접속 채널의 수 - 1개인, 이미지 로딩 속도 개선 장치.
  11. 이미지 로딩 속도 개선 장치에서 수행되는 각 단계가,
    사용자 단말에서 브라우징되는 웹페이지에 포함된 전체 이미지들 중 적어도 일부 이미지에 대한 이미지 정보를 큐(queue)에 저장하는 단계; 및
    상기 큐가 비어 있지 않은 경우 상기 큐에 저장된 순서대로 이미지 정보를 독출하여 순차적으로 로딩되도록 처리하는 단계를 포함하는, 이미지 로딩 속도 개선 방법.
  12. 청구항 10에서, 상기 이미지 로딩 속도 개선 방법은,
    상기 전체 이미지들의 개수를 확인하는 단계;
    상기 확인된 전체 이미지들의 개수 중에서 순차적으로 로딩되도록 처리할 순차 이미지 개수와 병렬 로딩되도록 처리할 병렬 이미지 개수를 결정하는 단계; 및
    상기 순차적으로 로딩되도록 처리하는 단계 이후에 나머지 이미지들에 대해 병렬 로딩되도록 처리하는 단계를 더 포함하는, 이미지 로딩 속도 개선 방법.
  13. 청구항 12에 있어서, 상기 큐에 최초 저장된 이미지 정보의 개수는 상기 순차 이미지 개수와 동일한, 이미지 로딩 속도 개선 방법.
  14. 청구항 12에 있어서, 상기 이미지 정보를 큐에 저장하는 단계는,
    상기 로딩되도록 처리할 이미지에 대한 이미지 정보를 상기 큐에 저장하는 단계를 포함하고,
    상기 로딩되도록 처리하는 단계는,
    상기 큐에 저장된 이미지 정보가 존재하는지 여부를 확인하는 단계;
    상기 확인 결과에 따라 저장된 이미지 정보가 존재할 경우, 상기 웹페이지상에서 상기 이미지 정보가 부가될 위치를 탐색하는 단계;
    상기 탐색된 위치상에 상기 큐에 저장된 해당 이미지 정보를 부가하는 단계; 및
    상기 부가된 이미지 정보에 대한 해당 이미지를 서버로 요청하는 단계를 포함하는, 이미지 로딩 속도 개선 방법.
  15. 청구항 14에 있어서, 상기 웹페이지상에서 부가되는 이미지 정보는 마크업 언어로 작성되는, 이미지 로딩 속도 개선 방법.
  16. 청구항 14에 있어서, 상기 웹페이지는 문서 객체 모델(DOM)의 트리 형태로 구성되는 파일인, 이미지 로딩 속도 개선 방법.
  17. 청구항 12에 있어서,
    상기 웹페이지에 포함된 전체 이미지들의 개수에 대한 정보는 상기 웹페이지의 데이터 내에 포함되는, 이미지 로딩 속도 개선 방법.
  18. 청구항 12에 있어서,
    상기 전체 이미지들 중에서 순차 이미지 개수 및 병렬 이미지 개수에 대한 정보 중 적어도 하나는 상기 웹페이지의 데이터 내에 포함되는, 이미지 로딩 속도 개선 방법.
  19. 청구항 12에 있어서, 상기 순차 이미지 개수와 병렬 이미지 개수를 결정하는 단계는,
    병렬 로딩 시 로딩 시간이 순차 로딩시의 이미지 로딩 시간과 같거나 이보다 짧아지는 순간의 이미지 개수를 순차 이미지 개수로 결정하고,
    여기서 상기 로딩 시간은 화면에서 스크롤을 하지 않은 상태로 사용자가 볼 수 있는 영역을 로딩하는데 걸리는 시간을 의미하는, 이미지 로딩 속도 개선 방법.
  20. 청구항 19에 있어서, 상기 순차 이미지 개수는 접속 채널의 수 - 1개인, 이미지 로딩 속도 개선 방법.
  21. 청구항 11 내지 청구항 20 중 어느 한 항의 방법을 실행하기 위한 프로그램이 기록되어 있는 것을 특징으로 하는 컴퓨터 판독 가능한 기록 매체.
  22. 사용자 단말의 요청에 의해 웹페이지 데이터를 제공하는 웹페이지 제공 수단; 및
    상기 사용자 단말로부터 상기 웹페이지 데이터에 포함된 이미지에 대한 요청을 수신하고, 해당 이미지를 상기 사용자 단말로 제공하는 이미지 제공 수단을 포함하고,
    상기 웹페이지 데이터는,
    상기 사용자 단말에서 순차적으로 로딩될 순차 이미지 정보를 포함하고,
    상기 순차 이미지 정보에 따라 상기 사용자 단말에 제공된 이미지가 로딩되는, 이미지 로딩 속도 개선을 위한 웹 서버.
  23. 청구항 22에 있어서, 상기 웹페이지 데이터는
    상기 사용자 단말에 병렬 로딩될 병렬 이미지 정보를 더 포함하고,
    상기 순차 이미지의 로딩이 완료되면 상기 병렬 이미지 정보에 따라 상기 사용자 단말기에 제공된 이미지가 병렬로 로딩되는, 이미지 로딩 속도 개선을 위한 웹 서버.
KR1020120000115A 2012-01-02 2012-01-02 복수의 이미지들을 포함하는 웹페이지의 이미지 로딩 속도 개선 장치, 방법 및 컴퓨터 판독 가능한 기록 매체 KR101328047B1 (ko)

Priority Applications (1)

Application Number Priority Date Filing Date Title
KR1020120000115A KR101328047B1 (ko) 2012-01-02 2012-01-02 복수의 이미지들을 포함하는 웹페이지의 이미지 로딩 속도 개선 장치, 방법 및 컴퓨터 판독 가능한 기록 매체

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
KR1020120000115A KR101328047B1 (ko) 2012-01-02 2012-01-02 복수의 이미지들을 포함하는 웹페이지의 이미지 로딩 속도 개선 장치, 방법 및 컴퓨터 판독 가능한 기록 매체

Publications (2)

Publication Number Publication Date
KR20130078944A true KR20130078944A (ko) 2013-07-10
KR101328047B1 KR101328047B1 (ko) 2013-11-13

Family

ID=48991793

Family Applications (1)

Application Number Title Priority Date Filing Date
KR1020120000115A KR101328047B1 (ko) 2012-01-02 2012-01-02 복수의 이미지들을 포함하는 웹페이지의 이미지 로딩 속도 개선 장치, 방법 및 컴퓨터 판독 가능한 기록 매체

Country Status (1)

Country Link
KR (1) KR101328047B1 (ko)

Cited By (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR20160050229A (ko) * 2014-10-29 2016-05-11 주식회사 필링선데이 이미지 공유 방법 및 프로그램
KR20180080953A (ko) 2017-01-05 2018-07-13 주식회사 소프트코리아 웹 페이지 로딩 속도 개선 엔진, 이를 포함하는 웹 콘텐츠 공급 시스템 및 웹 페이지 로딩 속도 개선 방법
CN110413911A (zh) * 2018-04-26 2019-11-05 腾讯科技(深圳)有限公司 网络图片加载方法、装置、终端设备及计算机可读存储介质

Families Citing this family (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR101530858B1 (ko) * 2014-07-31 2015-06-23 주식회사 한글과컴퓨터 부분 이미지 캐시 기반의 전자 문서 표시 장치 및 방법
KR101652483B1 (ko) * 2015-02-26 2016-08-30 주식회사 한글과컴퓨터 개체에 대한 꾸미기 효과 처리가 가능한 전자 문서 편집 장치 및 방법
KR101880507B1 (ko) * 2017-04-21 2018-07-20 주식회사 한글과컴퓨터 웹 문서에 삽입된 도형의 크기 조정을 지원하는 클라이언트 단말 장치 및 그 동작 방법
KR101880508B1 (ko) * 2017-04-27 2018-07-20 주식회사 한글과컴퓨터 웹 문서에서 목록 생성을 지원하는 웹 문서 편집 지원 장치 및 방법

Family Cites Families (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR100460009B1 (ko) * 2004-06-23 2004-12-04 엔에이치엔(주) 이미지 리소스를 로딩하는 방법 및 이미지 리소스 로딩시스템
KR101504088B1 (ko) * 2010-06-08 2015-03-19 에스케이플래닛 주식회사 웹 어플리케이션 실행 장치, 이의 웹 어플리케이션 실행 방법 및 이 방법이 기록된 컴퓨터로 판독 가능한 기록 매체

Cited By (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR20160050229A (ko) * 2014-10-29 2016-05-11 주식회사 필링선데이 이미지 공유 방법 및 프로그램
KR20180080953A (ko) 2017-01-05 2018-07-13 주식회사 소프트코리아 웹 페이지 로딩 속도 개선 엔진, 이를 포함하는 웹 콘텐츠 공급 시스템 및 웹 페이지 로딩 속도 개선 방법
CN110413911A (zh) * 2018-04-26 2019-11-05 腾讯科技(深圳)有限公司 网络图片加载方法、装置、终端设备及计算机可读存储介质
CN110413911B (zh) * 2018-04-26 2023-08-11 腾讯科技(深圳)有限公司 网络图片加载方法、装置、终端设备及存储介质

Also Published As

Publication number Publication date
KR101328047B1 (ko) 2013-11-13

Similar Documents

Publication Publication Date Title
KR101328047B1 (ko) 복수의 이미지들을 포함하는 웹페이지의 이미지 로딩 속도 개선 장치, 방법 및 컴퓨터 판독 가능한 기록 매체
US10275433B2 (en) Remote browsing and searching
US20190146616A1 (en) Systems And Methods For Remote Tracking And Replay Of User Interaction With A Webpage
KR100705411B1 (ko) 로컬 컴퓨터 검색 시스템 및 이를 이용한 로컬 컴퓨터 검색방법
US9195750B2 (en) Remote browsing and searching
US8595186B1 (en) System and method for building and delivering mobile widgets
US8489702B2 (en) Determining playability of media files with minimal downloading
US8381093B2 (en) Editing web pages via a web browser
US10515142B2 (en) Method and apparatus for extracting webpage information
US8892634B2 (en) Extensible video player selection via server-side detection of client application
US20100180192A1 (en) Dynamically configuring a presentation layer associated with a webpage delivered to a client device
US20170046023A1 (en) Method and apparatus for processing managing multimedia content
US20080140766A1 (en) Editing web pages via a web browser
US9336321B1 (en) Remote browsing and searching
JP2006065395A (ja) ハイパーリンク生成装置、ハイパーリンク生成方法及びハイパーリンク生成プログラム
US9922006B1 (en) Conditional promotion through metadata-based priority hinting
US9092405B1 (en) Remote browsing and searching
KR20120016333A (ko) 웹 어플리케이션을 위한 사전 캐싱 방법 및 이를 적용한 단말 장치
US11113455B2 (en) Web page rendering on wireless devices
US10298974B2 (en) Method and device for presenting content data from network
KR100644159B1 (ko) 검색 컨트롤러 제어 방법 및 그 장치
US9734134B1 (en) Conditional promotion through frame reordering
Hua et al. Design and performance studies of an adaptive scheme for serving dynamic web content in a mobile computing environment
KR101462114B1 (ko) 동기식 스크립트 지연 로딩 시스템, 방법 및 컴퓨터 판독 가능한 기록 매체
US9607322B1 (en) Conditional promotion in content delivery

Legal Events

Date Code Title Description
A201 Request for examination
E902 Notification of reason for refusal
AMND Amendment
E601 Decision to refuse application
AMND Amendment
X701 Decision to grant (after re-examination)
GRNT Written decision to grant
FPAY Annual fee payment

Payment date: 20161024

Year of fee payment: 4

FPAY Annual fee payment

Payment date: 20171106

Year of fee payment: 5

FPAY Annual fee payment

Payment date: 20181105

Year of fee payment: 6