메인 콘텐츠로 이동

동부클라우드 오피스 포털 메인에 사용자정의 위젯 만들기

동부클라우드 오피스에 사용자정의 위젯 생성

동부클라우드 오피스의 포털 기능을 이용해 사용자정의 위젯 을 포털 메인화면에 노출시킬 수 있다는 사실을 알고 계신가요? 해당 기능을 사용하면, 인터넷에서 찾거나 직접 개발한 다양한 위젯을 아래와 같은 포털 메인 화면의 우측에 표시함으로써 사용자의 편의성을 높일 수 있습니다.

동부클라우드오피스 포털 메인화면의 우측 위젯 영역
< 포털 메인화면의 우측 widget 영역 >

위젯영역에 새로운 위젯을 추가하기 위해서는 먼저 동부클라우드오피스 관리자 권한의 사용자 아이디로 로그인해야 합니다. 관리자 아이디로 로그인할 때만 메인화면 우측 상단의 톱니바퀴 모양 아이콘을 통해 관리자 메뉴에 접근할 수 있기 때문이죠.

관리자 메뉴 중에서 “위젯관리” 메뉴를 클릭하면 아래 그림과 같이 현재 등록된 위젯목록이 표시됩니다.

포털 관리자 위젯관리 메뉴
< 관리자 위젯관리 메뉴의 위젯목록 >

이제 위의 캡처 화면에는 보이지 않지만 위젯목록 화면의 맨 아래에 있는 [등록] 버튼을 클릭하면 새로운 팝업창에서 사용자정의 위젯을 등록할 수 있습니다.

위젯 등록 팝업화면
< 동부클라우드오피스 위젯등록 팝업화면 >

당연한 얘기지만 사용자정의 위젯을 설정하기 위해선 외부 페이지 또는 HTML/javascript 코드 등의 위젯 컨텐츠가 미리 준비되어 있어야 합니다. 위의 팝업 화면에서 신규 위젯등록을 위한 위젯형식으로는 “외부링크”와 HTML 2가지를 지원하며 “내부링크”는 동부클라우드오피스에서 제공하는 위젯 용도이므로 선택하시면 안 됩니다.

외부링크 위젯형식일 때는 위젯에 해당하는 외부 시스템의 URL을 http:// 문자로 시작하도록 입력해 주시고, HTML 위젯형식일 때는 HTML 항목에 HTML 문법에 맞도록 아래와 같은 컨텐츠를 작성해 주시면 됩니다.

<iframe marginwidth=”0″ marginheight=”0″ frameborder=”0″ width=”270″ scrolling=”no” height=”180″ style=”margin-top: 0;” src=”https://okbfex.kbstar.com/quics?page=C019465&cc=b028364:b031677&bgcol=1&CusBus=0&KorEng=E&widthPx=270″></iframe>

순서는 다른 위젯의 순서값보다 작은 숫자의 위젯이 위쪽에 먼저 보이므로 다른 위젯의 순서 설정값을 참고하여 정수 숫자를 입력해 주세요. 그리고 위젯크기를 설정할 때는 위젯영역 가로크기에 대한 비율을 %로 설정하거나 픽셀(px) 단위로 크기를 설정해야 합니다. 아무래도 가로와 세로 크기를 설정하고 나서 재로그인을 하여 설정된 크기를 확인해 보시길 권장드립니다.(변경된 위젯 설정은 반드시 재로그인을 해야 적용되는 점 유의해 주세요.^^)

이상으로 사용자정의 위젯을 설정하는 방법은 모두 설명드렸고 마지막으로 유용하다고 생각되는 환율정보와 해외뉴스(영어) 위젯을 등록하는 예를 설명 드리겠습니다.

(1) 환율 조회 Widget

  • KB은행의 환율 위젯을 예로 들면 KB은행 외환 사이트에서 조회 신청서를 작성해 제출해야 합니다.
    : 신청서를 작성하려면 KB은행에 로그인해야 하고 적용하려는 사이트 정보를 입력하여 신청한 후 위젯용 HTML 코드를 포털의 위젯관리 메뉴에서 등록해 사용합니다.
  • 조회 신청서 작성 과정 없이 아래의 HTML 코드를 위젯 등록 시 사용해도 됩니다.(가로 폭 232 pixel)<iframe marginwidth=”0″ marginheight=”0″ frameborder=”0″ width=”232″ scrolling=”no” height=”180″ style=”margin-top: 0;” src=”https://okbfex.kbstar.com/quics?page=C019465&cc=b028364:b031677&bgcol=1&CusBus=0&KorEng=E&widthPx=232″></iframe>

(2) 해외 뉴스 Widget

  • FeedWind
    : 먼저 뉴스 내용에 대한 RSS 피드 사이트를 찾아 RSS URL을 정합니다. (Ex. LA Times의 RSS URL은 http://www.latimes.com/rss2.0.xml)
    : FeedWind 홈페이지 화면에서 절차에 따라 RSS URL 입력, 위젯사이즈(가로 폭은 265px), 디스플레이 설정 등을 선택합니다.
    : 화면 우측의 Preview 화면을 살펴가며 스타일을 지정한 후 우하단의 코드(IFrame 코드만 포털에서 정상적으로 작동해요!!)를 Copy합니다.
    : 포털의 위젯관리 메뉴에서 뉴스 위젯을 추가할 때 위젯형식은 “HTML”로 지정하고 Copy한 코드를 붙여넣습니다.
  • FeedGrabbr
    : 마찬가지로 RSS 뉴스 피드 사이트를 찾아 URL을 준비합니다.
    ; FeedGrabbr 홈페이지의 위젯 생성 화면에서 RSS URL을 입력하고, 위젯사이즈(가로 폭은 267px), 디스플레이 설정 등을 선택합니다.
    : Essential Settings 섹션에서 Hosting Domain 항목에 위젯을 추가할 포털의 도메인명을 입력합니다.(Ex. ep-gdemo.dongbuinc.com)
    : 위젯 코드를 Copy한 후 포털의 위젯관리 메뉴에서 위젯을 “HTML” 형식으로 지정하고 코드를 붙여넣습니다.(위젯 높이는 적절히 조절 필요)

이 외에도 인터넷에서 “위젯” 또는 “widget” 등으로 검색하면 공개된 유용한 위젯을 찾을 수 있으며, 이러한 위젯들을 등록하여 편리하게 동부클라우드오피스 포털에서 사용하시기 바랍니다.

동부클라우드오피스에서 제공하는 다양한 서비스가 궁금하신 분은 동부클라우드 홈페이지에 접속해 보시기 바랍니다.

감사합니다.

태그