star

#Ludens

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

CDN으로 바로 사용가능한 한글 웹폰트 총정리

2015.10.08 08:30 in Web/Coding

작년 글에서 구글 Early Access에서 제공하는 웹폰트를 살펴보았다면, 이번에는 한글날 기념으로(?) CDN 사이트인 jsDelivr에 올라온 웹폰트를 소개해보려고 합니다.

jsDelivr에 올라와 있는 웹폰트들은 woff와 woff2형식으로만 제공되기 때문에(나눔바른고딕은 제외) 인터넷 익스플로러는 IE9 이상부터 적용됩니다.

구글과 겹치는 폰트와 저작권 문제가 있을것이라고 판단한 몇가지는 제외했습니다.


나눔바른고딕

제가 최근에 가장 많이 사용하는 웹폰트입니다. 전 특히 얇은 버전을 좋아합니다 :)

  • normal 300:
  • normal 400:
  • normal 700:

코드보기(클릭)

본고딕 (Noto Sans)

구글과 어도비에서 만든 폰트입니다. 漢子도 지원된다고 하네요.

  • normal 250:
  • normal 300:
  • normal 350:
  • normal 400:
  • normal 500:
  • normal 700:
  • normal 900:

코드보기(클릭)

스포카 한 산스

어제 공개된 따끈따끈한 새 폰트입니다. 위의 Noto Sans를 수정해서 만들어진 폰트라네요!

  • normal 300:
  • normal 400:
  • normal 700:

사용방법은 폰트 소개 페이지를 참고해주세요 :)

다음체

다음이 사망(ㅠㅠ)하고 배포페이지도 사라졌네요

  • normal 400:
  • normal 700:

코드보기(클릭)

고도체

고도몰로 유명한 고도소프트에서 배포하는 폰트입니다.

  • normal 400:
  • normal 700:

코드보기(클릭)

한겨레결체

2005년에 한겨레에서 배포한 폰트였죠. 모르는 사람이 많더군요ㅎㅎ

  • normal 400:

코드보기(클릭)

롯데마트 드림체

롯데마트에서 배포하는 폰트 중에 '통큰체'도 있었는데, 저작권 문제로 배포가 중단되었더군요. 여기에는 드림체와 행복체만 가져왔습니다.

  • normal 300:
  • normal 400:
  • normal 700:

코드보기(클릭)

롯데마트 행복체

이 폰트 처음 써보는데 이쁘군요 +_+

  • normal 400:
  • normal 700:

코드보기(클릭)

정음체

북한과 합작해서 만들었다고 합니다.

  • normal 400:

코드보기(클릭)

대한체

  • normal 400:
  • normal 700:

코드보기(클릭)

부산체

  • normal 400:

코드보기(클릭)

성동고딕체

신기하게 '광역시'나 '도'가 아닌 구청에서 제작한 폰트네요.

  • normal 700:
  • normal 800:

코드보기(클릭)

성동명조체

  • normal 400:
  • normal 700:

코드보기(클릭)

바른바탕체

  • normal 300:
  • normal 400:
  • normal 700:

코드보기(클릭)

바른돋움체

  • normal 300:
  • normal 400:
  • normal 700:

코드보기(클릭)

청소년체

한국청소년활동진흥원(길다;;)에서 배포하는 폰트입니다.

  • normal 400:

코드보기(클릭)

덧) 구글에서 제공하는 폰트까지 합치면 총 24가지 한글 웹폰트를 쓸 수 있군요.

신고
tagAdobe, Code, css, Google, jsDelivr, Lotte Mart, Noto Sans, Spoqa, webfont, 가독성, 고도소프트, 고도체, 나눔바른고딕, 다음커뮤니케이션, 대한인쇄문화협회, 대한체, 드림체, 바른돋움체, 바른바탕체, 본고딕, 부산, 부산체, 북한, 성동고딕체, 성동구청, 성동명조체, 신문사, 여성가족부, 정음체, 청소년체, 한겨레, 한겨레결체, 한글날, 행복체
받은 트랙백이 없고 , 댓글이 없습니다.

PC웹에서 twemoji로 이모티콘 이쁘게 보기

2015.06.26 14:51 in Web/Coding

emoji
emoji by downloadsource.fr

스마트폰📱에 내장된 기본이모티콘 많이들 쓰시나요? 전 예전에는 iOS랑 안드로이드랑 호환이 안되서 많이 안쓰다가, 최근에는 호환이 잘 되는 것 같아 자주 쓰고 있습니다. 😀😀

그런데 이 이모티콘들, PC💻에서도 쓸 수 있습니다.

  • 맥OS: 타이핑 중, Command+Control+Space 키[각주:1]
  • 윈도우8: 터치키보드에서 이모티콘 선택[각주:2]
  • 공통: 이모티콘 사이트(Get Emoji 등)에서 복사+붙여넣기

문제는 이 이모티콘이 이쁘게 적용되지 않는 브라우저들도 있다는 거죠.
(여기서는 IE를 예로 들었지만 크롬에서도 비슷합니다..)

지원 안되는 브라우저들 시르다 😭😭

이 상황에 대한 해결책이 바로 트위터에서 만든 twemoji인 것이죠. 😆😆

10초만에 설치하기

twemojigithub에 공개되어있고, CDN에서 끌어다 쓸 수 있어서 매우 편합니다.  적용하고 싶으신분들은 아래 두줄만 HTML코드 중 </body> 위에 추가시키면 끝입니다.

그런데 기본크기가 36x36으로 좀 큽니다. 그래서 작게 나오도록 코드를 수정했습니다.

사이즈는 16, 36, 72가 있습니다. 16과 36의 중간크기가 없는게 아쉽네요😥😥

참 쉽죠? :)

  1. <a href="http://macnews.tistory.com/1723" target="_blank">OS X 매버릭스의 새로운 이모티콘•특수문자 입력 방법 마스터하기</a> [본문으로]
  2. <a href="http://blog.getemoji.com/emoji-keyboard-windows" target="_blank">How To Use Emoji On Windows 8</a> [본문으로]
신고
tagAndroid, Browser, chromium, emoticon, html, Internet Explorer, IOS, mac os, PC, tip, twemoji, web, windows 8, 설치, 호환
받은 트랙백이 없고 , 댓글이 없습니다.

인포그래픽 한장으로 보는 소셜미디어 이미지 크기

2015.06.25 15:09 in Web/Service

정말로, 오랜만에 써보는 글이네요.
RSS 리더기를 눈팅만하다가 괜찮은 인포그래픽을 하나 발견해서 올려봅니다 😃😃

페이스북, 구글플러스, 트위터, 텀블러, 유투브, 링크드인, 핀터레스트, 인스타그램의 프로필과 커버에 들어가는 이미지 사이즈를 알려주는 인포그래픽인데요, 제작한 곳은 Canva라는 곳입니다.

Canva를 처음 듣는 분이 계실텐데, 사이트에 들어가보시면, 페이스북 커버사진이나 인스타그램 이미지, 포스터 등을 간단하게 만들 수 있는 그래픽 툴을 무료로(!) 제공하는 곳입니다. 저는 아이패드 앱으로 먼저 알게됬는데, 웹에서도 사용 가능하네요 😍😍


전체 인포그래픽 보기

내용이 긴 편이라, 잘라서 살펴보도록 하죠. 순서는 약간 바꿨습니다.

페이스북

페이스북은 커버 이미지, 프로필사진, 게시글 이미지 이렇게 3가지로 나누어져 있습니다.

  • 커버이미지: 851px × 315px
  • 프로필사진: 180px × 180px
  • 게시글 이미지: 1200px × 900px

페이스북에서 조심해야 할 점은 커버사진의 프로필사진영역이 중요한 정보를 가리면 안된다는 것과, 커버와 프로필이 이어지는 이미지로 작업한다면,[각주:1] 프로필 이미지가 160px로 줄여져서 나온다는 부분은 조심해야 겠죠.

인스타그램

인스타그램 웹버전이 어느새 위의 캡쳐이미지 처럼 바뀌었네요 😓😓
그래도 업로드하는 이미지 크기(640px)는 그대로입니다.

트위터

요새 많이 죽었지만(주그지마ㅠ) 그래도 올려봅니다. 트위터도 역시 페이스북과 마찬가지로 커버 이미지, 프로필사진, 게시글 이미지가 있습니다.

  • 커버이미지: 1500px × 500px
  • 프로필사진: 400px × 400px
  • 게시글 이미지: 1024px × 512px

트위터가 페이스북을 자꾸 따라하다보니 비슷비슷하네요. 역시 주의할 점은 페이스북처럼 커버사진이 중요한 정보를 가리면 안되겠고, 커버와 프로필을 이어지는 이미지라면 역시 프로필사진이 200px로 줄어든다는 점을 확인해야겠죠. 그리고 게시글 이미지는 타임라인에선 505px × 253px으로 나오지만, 비율은 그대로라서 상관은 크게 없어 보이네요.

텀블러

텀블러는 이미지를 보아하니 대시보드 기준이네요. 대시보드에서는 프로필사진과 게시글 이미지가 있습니다.

  • 프로필사진: 128px × 128px (최소)
  • 게시글 이미지: 1280px × 1920px (최대)

제 생각엔 게시글 이미지는 실제 표시되는 이미지의 가로 500px만 맞춰주면 될 것 같네요.

핀터레스트

텀블러와 함께 뜨고있는(근데 수익모델은 뭘까싶은) 핀터레스트입니다. 핀터레스트엔 프로필사진, 보드사진, 핀된 이미지가 있습니다.

  • 프로필사진: 165px × 165px
  • 보드사진: 가로 236px 이상
  • 핀된 이미지: 가로 600px736px 이상

보드사진은 제가 측정했을때는 216px × 146px으로 나옵니다. 사실 가로 236px로 되어있는 이유는 핀된 이미지를 메인페이지에서 보여줄때 가로를 236px로 보여주기 때문인 것 같네요. 그리고 핀 된 이미지는 확대했을 때 600px가 아니라, 736px이상이여야 잘 나옵니다.

유투브

유투브는 개인 프로필대신 채널페이지가 있죠.

  • 채널아이콘: 800px × 800px
  • 채널아트: 2560px × 1440px

이미지크기가 엄청 크네요 😣😣 채널아이콘은 98px로 표시되면서, 권장사이즈는 800px이군요. 그리고 비디오 비율은 16:9로 표시되어야 한다네요.

링크드인

국내에서는 많이 사용하진 않지만, 해외에서 흥하고있는 링크드인입니다. 링크드인은 개인프로필 페이지와 회사프로필 페이지로 나누어져 있네요.

  • 개인 프로필사진: 500px × 500px
  • 개인 커버이미지: 1400px × 425px
  • 회사 로고: 100px × 60px
  • 회사 커버이미지: 646px × 220px

링크드인은 크리에이티브한 사진을 넣기보단.. formal한 사진을 넣어야해서 그런지, 개인 커버이미지는 옵션입니다.

구글플러스

아무도 쓰지않...는듯한 구글플러스입니다. 요새는 안드로이드 앱을 테스트 중이라면 커뮤니티에 가입해야 테스트 앱을 받아볼수도 있기도 해서, 약간 사용자가 늘어난 것 같기도 합니다. 어쨌든, 구글플러스의 프로필페이지엔 프로필사진, 커버이미지, 게시글 이미지 3가지가 있습니다.

  • 프로필사진: 250px × 250px
  • 커버이미지: 1240px × 700px
  • 게시글 이미지: 가로 497px

크게 주의할 점은 없고, 역시 유투브처럼 이미지가 크다는 특징이 있네요.


이렇게 정리해보니 많네요..
저는 이미지크기를 딱 맞게 올리거나 하는건 추천하지 않습니다. 인스타그램처럼 리디자인되어 이미지 크기가 바뀌거나 한다면, 이쁘게 안나올 수도 있으니까요 😢

역시 사진은 크게크게 올리는게 최고입니다 😎😎

  1. <img src="http://cfile4.uf.tistory.com/P150x100/2106BC44558B78900AB260"> [본문으로]
신고
tagCanva, cover, facebook, Google+, infographic, instagram, linkedin, Pinterest, Profile, social media, tumblr, Twitter, youtube, 게시글, 사진, 크기
받은 트랙백이 없고 , 댓글이 없습니다.

의외로 재미있는 Pornhub의 접속통계들

2014.08.29 14:29 in Web

예로부터 야한 컨텐츠와 첨단기술의 발전은 함께 해왔다고 해도 큰 무리가 없을 겁니다(?) 대표적으로 비디오 테이프 표준 전쟁이라는 예가 있죠.

미국에서 포르노 영화를 VHS로만 제공하면서 비디오테이프 표준 전쟁에 큰 영향을 끼쳤다고 평가한다는 의견도 있다.

요즘에도 로봇, 증강현실 등 많은 곳에서 첨단기술과의 융합을 시도하고 있을 겁니다(?)

이 글에서 이야기할 Pornhub는 스트리밍 동영상 기술이 발전하면서 나온 서비스입니다. 야동 스트리밍계의 유투브라고나 할까요? 비슷한 서비스가 여럿 있지만, 그 중에서도 꽤 큰 편이라고 합니다.


며칠 전 Pornhub에서 블로그를 통해 OS별 접속통계를 공개했는데 구경해보니 재미있는 부분이 좀 있더군요. 간추려서 올려봅니다.

데스크탑 OS

실제 사용과 큰 차이를 보이지는 않습니다만… NetMarketShare(2014년 7월 기준)에선 90%가 넘는 윈도우가 85%까지 줄고 6%대의 맥이 10%까지 뛰었군요.

데스크탑 윈도우 버전

7이 가장 많습니다. 2위는 8이 아니라 XP군요. 재미있는 점은 NT와 2000이 합쳐서 0.5%가량 된다는 것이죠. 게다가, Pornhub에선 매달 윈도우95와 98을 쓰는 수천 명의 사람들이 검색한다는데, 아직도 사용자가 있다는 이야기네요.

데스크탑 OS별 국가들

윈도우와 맥 모두 미국이 가장 많습니다. Pornhub 자체가 미국사이트이기도 합니다만, 우리 모두가 프록시를 ‘미국’으로 설정해서 쓰는 것도 이유가 될 것 같네요. 특이한 부분은 리눅스의 인도입니다. 미국에 이어 2위입니다. 차이도 크지 않네요. 역시 떠오르는 IT강국입니다(?)

모바일 OS

모바일 OS도 크게 다르지는 않습니다. 안드로이드가 앞선 모양새지만, iOS도 만만치 않고요. 블랙베리와 윈도우폰의 안습함이 여실히 드러납니다. 블랙베리가 %가 적은것이 업무용 폰이기 때문이라고 변명하기엔 좀 그렇겠죠?;; 그리고 의외로 삼성이 있습니다. 아마 타이젠이나 바다일텐데, 자세히 알 수 없는 점은 아쉽네요.

태블릿 OS

태블릿도 사용량 통계(StatCounter, 2014년 7월 기준)와 거의 비슷합니다만, iOS가 좀 더 높고 안드로이드가 더 떨어지는 모양새입니다. (역시 아이패드가 좋습니다…?) 태블릿에선 발 뺐다는 블랙베리가 의외로 꽤 되네요. 뒤이어서 윈도우 태블릿(아마도 서피스)도 있습니다. 성장세라는 뜻이겠죠?ㅎㅎ

게임콘솔

요새 게임기는 인터넷도 된다죠.. 플스2 이후로 콘솔을 손에 못 잡아봐서 어떨지는 모르겠지만, 플레이스테이션 3와 엑스박스가 대부분을 차지하고 있습니다. Kotaku에 따르면 플레이스테이션3가 3과 4가 합쳐진 것이고, 엑스박스가 1과 360이 합쳐진 것으로 보인다고 하네요. 의외로 플레이스테이션 비타와 닌텐도 3DS에서도 접속한다는 사실입니다. 저런 기기까지 지원하는 Pornhub쪽도 대단하네요ㄷㄷ

머문시간

다들 비슷비슷합니다. 이런 이유겠죠?(…)

덧) 원문은 OS Battle - Porn by the Platform입니다.
덧2) 그런데 눌러봐야 warning.or.kr로 갑니다.
덧3) 그러니 warning.or.kr 디자인을 쌈빡하게 바꿔봅시다(?)
덧4) 차마 OS별 검색어통계는 못올리겠어요(...)

신고
tagAndroid, BLACKBERRY, Desktop, IOS, iPad, Linux, mac, Nintendo 3DS, OS, playstation, Playstation vita, pornhub, SMART PHONE, streaming, tablet, warning.or.kr, Wii, Windows, windows nt, Windows Phone, xbox, 게임기, 닌텐도, 동영상, 미국, 삼성, 성인, 시간, 야동, 인도, 접속, 첨단기술, 통계, 평균
받은 트랙백이 없고 , 댓글이 없습니다.

현재 사용가능한 한글 구글 웹폰트들

2014.08.10 22:33 in Web/Coding

구글 웹폰트 early access에 얼마전에 공개된 본고딕이 새로 생겼나 보려고 들어갔다가 의외로 한글 폰트들이 여럿 있어서 모아보니, (2014년 8월 10일 현재) 총 10개가 되네요. 또 다른 웹폰트가 추가되면 이 글도 업데이트 시키도록 하겠습니다.


한나체

배달의 민족으로 유명하죠?ㅎㅎ

  • normal 400:

코드보기(클릭)

제주고딕

스타일이 normal에 400 하나뿐인게 아쉽네요ㅠㅠ

  • normal 400:

코드보기(클릭)

제주명조

  • normal 400:

코드보기(클릭)

제주한라산체

  • normal 400:

코드보기(클릭)

KoPub 바탕

종이책과 ebook용도로 만들어진 폰트죠. 아직 바탕체만 있고, 돋움체는 없네요;;

  • normal 300:
  • normal 400:
  • normal 700:

코드보기(클릭)

나눔고딕

  • normal 400:
  • normal 700:
  • normal 800:

코드보기(클릭)

나눔고딕 코딩

아래 코드 깔끔하게 보이지 않나요?ㅎ

  • normal 400:
  • normal 700:

코드보기(클릭)

나눔명조

  • normal 400:
  • normal 700:
  • normal 800:

코드보기(클릭)

나눔손글씨 붓

  • normal 400:

코드보기(클릭)

나눔손글씨 펜

  • normal 400:

코드보기(클릭)

신고
tagCode, css, Google, html, KoPub 바탕, webfont, 나눔고딕, 나눔고딕 코딩, 나눔명조, 나눔바른고딕, 나눔손글씨 붓, 나눔손글씨 펜, 제주고딕, 제주명조, 제주한라산체, 한나체
받은 트랙백이 없고 , 댓글이 없습니다.

티스토리에 바라는 소소한(?) 것들

2014.05.07 23:58 in Web/Service

몇년째 안바뀌는듯한느낌은 착각인거죠? 그렇죠?(...)

티스토리를 사용한지도 어언... 6년이 넘었습니다. (스킨이 이렇지만 티스토리 맞습니다;;) 제가 2007년 11월 18일에 이 블로그를 열었는데요. 저도 그렇고, 제 블로그도 그렇고 초창기와는 많이 달라졌습니다. 그때부터 블로그를 하시던 분들도 티스토리를 많이 떠났습니다. 어떤 분들은 아예 블로그를 그만하시기도 하구요. 저도 예전에는 1일 1포스팅에 불타던(...) 시절이 있었습니다만, 이제는 1주1포스팅도 힘든 모양새입니다ㅠㅠ

바쁜거야 그렇다 치고 말이죠. 티스토리를 6년 넘게 사용하다보니, 안좋은 점들이 눈에 꽤 띕니다. 기능적인 면에서 부족하다고 생각하신 분들은 워드프레스로 떠나셨고, 네트워크나 방문자적인 부분 또는 수익 등에 부족함을 느껴서 네이버블로그로 떠나신 분들도 계시죠. 저도 워드프레스로 떠나고 싶었지만... 어찌어찌하다보니 그냥 여기 남아있네요. 그래도 이번 간담회 참석신청과 함께 아쉬운 점은 좀 적어볼까하여 짧게나마 적어봅니다.

카테고리별 RSS

워드프레스의 경우 각각 카테고리에 대해서 RSS를 설정할 수 있습니다.

http://estima.wordpress.com/category/짧은-생각-길게-쓰기/feed

개인적으로 글이 많아지고 카테고리가 점점 더 늘어나다보니 이런 수요가 좀 생기네요.

이걸론 부족해요(...)

매주마다 디자인소스를 모아서 발행하고 있는데, 그 부분만 따로 떼어서 RSS를 만들고 싶은 마음입니다ㅠㅠ

대표이미지 치환자

현재의 대표이미지(워드프레스의 경우 featured image)는 거의 티에디션을 위한 것이죠. 하지만 제 개인적인 욕심은 티에디션만을 위한 대표이미지가 아닌 스킨에서도 사용할 수 있게되기를 바라는 마음입니다. 스킨에서의 사용도 있지만, 특히 페이스북과 트위터와 같은 SNS에서 헤더에 코드를 넣어서 이미지를 매칭시키는데, 거기에 매칭할 수 있게된다면 좋을 것 같습니다.

SNS 연계

요즘에는 트위터랑 페이스북을 빼놓고 살기가 참 그렇죠;; 그런데 티스토리 자체 플러그인의 소셜 공유버튼은 정말 안이쁘죠ㅠㅠ 물론 사용자가 더 이쁜 버튼을 넣을 수 있긴 하지만, 그게 모두에게 쉬운 건 아니죠;;

그리고 헤더에 들어가는 SNS관련 코드들(티스토리 블로그에 트위터카드 적용하기)을 손으로 넣어줘야하는 불편함이 있습니다. 이 부분은 플러그인으로 간단히(?) 해결이 가능하지 않을까 생각합니다;;

스킨가이드를 위키화

티스토리가 서비스를 시작한지 8년이 지났습니다. 그런데 그 동안 스킨가이드는 별로 바뀐 일이 없었죠. 차라리 이 가이드를 위키형식으로 바꾸면 어떨까요? 서비스를 오픈한 뒤 거의 바뀌지 않았지만, 그래도 약간씩은 변한 사항들이 있으니 기존사용자들이 수정에 참여할 수 있었으면 좋겠네요.

새로 가입하신 분들을 위한 안내


Gwoeii / Shutterstock.com

티스토리에 처음 오신 분들이 어려워하는 건 기술적인 문제(어렵다!)도 있지만 ‘가입해서 블로그를 만들었는데 뭘 해야하는가?’가 가장 크다고 생각합니다. 티스토리에 첫발을 내딛는 분들을 위한 안내가 좀 더 자세히 있었으면 하는 바램입니다. 같은 이유로 글 서식도 좀 더 많아졌으면 좋겠다는 생각이 드네요 :)

신고
tag2007년, category, guide, IMAGE, rss, Skin, SNS, Tistory, wiki, 공유, 치환자
받은 트랙백이 없고 , 댓글이 없습니다.

티스토리 에버노트 플러그인 VS Postach.io

2014.03.25 15:24 in Web/Service

얼마 전, 티스토리에 에버노트 플러그인이 생겼습니다. - Evernote 플러그인 오픈 안내

에버노트를 많이 쓰시는 분들은 상당히 반기는 분위기이던데요. 하지만, 알고 보면 에버노트 자체를 블로그화 시켜주는 Postach.io라는 서비스도 있습니다. 언뜻 보면 비슷한 두 서비스지만, 사용해보면 많이 다르더군요. 간략하게(?) 소개 겸 비교를 해봤습니다 :)

Postach.io?

Postach.io는 에버노트에 노트를 작성하고 간단한 태그만 입력하면 바로 블로그에 글을 올려주는 서비스입니다.(사용법과 자세한 소개는 에버노트로 작성하고 퍼블리싱하는 멋진 블로그 서비스 ‘Postach.io’를 참고해보세요.) 2013년 에버노트 Devcup 금상을 수상한 서비스이기도 하죠.

그리고 현재 한국 에버노트 공식블로그도 Postach.io를 사용하고 있습니다. 참고로 이전까지는 텀블러를 사용했었죠.(근데 본사 블로그는 워드프레스군요;;)

Postach.io는 시작부터 글쓰기 그리고 글의 공개까지 상당히 심플하고 간단합니다. 블로그서비스라는 측면에서 봤을때, 글을 쓰는 또는 수정하는 부분이 없다는 건 독특합니다. 글을 쓰는 부분은 모두 에버노트에서 담당하기 때문에, 이전부터 에버노트를 활용해왔던 분이라면 손쉽게 글을 쓰고, 글을 공개할 수 있습니다. 그리고 에버노트에서 수정하면 바로 공개된 글에 바로 반영됩니다.

반대로 에버노트에 모두 맡기는 것이 오히려 단점이 되기도 합니다. 오로지 ‘에버노트’에서만 글 작성과 수정이 가능해서, 동영상과 같은 자료를 넣는 게 좀 제한적이긴 합니다(그래도 요즘엔 유투브,비메오 등은 코드로 지원해주고 있습니다) 그리고 하나 더 치명적인 단점이, 제목과 태그에 한글을 넣어 작성하면 모든 한글이 로마자로 자동변환(!)된다는 것입니다. 아래처럼 말이죠.

Evernote 블로그가 Postach.io와 함께 새롭게 탄생하였습니다.
evernote-beulrogeuga-postach-iowa-hamgge-saerobge-tansaenghayeossseubnida

에버노트를 열심히 사용하시는 분들이고, 위의 로마자 자동변환 문제만 신경 쓰지 않는다면, Postach.io를 추천 드립니다.

그럼 티스토리 에버노트 플러그인은?

티스토리의 플러그인은 Postach.io와 관점이 좀 다릅니다. Postach.io가 에버노트에 있는 노트를 ‘그대로’ 보여주는 것에 집중한다고 한다면, 티스토리는 글을 불러온 후 수정이 가능합니다. 당연히 티스토리에 불러온 글을 수정한다고 해서 에버노트의 원래 노트가 수정되진 않죠. 저는 이러한 점에서 두 가지 사용방법을 생각했습니다.(자세한 사용법은 '티스토리가 진화하고 있습니다. Evernote 글 불러오기 플러그인!!!'을 참고해보세요)

나름대로 모바일에서 잘나간다는 다음이 서비스하고 있는 티스토리에 대한 모바일지원은 거의 없는 거나 다름없죠. 이에 비해 네이버블로그는 모바일로 글을 작성하는 분들이 많습니다. 그만큼 블로그앱이 잘 되어있죠.


Alexander Supertramp / Shutterstock.com

그래서 첫 번째 용도로 티스토리의 빈약한 모바일 지원을 에버노트 글쓰기 플러그인으로 어떻게 좀 무마할 수 있지 않을까 하는 생각이 들더군요. 최소한 스마트폰에서 블로그에 브라우저로 글쓰기화면에 접속하는 것보단 에버노트 앱을 켜서 글 쓰는 게 나을 테니까요.

두 번째로, 블로그 글 초안을 에버노트로 쓰는 분들에게는 참 좋은 플러그인이라고 생각됩니다. 초안을 작성하고 간단한 서식을 지정한 후 그걸 바로 올릴 수 있으니까요. 예전에는 초안을 에버노트에 써놓고 그걸 복사+붙여넣기해서 썼었는데, 그것보단 확실히 편해졌네요.(요즘도 에버노트에 초안을 작성하는 분들이 계실지 모르겠지만, 에버노트는 블로그 초안을 쓰는데도 꽤 좋은 툴입니다. 원노트도 괜찮구요;;)


이러쿵 저러쿵 말이 길어졌습니다만, Postach.io든 티스토리든 컨텐츠가 중요하다는 것! 잊지마세요 :)

덧) 모바일 지원이 지지부진해도 저처럼 티스토리에 계속 세들어 살 분들이라면, 군말없이 열심히 씁시다ㅠ

신고
tagBlog, EVERNOTE, naver, Note, plugin, Postach.io, Service, Simple, Tistory, tumblr, 간단, , 로마자, 비교, 소개, 자동변환
받은 트랙백이 없고 , 댓글이 없습니다.

워드프레스 유료,무료 테마 사이트 모음

2014.02.09 19:53 in Web/CMS

워드프레스 테마는 항상 몇 군데 기억해놓고 필요할 때마다 들러서 찾았는데, Webdesigner Depot에서 정리하는 글(원문: The A-Z of WordPress theme websites)을 올렸길래 간단하게 정리해봅니다. 이 글도 저번 TED 100선처럼 다른 분들에게 공유라기보단 저를 위한 글이 되네요;;

※ 무료테마라고 하더라도 상업적 사용이나 비영리단체에서 사용 불가능한 것이 있으니 확인하시고 사용하세요 :)

Follow Ludens's board Wordpress theme on Pinterest.
위의 보드를 팔로우하시면 최신 워드프레스 무료테마를 확인하실 수 있습니다.

무료

무료 + 유료

유료

유료(구독형상품만 가능)

덧) 저는 ThemeForest와 Themify를 애용합니다

신고
tagCreative Market, Dessign.net, Elegant Themes, FabThemes, FreeThemeLayouts, FThemes, Graph Paper Press, Kriesi.at, MOJO Themes, Moon Themes, Press 75, Site5 Themes, SiteGround, SM Themes, Strictly WP, Templatic, Theme, ThemeForest, ThemeFuse, Themes Kingdom, Themezilla, Themify, Towfiqi, Web2Feel, Webdesigner Depot, WooThemes, Wordpress, WordPress.org, WPExplorer, Wpshower, WPZoom, Yithemes, ZebraThemes
받은 트랙백이 없고 , 댓글이 없습니다.

TED블로그에서 선정한 당신이 알아야할 웹사이트 100선

2014.01.29 23:04 in Web

TED블로그에서 선정한 웹사이트 100곳입니다. 원문은 100 Websites You Should Know and Use (updated!)이며 2013년 버전으로 업데이트 되어서 저장용으로 옮겨봅니다. 기존 글은 링크만 있는데, 옮기면서 썸네일 이미지도 같이 나오도록 하였습니다.

비지니스 + 전자상거래

오디오 + 비주얼

문학, 미디어 + 문화

정치, 뉴스 + 전세계이슈

교육

과학 + 기술

2007년도 목록

신고
tagted, website
받은 트랙백이 없고 , 댓글이 없습니다.

링크드인 1촌 신청을 전부 수락하는 이유

2014.01.16 23:22 in Web/Service

‘퍼스널 브랜딩의 최고 권위자’라고 하는 Dan Schawbel이 포브스에 기고한 글입니다. 링크드인 인기글에 올라온 글이라 잠깐 읽어봤는데, 글쓴이의 생각에 찬성은 아니지만 생각해볼 점은 좀 있네요. 전 링크드인도 페이스북만큼이나 폐쇄적으로 사용(이라기보단 방치)하고 있는데, 프로필을 수정해서 트위터처럼 공개적으로 바꿀 필요성은 좀 느껴지네요.

원문은 Why I Accept All LinkedIn Contact Requests이고, 한글화된 링크드인에 맞게(?) ‘1촌’이라는 단어를 사용했습니다.


저는 수많은 강연을 2006년부터 해왔습니다. 강연장에서 저는 구직자들, 고용주들, 기업가들 그리고 학생들이 어떻게 링크드인을 경력과 사업적 성공을 위해 이용할지에 대해 언급해 왔습니다. 그러한 강연들에서, 저는 모르는 사람일지라도 모든 링크드인 1촌 신청을 받아들여야 한다고 항상 말합니다. 이 조언에 대해 언제나 많은 비판이 있었습니다. 사람들은 여전히 개인적이고 링크드인에서 더 큰 네트워크를 가지는 것의 힘을 이해하지 못하고 믿지 못하기 때문입니다. 이 주제에 대한 저의 입장은 2006년부터 같습니다.

왜 여러분이 모든 사람의 신청을 수락해야 하는지에 대한 5가지 이유가 있습니다.

  1. 소개: 새로운 직업을 구하는 가장 좋은 방법은 소개를 통하는 것입니다. 1촌을 늘리는 것으로, (여러분이 한 번도 접근해보지 못했던) 구인 관리자에게 여러분을 소개할 수 있는 더 많은 사람을 가지게 됩니다.
  2. 조사: 저는 링크드인을 전문적인 안내책자로 생각합니다. 링크드인은 전문직 사람들을 위한 전화번호부입니다. 여러분이 링크드인에서 큰 네트워크를 가지고 있지 않다면, 검색할 때 볼 수 있는 프로필의 개수가 한정적으로 나옵니다.
  3. 알기: 누가 여러분을 어떤 방식으로 처음 찾았는지 알까요? 링크드인에서 여러분을 공개했을 때, 사람들은 때때로 여러분이 흥미롭다는 것을 발견합니다. 그리고 그들은 여러분을 연결합니다. 여러분이 만약 엄청난 편집증이라면, 왜 그들에게 이메일을 보내서 어떻게 여러분을 찾았는지 알려고 하지 않죠?(즉, 여러분은 편집증이 아니라는 이야기;;)
  4. 영향력: 링크드인의 1촌 숫자는 Klout.com 점수에 영향을 미칩니다. Klout는 소셜미디어의 영향력을 확인하려고 하는 고용주들에게 점점 더 중요해지고 있습니다. 여러분이 낮은 Klout 점수를 가지고 있다면 마케팅, PR, 미디어, 커뮤니케이션과 같은 분야에 직업을 얻는 기회에 해를 가할 수도 있습니다.
  5. 브랜딩: 보이는 링크드인 네트워크의 크기는 500개까지입니다. 여러분이 많은 1촌을 가지고 있지 않다면, 여러분은 덜 중요하게 나타납니다. 여러분의 링크드인 네트워크는 여러분의 자산이기 때문입니다. 구인하는 사람이 링크드인 프로필에 근거해 두 사람을 고른다면, 500명의 1촌을 가진 사람이 20명을 가진 사람을 항상 이길 것입니다.

물론 예외도 있습니다. ‘항상’이라는 것은 없죠. 여러분의 경쟁상대나 여러분이 싫어하는 사람이 1촌 신청을 한다면, 여러분은 그 사람들을 절대 받아들이면 안 됩니다.

덧) 항상(every time)이라고 본문에 써두고 마지막에 항상이라는 것은 없죠(aren’t there always!)라니요…
덧2) 필자인 Dan Schawbel의 번역된 책으로 ‘ME 2.0 나만의 브랜드를 창조하라’라는 책이 있습니다. 평은 글쎄요;;

신고
tag1촌, Branding, communication, Dan Schawbel, forbes, klout, linkedin, Marketing, media, Press Release, Profile, Social, 고용주, 구직, 기업가, 번역, 수락, 신청, 영향력, 직업, 학생
받은 트랙백이 없고 , 댓글이 없습니다.

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

2014.01.08 18:15 in Web

작년 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을 만들어내는 건 트래킹을 하기위함이라죠?;;

신고
tag2013년, Amazon, chatting, Click, computer, Email, Google, Link, messenger, Microsoft, tweet, UI, url, website, 검색엔진, 게시판, 계층적, 깔끔, 도표, 번역, 사용자, 시선, 신뢰성, 쓰레기, 안전성, 연구, 첫인상, 추적, 평가
받은 트랙백이 없고 , 댓글이 없습니다.

누가 한국의 소셜미디어를 죽였는가?

2013.12.30 23:46 in Web

2008년에 시작했던 미투데이로 소셜미디어에 발을 디딘 게 얼마 되지 않은 것 같은데, 이젠 미투데이는 서비스를 종료하고 트위터와 페이스북이 없는 기업을 찾기가 더 힘들게 되었습니다. 하지만 이런 상황에서도 소셜미디어가 중요하냐고 물으면 저는 ‘전혀 아니다’라고 대답할겁니다. 제가 언제나 소셜미디어에서 살았던 것은 아니지만(한때는 그랬습니다만) 올해를 끝으로 한국에서 소셜미디어는 죽었다고 생각합니다. 그럼 가해자는 누구일까요? 제 나름대로 생각해보았습니다.

사기꾼

소셜미디어라는 분야뿐만 아니라 다른 영역에서도 사기꾼은 셀 수 없이 많습니다. 하지만 그 안에서도 정말 말도 안 되는 소셜미디어관련 사기들이 정말정말정말 많았습니다. 개인은 물론이고 회사차원으로도 말이죠.

사기수료증?!

[전자신문]SNS도 강사 자격증이 있다? 소셜 트렌드 뜨자 난립 – 11.06.01
[더피알]110만원이면 나도 SNS 전문 강사? – 12.12.12

이런 말도 안 되는 수료증, 그걸로 책까지 낸 사람들. 그리고 이름만 그럴듯한 협회들. 그럴듯한 이름만 보고 강의신청을 한 단체들. 그렇게 말도 안 되는 강의를 한 사람들 등등…

좁게 보면 저기까지이지만, 저는 좀 더 확장해서 생각해보겠습니다.

어느 대행사의 장미빛 만발한 이야기

트위터, 페이스북을 개설하셔야 고객과 소통이 잘되고, 트렌드가 어쩌구저쩌구…

라고 트위터계정, 페이스북페이지만 있으면 모든 문제가 다 해결될 듯이 말했던 대행사들도 사기의 범주에 들어가야겠죠. 아직도 그런 말도 안 되는 장미빛 만발한 이야기에 속으시는 분들은 없기를 바랍니다.

그런데 사기치신 분들, 열심히 생태계 망치면서 돈벌어서 좋으세요?

광고

조용하던 트위터에 갑자기 한국인 사용자가 늘어나면서 광고트윗이라는 게 등장했습니다. 아직도 광고서비스와 연동된 계정에서 이렇게 좀비처럼 올라오곤 합니다. 혹, 자신의 계정을 열심히 망치고 싶으시다면 추천드립니다.

Pikicast

광고는 여기서 끝나지 않습니다. 특히 요즘 많은게 이러저러하게 좋아요를 모아서 군데군데 광고를 넣는 것이죠. 대표주자로 아주 유명한 곳이 있는데, 바로 페이스북의 피키캐스트입니다. 피키캐스트가 왜 그렇게 피해자 코스프레를 하면서 좋아요를 구걸할까요? 그게 다 페이스북과 유투브의 약관을 위반하면서까지 운영해서 얻는 광고 때문이라카던데요… 네? 광고문의는 사양한다고요? 과연…?

국가기관들(!)

[뉴스타파]국정원 의혹 심층보도
[시사인]”트윗 121만 건조차 빙산의 일각이다” – 13.12.02

2013년! 결정적으로 한국의 소셜미디어를 강타한! 그 동안에 있었던 대행사들의 수준을 뛰어넘는! ...딱 이정도만 이야기하겠습니다.

덧) 독서실에서 하라는 영어공부는 안하고-_- 이런 글이나 쓸 생각을 하고 있었다니...

신고
tagfacebook, me2day, PIKICAST, SNS, Social, Twitter, 강의, 광고, 국가기관, 국정원, 단체, 대행사, 사기, 생태계, 수료증, 장미빛, 죽었다, , 한국, 협회
받은 트랙백이 없고 , 댓글이 없습니다.

블로그의 쓰레기, 사이드바

2013.12.23 14:44 in Web

이번에 스킨을 수정하면서, 사이드바를 없애버리는데 가장 공헌이 큰 글입니다. 해외 웹사이트 제작서비스인 Squarespace의 템플릿 개발자인 Eric E. Anderson가 쓴 글(The Sidebar in Your Blog is Hot Garbage)인데, 꽤 공감가는 부분이 많습니다. 요즘 모바일의 강세로 반응형, 타이포그래피가 부각되었기 때문인지, 해외의 블로그들도 많이들 사이드바를 없앴더군요. 작성된 지는 시간은 좀 지났지만, 간단한 팁이 들어있어 부분번역해봅니다.


주의: 사이드바에 있는 것들을 버리는 것이 당신을 ‘블로거’로 만들지는 않습니다. 또한 더 유용한 사이트로 만들어주는 것도 아닙니다.

제가 사이드바가 대부분 무시되고, 확실히 산만하며 링크의 쓰레기통과 다름이 없다고 말할 때 10년 이상 인터넷업계에서 일한 저를 믿어보시기 바랍니다.

저는 강조할 수 있습니다, 정말로요. 저는 여러분들이 모두에게 여러분 블로그의 도처에서 모든 것을 보기를 원한다는 걸 이해합니다. 독자로서 분명하게 말하자면, 저는 도처에서 모든 것을 보기를 필요로 하지 않습니다.

(중략)

사이드바를 사용해야만 하는 건 아닙니다

15개의 최근 트윗, 연/월로 정렬된 글 보관함, 태그구름, 수많은 광고들, 검색창, 소셜네트워크와 연결된 소셜프로필, 친구들의 사진들, 9개의 최근 인스타그램/플리커 사진들. 제가 여러분의 블로그에서 읽는 적절한 글에 도달했을 때 저를 멈추게 합니다.

그럼, 대안으로 여러분은 뭘 하면 될까요? 사이드바 없이 블로깅할 수 있는 간단한 사항들이 있습니다. 여기 3가지 예시는 여러분의 사이트를 모던하게 해주고, 구식 사이드바를 걷어차버리도록 합니다.

  1. 글의 맨 끝에 관련 컨텐츠 링크를 추가하세요. 사람들은 글의 주제와 관련이 있기 때문에 이 링크를 사용할 겁니다. 글의 맨 끝이라는 위치는 또한 문맥에 있는 링크들 만큼이나 유용합니다.
  2. 검색창을 사이트의 상단이나 하단에 추가하세요. 또한 도움이 되는 링크와 독자들이 필요로하는 기능을 그렇게 배치하는 것도 더욱 사용자 친화적으로 만들 수 있습니다. 여러분들은 더 많은 사람들이 유용한 기능들을 의도적으로 보여지고 신중하게 놓여졌을때 보게되고 사용한다는 것을 알게 될 겁니다.
  3. 블로그 글 보관함 페이지를 따로 만드세요. 유용한 링크 목록을 한 페이지에 큐레이팅해서 독자들을 도우세요. 월/년/태그/저자에 대한 글. 이 모든 교차된 링크들은 따로 만든 페이지에서 더 좋게 제공될 것입니다.

봤죠? 위 내용은 그리 어렵지 않습니다. 여러분은 사이드바 없이 블로깅 할 수 있습니다. 독자들은 여러분의 글을 편안하고 방해없이 읽을 수 있습니다. 관련 컨텐츠와 검색결과에 대한 링크들은 쓰레기통에서 나와서 문맥적으로 중요한 위치로 이동합니다. 바로 그 위치가 독자들이 필요로 하는 곳입니다. 글 보관함 역시 그렇게 보일 것이고 실제로 유용한 자료가 될 것입니다.

(후략)

신고
tagBlog, blogger, Erc E. Anderson, Medium, sidebar, Skin, Squarespace, tag, 검색, 번역
받은 트랙백이 없고 , 댓글이 없습니다.

Quizlet으로 언제어디서나 단어외우기

2013.05.19 10:27 in Web/Service

Quizlet

저번에 Quizlet에 대한 간략한 소개를 해드렸는데요, 이번 글에서는 실제 어떻게 활용해서 단어를 외우는지에 대해 이야기해보겠습니다. 아래 설명할 방식은 제가 실제로 단어를 외우는 방식이구요;; 속도가 그렇게 빠른 것은 아니지만, 그래도 단어 학습의 효과는 꽤 괜찮다고 생각합니다.

PC로 단어 외우기와 문제 출력을 한번에!

Quizlet Flashcard

컴퓨터로 단어를 외우는 것에 의아해하실 분들이 많으시겠지만 저는 이제 거의 제 노트북으로만 단어를 외웁니다;; 먼저 노트북으로 Quizlet에 접속해서 외울 단어를 입력하고, 입력이 끝나면 바로 외우기를 시작합니다. 저번 글에서도 살짝 이야기했지만 Quizlet에는 공부할 수 있는 도구로 Speller와 Learn 그리고 Test가 준비되어 있고, 게임으로 Scatter와 Space Race가 있습니다. 간단히 저의 단어공부를 요약하자면 다음과 같습니다.

  1. Speller으로 발음을 들으며 단어의 뜻 확인
  2. Learn으로 뜻을 타이핑하며 공부
  3. Space Race로 점검
  4. Test로 문제 풀기

Speller 그리고 Learn

Quizlet - Speller

보통 영어단어는 정확한 스펠링을 요구하지 않고 뜻만 알면 된다고들 합니다만, 저는 Speller로 발음을 들으면서 단어를 타이핑합니다. 처음 보는 단어를 발음과 함께 공부하는 게 더 좋다는 건 잘 알려진 사실이죠. 그러한 사실에 따라 처음에 단어를 눈과 귀로 익힙니다.

Quizlet - Learn

Speller를 통해 발음을 어느 정도 알게 되면, Learn으로 넘어가서 뜻을 맞춰봅니다. Quizlet에서는 기계적으로 채점합니다. 즉 입력한 뜻을 모두 입력해야 맞는 것으로 처리되기 때문에, 실제로 해보면 쉽지 않습니다ㅠ

Space Race와 Test

Quizlet - Space Race

Learn에서 열심히 단어 뜻을 익혔다면, Space Race로 점검해봅니다. Space Race는 한컴타자연습에서 해봤던 게임과 비슷하죠. 한컴타자는 나오는 단어를 그대로 쳤지만, Space Race는 나오는 단어를 그대로 치는 것이 아니라 뜻을 타이핑 한다는 부분이 다릅니다. 10단계까지 무난하게 갔다면, 다 외웠다고 생각합니다.

Quizlet - Test

이렇게 점검까지 끝나면, 마지막에 Test를 사용해서 문제를 출력합니다. 저는 5명으로 구성된 단어스터디를 하고 있는데 제가 매일 문제를 출력합니다. 깔끔한데다 알아서 순서도 랜덤으로 섞어주니 이렇게 좋을 수가 없습니다.

스마트폰으로도 외우자!

PC로 외우는 것이 대부분이 되기는 하지만, 언제나 들고 다니는 핸드폰으로도 Quizlet에 등록한 단어들을 볼 수 있습니다. 특히 아이폰과 아이패드의 경우공식앱이 있어서 쉽게 사용할 수 있습니다.

그런데 iOS와 달리 안드로이드에는 공식 앱이 없습니다;; 아직 개발 중이라며 웹으로 접속해서 사용할 것을 권장하고 있습니다.


(13.12.24 수정)

안드로이드에도 공식앱이 나왔습니다. 저는 개인적으로 베타테스터로 참여도 했구요:) 글을 빨리 수정한다는게... 이제야 올립니다ㅠ


iOS와 안드로이드 모두 앱 내에서 단어입력/수정 등 기능적으로 제약이 있기는 하지만, 전철이나 버스를 타고다니면서 외운 단어를 다시 확인하는 정도로는 충분합니다.
외국어 공부 하시는 분들 모두 열공하셔서 좋은 결과 있기를 바랍니다:)

덧) 오늘도 단어 외우러 Quizlet에 접속하러 갑니다ㅠㅠ

신고
tagAndroid, Application, Flashmem, game, IOS, learn, Private, Quizlet, random, SMART PHONE, Space Race, speller, Study, test, web, 공부, 단어, , 무료, 문제, 발음, 영어, 외국어, 출력
받은 트랙백이 없고 , 댓글이 없습니다.

파비콘의 중요성에 대하여

2013.04.03 09:07 in Web/Coding

clip_image001

이 글은 Let’s Talk About the Importance of Favicons의 번역입니다.

온라인 비지니스의 전문가들은 작은 것들이 경쟁에서 차이를 만들어 낸다는 것을 알고 있습니다. 경험이 별로 없는 사람들도 그 사실을 빠르게 배울 것입니다. 여러분의 수준이 전문적이더라도 웹사이트 디자인에 대해 간과하는 몇가지가 있죠. 그러한 가장 적절한 예가 웹사이트의 파비콘입니다. 파비콘이 뭔지 아시나요? 아신다면, 파비콘을 효과적으로 사용하고 계신가요?

파비콘을 소개합니다

clip_image002

'파비콘'이라는 단어는 'favorites icon'줄인 말입니다. 원래 파비콘은 즐겨찾기(또는 북마크) 목록에서 웹페이지를 구별하기 위해 사용되었죠 오랜 시간 동안 파비콘은 다른 용도로 발전해왔습니다. 파비콘을 볼 수 있는 장소들은 다음과 같습니다.

  • 인터넷 브라우저 주소입력줄의 왼쪽편에
  • (브라우저가 예상 URL 서비스를 지원한다면)예상 URL의 목록에서
  • 브라우저에 열려진 다양한 탭들

삶을 편하게 만드는 파비콘

요즘, 인터넷을 정기적으로 사용하는 대부분의 사람들은 파비콘을 보는 것에 익숙해져 있습니다. 평범한 인터넷 사용자들은 아마 파비콘에 대해 많은걸 알지 못할 겁니다. 하지만 그 사용자들은 파비콘의 존재 유무를 구별해냅니다.

clip_image004

뇌는 이미지를 글자보다 더 빠르고 쉽게 처리할 수 있습니다. 즐겨찾기 목록을 둘러볼 때, 사용자들은 파비콘이 붙어있는 덕분에 원하는 사이트를 빠르게 찾아냅니다. 여러 개의 탭이 열려있을 때에도 똑같은 일이 일어납니다. 파비콘은 각각의 다른 사이트들을 더 쉽게 구별할 수 있도록 합니다.

clip_image005

반대로 웹사이트에 파비콘이 없다면, 그저 빈 페이지가 웹사이트의 이름 옆에 있을 것입니다. 파비콘이 없는 여러 즐겨찾기를 가지고 있다면, 그런 사이트들이 똑같이 빈 문서 아이콘으로 보여서 원하는 사이트를 고르는 것이 훨씬 더 어렵겠죠.

신뢰를 주는 파비콘

사이트에 맞춤 파비콘을 포함시키는 것은 신뢰를 주는 한가지 방법입니다. 마치 보잘것 없는 것처럼 보이지만, 방문자들은 파비콘을 알아차리고, 그것이 무엇을 뜻하는지 평가할 것입니다. 비슷하게, 워드프레스 초보자들이 기본 파비콘을 사용할 때 사용자들은 이를 알아차립니다. 파비콘이 있는 것이 없는 것보다는 좋고, 맞춤 파비콘이 기본 파비콘보다 좋습니다.

브랜드인지도를 상승시키는 파비콘

우리 모두는 로고의 중요성에 대해 알고 있습니다. 우리를 기업과 시각적으로 연결시켜주는 것이 바로 그것이죠. 맥도날드에 노란 아치모양이 없다면 어떨까요? 아니면 트위터에 조그만 파랑새가 업다면요? 여러분들의 회사 로고에서 유래됬든, 완전히 새로운 모습이든 간에 파비콘은 작은 로고와 같습니다. 파비콘은 인터넷 사용자들에게 브랜드를 기억하는데 도움을 줍니다.

파비콘 만들기

clip_image006

맞춤 파비콘이 필수적일까요? 그렇지는 않습니다. 하지만, 저는 만들어진 파비콘들이 방문자경험의 전반적인 품질 개선에 꽤 큰 영향을 준다고 생각합니다.

만약 새로 파비콘을 만들거나, 기본파비콘 또는 오래된 파비콘을 업그레이드한다면, 해야 할 것들이 있습니다.

  1. 파비콘 생성기를 웹에서 찾기(엄청나게 많습니다)
  2. 파비콘 생성하기(보통 16픽셀x16픽셀)
  3. 테마의 이미지섹션으로 가기
  4. 파비콘 추가 또는 기존의 파비콘을 대체하기

파비콘은 엄~청 작다는걸 기억하세요. 파비콘에 너무 많은걸 넣거나 장식을 많이하지 마세요. 알아볼 수 없는 파비콘은 없는것보다 오히려 안좋습니다.

clip_image007

두드러진 글씨체로 회사이름의 첫글자를 이용해보세요. 위의 구글 파비콘이 그러한 완벽한 예입니다. 매우 간편한 방법인 동시에, 여러분들이 원하는 만큼 근본적이고 정교하게 만들어질 것입니다.

clip_image008

만약 이미 회사로고가 있다면, 파비콘에 로고의 특정부분이나 전체를 넣을 수 있는지 보세요. 로고와 회사 이니셜을 함께 사용한 아마존을 위 사진을 보고 확인해보세요.


만약 여러분이 온라인세상에 처음이라면, 이 글이 아마 파비콘에 대해 알 수 있는 첫번째 기회가 아닌가 싶습니다. 인터넷 비지니스의 전문가라면 여러분들이 이미지를 대충 볼 때부터 알고 있었을 테죠. 어느 쪽이든 여러분들의 파비콘을 만드는 것은 웹사이트의 성공에 도움이 될 것입니다.

덧) 파비콘이라는게… 없어도 그만, 있어도 그만인데 정작 없으면 허전한 그런 느낌이라죠;;

신고
tagAmazon, Brand, favicon, Google, Internet, web, 만들기, 사용자, , 소개, 신뢰, 인지도
트랙백이 하나이고 , 댓글이 없습니다.

외국어 단어학습의 강력한 도우미 - Quizlet

2013.03.25 09:47 in Web/Service

많은 분들이 외국어 공부(특히 영어ㅠㅠ)를 하고 계시죠. 어떤 외국어든 배울 때 거의 대부분 단어를 외우게 됩니다. 언어를 읽고 쓰기 위해서는 최소한의 단어수준은 충족해야 한다는 생각에 외워야 한다는 생각은 있지만, 실상 잘 외워지지 않죠. 저도 요새 영어공부를 좀 하고 있는데, 단어를 어떻게 하면 더 잘 외울 수 있을까 하다가, Quizlet이라는 서비스를 찾아냈습니다.

Quizlet?

많은 분들에게 생소할 Quizlet은 2007년 1월부터 시작된 서비스입니다. 2005년에 만 15살이였던, Andrew Sutherland가 프랑스어 수업을 위해서 만들었다고 합니다. 단지 쉽게 프랑스어 단어를 외우기 위해서였죠. 그렇게 시작한 Quizlet은 현재 세계에서 가장 큰 교육관련 사이트입니다. 수백만명의 교사들과 학생들이 이용하는 이 서비스는 현재 2천만개 이상의 세트를 가지고 있다고 합니다.
※ 내용 출처: Our Mission | Quizlet

가입하고 공부할 세트 찾기

요즘 왠만한 사이트들은 다 그렇듯이 Quizlet간편하게 가입할 수 있습니다.

공부할 세트 만들기

입맛에 딱 맞는 세트가 있으면 다행이겠지만, 잘 맞지 않는 경우가 대부분입니다. 물론 저도 그렇구요. 그래서 저는 항상 단어세트를 만들어서 공부합니다.

저 같은 경우 영어단어를 외우기 때문에 왼쪽에는 영어를, 오른쪽에는 한국어를 지정하고 만듭니다. 그리고 단어를 적을 때 Tab버튼을 사용하면 빠르게 입력할 수 있습니다. 마지막 줄에서 Tab을 누르면 새로운 줄도 추가되니, 마우스로 하는 것보다 훨씬 빠르죠.

Quizlet으로 공부하기


사실은, 글 하나에서 가입부터 기본 사용법, 그리고 활용까지 한꺼번에 하려고 했는데, 활용은 다음 글로 미뤄야겠네요;; 단어공부 하시는 분들은 한번 가입해서 사용해보시길 강력하게 추천합니다:)

덧) 창립자인 Andrew Sutherland는 저와 비슷한 나이인 것 같은데 왜 전 저런 생각을 못했을까요(…)
덧2) 근데 지금 MIT 다니고 있다는군요;; 역시 차원이 다른 사람인가봐요(…)
덧3) 글 다 쓰고 단어외우러 다시 Quizlet에 접속합니다ㅠㅠ

이 글은 Quizlet으로 언제어디서나 단어외우기로 이어집니다.

신고
tagAndrew Sutherland, learn, Quizlet, Service, speller, test, 가입, 공부, 교육, 단어, 영어, 외국어, 외우기, 프랑스어
받은 트랙백이 없고 , 댓글이 없습니다.

Dropbox vs Gdrive vs SkyDrive vs N드라이브 vs 다음 클라우드

2013.02.25 19:48 in Web/Service

클라우드 서비스 다들 하나쯤은 이용하고 계시죠? 저는 스카이드라이브를 주로 사용하고 있는데, 제 주위에서는 드랍박스를 많이 쓰더군요. 아직 주로 사용할 클라우드 서비스를 정하지 못하셨다거나 바꾸실 생각이 있으시다면, 아래 비교 표를 참고해보시면 좋을 것 같습니다. 아래 표는 제가 교보생명 대학생 마케팅 프로그램 청춘가곡에서 작성한 글(USB메모리랑 외장하드 잃어버렸다고 울기 있기, 없기?)에 넣은 표를 좀 더 보충해서 작성하였습니다.

클라우드서비스 비교

 
Dropbox

Gdrive

SkyDrive

N드라이브

다음 클라우드
무료
저장
공간
2GB 5GB 7GB 30GB 50GB
유료
서비스
100GB: $9.99/월
200GB: $19.99/월
500GB: $49.99/월
25GB: $2.49/월
100GB: $4.99/월
200GB: $9.99/월
400GB: $19.99/월
1TB: $49.99/월
2TB: $99.99/월
4TB: $199.99/월
8TB: $399.99/월
16TB: $799.99/월
(Picasa, Gmail도 동시 적용)
20GB 추가:
11,000원/년
50GB 추가:
29,000원/년
100GB 추가:
57,000원/년
100GB:
5,000원/월
없음
지원
플랫폼
윈도우, 맥 OS, 리눅스, iOS, 안드로이드, 블랙베리 윈도우, 맥 OS, iOS, 안드로이드 윈도우, 맥 OS, iOS, 안드로이드, 윈도우폰 윈도우, 맥 OS, iOS, 안드로이드, 윈도우모바일, 바다 OS 윈도우, 맥 OS, 리눅스, iOS, 안드로이드
폴더
동기화
O O O O O
파일
버전
관리
O O O O O
공유
하기
O O
권한설정 가능
O
권한설정 가능
O O
폴더만 가능
문서
수정
X O
Google Docs
O
Office WebApp
O
네이버 오피스
X
파일에
대한
댓글
X O O X X
업로드
제한
PC: 무제한
Web: 300MB
10GB PC: 2GB
Web: 300MB
무제한 4GB
기타
기능
친구초대로
저장공간 추가
PSD, AI파일
미리보기
인증한 PC의
파일 탐색
네이버 서비스로
보내기
다음 서비스로
보내기

어떤 서비스가 좋을까?


< 다음 클라우드 용량 >

무료용량을 보면, 국내 서비스들이 해외 서비스들 보다 확실히 큰 편입니다. 유료는 100GB를 기준으로 하면, 드랍박스가 제일 비싸군요. 그리고 특이하게 스카이드라이브는 월결제가 없는데, 다른 월결제하는 상품들은 1년 결제시 2달 무료와 같은 할인혜택이 있습니다.


< 드랍박스 지원 플랫폼 >

지원플랫폼에서는 N드라이브가 재밌네요. 윈도우 모바일에 바다폰… 색다릅니다. 드랍박스의 블랙베리 지원도 눈에 띄네요. 구글 드라이브와 스카이드라이브 그리고 N드라이브는 리눅스 어플리케이션이 없군요.


< 스카이드라이브의 문서편집 (Office WebApp) >

그래도 이 세가지는 웹상에서 문서수정이 가능합니다. 이전에 스카이드라이브 오피스 웹앱으로 전철에서 급하게 파워포인트 문서를 수정했는데… 왠지 수정하면서 신기한 느낌이 들었습니다.


< N드라이브 공유하기 >

참고로 제가 국내 서비스들에 가장 불만인건, 공유기능입니다. 네이버나 다음이나 공유하는 과정이 어째 불편하게 느껴지고, 특히 다음은 폴더째로만 공유가 가능합니다. 그리고 두 곳 모두 자동으로 공유기간이 정해져서 일정시간 이후로는 공유가 더 이상 안되죠. 제 생각엔 이게 가장 큰 단점인 것 같네요.

청춘가곡 블로그에 쓴 글에도 적었지만 공유할 일이 많거나 문서작업에는 해외 서비스가 알맞고, 개인소장용 동영상이나 사진 저장용도 등으로는 국내서비스가 좋지 않은가 싶습니다.

덧) 그래도 사진저장은 구글플러스가 최고죠(…)
덧2) iOS용 다음 클라우드 어플은 사실 동영상 재생 어플이라고 하던데요(???)

신고
tagAndroid, Bada OS, BLACKBERRY, Cloud, Desktop, dropbox, File, Folder, Google, Google Drive, IOS, Linux, mac os, mobile, naver, N드라이브, Office Web Apps, Service, skydrive, upload, USB, version, Windows, Windows Mobile, Windows Phone, 가격, 공유, 관리, 교보생명, 다음, 동기화, 무료, 무제한, 문서, 미리보기, 비교, 수정, 용량, 유료, 저장, 제한, 지원, 청춘家곡, 초대
트랙백3 , 댓글2개가 달렸습니다.

워드프레스 자주 묻는 질문: 60문 60답

2013.02.18 09:10 in Web/CMS

워드프레스가 작년과 재작년에 걸쳐 점차 퍼지더니 요새는 기업 웹사이트로 많이들 제작하는 분위기입니다. 영어권에서는 워낙 많이 사용하고 있어서 포럼같은 것도 많이 활성화 되어있죠. 얼마 전 제가 구독하는 블로그에서 워드프레스와 관련한 자주 묻는 질문들에 대한 글이 올라왔습니다. 읽어보니 저희가 모르는 부분이나 영어권에서 모르는 부분이나 겹치는 것이 많더군요. 워드프레스를 처음 접하시는 분께 도움이 될까 해서 번역해보았습니다.

이 글은 The Most Frequently Asked Questions (FAQ) about WordPress의 번역입니다.

  1. 워드프레스는 무엇인가요?
    • 워드프레스는 블로깅 플랫폼에서 시작되어 긴 시간동안 저작물 관리 시스템(CMS)로 진화해 온 소프트웨어입니다.
  2. 워드프레스를 사용하면 어떤 장점이 있죠?
    • 매우 쉽게 설치하고 설정할 수 있습니다. 그리고 언제든지 어떤 기능을 보여줄지 수정할 수 있습니다.
  3. 워드프레스의 기능은 뭔가요?
    • 워드프레스는 여러분들만의 웹사이트를 만들 수 있도록 하는 여러가지 좋은 도구모음을 제공합니다. 워드프레스의 팬들과 전문가들이 만들어낸 수천개의 플러그인들, 추가기능들, 위젯들 그리고 기타 추가할 수 있는 기능들로 워드프레스는 그 자체로 독특해 집니다.
  4. 워드프레스로 어떤 걸 할 수 있죠?
    • 워드프레스는 텍스트, 이미지, 영상, 링크의 형식으로 된 정보를 올리는데 아주 좋습니다. 웹사이트에 그 정보들이 어떻게 보여질지 바꾸는 것도 가능합니다. 여러분들이 마음대로 변경할 수 있는 테마들이 셀 수도 없을 만큼 많은 덕분이죠. 위젯을 추가하거나 플러그인들 통해 다른 좋은 기능들을 추가할 수도 있습니다. 그러한 플러그인들도 매우 많습니다.
  5. 워드프레스는 누가 만들었죠?
  6. 언제 워드프레스가 처음 나왔죠?
    • 2003년 5월 27일입니다.
  7. 워드프레스의 사용범위는 어떻게 되죠?
    • 워드프레스는 GNU 일반 공중 사용 허가서를 따릅니다. 즉 오픈소스죠. 오픈소스이므로 사용자가 코드를 변경할 수 있고 정해진 조건 하에서 공유할 수도 있습니다.
  8. WordPress.com과 WordPress.org, 왜 워드프레스 사이트는 두 곳이 있나요?
    • WordPress.org에서는 워드프레스 소프트웨어를 다운로드 받고 프로그램에 대한 정보를 얻을 수 있습니다. 반면에 WordPress.com은 가입해서 여러분들의 블로그를 운영할 수 있는 블로그 네트워크입니다. 워드프레스닷컴의 서비스는 무료서비스와 유료서비스로 나누어져 있습니다.
  9. 워드프레스를 사용하려면 PHP에 대한 지식이 있어야 하나요?
    • 워드프레스는 PHP를 직접 변경할 필요가 없는 UI를 통해 사용할 수 있습니다. 하지만 몇몇 플러그인의 파일을 수정해야 할 때에는 필요할 수도 있습니다. 그런 경우에는, 보통 어떻게 해야되는지 지침이 같이 들어있을 겁니다.
  10. 워드프레스를 설치하기 전에 알아야 할 것(+필요한 것)들이 있나요?
    • 설치를 진행하기 위해서는 (FTP나 쉘을 통해) 여러분의 웹서버에 접근할 수 있어야 하고, FTP 프로그램과 메모장 그리고 웹브라우저가 필요합니다.

  1. 워드프레스 설치는 어떻게 하죠?
    • 호스팅 서버가 워드프레스를 운영할 만한 최소사양을 만족한다면, WordPress.org에서 최신버전을 다운받아 압축을 해제하면 됩니다.
  2. 워드프레스를 운영하기 위한 최소사양은 어떻게 되죠?
    • 최소사양은 계속 변해왔습니다. PHP 5.2.4 이상, MySQL 5.0 이상이면 됩니다(2013년 1월 6일 기준)
  3. 그 유명한 '5분 설치'란 뭔가요?
    • 워드프레스를 다운로드하고 압축을 푼 뒤에, 웹서버에 데이터베이스와 워드프레스를 위해 MySQL 사용자를 만듭니다. wp-config-sample.php파일을 wp-config.php라고 이름을 바꾸고 데이터베이스 정보를 채웁니다. 그리고 워드프레스 파일들을 웹서버에 업로드합니다. 웹브라우저에서 워드프레스 설치경로(/wp-admin/install.php)를 입력합니다. 이 모든 과정이 5분 이내로 가능합니다.
  4. 데이터베이스와 그 사용자는 어떻게 만들죠?
    • 데이터베이스를 직접 만들어야 될 필요가 있는지 확인하기 위해 먼저 관리화면을 봅니다. 만약 그렇다면 관리화면에서 'MySQL 데이터베이스'를 클릭합니다. phpMyAdmin을 사용한다면 'Home > Privileges > Add a new User'로 이동합니다.
  5. 관리자화면은 어디서 찾을 수 있죠?
    • 관리자화면에 접속하기 위해서는 웹브라우저에서 http://웹사이트주소/wp-admin로 이동하면 됩니다.
  6. 글은 어떻게 쓰죠?
    • 관리자화면의 Posts메뉴에서 'Add New'버튼을 클릭합니다. 그러면 글을 쓸 수 있는 양식이 뜹니다. 글을 쓰고 나서 Publish를 누르면 글이 공개됩니다.
  7. 새 페이지는 어떻게 만들죠?
    • 관리자화면의 Pages메뉴에서 'Add New'를 클릭하면 만들 수 있습니다.
  8. 새 카테고리는 어떻게 만들죠?
    • 관리자화면의 Posts메뉴에서 'Categories > Add New Category'로 이동합니다.
  9. 글의 카테고리는 어떻게 변경하죠?
    • 관리자화면의 Posts메뉴의 Edit로 들어가서 수정할 글의 'Quick Edit'를 누릅니다. Categories에서 새 카테고리를 선택하고 'Update Post'를 누르면 변경된 사항이 저장됩니다.
  10. 카테고리는 어떻게 삭제하죠?
    • 관리자화면의 Category탭에서 삭제하려고 하는 카테고리를 선택해서 delete를 누릅니다. 확인을 하는 팝업이 뜨면 OK를 누릅니다. 그 카테고리의 글들은 기본 카테고리인 'Uncategorized'로 이동됩니다.

  1. 댓글관리는 어떻게 하죠?
    • 관리자화면에서 Comments를 클릭합니다. 그러면 각각 댓글들에 대해 수정하거나 삭제할 수 있습니다. 전체적인 댓글 설정은 'Settings > Discussion'에서 가능합니다. 댓글을 허용할 것인지 선택할 수 있고, 그리고 어떤 댓글을 스팸으로 판단할지도 정할 수 있습니다.
  2. 워드프레스 테마는 어떻게 바꾸죠?
    • 관리자화면의 'Apperance > Themes'로 이동하면 워드프레스 기본테마들을 볼 수 있습니다. 여러분들이 테마를 고르고 Activate를 누르면 됩니다.
  3. 새로운 테마는 어떻게 설치하죠?
    • 수많은 곳에서 워드프레스 테마를 제공하고 있습니다. 여러분이 고른 워드프레스 테마를 여러분의 컴퓨터로 다운로드 받습니다. 그리고 파일매니저를 이용해 압축된 상태의 파일을 wp-content/temes 디렉토리에 올리고 압축을 해제합니다. 또는 컴퓨터에서 압축을 해제하고 FTP를 사용해서 업로드 할 수도 있습니다. 그러면 'Apperance > Themes'에 테마가 나타날 것입니다.
  4. 워드프레스 플러그인은 뭐죠?
    • 플러그인은 웹사이트에 기능을 추가시켜주는 작은 조각들입니다. 웹사이트를 추가적으로 상호작용하도록 만들어주거나 관리하는데 도움을 주는 수천개의 유용한 플러그인들이 있습니다.
  5. 워드프레스 플러그인은 어떻게 설치하죠?
    • 플러그인을 제공하는 사이트에서 원하는 플러그인을 다운로드합니다. 그리고 관리자화면의 'Plugins > Add New'로 가서 다운로드한 플러그인을 선택하면 설치됩니다.
  6. 플러그인 삭제는 어떻게 하죠?
    • 플러그인을 삭제하려면 해당 플러그인의 폴더를 삭제하면 됩니다.
  7. 이미지, 오디오파일, 영상은 워드프레스에 어떻게 추가하죠?
    • 관리자화면에서 'Posts > Add New'로 이동합니다. 에디터 메뉴에서 'Add an Image', 'Add Video', 'Add Audio', 'Add Media'를 클릭합니다.
  8. 이미지 갤러리는 어떻게 만들죠?
    • 관리자화면에서 'Posts > Add New'로 이동합니다. 'Add an Image'버튼을 클릭하고 이미지를 업로드합니다. 그리고 'Save All Changes'를 클릭합니다. 그러면 나타나는 'Gallery Tab'에서 이미지를 관리하거나 업로드할 수 있습니다. 이미지 추가/수정이 끝나면 'Insert Gallery'를 클릭합니다.
  9. 글에 태그는 어떻게 추가하죠?
    • 글을 쓸때 'Post Tages'모듈에 원하는 태그를 입력하고 각각의 태그마다 Add버튼을 누르거나 엔터키를 누르면 태그를 추가할 수 있습니다. 추가할 수 있는 태그의 수는 제한이 없습니다.
  10. 워드프레스 사용자들은 어떻게 관리하죠?
    • 관리자화면에서 Users로 이동합니다. 'Add New'버튼을 누르면 새로운 사용자를 추가할 수 있습니다. Authors&Users에서는 현재 사용자들의 등급을 변경하거나 삭제할 수 있습니다.

  1. 워드프레스 파일을 업로드 할때 생각해야 될 점이 있나요?
    • 먼저 어디에 워드프레스 사이트가 있으면 좋을지 선택해야 합니다. FTP 프로그램을 사용해서 최상위 디렉토리나 하위 디렉토리에 업로드할 수 있습니다.
  2. 워드프레스 폴더의 이름은 어떻게 바꾸죠?
    • 만약 워드프레스를 설치하기 전이라면, 폴더이름을 직접 바꾸면 됩니다. 하지만 만약 워드프레스를 설치했다면, 관리자로 로그인해서 'Settings > General'로 이동합니다.
  3. 워드프레스 비밀번호는 어떻게 바꾸죠?
    • 관리자화면에서 Users로 이동합니다. 사용자들의 목록이 나오는데, 바꿀 사용자를 찾아 'Edit User'를 클릭합니다. 'New Password'에 새로운 비밀번호를 입력하고 'Update Profile'버튼을 클릭합니다.
  4. 다른 사람들에게 웹사이트를 숨길 수 있나요?
    • 숨기기 위한 유일한 방법은 비밀번호로 보호된 컨텐츠를 만드는 것 뿐입니다. 보호된 컨텐츠를 만들려면 'Allow Anonymous Access'를 해제하고 'Basic Authentication'을 선택합니다.
  5. 워드프레스가 리버스 프록시에서 운영되려면 어떻게 해야하죠?
    • 리버스 프록시에서 운영되는 워드프레스는 몇몇 문제점이 있습니다. 프록시는 http_host에 덮어쓰기가 안되기 때문이죠. 이런 문제를 해결하기 위해서는 wp_config.php파일에 한줄을 추가하면 됩니다.
      $_SERVER['HTTP_HOST'] = $_SERVER['SERVER_NAME'];
  6. MySQL없이 워드프레스를 사용할 수 있나요?
    • 워드프레스는 MySQL 데이터베이스 서버만 지원합니다. 현재 다른 데이터베이스들은 지원되지 않습니다.
  7. 왜 워드프레스는 MySQL을 사용하죠?
    • MySQL은 인터넷상에서 매우 빠르고 가장 폭넓게 접근 가능한 데이터베이스 서버이기 때문입니다. 대부분의 웹호스팅들이 MySQL을 지원하는데, 이는 곧 어떤 사람이든 사용할 수 있다는 뜻이죠. 또한 MySQL은 오픈소스인데, 이는 워드프레스 개발에 중요한 부분입니다.
  8. phpMyAdmin은 뭔가요?
    • MySQL 데이터베이스와 사람들이 소통하기 위한 무료 관리도구입니다. PHP언어로 작성되었으며, 유지관리 및 정보의 백업 그리고 수정에 매우 유용합니다.
  9. 워드프레스를 PHP 안전모드에서 운영할 수 있나요?
    • PHP 안전모드에서도 잘 돌아갑니다.
  10. 워드프레스는 정말 PHP가 필요한가요?
    • 최소사양의 한 요소이기 때문에 필요합니다. 워드프레스의 모든 부분은 PHP언어를 통해 작동됩니다. PHP가 없는 워드프레스는 작동하지 않겠죠.

  1. 서버에 대한 정보는 어디서 확인할 수 있죠?
    • PHP나 MySQL에 대한 버전정보 또는 호스팅 서버의 소프트웨어를 확인하려면 아래 명령어를 메모장에 작성합니다.
      <?php phpinfo(); ?>
      그리고 파일을 testphp.php로 저장합니다. 이 파일을 최상위 디렉토리에 업로드하고 웹브라우저를 통해 이동하면(http://사이트주소/testphp.php) 정보를 볼 수 있습니다.
  2. 워드프레스 버전정보는 어떻게 볼 수 있죠?
    • wp-includes폴더에 있는 version.php 파일을 메모장으로 엽니다. 이 파일은 워드프레스 버전에 대한 정보를 담고 있습니다. 또는 관리자화면의 하단부분을 보면 워드프레스 버전을 확인할 수 있습니다.
  3. 워드프레스 최신버전으로 어떻게 업데이트하죠?
    • 먼저 새 버전에 대한 최소사양을 확인합니다. 그리고 버전을 다운그레이드 할 때를 대비해 데이터베이스를 백업합니다. 플러그인들을 비활성화 하는 것도 좋습니다. 가끔 최신버전과 문제가 생길 때도 있기 때문이죠. 업데이트를 시작하려면 'Tools > Upgrade'로 이동합니다. 'Update Automatically'버튼을 클릭하면 자동적으로 됩니다.
  4. 플러그인 비활성화는 어떻게 하죠?
    • 'Manage Plugins'로 이동해서 'Bulk Actions'에서 deactivate를 선택하고 Apply를 클릭합니다.
  5. 워드프레스 데이터베이스는 어떻게 백업하죠?
    • 데이터를 백업하는 방법은 여러가지가 있습니다. 가장 쉬운 방법은 자동으로 하는 것이죠. 백업을 위해 만들어진 몇몇 워드프레스 플러그인들이 있습니다. 이러한 플러그인들을 찾기 위해 관리자화면에서 'Plugin Browser'로 이동합니다. 그곳에서 BackWPup이나 Duplicator와 같은 백업 플러그인들을 찾을 수 있을 것입니다.
  6. 백업한 데이터베이스를 어떻게 복원하죠?
    • phpMyAdmin을 이용하면 데이터베이스를 복원할 수 있습니다. phpMyAdmin에 로그인 한 후에 Databases를 클릭하고 복원할 데이터를 넣을 데이터베이스를 하나 선택합니다. 그리고 Import를 누른 뒤 백업할 파일을 고릅니다. SQL에 버튼이 체크되어있는지 확인하고 Go를 누릅니다. 완료까지 시간이 꽤 걸릴 수 있습니다.
  7. 이모티콘은 뭐고, 어떻게 쓸 수 있죠?
    • 이모티콘은 감정을 나타내는 작은 아이콘입니다. 워드프레스에서는 기본적으로 텍스트로 된 이모티콘을 자동으로 작은 이미지로 변경시킵니다.
  8. 이모티콘 자동변환은 어떻게 해제할 수 있죠?
    • 관리자화면에서 'Settings > Writing'로 이동합니다. Formatting을 선택해서 emoticons에 체크를 해제합니다.
  9. 'read more'버튼은 어떻게 지정하죠?
    • 글을 조금만 보여주는 것은 독자들에게 클릭을 하도록 하고 더 읽도록 만들죠. 이것은 퀵태그를 추가하거나 템플릿의 태그를 the_content()에서 the_excerpt()로 바꾸는 것으로 지정할 수 있습니다. more 퀵태그를 추가하려면, 보여줄 부분 바로 뒤에 커서를 두고 'Administration > Write > Post'로 이동하면 more 퀵태그를 찾을 수 있을 것입니다.
  10. 이미지 주변에 텍스트로 둘러싸이도록 하려면 어떻게 해야되죠?
    • 텍스트와 함께 이미지를 정렬하려면 이미지에 태그를 수정합니다. class="alignleft", class="alignright", class="aligncenter"로 하면 됩니다.
      예시: <img src=”http://exampleimage.com/example.jpg” class=”alignleft” />

  1. 파일에 주석을 달려면 어떻게 하죠?
    • 파일에 주석을 다는 것은 때때로 유용하죠. HTML이나 PHP파일엔 이렇게 달면 됩니다.
      <!-- insert comment here -->
      CSS 파일이라면 다음과 같습니다.
      /* insert comment here */
  2. 글의 날짜 및 시간 표시방법은 어떻게 수정하죠?
    • 워드프레스의 몇몇 태그기능들은 정해진 포멧의 문자열을 읽어 들이는데, 날짜를 어떻게 표시할 것인지도 그렇게 결정됩니다. 예를 들어 'l, F j, Y'라는 포멧의 문자열을 만들면 결과는 'Monday, January 7, 2013'으로 보일 것입니다. 각각의 문자는 다음을 의미합니다.
      l: 해당하는 요일의 이름
      F: 해당하는 달의 이름
      j: 해당하는 일수
      Y: 해당하는 연도(4자리)
      위의 날짜형식을 보려면 템플릿 태그는 이렇게 되겠죠: <?php the_time('l, F jS, Y') ?>
  3. 템플릿 파일은 뭔가요?
    • 템플릿 파일은 웹사이트를 웹에 어떻게 보여줄 것인지 제어할 수 있는 파일입니다. MySQL 데이터베이스에서 정보를 가져오고 코드를 생성해서 웹브라우저로 전송합니다. 템플릿 파일을 사용하면 색상이나 스타일을 변경하여 다른 워드프레스 테마를 만들 수 있습니다. 다른 조건에서 다르게 작동하도록 설정할 수도 있습니다. 가장 흔한 템플릿 파일은 header, footer, sidebar, content입니다. 하지만 더 많은 템플릿 파일들이 존재하죠.
  4. 템플릿 태그는 뭐죠?
    • 템플릿 태그는 워드프레스에 무언가를 하거나 보여주라는 명령을 내리는 코드입니다. 예를 들어 <?php the_title(); ?>라는 태그는 현재 글의 제목을 출력해줍니다. 대부분의 템플릿 태그는 간단하지만, 꽤 복잡한 것들도 있습니다.
  5. 404페이지는 어떻게 변경하죠?
    • 관리자화면에서 'Appearance > Theme Editor'로 이동합니다. '404 Template'의 링크를 클릭하고 수정한 뒤 저장합니다.
  6. 워드프레스 Loop는 뭔가요?
    • Loop는 PHP코드로, 워드프레스는 루프태그의 기준에 맞춰 글을 보여주고 형식을 지정합니다. 예를 들어 만약 최신 10개의 글을 역순으로 보여주고 싶다면, 워드프레스는 정확히 생각한대로 구성해줍니다. 반면에 특정 글을 보여주려고 한다면, 워드프레스는 정보를 데이터베이스에서 그 글을 선택하는데 사용할 것입니다.
  7. 어떻게 하면 이메일 스팸을 피할 수 있나요?
    • 가장 쉽게 피하려면 이메일 주소가 들어간 이미지를 제작해서 웹사이트에 추가하는 방법이 있습니다.
  8. 내가 쓴 글로 어떻게 링크를 걸죠?
    • 관리자화면에서 해당 글의 ID를 확인합니다. 그리고 링크를 걸기 위해 코드를 사용합니다
      예시: <a href="index.php?p=123">Post Title</a>
      123을 글의 ID로 변경하면 됩니다.
  9. 피드란 뭔가요?
    • 피드는 피드리더에서 사이트에 접근할 수 있도록 해줍니다. 피드리더에서는 새로운 컨텐츠와 다른 사이트의 업데이트를 확인할 수 있습니다. 피드는 여러분의 블로그를 유명하게 만들거나 블로거들 사이에서 최신 정보를 유지하는데 좋습니다.
  10. 웹사이트를 관리할 때 가장 중요한 사항들은 뭔가요?
    • 워드프레스를 최신상태로 유지하세요. 웹사이트에 어떠한 잘못된 링크나 스팸댓글도 있으면 안되겠죠. 그리고 항상 백업하세요.

덧) 헥헥… 많네요;;
덧2) 13번의 ‘5분 설치’는 동의하기 힘드네요-_-
덧3) 35번, 39번, 49번은 저도 자세히는 모르겠군요ㅠㅠ

신고
tag2003년, 404, 5분 설치, backup, Blog, category, CMS, Code, database, e-mail, emoticon, FAQ, FEED, FTP, Gallery, GNU 일반 공중 사용 허가서, hosting, IMAGE, Link, loop, Matt Mullenweg, Mike Little, MySQL, Network, Open Source, Page, php, phpmyadmin, platform, plugin, read more, reverse proxy, server, Shell, Software, spam, tag, template, text, Theme, upload, version, web, web browser, website, Widget, Wordpress, WordPress.com, WordPress.org, 가입, 공유, 관리자, , 기능, 기업, 날짜, 답변, 댓글, 메모장, 번역, 보호, 비밀번호, 설치, 시간, 안전모드, 장점, 저작물 관리 시스템, 전문가, 정보, 주석, 질문, 최소사양
트랙백2 , 댓글4개가 달렸습니다.

상큼발랄 Hooful vs 깔끔세련 온오프믹스

2013.02.12 15:29 in Web/Service

2008년, 국내에 싸이월드가 아닌 다른 SNS라는게 받아들여지고 있을 즈음, 오픈베타를 시작한 서비스가 있습니다. 모임중계 서비스인 온오프믹스죠. 제가 온오프믹스를 접했던 것은 미투데이에서 한번 링크를 타고 들어갔던 기억이 최초일 겁니다. 그때부터 국내의 거의 유일한 모임중계 서비스로 자리잡아왔죠.

그렇게 5년이 지난 지금은 처음과는 모습이 많이 달라졌습니다. 그때 당시에는 개발자들이나 특정 스타트업들만 사용했던 시기와는 다르게 요즘엔 굵직한 회사들이나 방송국 등에서도 사용하고 있습니다.

저 역시도 얼마전까지 모임중계 서비스는 온오프믹스만 알고 있었는데, 새로운 서비스를 접하게 되었습니다. 여기서 이야기할 Hooful이죠. 온오프믹스의 약간(?) 불편한 시스템에도 어느 정도 적응해가면서 썼던 저에게 새로운 서비스는 정말 반길만할 일입니다. 서론은 여기서 접고 본격적으로 비교해 보겠습니다.

Hooful vs 온오프믹스

표면적으로 두 서비스는 모임중계라는 타이틀 안에서 같은 것 같이 보이지만, 속을 들여다보면 의외로 다른 부분이 많습니다. 보이는 공통점과 차이점을 정리하면 다음과 같습니다.


Hooful

온오프믹스
오픈베타 시작 2012년 12월 2008년 03월
슬로건 나를 위한 즐거운 활동 함께하는 즐거움!
첫 화면 이벤트 안내, 서비스 소개 여러 모임이 깔끔하게 정리된 모습
분위기 따뜻함, 활기참, 재미 전문적, 기업, 세련됨
기본UI 그리드 형식 목록(리스트) 형식
세부페이지 jQuery를 이용한 창 팝업 이벤트별 페이지 제공
회원가입 페이스북, 트위터, 이메일 페이스북, 트위터, 구글, 미투데이, 다음, 이메일
모임참여/개설 쉬움 쉬움
모임 찾기 종류별, 날짜별 검색 종류별, 지역별, 시간별 검색
유료모임 준비중(테스트단계) 카드, 계좌이체, 가상계좌 지원
RSS X 전체 RSS 지원
공식 페이스북 fb.com/hoofuling
회사소식, 공지사항, 이벤트홍보 등
fb.com/onoffmix
모임홍보
공식 트위터 @_hooful
직접 운영, 친근한 이미지
@onoffmix
페이스북 연동으로 같은 컨텐츠 발송
공식 블로그 blog.hooful.com
이벤트 홍보
blog.onoffmix.com
공지사항 작성, 작년 12월 21일 이후 글 없음

활동 만들기 VS 모임개설

온오프믹스는 5년이나 된 서비스답게 전문적이고 세련된 느낌을 줍니다. 그에 반해 후풀은 전체적으로 따뜻한 분위기입니다. 그런 분위기 때문일까요? 개설되는 모임의 성격들도 확연히 다릅니다. 후풀은 좀 더 가벼운 모임이 많은 반면, 온오프믹스는 좀 더 전문적인 세미나나 교육같이 무거운 느낌의 모임이 많습니다.

결정적으로 두 서비스가 지향하는 목표가 다르다는 것은 단어사용에서 확실히 볼 수 있습니다. 위의 제목에서도 썼지만, '활동 만들기''모임개설', 같은 기능이지만 이 두 단어에서 차이가 느껴지지 않나요?

아직 성장중인 서비스 - 후풀

후풀은 현재 베타서비스 중입니다. 지금도 모임을 개설하거나 참여하는 데에는 큰 문제가 없지만, 아직 유료모임의 결제문제 등 여러 기능면에서 아직 성장 중입니다. 최근에는 '활동후기'라는 기능을 추가해서 처음 참가하는 사람들에게는 도움을, 그리고 모임 개설자에게는 피드백을 받을 수 있도록 하였죠.

선두주자인 온오프믹스와는 다른 따뜻한 분위기와 여러 활발한 이벤트들, 그리고 개발자분의 열정(…)이 함께하는 서비스인 후풀! 어떻게 발전할지 기대됩니다:)

신고
tagBlog, facebook, Hooful, onoffmix, rss, Service, Slogan, SNS, Twitter, UI, 따뜻, 모임, 발랄, 분위기, 비교, 상큼, 세련, 중계, 활동
받은 트랙백이 없고 , 댓글이 없습니다.

티스토리 블로그에 트위터카드 적용하기

2013.01.30 16:23 in Web/Coding

어제, 트위터에게서 메일을 받았습니다.

미리 신청해두었던 트위터 카드 신청이 승인되었다는 메일이였습니다+_+ 이제 트위터에 누군가 제 글을 공유한 것을 twitter.com이나 공식앱에서 보면 제목과 저의 아이디를 달고 표시됩니다. 이미 뉴욕타임즈와 같은 해외 유명 신문에는 대부분 적용된 기능이죠.

트위터 카드?

트위터 카드는 트위터 내에서 링크를 공유할 때 그 링크에 대한 자세한 설명을 보여주도록 하는 도구입니다. 크진 않지만, 어떤 사람이 어떻게 공유할 지 모르는 트위터에서 출처와 컨텐츠를 만든 사람을 부각시켜준다는 점에서 괜찮은 것 같습니다.

트위터카드는 3가지 순서만 따라서 하시면 됩니다.

  1. 문서를 읽고 원하는 카드형식을 고릅니다.
  2. 원하는 카드형식에 맞춰 메타태그를 적용하고 테스트도구로 확인합니다.
  3. 트위터카드 적용 신청서를 작성하고 제출합니다.

적용하기가 어려운 것은 아니지만, 3번에서 신청서를 제출하고 나서 걸리는 시간이 꽤 됩니다. 저 같은 경우는 1월 7일에 신청했으니, 20일이 넘게 결렸네요ㅠㅠ

아래 티스토리를 기준으로 적용방법을 적어놓았습니다.

매우 쉬운 트위터카드 적용

적용방법은 엄청 쉽습니다. 페이스북의 오픈그래프처럼 <head></head>에 메타태그 몇 줄만 넣어주면 끝이죠.

위에서 ‘@아이디'부분만 맞게 바꿔주시면 됩니다. 소스를 적용 하셨다면 잘 나오는지 테스트 해보시기 바랍니다.

자세한 설명 보기

신청서 접수 그리고 기다림…

테스트에서 잘 나왔다고 끝!이 아닙니다. 이제 신청서를 작성해야 합니다.

  • Contact information: 신청이 접수된 후 연락이 올 정보이니 정확하게 적습니다.
  • Website URL: 트위터카드를 적용한 사이트를 적습니다.
  • Website description: 저는 간단하게 personal blog라고 적었습니다.
  • Twitter Username associated with that domain: 본인의 계정을 적어주시면 됩니다.
  • Example Summary Card URL: 위에서 트위터카드를 테스트했던 주소를 적어주시면 됩니다.

다 작성하셨으면 아래 Submit을 눌러 신청서를 보냅니다. 그리고… 기다립니다;;;

신청이 완료되면?

신청서가 처리되면 신청이 접수되었는지, 아니면 거절되었는지 신청서에 적었던 메일주소로 결과를 보내줍니다.
신청이 승인되면 트위터에서 이전에 올렸던 글을 확인해봅니다:)

덧) 어쩐지 한국 최초(?)인것 같은 느낌인데요…
덧2) 그런데 왜 트위터 한국지사 블로그는 적용을 안했을까요-_-;;
덧3) 처음에 저는 메타태그 소스만 넣고 왜 안되지…하고 멍하게 있다가 @nalbam님의 도움으로 신청했습니다.
덧4) 날밤님도 http://spic.kr로 트위터카드 신청서를 접수하셨으니 금방 적용 되겠죠!

신고
tagcard, Contents, e-mail, html, nalbam, test, THE NEW YORK TIMES, Tistory, Twitter, 기다림, 순서, 신문, 신청, 저자, 적용, 출처, 해외
트랙백이 하나이고 , 댓글이 없습니다.

획기적인 휴가관리 툴 - Timetastic

2013.01.18 16:18 in Web/Service

휴가관리, 어떻게 하시나요? 큰 기업 같은 경우는 나름대로의 내부에 따로 휴가관리 프로그램이 있지 않을까 생각합니다. 그럼 그 보다 규모가 작은 곳은 어떨까요?

구글에 ‘휴가관리’라고 검색해보면 엑셀이 나오는 걸로 봐서 엑셀로 많이들 하는 것 같네요.

휴가를 예약하는 더 좋은 방법

처음에 Timetastic이라는 이름만 보았을 때는 도대체 이게 뭔 서비스인가 했습니다. 로고에 슬로건으로 붙어있는 휴가를 예약하는 더 좋은 방법이라는 문구를 보고 나서야 이게 어떤 서비스인지 알게 됬죠.

소개영상에서도 나오지만 문서와 스프레드시트, 그리고 달력에 의존하는 기존의 휴가관리 시스템을 한방에 해결하는 획기적인 모습입니다ㅠㅠ

관리자로 사용하기

Timetastic은 회원등급이 관리자와 직원으로 나누어져 있습니다.

직원으로 사용하기

직원의 경우는 메일로 초대받는 형식입니다.


하지만 실제사용은?

회원가입 후 이것저것 만져보면 정말 심플하게 있을 것만 딱! 있는 서비스인데요

It's free to use the beta, but when we go live, your first 3 employees will be free;
each additional will cost 50p per month. Cancel anytime. Yes, really, it’s that simple.

아직까지 베타라서 무료지만, 정식오픈하면 3명의 사용자까지 무료이고 그 이상은 1명당 1달에 50페니(843원 – 2013/01/18 기준)를 지불해야 사용 가능하다고 합니다.

실제 엑셀파일과 문서들로 휴가관리를 하고 있는 상황이라면 Timetastic은 확실히 획기적이지만, 현실적으로 적용할 수 있는 회사가 많을 것으로 예상되진 않네요ㅠ

덧) 아… 결말이 우울해요ㅠ

신고
tagBeta, Google, program, Service, Simple, spreadsheet, Timeastic, 관리, 관리자, 기업, 달력, 무료, 문서, 연차, 예약, 유료, 직원, 획기적, 휴가
받은 트랙백이 없고 , 댓글이 없습니다.

티스토리 첫화면에서만 사이드바 없애기(초간단팁)

2012.11.28 12:03 in Web/Coding

워드프레스 테마들을 보면 티스토리 테마들과는 다르게 첫페이지에서 사이드바를 불러오지 않는 경우가 많습니다. 워드프레스는 대부분 메뉴, 컨텐츠, 사이드바, 푸터 등등 다 php파일로 쪼개져있어서 원하는 부분만 불러오는 게 가능한 걸로 알고있습니다. 그런데 얼마 전 스킨수정을 하다가 티에디션을 쓰면 사이드바를 아주 간단하게 없앨 수 있다는 것을 알게 되었죠.

결론부터 이야기하면 CSS에 아래 한 줄만 추가하면 됩니다.

티에디션의 클래스속성을 사용해 CSS로 감추는 방법입니다. 티에디션을 사용하면 body에 클래스속성으로 ‘tedition_blog’가 붙는데 이를 이용한 것이죠.

그런데 정말 사이드바만 없어지는 현상이 발생합니다(…) 이제 CSS에 한줄 더 추가해서 한쪽으로 치우쳐진 컨텐츠영역을 좀 늘려보겠습니다.

이러면 깔끔하게 중앙으로 옵니다.
참 쉽죠? :)

신고
tagcss, sidebar, Skin, tip, Tistory, Wordpress, 첫화면, 티에디션
받은 트랙백이 없고 , 댓글4개가 달렸습니다.

무료로 나만의 위키 장만하기

2012.11.13 09:10 in Web/Coding

올해 7월 스프링노트가 종료된다는 공지가 떴죠ㅠ 스프링노트를 열심히 쓰시던 분들은 대체재로 에버노트미디어위키 중 한가지를 선택했는데요, 두가지를 간단하게 비교하면 다음과 같습니다.

  에버노트(무료) 미디어위키(설치형)
장점 쉬운 사용법
모바일 친화적
믿을만한 데이터관리
히스토리 기능
누구나 참여 가능
쓸만한 확장기능들
다채로운 서식 가능
단점 용량제한
히스토리 기능 제한
참여기능 제한
제한된 서식기능
호스팅,도메인 필요
설치의 어려움
사용의 어려움

그 중 저처럼 스프링노트에서 에버노트로 옮기신 분들은 아쉬움이 많을 겁니다. 특히나 히스토리 기능과 참여기능의 제한이 가장 발목을 잡죠. 스프링노트의 경우 위키를 기반으로 만든 서비스이다보니 그 두가지가 강력했는데 말이죠. 어쩔 수 없이 대안으로 에버노트를 쓰고있을 뿐입니다ㅠ

스프링노트에 대한 아쉬운 마음에 서론이 좀 길었네요. 이 글에서는 미디어위키 설치에 있어 호스팅 문제와 설치의 어려움 문제를 해결할 수 있는 방법을 알려드릴려고 합니다. 바로 며칠전에 아사달에서 나온 무료 위키호스팅이죠.
(단, 도메인은 가지고 계셔야 합니다.)

무료 위키호스팅?

아사달엔 왜 위키호스팅이 존재할까?

아사달의 위키호스팅 페이지로 가보면, 3가지 상품이 있습니다. 위키무료형으로 신청하기를 클릭합니다.

그런데…

제가 아는 지인중에 한분이 ‘아사달은 무늬만 IT회사지’라고 했던게 떠오릅니다(…)

위키호스팅 신청하기

IE로 바꿔서 접속 후 신청하기를 누르면 다음과 같은 화면이 나옵니다.

도메인을 입력하고 바로신청을 누르면 로그인을 시킵니다(도메인 입력시 2차도메인도 가능합니다)

로그인을 후 진행하면 위키의 공개수준을 선택할 수 있습니다. 목적에 맞게 선택하시고 아래 약관동의신청하기를 누르면 만들어집니다.

마지막으로 아까 입력했던 도메인과 아사달의 서버를 A레코드로 연결시켜 주면 완료입니다.

아사달 로그인 후 상단의 내정보에 가셔서 방금 신청한 위키호스팅의 호스팅정보를 클릭합니다.

그러면 서버명이 나오는데, 이를

‘실행->cmd->ping 서버명’을 쳐보면 IP주소가 나옵니다. 이걸 기억하셨다가,
(저랑 서버명이 같다면 위의 110.45.146.224를 기억하시면 됩니다)

도메인 관리에서(저의 경우는 DNSever) A레코드를 추가합니다.

설정 후 몇시간이 지나면 위키 첫화면을 보실 수 있을 것입니다.

위키호스팅의 장점과 단점


장점단점
  • 도메인만 있으면 비교적 쉽게 위키 장만이 가능함
  • 필수설정들이 미리 되어있음
  • 익숙치 않은 사용자들을 위한 도움말 표시
  • 도메인 선택 가능
  • 추가설정 또는 스타일변경 불가능
  • 아사달과의 꺼림칙한(?) 관계
  • 백업은 어떻게?
  • 느린 속도

위키호스팅의 장점은 처음 위키를 접하는 사람들의 문턱을 낮춰준다는데 있는 것 같습니다. 미디어위키를 설치하면 파일업로드 설정 등 설치 후에도 이것저것 설정해줘야 하는데, 일단 설치만 하면 기본적인 설정은 모두 되어있다는 점이 가장 큰 장점인것 같네요.

문제는 이게 서비스형이다보니 추가적인 설정이나 스타일변경이 불가능하다는 점입니다. 개인적으로는 스타일시트 정도는 수정할 수 있도록 하게 해 주었다면 어땠을까 하는 생각이 듭니다.

그리고 아사달을 소개하는 문서들이 공용(?)으로 들어가 있습니다. 무료상품으로 이용해서 이런게 나온다면 상관없겠지만, 유료상품에도 나온다면 좀 문제가 되지 않을까 하네요.

마지막으로 가장 치명적인 문제인데, 속도가 좀 느린것 같습니다. 저만 그렇게 느끼는건지 아니면 미디어위키 자체의 속도가 느린건지, 아니면 서버의 문제일까요? 속도부분은 개선되었으면 좋겠습니다.


무료 위키호스팅은 속도의 문제도 있고 용량의 문제도 있다보니 개인용이나 아주 소규모용으로는 적합하지만 대규모로 쓰기엔 좀 무리가 있겠죠. 아까도 이야기했지만, 도메인만 있으면 금새 세팅해서 사용이 가능하다는 점이 꽤 큰 메리트가 되지 않을까 싶습니다. 저처럼(?) 소프트한 유저분들은 도메인만 가지고 사용해보셔도 좋을 것 같습니다.

덧) 제가 만든 위키는 http://wiki.ludens.kr 입니다. 최근 수정한 문서는 여기입니다.
덧2) 정말 아사달 사장님은 위키 좋아하시는듯… 사내에도 도입해서 쓰고있다네요.
덧3) 에버노트의 히스토리기능과 참여기능은 프리미엄의 계정은 지원합니다.

신고
tagdomain, EVERNOTE, History, hosting, mediawiki, mobile, springnote, wiki, 서식, 설정, 설치, 쉬운, 아사달
받은 트랙백이 없고 , 댓글2개가 달렸습니다.

이미지의 Alt태그와 Title태그의 중요성

2012.10.29 13:18 in Web/Coding

HTML에 쓰이는 이미지태그(img)에 보면 Alt속성Title속성이 있습니다. 이 두가지 속성의 존재를 아는 분들은 귀찮아서 안쓰고, 모르는 분들은 몰라서 못쓰고 하는 그런 속성이죠. 아시는 분들은 아시겠지만 의외로 쓸모 없어보이는 이 두가지 속성이 웹사이트 또는 블로그 유입에 영향을 끼칩니다.(국내는 그렇게 큰 영향은 없습니다만;;) 긴 글이긴 한데, 저도 한번 자세히 알고싶어서 번역해보았습니다.

이 글은 The Importance of Adding Alt Tags and Title Tags to Images on Your Website의 번역입니다.


검색엔진최적화(이하 SEO)의 전문가가 아닌 사람들에게는 ‘SEO’가 뭔가 대단해 보일 수 있습니다. 하지만 의외로 여러분이 기본적인 내용만 잘 따른다면, 관리하고 있는 웹사이트를 검색엔진(구글, 빙, 야후 등)에 성공적으로 최적화 시킬 수 있습니다.
웹디자이너나 웹개발자들조차 간과하고 넘어가는 중요한 사항 중 하나는 ‘웹사이트에 있는 이미지를 검색엔진에 최적화시키기’입니다. 이미지는 방문객 수에 꽤 큰 영향을 끼칠 수 있습니다.

사람들은 일상적으로 ‘구글 이미지 검색’과 같은 도구를 사용하여 웹서핑을 합니다. 만약 웹사이트에 올려진 이미지에 올바른 키워드로 검색엔진에 맞춰져있다면, 더 많은 트래픽을 유도할 수 있을 것입니다.

이미지의 Alt태그란?

Alt태그 또는 Alt속성은 이미지의 “대체문구”(alternative text)입니다. 보통 Alt태그는 이미지를 설명하는 목적으로 만들어집니다. 웹사이트라면 Alt태그는 사람들에게 보여지지 않습니다. 웹사이트에서 Alt태그가 사용되는 경우가 한가지 있는데, 시각장애인이 음성기반의 소프트웨어로 웹서핑을 할 때 쓰입니다. Alt태그는 시각장애인들에게 어떤 컨텐츠가 지금 보고있는 웹사이트에 있는지 알려주는데 도움을 줍니다. 반면에 시각장애인들을 제외한 다른 대부분의 사람들을 위해서는 검색엔진에 사용됩니다. 검색엔진이 여러분의 웹사이트를 크롤링할때, Alt태그를 이용하여 컨텐츠를 더 잘 이해하고 검색결과 순위에서 적절하게 색인합니다.

Alt태그의 예외

Alt태그가 적용된 HTML 이미지 태그와 예시는 아래와 같습니다.

<img src=”http://ludens.kr/image.jpg” alt=”대체문구 예시” width=”300” height=”238”>
대체문구 예시

이미지의 Title태그란?

Title태그는 간단하게 말하면 이미지의 제목입니다. 웹사이트에 있는 이미지에 마우스를 올리면 나오는 문구를 본 적이 있나요? 바로 그 문구는 이미지의 Title태그가 표시되는 것입니다. Title태그의 가장 큰 목적은 웹페이지를 읽는 사람들에게 이미지에 대한 정보를 좀 더 제공하기 위함입니다. Title태그는 이미지 이외에 다른 웹페이지를 링크할때도 쓰입니다. 물론 이 경우에도 링크된 컨텐츠에 마우스커서를 올리면 Title태그의 내용을 볼 수 있습니다. 보이지 않는 Alt태그에는 딱히 완전한 문구를 넣을 필요가 없지만, Title태그는 여러분의 독자가 볼 수 있기 때문에 정확한 키워드와 완전한 문구가 들어가야 합니다.

Title태그는 3~5개정도의 단어로 구성되어야 합니다. 어떤 사람들은 미련하게 긴 문장(문단)을 Title태그에 넣습니다. Title태그는 짧으면서 유익해야 합니다. Alt태그에서 이야기했던 SEO가 Title태그에도 같이 적용됩니다.

Title태그가 적용된 HTML 이미지 태그와 예시는 아래와 같습니다.

<img src=”http://ludens.kr/image.jpg” alt=”대체문구 예시” title=”타이틀태그 예시” width=”300” height=”238”>
대체문구 예시

Alt태그와 Title태그 사용의 장점

Alt태그와 Title태그로 이미지를 최적화했을 때 얻을 수 있는 장점은 다음과 같습니다.

  • 검색유입의 증가
  • 웹사이트에 대한 높은 품질의 검색
  • 더 많은 유효방문자

Alt태그와 Title태그를 적용한다고 해서 다양한 이익을 가져다 주지는 않습니다. 하지만, 가장 큰 장점은 검색유입의 (꽤 큰) 증가입니다. 잠깐만 생각해보세요. 여러분 웹사이트의 트래픽과 관련한 문제에 두 손 놓고 있을건가요? 여러분들은 약 25% 더 트래픽을 높일 수 있습니다. 단지 지금 올려져 있는 이미지를 최적화하고 새로 업로드 할 이미지를 최적화하는 것만으로 말이죠. 특히 이미지검색으로 큰 효과를 볼 수 있을 것입니다.


국내사정에는 다 맞는다고 할 수는 없지만, 안하는 것보다는 낫다는 생각입니다. 네이버에서 안받아 주더라도 구글에서는 받아주겠죠?(…)

덧) 제목만 보고 번역해봤는데 어째 글이 좀 그렇네요.
덧2) 워드프레스에는 자동으로 Alt태그와 Title태그를 달아주는 플러그인도 있습니다.

신고
tagalt, Blog, Google, html, IMAGE, img, Kohl's, macy's, naver, tag, Title, web, website, 검색, 검색엔진, 검색엔진최적화, 대체, 문구, 방문자, 속성, 영향, 예시, 예외, 유익, 유입, 이익, 장점, 정보, 제목, 최적화
받은 트랙백이 없고 , 댓글2개가 달렸습니다.

Wordpress vs Drupal

2012.09.24 09:00 in Web/CMS

Wordpress & Drupal Coffee Cup Icons by Liam Jay

요새 국내에도 워드프레스를 도입하여 웹사이트를 만드는 곳이 이곳저곳 많이 보입니다.(물론 그게 제대로 된 형태로 들어온지는 잘 모르겠습니다만…) 국내에서 워드프레스로 만들어진 가장 유명한 곳은 서울시죠.
워드프레스는 현재도 영어권에서 매우 선전하고 있는 플랫폼입니다.

워드프레스랑 비슷한 플랫폼으로 드루팔이라는 것도 있습니다. 둘다 저작물 관리 시스템(content management system, 이하 CMS)이라는 공통점이 있지만 차이점도 꽤 있습니다.
드루팔로 만들어진 가장 유명한 곳은 백악관입니다.

해외 블로그에 워드프레스와 드루팔을 비교한 글이 인기를 끌고있어 번역해보았습니다.
드루팔에 조금 치우친 글이긴 하지만 워드프레스와 드루팔의 차이점을 확인하셨으면 좋겠네요.


아래는 WordPress vs Drupal의 번역입니다.

저희가 처음 사이트를 개발하던 2007년도에는, 모든 사이트들을 워드프레스로 만들었습니다. 그때에는 요즘의 사이트보다 규모가 작았고, 워드프레스는 블로그 플랫폼에서 진화한 하나의 독립된 CMS였습니다. 저희가 개발하던 사이트들은 매우 적은 컨텐츠형식을 가지고 있었고, 일반적인 워드프레스 페이지는 고객사에게 새로운 페이지 경험을 주기에 충분했습니다. (저희는 종종 ‘관리자’를 고객들이 그들의 컨텐츠를 업데이트할 수 있는 비밀번호로 보호된 웹포탈이라고 표현했습니다)

위와같은 방법을 통해 고객사들을 늘려나갔습니다. 그러던 중 저희는 더 많은 컨텐츠형식, 더 풍부한 관리자 경험과 더 큰 기업수준의 CMS가 필요해졌습니다. 이때 저희는 드루팔로 사이트를 만들기 시작했습니다.

워드프레스와 드루팔을 비교하는건 분명히 바보같은 일입니다!
드루팔의 컨텐츠 분류방법과 핵심구조에 익숙해지는데에는 시간이 꽤 걸립니다. 하지만 수많은 사이트를 드루팔로 제작하면서, 저희는 서서히 그리고 확실하게 큰 기업수준의 웹사이트와 웹어플리케이션을 만드는데 CMS로 드루팔을 선택하는것을 좋아하게 되었습니다. 만약 여러분이 사용자 권한이 필요한 웹어플리케이션 또는 어떤 종류의 웹프로젝트를 가지고 있다면, 드루팔의 모든 기능은 워드프레스보다 강력합니다. 드루팔은 API개발에 관해서는 워드프레스보다 더 유연하고 자체 캐싱기능은 매우 뛰어납니다.

최종적으로 CMS를 결정할때, 아래와 같은 질문을 고려해보세요.

  • 다른 페이지양식이나 컨텐츠형식이 얼마나 필요한가?
  • 사용자별 권한을 다르게 지정할 것인가?(예시: 관리자, 글쓴이, 비밀글 접근가능 사용자 등)
  • 대기업수준의 보안이 요구되는가?
  • 워드프레스가 아닌 드루팔로 개발을 할 수 있을만큼의 예산이 있는가?
    (평균적으로 드루팔을 통한 개발은 워드프레스보다 2~3배 더 오래걸림)

워드프레스와 드루팔 코어를 건드리지 않는 한에서, 이 둘의 큰 차이점은 아래와 같습니다

  • 테마 판매소
    워드프레스는 혼자 제작하는 사람들을 위한 기가막힌 ‘테마 판매소’가 있습니다. 드루팔 테마는 사지 마세요! 드루팔 초보자들을 위한 멋진 테마들이 있습니다.(Omega Responsive 테마 등) 하지만 드루팔 개발은 여러분이 테마를 따로 만들 수 있는 그런 류의 것이 아닙니다.
  • 넓은 시장
    워드프레스는 넓은 범용성과 작은 웹사이트들에 잘 맞는 많은 플러그인들이 있습니다.
  • 개발 시간
    워드프레스는 사이트를 처음부터 끝까지 개발하는데 매우 쉽습니다. 워드프레스는 적은 컨텐츠형식과 일반적인 마케팅용 웹사이트를 만드는데는 완벽한 툴입니다.
  • 컨텐츠형식
    드루팔은 여러 계정을 지원합니다(관리자, 편집자, 비밀 그룹 등)
  • 관리자 경험
    드루팔은 컨텐츠 편집자들을 위한 새로운 관리자 경험을 가지고 있습니다.
  • 어플리케이션 개발과 API 개발 프로젝트
    드루팔은 일반적으로 복잡한 프로젝트를 하는데 강력한 기능을 가지고 있습니다.
  • 사이트 보안
    드루팔은 대기업 수준의 보안과 사이트 규모를 가지고 있습니다. 수많은 정부기관의 웹사이트가 드루팔로 제작되었습니다. 그 중 가장 유명한 곳은 백악관입니다.

대부분의 개발자들은 사이트의 목적과 필요성을 무시하고 그들이 가장 익숙한 CMS를 추천할 것입니다. 어떤 CMS가 여러분의 프로젝트에 잘 맞는지 알고계시면, 현재 또는 미래에 시간과 돈을 절약할 수 있게 될 수 있을 것입니다.

신고
tagAPI, Application, Blog, caching, CMS, Content Management System, Contents, core, drupal, flatform, Marketing, portal, project, site, Theme, web, Wordpress, 개발, 경험, 공통점, 관리자, 권한, 글쓴이, 대기업, 목적, 백악관, 번역, 범용성, 보안, 비교, 비밀글, 사용자, 서울시, 영어권, 예산, 유연, 저작물 관리 시스템, 정부기관, 차이점, 편집자, 필요성, 형식
받은 트랙백이 없고 , 댓글이 없습니다.

숨겨진 텀블러 무료테마 100여개 모음

2012.08.27 09:30 in Web/CMS


제가 주로 이용하는 블로그서비스 중에  텀블러를 좋아합니다. 텀블러를 5개나 운영하고 있을 정도죠.

Life Log - http://life.ludens.kr
Media Log - http://media.ludens.kr
Ludens' View - http://pic.ludens.kr
Ludens ♥ Opera - http://opera.ludens.kr
Ludens ♥ Infographics - http://info.ludens.kr

어느 서비스형 블로그나 다 마찬가지겠지만, 텀블러를 쓰면서 드는 생각은 '테마가 왜 이것뿐인가??'입니다.
텀블러에서는 테마페이지가 따로 있어 버튼 하나만 누르면 간단하게 설치되지만, 직접 테마를 만드는건 어지간한 능력자가 아니면 어렵습니다ㅠㅠ

텀블러 테마페이지의 All themes에는 160여개의 테마가 있지만, 여기서 유료테마를 제외하면 남는건 70여개밖에 안됩니다. 그나마 여기서 입맛에 맞는 테마를 고르기도 어렵지만, 다른사람과 같은 테마라는게 마음에 걸립니다.
그래서 제가 그동안 찾아놓았던 텀블러 무료테마들을 모아서 레이아웃별로 정리해보았습니다. 텀블러에 테마 적용해서 예쁘게 사용하시기 바랍니다:)

1단테마

2단테마

3단테마

그리드테마(2단)

그리드테마(3단)

그리드테마(4단)

그리드테마(반응형)

기타테마

덧) 근데 진짜 많네요-_-;;; 정리하느라 투자한 시간이...ㄷㄷ
덧2) 제가 쓰는 테마도 위에 있어 가슴이 아프군요 흑ㅠ
덧3) 왜 텀블러는 테마를 노출시키지 않는걸까요;;; 테마페이지에는 맨날 본것만 돌아다니는데ㅠ

저작자 표시 비영리 변경 금지
신고
tag1단, 2단, 3단, Blog, colorful, Grid, Layout, Retro, Service, Simple, Skin, Theme, tumblr, 모음, 무료
받은 트랙백이 없고 , 댓글4개가 달렸습니다.

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, 간편, 감성, 공유, 깔끔, 예쁜, 저장, 즐겨찾기, 직관적, 화려함, 확장기능
받은 트랙백이 없고 , 댓글이 없습니다.

티스토리 티에디션 대표이미지 원본사이즈로 불러오기

2012.08.18 16:23 in Web/Coding

며칠 전 블로그 스킨을 바꿨습니다.
대대적으로 스킨을 변경하는것도 쉽지 않았지만, 메인화면을 티에디션으로 꾸미는데도 꽤 애 먹었습니다.

티에디션이 메인화면을 있어보이게 만드는데는 참 좋은툴이기는 한데, 썸네일을 마음대로 하기가 어렵다는 단점이 있더군요.
제가 원하는 썸네일 크기는 가로가 665픽셀 정도였는데, 크기 수정 자체가 없어서 어떻게 해결해야할지 고민을 좀 했습니다.

썸네일 → 원본이미지로 바꾸기

[티에디션 설정]에 들어가셔서, 이미 배치해놓으신 아이템을 선택하신 후
[디자인]에서 [HTML]버튼을 누르면 HTML수정을 직접 할 수 있습니다.

소스가 엄청 복잡할텐데요, 잘 살펴보면

http://[##_article_rep_thumb_host[?]_##]/[##_thumb_type[?]_##]/[##_article_rep_thumb_hash[?]_##]

라고 되어있는 부분이 있습니다.(?는 숫자)
여기서 중간의 "[##_thumb_type[?]_##]"를 모두 "original"로 바꿔줍니다.(번호는 무시하세요)

위와 같이 수정 후 저장하면 원본이미지 불러오는건 끝입니다.

이 방법의 단점은 사이즈가 제각각으로 나온다는 겁니다.
그나마 티스토리에서 제공하는 썸네일은 크기가 작더라도 썸네일 크기는 다 똑같아서 상관이 없는데 말이죠.

덧) 그래서 저는 DIV에 CSS로 배경이미지로 지정하여 사용하고 있습니다.

이미지영역 소스보기

저작자 표시 비영리 변경 금지
신고
tagcss, design, html, IMAGE, Skin, Source, thumbnail, Tistory, 대표, 원본, 티에디션
트랙백이 하나이고 , 댓글이 없습니다.

불편한 무료문자말고 편하게 PC로 문자 주고받자! - mysms

2012.08.06 09:30 in Web/Service

핸드폰을 쓰다보면 "컴퓨터로 문자를 주고받을 수 없을까?"라고 생각을 많이 하곤 합니다.
물론 그런 마음을 모르는것이 아니기 때문에... 각 통신사에서 이러한 시스템을 가지고 있기는 합니다.

하지만, 유료이거나 무료로 웹에서 사용하는 경우 매우 불편하기 그지 없습니다.

그런데! 이걸 한방에 해결해줄 어플리케이션이 있더군요.

어디서든, 언제든지, 어떤장치에서도 문자를!

아래 소개할 mysms를 보았을때 "text anywhere, anytime and on any device!"라는 슬로건이 가장 눈에 띄였습니다.

슬로건에 알맞게 아이폰, 안드로이드, 윈도우, 맥용 어플리케이션과 웹에서도 사용가능합니다.

mysms 인증하기

(아래 설명은 안드로이드폰 기준입니다.)

mysms를 사용하려면 스마트폰 인증이 필요합니다.
mysms 앱을 다운받고 실행시 나오는 화면에서 핸드폰번호를 입력하여 인증받으면 됩니다.
제 핸드폰의 경우 자동인증이 안되서 인증번호를 기억해서 기다렸다가 수동으로 인증했습니다.

인증되면 자동으로(...) 핸드폰의 연락처와 그동안 받았던 문자들을 동기화합니다.
그리고 인증 후에는 자동으로 mysms가 메시지 기본앱으로 설정되어 받는 문자들이 카톡알림처럼 뜹니다.

PC에서 mysms 사용하기

위에서도 말했듯이 스마트폰 인증만 완료하면 윈도우에서도 문자를 주고받을 수 있습니다.
윈도우용 어플리케이션을 다운받고 설치합니다.
설치 후 핸드폰번호와 설정하신 비밀번호로 로그인한 후 바로 사용이 가능합니다.

연락처와 문자들이 동기화되어있기 때문에 PC에서도 바로 확인이 가능하고, 문자를 보낼때 연락처도 불러올 수 있습니다.

덧) 아이폰용 앱은 아이튠즈 한국계정으로는 접근이 불가능하다고 뜨는데, 미국계정으로만 설치 가능한가 봅니다ㅠㅠ
덧2) 자동으로 동기화하는게 그렇게 기분이 좋지만은 않네요. 물론 동기화가 필수인것 같기는 합니다만;;

저작자 표시 비영리 변경 금지
신고
tagAndroid, Application, iPhone, mac, Message, mysms, PC, SMART PHONE, web, Windows, 동기화, 무료, 문자, 연락처, 인증
받은 트랙백이 없고 , 댓글이 없습니다.

Pinterest 깔끔하게 보는 방법

2012.04.23 21:58 in Web/Coding

BeforeAfter

핀터레스트가 여러 이미지들을 구경하는데에는 좋은 사이트이지만, 해상도가 작은 노트북과 같은 경우 표시되는 이미지수가 많지 않아 불편하실텐데요,
이 답답함을 각 컨텐츠에 달린 댓글을 숨기는 것으로 조금이나마 깔끔하게 볼 수 있습니다.

북마클릿 이용하기

먼저, Craig Fifield가 만든 북마클릿을 사용하는 가장 간단한 방법이 있습니다.
IE, 파이어폭스, 크롬, 오페라 모두 가능한 방법입니다.

Toggle Pinterest Comments

드래그해서 북마크바에 올려놓거나 즐겨찾기로 추가해서 핀터레스트에서 사용해주시면 되겠습니다.

User CSS 사용

약간의 수고를 들이지만 한번 적용시키면 메인의 댓글들이 완전 박멸됩니다. 아래 설명은 오페라기준입니다.

  1. 아래 파일을 다운받아 적당한 폴더에 저장합니다.
    invalid-file
  2. 오페라에서 Pinterest에 접속합니다.
  3. 오른쪽버튼 클릭 후 '사이트 환경설정 편집'으로 들어갑니다.
  4. '디스플레이'탭의 '내 스타일시트'에서 [선택]을 눌러 미리 받아놓은 pinterest-hidecomment.css 파일을
    선택
    [확인]을 누릅니다.
  5. 새로고침을 하면 깔끔한 핀터레스트를 만날 수 있습니다.
저작자 표시 비영리 변경 금지
신고
tagBookmarklet, Pinterest, User CSS, 깔끔
받은 트랙백이 없고 , 댓글이 없습니다.

티스토리 툴바