KR101596793B1

KR101596793B1 - 반응형 뉴스 웹 서비스 시스템 및 이를 이용한 실시간 기사정보 게시방법.

Info

Publication number: KR101596793B1
Application number: KR1020140167704A
Authority: KR
Inventors: 이종택; 김제영
Original assignee: (주)제이컴코퍼레이션
Priority date: 2014-11-27
Filing date: 2014-11-27
Publication date: 2016-02-23

Abstract

본 발명은 멀티미디어 컨텐츠 포함하는 기사정보를 게시하며, 기사정보가 디스플레이되어 게시되는 사용자 단말 및 이에 사용되는 브라우저에 따라 레이아웃을 변경하는 반응형 뉴스 웹 서비스 시스템으로, 멀티미디어 컨텐츠를 포함하는 기사정보를 복수의 섹션으로 분류하여 게시하며, 상기 브라우저의 크기에 따라 웹 페이지의 레이아웃 및 상기 레이아웃을 구성하는 섹션창의 크기가 변환되는 뉴스 게시 메인 웹페이지(10); 상기 메인 웹 페이지에 링크되어, 상기 뉴스의 등록을 관리하는 관리자 웹 페이지(20); 상기 관리자 웹 페이지 상에서 링크되며, 기사정보 입력을 위한 사용자 인터페이스를 포함하고 상기 사용자 인터페이스를 통해 기사정보를 입력받는 뉴스 등록 웹 페이지(21); 및 상기 메인 웹페이지, 관리자 웹 페이지, 뉴스 등록 웹 페이지를 저장하고, 사용 단말의 요청에 따라, 상기 메인 웹페이지, 관리자 웹 페이지, 및 뉴스 등록 웹 페이지 문서를 사용자 달말에 제공하여 디스플레이 되도록 하고, 멀티미디어 컨텐츠 포함하는 기사정보를 저장하여 관리는 뉴스관리 웹 서버(30);를 포함하여, 상기 뉴스 등록 웹페이지로부터 전송되는 기사정보는 상기 웹 서버를 통해 실시간으로 상기 메인 웹페이지에 전송되어 디스플레이되는 것을 특징으로 한다.

Description

반응형 뉴스 웹 서비스 시스템 및 이를 이용한 실시간 기사정보 게시방법.{Responsive news web service system and Real-time news posting method using the same}

본 발명은 반응형 뉴스 웹 서비스 시스템 및 이를 이용한 실시간 기사정보 게시방법에 관한 것으로, 보다 구체적으로는 멀티미디어 컨텐츠 포함하는 기사정보를 게시하며, 기사정보가 디스플레이되어 게시되는 사용자 단말 및 이에 사용되는 브라우저에 따라 레이아웃을 변경하는 반응형 뉴스 웹 서비스 시스템 및 이를 이용한 실시간 기사정보 게시방법에 관한 것이다.

최근 웹 기술은 태블릿 PC, 스마트 폰 등 다양한 형태와 크기의 모바일 기기의 이용이 늘어나면서 모바일 웹에 대한 관심이 많아 지고 있으며, 사용자들은 PC와 모바일 기기에서 동등한 서비스에 대한 욕구가 증가하고 있으며, 이에 따라, 각각 모바일 기기의 화면크기, 네트워크 속도 및 품질, 사용모드 등 제약 사항과 기능에 대응하여, 여러 종류의 웹(URL)을 구성하지 않고, 하나의 HTML소스만으로 웹 페이지의 크기 및 레이아웃이 재조정되어 다양한 기기의 화면크기 등 다양한 환경에서도 최적화된 웹 페이지를 제공할 수 있는 반응형 웹(Responsive Web)이 최신 웹 설계 기술로서 부각되고 있다.

한편, 뉴스 웹 서비스 시스템에 있어서는 뉴스의 게시의 측면에 있어서 PC와 다양한 모바일 기기 등과의 통합환경에서 다양한 뉴스를 제공할 수 있는 하기 특허문헌1과 같은 뉴스 웹 서비스 시스템이 시도되고 있으나, 위와 같은 뉴스 웹 서비스 시스템에 있어서는 일반적으로 반응형 웹(Responsive Web)이 도입되지 않고 여전히 종래 별도의 PC 용 웹과는 별도의 도메인을 가지는 모바일용 웹을 구성하여 모바일 기기 등과의 통합환경을 제공하고 있는 실정이다.

따라서, 뉴스의 게시의 측면에 있어서 각종 멀티미디어를 포함하는 기사정보를 웹상에서 제공하는 뉴스 웹 서비스 시스템은 일반화되어 있는 상황이며, 이러한 뉴스 웹 서비스 시스템에 있어서도 위 반응형 웹(Responsive Web) 등 모바일 기기 등과의 통합환경을 제공할 수 있는 새로운 시스템의 도입이 요구되고 있는 상황이다.

특히, 뉴스 웹 서비스 시스템에 있어서, 뉴스의 등록의 측면 즉, 기자 등 뉴스 생산자인 사용자가 뉴스 또는 기사를 생성하여 등록하는 시스템 및 방법에 대하여는 종래 일반적인 PC 기반의 등록방법을 사용하거나 뉴스 등록 전용 앱을 개발하여 사용하고 있을 뿐이며, 직접 모바일기기를 이용하여 멀티미디어 컨텐츠를 포함하는 기사정보를 생성하여 뉴스 웹 서비스 시스템에 효율적으로 업로드하여 실시간으로 게시할 수 있는 뉴스 웹 서비스 시스템의 개발은 여전히 요구되고 있는 상황이다.

대한민국 특허공개공보 공개번호 10-2009-0003066호('뉴스정보 제공 장치 및 그 방법')

따라서, 본 발명은 상기 뉴스 웹 서비스 시스템에 있어서의 종래 기술의 문제점을 해결하여, 멀티미디어 컨텐츠 포함하는 기사정보를 게시하며, 기사정보가 디스플레이되어 게시되는 사용자 단말 및 이에 사용되는 브라우저에 따라 레이아웃을 변경하는 반응형 뉴스 웹 서비스 시스템 및 이를 이용한 실시간 기사정보 게시방법을 제공하는 것을 목적으로 한다.

또한, 스마트폰 등 사용자 기기를 통해 반응형 뉴스 웹 서비스 시스템에 직접 접속하여 별도의 어플리케이션을 사용하지 않고 뉴스 웹 서비스 시스템상에서 사용자 기기에 내장된 카메라 등 멀티미디어 입력 도구를 사용하여 사진 촬영 등 멀티미디어 컨텐츠를 제작하고 이를 실시간으로 게시할 수 있는 반응형 뉴스 웹 서비스 시스템 및 이를 이용한 실시간 기사정보 게시방법을 제공하는 것을 목적으로 한다.

상기 목적을 달성하기 위하여 본 발명은 일 측면에서, 멀티미디어 컨텐츠 포함하는 기사정보를 게시하며, 기사정보가 디스플레이되어 게시되는 사용자 단말 및 이에 사용되는 브라우저에 따라 레이아웃을 변경하는 반응형 뉴스 웹 서비스 시스템으로, 멀티미디어 컨텐츠를 포함하는 기사정보를 복수의 섹션으로 분류하여 게시하며, 상기 브라우저의 크기에 따라 웹 페이지의 레이아웃 및 상기 레이아웃을 구성하는 섹션창의 크기가 변환되는 뉴스 게시 메인 웹페이지(10); 상기 메인 웹 페이지에 링크되어, 상기 뉴스의 등록을 관리하는 관리자 웹 페이지(20); 상기 관리자 웹 페이지 상에서 링크되며, 기사정보 입력을 위한 사용자 인터페이스를 포함하고 상기 사용자 인터페이스를 통해 기사정보를 입력받는 뉴스 등록 웹 페이지(21); 및 상기 메인 웹페이지, 관리자 웹 페이지, 뉴스 등록 웹 페이지를 저장하고, 사용 단말의 요청에 따라, 상기 메인 웹페이지, 관리자 웹 페이지, 및 뉴스 등록 웹 페이지 문서를 사용자 달말에 제공하여 디스플레이 되도록 하고, 멀티미디어 컨텐츠 포함하는 기사정보를 저장하여 관리는 뉴스관리 웹 서버(30);를 포함하여, 상기 뉴스 등록 웹페이지로부터 전송되는 기사정보는 상기 웹 서버를 통해 실시간으로 상기 메인 웹페이지에 전송되어 디스플레이되는 것을 특징으로 한다.

바람직하게는, 상기 뉴스 등록 웹페이지(21)의 사용자 인터페이스는 기사정보를 구성하는 텍스트 및 이미지의 입력 및 편집이 가능한 기사정보 입력 에디터로 구성된다.

또한, 바람직하게는, 상기 기사정보 입력 에디터에는 입력되는 기사정보에 포함된 멀티미디어 컨텐츠가 사진 이미지 인지 동영상 이미지 인지를 선택하는 멀티미디어 선택영역, 상기 기사정보가 게시될 섹션을 선택하는 섹션 선택영역, 상기 기사정보의 타이틀을 입력하는 타이틀 입력영역, 멀티미디어 컨텐츠를 포함하는 기사정보를 작성 편집할 수 있는 에디터 영역을 포함하고, 상기 에디터 영역에는 기사정보에 포함될 멀티미디어 컨텐츠를 선택하여 편집할 수 있는 멀티미디어 등록/선택 웹페이지로의 링크를 제공하는 멀티미디어 선택 인터페이스를 포함하여 구성된다.

여기서, 상기 뉴스관리 웹 서버(30)는 뉴스등록 웹페이지 처리부(33)를 포함하여, 상기 뉴스등록 웹페이지 처리부(33)는 기사정보 입력을 위한 사용자 단말에 촬영수단이 장착되었는지 여부를 검출하여, 상기 사용자 단말에 촬영수단이 장착된 경우 상기 촬영수단에 대한 사용자의 선택을 입력받고 사용자의 선택에 의하여 상기 촬영수단을 구동시키는 어플리케이션을 호출하여 상기 어플리케이션의 구동에 따라 촬영된 멀티미디어를 상기 기사정보에 포함시키는 것이 바람직하다.

또한, 여기서, 사용자의 상기 멀티미디어 선택영역의 선택입력에 따라, 상기 촬영수단이 검출되고 사용자의 선택입력에 따라 촬영수단의 구동이 개시된다.

나아가, 바람직하게는, 상기 뉴스 등록 웹페이지는 PC용 뉴스 등록 웹 페이지와 모바일 기기용 뉴스 등록 웹 페이지로 구분되며, 사용자 요청에 따라, 뉴스관리 웹 서버는 사용자 단말이 PC 인지 모바일 기기인지를 판단하여 PC용 뉴스 등록 웹 페이지와 모바일 기기용 뉴스 등록 웹 페이지 중 하나를 사용자 달말에 제공하여 디스플레이 되도록 한다.

다른 측면에서, 본 발명은 뉴스 게시 메인 웹페이지를 통해 멀티미디어 컨텐츠 포함하는 기사정보를 게시하며, 기사정보가 디스플레이되어 게시되는 사용자 단말 및 이에 사용되는 브라우저에 따라 상기 뉴스 게시 메인 웹페이지의 레이아웃을 변경하는 반응형 뉴스 웹 서비스 시스템을 이용한 실시간 기사정보 게시방법으로, 상기 뉴스 웹 서비스 시스템에 접속한 사용자를 인증하고 사용자의 선택에 따라 상기 사용자 단말에 관리자 웹 페이지 문서를 전송하여 표시되도록 하는 관리자 웹 페이지 문서 전송 단계; 상기 사용자 단말에 표시된 관리자 웹 페이지 상에서의 사용자의 뉴스 등록 웹페이지에 대한 선택입력을 수신하여 상기 사용자 단말에 멀티미디어 컨텐츠 포함하는 기사정보의 입력을 위한 기사정보 입력 에디터로 구성되는 뉴스 등록 웹 페이지 문서를 전송하는 뉴스 등록 웹페이지 문서 전송 단계: 상기 뉴스 등록 웹 페이지 문서를 구성하는 기사정보 입력 에디터를 통해 멀티미디어 컨텐츠 포함하는 기사정보를 수신하여 뉴스정보관리 DB에 저장하는 기사정보 수신/저장 단계; 상기 저장된 멀티미디어 컨텐츠를 포함하는 기사정보를 지정된 섹션에 게시되도록 뉴스 게시 메인 웹페이지에 전송하는 기사정보 전송/게시 단계; 를 포함한다.

바람직하게는, 상기 기사정보 전송/게시 단계는, 상기 뉴스 게시 메인 웹페이지가 표시되는 사용자 단말의 화면의 크기 및 브라우저의 크기에 따라 웹 페이지의 레이아웃 및 상기 레이아웃을 구성하는 섹션 창의 크기를 변환하여 전송한다.

또한, 바람직하게는, 상기 기사정보 수신/저장 단계는, 상기 기사정보 입력 에디터 상에서의 사용자의 선택입력을 수신하여, 멀티미디어 등록/편집 페이지 문서를 사용자 단말로 전송하는 멀티미디어 등록/편집 페이지 문서 전송 단계; 상기 멀티미디어 등록/편집 페이지 상에서의 사용자의 입력을 수신하여, 상기 사용자 단말의 멀티미디어 입력 어플리케이션을 검색하여 검색결과를 표시하도록 하는 멀티미디어 입력 어플리케이션 검색/표시 제어단계; 사용자 단말에 표시된 멀티미디어 입력 어플리케이션 중 사용자가 선택한 어플리케이션의 기능을 활성화하는 멀티미디어 입력 어플리케이션 기능 활성화 제어단계; 상기 활성화된 멀티미디어 입력 어플리케이션을 이용하여 사용자 단말로부터 멀티미디어 데이터를 입력받아 저장하고 상기 기사정보 입력 에디터상에 표시하며 상기 에디터를 통하여 입력되는 텍스트 데이터와 연관하여 기사정보를 생성하며, 사용자의 선택에 의하여 상기 생성된 멀티미디어를 포함한 기사정보를 뉴스정보관리 DB에 저장하는 기사정보 생성/저장 단계; 를 포함한다.

여기서, 상기 멀티 미디어 입력 어플리케이션은 사용자 단말에 설치된 카메라를 작동시키는 카메라 어플리케이션으로, 사용자의 선택에 의하여 카메라 어플리케이션의 기능이 활성화되고, 상기 카메라를 통하여 촬영된 영상을 멀티미디어 데이터로서 입력받아 저장하고, 상기 기사정보 입력 에디터상에 표시하며 에디터를 통하여 입력되는 뉴스 내용과 연관하여 기사정보를 생성하는 것이 바람직하다.

한편, 상기 반응형 뉴스 웹 서비스 시스템을 이용한 실시간 기사정보 게시방법을 수행하기 위한 프로그램 및 정보는 서버 컴퓨터로 읽을 수 있는 기록 매체에 저장될 수 있다. 이러한 기록 매체는 컴퓨터 시스템에 의하여 읽혀질 수 있도록 프로그램 및 데이터가 저장되는 모든 종류의 기록매체를 포함한다. 그 예로는, 롬(Read Only Memory), 램(Random Access Memory), CD(Compact Disk), DVD(Digital Video Disk)-ROM, 자기 테이프, 플로피 디스크, 광데이터 저장장치 등이 있으며, 또한 케리어 웨이브(예를 들면, 인터넷을 통한 전송)의 형태로 구현되는 것도 포함된다. 또한, 이러한 기록매체는 네트워크로 연결된 컴퓨터 시스템에 분산되어, 분산 방식으로 컴퓨터가 읽을 수 있는 코드가 저장되고 실행될 수 있다.

상술한 바와 같은 본 발명에 의하면 반응형 웹 기술기반으로 PC 및 다양한 모바일 환경에 적응적으로 사용될 수 있는 뉴스 웹 서비스 시스템을 제공할 수 있다.

또한, 멀티미디어 컨텐츠를 포함한 기사정보를 실시간으로 반응형 웹 기반의 뉴스 웹 서비스 시스템에 효율적으로 게시하는 반응형 뉴스 웹 서비스 시스템을 이용한 실시간 뉴스정보 게시방법을 제공할 수 있게 된다.

나아가, 본 발명에 의하면 스마트폰 등 사용자 기기를 통해 반응형 뉴스 웹 서비스 시스템에 직접 접속하여 별도의 어플리케이션 없이 뉴스 웹 서비스 시스템상에서 사용자 기기에 내장된 카메라 등 멀티미디어 입력 도구를 사용하여 사진 촬영 등 멀티미디어 컨텐츠를 제작하고 이를 실시간으로 게시할 수 있게 된다.

도 1은 본 발명의 반응형 뉴스 웹 서비스 시스템의 구성도
도 2a는 본 발명의 일실시예에 따른 반응형 메인 웹페이지의 PC 환경에서의 레이아웃을 설명하기 위한 화면 구성도
도 2b는 본 발명의 일실시예에 따른 반응형 메인 웹페이지의 모바일 환경에서의 레이아웃을 설명하기 위한 화면 구성도
도 3a 내지 도 3b는 본 발명의 일실시예에 따른 기사등록 웹 페이지의 구성 및 기사등록과정을 설명하기 위한 도면
도 4는 본 발명의 반응형 뉴스 웹 서비스 시스템을 이용한 실시간 뉴스정보 게시방법의 흐름도
도 5는 본 발명의 반응형 뉴스 웹 서비스 시스템을 이용한 실시간 뉴스정보 게시방법의 일 실시예의 기사정보 수신/저장 단계의 기사정보 수신/저장 단계의 멀티미디어 등록/선택 웹페이지를 통한 멀티미디어 등록/선택과정의 세부 흐름도.

아래에서는 첨부한 도면을 참고로 하여 본 발명의 실시예에 대하여 본 발명이 속하는 기술 분야에서 통상의 지식을 가진 자가 용이하게 실시할 수 있도록 상세히 설명한다. 그러나, 본 발명은 여러 가지 상이한 형태로 구현될 수 있으며 여기에서 설명하는 실시예에 한정되지 않는다. 그리고 도면에서 본 발명을 명확하게 설명하기 위해서 설명과 관계없는 부분은 생략하였으며, 명세서 전체를 통하여 유사한 부분에 대해서는 유사한 도면 부호를 붙였다. 또한 상세한 설명을 생략하여도 본 기술분야의 당업자가 쉽게 이해할 수 있는 부분의 설명은 생략하였다.

명세서 및 청구범위 전체에서, 어떤 부분이 어떤 구성 요소를 포함한다고 할 때, 이는 특별히 반대되는 기재가 없는 한 다른 구성 요소를 제외하는 것이 아니라 다른 구성 요소를 더 포함할 수 있는 것을 의미한다.

이하, 도면을 참조하여 본 발명을 실시하기 위한 내용을 상세히 설명한다.

도 1은 본 발명의 반응형 뉴스 웹 서비스 시스템의 구성도, 도 2a는 본 발명의 일실시예에 따른 반응형 메인 웹페이지의 PC 환경에서의 레이아웃을 설명하기 위한 화면 구성도, 도 2b는 본 발명의 일실시예에 따른 반응형 메인 웹페이지의 모바일 환경에서의 레이아웃을 설명하기 위한 화면 구성도이다.

도 1, 도 2a 및 도 2b를 참조하여 본 발명의 반응형 뉴스 웹 서비스 시스템의 구성 및 실시예를 설명한다.

본 발명의 반응형 뉴스 웹 서비스 시스템은 기본적으로는 멀티미디어 컨텐츠 포함하는 기사정보를 게시하는 웹과 이를 운영 및 관리하기 위한 웹 서버로 구성된 일반적인 형태의 구성을 가지며, 특징적인 멀티미디어 컨텐츠 포함하는 기사정보를 게시하며, 기사정보가 디스플레이되어 게시되는 사용자 단말 및 이에 사용되는 브라우저에 따라 레이아웃을 변경하는 반응형 뉴스 웹 서비스 시스템이 구성된다. 멀티미디어 컨텐츠 포함하는 기사정보는 예컨대, 사진 등 이미지, 동영상을 포함하고 이와 연관된 텍스트 정보를 가지는 뉴스 기사를 구성하는 정보를 일컫는다.

도 1을 참조하면, 본 발명의 반응형 뉴스 웹 서비스 시스템은, 뉴스 게시 메인 웹페이지(10), 관리자 웹 페이지(20), 뉴스 등록 웹 페이지(21), 뉴스관리 웹 서버(30)로 구성된다. 여기에 스마트 폰과 같은 사용자 단말(40)이 멀티미디어 컨텐츠를 포함하는 실시간 기사정보 작성 및 게시 수단으로서 부가된다.

뉴스 관리 웹서버(30)는 메인 웹페이지 처리부(31), 관리자 웹페이지 처리부(32), 뉴스등록 웹페이지 처리부(33), 웹설정관리DB(34), 회원관리DB (35), 뉴스정보관리DB(36), 운영관리DB(37)을 포함하여 구성된어, 상기 메인 웹페이지(10), 관리자 웹 페이지(20), 뉴스 등록 웹 페이지(21)를 저장하고, 사용 단말의 요청에 따라, 상기 메인 웹페이지, 관리자 웹 페이지, 및 뉴스 등록 웹 페이지 문서를 사용자 달말에 제공하여 디스플레이 되도록 하고, 멀티미디어 컨텐츠 포함하는 기사정보를 저장하여 관리한다.

뉴스 게시 메인 웹페이지(10)는 멀티미디어 컨텐츠를 포함하는 기사정보를 복수의 섹션으로 분류하여 게시하며, 상기 브라우저의 크기에 따라 웹 페이지의 레이아웃 및 상기 레이아웃을 구성하는 섹션창의 크기가 변환된다. 구체적으로는 브라우저 또는 접속된 사용자 단말의 뷰포인트 즉, 화면의 창 또는 보이는 영역의 크기 및 속성에 따라 웹 페이지 및 웹 페이지에 포함된 컨텐츠의 크기 및 해상도 등이 조절되어 디스플레이된다.

도 2a 및 도 2b를 참조하면, 본 실시예의 메인 웹 페이지(10)은 HTML5의 표준화된 기법을 기반으로, HTML5의 API, CSS3(캐스케이딩 스타일 시트 3, Cascading Style Sheet 3), 자바스크립트(Javascript) 등을 이용하여 사용자 단말의 뷰포트에 반응하여 레이아웃 등이 변동되는 반응형 웹으로 구현된다. 서버와 관련된 페이지는 PHP(Hypertext Preprocessor) 또는 JSP(Java Server Pages) 서블릿을 이용하여 구현된다.

또한 반응형 웹의 구성에 있어 본 실시예의 경우 웹 화면의 폭을 다수개의 컬럼 예컨대 12개의 컬럼으로 나누고, 이들을 묶어서 다수개 클래스 예컨대 12개의 클래스를 구성하여, 12 컬럼 그리드를 구성하여. 화면을 12개의 컬럼으로 나누어 12가지의 클래스의 모양으로 다양한 레이아웃을 만들고, 그리드의 폭을 고정 값이 아닌 em 또는 %의 값으로 설정함으로써, 뷰포트의 가로 폭 길이의 변화에 따라서 컬럼의 크기가 상대적으로 변하게 하는 방법인 유동형 그리드(Fluid Grid)가 사용되며, 미디어 쿼리를 사용하여 반응적으로 그리드의 고정값을 변화시키는 반응형 그리드 기법이 함께 사용되어 제작될 수 있다.

이에 따라, 도 2a에 있어서, 헤더(11) 및 풋터(13)은 12개의 칼럼으로 이루어지는 그리드를 구성하고, 각 기사정보 및 광고섹션(12a, 12b, 12c, 12d, 12e)를 구성하는 각 그리드는 그 폭의 비율에 따라 8개의 칼럼으로 구성된 그리드(A-1), 4개의 칼럼으로 구성된 그리드(A-1, A-2, B-1~B-4, C-1~C4, D1~D3), 2개의 칼럼으로 구성된 그리드(B-5~B-8, E-1~E-6)로 구분되어 메인 웹 페이지(10)을 구성하며, 도메인 웹페이지는 하기 [표1] 12개의 그리드(span1~span12)의 조합에 의하여 구성되며. 화면의 상대 크기에 따른 그리드와 화면 픽셀에 따른 절대적인 그리드를 조합하여 구현한다. 하기 [표2] 및 [표3]은 하나의 소스코드로 이와 같은 미디어쿼리를 포함하는 HTML 문서에 의하여 2b에서와 같이 접속된 기기의 뷰포트의 크기 및 해상도에 따라, 그리드가 선택되고 레이아웃이 변동되도록 하고, 스타일시트(stylesheet)를 사용하여 변동된 레이아웃에 이미지, 동영상 및 텍스트등을 포함하는 각 기사 섹션이 최적화되어 디스플레이되도록 한다.

예를 들면, 메인 웹 페이지의 8개의 칼럼으로 구성된 그리드(A-1, 표1의 span 8)는 모바일 기기의 접속시, 해당 뷰 포트의 크기가 480 픽셀보다 작을 때 즉, 스마트폰을 세로로 사용할 때. 표1의 span 8은 620 픽셀이므로, 모바일 기기의 뷰포트 크기(480 픽셀)보다 크므로, 스타일시트(stylesheet)를 사용하여 span 8의 그리드를 최대 480 픽셀로 줄여주고, 이어, 이미지, 동영상, 텍스트 등은 이에 따라 100%로 설정하여, 줄어든 그리드의 크기에 맞추어져 그 크기가 조절되도록 한다.

한편, 메인 웹 페이지의 4개의 칼럼으로 구성된 그리드 4개의 칼럼으로 구성된 그리드(A-1, A-2, B-1~B-4, C-1~C4, D1~D3)는 스마트폰을 세로로 사용할 때. 각 span 4의 그리드의 크기는 300 픽셀이므로 스마트폰의 뷰포트의 크기 480 픽셀보다 작으므로 그대로 디스플레이되고, 2개의 그리드가 나란히 있는 경우 (A-1, A-2, B-1~B-4, C-1~C4)는 최소 600 픽셀이 되므로, 우측의 그리드가 아래로 내려오며, 이미지, 동영상, 텍스트 등은 100%로 설정하여 그대로 레이아웃이 변경된 그리드에 디스플레이된다.

이와 같은 과정은 [표3]의 하기 부분과 같이 형태의 HTML 문서로 구현된다.

@media (max-width: 480px) {

.home-slider .flexslider.home-slider-carousel ul li {

width:100% !important;

height:60px;

border-bottom:1px solid #e0e0e0;

} ........

화면의 상태크기에 따른 그리드	화면 픽셀에 따른 그리드
.span12{width:100%;*width:99.94680851063829%;}	.span12{width:940px;}
.span11{width:91.48936170212765%;*width:91.43617021276594%;}	.span11{width:860px;}
.span10{width:82.97872340425532%;*width:82.92553191489361%;}	.span10{width:780px;}
.span9{width:74.46808510638297%;*width:74.41489361702126%;}	.span9{width:700px;}
.span8{width:65.95744680851064%;*width:65.90425531914893%;}	.span8{width:620px;}
.span7{width:57.44680851063829%;*width:57.39361702127659%;}	.span7{width:540px;}
.span6{width:48.93617021276595%;*width:48.88297872340425%;}	.span6{width:460px;}
.span5{width:40.42553191489362%;*width:40.37234042553192%;}	.span5{width:380px;}
.span4{width:31.914893617021278%;*width:31.861702127659576%;}	.span4{width:300px;}
.span3{width:23.404255319148934%;*width:23.351063829787233%;}	.span3{width:220px;}
.span2{width:14.893617021276595%;*width:14.840425531914894%;}	.span2{width:140px;}
.span1{width:6.382978723404255%;*width:6.329787234042553%;}	.span1{width:60px;}

@media (min-width: 980px) and (max-width: 1199px) {
.home-slider .flex-direction-nav {
position:absolute;
left:85.9%;
bottom:27.722222%;
margin:0px;
margin-left:2px;
width:65px;
height:32px;
}
........
}

@media (min-width: 768px) and (max-width: 979px) { //테블릿을 가로 사용
.home-reviews .item figure { width:34%; }
.home-reviews .item .content {
width:60%;
margin-left:5%;
}
........
}

@media (max-width: 767px) { // 테블릿을 세로 세워 사용할때
휴대폰을 가로 사용할때
#header .ads {display:none;}
#top-navigation ul.nav-menu_l li a {
padding:0px;
}
#top-navigation ul.nav-menu_l {display:none;}

#top-desk-toggle {display:none;}
.select-nav { display:block; }
.scrollup { display:none !important; }

.home-slider .flex-direction-nav {
left:90.7555555555%;
width:65px;
height:22px;
}
........
}

@media (max-width: 640px) {
#header .ads {display:none;}
.masked .text h2 { font-size:18px; }
........
}

@media (max-width: 540px) {
#header .ads {display:none;}
.masked .text h2, .masked.masked-big .text h2 { font-size:24px;
.masked.masked-big {
margin-bottom:1px;
height:300px;
}
.masked.masked-small {
width:100%;
height:120px;
} ........

@media (max-width: 480px) { //세로 휴대폰 사용할때
.home-slider .flexslider.home-slider-carousel ul li {
width:100% !important;
height:60px;
border-bottom:1px solid #e0e0e0;
}
........

관리자 웹 페이지(20)는 상기 메인 웹 페이지에 링크되어, 상기 뉴스의 등록을 관리하는 기능을 수행하며, 내부에 뉴스 등록 웹 페이지(21)를 호출하기 위한 링크를 포함하는 사용자 인터페이스 (도 1의 "모바일 속보 등록" 버튼)를 포함한다.

이와는 별도로 관리자 웹 페이지(20)에는 상기 메인 웹 페이지(10)에 게시되는 기사정보를 등록하는 뉴스등록, 수정편집 등 관리를 위한 뉴스관리, 댓글 등록관리 등이 가능한 웹 페이지로의 링크를 제공하여 뉴스정보관리DB(36)의 정보를 등록 관리하도록 하는 "뉴스관리" 인터페이스를 포함한다. 상기 "뉴스관리"인터페이스를 통하여 링크되는 게시되는 기사정보를 등록하는 뉴스등록, 뉴스정보의 수정편집 등 뉴스관리를 위한 뉴스관리를 위한 웹 페이지는 PC 기반의 브라우저에서 멀티미디어 컨텐츠를 포함하는 사용자 인터페이스는 기사정보를 구성하는 텍스트 및 이미지의 입력 및 편집이 가능한 기사정보 입력 에디터로 구성되며, 상기 에디터에는 입력되는 기사정보에 포함된 멀티미디어 컨텐츠가 사진 이미지 인지 동영상 이미지 인지를 선택하는 멀티미디어 선택영역, 상기 기사정보가 게시될 섹션을 선택하는 섹션 선택영역, 상기 기사정보의 타이틀을 입력하는 타이틀 입력영역, 상기 기사정보에 포함될 멀티미디어 컨텐츠를 선택하는 멀티미디어 선택영역을 포함한다.

또한, 관리자 웹 페이지(20)에는 각 회원을 부관리자, 일반기자, 명예기자, 정기구독자 등으로 구분하여 회원의 아이디/비번 및 뉴스 게시 시스템에서의 사용자의 권한을 등록관리하고 회원신청, 회원서비스 등을 등록 관리하는 웹 페이지로의 링크를 제공하여 회원관리DB (35)의 정보를 등록 관리하도록 하는 "회원관리"인터페이스, 메인 웹 페이지(10)상의 팝업관리, 배너관리, 카테고리관리, 메뉴설정 등을 관리하는 웹 페이지로의 링크를 제공하여 관련된 웹 설정관리DB(34)의 정보를 등록관리하도록 하는 메인 웹 페이지의 "기본관리" 인터페이스, 고객센터관리, 제휴문의 관리, 게시판생성관리, 게시판관리, 공지사항관리, 신문사소개 등 기타 운영에 필요한 정보의 등록 관리를 위한 웹 페이지로의 링크를 제공하여 운영관리DB(37)의 정보를 등록관리하는 "운영관리"인터페이스 등을 포함하며, 본 발명과 관련하여, 모바일 기기를 통한 뉴스 등록 웹 페이지(21)로의 링크를 제공하는 별도의 "모바일 속보 등록"인터페이스를 포함하고 있다.

뉴스 등록 웹 페이지(21)는 상기 관리자 웹 페이지 상에서 "모바일 속보 등록"인터페이스를 통해 링크되며, 기사정보 입력을 위한 사용자 인터페이스를 포함하고 상기 사용자 인터페이스를 통해 기사정보를 입력받는 사용자인터페이스가 구성된다.

도 3a 및 도 3b를 참조하면, 뉴스 등록 웹 페이지(21)의 사용자인터페이스는 기사정보를 구성하는 텍스트 및 이미지의 입력 및 편집이 가능한 기사정보 입력 에디터로 구성된다.

상기 에디터에는 입력되는 기사정보에 포함된 멀티미디어 컨텐츠가 사진 이미지 인지 동영상 이미지 인지를 선택하는 멀티미디어 선택영역(21a 상단), 상기 기사정보가 게시될 섹션을 선택하는 섹션 선택영역(21a 하단), 상기 기사정보의 타이틀을 입력하는 타이틀 입력영역(21b 상단), 멀티미디어 컨텐츠를 포함하는 기사정보를 작성 편집할 수 있는 에디터 영역(21b 하단)을 포함하고, 상기 에디터 영역에는 기사정보에 포함될 멀티미디어 컨텐츠를 선택하여 편집할 수 있는 멀티미디어 등록/선택 웹페이지로의 링크를 제공하는 멀티미디어 선택 인터페이스를 포함한다. 이를 통하여 반응형 뉴스 웹 서비스 시스템을 이용한 실시간 뉴스정보 게시방법이 수행되며, 이에 대하여는 실시간 뉴스정보 게시방법의 실시예와 관련하여 상세히 설명한다.

뉴스 관리 웹서버(30)는 상술한 바와 같이 메인 웹페이지 처리부(31), 관리자 웹페이지 처리부(32), 뉴스등록 웹페이지 처리부(33), 웹 설정관리DB(34), 회원관리DB (35), 뉴스정보관리DB(36), 운영관리DB(37)을 포함하여 구성되어, 상기 메인 웹페이지(10), 관리자 웹 페이지(20), 뉴스 등록 웹 페이지(21)를 저장하고, 사용 단말의 요청에 따라, 상기 메인 웹페이지, 관리자 웹 페이지, 및 뉴스 등록 웹 페이지 문서를 사용자 달말에 제공하여 디스플레이 되도록 하고, 멀티미디어 컨텐츠 포함하는 기사정보를 저장하여 관리한다.

구체적으로, 웹 설정관리DB(34)에는 뉴스 관리 웹서버(30)에서 제공하는 웹 페이지의 문서와 각 웹 페이지의 설정정보가 저장되며, 메인 웹 페이지의 설정정보는 "기본관리" 인터페이스를 통해 운영자에 의해 저장된 정보가 관리된다

회원관리DB (35)에는 각 회원의 정보가 각 회원을 부관리자, 일반기자, 명예기자, 정기구독자 등으로 구분되어 회원의 아이디/비번 및 뉴스 게시 시스템에서의 사용자의 권한 등으로 분류되어 저장되며, "회원관리"인터페이스를 통해 운영자에 의해 저장된 정보가 관리된다.

뉴스정보관리DB(36)에는 메인 웹 페이지(10)에 게시되는 기사정보가 저장되며 뉴스정보의 등록 수정편집 등 관리는 운영자 및 실시간 기사의 업로드 권한을 가진 회원 예컨대 기자에 의하여 정보가 관리된다.

운영관리DB(37)에는 고객센터관리, 제휴문의 관리, 게시판생성관리, 게시판관리, 공지사항관리, 신문사소개 등 기타 운영에 필요한 정보가 저장되어 관리되며, "운영관리"인터페이스를 통하여 운영자에 의하여 정보가 관리된다.

메인 웹페이지 처리부(31)는 웹 설정관리DB(34)에 저장된 메인 웹페이지의 웹 페이지의 설정정보를 기초로 상기 사용자 단말 내지 브라우저로부터의 명령 또는 요청을 수신하고 상기 명령 또는 요청에 따라 저장된 웹 페이지 및 뉴스정보관리DB(36)에 저장된 멀티미디어 컨텐츠를 포함하는 기사정보를 전송하며, 특히 본 발명에 있어서, 상기 사용자 단말로부터 상기 사용자 단말 내지 브라우저의 뷰포트의 크기 즉, 픽셀 정보를 수신하여, 뷰포트의 폭과 넓이를 계산하여 상기 변경된 레이아웃 및 크기의 메인 웹 페이지 및 이에 표시된 섹션창에 디스플레이되는 멀티미디어 컨텐츠의 크기를 변경하여 사용자 단말로 전송함으로써, 상기 브라우저의 크기에 따라 웹 페이지의 레이아웃 및 상기 레이아웃을 구성하는 섹션창의 크기가 변환되어 디스플레이되도록 한다.

관리자 웹페이지 처리부(32)는 웹 설정관리DB(34)에 저장된 관리자 웹페이지의 웹 페이지의 설정정보를 기초로 상기 사용자 단말 내지 브라우저로부터의 명령 또는 요청을 수신하고 상기 명령 또는 요청에 따라 저장된 관리자 웹페이지 문서를 전송하고, 관리자 웹페이지의 각 인터페이스를 통하여 입력되는 정보를 해당 데이터베이스에 저장 또는 저장된 정보를 업데이트한다.

뉴스등록 웹페이지 처리부(33)는 웹 설정관리DB(34)에 저장된 관리자 웹페이지의 웹 페이지의 설정정보를 기초로 상기 사용자 단말 내지 브라우저로부터의 명령 또는 요청을 수신하고 상기 명령 또는 요청에 따라 저장된 뉴스등록 웹페이지 문서를 전송하고, 뉴스등록 웹페이지를 구성하는 기사정보 입력 에디터를 통해 입력되는 멀티미디어 컨텐츠가 포함된 기사정보를 뉴스정보관리DB(36)에 저장하고 사용자 설정에 따라 실시간으로 메인 웹 페이지에 게시되도록 한다.

나아가, 뉴스등록 웹페이지 처리부(33)는 기사정보 입력을 위한 사용자 단말에 촬영수단이 장착되었는지 여부를 검출하여, 상기 사용자 단말에 촬영수단이 장착된 경우 상기 촬영수단에 대한 사용자의 선택을 입력받고 사용자의 선택에 의하여 상기 촬영수단을 구동시키는 어플리케이션을 호출하여 상기 어플리케이션의 구동에 따라 촬영된 멀티미디어를 상기 기사정보에 포함시킨다.

또한, 뉴스등록 웹페이지 처리부(33)는 사용자 단말이 PC 인지 모바일 기기인지를 판단하여 PC용 뉴스 등록 웹 페이지와 모바일 기기용 뉴스 등록 웹 페이지 중 하나를 사용자 달말에 제공하여 디스플레이 되도록 구성될 수도 있다.

이하 도면을 참조하여, 본 발명의 반응형 뉴스 웹 서비스 시스템을 이용한 실시간 뉴스정보 게시방법을 상기 뉴스 등록 웹 페이지(21)의 사용자인터페이스를 통한 실시간 뉴스정보 게시방법을 통해 상세히 설명한다.

도 3a 내지 도 3b는 본 발명의 일실시예에 따른 기사등록 웹 페이지의 구성 및 기사등록과정을 설명하기 위한 도면, 도 4는 본 발명의 반응형 뉴스 웹 서비스 시스템을 이용한 실시간 뉴스정보 게시방법의 흐름도, 도 5는 본 발명의 반응형 뉴스 웹 서비스 시스템을 이용한 실시간 뉴스정보 게시방법의 일 실시예의 기사정보 수신/저장 단계의 멀티미디어 등록/선택 웹페이지를 통한 멀티미디어 등록/선택과정의 세부 흐름도이다.

도 4를 참조하면, 본 발명의 본 발명의 반응형 뉴스 웹 서비스 시스템을 이용한 실시간 뉴스정보 게시방법은, 상술한 뉴스 게시 메인 웹페이지를 통해 멀티미디어 컨텐츠 포함하는 기사정보를 게시하며, 기사정보가 디스플레이되어 게시되는 사용자 단말 및 이에 사용되는 브라우저에 따라 상기 뉴스 게시 메인 웹페이지의 레이아웃을 변경하는 반응형 뉴스 웹 서비스 시스템을 이용한 실시간 기사정보 게시방법으로, 관리자 웹 페이지 문서 전송 단계(S100), 뉴스 등록 웹페이지 문서 전송 단계(S200), 기사정보 수신/저장 단계(S300), 기사정보 전송/게시 단계(S400)의 일련의 과정을 통해 상술한 바와 같은 반응형 뉴스 웹 서비스 시스템 별도의 어플리케이션을 사용하지 않고 직접 멀티미디어 컨텐츠를 포함하는 기사정보 실시간으로 게시할 수 있게 된다.

관리자 웹 페이지 문서 전송 단계(S100)는 뉴스 웹 서비스 시스템에 접속한 사용자를 인증하고 사용자의 선택에 따라 상기 사용자 단말에 관리자 웹 페이지 문서를 전송하여 표시되도록 한다.

뉴스 등록 웹페이지 문서 전송 단계(S200)는 상기 사용자 단말에 표시된 관리자 웹 페이지 상에서의 사용자의 뉴스 등록 웹페이지에 대한 선택입력을 수신하여 상기 사용자 단말에 멀티미디어 컨텐츠 포함하는 기사정보의 입력을 위한 기사정보 입력 에디터로 구성되는 뉴스 등록 웹 페이지 문서를 전송한다. 상술한 관리자 웹페이지 처리부(32)에 의하여 수행된다.

이 경우 사용자 요청에 따라, 뉴스관리 웹 서버는 사용자 단말이 PC 인지 모바일 기기인지를 판단하여 PC용 뉴스 등록 웹 페이지와 모바일 기기용 뉴스 등록 웹 페이지 중 하나를 사용자 달말에 제공하여 디스플레이 되도록 할 수도 있다.

기사정보 수신/저장 단계(S300)는 상기 뉴스 등록 웹 페이지 문서를 구성하는 기사정보 입력 에디터를 통해 멀티미디어 컨텐츠 포함하는 기사정보를 수신하여 뉴스정보관리DB에 저장하며, 상술한 뉴스등록 웹페이지 처리부(33)에 의하여 수행된다.

기사정보 수신/저장 단계(S300)의 구체적인 실시예와 관련하여 도 3a 및 도 3b를 참조하면, 휴대형 사용자 단말(40)에서 뉴스등록 웹페이지(21)의 전송 요청이 수신되면, 이에 응답하여 에디터 형태의 뉴스등록 웹페이지(21)를 휴대형 사용자 단말(40)에 제공하여, 디스플레이도록 하고, 상기 에디터를 통하여, 입력되는 기사정보에 포함된 멀티미디어 컨텐츠가 사진 이미지 인지 동영상 이미지 인지의 선택입력, 상기 기사정보가 게시될 섹션의 선택입력, 상기 기사정보의 타이틀 정보와 에디터 영역을 통해 멀티미디어 컨텐츠를 포함하는 기사정보를 차례로 수신한다.

상기 기사정보 입력 에디터를 통하여 입력되는 기사정보에 포함될 멀티미디어 컨텐츠가 사진 이미지 인지 동영상 이미지 인지의 선택입력, 상기 기사정보가 게시될 섹션의 선택입력, 상기 기사정보의 타이틀 정보는 에디터 상에서 편집작성되는 기사정보와 연관되어 뉴스정보관리DB에 저장된다.

한편, 기사정보 수신/저장 단계(S300)는 멀티미디어 등록/선택 웹페이지를 통한 멀티미디어 등록/선택과정을 포함하여 수행되며, 상기 에디터 영역의 기사정보에 포함될 멀티미디어 컨텐츠를 선택하여 편집할 수 있는 멀티미디어 등록/선택 웹페이지로부터 입력된 사진, 동영상 정보는 1차적으로 상기 에디터 영역(21b)에 디스플레이되고 에디터 영역에서 작성편집되는 텍스트 정보와 결합되어 기사정보를 구성하게 된다.

멀티미디어 등록/선택 웹페이지를 통한 멀티미디어 등록/선택과정을 도 5를 참조하여 보다 상세히 설명한다.

도 5를 참조하면, 도 3a에서와 같이, 에디터 영역(21b) 상단 메뉴바의 멀티미디어 등록/선택 웹페이지로의 링크를 제공하는 멀티미디어 선택 인터페이스를 통하여 사용자의 멀티미디어 등록/선택 웹페이지에 대한 선택 입력이 수신되면, 사용자 단말(40)은 반응형 뉴스 웹 서비스 시스템의 뉴스 관리 웹서버에 상기 웹 페이지에 대한 요청을 전송한다.

이에 따라 뉴스등록 웹페이지 처리부(33)에서는 일련의 멀티미디어 등록/편집 페이지 문서 전송 단계(S310), 멀티미디어 입력 어플리케이션 검색/표시 제어단계(S320), 멀티미디어 입력 어플리케이션 기능 활성화 제어단계(S330), 기사정보 생성/저장 단계(S340)을 수행한다.

뉴스등록 웹페이지 처리부(33)와 사용자 단말간의 구체적인 과정으로 설명하면, 멀티미디어 등록/편집 페이지 문서 전송 단계(S310)에서 상기 요청을 수신한 뉴스등록 웹페이지 처리부(33)는 상기 사용자의 선택입력을 수신하여, 멀티미디어 등록/편집 페이지 문서를 사용자 단말로 전송한다.

이를 수신한 사용자 단말(40)은 수신한 멀티미디어 등록/편집 페이지 문서를 도 3b의 첫번째 도면과 같이 표시(S311)하고, 상기 멀티미디어 등록/편집 페이지 상에서의 사용자의 선택입력에 따라 사용자의 멀티미디어 입력 어플리케이션 검색 입력을 수신(S312)하여, 이를 뉴스등록 웹페이지 처리부(33)에 전송한다.

이에 따라 뉴스등록 웹페이지 처리부(33)는 멀티미디어 입력 어플리케이션 검색/표시 제어단계(S320)에서, 상기 사용자 단말의 멀티미디어 입력 어플리케이션을 검색하여 검색결과를 전송하여 상기 사용자 단말에서 도 3b의 상단 우측화면과 같이 검색결과를 표시(S321)하도록 하여, 상기 사용자 단말에서 사용자가 사용하고자 하는 멀티미디어 입력 어플리케이션을 선택하도록 하고, 선택된 어플리케이션에 대한 선택입력을 수신하여, 상기 선택입력을 뉴스등록 웹페이지 처리부(33)에 전송한다. 이를 위하여, 상기 뉴스등록 웹페이지 처리부(33)는 기사정보 입력을 위한 사용자 단말에 촬영수단이 장착되었는지 여부 및 이를 구동시키기를 위한 어플리케이션을 검출하는 기능을 갖는다.

뉴스등록 웹페이지 처리부(33)는 입력 어플리케이션 기능 활성화 제어단계(S330)에서 사용자의 어플리케이션 선택입력을 수신하여, 상기 표시된 사용자 단말에 표시된 멀티미디어 입력 어플리케이션 중 사용자가 선택한 멀티미디어 입력 어플리케이션의 기능을 활성화하도록 사용자 단말의 멀티미디어 입력 어플리케이션의 제어 명령을 사용자 단말로 전송한다.

상기 제어명령을 수신한 사용자 단말(40)은 선택된 멀티미디어 입력 어플리케이션을 활성화시켜 이를 통해 사용자 멀티미디어를 입력받는다(S331).

도 3b의 경우 사용자가 사용자 단말에 설치된 카메라를 선택한 경우로서 카메라 어플리케이션이 선택되어 그 기능이 활성화되고, 사용자의 촬영에 따라 상기 카메라를 통하여 촬영된 영상을 멀티미디어 데이터로서 입력받아 뉴스등록 웹페이지 처리부(33)로 전송한다.

위 과정은 [표4] 의 실제 소스코드 및 함수를 포함하여 구현될 수 있다. 위 소스에서는 사용자 기기의 카메라 어플리케이션을 활성화하여 촬영된 이미지 또는 갤러리 어플리케이션을 활성화하여 사용자 기기의 사진을 불러와 저장하여 에디터 이미지 리스트에 쓰는 방식으로 구현된 것이다.

case 'remote':
remoteImage = remoteImage || new RemoteImage();
break;
case 'upload': // 디바이스 이미지파일, 혹은 카메라 찾기함수
setAlign(editor.getOpt('imageInsertAlign'));
uploadImage = uploadImage || new UploadImage('queueList');
break;
switch (id) {
case 'remote':
list = remoteImage.getInsertList();
break;
case 'upload': // 찾은 이미지파일 리스트를 에디터에 불러오기
list = uploadImage.getInsertList();
var count = uploadImage.getQueueCount();
if (count) {
$('.info', '#queueList').html('' + '아직 2개의 파일이 업로드되지 않았습니다'.replace(/[\d]/, count) + '');"
return false;
}
break;
initContainer: function () { // 이미지 파일 속성 불러오기
this.dom = {
'url': $G('url'), // 이미지 파일 주소
'width': $G('width'), // 이미지 파일 넓이
'height': $G('height'), // 이미지 파일 높이
'border': $G('border'), // 이미지 파일 보더
'title': $G('title'), // 이미지 파일 제목
'content': $G('content'), // 이미지 파일 설명
'align': $G('align') // 이미지 파일 정렬

상기 멀티미디어 데이터를 수신한 뉴스등록 웹페이지 처리부(33)는 기사정보 생성/저장 단계(340)에서, 수신된 멀티미디어 데이터를 저장하고 상기 기사정보 입력 에디터상에 표시되도록 사용자 단말에 제어명령을 전송하고(S332), 이에 따라 사용자 단말(40)은 에디터에 상기 멀티미디어 데이터를 표시하여 이를 통하여 입력/편집되는 텍스트 데이터와 멀티미디어 데이터를 연관시켜 멀티미디어 컨텐츠를 포함하는 기사정보를 생성하여(S333), 사용자의 선택에 의하여 상기 생성된 멀티미디어를 포함한 기사정보를 뉴스등록 웹페이지 처리부(33)에 전송하고,뉴스등록 웹페이지 처리부(33)는 수신한 기사정보를 뉴스정보관리 DB에 저장한다.

[표5] 및 [표6]는 서로 연결된 하나의 소스 코드로 위 과정은 이와 같은 실제 소스코드 및 함수를 포함하여 구현될 수 있다. 모든 작업을 끝 마친 후 (리턴값이 ture 로 되여야만) 이미지가 에디터에 표시된다.

//사진업로드함수
function UploadImage(target) {
....

//사진 리스트 생성함수
function addFile(file) {
var $li = $('<li id="' + file.id + '">' +
'' + file.name + '' +
'' +
'워터마크 사용 <input type="checkbox" name="check" id="checkbox'+file.id+'"/>' +
'</li>'),

$btns = $('<div class="file-panel">' +
'' + lang.uploadDelete + '' +
'' + lang.uploadTurnRight + '' +
' + lang.uploadTurnLeft
+ '</div>').appendTo($li),
$prgress = $li.find('p.progress span'),
$wrap = $li.find('p.imgWrap'),
$info = $('').hide().appendTo($li),
.....
function setState(val, files) {
if (val != state) {
var stats = uploader.getStats(); // 이미지 파일 업로드 시작함수
$upload.addClass('state-' + val); // 이미지 추가함수
switch (val) { // 이미지 파일 추가시 체크함수

/* 이미지파일을 선택하지 않은경우 */
case 'pedding':
$queue.addClass('element-invisible');
$statusBar.addClass('element-invisible');
$placeHolder.removeClass('element-invisible');
$progress.hide(); $info.hide();
uploader.refresh();
break;
/* 사진 업로드전 체크완료 */
case 'ready':
case 'ready':
$queue.removeClass('element-invisible');
$statusBar.removeClass('element-invisible');
$progress.hide(); $info.show();
$upload.text(lang.uploadStart);
uploader.refresh();
break;

/* 사진 업로드 중 */
case 'uploading':
$progress.show(); $info.hide();
$upload.text(lang.uploadPause);
break;

/* 업로드작업 정지하였을 경우 */
case 'paused':
$progress.show(); $info.hide();
$upload.text(lang.uploadContinue);
break;

/* 업로드작업 완료 */
case 'finish':
$progress.hide(); $info.show();
if (stats.uploadFailNum) {
$upload.text(lang.uploadRetry);
} else {
$upload.text(lang.uploadStart);
}
break;
}
state = val;
updateStatus(); // 업로드 상태을 업데이트 한다
}
if (opt.length == 1) { // 업로드된 이미지를 javascript로 에디터 에 뿌려준다
var style = '';
str = '<figure style="max-width:'+ci.width+'px; margin:0">
<img src="' + ci.src + '" ' + (ci._src ? ' _src="' + ci._src + '" ' : '') +
(ci.width ? 'width="' + ci.width + 'px" ' : '') +
(ci.height ? ' height="' + ci.height + '" ' : '') +
(ci['floatStyle'] == 'left' || ci['floatStyle'] == 'right' ? '
style="float:' + ci['floatStyle'] + ';"' : '') +
(ci.title && ci.title != "" ? ' title="' + ci.title + '"' : '') +
(content && content != "" ? ' content="' + content + '"' : '') +
(ci.border && ci.border != "0" ? ' border="' + ci.border + '"' : '') +
(ci.alt && ci.alt != "" ? ' alt="' + ci.alt + '"' : '') +
(ci.hspace && ci.hspace != "0" ? ' hspace = "' + ci.hspace + '"' : '') +
(ci.vspace && ci.vspace != "0" ? ' vspace = "' + ci.vspace + '"' : '') + '/></figure>';
if (ci['floatStyle'] == 'center') {
str = '<figure style"text-align: center">' + str + '';
}

html.push(str); // 에디터에 뿌려주는 함수

기사정보 전송/게시 단계(S400)는 상기 저장된 멀티미디어 컨텐츠를 포함하는 기사정보를 지정된 섹션에 게시되도록 뉴스 게시 메인 웹페이지에 전송하며, 상술한 메인 웹페이지 처리부(31)에 의하여 수행된다.

이때, 메인 웹페이지 처리부(31)는 상기 뉴스 게시 메인 웹페이지가 표시되는 사용자 단말의 화면의 크기 및 브라우저의 크기에 따라 웹 페이지의 레이아웃 및 상기 레이아웃을 구성하는 섹션 창의 크기를 변환하고 이에 디스플레이되기 적합한 형태로 멀티미디어 컨텐츠를 포함하는 기사정보에 포함된 이미지, 동영상, 텍스트를 조정하여 상기 변환된 뉴스 게시 메인 웹페이지의 각 섹션 창에 디스플레이되도록 한다.

본 발명은 특정 기능들 및 그의 관계들의 성능을 나타내는 방법 단계들의 목적을 가지고 위에서 설명되었다. 이러한 기능적 구성 요소들 및 방법 단계들의 경계들 및 순서는 설명의 편의를 위해 여기에서 임의로 정의되었다. 상기 특정 기능들 및 관계들이 적절히 수행되는 한 대안적인 경계들 및 순서들이 정의될 수 있다. 임의의 그러한 대안적인 경계들 및 순서들은 그러므로 상기 청구된 발명의 범위 및 사상 내에 있다. 추가로, 이러한 기능적 구성 요소들의 경계들은 설명의 편의를 위해 임의로 정의되었다. 어떠한 중요한 기능들이 적절히 수행되는 한 대안적인 경계들이 정의될 수 있다. 마찬가지로, 흐름도 블록들은 또한 어떠한 중요한 기능성을 나타내기 위해 여기에서 임의로 정의되었을 수 있다. 확장된 사용을 위해, 상기 흐름도 블록 경계들 및 순서는 정의되었을 수 있으며 여전히 어떠한 중요한 기능을 수행한다. 기능적 구성 요소들 및 흐름도 블록들 및 순서들 둘 다의 대안적인 정의들은 그러므로 청구된 본 발명의 범위 및 사상 내에 있다.

본 발명은 또한 하나 이상의 실시 예들의 용어로, 적어도 부분적으로 설명되었을 수 있다. 본 발명의 실시 예는 본 발명, 그 측면, 그 특징, 그 개념, 및/또는 그 예를 나타내기 위해 여기에서 사용된다. 본 발명을 구현하는 장치, 제조의 물건, 머신, 및/또는 프로세스의 물리적인 실시 예는 여기에 설명된 하나 이상의 실시 예들을 참조하여 설명된 하나 이상의 측면들, 특징들, 개념들, 예들 등을 포함할 수 있다. 더구나, 전체 도면에서, 실시 예들은 상기 동일한 또는 상이한 참조 번호들을 사용할 수 있는 상기 동일하게 또는 유사하게 명명된 기능들, 단계들, 모듈들 등을 통합할 수 있으며, 그와 같이, 상기 기능들, 단계들, 모듈들 등은 상기 동일한 또는 유사한 기능들, 단계들, 모듈들 등 또는 다른 것들일 수 있다.

이상과 같이 본 발명에서는 구체적인 구성 요소 등과 같은 특정 사항들과 한정된 실시 예 및 도면에 의해 설명되었으나 이는 본 발명의 보다 전반적인 이해를 돕기 위해서 제공된 것일 뿐, 본 발명은 상기의 실시 예에 한정되는 것은 아니며, 본 발명이 속하는 분야에서 통상적인 지식을 가진 자라면 이러한 기재로부터 다양한 수정 및 변형이 가능하다.

따라서, 본 발명의 사상은 설명된 실시 예에 국한되어 정해져서는 아니되며, 후술하는 특허청구범위뿐 아니라 이 특허청구범위와 균등하거나 등가적 변형이 있는 모든 것들은 본 발명 사상의 범주에 속한다고 할 것이다.

10 : 메인 웹페이지 20: 관리자 웹페이지
30: 뉴스 관리 웹서버 31: 메인 웹페이지 처리부
32: 관리자 웹페이지 처리부 33: 뉴스등록 웹페이지 처리부
34: 웹설정관리DB 35: 회원관리DB
36:뉴스정보관리DB 37:운영관리DB
40: 사용자 단말

Claims

멀티미디어 컨텐츠 포함하는 기사정보를 게시하며, 기사정보가 디스플레이되어 게시되는 사용자 단말 및 이에 사용되는 브라우저에 따라 레이아웃을 변경하는 반응형 뉴스 웹 서비스 시스템에 있어서,
멀티미디어 컨텐츠를 포함하는 기사정보를 복수의 섹션으로 분류하여 게시하며, 상기 브라우저의 크기에 따라 웹 페이지의 레이아웃 및 상기 레이아웃을 구성하는 섹션창의 크기가 변환되는 뉴스 게시 메인 웹페이지(10);
상기 메인 웹 페이지에 링크되어, 상기 뉴스의 등록을 관리하는 관리자 웹 페이지(20);
상기 관리자 웹 페이지 상에서 링크되며, 기사정보 입력을 위한 사용자 인터페이스를 포함하고 상기 사용자 인터페이스를 통해 기사정보를 입력받는 뉴스 등록 웹 페이지(21);
및 상기 메인 웹페이지, 관리자 웹 페이지, 뉴스 등록 웹 페이지를 저장하고, 사용 단말의 요청에 따라, 상기 메인 웹페이지, 관리자 웹 페이지, 및 뉴스 등록 웹 페이지 문서를 사용자 달말에 제공하여 디스플레이 되도록 하고, 멀티미디어 컨텐츠 포함하는 기사정보를 저장하여 관리는 뉴스관리 웹 서버(30);를 포함하여,
상기 뉴스 등록 웹페이지로부터 전송되는 기사정보는 상기 웹 서버를 통해 실시간으로 상기 메인 웹페이지에 전송되어 디스플레이되는 것을 특징으로 하는 반응형 뉴스 웹 서비스 시스템.
제1항에 있어서, 상기 뉴스 등록 웹페이지(21)의 사용자 인터페이스는 기사정보를 구성하는 텍스트 및 이미지의 입력 및 편집이 가능한 기사정보 입력 에디터로 구성되는 것을 특징으로 하는 반응형 뉴스 웹 서비스 시스템.
제2항에 있어서, 상기 기사정보 입력 에디터에는 입력되는 기사정보에 포함된 멀티미디어 컨텐츠가 사진 이미지 인지 동영상 이미지 인지를 선택하는 멀티미디어 선택영역, 상기 기사정보가 게시될 섹션을 선택하는 섹션 선택영역, 상기 기사정보의 타이틀을 입력하는 타이틀 입력영역, 멀티미디어 컨텐츠를 포함하는 기사정보를 작성 편집할 수 있는 에디터 영역을 포함하고, 상기 에디터 영역에는 기사정보에 포함될 멀티미디어 컨텐츠를 선택하여 편집할 수 있는 멀티미디어 등록/선택 웹페이지로의 링크를 제공하는 멀티미디어 선택 인터페이스를 포함하여 구성되는 것을 특징으로 하는 반응형 뉴스 웹 서비스 시스템.
제3항에 있어서, 뉴스관리 웹 서버(30)는 뉴스등록 웹페이지 처리부(33)를 포함하여, 상기 뉴스등록 웹페이지 처리부(33)는, 상기 멀티미디어 등록/선택 웹페이지를 통하여 입력되어 사용자 단말에서 전송되는 멀티미디어 데이터를 저장하고 상기 기사정보 입력 에디터의 에디터 영역에 표시되도록 상기 사용자 단말에 제어 명령을 전송하는 것을 특징으로 하는 반응형 뉴스 웹 서비스 시스템.
제4항에 있어서, 사용자 단말(40)은 상기 제어 명령을 수신하면 에디터 영역에 상기 멀티미디어 데이터를 표시하고 이를 통하여 입력/편집되는 텍스트 데이터와 멀티미디어 데이터를 연관시켜 멀티미디어 컨텐츠를 포함하는 기사정보를 생성하는 것을 특징으로 하는 반응형 뉴스 웹 서비스 시스템.
제4항에 있어서,
상기 뉴스등록 웹페이지 처리부(33)는 기사정보 입력을 위한 사용자 단말에 촬영수단이 장착되었는지 여부를 검출하여, 상기 사용자 단말에 촬영수단이 장착된 경우 상기 촬영수단에 대한 사용자의 선택을 입력받고 사용자의 선택에 의하여 상기 촬영수단을 구동시키는 어플리케이션을 호출하여 상기 어플리케이션의 구동에 따라 촬영된 멀티미디어를 상기 기사정보에 포함시키는 것을 특징으로 하는 반응형 뉴스 웹 서비스 시스템.
제6항에 있어서,
사용자의 상기 멀티미디어 선택영역의 선택입력에 따라, 상기 촬영수단이 검출되고 사용자의 선택입력에 따라 촬영수단의 구동이 개시되는 것을 특징으로 하는 반응형 뉴스 웹 서비스 시스템.
제1항에 있어서, 상기 뉴스 등록 웹페이지는 PC용 뉴스 등록 웹 페이지와 모바일 기기용 뉴스 등록 웹 페이지로 구분되며, 사용자 요청에 따라, 뉴스관리 웹 서버는 사용자 단말이 PC 인지 모바일 기기인지를 판단하여 PC용 뉴스 등록 웹 페이지와 모바일 기기용 뉴스 등록 웹 페이지 중 하나를 사용자 달말에 제공하여 디스플레이 되도록 하는 것을 특징으로 하는 반응형 뉴스 웹 서비스 시스템.
뉴스 게시 메인 웹페이지를 통해 멀티미디어 컨텐츠 포함하는 기사정보를 게시하며, 기사정보가 디스플레이되어 게시되는 사용자 단말 및 이에 사용되는 브라우저에 따라 상기 뉴스 게시 메인 웹페이지의 레이아웃을 변경하는 반응형 뉴스 웹 서비스 시스템을 이용한 실시간 기사정보 게시방법에 있어서,
상기 뉴스 웹 서비스 시스템에 접속한 사용자를 인증하고 사용자의 선택에 따라 상기 사용자 단말에 관리자 웹 페이지 문서를 전송하여 표시되도록 하는 관리자 웹 페이지 문서 전송 단계;
상기 사용자 단말에 표시된 관리자 웹 페이지 상에서의 사용자의 뉴스 등록 웹페이지에 대한 선택입력을 수신하여 상기 사용자 단말에 멀티미디어 컨텐츠 포함하는 기사정보의 입력을 위한 기사정보 입력 에디터로 구성되는 뉴스 등록 웹 페이지 문서를 전송하는 뉴스 등록 웹페이지 문서 전송 단계:
상기 뉴스 등록 웹 페이지 문서를 구성하는 기사정보 입력 에디터를 통해 멀티미디어 컨텐츠 포함하는 기사정보를 수신하여 뉴스정보관리 DB에 저장하는 기사정보 수신/저장 단계;
상기 저장된 멀티미디어 컨텐츠를 포함하는 기사정보를 지정된 섹션에 게시되도록 뉴스 게시 메인 웹페이지에 전송하는 기사정보 전송/게시 단계; 를 포함하는 것을 특징으로 하는 반응형 뉴스 웹 서비스 시스템을 이용한 실시간 기사정보 게시방법.
제9항에 있어서, 상기 기사정보 전송/게시 단계는,
상기 뉴스 게시 메인 웹페이지가 표시되는 사용자 단말의 화면의 크기 및 브라우저의 크기에 따라 웹 페이지의 레이아웃 및 상기 레이아웃을 구성하는 섹션 창의 크기를 변환하여 전송하는 것을 특징으로 하는 반응형 뉴스 웹 서비스 시스템을 이용한 실시간 기사정보 게시방법.
제9항에 있어서, 상기 기사정보 수신/저장 단계는,
상기 기사정보 입력 에디터 상에서의 사용자의 선택입력을 수신하여, 멀티미디어 등록/편집 페이지 문서를 사용자 단말로 전송하는 멀티미디어 등록/편집 페이지 문서 전송 단계;
상기 멀티미디어 등록/편집 페이지 상에서의 사용자의 입력을 수신하여, 상기 사용자 단말의 멀티미디어 입력 어플리케이션을 검색하여 검색결과를 표시하도록 하는 멀티미디어 입력 어플리케이션 검색/표시 제어단계;
사용자 단말에 표시된 멀티미디어 입력 어플리케이션 중 사용자가 선택한 어플리케이션의 기능을 활성화하는 멀티미디어 입력 어플리케이션 기능 활성화 제어단계;
상기 활성화된 멀티미디어 입력 어플리케이션을 이용하여 사용자 단말로부터 멀티미디어 데이터를 입력받아 저장하고 상기 기사정보 입력 에디터 상에 표시하며 상기 에디터를 통하여 입력되는 텍스트 데이터와 연관하여 기사정보를 생성하며, 사용자의 선택에 의하여 상기 생성된 멀티미디어를 포함한 기사정보를 뉴스정보관리 DB에 저장하는 기사정보 생성/저장 단계; 를 포함하는 것을 특징으로 하는 반응형 뉴스 웹 서비스 시스템을 이용한 실시간 기사정보 게시방법.
제9항에 있어서,
상기 멀티 미디어 입력 어플리케이션은 사용자 단말에 설치된 카메라를 작동시키는 카메라 어플리케이션으로, 사용자의 선택에 의하여 카메라 어플리케이션의 기능이 활성화되고, 상기 카메라를 통하여 촬영된 영상을 멀티미디어 데이터로서 입력받아 저장하고, 상기 기사정보 입력 에디터상에 표시하며 에디터를 통하여 입력되는 뉴스 내용과 연관하여 기사정보를 생성하는 것을 특징으로 하는 반응형 뉴스 웹 서비스 시스템을 이용한 실시간 기사정보 게시방법.
제11항에 있어서,
상기 기사정보 입력 에디터를 통하여, 기사정보에 포함될 멀티미디어 컨텐츠가 사진 이미지 인지 동영상 이미지 인지의 선택입력, 상기 기사정보가 게시될 섹션의 선택입력, 상기 기사정보의 타이틀 정보가 입력되는 것을 특징으로 하는 웹 서비스 시스템을 이용한 실시간 기사정보 게시방법.
제13항에 있어서,
상기 기사정보 입력 에디터를 통하여 입력되는 기사정보에 포함될 멀티미디어 컨텐츠가 사진 이미지 인지 동영상 이미지 인지의 선택입력, 상기 기사정보가 게시될 섹션의 선택입력, 상기 기사정보의 타이틀 정보는 에디터 상에서 편집작성되는 기사정보와 연관되어 저장되는 것을 특징으로 하는 특징으로 하는 웹 서비스 시스템을 이용한 실시간 기사정보 게시방법.
제9항 내지 제14항 중 어느 한 항의 방법을 수행하는 컴퓨터 프로그램이 기록된 기록매체.