Good design is invisible.

Good web design is about the
character of the content,
not the character of the designer.

Jeffrey Zeldman: Understanding Web Design

사용자에 대한 배려와 상호교류를 통해 공감을 얻어내는 것, 이것이 좋은 디자인의 핵심이다라는 말.
절대공감.

아래 코드를 이해하려면 JavaScript 만의 특성이 가미된 scope과 closures 이해하고 있어야 한다.

function add (x) {
  return function (y) {
    return x + y;
  };
}
var add5 = add(5);
var no8 = add5(3);
alert(no8); // Returns 8 

JavaScript를 좀 더 깊게 이해하고 좋은 코드를 짜기 위해서는 꼭 알고 있어야 할 부분이지만, 처음 접하는 사람들에겐 난해하기 마련인데, 마침 Robert씨가 알기 쉽게 풀어서 설명해 놓은 글을 올려놓았다.

더불어서, 위 소개 글에서도 잘 설명되어 있는 JavaScript Module Pattern을 약간 변형시킨 것으로, 스크립트 사용 용법이 좀 더 일관되고 패턴 속의 어떤 함수와 변수가 공개적으로 접근 가능한지를 훨씬 명확하게 보여주는 Revealing Module Pattern도 참고할 만하다. 이 패턴은 원한다면 실제 private 함수를 좀 더 명확한 이름을 지정해 놓고 공개해서 되돌려줄 수도 있는 장점이 있다.

Mac OS X Hints에 소개된 요령으로 YouTube 영상의 URL 주소 뒤에 &fmt=18 변수를 추가하면 훨씬 좋은 화질의 영상을 감상할 수 있다는 내용이 올라와 있다.

그렇다고 영상을 볼 때마다 일일이 주소를 수정해 주기란 번거로운 일이기 때문에, 이런 작업을 자동화시켜 주는 AppleScript 혹은 JavaScript bookmarklet을 소개하고 있는데, 이 또한 영상을 볼 때마다 일일이 선택해주어야 해서, 번거롭기는 마찬가지.

Safari에서의 경우, 이런 일은 PithHelmet을 써서 자동적으로 처리해주는 것이 제격일 것이다. PithHelmet 메뉴에 있는 “Show Rule Editor”를 선택하고 “New” 단추를 눌러서 새로운 Rule을 생성한다. 새로 생긴 목록의 이름을 적당히 “View higher quality YouTube videos”라고 정한 후, Matching Pattern 항목에 다음과 같이 입력해준다.

^(http:\/\/www\.youtube\.com\/watch\?v=.*)$

그리고 밑에 있는 선택 메뉴에서 “Regex URL Match”를 선택한 후, Filter 항목의 “Matching URL request action” 메뉴에서 “Transmogrify”를 선택해준다. 이렇게 하면, Transmogrification Replacement:라는 항목이 보여지는데, 여기에다 $1&fmt=18을 입력한 후, 마지막에 “Enable Site Preferences”를 선택해서 맨 아래에 있는 “Apply” 단추를 눌러주면 적용 끝.

이렇게 해서, YouTube 영상을 살펴보면 특정 영상의 경우 확연히 눈에 띄는 더 좋은 화질의 영상을 감상할 수가 있었다.
원래 YouTube에 계정이 있는 사람은 계정 정보에 있는 “Video Playback Quality”에서 더 좋은 화질의 영상을 선택해서 감상할 수 있도록 되어 있으나, 실제 영상을 감상할 때는 이 설정만으론 별 차이를 느낄 수 없었기 때문에, 아무래도 서버 통신 전송량의 증가 등 여러 가지 이유로 이 변수값의 처리는 별로 공개되지 않았던 기능인듯.

덧붙여서, 아직 PithHelmet은 Safari 3.1 버전용으로 정식 배포되지 않고 있는데, 당분간 ~/Library/Application Support/SIMBL/Plugins/PithHelmet.bundle 파일을 “패키지 내용 보기”로 열어서 안에 있는 Info.plist 파일을 글자 편집기에서 열고, MaxBundleVersion key 밑에 있는 <string> 사이의 숫자를 5525로 고쳐서 저장하면 큰 무리없이 계속 사용할 수가 있다.

using a minifed version of the code is much faster than the packed one – even though its file size is quite larger.

JavaScript Library Loading Speed

The iPhone cache experiment suggests an additional performance rule specific for developing web sites for the iPhone: Reduce the size of each component to 25 Kbytes or less for optimal caching behavior.

Performance Research, Part 5: iPhone Cacheability – Making it Stick

잘게 자르는 것도 요령이 필요하군.

widget.onsync 이벤트가 도대체 무엇인지 알아보려다 우연하게 찾게된 글로, WWDC 07 중에 열렸던 Dashcode Widget Creation 세션과 Website development for the iPhone 세션에 관한 상세한 참석자의 노트 기록을 엿볼 수가 있다.

Dashcode Widget Creation Session

• Widget 디자인에서 중요한 것은 일반 웹 페이지에 적용되는 링크 위주가 아닌 콘트롤 위주가 되어야 한다.
• Leopard Widgets에서는 dotMac과의 동기화 기능을 제공하는데, 이것을 위해 widget.onsync 이벤트가 추가되었다.
• Safari Webkit에 새로 추가된 CSS 속성: -webkit-border-radius, -webkit-box-shadow
• Leopard Widgets은 이제 하나의 프로세스로 동작한다.
• 아직은 Dashcode가 iPhone 어플리케이션 개발용으로 사용될 수는 없다.

Website development for the iPhone

• iPhone Safari에서는 Page view가 tabs의 기능을 한다.
• Safari 책갈피는 데스크탑에 설치된 Safari의 것과 동기화 될 수 있음.
• WML은 지원되지 않지만, XHTML Mobile 문서는 사용 가능.
• No Flash, no Java.
• media type의 경우 iPhone을 위해 print 흑은 handheld 유형을 적용하지는 말것.
• viewport 속성을 지정할 것. (모두 6개- width, height, initialscale, user – scalable…): <meta name="viewport" content="width=320" />
• 더블 탭(double tap) 후 글자가 잘 보일 수 있도록 -webkit-text-size-adjust 속성을 사용: -webkit-text-size-adjust:none|auto|percentage
• framesets 대신에 iframes 사용.
• drag and drop과 부분 영역의 선택 불가.
• form controls의 스타일 적용할 수 있게 됨 .
• 파일 업로드 불가.
• 전화 링크 tel:#-###-###-####, Google 지도 링크.
• QuickTime Pro에 추가된 iPhone을 위한 새로운 export 형식: Movie to iPhone – 1 Mbit (wi-fi 용), Movie to iPhone (Cellular Edge 용)
• 미디어 파일을 전송하는 서버는 byte-range 요청을 지원해야 함 (HTTP 1.1).
• 음성/영상의 재생을 위해 JavaScript를 쓰지 말것.
• Canvas 사용 가능.
• 각 리소스(HTML, CSS, 그림, JS…)는 10 MB의 크기 제한이 있음.

Atomic Typewriter – Article Viewer

그리고, 그 동안 알려진 iPhone이 Flash를 지원하지 않는 이유는 높은 CPU 점유율로 인해 급속하게 배터리가 소모되는 문제가 있기 때문이라는 소식이다. 결국 iPhone에서 실행될 YouTub 동영상은 모조리 h.264 형식으로 인코딩 될 예정이라니, 과연 Apple과 Google이 손을 맞잡고 iPhone의 성공에 쏟아붓는 노력의 크기를 짐작하게 함.

이제 iPhone의 초기 화면을 채워줄 12개의 버튼이 공개되었으니, 나머지 버튼 4개의 정체는 9일 후에나 밝혀지려나? 🙄