728x90 반응형 program137 트위터 타임라인 위젯의 디자인 변경에 관한 메모 개인적으로는 표준으로 지원되는 것을 그대로 사용하는것을 적극 추천하고자 하는 바이지만.. 디자이너의 입장에서 생각해보면 사이트에 가장 적합하다고 생각되는 디자인을 반영하고 싶어하는 마음도 이해가 되긴한다. 일단, 최종본은 다음과 같다. 예전에는 아무 위젯이나 생성한 뒤에 아이디만 바꾸어 주면 변경이 용이했던 것으로 기억했는데… data-widget-id로 생성된 코드가 없이 단순아이디의 변경으로는 더이상 적용이 되지 않는것 같다. 보안을 위한 방안인듯한데 아님말고. 일단, 첫번째로 트위터에서 자동생성된 내용은 아래와 같다. Tweets by @xxxxx 위의 자동생성된 내용에 아래의 소스를 추가해주면 아래와 같은 초기설정의 결과물을 확인할 수 있다. 두번째로, 위와 같이 만들어진 기본디자인에 아래의 옵션.. 2013. 8. 3. SASS를 사용해 본 소감 요새 한달간 SASS를 만지작거리곤 했었다. 프레임워크를 통해서 CSS를 작성하는 방법으로 루비를 인스톨 시킨후 관련 프로그램을 인스톨시켜두면 기본작업환경은 끝나는 방식으로 의외로 벽은 높지 않았다. LESS와 SASS사이에서 갈등을 하다 처음엔 LESS를 도입해 봤다가 SASS로 바꾸었었다. 둘다 루비만 준비되어있다면 Mac과 Window에서 사용가능하다. 처음에는 신기하고 재미있기도 해서 3월중에 있었던 안건에 활용해 보았다. 잠시 사용해본 소감 메모.루비를 인스톨하는등 프레임워크 사용을 위해 별도로 작업환경을 준비해둬야 한다.대규모작업에 있어서 기본룰을 정할때에 사용하면 유용할듯하다.소규모작업에서는 큰 효과를 기대하긴 어렵다.소규모작업이라도 MIXIN, 변수를 이용해서 템플렛용으로 몇가지 세트를 만.. 2012. 4. 2. Facebook OGP정보가 갱신되지 않는다면? - Facebook Debugger로 해결하기. ￭ Facebook OGP수정 Facebook을 활용하는 사람들 중에서 블로그나 개인의 사이트를 운영하는 사람들이 'Like','Share'등을 사용하면서 OGP의 사용률이 늘어나고 있는것 같은데 그만큼 Facebook이 활발하게 이루어지고 있다는 것을 반증하고 있는 것이겠지? 그동안 블로그에서 사용해오던 OGP정보를 조금 수정했다. 지금까지는 티스토리에서 제공되던 ［##_blog_link_##］태그를 사용하던것을 그만둔 것으로(처음 설정부터 문제였을지도 모르겠지만) 블로그의 각 기사를 기본 URL로 설정을 하려 했던 발상부터가 틀렸던것 같다. (og:url을 각각의 블로그별 URL로 설정을 하는게 좋을 것 같았지만 그게 문제 였던듯..) 혹시, 똑같은 문제로 고민하고 있을지 모를 분들을 위하여..(어딘.. 2012. 1. 6. 페이스북을 친숙하게 - facebook navi ￭ 일본 facebook은 쬐끔 다르다? ▲ 일반적인 로그인화면 누구나 사용하고 있을법한 SNS facebook. 혹시 각 국가마다 버전이 있는건지 모르겠지만... 로그인하기전에 보여지는 페이지는 기본적으로 이런 페이지일것이다. 각국의 언어로 번역되는 것 말고는 다른 부분이 없는데... 일본에서는 다르게 사용되고 있었다. 어느날 우연히 보게된 이 페이지에 사용된 캐릭터는 '豆しば(마메시바)'. ▲ 일본의 로그인화면(가끔씩 등장한다.) 접속국가에 따라 다르다면 어떤식으로 표시되고 있는지 궁금하다. 이 페이지가 생기기 시작한것은 facebook페이지에 facebook navi라는 메뉴가 생기면서부터인것 같다. 과연 캐릭터천국이라고 해야 할려나.. 단순히 귀여운 캐릭터를 사용하여 가입자를 늘리려는 것이 아니라.. 2011. 12. 28. HTML5 - CANVAS 사용 예제는 HTML5의 CANVAS를 이용하여 그린 것으로, 예제는 diveintohtml5.org에서 사용된 예제를 사용하였음. SAMPLE : JAVA SCRIPT : HTML : 2011. 7. 31. OGP(Open Graph Protocol)가 뭐지? 미리 말해두지만 OGP에 관한 상세정보는 http://ogp.me/ 라는 곳에서 확인해 볼 수 있으며 이곳의 글을 읽는다면 더이상 이 페이지를 읽을 필요 없다. SNS중에서도 특히 페이스북의 강세는 식을 줄 모르는것 같다는 생각이 계속 들고 있는데 여러모로 실험적이면서 재미있는 기능들을 계속해서 추가해가는 것을 보고 있노라면 그들의 열정과 아이디어의 산물들이 현시대 인터넷 업계의 흐름을 이끌어가고 있다는 생각이 들게끔 만들기 때문이다. 쓸데없는 각설은 여기까지만 하고 본론으로 넘어가서 이전 포스팅에서는 티스토리에 설치한 SNS에 관한 내용이었다면 이번에는 잠시 언급한바 있는 OGP에 관한 내용을 다루어 보고 싶다. 본인 역시 처음에는 어떤 효용가치가 있는지도 모르겠고, 좋다니까, 이게 뜬다니깐 하는 생각.. 2011. 5. 3. SNS관련 버튼을 설치해봤다. 여기저기서 SNS(Social Networking Service)를 설치하고 있기에 본 블로그에도 설치해 보기로 했으며 몇가지 시행착오에 대한 메모를 겸한다. 페이스북 http://developers.facebook.com/docs/plugins/ ■ 첫관문은［##_article_rep_link_##］ 티스토리에서 사용중인 블로그 기사 하나하나에 자동으로 추가 시키기 위한 부분을 검색해보니［##_article_rep_link_##］를 사용하라고 나와서 간단하게 적용성공. 자동생성시의 코드 "http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fstudy.may5.net&send=true... 수정후의 코드 http://www.facebook.com/pl.. 2011. 4. 29. 안드로이드용 에뮬레이터 설치하기 스마트폰용 사이트를 제작하는데 있어 필요로 했던 내용들을 정리한 메모용. 일단 스마트폰을 소지하고 있지 않다면 확인할 수 있는 방법이 없는게 사실이다. 이럴때 필요로 하는 것이 시뮬레이터인데.. 본인의 경우 Mac Book을 소지하고 있는 관계로 iPhone용 시뮬레이터는 문제없이 Apple에서 구해서 별반 셋팅이 필요없이 사용이 가능했다. 반대로 Android의 경우가 문제였는데 이런저런 프로그램을 인스톨 할 수 뿐이 없었다. Android의 시뮬레이터를 사용하기 위한 준비단계는 아래와 같다. 1. 일단 Android용 SDK를 다운한다. http://developer.android.com/sdk/index.html 2. Java가 필요함으로 다운로드한다. http://java.sun.com/javas.. 2011. 3. 16. .htaccess를 사용하여 PC와 SmartPhone구별하기 최근에는.htaccess를 이용하여 PC와 SmartPhone을 구분짓는 것이 일반화(?) 되어가고 있는 것 같다. 서버측에서.htaccess의 사용에 어떠한 제한을 두고 있다면 소용없는 방법이라 생각되지만.. 가장 좋은 방법이라고 생각된다. 일단, 사전확인은 필요. 지금까지 많이 사용되던것이 PC, iPhone의 구분에 CSS를 사용하며 각 단말기별로 max-device-width등을 이용해서 지정하는 것이었는데 단말기는 계속 증가하는 추세고 아예처음부터 구분시키는 이 방법이 제일(?)은 아닐런지. ------------------------------------------------------------------------------ RewriteEngine On RewriteCond %{HTTP_.. 2011. 3. 11. 스마트폰사이트 제작관련 참고사이트 이번 스마트폰사이트 제작시에 참고한 사이트들. 실제로 이정도의 퀄리티까지는 끌어내진 못했지만. 짧은 기간에 많은 도움을 받은 곳들이라 메모용으로.. ■디자인참고 http://iphonedesignarchive.jp/ http://web.meet-i.com/?type=web http://www.ishowcase.jp/ http://www.forexpress.com/contents/index.php?ID=3324(주식관련) http://www.tappgala.com/ http://tapfancy.com/ http://www.youthedesigner.com/2010/03/10/29-sexy-iphone-app-designs/ http://www.mobileawesomeness.com/ http://cssip.. 2010. 12. 9. 스마트폰 안건을 진행해 볼 기회를 얻다. 요근래 조금 과장시켜서 죽을정도로 일을 했는데 원인이라면 혼자서 담당하고 있는 일에 과부하가 걸린 상태로 계속 일을 진행했기 때문이다. 어느정도 마무리된 시점에서 돌이켜 볼때 본인이 스킬이 없기에 일어난 일 아닌가 생각도 해 봤지만 스킬문제뿐만이 아니라 안건의 납기일이 거의 동시에 정해진 안건을 4건정도 진행하다보니 생긴 일이었다. 물론 서포트가 있었기에 그나마 가능했지만. 어쨌건...이런저런 일로 이번에 처음으로, 관심을 가지고 있던 스마트폰용 웹사이트제작에 참여할 수 있었다. 담당부분은 디자인과 페이지 코딩이었다. 처음계획과는 달리 10여페이지정도의 소규모로 변경되었지만... 언제나 있는 일이지만 처음 기획과는 달리 달라져가는 클라이언트의 아이디어, 회의결과에 따라 달라지는 상황에서 디자인을 새로 고.. 2010. 12. 3. IE가 싫어요! 특히 IE6이 싫은 개인적인 감정입니다만... 최근 IE로인한 문제점이 부각된 국제적인 사건이 바로 중국의 구글등 중국에 진출해 있는 국제적인 IT기업들에 대한 사이버공격소식이라고 생각됩니다. 중국의 정보차단의 일면을 본것 같습니다. 일설에 의하면 국제적으로 중국에 대한 좋지않은 기사들을 쓰고 있는 자들의 개인정보를 빼내기 위해서 Gmail등에 접근한것으로 보인다고 합니다. 물론 현재 중국에서는 그런일 없다고 말하고 있지만.. 현재 돌고 있는 정보에 의하면 IE전체 버전에 걸쳐 미수정된 부분을 공격하여 해킹을 시도한것으로 보인다고 합니다. 이는 Microsoft사도 인정하고 있는 부분이며 특히 XP에서 IE6를 사용하고 있는 유저는 그 위험성이 제일 높다고 하내요. 이거 한국에서 가장 많이 있는 케이스는.. 2010. 1. 18. Yahoo! 검색바 디자인 미국 야후의 리디자인과 함께 검색바의 디자인에 대해서 잠시 궁금해졌습니다. 세계의 야후의 검색바의 디자인은 "똑같은 디자인"을 하고 있을까 라는 단순한 궁금증이었지만 결론부터 말하자면 (당연한 것으로 받아들일지도 모르겠지만) 틀리다입니다. 아래는 미국, 중국, 한국, 일본의 야후 검색창을 캡춰한 것입니다. 야후 미국 우선 야후의 태생이 미국인 만큼 가장 기본적이면서도 야후를 가장 잘 표현하는 디자인이 아닐까 합니다. 위의 2007년도 디자인과 비교해 보자면 탭의 표현이 좀더 세련되고 알기 쉽게 변경된점과 그라데이션의 적용도의 차이가 아닐까 합니다. 변함없이 워드휠(word wheel) 이 검색바의 하부에 자리잡고 있습니다. 야후 중국 중국의 검색바는 2년전(위:2007년도)과 확연히 차이가 있는것을 아실.. 2009. 9. 4. Yahoo.com의 디자인변경과 관련해서 YAHOO!(이하 야후) 미국이 조만간 바뀌는 것은 모두들 알고 있으실려나? 아직은 원하는 화면으로 사용이 가능하게끔 되어있지만 조만간 확정되지 않을까합니다. 눈에 띄게 달라진 점이 있습니다. 결과물을 보면 알 수 있겠습니다만... 아이콘의 크기와 모양이 바뀌었고. 각 단의 사이즈에 변화가 있습니다. 이런것 보다도... 무엇보다 가장 눈에 띄었던 것은 메인 뉴스창 내에서의 사진의 크기가 크게 바뀌었다는 점이 아닐까 싶습니다. 기본적인 3단 구성에는 변함없지만 가장 많은 시선을 끄는 메인뉴스 부분의 구성요소인 4개의 주된 뉴스등 구성요소에는 변화가 없이 동일하면서도 레이아웃의 변화에 의해 그 인상이 크게 달라져 보이는 것을 알 수 있습니다. 사용되는 사진들의 비율을 와이드로 바꾸어준것도 큰 요인중에 하나는.. 2009. 9. 2. 일본 정권교체순간의 사이트들 **블로그 내용과 블로그 타이틀의 타당성에 대해서는 솔직히 정확한것인지는 모르겠습니다. 30일. 일본에서는 정권교체가 이루어졌습니다. 자민당이 아닌 민주당이 압승을 거두었는데요 고이즈미 총리의 퇴임이후 계속해서 내려가던 지지율은 결국 이런식으로 막을 내렸다고(개인적으로) 보고 있습니다. 개인적으로 정치에 관심이 있는 것도 아니지만 문득 이런한 정보를 웹에서 어떤식으로 보여주고 있을까 하는 생각에 사이트를 뒤져봤습니다. 선거가 모두 끝날때쯤 하여 관련 페이지를 제공하고 있는 사이트를 몇군데 찾아내어 스크랩을 해봤었습니다. 개인 자료정리겸 공부 차원에서 별거아닌 나름비교분석을 해봤습니다.(거창하게 비교분석이라고 말하기도 멋하지만...) 1. 색상 역시 어느사이트이건 정보를 위주로 제공하는 사이트의 배경색은 .. 2009. 8. 31. White Box를 본후 건축과 웹의 공통점을 생각해 봄 무엇이든 관심이 생기면 그 관심이 생긴것에 짜맞추게 되는것이 사람이라는 동물이 아닐까 싶다. (그런면에서 나는 확실히 그런류의 인간인듯.) 이 영상을 보면서 내맘대로 UX와 관련지어 느낀점. UX라고 하는 것은 말 그대로 궁극적으로 사용하기 편한 웹 서비스를 제공하는데 있다고 본다. 정보를 얼마나 빠르고 정확하게 보여주는가가 큰 관건인 만큼 기반을 얼마나 제대로 다져두느냐는 건축과 같은 맥락이 아닐까?건축역시 거주자가 생활하기 편하도록 삶의 일부를 설계하는 것이며 이는 앞서 말한 바와 같이 비슷한 점이 많이 있다고 생각하게 되었다.동선이나 입구의 위치등등 결정해야 할 상황도 많이 있고 검토해야 할 것도 수두룩하다. 실제로 건축계에서 웹쪽으로 전향한 사람들의 작품에선 그러한 느낌을 많이 받곤하는데(플래시,.. 2009. 8. 12. 온라인숍을 위한 10가지체크항목 무엇을 판매하고 있는 온라인숍인지 한눈에 알수있도록 하고있는가. 다른 곳과 차별화가 되는 상품이나 서비스를 캐치코피로 강조하고 있는가. 팔리는(강조할만한) 상품을 눈에 띄게 하고 있는가. 고객이 목적을 달성하기 위해선 어느페이지로 향해야 하는지 알기 쉽게 되어있는가. 상품이나 기업의 이미지등 웹디자인에 통일성이 결여돼어있지는 않는가. 결재방법이나 송료의 정보등이 쉽게 알수있게 표시되어있는가. 고객이 가지고 있는 문제를 해결하기 위한 정보를 제공하고 있는가. 고객에게 신뢰감과 안심감을 제공하고 있는가. 실제 매장에서 판매하고 있는듯한 자세를 취하고 있는가. 사이트이름이나 점포의 이름이 관리하고 있는 상품, 서비스명을 포함하고 있는가. 원문기사 : http://ascii.jp/elem/000/000/436/.. 2009. 8. 2. SEO와text-indent 구글에서는 숨겨진 텍스트 및 링크에 대해서 다음과 같이 가이드를 하고 있다. 콘텐츠에서 텍스트 또는 링크를 숨기면 방문자에게 제공되는 정보와 검색 엔진에 제공되는 정보가 달라지므로 신뢰할 수 없는 사이트로 간주될 수 있습니다. 여분의 키워드와 같은 텍스트를 다음과 같이 여러 방법으로 숨길 수 있습니다. 흰색 배경에 흰색 텍스트 사용 이미지 뒤에 텍스트 포함 CSS를 사용하여 텍스트 숨김 글꼴 크기를 0으로 설정 숨겨진 링크란 사이트 방문자의 눈에는 보이지 않고 Google 검색 로봇이 크롤링하도록 다음과 같은 방법으로 만들어진 링크를 말합니다. 링크가 숨겨진 텍스트로 구성됨(예: 텍스트 색상과 배경 색상이 동일) CSS를 사용하여 높이가 1픽셀에 불과한 매우 작은 하이퍼링크 생성 단락 중간에 사용된 하이.. 2009. 7. 11. 사용자 경험을 토대로한 사전기능 방금전에 안 것이지만... 지금까지 모르고 있었던 것을 "야후"와 "네이버" 그리고 "다음"의 사전기능에서 UX에 관해서 또 한가지의 배움을 얻었다. 오늘 배운것은 툴팁의 활용에 관해서이다. 본인의 잡식성블로그에 투고하기 위해 블로그를 하던중 "주마등"의 한자가 떠오르지 않아 검색하면서 알게된 기능이다. 지금까지 전혀 느끼지 못하고 있었던 것인 만큼 새로웠다. 다음을 보도록 하자. 처음에는 야후의 국어사전에서 "주마등"을 검색해봤다. 별다를 것 없이 사전으로서 필요한 기능인 단어의 내용과 한자어의 경우 한자를 같이 보여준다. 사전이 다 이렇지 뭐... 두번째로는 "다음"과 "네이버"의 국어사전을 보겠다. 틀리다. 야후보다 친절한것을 바로 알 수 있다. "다음"보다 "네이버"가 관련단어의 의미를 조금더 보.. 2009. 7. 11. HTML요소중 SEO관련된 몇가지 일어원문(2009/7/6) 기사에의 링크 Title태그 Title태그는 변함없이 매우 중요한 요인이며, 키워드는 가능하다면 앞에 위치시키는 것이 좋다고 합니다. anchor텍스트 anchor텍스트도 변함없이 중요하며, 외부링크이건 내부링크이건 상관없이 키워드를 포함한 anchor텍스트를 사용하길 권한답니다. 도메인의 분산 피링크의 평가에 있어서 고려되는것은, 링크 그 자체의 수가 아닌 링크의 원래의 도메인수라고 합니다. 링크의 원래도메인이 분산되어 있다면, 링크수가 적더라도 상위에 표시될 영향력이 커진다고 하내요... 소셜메디아 twitter나My Space, facebook등 대표적인 소셜메디아 사이트가 어느정도나 영향을 끼치는지는 아직 확실하게 나타나있지 않다고 합니다. 단지, 최신의 정보를 상위에 .. 2009. 7. 9. SEO에 도움이 되는 5대명언집 일어원문(2009/6/24) 기사에의 링크 영문기사에의 링크 SEO에 도움이 되는 5대 명언집 ~ SMX Advanced 2009에서 발췌 re="nofollow"링크의 취급법 각 검색엔진의 대표가 nofollow속성에 근접해 있는 링크를 어떤식으로 취급하고 있는가에 대해서. 구글 : 새로운 페이지의 발견에 사용되는 일은 없으며, 존재하지 않는것처럼 취급한다. 하지만, 사용했다고 해서 경고의 대상이 되지는 않는다. 야후 : 새로운 페이지의 발견에 사용된다. 하지만, 신용도나 권위있는 페이지에 영향을 미치지는 않는다. 마이크로소프트 : 새로운 페이지의 발견에는 사용되지 않는다.(Bing이 아닌 Live Search에 한해서) PageRank의 대상 Matt Cutts씨가 Q&A세션중에 다음과 같이 발언했습.. 2009. 7. 7. 이전 1 2 3 4 5 6 7 다음 728x90 반응형
