Reflector를 활용한 아이폰 앱 영상 녹화하기

Reflector 소개

앱의 사용방법에 대한 영상을 제작해보고자 검색중 Reflector와 AirServer라는 프로그램을 알게 되어 둘다 사용해보았는데요~!! 개인적으로는 Reflector가 사용하기 편하고 스트리밍 하는 속도도 쾌적한듯해 소개해보고자 합니다. (AirServer는 녹화 기능이 없습니다)

간단하게 말해 Reflector는 나의 Mac이나 PC를 AirPlay 디바이스로 인식하게 해주는 유틸리티입니다.
따라서 이 프로그램을 설치하면 아이폰이나 아이패드의 AirPlay 기술을 이용해 아이폰에서 실행한 영화나 음악을 간편하게 맥이나 PC에서 감상할 수 있게 되겠습니다.

단, 이 프로그램을 이용할 수 있는 디바이스는 iPhone 4S, iPhone 5, iPad 2 or iPad 3에서 이용하실 수 있습니다.
저도 현재 아이폰4라 작동이 안되더군요! 대신 와이프 폰이 4s인지라 이렇게 글을 올릴 수 있게 되었습니다.

 

Reflector 설치방법

이곳에서 https://www.reflectorapp.com/ 다운로드를 합니다. 저는 맥유저라 맥기반으로 설명 드립니다. 다운로드후 Reflector.dmg를 실행하시면 아래와 같은 화면을 만나실 수 있습니다. 다른 여느 맥설치와 동일합니다. 드래그 해서 어플리케이션 폴더로 이동해주세요!!

스크린샷 2013-02-08 오전 1.59.56

그리고 나서 해당 앱을 실행시키면 설치 끝입니다.
정품으로 구매하시면 싱글라이센스로 $12.99입니다.
비품도 없냐고 물어보시는 분들께는 검색이 답이라고 말씀드리고 싶네요 ^^;

 

Reflector 사용방법 (Mac, PC)

해당 맥이나 피씨에서 앱을 실행하시면 아무것도 안뜹니다. 하지만 자세히 보시면 상단에 메뉴에 앱이 실행 중임을 한눈에 알 수 있습니다.

스크린샷 2013-02-08 오전 2.02.38

Device 설정에서 건드릴 부분은 알아서 설정해주시면 될 것 같고, Start Recording만 알고 계시면 될 것 같습니다.
이 것을 누르면 말그대로 아이폰으로 실행중인 프로그램을 맥에서 그대로 보여지고 녹화를 할 수 있게 해줍니다.

아래는 Preferences 입니다.
여기서는 아이폰이나 패드에서 실행한 화면을 띄어줄 기본적인 구성과 AirPlay 연결 이름과 암호 설정을 하실 수 있습니다.
암호는 설정해도 되고 안해도 상관없습니다만, 암호를 설정하면 폰에서 AirPlay연결시 암호를 물어보고 암호에 답해야 접속이 되게 되있으니 참고하시면 될 것 같습니다.

자, 그럼 거의 끝나갑니다. 마지막으로 중요한 폰에서의 설정은 어떻게 할지 다음 섹션을 봐주세요!

스크린샷 2013-02-08 오전 2.02.19

 

Reflector 사용방법 (iPhone, iPad)

iPhone 4S, iPhone 5, iPad 2 or iPad 3에서 홈버튼 더블클릭을 하셔서 가장 왼쪽으로 가시면 아래와 같은 화면을 보실 수 있습니다.

airplay_confing_1 airplay_confing_2

좌측 이미지에서 보시다시피 홈버튼 더블클릭해서 가장 왼쪽으로 가시면 보실 수 있습니다. 혹여나 난 왜 저게 안보이지 하시는 분들은 지금 보이는데서 한번더 드래깅 해주세요!
그래도 안보이신다면 여러분의 기기는 지원하지 않는 것 입니다. 위에서 말씀드렸다시피 iPhone 4S, iPhone 5, iPad 2 or iPad 3 에서만 이용하실 수 있습니다.

여튼 AirPlay 버튼을 누르시면 우측 이미지와 같이 AirPlay 연결 기기를 선택하라고 나옵니다.
저는 qnibus-iMac에 연결했습니다. 연결하는 순간 하단에 Mirroring(미러링)이 나오는데 이를 켜시는 순간 맥에서 다음과 같은 거대한 아이폰이 나타나게 됩니다.

 

Reflector로 맥과 폰 연결 모습

지금 보시는 화면은 아이폰에서 실행하고 있는 모습 그대로 미러링되어 나타나고 있습니다.
이걸 녹화하시려면 위에서 설명드린 Start Recording을 하시면 그대로 녹화하게 됩니다.

녹화가 끝난후 저장메시지가 나오는데 그곳에서는 동영상 렌더링시 폰이나 아이패드의 프레임을 포함할 것인지 말 것인지에 대한 체크사항이 있습니다. 이를 통해 프레임째 동영상으로 제작할 수도 있다는 사실을 꼭 알고 계시기 바랍니다.

스크린샷 2013-02-08 오전 2.13.40

 

녹화 동영상

본 동영상을 촬영하면서 오리엔테이션을 가로 세로 왔다리 갔다리 한번 했더니 기본 동영상 프레임 사이즈가 커지더군요!
참고하시고 한번 감상해주시면 될 것 같습니다.

Notification Center에서 메시지가 사라지지 않는 증상

그림1의 알림센터에서와 같이 메시지를 아무리 눌러도 메시지가 사라지지 않는 증상을 겪으신 분들이 계신지 모르겠네요!!

이런 증상을 겪기 위해서는 로컬 노티를 2가지이상의 형태로 분류해서 사용하면 만날지도 모릅니다.
저의 경우는 노트 리마인더와 알람 2가지를 로컬 노티로 구현 중인데요, 재밌는 것은 노트를 알려주는 리마인더는 아무리 해도 잘되고 알람쪽만 설정하면 그림1과 같이 메시지가 남아있더군요!

iOS Simulator Screen shot 2013. 2. 4. 오후 11.08.14
그림1

저걸 다시 눌러도 그림1의 메시지는 없어지질 않습니다.
별의 별 짓을 다해서 결국 해결했는데, 너무나 어이없어서 실소를 금치 못하고 있습니다.

바로 뱃지의 숫자로 인해 발생하는 문제였습니다.

노트 리마인더의 경우 뱃지를 출력해주고 있지만, 알람은 그렇게 사용하고 있지 않았습니다.
이런 경우 둘다 뱃지를 출력해서 가감해주면서 사용하면 문제 없지만 저처럼 한가지만 뱃지를 출력하는 경우는 반드시 비효율적이긴 하지만 아래와 같이 해줘야 정상적으로 동작합니다.

표시한 부분이 중요합니다. 강제로 뱃지의 숫자를 0으로 만들어주셔야 저와 같은 오작동의 굴레에서 벗어나실 수 있습니다.

나의 앱에 앱스토어 화면 보기

소개

아시는 분들은 아시겠지만 iOS 6.0부터 지원되는 것이라 모르시는 분들이 많은 것 같습니다.

아래 그림1을 보시면 현재 회사에서 소개하고 싶은 여러 앱들이 있습니다.
보통 누르면 나의 앱에서 빠져나가고 앱스토어 앱으로 이동합니다.
다른 앱으로 나가는게 썩 보기 좋지 않았었는데, 이제 그런 고민 하지 않아도 될 것 같습니다.

2013-02-04 14.24.50
그림1

 

변경후,

그림2처럼  iOS6부터는 앱 자체적으로 불러들일 수 있습니다.
SKStoreProductViewController 컨트롤러가 생겼기때문이죠!

 

2013-02-04 14.23.26
그림2

 

사용방법

그림2와 같이 집어 넣으니 이동을 하지 않아서 너무 좋더군요!
우선 <StoreKit.framework>을 프로젝트로 추가해주신 후, 다음과 같이 코드를 작성해주세요!
일반적인 뷰컨트롤러 호출 방식과 동일합니다.

딜리게이트도 있는데요!! 해당 헤더에 SKStoreProductViewControllerDelegate 선언해주시고!
아래와 같이 창을 닫도록 처리해주시면 됩니다.

 

 

 

 

iPad에서 UIModalPresentationFormSheet 사용시 키보드 내리기

아이패드 작업시 그림1과 같은 모달창에서 키보드를 입력해야 하는 경우가 있습니다.
일반적으로 키보드 작업을 하고 취소오케이를 누르면 키보드도 같이 내려가야 합니다.

iOS Simulator Screen shot 2013. 2. 3. 오전 2.09.01
그림1

 

 

어라! 하지만 그림2와 같이 키보드가 내려가지 않았습니다.
어떻게 된 것일까요? 저도 삽질 끝에 알아낸 결과라 기록으로 남겨둡니다.

iOS Simulator Screen shot 2013. 2. 3. 오전 2.10.55
그림2

 

Stackoverflow 에서 검색을 해보았더니 의견이 분분하더군요!
심지어는 애플의 버그라고 하시는 분들도 계셨습니다.
하지만 알고 보니 UIViewController 내에 disablesAutomaticKeyboardDismissal 이라는 메소드의 기본 설정값이 YES 여서 발생하는 문제였습니다.
모달로 열리는 창에 disablesAutomaticKeyboardDismissal 메소드를 오버라이드 하시면 문제는 해결됩니다.

예를 들면, 다음과 같이 모달을 호출한다고 가정합니다.

보시다시피 formsheet의 형태로 모달을 호출하게 되며 키보드를 띄우게 될 경우 어김없이 사라지지 않는 문제가 발생하게 됩니다.
해결방법은 모달로 띄우는 컨트롤러 소스안에 다음과 같이 넣어주세요.

이렇게 키보드를 자동으로 사라지기 비활성화하기에서 return을 NO로 해주면 활성화한다는 말이 되기때문에 모든 것이 정상적으로 작동할 것 입니다.
만약, UINavigationController에 얹어서 모달을 띄우시는 경우 UINavigationController의 SubClass로 하나 생성하셔서 그 안에 위와 같이 넣어주시고 호출하시면 됩니다.

 

 

워드프레스 외부에서의 WPDB 사용방법

간혹 외부 API를 이용한 작업을 하거나, 클론 작업등 워드프레스 내부가 아닌 외부 페이지로 만들어야 하는 경우 워드프레스의 DB를 활용할 수 있는 방법에 대해 소개해보고자 합니다.

 

워드프레스 3.4 미만

워드프레스 3.4 미만인 경우는 다음과 같이 합니다.

위의 코드는 워드프레스의 API를 모두 불러오는 방법이긴 하지만 한가지 문제가 있습니다. 플러그인으로 캐쉬를 사용할 경우 원하는 결과를 받아오지 못하는 결과를 초래할 수 있어 아래의 코드처럼 wpdb 객체를 새로 생성해준 후 사용하는 것이 안전합니다.

단, 이렇게 사용하기 위해서 한가지 해주셔야 할 일이 있습니다.

하지 않아도 작동은 이상없습니다만, 보다 안전하게 사용하기 위해 반드시 wp-config.php 내에서 다음과 같은 코드를 한줄 추가해주세요!
OUTSIDE_BLOCK_LOAD 정의부분은 원하시는 문자로 바꾸셔도 되며, 저는 타인이 알 수 없는 문자로 바꾸시는걸 추천해드립니다.

 

워드프레스 3.4 이상

3.4버전 이상에서는 위와 같은 방법으로 wpdb를 사용할 수 없게 되었습니다.
아래와 같이 작성하시면 워드프레스 3.4미만에서 사용한 코드보다는 워드프레스 코어를 더 많이 불러오긴 하지만 전체 코어를 불러오는 것은 아니기때문에 이런 부분은 참고하시어 작업하셔야 합니다.

 

출처

워드프레스를 사용하면서 참 고마운 사람들이 많다라는 것을 많이 느낍니다. 저의 포스트 역시 아래 블로그의 내용을 참고하여 포스트하는 것이오니 참고하여 주시기 바랍니다.

http://www.stormyfrog.com/using-wpdb-outside-wordpress/

유연한 테마를 위한 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]