전체 글 썸네일형 리스트형 Twitter의 로그인 기능으로 살펴보는 unobtrusive JavaScript 최근 많이 사용하고 있는 트위터의 경우 웹페이지를 통해 사용하는 사람보다 별도의 프로그램을 이용하여 사용하는 사람이 많은 서비스입니다. 저같은 경우도 데스크탑에서는 트윗덱을 아이폰에서는 트위터 공식앱을 사용하여 트위터를 이용합니다. 이렇게 별도의 앱을 사용하여 서비스를 이용하다 보면 특별히 웹페이지로 오게 되는 일이 별로 없습니다. 최근에는 좀 나아졌을지도 모르겠지만 트위터 웹페이지가 그렇게 안정성이 좋지도 않습니다. 몇 달 전만해도 한국 시간으로 밤 - 미국 시간으로 아침에서 낮이 되는 시간 - 이 되면 로그인도 하기 어려웠고 정상적으로 트위터를 사용하기가 어려웠으니까요. 오늘 적어보려 하는 것은 JavaScript를 사용하여 개발을 할 때 중요하게 생각해야 할 Unobtrusive JavaScript.. 더보기 Google Docs 모바일 에디팅 지원 우선 다음의 동영상부터 먼저 보시겠습니다. 위 동영상은 모바일 폰에서 Google Docs의 문서를 편집하는 기능에 대한 것입니다. 동영상을 본 느낌은 어떠신가요? 웹에서의 WYSIWYG 에디터에 대한 이야기를 하려면 먼저 에디터가 기본적으로 동작하는 방식에 대해 이해할 필요가 있습니다. 대부분의 리치 웹 에디터는 브라우저에서 제공하는 contenteditable (IE인 경우 designmode를 사용하는 경우도 있음) 프로퍼티를 설정하여 브라우저에서 특정 엘리먼트를 수정할 수 있는 상태로 만든 후 여기에 JavaScript등을 이용하여 고급 기능을 제공하는 형태로 만들어져 있습니다. contenteditable을 설정하더라도 기본적으로 제공해주는 기능에는 한계가 있기 때문에 이런 한계를 뛰어넘고자 J.. 더보기 jQuery 1.4.4가 릴리즈 되었습니다. jQuery 1.4.3이 정식 릴리즈 된 것이 10월 16일이었는데 보름 정도 지난 11월 3일 jQuery 1.4.4 RC2 가 나오더니 11일 정식 버전이 릴리즈 되었습니다. (http://blog.jquery.com/2010/11/11/jquery-1-4-4-release-notes/) 버그가 많이 수정 되었고 새로운 기능(.fadeToggle: 투명도를 변화시키면서 대상 엘리먼트를 보여주거나 숨김)도 추가되었습니다. 변경 내용을 보면 버그 수정이 상당히 많습니다. 기존에 이상하게 동작한 내용이 있다면 업데이트를 고려해보는 것이 좋을 것 같습니다. 하위 호환성에서 변경된 내용이 있는데요 display:none으로 감추어진 엘리먼트를 검사할 때 .width() 나 .height() 메소드에서 0을 반.. 더보기 UI 개발자의 또다른 기술력 - 사이트 최적화(3) 사이트 최적화 방법은 크게2가지로 나뉜다고 설명드렸는데요, 데이터의 양을 줄이자 데이터의 요청자체를 줄인다. 이번에는 '데이터의 요청자체를 줄인다.'를 설명드리고자 합니다 지난 2편에서는 데이터의 양(사이즈)을 줄이는 방법으로 압축위주로 안내를 해드린것 같은데요, 그보다 오늘말씀드리는 것이 조금더 중요할것 같습니다. HTTP Request는 줄이는것이 목적입니다. 이미지를 하나로 합치기.(CSS Sprite) 다운로드되는 이미지의 개수 만큼의 request를 줄일 수 있는 방법은 이미지를 사용하지 않거나, 여러가지 이미지를 하나로 합치는 방법이 존재 합니다. CSS Sprite 기법은 이미지를 합쳐서 하나의 이미지로 만들어서, 실제 필요로 하는 부분에서는 CSS Background position 속성을.. 더보기 UI 개발자의 또다른 기술력 - 사이트 최적화(2) 지난번 UI개발자에게 사이트 최적화 기법이 어떤 의미인지 언급했었습니다. 남의 일이 아니라는 점이겠네요 ^^ 물론 국내에 UI개발만 하는분들이 많지는 않지만, Front-end 쪽의 개발을 맡고 계신분들은 이런 부분의 기술력을 가지고 있으시길 바라겠습니다 이번엔 그 많은 최적화 기법중 내가 쉽게 적용해보고, 최대의 효과를 얻을 수 있는 몇가지를 소개하겠습니다. 최적화의 방법은 크게2가지입니다 데이터의 양을 줄이자 데이터의 요청자체를 줄인다. 다시말해, 작은데이터를 적게 보내면 되는 것인데요. 모든 최적화의 출발점은 2가지의 관점에서 출발하고 고민해야 합니다.실제로 알려진 다양한 기법은 모두 이 2가지에서 크게 벗어날 수 없습니다. 아 물리적인 서버와 네트웍상황을 개선하는 방법이 있지만, 개발자가 직접적으.. 더보기 Sencha Animator Ext JS, Sencha Touch 등으로 유명한 Sencha에서 Sencha Animator(http://www.sencha.com/products/animator/)를 출시하였습니다. Sencha Animator는 WebKit 계열의 브라우저에서 동작하는 CSS3 기반의 애니메이션을 만들 수 있는 도구입니다. 플래시와 유사하게 타임라인을 지원하며 객체와 이미지를 화면에 드래그하고 키 프레임을 설정할 수도 있습니다. 하지만 CSS3로 동작하기 때문에 플래시가 동작하지 않는 iOS 기반의 기기에서도 정상적으로 동작합니다. 또한 CSS3에서 제공하는 기능을 적용할 수도 있으며 사용자가 직접 CSS를 만들어 적용할 수도 있습니다. 홈페이지에서 홍보 문구로 내세우고 있는 것은 1. 서드파티 플러그인 없이 C.. 더보기 jQuery mobile jQuery mobile 1.0의 alpha 1 버전이 발표되었습니다. (http://jquerymobile.com/2010/10/jquery-mobile-alpha-1-released/) 두 달 전 프로젝트의 시작을 알리는 글(http://jquerymobile.com/2010/08/announcing-the-jquery-mobile-project/) 이후 처음으로 발표된 결과물입니다. jQuery mobile의 특징을 정리하면 다음과 같습니다. jQuery mobile은 progressive enhancement을 근간으로 만들어 졌습니다. 우선 HTML만으로도 기능이 동작하도록 한 후 여기에 javascript를 추가하여 더 나은 동작을 할 수 있도록 만들어 졌습니다. 이렇게 만들 경우 대부분의 브.. 더보기 UI 개발자의 또다른 기술력 - 사이트 최적화(1) 웹사이트의 최적화라고 하면 개발자들내에서도 서로 다른 생각과 경험이 있을것 같습니다. 저의 경우는 모든 프로젝트가 마무리 되고 끝나는 시점에 고객의 요구사항에 따라서 '한번 해볼까?' 라고하여 Stress test 를 실행해보거나, 어렵게 구한 Roadrunner 와 같은 초울트라 강력한 측정 도구를 사용해서, 내가 개발한 사이트가 끄떡없는지 측정하곤 했었습니다. (물론 Roadrunner와 같은 툴은 구경만했었군요. 쩝) 한마디로 , 뻗지않고 잘 버티는지 궁금했던것 같네요. 몇년전만해도 사이트 최적화라고 하면, Web Server와 WAS(Web application server) 자체의 성능과 DB 의 성능 , 또한 컴파일과정에서 발견하기 어려운 DB 와 Application Interface 를 맟.. 더보기 이전 1 ··· 6 7 8 9 10 다음
