웹에 접속하는 장비의 다양한 화면 크기와 점점 높아지는 pixel density에 맞춰서 상황에 따라 적당한 이미지를 전달해 주는 일은 어렵지만 당장 해결해야 할 시급한 문제였다.
이 문제를 적절히 대처하고자 여러 개발자들이 responsive images의 문제에 대응하는 많은 방법을 제시하고 있지만, 각각의 장단점을 고려하기 이전에 어차피 과도기적인 꼼수에 지나지 않는다는 문제를 공통으로 안고 있다.
그래서 이 문제를 해결할 장기적인 표준안을 도출해 내려고 Responsive Images Community Group에 모여서 지금까지 제시된 다양한 방법에 대한 서로의 의견을 교환하고 가장 이상적인 방법을 도출하고자 머리를 맞대고 있는 사이, 이 문제를 해결해 줄 또 하나의 방법으로 며칠 전 Apple에서 WHATWG list에 제시했던 img의 srcset attributes이, 외부에서 보면 갑작스러울 수도 있게, WHATWG 표준 draft에 바로 추가되는 일이 발생하였다. 그래서 그동안 머리를 맞대고 고민했던 많은 개발자들을 발끈하게 만들었고, 다수의 지지를 받으며 새로 도출해낸 <picture> element가 그냥 무시되었다는 점에서도 큰 허탈감을 표시하고 있다.
이런 사태는 개발자와 WHATWG 간의 원만한 소통 창구의 혼돈에서 비롯되었다는 얘기가 나오는데, 지금까지의 진행 상황은 Jeremy Keith씨가 올린 글에 자세히 나와 있다.
과연 이제 막 HTML draft에 추가된 srcset attribute이 앞으로도 그 자리를 지킬 수 있을지 모르는 일이고 또 몇 번의 수정안으로 대체되겠지만, 그 사용법을 보면 다음과 같다.
<h1><img alt="The Breakfast Combo"
src="banner.jpeg"
srcset="banner-HD.jpeg 2x, banner-phone.jpeg 100w, banner-phone-HD.jpeg 100w 2x"></h1>
글 마저 읽기 »
IE6,7,8에게 새 HTML5 elements를 인식시켜주는 html5shiv를 문서에 추가하는 방법으로 보통 head에서 다음과 같이 불러온다.
문젠 그냥 이렇게 html5shiv를 googlecode에서 불러오면 성능상 별로 안 좋다는 얘기.
이렇게 추가된 script는 HTTP compression 되지도 않았거니와 CDN을 사용하면 당연히 얻겠거니 하는 cache 적용도 되어있지 않다. (현재 겨우 180초뿐이다.)
더군다나, 현재 공식 배포 채널로 사용되긴 하지만, 버그도 잡고 성능이 향상된 최신 버전으로의 적용도 더뎌서 github에서 활발히 개발되고 있는 html5shiv의 최신 버전(현재 Tag 3.5)을 내려받아 compress(minified)한 후 직접 호스팅하는 편이 여러모로 더 이롭다는 얘기.
참고로, Modernizr를 쓴다면 이미 core에 포함되어 있기 때문에 따로 추가할 필요는 없으며, 최신 버전도 곧 적용될 예정이란다. 끝으로 "절대 다른 사람의 source code repository에 있는 리소스에 직접 링크를 걸지는 마라"는 경고로 말을 맺고 있음.
과거 Ajax를 필두로 웹 기술이 진화하면서 많은 웹 애플리케이션이 개발돼서 공개되고 있는데, 이런 곳엔 소위 'Loading spinner (Activity indicator)'를 쓸 일도 많아졌다. 이는 요청한 작업이 정상적으로 처리 중임을 알려주는 것으로 사용자 경험 측면에서 아주 중요한 요소 중의 하나이다.
이런 효과를 나타내려고 과거엔 animated gif 이미지를 주로 썼지만, 브라우저의 CSS3 Animation과 Transforms 지원 상황이 호전되면서 지금은 더 효과적인 대체수단으로서 선택적으로 CSS가 사용되고 있다. 이런 추세에 맞춰 CSS spinners를 만들어주는 도구도 생겨났는데 대표적으로 CSS load.net이 있다.
CSS에서 제공하고 있는 다양한 효과와 함께 개발자의 상상력만 더하면 아주 멋진 효과를 구현할 수가 있는데, 아래는 CSS3 Animation, Transforms와 함께 중첩된 text-shadow 효과를 써서 구현해 본 예 (animated GIF 이미지).
현재 최신 버전의 Firefox, Chrome 그리고 Safari만이 CSS3 Animation과 Transforms 모두를 지원하기 때문에, 그 외 브라우저에선 아직 대체 이미지의 사용이 불가피하다. (차기 버전인 IE 10과 Opera 12에선 모두 지원 예정.)
CSS3 Loading Spinner 데모 페이지
얼마 전 무료로 공개된 Tuts+ Premium 코스인 30 Days to Learn jQuery 영상에서 따온 요령으로, Python의 내장된 간단한 웹 서버를 현 작업 디렉터리에서 실행시키는 명령인데 다음과 같이 쓰일 수 있다.
터미얼을 열고,
cd /some/test/directory
open http://localhost:8000 && python -m SimpleHTTPServer
편한 것이 굳이 일반 웹 서버를 실행시킬 필요 없이, 예를 들어 ajax call 실험용으로 간단한 테스트만 할 때 손쉽게 사용할 수 있다. 글 마저 읽기 »
오래전부터 기다리던 TextMate 2의 Alpha 판 배포 소식을 들은 지도 벌써 수개월이 흘렀지만, 한국어 표시 관련 불만을 빼곤 정식 버전을 사용하는데 큰 불만은 없었기에 계속 개발 상황만 지켜보고 있었다.
한편, TextMate 2의 개발이 오랫동안 지체되는 것에 불만을 품고 다른 텍스트 에디터로 갈아타려는 시도도 빈번히 목격하는데, 최근 대표적으로 다중 플랫폼을 지원하고 개발도 활발히 진행되면서 많은 사용자를 확보하게 된 Sublime Text가 눈에 띄는 상황.
기존 TextMate 용으로 배포된 번들과 테마들을 그대로 사용할 수 있으면서도 독특하고 강력한 기능들을 갖추어서 TextMate의 자리를 꿰찰만한 에디터로 불리고 있다. 어쨌든 좋은 텍스트 에디터가 계속 생겨나는 것은 개발자에겐 반가운 현상이다.
개인적으론 익숙한 현 텍스트 에디터를 버리고 새로운 적응이 필요한 다른 에디터로 갈아탈 만큼의 필요성도 아직 느끼고 있지 않기에, 우선은 TextMate 2 alpha 버전을 사용하면서 새로 추가된 기능을 천천히 익혀 볼 생각이다. 글 마저 읽기 »