유연한 테마를 위한 fitVids.js 활용과 단점 보완

fitvids_js

요즘 워드프레스의 Responsive 테마에는 확인해보지 않아 100%라고 말은 못하겠지만 jquery.fitvids.js 라는 파일이 기본적으로 들어가 있는 경우가 많습니다. 이는 jQuery 플러그인으로 비디오를 컨텐츠의 Wrapper에 자동으로 딱 들어맞게 조절해주는 역할을 하기때문에 Responsive 테마에는 필수품이 되어가고 있는 추세입니다.

fitvidsjs.com 을 방문하여 브라우저의 크기를 조절해보세요!

 

보신 것과 같이 비디오 프레임의 크기가 브라우저 크기에 따라 반응하는 것을 볼 수 있습니다.
다운로드는 GITHUB에서 받아보실 수 있는 오픈소스입니다.

이 스크립트 파일을 들여다 보면 정말 간결합니다.
65줄로 이런 것이 가능하다니… jQuery 너무 좋습니다. ^^

하지만 이번 다음뷰 플러그인 개발하면서 한가지 불편한 진실을 알게 되었습니다.
embed를 사용한 플래쉬 추천박스도 같이 커지는 것 입니다. 때마침 gbm43님께서 댓글로 주신 스크린샷을 첨부합니다.

저 공간 어떻게 할꺼니 ㅜㅜ
저 공간 어떻게 할꺼니 ㅜㅜ

이 스크립트는 예외 없이 object, embed된 플래쉬 컨텐츠를 컨텐츠의 가로폭에 맞춰버리는 것입니다.
위의 사진은 뷰버튼을 가로 100%로 키운 것 입니다. 확인해보시려면 공백 부분을 마우스 오른쪽 클릭하시면 바로 알 수 있습니다.
다음과 같은 플래쉬에서만 볼 수 있는 메뉴를 보실 수 있습니다.

daumview_right_click

이를 해결하기 위해 jquery.fitvids.js 파일의 내용을 수정해야합니다.
현재 해당 플러그인이 예외 처리에 대한 항목을 넣어주지 않아 불편하게 처리해야하지만, 추후 예외처리 클래스를 지정해주지 않을까 하는 생각을 합니다.

우선 자신의 Responsive 테마내 jquery.fitvids.js 파일을 찾아 편집모드로 열어야 합니다.
그럼 다음과 같은 소스가 나옵니다.

//적용하지 않을 클래스 추가하기 주석부분을 봐주세요! 그럼 아래와 같은 코드가 있습니다.
저의 경우 qb_not_embeded이란 클래스일 경우 무시하라고 적용했습니다.

이렇게 하면 qb_not_embeded 란 클래스가 적용된 태그안의 embed 태그는 해당 스크립트의 강제 적용을 피해갈 수 있습니다.
추가하고 싶으신 클래스가 있으면 복사하셔서 바로 밑에 추가해주시고 원하시는 클래스로 변경하시면 됩니다.
다음뷰 플러그인의 경우 기본적으로 제가 qb_not_embeded 클래스를 넣어놨으니 위와 같이 적용하시면 피해가실 수 있습니다.

단, 워드프레스 다음뷰 플러그인의 경우 2012년 12월 20일 정오 이전에 1.5버전을 받으신 분은 반드시 삭제하시고 다시 재설치하셔야 하는 점 유의하시기 바랍니다.

 

워드프레스 버전 정보 왜 삭제해야 하는가?

테마 개발을 어떻게 해야 잘했다고 소문이 날까 고민하다 보니 검색을 많이 하게 됩니다.
현재 진행형인 테마도 처음이라 그런지 당췌 어디서부터 손을 대야할 지 좀 막연합니다.
그래서 저와 같은 고충을 느끼시는 분들을 위해 앞으로 워드프레스 개발에 반영되어야 할 내용이다 싶은 것들은  하나하나 정리해 나가보도록 하겠습니다.

그럼, 그 첫번째는 워드프레스 버전 정보 왜 삭제해야 하는가? 입니다.

워드프레스는 기본적으로 워드프레스의 버전 정보를 페이지 코드에 포함하고 있습니다. 이는 특정 버전에서 알려진 취약점을 이용해 공격자들에게 공격을 받을 수도 있다는 이야기 입니다. 근본적으로 피할 수 있는 방법은 아니더라도 최소한 한개의 가능성은 배제할 수 있기에 가급적 이런 부분은 자신의 사이트에도 적용하면 좋지 않을까 싶습니다.

기본적으로 워드프레스의 wp_head() 훅이 호출될때 wp_generator()를 실행하게 됩니다.
여러분 테마의 header.php 파일 안 <head> 섹션에 다음과 같이 마크업되고 있습니다.

meta태그는 wp_head함수 안에 있습니다.
meta태그는 wp_head함수 안에 있습니다.

이것을 브라우저에서 보면 메타태그와 관련된 스크립트, CSS등이 출력되는데 그 중 generator라는 것이 있습니다.

사실 이게 얼마나 보안에 지대한 영향을 미칠까에 대한 이야기들은 많이 있습니다.
분명 논쟁의 여지는 있지만, 워드프레스로 만들어졌고 버전이 몇인지에 대한 정보는 누가봐도  generator 메타 태그로 통해 한눈에 파악할 수 있습니다.

이렇게 될 경우 로봇을 통해 사이트들을 검색하면 10중 팔구 걸리게 되있고 해당 버전에서의 취약점을 알고 있는 해커가 마음만 먹으면 충분히 공격할 가능성이 있다는 것 입니다.  이런 가능성들을 배제하기 위해서는 자신이 사용하는 해당 템플릿에 다음과 같이 코드 작성하시면 끝납니다.

현재 사용하시는 템플릿의 function.php를 편집모드로 열어줍니다.
2가지 방법이 있는데, 다음 아래와 같이 코드를 작성해 넣어주시면 모든 과정은 끝납니다.

첫번째 방법

 

두번째 방법

 

위 방법 2가지 다 동일하게 적용됩니다.
적용후 사이트 소스보기를 이용해 보시면 해당 <meta name=”generator”…가 없어진 것을 알 수 있을 것 입니다.

Qnote All-in-One 사용 방법 및 기능 설명

큐노트 표지 화면

오늘은 Qnote All-in-One (이하 큐노트) 의 간단한 사용 방법 및 장단점에 대한 글을 올려보고자 합니다.

큐노트는 태생부터 철저하게 노트로 태어났습니다. 캘린더 기반의 리마인더가 절대 아닙니다.
이는 어썸노트나 기타 유수의 잘나가는 노트들과의 차별화된 큐노트만의 아이덴티티이며 감히 철학이라고 말씀드리고 싶습니다.

또한 폰을 이용해 노트를 자주 쓰시는 분들께서 큐노트를 만난다는건 행운이라고까지 말씀드리고 싶습니다.
아직 부족한점도 없지는 않지만 현재 1.2.0으로 업데이트되면서 노트다운 노트로써의 자격을 충분히 갖추었다고 생각합니다.

큐노트의 시작은 수많은 노트앱들이 기록을 하면 어디에 기록을 했는지 찾을 수 없다라는 것에서 부터 시작되어 탄생하게 되었습니다.
기존의 노트앱들의 최대 단점인 검색에 포커스를 맞추어 보다 빠르게 노트로 접근할 수 있도록 만들어졌습니다. 뿐만 아니라 24가지 타입의 파일들을 지원해 사용자가 원하는 다양한 컨텐츠를 노트에 담아 보관할 수 있도록 도와드립니다. 기능들이 워낙에 많아서 이곳에 다 담을 수 있을지 걱정입니다. ^^;
간략하게 기능 위주로 핵심만 짚어서 설명드리도록 하겠습니다.

자 그럼, 큐노트가 어떻게 사용되는지 스크린샷을 통해 하나씩 살펴보도록 하겠습니다.

 

1. 메인화면

1-1

 

큐노트의 메인입니다.
사용자가 기록한 노트를 시간순으로 보여주며 하나의 리스트에는 타이틀과 작성일 그리고 그룹 혹은 미디어의 갯수를 표시해서 보여줍니다.
하단에는 동그라미 버튼 2개가 있는데 좌측은 블루투스 or 와이파이 Import를 할 수 있는 버튼이며, 우측의 버튼은 노트를 관리하는 버튼으로 그룹 멀티이동 및 멀티삭제를 지원합니다.

아래는 큐노트 임포트 기능을 이용했을때 나타나는 아이폰과 웹의 임포트 화면들입니다.

 

2. 좌측날개

2-1

우선 제일 첫번째가 좌측 날개의 메인페이지로 노트의 그룹을 출력해주며 그룹은 2가지 성격으로 나눠집니다. 유저가 직접 관리할 수 있는 일반 그룹과 큐노트에서 제공하는 스마트 그룹입니다. 현재 스마트 그룹이 2개뿐이라 좀 아쉽긴 합니다만, 그래도 노트 정리할때는 요긴하게 사용됩니다.

 

환경설정과 백업/복원

bottom_settings

[tabs slidertype=”top tabs”] [tabcontainer] [tabtext]환경설정[/tabtext] [tabtext]백업 및 복원[/tabtext] [/tabcontainer] [tabcontent] [tab]

2-9

  1. 이용가이드 : 웹사이트의 가이드를 보실 수 있도록 해놨습니다.
  2. 암호 : 암호설정을 통해 앱을 껐다 킬 때 암호가 나타나게 할 수 있고 노트마다 개별적으로 잠금기능을 통해 노트를 보다 안전하게 관리하실 수 있습니다.
  3. 노트 늘려보기 : 상세노트의 노트리스트가 일정간격으로 나타나지 않도록 해주는 기능입니다.
  4. 이모지 키보드 : 이모지 키보드의 종류와 즐겨찾는 이모지를 삭제해주는 설정이 있습니다. 아래는 이모지 키보드의 모습입니다. 상단에 보시면 기능 버튼들이 보이는데요 좌에서 우로 탭버튼, -, *, /, :, 괄호, 따옴표, 키보드전환, 좌이동, 우이동 입니다.emoji_keyboard
  5. 카메라롤 자동저장 : 큐노트에서 모든 미디어를 첨부할 때 이미지(썸네일)이 있는 경우 모든 이미지를 카메라롤에 저장해줍니다. 예를 들면 노트에 앨범 자켓이 있는 MP3를 첨부하신다면 앨범 자켓이 카메라롤에 자동 저장된다고 이해하시면 됩니다. 연락처도 사진이 있으면 사진 원본이 저장됩니다.
  6. 캘린더 공유 : iCal의 데이터를 큐노트에 그대로 옮겨와서 실시간으로 보실 수 있도록 해놨습니다.
  7. 소셜로그인 공유설정 : 해당 소셜의 로그인 설정을 하실 수 있습니다.
  8. 노트 리셋 : 노트의 데이터를 완전 초기화하는데 사용합니다.
  9. 기타 : 큐노트를 친구에게 알리기, 리뷰작성하기 등등이 있습니다.

[/tab] [tab]

기본적으로 백업이나 복원이 진행중일때는 아이폰이 잠기거나 다른 앱을 이용해도 계속 진행됩니다.

2-10

  1. 로컬백업 : 여기서 로컬이라 함은 아이폰 자신을 말하는 것으로 백업하신 데이터는 큐노트의 Document 폴더에 저장됩니다. 그럼 iTunes와 연결하셔서 응용프로그램 > 큐노트 선택 > Backup폴더를 통째로 드래그해서 바탕화면으로 놓으시면 다운로드가 됩니다.
    6-4
  2. 로컬복원 : 해당 화면에서 복원버튼을 누르시면 백업된 데이터가 자동으로 저장됩니다. 뿐만 아니라 위의 이미지처럼 아이튠즈 접속해서 Qnote의 도큐먼트로 백업파일을 옮기시면 노트를 바로 복원하실 수 있습니다.
  3. 구글드라이브 백업 및 복원 : 큐노트의 경우 비디오라는 미디어를 담을 수 있는 편리함이 있지만 그만큼 백업이나 복원에는 불리하게 작용할만큼 용량이 어마어마합니다. 따라서 용량이 너무 클 경우는 구글 드라이브 백업을 추천하지 않습니다.
  4. 드롭박스 백업 및 복원 : 드롭박스의 경우 프로 계정으로 가입된 유저가 아닌 경우 제한 용량이 있습니다. 150MB로 노트의 용량이 150MB 이상인 경우 드롭박스는 사용이 불가하오니 참고하시기 바랍니다.

[/tab] [/tabcontent] [/tabs]

 

프로퍼티 검색

아래 그림과 같이 그룹메인에서는 최 상단에 작은 아이콘들로 쭉 나열되어 있습니다.
볼 품 없이 자리 잡은 녀석들이지만 노트를 찾아주는 기능은 정말 훌륭합니다.
그럼 하나씩 살펴보도록 하겠습니다.

property_search

[tabs slidertype=”top tabs” fx=”slide”][tabcontainer] [tabtext]캘린더 검색[/tabtext] [tabtext]태그 검색[/tabtext] [tabtext]미디어 검색[/tabtext] [tabtext]노트맵 검색[/tabtext] [tabtext]패스맵 검색[/tabtext] [tabtext]링크 검색[/tabtext] [tabtext]연락처 검색[/tabtext] [/tabcontainer] [tabcontent] [tab]노트가 등록된 날짜를 기준으로 쉽게 검색이 가능하며, 환경설정에서 iCal연동 기능을 켜시면 iCal의 내용도 노트에서 바로 열람하실 수 있습니다.

2-2[/tab] [tab]노트에 등록된 태그들이 모두 표시되며 해당 태그를 누르면 태그에 해당되는 노트 리스트만 나타납니다. 뿐만 아니라 멀티 선택으로 태그검색도 가능하니 참고하시기 바랍니다.

2-3[/tab] [tab]큐노트의 꽃이라고 할 수 있는 부분인데요, 큐노트는 이미지, 비디오, 오디오, 오피스문서등을 썸네일로 쉽게 검색하실 수 있습니다.

2-4[/tab] [tab]여러분이 노트를 작성하면 사진에 지오태그가 들어가는 것처럼 노트에도 지오태그가 들어가 노트를 작성한 위치가 어딘지 항상 기록되고 있습니다. 이런 것을 통해 노트가 작성된 위치를 기반으로 노트 검색이 가능합니다.

2-5[/tab] [tab]패스맵은 큐노트에서 제공하는 특수 기능으로 여러분이 패스맵을 실행하시면 이동 경로를 노트에 저장해줍니다. 또한 이동 경로에 핀을 꽂고 주소까지 출력해주는 기능이 있어 지점 대한 간단한 메모도 하실 수 있습니다.

2-6[/tab] [tab]사파리와 같이 웹서핑을 하다가 + 버튼을 눌러 저장하시면 해당링크가 스크린샷과 함께 노트에 저장됩니다.

2-7[/tab] [tab]연락처에 사진이 있는 경우 큐노트가 알아서 사진까지 저장해주기 때문에 사진을 통해 보다 쉽게 노트를 검색하실 수 있습니다.

2-8[/tab] [/tabcontent] [/tabs]

 

3. 우측날개

3-1

우측날개는 노트의 기록을 위한 곳 입니다. 추가적으로 날씨정보와 시간정보를 알려드립니다.
그럼, 큐노트에서는 어떤 것들을 등록할 수 있는지 알아보겠습니다.

 

[tabs slidertype=”top tabs”] [tabcontainer] [tabtext]보이스 레코더[/tabtext] [tabtext]연락처[/tabtext] [tabtext]드로잉[/tabtext] [tabtext]링크[/tabtext] [tabtext]패스맵[/tabtext] [tabtext]비디오[/tabtext] [tabtext]카메라롤[/tabtext] [tabtext]카메라[/tabtext] [/tabcontainer] [tabcontent] [tab]보이스 레코더를 이용해 목소리나 소리를 기록하실 수 있습니다.

큐노트 보이스 레코딩하기[/tab] [tab]연락처를 가져와 vcard형식으로 노트에 저장해주며 연락처에 사진이 있는 경우 사진도 저장해줍니다.

큐노트 연락처 기록하기[/tab] [tab]스케치와 드로잉을 통해 간편하게 기록하실 수 있으며, 이미지를 가져와 이미지에 낙서도 가능합니다.

큐노트 드로잉 하기[/tab] [tab]링크의 스샷과 링크 주소를 노트에 저장해줍니다.

3-5[/tab] [tab]패스맵을 켜고 운동을 하거나 이동을 하시게 되면 내가 이동한 경로를 저장해주며 이동경로상에 핀을 꽂아 표시를 남겨줄 수 있습니다.

큐노트 패스맵 기록하기[/tab] [tab]비디오를 촬영하여 노트에 담으실 수 있습니다.

큐노트로 비디오 촬영하여 기록하기[/tab] [tab]카메라롤에서 이미지 혹은 비디오를 가져오실 수 있습니다.

3-8[/tab] [tab]카메라로 사진을 찍어 노트에 저장하실 수 있으며 다음 업데이트에 노출, 포커스 기능이 추가되어 출시될 예정입니다.

큐노트의 미디어 기록 장치들[/tab] [/tabcontent] [/tabs]

 

정말 많지요? 이것들이 노트에 하나하나 다들어가니 노트할 맛이 납니다.

 

4. 상세노트

4-1

큐노트의 상세 노트 화면입니다.
크게 노트 프로퍼티, 본문, 갤러리로 구분되며, 미디어 추가 기능이 있습니다.

최하단에 “8”이라 씌어져 있는 버튼은 미디어를 취급하는 버튼으로 터치하시면 갤러리가 나타납니다.

 

노트 프로퍼티

note_property

노트 프로퍼티에는 해당 노트의 속성을 설정하실 수 있는 기능이 탑재되어 있으며,
다음과 같은 5가지 속성을 지원합니다. 해당 속성이 사용중일때는 아이콘이 그림과 같이 하얀색으로 변경됩니다.

  1. 주소정보 및 지도표시 : 메모들이 저장된 위치를 한눈에 볼 수 있게 지도로 표시해줍니다.
    map
  2. 그룹이동 : 원하는 그룹으로 이동 시킵니다.
  3. 태그정보
    tag
  4. 감성태그 : 색상을 이용해 노트를 태깅하는 기능입니다.
    emotion_tag_detail
    emotion_tag
  5. 잠금기능

 

본문 메모 리스트

다음은 본문인데요! 해당 노트를 작성하고 들어가면 또 여러개의 노트를 작성할 수 있는데 하나의 노트에 여러개의 메모를 작성하는 개념이라고 생각하시면 될 것 같습니다. 이 역시 노트메인 리스트와 같이 시간순으로 정렬되어 보여집니다. 하지만 노트리스트와는 달리 메모들은 기록한 날짜를 변경하실 수 있으며 각각의 메모에 리마인더를 설정해 푸쉬로 알림을 받아보실 수 있습니다.

reminder

reminder_badge

 

미디어 갤러리

4-2

큐노트의 하이라이트 미디어 갤러리인데요.
하나의 미디어를 선택하면 위와 같이 메뉴가 나옵니다.
메뉴는 상하블럭으로 나뉘어 지고 상단은 공유와 관련된 것들이 나타납니다.

  • 카메라롤 저장 기능
  • 이메일로 내보내기
  • 다른 앱으로 내보내기
  • 블루투스 전송
  • Wi-Fi 내보내기
  • 소셜 공유 (우측에 숨겨져 있는데 횡스크롤 하시면 나타납니다)

하단은 특정 기능들을 다루는 버튼들이 있는데 버튼의 용도는 다음과 같습니다.

  • 해당 미디어 상세보기
  • 해당 미디어 드로잉
  • 미디어 다른 노트로 이동
  • 미디어 삭제

노트에 추가된 미디어가 무엇이 있는지 한눈에 볼 수 있고 해당 미디어의 내용도 큐노트에서 제공되는 별도의 미리보기 화면으로 보실 수 있습니다.
혹시나 궁금해 하실까바 미리보기 화면도 준비해봤습니다.

[tabs slidertype=”top tabs”] [tabcontainer] [tabtext]이미지[/tabtext] [tabtext]비디오[/tabtext] [tabtext]오디오[/tabtext] [tabtext]연락처[/tabtext] [tabtext]링크[/tabtext] [tabtext]문서 및 텍스트[/tabtext] [/tabcontainer] [tabcontent] [tab]jpg, jpeg, png, gif 지원

IMG_5334 [/tab] [tab]mp4, m4v, mov 지원

IMG_5340[/tab] [tab]mp3, m4a, wav, caf, aif, aac 지원하며, 오디오 플레이어는 백그라운드 모드를 지원해 앱이 꺼져도 음악은 계속 흘러나옵니다. 거기에 좀더 편하게 사용할 수 있도록 이어폰 리모트 컨트롤도 지원합니다.

IMG_5339[/tab] [tab]현재 연락처와의 싱크를 통해 데이터를 가져옴 (추후 vcard 형식으로 변경할 예정이라고 합니다.

IMG_5337[/tab] [tab]웹링크를 보여줍니다.

IMG_5338[/tab] [tab]정말 다양한 문서 타입을 지원합니다.
txt, rtf, html, doc, xls, ppt, csv, pdf 지원

IMG_5341[/tab] [/tabcontent] [/tabs]

 

미디어 추가

신규 미디어 추가와 동일합니다만 상세노트에서의 미디어 추가는 해당 노트로 추가됩니다.

IMG_5336

 

더 보여드릴게 많은데 우선 이정도에서 마무리 짓도록 하겠습니다.
긴 글 읽어주셔서 감사드리며, 본 포스팅은 개발자 관점에서 기능위주의 설명으로 채우다 보니 너무 딱딱했는데요 다음 포스팅에서는 어떤 용도로 활용이 가능한지에 대한 얘기를 해보도록 하겠습니다.

워드프레스를 위한 다음뷰 플러그인

세상을 보는 열린 창 DaumView

 

[box type=”info”]

1.8 Updated : 다음뷰 플러그인의 버튼타입 설정이 제대로 되지 않는 문제 수정

1.7 Updated : 최고관리자 이외의 관리자가 사용할 수 없는 문제 해결

1.6 Updated : 플래시 방식이 제거로 인한  HTML 출력 방식으로 변경

1.5 Updated : 숏코드 추가, 다음뷰 전송시 제목 변경 기능 추가

[/box]

 

 개발배경

다음쪽 검색에 노출시키기 위해서 만큼 좋은 것은 없다고 생각하는 1인입니다.
워드프레스로 다음뷰를 사용하려고 검색하다보니 BlueDaumView라는 플러그인이 있어 기쁜 마음에 설치해 사용해보았지만 작동이 되지 않았습니다.  그래서 만들어 보았습니다.
괜찮으시다면 일단 추천한 번 눌러주시고 가시죠? ^^;

 

특징

  • 본 플러그인은 반드시 DaumView에 가입하셔야 사용가능합니다.
  • 포스트 작성시 다음뷰 메타박스를 통해 원하는 채널과 제목을 설정후 포스트를 송고할 수 있습니다.
  • 송고된 포스트에 대한 정보를 조회하실 수 있습니다.
  • 송고된 포스트는 설정에 따라 자동으로 포스트의 상단 및 하단에 추천박스를 출력합니다.
  • Post, Page, Custom post type의 편집 모드를 모두 지원합니다.
  • 다음뷰에서 제공하는 추천박스 4가지 타입 중 택 1
  • 포스트의 원하시는 위치에 숏코드를 이용하여 본문 중간에 끼워넣을 수 있습니다.
  • 다음뷰의 총 4가지 위젯을 사용할 수 있도록 제공합니다.

 

기본 관리자 모드

관리자 모드에서 블로그 주소를 입력하게 되어 있습니다. 이는 플러그인 활성화시 자동으로 들어가게 됩니다.
사용자는 이부분을 수정해서 사용할 일은 99% 없을 것이라고 생각하지만 만약을 대비해 수정할 수 있게만 해놓았습니다.

daumview_admin_closed
블로그 주소가 없는 경우나 정확한 블로그 주소가 아닌 경우 나타나는 화면입니다.
daumview_admin_open
정확한 블로그 주소를 입력했을때 관리할 수 있는 화면입니다.

 

포스트 송고 및 정보 표시

포스트 송고기능은 Post타입뿐만 아니라 Page와 사용자가 임의로 만든 타입도 송고할 수 있도록 제작되었습니다.
송고시 워드프레스의 Shortlink를 사용해 주소를 전송해주며, Permalink를 변경하더라도 문제없이 사용가능합니다.

 

스크린샷 2012-12-15 오후 12.31.44
포스트가 송고되지 않은 경우 나타나는 화면입니다.
스크린샷 2012-12-15 오후 12.31.23
포스트 송고 후 나타나는 정보제공 서비스 화면입니다.

 

위젯 설정과 출력

[tabs slidertype=”top tabs”][tabcontainer] [tabtext]MY글 위젯[/tabtext] [tabtext]구독 위젯[/tabtext] [tabtext]랭킹 위젯[/tabtext] [tabtext]추천LIVE 위젯[/tabtext] [/tabcontainer] [tabcontent] [tab]

스크린샷 2012-12-15 오후 12.33.33스크린샷 2012-12-15 오후 1.41.15

[/tab] [tab]

스크린샷 2012-12-15 오후 12.34.01스크린샷 2012-12-15 오후 1.40.56

[/tab] [tab]

스크린샷 2012-12-15 오후 12.33.53스크린샷 2012-12-15 오후 1.41.29

 

[/tab] [tab]

스크린샷 2012-12-15 오후 12.33.45스크린샷 2012-12-15 오후 1.41.42

 

[/tab] [/tabcontent] [/tabs]

 

다운로드 및 설치안내

  1. DaumView 플러그인을 다운로드 받습니다.
  2. 다운로드 받은 플러그인을 FTP를 통해 Plugins 폴더로 업로드 합니다.
  3. 플러그인 관리에서 DaumView 플러그인을 활성화 시킵니다.
  4. 설정 > DaumView로 접속합니다.
  5. DaumView에 가입합니다. (가입하셨다면 다음 단계로 이동하세요)
  6. DaumView 가입시 기입하신 블로그 주소를 작성합니다. (초기값으로 현재 사이트의 주소가 자동입력됩니다. 만약, 기본 블로그 주소와 틀린 경우 변경 입력하세요)
  7. 블로그 주소가 일치하는 경우 하단에 옵션 메뉴가 나타납니다.
  8. 옵션을 설정하고 사용합니다.
  9. 위젯 활성화시 제공하는 4개의 위젯을 사용하실 수 있습니다.

 

플러그인 에러 정보 안내

본 플러그인은 다음과 같은 에러 정보를 출력합니다. 각각의 에러에 다음과 같이 대처하세요!

[box type=”info”] “존재하지 않는 블로그입니다. (해당 포스트의 URL)”

해당 블로그의 실제 주소와 다음뷰에 기입한 블로그 주소가 동일하지 않는 경우 나타납니다. 괄호안에 나온 포스트 URL을 확인하시어 해당 도메인부분을 다음뷰에 블로그 주소로 기입해주시기 바랍니다. 다음뷰에 블로그 주소를 기입하는 것은 내 사이트가 어디인지 알 수 있는 유일한 인증키로써 사용되는 것이기때문에 조금만 잘못 작성하셔도 다음뷰측에 포스팅이 절대로 송고되지 않습니다.  (예제) 본 포스트의 주소 http://qnibus.com/?p=3887 의 앞에 http://qnibus.com을 블로그 주소로 입력해주시면 됩니다)[/box]

[box type=”info”] “공개로 설정되지 않은 글은 송고하실 수 없습니다.”

해당 포스트가 비공개일 경우에 나타납니다. 포스트의 설정을 공개로 바꾸시면 송고할 수 있습니다.[/box]

 

도움을 주신 분들

플러그인 제작에 도움을 주신 분들입니다.

[box]

플러그인 제작에 용기를 복돋아주신 워드프레스 홈페이지 카페 마스터 홍마리오

열심히 테스트해주시고 등록을 수월하게 할 수 있도록 도와주신 왼손은 거들뿐

등록후 안정화를 위한 1등 공신이신 Ho Chic, Namgbm43

수퍼관리자 이외의 관리자로 접근시 사용이 불가했던 부분을 수정해주신 Saschanaz

[/box]

감사인사 드리며, 앞으로 열심히 사용해주실 모든 사용자분들께도 감사드립니다.

 

 

전체 스크린샷

[tabs slidertype=”top tabs”] [tabcontainer] [tabtext]관리자1[/tabtext] [tabtext]관리자2[/tabtext] [tabtext]편집모드1[/tabtext] [tabtext]편집모드2[/tabtext] [tabtext]사이트[/tabtext] [tabtext]위젯관리[/tabtext] [/tabcontainer] [tabcontent] [tab]

플러그인 활성화한 후 세팅 > 다음뷰로 접속한 화면입니다.
플러그인 활성화한 후 세팅 > 다음뷰로 접속한 화면입니다.

[/tab] [tab]

다음뷰에 기입하신 블로그 주소를 입력하면 나타나는 메뉴 화면입니다.
다음뷰에 기입하신 블로그 주소를 입력하면 나타나는 메뉴 화면입니다.

[/tab] [tab]

아직 송고하지 않은 경우 나타나는 화면입니다.
아직 송고하지 않은 경우 나타나는 화면입니다.

[/tab] [tab]

포스팅을 통해 송고를 했을 경우 나타나는 스샷
포스팅을 통해 송고를 했을 경우 나타나는 스샷으로 우측 상단을 봐주세요.

[/tab] [tab]

한장에 담아야 할게 많아서 화면을 축소시켜서 담아봤습니다.
한장에 담아야 할게 많아서 화면을 축소시켜서 담아봤습니다.

[/tab] [tab]

위젯 설정 화면입니다.
위젯 설정 화면입니다.

[/tab] [/tabcontent] [/tabs]

 

그룹테이블에서 배경색상 적용하기

iOS6 버전이 나온지 좀 되서 아실만한 분들은 많이 있으시리라 생각합니다만, 혹 모르시는 분들을 위해 몇 자 적어보겠습니다.

보통 테이블에서의 배경색상은 tableView.backgroundColor으로 설정합니다.
iOS6에서 Plain 스타일의 테이블에서는 잘 작동하는데요, Group 스타일의 테이블에서는 그림1과 같이 전혀 먹지 않습니다.

iOS Simulator Screen shot 2013. 2. 11. 오후 4.33.08
그림1

이것을 해결하기 위해서는 다음과 같은 방법을 쓰면 해결이 됩니다.

소스코드를 설명하기 앞서 왜 이렇게 되었는지에 대해 설명드리겠습니다.

iOS6으로 업그레이드 되면서 기존의 UIColor 속성인 groupTableViewBackgroundColor가 deprecated 되었습니다.
이로 인해 테이블 그룹 스타일이 backgroundView로 초기화되어 얹어지게 되었지요.

엄밀히 따지면 세로 줄무늬는 칼라가 아닙니다. 이에 따라 애플이 명확하게 선을 긋기 위해 제거한 것 같습니다.
이로 인해 테이블의 backgroundView에 줄무늬가 얹어진 뷰로 대체되면서 그 밑에 숨어있는 테이블 백그라운드 칼라는 보이지 않게 되었습니다.

따라서 테이블의 백그라운드뷰를 투명한 뷰로 대체시키면 그 밑에 있는 테이블의 배경색을 볼 수 있게 되는 원리로 위와 같은 소스를 작성하시면 기존의 그림2처럼 사용하실 수 있게 됩니다.

2-9
그림2

날씨 API 과연 어디를 써야할까?

현재 Qnote All-in-One에서 날씨 API를 이용해 날씨를 간단하게 표현해 사용자에게 알려주고 있습니다. 사용자가 휴대폰을 사용하는 위치의 로컬 날씨를 보여주고 있는데요, 정말 간단하게 날씨를 표현한 아이콘과 온도 정도만 보여주고 있습니다. 이렇게 간단한 것을 사용하기 위해서는 날씨 API를 선택해야 하는데 이게 생각보다 만만치 않습니다.

검색해서 찾아본 결과 사용에 대한 지불을 하지 않는 즉, 무료로 사용하는 조건에서 표를 작성해보았습니다.
기타 기상청도 있고 여러개의 사이트가 더 있었지만 제 맘에 드는 API를 찾아서 4개 정도만 작성해보았습니다.

서비스 회사 야후API 구글API Weather Underground WeatherBug
라이센스 비상용 상용/비상용 상용/비상용 상용/비상용
쿼리제한 10,000 무제한 500/시간, 10/분 무제한
키발급

 

1. YAHOO WEATHER API

제가 개발하는 Qnote All-in-One의 경우 유료앱이라 일단 야후 API는 사용할 수가 없습니다.
더불어 야후API에 10,000이라는 쿼리제한을 적어놓았는데요 날씨 API 자체는 무제한입니다.
다만, 날씨를 받아오기위해선 WOEID라는 국가/도시별로 정해진 지역코드가 있는데 이코드를 받기 위해서 GeoPlanet API를 이용해야하는데요, 이 쿼리제한이 10,000입니다.  참고적으로 YSQ을 이용하면 도시이름을 검색해 별도의 제한없이 WOEID를 가져올 수는 있습니다. 저의 경우 위도/경도로 WOEID를 받아와야 해서 별 수 없이 GeoPlanet API를 이용했습니다.

그럼, 간단하게 가져오는 방식에 대해 짚고 넘어가겠습니다. 야후는 총 2단계 방식으로 결과값을 가져옵니다.
첫번째로, 좌표값으로 WOEID를 가져와야 합니다. 그러기 위해서는 우선 야후에 프로젝트 신청하시고 어플ID를 발급받으셔야 합니다. 그런후 아래 첫번째줄의 URL을 보내면 WOEID를 반환합니다.
그 반환된 값을 두번째줄의 날씨피드로 쏴주기만 하면 날씨데이터를 XML로 반환해줍니다.

 

2.  GOOGLE WEATHER API

구글은 2012년 9월경 날씨 API가 종료되었습니다.

 

3.  WEATHER UNDERGROUND WEATHER API

전세계적으로 유명한 API인것 같습니다만, API에 대한 정책이 확실합니다.

Calls Per Day Calls Per Minute Price
DEVELOPER 500 10 USD $0
DRIZZLE 5000 100 USD $20
SHOWER 100,000 1000 USD $200
DOWNPOUR 1,000,000 10,000 USD $300

쿼리가 상당히 제한적이라 사용도 해보지 않았네요!

 

4.  WEATHERBUG WEATHER API

현재 제가 이용하고 있는 API입니다.
이용을 위해서 API키를 발급받아야 합니다. 간단하게 발급 절차를 이미지로 순서대로 나열해보겠습니다.

가입타입 선택 저의 경우 모바일 디바이스로 선택해서 진행했습니다.
가입정보 입력하세요!
바로 가입하실때 입력한 이메일 주소로 이메일이 옵니다.
이메일의 링크를 클릭하면 키발급 완료!

키가 발급이 다 된 후, 잘 읽어보시면 30분 후에 사용해야 정상적인 접근이 가능하다고 적혀있습니다. 받자마자 해보시면서 왜 안되지? 하시면 안되실거 같아서 말씀드립니다.

나머지는 http://weather.weatherbug.com/corporate/products/API/help.aspx API 문서를 이용하셔서 작업하시면 됩니다.
이용하실 수 있는 정보들은 다음과 같습니다.

  1. 위치 검색
  2. 날씨스테이션 검색
  3. 실시간 날씨
  4. 실시간 요약 날씨
  5. 1주일 일기예보
  6. 카메라 리스트 (미국만)
  7. 날씨경보 (미국만)

추가적으로 날씨에 대한 상태정보는 170여개로 분류되어 디테일하게 알려줍니다. 그에 따라 아이콘도 170개… 아이콘에 관련된 문서를 보시면  GIF만 지원되는지 알고 좀 난감했었습니다. 하지만 API 문서탭에 아이콘 HELP을 클릭해보시면 아시겠지만 이미지 사이가 15 x13부터 500×420 다양한 사이즈를 지원합니다. 아래는 적용해본 앱의 스샷입니다. 생각보다 깔끔하게 나와서 만족스럽습니다. ^^

3-1

다음 릴리즈시 웨더버그의 API를 적용시켜 출시할 예정인데요, 출시후 별도의 문제점이 발견되면 글을 올려드리겠습니다.