star

#Ludens

#social #IT #web #iPad #fashion #psychology #responsive

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

2014.11.17 09:10 in IT/Mobile

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

이전의 전송방법 VS Pushbullet

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

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

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

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

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

Pushbullet 메뉴꽤 간편해 보이죠?

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

거의 모든 플랫폼을 지원

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

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

PC에서 iPad로 파일전송

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

기타 기능들

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

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

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

신고
tagAndroid, Application, BLACKBERRY, BlackBullet, channel, chrome, File, firefox, Google, IFTTT, IOS, iPad, iPhone, Link, mac, MAIL, memo, mobile, MohammandAG, Opera, PC, pushbullet, Pushbullet-indicator, PushPal, Pushpin, Safari, Smartphone, ubuntu, web browser, Windows, Windows Phone, , 무선, 알림, 전송, 추천, 친구
받은 트랙백이 없고 , 댓글이 없습니다.

스타일리시 크롬 확장기능 설치 및 사용법

2014.01.04 20:16 in IT/Tip

크롬이나 파이어폭스를 쓰시는 분들 중 많은 분들이 이미 확장기능을 쓰고 계실겁니다. 여러 인기 있는 확장기능들이 있지만, 제가 개인적으로 좋아하는 것들은 광고차단과 이번 글에서 소개할 Stylish입니다. 요즘 크롬을 쓰는 분들이 많아져서(저도;;) 크롬을 기준으로 설명하겠습니다.

Stylish?

Stylish는 웹사이트의 CSS를 사용자가 원하는 대로 바꿀 수 있게 해주는(정확히는 덮어씌우는) 확장기능입니다. 간단하게는 자주 가는 웹사이트의 폰트나 배경화면을 마음대로 바꾸는 것부터, 레이아웃을 통째로 바꾸는 것까지 가능하게 해줍니다.

스타일리시 설치하기

준비물: 크롬이 깔린 데스크탑 또는 노트북
- 구글크롬이 없으신 분은 여기
- 구글이 싫으신 분들은 크로미움을 추천합니다

크롬이 설치되어 있다면,

  1. 크롬 웹스토어의 Stylish페이지로 이동합니다.
  2. 오른쪽 ‘+ 무료’버튼을 클릭합니다.
  3. 확인창에서 ‘추가’버튼을 클릭하면 끝!

스타일리시 사용하기

스타일리시를 사용하는 방법은 크게 2가지가 있습니다. CSS를 직접 작성하는 방법공개된 CSS소스를 가져와서 사용하는 방법입니다. 물론 여기서 CSS를 작성하는 방법은 다루지 않을 거구요;; 공개된 소스를 사용하는 방법을 알려드리겠습니다.
Stylish에서 사용할 수 있는 공개된 CSS는 userstyles.org에서 얻으실 수 있습니다. 여기서는 userstyles.org에서 제가 만든 warning.or.kr redesign을 적용해보죠.

  1. 스타일리시를 적용할 사이트인 warning.or.kr에 접속합니다.
  2. 주소표시줄 오른의 Stylish 아이콘을 클릭하고 ‘Find more styles for this site’를 클릭합니다.
  3. 새 탭으로 뜨는 페이지에서 원하는 스타일을 선택합니다.
  4. Install with Stylish 버튼을 클릭하여 스타일을 설치합니다.
  5. warning.or.kr을 다시 접속해서 바뀐 스타일을 확인합니다.

스타일리시 해제하기

설치된 스타일을 해제하는 방법도 간단합니다.

  1. 적용된 스타일을 해제할 사이트에 접속합니다.
  2. 주소표시줄 오른쪽의 Stylish아이콘을 클릭하고 해제할 스타일 밑의 ‘Disable’을 클릭합니다. (‘Delete’를 눌러 바로 삭제도 가능합니다)

스타일리시 옵션

주소표시줄 오른쪽의 Stylish 아이콘을 오른쪽버튼 클릭하고 ‘옵션’을 클릭하면 나옵니다.

스타일리시 옵션화면에서는 직접 CSS를 작성 및 수정하거나 설치된 스타일의 관리와 업데이트를 할 수 있습니다. 설치된 스타일이 깨진다면 ‘check for update’를 클릭해서 업데이트가 되었는지 확인해보는 것이 좋겠죠.

참 쉽죠?:) 제가 만든 다른 스타일인 소셜미디어 나눔고딕 강제적용도 테스트로 설치해보세요ㅎ

덧) 한글로 된 소개글이 당연히 있을줄 알고 구글링했는데 없길래 그냥 썼어요...
덧2) 이 모든 것은 다음 포스팅을 위해서;;

신고
tagchrome, css, option, Stylish, update, userstyles.org, warning.or.kr, web, 사용법, 삭제, 설치, 해제, 확장기능
받은 트랙백이 없고 , 댓글이 없습니다.

we heart it - 핀터레스트보다 예쁘고 감성적인 서비스

2012.08.21 09:15 in Web/Service

제가 자주 사용하는 서비스 중에 We heart it이라는 서비스가 있습니다.
이 서비스는 이미지 북마크 서비스로 웹서핑 중 따로 저장하고싶은 이미지를 저장할 수 있는 서비스입니다.

이미지 북마크 서비스는 이전에도 있었다

we♥it 이전에도 이미지 북마크서비스는 이전부터 유명한 서비스들이 꽤 있습니다. FFFFOUND!imgfave와 같은 곳들이죠. 하지만 저런 곳들의 단점은 무엇일까요? 메인에 이상해괴한 사진들이 은근히 많다는 겁니다.(물론 제 개인적인 생각입니다) 그리고 이쁘다고는 말 못할 UI를 가지고 있습니다.

그럼 핀터레스트는?

혹시 떠오르실지 모르겠지만, 요즘 대세라는 핀터레스트UI도 예쁘고 메인에 이상해괴한 사진도 적은 편입니다.
하지만, 저는 핀터레스트를 싫어합니다. 싫어하는 이유는 (지극히 개인적인데,) 마케팅툴로 너무 알려졌다는 겁니다.
핀터레스트 마케팅은 곧 온라인쇼핑몰의 매출이라는 생각이 많아서인지, 상품들이 많이 올라옵니다.(그렇다고 상품들이 예쁜것만 올라오는것도 아닙니다!) 그래서 장삿속이 보이는듯한 핀터레스트를 멀리하게 되어버렸죠.
(한국의 경우도 핀터레스트로 마케팅 어쩌구저쩌구 떠드는 사람들이 많죠...)

이름부터 호감형인 we♥it

제가 we♥it을 좋아하게 된 것은 서비스명이 첫 이유였습니다. 서비스명부터 엄청 사랑스럽지 않나요?+_+
전 이 서비스명을 제가 따로 운영하는 Ludens ♥ OperaLudens ♥ Infographics의 이름을 지을때 벤치마킹(?)했을 정도로 좋아합니다.

화려하진 않지만 깔끔하다

좋아한 이유 중 두번째는 깔끔한 UI였습니다. 아시는대로 핀터레스트가 더 화려한 UI를 가지고 있습니다.
하지만 한편으로 화려한 UI가 정신이 없기도 해서, 이미지를 감상한다기보다는 여러 이미지를 스캔하는 느낌이 들죠.
하지만 we♥it은 덜 화려하기때문에 이미지에 더 집중이 잘됩니다.

예쁘고 감성적인 컨텐츠

마지막으로 가장 중요한 이유는 컨텐츠입니다. 제가 이미지북마크 서비스를 둘러보면서 we♥it에 다른곳보다 이쁜 사진이 많다고 생각합니다. 전체적인 이미지 수는 적을 수 있지만, 대부분 예쁜사진들이 올라오는 이곳을 좋아합니다. 그동안 150여개의 이미지를 북마크한 저도 이미 있는 이미지에 지지않을만한 이쁘고 퀄리티있는 사진을 공유하려고 노력하고 있습니다.

초간편한 서비스 사용방법

다른 사이트들처럼 회원가입 후에 서비스를 이용할 수 있습니다. 페이스북이나 트위터로 가입할 수 있으며, 그냥 가입도 가능합니다. 그냥 가입시 아이디, 이름, 이메일, 비밀번호 입력만 하면 가입 완료입니다.

서비스는 북마클릿을 통해 사용할 수 있습니다. 미리 북마클릿을 등록해 두면, 웹서핑 중 마음에 드는 이미지를 보았을때 북마클릿을 눌러 heart만 찍어주시면 됩니다. 크롬의 경우는 확장기능이 있어 더 쉽게 사용할 수 있습니다.
(IE에서 버튼이 작동하지 않는다고 하는데, 제가 IE9으로 해봤을때에는 문제 없이 잘 작동하였습니다.)

또한 계정설정에서는 트위터와 페이스북 연동을 설정할 수 있습니다. 연동후에는 Heart를 찍으면 바로 날려주기도 합니다. (특히 페이스북은 타임라인도 지원됩니다+_+)

예쁘니까 일단 쓰세요

직관적이고 예쁜 인터페이스 때문인지, 여성유저가 엄청 많습니다. 도대체 남자유저는 어디에있나(...) 싶을정도입니다. 그러니까 일단 쓰면 됩니다.
그리고 핀터레스트의 복잡한 무한스크롤 UI에 질리셨다면, 한번 사용해보시길 권합니다. 예쁘니까 일단 써보세요.

덧) 네, 개인적인 의견이 엄청나게 많이 들어간 서비스 소개글 맞구요...
덧2) 개인적으로 핀터레스트를 많이 싫어해서 계정조차 없습니다...
덧3) 어쩌다보니 핀터레스트를 디스하는 글이 되어버렸네요;;

저작자 표시 비영리 변경 금지
신고
tagBookmarklet, chrome, Contents, facebook, FFFFOUND!, Heart, Heart Button, IMAGE, imgfave, Marketing, online, Pinterest, Service, Shopping mall, timeline, Twitter, UI, we heart it, web, we♥it, 간편, 감성, 공유, 깔끔, 예쁜, 저장, 즐겨찾기, 직관적, 화려함, 확장기능
받은 트랙백이 없고 , 댓글이 없습니다.

오페라12, 나만의 테마 초간단하게 만들기

2012.06.16 20:08 in IT/Opera

저번 글(오페라 12 베타버전 공개)에서도 언급했던대로, 오페라12부터 테마기능이 새로 생겼습니다.

이전부터 스킨기능이 있기는 했지만, 생각보다 이쁜 스킨이 없어서 많이 사용하진 않았죠. 그런데 이번에 테마가 지원되면서 오페라를 보다 예쁘게 만들 수 있게되었습니다.

오페라 테마제작은 사실 이 문서(Opera's lightweight themes)를 참고하면 된다고 오페라측에서는 소개했지만, 영어의 압박이 심하게 오는 문서라서 저도 문서보면서 만들다 포기했습니다;;

그런데 오페라 확장기능으로 Opera Theme Creator가 올라왔습니다. 이 확장기능을 사용하면 아주 간단하게 테마제작이 가능합니다.


오페라 테마 초간단 제작법


오페라 확장기능인 Opera Theme Creator를 추가합니다.

추가가 완료되면 검색창 오른쪽에 아이콘이 생성됩니다.

웹에서 테마로 삼고싶은 이미지(고해상도이미지를 추천합니다)를 찾은 후 아이콘을 클릭합니다.
아이콘을 클릭 후 이미지에 마우스커서만 올리면 알아서 잡아줍니다(...)

그 후 Try out your theme를 눌러주시고

'잠재적 보안 위험창'에서 를 누르시면 바로 적용됩니다.


오페라의 테마는 구조가 나름 간단하기 때문에 이런 확장기능으로 간단하게 만들 수 있는 것 같습니다. 
사실 전 아직 오페라 테마에 올라온 것들을 사용중입니다. 개인적으로 좋아하는 스타일들이 많아서인지 아직 제가 직접 만들어야겠다는 느낌은 안드네요;;

덧)오페라 테마기능이 크롬의 그것과 너무나 비슷하다는 느낌은 저뿐만일까요?;;

저작자 표시 비영리 변경 금지
신고
tag12.00, chrome, IMAGE, Opera, Opera Theme Creator, Skin, Theme, 초간단, 확장기능
받은 트랙백이 없고 , 댓글2개가 달렸습니다.

노트북에서 가장 오래가는 웹브라우저는?

2012.04.04 09:00 in IT/Opera


7tutorials에서 오래된 노트북의 윈도우7 환경에서 어떤 브라우저가 가장 오래가는지 테스트를 했습니다.

Test Comparison: Which Browser Will Make Your Laptop’s Battery Last Longer?

테스트는 윈도우의 전원절약기능을 보여주려는 것 같았는데, 결과가 재밌게도 오페라에 유리하게 나왔네요.


테스트환경

HP Pavillion dv7 2185dx - 나온지 2년이 넘은 노트북이라고 합니다.

  • Intel Core2 Quad CPU Q9000 @ 2.00 GHz
  • 6GB of RAM DDR2
  • ATI Mobility Radeon HD 4650
  • 깨끗한 윈도우7 환경 / 윈도우 8 컨슈머프리뷰
  • Peacekeeper battery test 사용
  • 전원관리 옵션 중 절전 사용

결과 - IE > Opera > Firefox > Chrome

IE가 1위를 하는 경우도 다 있네요.
IE시리즈 다음으로는 오페라가 올라왔고, 다음으로는 파이어폭스, 그리고 크롬이 가장 안습이네요.


오페라를 추천합니다.

Opera, the fastest and most secure web browser

이 결과로 오페라를 사용해야될 이유가 오페라링크 말고도 한가지 더 생긴 것 같습니다.
(설마 위 결과를 보고 IE를 쓰려고 하시는 분은 없겠죠?;;)
IE보다는 못하지만 파이어폭스나 크롬보다 오래가는 오페라를 추천합니다.

덧) 오페라링크와 함께라면, 집에서 들어갔던 그 사이트 노트북에서도 쉽게 다시 찾을 수 있습니다.
덧2) IE가 배터리를 조금 먹는다고해도 솔직히 못쓰겠죠?;;

저작자 표시 비영리 변경 금지
신고
tag7tutorials, BATTERY, chrome, Consumer Preview, firefox, HP, Internet Explorer, notebook, Opera, Pavillion dv7 2185dx, Peacekeeper, test, web browser, windows 7, windows 8, 전원, 절전, 추천
받은 트랙백이 없고 , 댓글 하나 달렸습니다.

빠른 웹서핑을 위한 팁 11가지

2010.01.11 10:03 in IT/Tip

작년 외국의 한 블로그에서 본 글을 번역해본다고 하고, 벌써 2010년이 되어버렸네요;; 대부분 잘 아실거라고 생각하긴 하지만… 그래도 좋은 팁같아 한번 번역해봅니다;; 원문은 '14 Simple Tips for Super Fast Web Browsing'입니다. 글이 작성된 당시와 약간 다른 부분도 있고 해서 중간중간 '※'로 제 생각을 달아놓았습니다.

빠르고, 가벼운 브라우저로 갈아타기

만약 여러분이 Internet Explorer(이하 IE)를 쓰고계신다면, 그걸 꼭 쓰실 필요는 없습니다. 지금 당장 바꾸시는 센스를 발휘하세요. IE는 무겁고 느리며, (보안상) 불안하고 웹페이지를 제대로 표시해주지 않습니다. 저는 확장성이 좋은 Firefox의 오랜 팬이였지만, 최근에는 더 빠르고 가벼운 브라우저로 갈아탔습니다. 제가 최대한 가벼운 브라우저를 원했기 때문이죠. Mac에서는 OperaCamino를, PC에서는 Google Chrome을 씁니다.
※사실 IE만 아니면 다 괜찮습니다만… 저는 구글 크롬을 추천합니다. 하지만 좀 사양이 안좋은 컴퓨터라면 오페라가 좋지요.(참고:11개 브라우저 속도 벤치마크)

창을 쓰지말고 Tab을 쓰기

Google Chrome and Safari 4 beta tab comparison

이것은 명백한 사항이지만, 많은 사람들이 여전히 새로운 사이트를 방문할 때 매번 새 창을 열고있습니다. 여러분들의 브라우저를 새 창 대신에 탭이 나오도록 설정하세요. 여러분들이 글을 읽을 때, 커맨드클릭(맥에서) 또는 휠을 클릭(PC에서)하면 링크가 새 탭으로 열립니다. 이제 여러분들은 창이 어디있는지 찾을 필요 없이 탭만 이동하면 됩니다.
IE만 제외하면 기본값으로 탭브라우징이 가능합니다.

키보드 단축키 외우기

R0019587.JPG

이것 역시 웹을 이용하는 사람들에겐 뻔한 사항입니다. 단축키를 활용해 절약하는 시간이 단축키를 배우는 시간보다 큽니다. 몇가지 공통된 예를 들자면 Ctrl+T는 새 탭열기, Ctrl+L은 주소창으로 가기, Ctrl+D는 즐겨찾기추가, Ctrl+W는 창이나 탭 닫기 등이 있습니다. 각각의 브라우저마다 다른 단축키를 가지고 있습니다. 하지만 단축키페이지를 보면 쉽게 외울 수 있을 겁니다. 몇 분 걸리지 않는 그 시간은 당신에게 매우 귀중할 겁니다.
※Opera의 단축키는 이곳에,Firefox는 이곳에,Chrome은 이곳에 있습니다.

즐겨찾기에 키워드 지정하기, 빠른연결 설정하기

대부분의 브라우저들은 즐겨찾기의 키워드기능을 지원하는데, 이걸 설정하는데는 하나당 단지 몇 초가 걸릴 뿐입니다. 여러분들이 자주 이용하는 곳들을 즐겨찾기로 등록하겠죠. 즐겨찾기한 곳으로 가기 위해서 단지 키워드만 입력하면 빠른 접근이 가능합니다. 이렇게 하기 위해서는 북마크설정으로 가서 키워드를 설정하면 됩니다. 저는 키워드중에서도 짧은 키워드를 추천합니다. 저의 경우 "gm"은 G메일, "rd"는 구글리더, "cal"은 구글캘린더, "bog"는 주거래은행, "tw"는 트위터, "st"는 블로그통계, "post"는 새 글쓰기 등입니다. 빠른연결(Speed Dial)은 오페라의 기능이지만 다른 브라우저에서도 사용할 수 있습니다. 여러분들은 자주 가는 사이트들을 지정해놓고 언제든지 Ctrl+1, Ctrl+2 등을 누르는 것으로 원하는 곳에 이동할 수 있습니다.
※처음에는 키워드 입력이 귀찮다고 생각되실지 모르지만, 써보면 확실히 편합니다ㅎ

키워드검색 설정하기

위에서 살펴본 즐겨찾기와 같이 저장한 검색엔진은 여러분들이 자주 사용하는 곳들이 겁니다. 예를들어 Google, Amazon, Wikipedia, Wiktionary, , IMDB, Ebay, Flickr 등이 있죠. 저장한 각각의 검색엔진에 키워드를 설정하면, 주소창에서도 검색을 이용할 수 있습니다. 예를들어 "im alyssa milano"라고 주소창에 입력하면 IMDB에서 Alyssa Milano를 검색하게 됩니다.
※위의 즐겨찾기 키워드기능과 마찬가지로 엄청 자주 사용하는 기능입니다+_+ 오페라에선 이걸 응용해 주소창에서 트윗을 올릴 수 있습니다.

북마클릿에 키워드 설정하기

여러 브라우저에서 유용한 기능을 가진 자바스크립트를 이용한 북마클릿을 만드는 기능이 있습니다. 예를 들어 Tumblr의 북마클릿은 현재페이지를 이용해 새 글을 작성하고, Twitter의 북마클릿은 현재페이지를 트윗하고, is.gd의 북마클릿은 현재 페이지의 주소를 줄여줍니다.(그외 좋은 북마클릿들) 북마클릿은 드래그 앤 드롭으로 즐겨찾기툴바에 끌어놓거나, 북마클릿 링크에서 오른쪽클릭을 눌러 즐겨찾기에 넣는 방법이 있습니다. 그리고 즐겨찾기 설정에서 키워드를 설정하면 됩니다. 그러면 보고있는 페이지의 주소를 줄이기 위해 주소창으로 가서 "is"만 입력하면 됩니다. 그러면 즉시 짧은 주소를 얻을 수 있죠. 이것은 어떤 북마클릿이든 가능합니다.
※사실 4번의 경우보다 6번의 경우인 때가 많죠.

Flash 차단하기

요즘 Adobe의 Flash는 웹의 어디서나 볼 수 있습니다. YouTube와 같이 영상서비스를 하는 유명한 사이트나 광고들에서 말이죠. 그리고 어떤 곳은 사이트 전체가 플래시로 되어있는 모습을 볼 수 있습니다. 이것들은 솔직히 성가시죠. 플래시는 느립니다. 그래서 저는 차단하는걸 기본으로 설정해놓습니다. 하지만 유투브 등에서 켜야 할 옵션이 필요하죠. Camino에서는 쉽게 켜고 끌 수 있습니다. 다른 브라우저에서도 플러그인이나 확장기능으로 플래시를 끌 수 있고, 해당 플래시를 누르는 것으로 다시 킬 수 있을 겁니다.
유저스크립트를 이용해 막을수도 있습니다:)

깔끔하게 보기

저는 대부분의 사이트에서 산만함 없이 읽는 것을 좋아합니다. 그래서 저는 두가지 북마클릿을 사용하고 있죠. 글을 읽을땐 Readability를, 동영상을 볼때는 Quietube를 씁니다.
※Readability는 텍스트가 많은 블로그글을 볼 때 특히 유용합니다+_+

대부분의 확장기능을 끄기

Firefox는 확장기능덕에 훌륭한 브라우저입니다. 하지만 여러분들이 너무 많은 확장기능을 쓴다면 그것들은 브라우저가 느려지고 무거워지는 원인이 될 수 있으며 버그가 생길 수도 있습니다. 따라서 제가 파이어폭스를 쓸때는 대부분의 확장기능을 끄고 사용하며 Camino에서는 거의 쓰지 않습니다.

탭은 조금만 열기

많은 탭을 여는 것은 많은 사람들의 일반적인 웹서핑모습입니다. 하지만 브라우저가 느려지죠. 저 역시 많은 탭을 여는 경향이 있는데, 너무 번잡하다고 생각될때마다 즐겨찾기에 추가하고 탭들을 닫습니다. 그렇게 저는 2개~3개정도의 탭만 열어놓고 씁니다.

대부분의 툴바를 제거하기

저는 최소한의 툴바를 좋아해서 대부분의 툴바와 많은 버튼을 제거했습니다. 있을것만 딱 있는 셈이죠

신고
tagBookmarklet, Camino, chrome, firefox, flash, Internet Explorer, Keyword, Opera, Quietube, Readability, surfing, tab, tip, toolbar, web, 검색, 단축키, 빠른, 즐겨찾기, 확장기능
트랙백이 하나이고 , 댓글17개가 달렸습니다.

TTF웹폰트에 대해서

2009.10.05 18:48 in Web/Coding

웹폰트라고 하면 IE의 eot를 생각하시는 분들이 많을 겁니다. 그도 그럴 것이 '웹폰트'라는 건 IE에서만 eot로 계~속 지원되었으니 말이죠. 그런 웹폰트를 현재는 오페라, 파이어폭스, 크롬, 사파리 최신버전에서 사용할 수 있습니다. eot형식이 아닌 TTF형식으로 말입니다.

제가 처음 TTF웹폰트에 대해 알게 된 건 오페라10 알파버전에서 막 지원되었을 때였습니다. 지원이 된다고 했을 때 저는 믿기지 않았지만 예제를 보고 대충 따라 했더니 실제로 되더군요.
그 뒤부터는 계속 블로그에 TTF웹폰트를 적용시켰습니다. 현재는 렉시굴림을 사용하고 있습니다.

TTF웹폰트를 사용하려면 먼저 폰트를 적당히 어딘가에 올린 뒤 CSS에 아래의 내용을 추가시키면 됩니다.

그냥 eot웹폰트 적용하는것과 거의 같다고 보면 되죠. 이름(렉시굴림)과 경로지정(./images/LEXIGULIM.TTF)만 잘하면 됩니다. 이 이후로는 eot적용과 별반 차이가 없으므로 넘어가겠습니다.

TTF웹폰트를 적용시켜서 다른 브라우저에서는 폰트가 나오지만, IE에서는 나오지 않는 문제가 발생해서 어떻게 하면 될까 하다가 아래와 같이 하니 해결이 되더군요.

간단하게 eot를 아래에 붙여주기만 하면 끝이었습니다. 물론 TTF웹폰트와 eot웹폰트의 이름은 달라야겠죠.

이렇게 TTF와 eot를 사용해봤더니 각각 장단점이 있더군요. 아래 표를 보시면 이해가 빠르실 겁니다.

TTF eot
장점 변환이 필요 없다
많은 웹브라우저에서 지원한다.
파일크기가 매우 작다
원하는 주소에만 적용이 가능하다
단점 파일크기가 크다
암호화되지 않는다
번거로운 변환이 필요하다
IE를 제외하면 지원하는 브라우저가 없다.

TTF는 변환 없이 그냥 웹 상에 업로드 하는 것만으로도 사용준비 완료이지만, eot는 MS의 Weft라는 프로그램을 이용해서 변환시켜야 합니다. 그리고 TTF의 최대강점은 eot와 다르게 여러 브라우저에서 지원한다는 점이죠.

하지만 TTF는 파일크기가 너무 큽니다. 영문폰트는 그나마 작은 편이지만 한글폰트는 영어와 한글을 모두 담아야 하기 때문에 벌어지는 현상이죠. 지금 적용한 렉시굴림도 2메가가 약간 넘는 크기입니다.(이것도 그나마 작은 편이죠ㅠㅠ) 파일크기가 크면 그만큼 웹페이지 접속에 시간이 더 걸리기 때문에 상당한 단점이라고 볼 수 있습니다. 반면에 eot는 변환하면서 크기가 매우 작아지기 때문에 속도는 빠르죠.

그리고 TTF는 암호화 되어있지 않습니다. 지금 인터넷임시파일 폴더를 뒤져보시면 아실 겁니다. 따라서 상용폰트로는 사용 불가능합니다. eot는 변환하는 도중에 사용할 사이트주소를 입력해서 그 이외의 사이트에서는 적용되지 않도록 합니다. 그렇기에 싸이월드에서 판매 할 수 있는 것입니다.

사용자 삽입 이미지오페라에서는 안보이는 eot-_-+ IE점유율이 떨어지면 싸이월드의 수익도 떨어질것이 분명합니다(?)

이렇게 TTF와 eot모두 부족한 점이 많습니다. 아직 웹폰트는 갈 길이 멀죠ㅎㅎ TTF웹폰트에 대해 궁금하신 분들이 꽤 계셔서 일단 제가 아는 내용을 적었는데 의문이 풀리셨는지 궁금하네요:)

신고
tagchrome, eot, firefox, Opera, Safari, TTF, Web font, 렉시굴림
받은 트랙백이 없고 , 댓글8개가 달렸습니다.

브라우저별 ‘페이지를 표시할 수 없습니다’ 페이지들

2009.07.19 00:25 in IT/Program

며칠 전 오페라10 베타 2가 나왔습니다. 깔아서 사용하다 보니 '페이지를 표시할 수 없습니다'의 화면이 바뀐 것을 알아챘습니다. 오늘은 그것을 기념하기 위해(?) 브라우저별로 모아보았습니다.

먼저 가장 높은 점유율을 차지하고 있는(-_-+) Internet Explorer
제 윈도우7 RC에 깔려있는 Internet Explorer 8 입니다. IE6때에 비하면 그나마 괜찮은 모양새이긴 합니다만 아직은 영 아니에요.IE8

다음은 IE를 추격하고 있는 Firefox와 Chrome입니다. 파이어폭스는 딱딱한 문구가 보이고 크롬은 다른 곳을 추천해주는 것이 눈에 띕니다.

다음으로 사파리 4.0.2버전입니다. 사파리는 좀 예쁘군요:)
Safari

마지막으로 Opera 10 Beta 2 입니다. 이번 2번째 베타부터 화면이 바뀌었습니다. +_+Opera 10 beta 2

저는 이번에 화면이 바뀐 오페라의 페이지가 예쁘다고 생각합니다만…
여러분들은 어떠신지요? :)

덧) 스샷을 제공해주신 @mckabi @Ceruel @uioiu @seoulrain @3453k 5분 모두 감사합니다:)
덧2) 오페라는 다른 기본화면들도 아래처럼 바뀌었습니다. 아래는 config화면입니다.Opera 10 beta 2

신고
tag3453k, Browser, Ceruel, chrome, firefox, Internet Explorer, mckabi, Opera, Safari, seoulrain, uioiu, 페이지를 표시할 수 없습니다
받은 트랙백이 없고 , 댓글6개가 달렸습니다.

스킨,폰트 바꿨습니다.

2009.02.20 22:09 in Blog


참 오랜만에(?) 스킨을 바꿨네요.

Windows 7을 설치하고 난 뒤로 바꾸어야 겠다는 생각은 계속 있었는데 말이죠.
어쨌든 이번 컨셉을 윈도우7으로 잡으려다 home.live.com으로 바꾸었습니다[각주:1]

다른 3단스킨을 찾아헤매다가 결국 못찾아서 2단이라도 쓰자고 했으나... 결국 맘에드는 스킨이 없어서 이전에 쓰던 Butterfly스킨을 수정했습니다.
사용자 삽입 이미지
일단 왼쪽 사이드바 옆에있던 메뉴를 다 없애고 본문폭을 550px로 늘렸습니다. 470은 너무 답답해요ㅠㅠ 그리고 메뉴들은 일단 위로 올렸는데 좀 휑한것 같기도 하군요 흠;;;

두번째로 폰트도 바꿨지요.
한겨레결체 이후에 무료폰트를 물색하던 중 순천향체가 눈에 들어왔습니다.
사용자 삽입 이미지
깔끔하고 보기 좋은게 딱이더군요+_+
순천향대학교에서 만들어 여기에서 무료배포를 하고 있습니다.

저번과는 다르게 eot도 적용시켜보았습니다.
@font-face {font-family: "순천향체";src: url("./images/fonts.TTF");}
@font-face {font-family: "순천향체IE";src: url("./images/fonts.eot");}
위처럼 무식하게(?) 폰트페이스를 두개 적용을 했더니 잘 나오더군요.
일단 저는 오페라,크롬,IE7에서 테스트해본 결과 잘 나왔습니다.

나름 윈도우삘을 낸다고 했는데 잘 된건지 모르겠네요.
적용하고 보니 그냥 시원한 느낌의 스킨이 된듯한 느낌이;;;

+추가합니다
일단 사이드바 크기를 좀더 줄였습니다. 그래도 Karion님이 말씀해주신 문제가 해결이 안되네요ㅠㅠㅠ 가로해상도가 1024 이상이면 잘 보이긴 합니다만;;;
위의 메뉴를 '아크몬드'님의 '아크몬드바'로 적용시켰습니다. 원래 용도는 저게 아닌데 말입니다. 아크몬드님껜 죄송(?)하군요;;;

++추가합니다
IE6에서 이상하게 나와서 eot가 있는 구절은 뺐습니다-_-+ 진짜 IE6는 공공의 적인듯...

덧)전 순천향대생이 아니에요;;;
덧2)스킨 깨지는부분이 있으면 말씀해주세요~

  1. 결국 거기서 거기이긴 합니다만;;; [본문으로]
신고
tagBlog, Butterfly, chrome, Internet Explorer, Microsoft, Opera, Skin, windows 7, 글씨체, 순천향체, 한겨레결체
받은 트랙백이 없고 , 댓글20개가 달렸습니다.

티스토리 툴바