Tag: Link

웹/이메일에서 쓸만한 ‘일정 추가하기’ 버튼 만들기

LudensLeave a comment
Bundlefest 일정 추가 버튼

며칠 전에 메일함에서 광고메일을 보다가 특이한 버튼을 발견했습니다.

Bundlefest 일정 추가 버튼
광고메일에 있는 일정 추가 버튼들

세일 일정을 구글캘린더, 아웃룩(데스크탑), 야후, 아웃룩닷컴, 애플(캘린더)에 추가할 수 있는 버튼이더군요. 그리고 당연한 이야기지만 실제로 작동도 했구요.

신기하기도 하고 나중에(?) 쓸 일도 있을 것 같아, 각 서비스마다 일정 추가하기 버튼 만드는 방법을 정리해 봅니다.

구글 캘린더

지메일과 함께 가장 많이 쓸것같은 구글 캘린더는 링크만 규칙에 맞춰 잘 작성하면 간단하게 만들 수 있습니다.

https://gist.github.com/ludens/36dc104447491c768a5895fddb6eaedc#file-google_calendar-html

수정해야될 파라메터를 정리하면 다음과 같습니다.

text
일정의 제목입니다.
예시: text=저녁약속
dates
YYYYMMDD에는 연도,월,일. HHMMSS에는 시,분,초를 적어줍니다.
앞에는 시작하는 시점을, 뒤에는 끝나는 시점을 적습니다.
예시: dates=20170214T180000/20170214T223000
ctz
알맞은 시간대를 적습니다. 형식은 대륙/지역이고, 앞 글자가 대문자여야합니다.
예시: ctz=Asia/Seoul
details
설명글을 적습니다. 한줄 띄우려면 %0A라는 문자를 넣어줍니다.
예시: details=늦지 않게 가기%0A(늦으면 벌금있음)
location
장소를 적습니다.
예시: location=홍대입구역

구글캘린더에 일정 추가하기

아웃룩닷컴

아웃룩닷컴도 구글캘린더처럼 링크를 잘 작성해주면 끝납니다. 구글과 거의 비슷하네요.

https://gist.github.com/ludens/36dc104447491c768a5895fddb6eaedc#file-outlook_com-html

dtstart,dtend
일정의 시작과 끝을 각각 적습니다. 형식은 구글 같게 적어줍니다.
예시: dtstart=20170214T180000&dtend=20170214T223000
summary
일정의 제목입니다.
예시: summary=저녁약속
location
일정의 장소입니다.
예시: location=홍대입구역
description
일정의 설명입니다. 한줄 띄려면 %0A를 넣어줍니다.
예시: description=늦지 않게 가기%0A(늦으면 벌금있음)

아웃룩닷컴에 일정 추가하기

아웃룩(데스크탑) / 애플 캘린더

아웃룩과 애플의 캘린더는 일정 정보가 담긴 ics파일을 만들고, 그 파일을 링크시키면 됩니다. ics파일을 만드는 방법은 아웃룩이나 맥의 캘린더에서 ‘ics로 저장하기’ 또는, 웹에서 간단하게 만들 수도 있습니다.

http://apps.marudot.com/ical/

저는 이 사이트에서 만든 ics 파일을 링크시켜보았습니다. 데스크탑 버전 아웃룩이나 사용하는 맥에 캘린더로 추가하실 수 있을 겁니다.

아웃룩(데스크탑)/애플 캘린더에 일정 추가하기

혹시나 해서 찾아보았는데 네이버랑 다음은 역시나.. 없더군요. 그냥 구글 캘린더와 아웃룩정도로 만족해야 할 것 같네요ㅠ

없으면 아쉬운 안드로이드 유틸리티 앱 20개

LudensLeave a comment

아이폰과 안드로이드의 차이를 한마디로 설명한다면, 아래의 한마디가 아닐까 싶습니다.

아이폰은 안되는데, 안드로이드는 되

안드로이드는 별의별(…) 유틸리티 앱들이 많습니다. 혹시나하고 ‘이런 기능 없을까?’하고 검색해보면 누군가 앱으로 만들어 놓은 경우가 대부분이더군요. 이번에 제가 폰을 바꾸면서 세팅을 처음부터 다시 했는데, 이번에도 이전 폰과 마찬가지로 설치한 앱들을 정리해서 소개해 보려고 합니다. 너무나 당연한(?) 카카오톡, 지하철 같은 앱은 제외하였고 최대한 무료앱으로 정리해 보았습니다.

 동기화, 백업

AutoSync2 Free

동기화를 자동으로 켜고 끄게 할 수 있는 앱입니다. 여러 설정이 있지만, 저는 와이파이가 연결되어 있고 충전중 일때만 동기화가 되도록 설정해 놓았습니다. 앱을 받자마자 딱 한번 설정하고 다시는 켤 일이 없는 앱이기에, 광고가 있는 무료버전을 사용하셔도 무방합니다. 제가 아직 써보진 못해서 확실치는 않지만, 다른 자동화앱(Tasker, Trigger 등)에서도 비슷한 기능이 있지않을까 싶네요. 그래도 간편하게 설정하기엔 위의 AutoSync2가 좋습니다.

[appbox googleplay com.smallmachine.autosync2]

SMS Backup+

SMS 백업앱도 여럿 있지만, 저는 구글계정만 있으면 간단하게 할 수 있는 SMS Backup+를 선호합니다. 이름만 봐서는 문자메시지만 백업 될 것 같지만 통화기록도 함께 백업하고 복원하는 것이 가능합니다.

[appbox googleplay com.zegoggles.smssync]

구글 포토

사진 백업을 위한 앱이죠. 자세한 사용법은 광파리님 글을 추천합니다 🙂

https://kwang82.blogspot.kr/2015/08/7.html

[appbox googleplay com.google.android.apps.photos]

 카메라

구글 카메라

스마트폰을 사면 제조사의 카메라앱이 있기는 하지만, 묘하게 구글 카메라앱으로 찍는 사진이 더 잘나옵니다. 신기하게말이죠;;

[appbox googleplay com.google.android.GoogleCamera]

Office Lens

이전에는 문서스캔앱이라면 유료앱으로 해야 쓸만하다고 생각했었죠. 그런데 마이크로소프트에서 이 앱을 올려놓은 이후로 이쪽은 거의 평정한 것 같습니다. 무료앱인데 왠만한 유료앱들을 뛰어넘는 성능을 보여줍니다ㄷㄷ

[appbox googleplay com.microsoft.office.officelens]

Skitch

주로 사진이나 캡쳐한 이미지에 화살표나 도형을 표시하는 용도로 사용합니다.

[appbox googleplay com.evernote.skitch]

바코드 스캐너

앱 이름대로 바코드 또는 QR코드를 읽는 앱입니다. 요새는 이전만큼 QR코드를 많이 쓰진 않지만, 그래도 가끔 쓸일이 있어서 넣었습니다.

[appbox googleplay com.google.zxing.client.android]

 기기 관리

FX

탐색기 앱은 ES를 오랜기간 썼었는데, 디자인이 별로라서 이 앱으로 갈아탔습니다. ES탐색기와 기능상으로는 거의 비슷한데 더 빠릿빠릿한 것 같아 추천입니다.

[appbox googleplay nextapp.fx]

Heads-Up

알림을 상단에 카드형태로 표시해줍니다. 이렇게 뜨니까 바로바로 확인할 수 있어 좋더군요. 알림창 액션이 지정되어 있으면 바로 반응할 수 있는게 완소기능이죠. 설정에서 표시할 앱을 따로 정할 수 있습니다.

[appbox googleplay codes.simen.l50notifications]

Caffeine

우리를 잠못자게 해주는 카페인처럼, 폰의 화면이 꺼지지않게 해주는 앱입니다. 충전할 때와 같은 특정 조건도 있고 특정 앱을 실행할 때 화면이 안 꺼지도록 설정할 수 있습니다.

[appbox googleplay nl.syntaxa.caffeine]

기기 관리자

애플의 ‘나의 iPhone 찾기‘와 같은 역할을 하는 앱입니다. 잃어버리면 찾기가 힘들긴 하지만.. 방금 전 음식점에 두고온 것 정도는 확인할 수 있겠죠?ㅎㅎ

[appbox googleplay com.google.android.apps.adm]

TeslaLED

광고 없이 깔끔한 손전등 앱입니다. 1칸짜리 위젯도 제공합니다.

[appbox googleplay com.teslacoilsw.flashlight]

 웹브라우징, 데이터

Flynx

링크를 버블형태로 띄워주는 브라우저앱입니다.` 트위터나 페이스북에서 링크하나 때문에 보던 타임라인을 놓치는 경험이 있는 분들에게 추천합니다+_+ 카톡같은 메시징앱에서도 꽤 편해요!

[appbox googleplay com.flynx]

Onavo Extend

3G나 4G 데이터를 줄여주는 앱입니다…라고 소개하면 엄청 획기적이지만, 이런 류의 앱들은 보안에 대한 문제가 있어서 꺼림칙한 분들은 사용하지 않는게 좋습니다. 데이터가 앱을 만든 회사의 서버를 한번 거쳐서 오기 때문이죠;; 오페라에서 나온 Opera Max 등 비슷한 앱이 몇개 더 있지만 제 생각에는 요 앱이 가장 많이 줄여주는 것 같아 요걸로 사용하고 있습니다ㅎㅎ

[appbox googleplay com.onavo.android.onavoics]

 생산성

IF

IFTTT의 안드로이드 앱입니다. IFTTT는 한마디로 ‘이거하면 알아서 요거해‘라고 소개할 수 있겠네요. 위 앱을 설치하면 ‘특정 장소에 가면 알아서 진동으로 바꿔줘‘와 같은 일이 가능합니다.

[appbox googleplay com.ifttt.ifttt]

Timely

구글에서 인수한 알람앱입니다. 나름 스마트하게 깨워준다고 알람소리를 적게 시작해서 크게 나오는 기능도 있고, 알람을 끄는 시간을 학습해서 알람소리가 시작되는 시간이 변하기도 하는 듯 합니다(?) 개인적으로는 동기화기능이 마음에 드는 앱입니다. 스톱워치와 타이머도 기능도 있습니다.

[appbox googleplay ch.bitspin.timely]

ZArchiver

위에 있는 탐색기앱인 FX에서도 왠만한 압축파일은 잘 풀립니다만, 혹시 안풀리는 파일이 있다면 요 앱으로 풀면 됩니다.

[appbox googleplay ru.zdevs.zarchiver]

 엔터테인먼트

다이닝코드

맛집 검색앱입니다. 신뢰성이 있는 자료만 있는건 아니지만, 급하게 찾을때 위치정보를 활용해서 근처 검색하면 그럭저럭 쓸만합니다.

[appbox googleplay com.diningcode]

가사 파인더

투박한 느낌이지만, 가사앱중에선 가장 쓸만한 것 같습니다. 앱을 깔고 음악을 재생하면 알아서 실행됩니다. 1년넘게 업데이트가 안되고 있다는게 좀 걱정입니다.

[appbox googleplay com.vjcasters.lyrics]

Shazam

흘러나오는 음악 찾을때 쓰는 앱입니다. iOS의 시리도 요 샤잠서비스를 이용한다죠

[appbox googleplay com.shazam.android]

덧) 20개에서 하나라도 건지셨길 바랍니다
덧2) 다른 좋은 필수 앱이 있다면 알려주세요ㅎㅎ

Pushbullet – PC↔안드로이드↔iOS 간 파일/링크/메모 전송 종결자!

LudensLeave a comment

지금은 대부분의 사람들이 스마트폰을 가지고 있는 스마트한 시대라고는 하지만, 의외로 PC에서 스마트폰으로 파일을 전송할때 어떻게 보낼지 고민하게 됩니다. 저도 컴퓨터에 있는 파일을, 그리고 보고있는 웹사이트를 안드로이드폰이나, 아이패드에 어떻게 더 쉽게 전송할 수 있지 않을까 고민했습니다.

이전의 전송방법 VS Pushbullet

살짝 머리아파지는 파일전송을 예를 들어서 이야기 해보죠. 이전에는 PC에서 모바일로 무선으로 파일전송을 하려면..

웹브라우저를 켜서 메일 사이트에 들어간다 → 내 메일주소로 파일을 첨부해서 메일을 보낸다 → 스마트폰에서 메일앱을 켠다 → 첨부파일을 다운받는다

내게 쓴 편지함
다들 메일이 수북하게 쌓여있는 ‘내게 쓴 편지함’ 하나정돈 가지고 계시죠?(…)

스마트한 시대에 이런 건 너무 복잡하지않나요? Pushbullet을 사용하면 이렇게 바뀝니다.

보내려는 파일에 오른쪽 클릭 → Pushbullet 메뉴에서 파일을 보낼 기기 선택 → 스마트폰에서 푸시알람이 뜨면 다운로드

Pushbullet 메뉴
꽤 간편해 보이죠?

위와같이 Pushbullet을 사용하면 브라우저를 켠다던지, 스마트폰에서 메일앱을 켠다던지 하는 일이 없으니 동선이 확 줄어들죠

거의 모든 플랫폼을 지원

공식적으로 Pushbullet이 지원하는 플랫폼은 다음과 같습니다.

물론 ‘비공식적으로’도 있겠죠? 서드파티 앱으로 다른 플랫폼용도 개발되어 있습니다.

PC에서 iPad로 파일전송

브라우저에서 안드로이드폰으로 링크전송

기타 기능들

이 글에서는 기기간 전송기능만 썼는데요, 아래의 기능들도 있습니다.

저는 전송기능 하나만으로도 정말 훌륭한 앱이라고 생각하는데, 기능이 많이 추가되고 있네요. 처음엔 글이랑 링크만 보낼 수 있었는데, 파일도 보낼수 있게 되서 많이 발전했죠.
지금도 발전가능성이 많이 보이는 앱이고, 사용하기에도 간편해서 주변사람들에게도 많이 추천하는 앱입니다 🙂

덧) 파일전송 제한은 25메가 이니, 큰 파일은 유선이나 대용량첨부로 해야합니다ㅠ

[간단팁] CSS 한줄로 외부링크만 꾸미기

LudensLeave a comment


photo by Shutterstock.com

어제 블로그에 적용해본 초간단팁입니다.

아래 보시면 제 블로그관련 링크에는 링크모양 아이콘이 안붙고, 외부링크에는 아이콘이 붙는 걸 보실 수 있을겁니다.

비밀은 바로 아래 적힌 CSS 한줄입니다.

[gist]dcd82228a0b85e099ea97eaee060dff0[/gist]

위의 코드를 복사하셔서 적당하게 수정해주시면 되겠습니다.

  1. .article은 글을 감싸고있는 상위 요소로 바꿔주시고
  2. site.address.com은 적용할 사이트 주소로 바꾸신 후
  3. 저처럼 뒤에 스타일을 적용하실거면 ‘:after’을 살려두시고(앞을 꾸미실거면 ‘:before’로 바꾸시고)
  4. 원하는 CSS 스타일을 적용하시면 됩니다.

어떤 원리일까?

CSS를 하나하나 뜯어보면 이해가 되실겁니다.

  1. .article – 먼저 ‘article’이라는 속성을 가진 요소 안에
  2. a – ‘a’ 태그들 중
  3. a[href*=”//”] – ‘href’속성에 ‘//’이라는 문자를 포함하는 것을 찾습니다.
  4. :not([href*=”site.address.com”]) – 그리고 ‘:not’이라는 선택자로 그 중에서 ‘href’속성에 site.address.com이 포함되지 않은 링크만 골라냅니다.

그러면 결국 외부링크만 남게되겠죠? 🙂

컴퓨터가 아닌, 사람을 위한 URL

LudensLeave a comment

작년 4월쯤에 봤던 글인데, 번역하려고 저장해두었다가 잊고 있었네요. 원문은 ‘URLs are for People, not Computers’입니다. 요약하자면 멍청한 컴퓨터만이 이해하는 URL보다는 사람이 이해하는 URL이 더 중요하다라는 이야기죠. 저도 읽으면서 공감은 했습니다. 그래서 제 블로그 글도 숫자형식이 아니라 (영어이긴 하지만)문자열로 처리하고 있습니다. 하지만 네이버(naver.com)도 검색엔진에 ‘네이버’라고 검색해서 들어가는 한국에서 그런 환경을 기대하는 건 쓸데없는 희망이겠죠ㅠㅠ 그래도 전문번역은 합니다..

우리는 URL에 익숙합니다. 하지만 우리는 URL이 뭔가 더 대단한 것이라는 것을 항상 고려하지 않습니다. URL은 사용자와 대면하는 요소이며 (따라서) 중요한 UI적 요소로 고려돼야 합니다.

URL은 깔끔하고, 이해하기 쉽고, 의미를 담고 있으며, 계층적이어야 하고 너무 길지 말아야 합니다.

만약 URL이 쓰레기처럼 보인다면 사람들은 클릭하지 않을 것

마이크로소프트에 의해 행해진 한 연구는 URL이 웹사이트의 신뢰성과 안전성을 평가하는 데 중요한 역할을 한다고 발견했습니다.

마이크로소프트 연구소의 Edward Cutrell와 Zhiwei Guan은 ‘검색엔진에서의 시선추적 연구(원문: eyetracking study of search engine use)’를 수행했습니다. 이 연구는 사람들이 검색결과를 보고 있는 시간의 24%를 URL을 보는 데 사용한다고 밝혔습니다.
검색엔진 이용자들이 특히 목적지의 신뢰성을 평가할 때 특히 URL에 관심을 가진다는 것을 알아냈습니다. 만약 URL이 쓰레기처럼 보인다면, 사람들은 검색결과에서 덜 클릭하게 될 것입니다. 반면에 만약 URL이 사용자의 질문을 다루는 것처럼 보인다면, 그들은 클릭할 가능성이 더 높습니다.
출처: URL as UI

즉, URL은 새로운 웹사이트를 방문할 때 여러분이 보는 첫 번째 사항 중 하나이고 이러한 첫인상은 중요합니다. 깔끔하고 이해하기 쉬운 URL은 그야말로 전문적으로 보이게 합니다.

깔끔할 뿐만 아니라 의미를 담고 계층적인

URL은 의미를 담아야 하고 계층적이 되어야 합니다. 검색엔진은 의미가 담긴 URL을 좋아하고 또한 편리하기도 합니다. URL은 웹 서핑을 도울 수 있고 또 다른 사이트 이동 경로가 될 수 있습니다.

아마존의 의자 판매 페이지를 예로 들어봅시다. URL이 마치 누군가의 머리가 키보드에 굴러서 쓰인 것 같습니다.

http://www.amazon.com/gp/product/B0002K11BK/ref=sr_1_5?ie=UTF8&qid=1348439859&s=home-garden&sr=1-5

그리고 아래 주소와 비교해봅시다.

http://example.org/furniture/desk-chairs/herman-millers-mirra-chair

후자가 보기에 더 좋을 뿐만 아니라 여러분에게 지금 ‘가구 > 책상의자’ 분류에 있다고 알려줍니다. 좋은 점은 또 있습니다. 직관적으로 여러분은 모든 가구가 나와 있는 리스트로 가기 위해서 URL의 약간만 지우면 됩니다.

http://example.org/furniture/

데이터 정보

URL은 클릭 되기도 전에 웹페이지의 컨텐츠에 대한 정보를 담을 수 있습니다. 이는 도표, 메신저, 트윗, 이메일, 게시판 등의 의사소통 수단에서 매우 큰 장점입니다.

채팅창에서 다음의 링크를 보내서 비교해보세요.

https://news.ycombinator.com/item?id=5489039
vs
https://news.ycombinator.com/5489039/if-the-earth-were-100-pixels-wide

전자는 여러분에게 아무것도 말해주지 않습니다만, 후자는 (링크를 클릭하면) 어디로 갈지에 대한 느낌을 줍니다. 이것은 여러분을 더 클릭하도록 만들 겁니다. 만약 그 링크가 여러분의 관심을 불러일으킨다면 말이죠.

여보세요, 2013년입니다

깔끔한 URL은 확실히 이전보다 더 인기가 있습니다. 하지만 위의 특징들이 모두 담긴 웹사이트를 찾는 것은 여전히 드문 일입니다.

우리는 엄청난 골칫덩어리를 가지고 있습니다. 구글이죠. 심지어 2013년인데도 우리는 여전히 이런 URL을 가지고 있습니다.

https://www.google.com/search?q=characteristic#hl=en&safe=off&sclient=psy-ab&q=example&oq=example&gs_l=serp.3..0i20l2j0l2.14456.15234.3.15346.7.4.0.3.3.0.84.292.4.4.0…0.0…1c.1.8.psy-ab.N7EClFK_p4g&pbx=1&bav=on.2,or.r_cp.r_qf.&bvm=bv.44770516,d.ZGU&fp=9d62ffac663ef7ec&biw=1920&bih=944

저런 길고 괴상함의 이유는 수수께끼입니다. 특히 아래 URL이 정확히 똑같은 페이지를 제공한다는 사실을 고려하면 말이죠.

https://www.google.com/search?q=example

여러분들의 URL을 사용자에게 친화적으로 만드는 데 노력하세요. 그렇게 할만한 가치가 있고 대개 많은 일을 요구하지 않을 겁니다.

덧) 구글이 저렇게 지저분하게 검색결과 URL을 만들어내는 건 트래킹을 하기위함이라죠?;;