믿을 수 없지만, 실은 A와 B 둘 다 똑같은 색(#787878)이다.

위 그림은 사람이 색을 인지할 때 일으키는 이런 착시 현상의 원리를 자세히 소개한 다음 글에서 가져왔다: Color Wheels are wrong? How color vision actually works
망막이 색을 해독하는 오묘한 원리를 생리학적으로 잘 설명해 놓았다.

보통 세 가지 기본 색으로 빨강, 노랑, 파랑(subtractive colors) 혹은 빨강, 초록, 파랑(additive colors)을 떠올리는데, 이 Color Wheel을 생리학적 측면에서 다시 아주 간단하게 그려보면 다음과 같이 그릴 수 있다.

세 가지 기본 색이 아닌 네 가지의 기본 색으로 이루어진 것이다.

→ 눈 어지럽게 만드는 여러 착시 현상의 예 😯
복잡 미묘한 색 이론은 제쳐놓고라도, 눈에 보이는 것이 다가 아님을 다시 한번 일깨워주는 글이다.

보통 Safari(WebKit)에서 “View Source”로 열린 창은 syntax highlighting을 지원하지 않고 line numbers도 표시되지 않는다. 물론 Web Inspector가 보여주는 소스를 훑어볼 수도 있지만, 중첩된 DOM tree를 일일이 열어서 확인하는 것도 가끔은 귀찮은 일.

이런 “View Source” 기능의 단점을 만회하려고 BetterSource Safari extension도 설치해 놨지만, 가끔 열린 페이지의 소스를 복사해놓고 수정 작업까지 하려면 글자 편집기에 바로 보여주는 기능도 요긴할 것이다. 여기에 안성맞춤으로 Safari에서 웹 페이지의 소스를 TextMate에 보여주는 요령을 발견. Safari 혹은 WebKit에서 보이는 웹 페이지의 소스를 TextMate에서 열기(이)란 제목의 글 마저 읽기 →

새로 문을 연 TextMate 팁 소개 사이트에 소개된 요령으로, 터미널에서 다음과 같은 명령으로 시작 언어(Syntax)를 원하는 것으로 바꿀 수 있다.

defaults write com.macromates.textmate OakDefaultLanguage [UUID]

UUID 부분은 번들마다 고유의 것을 가지고 있는데, 해당 번들을 “패키지 내용 보기”로 열고 Syntaxes 폴더 안에 있는 plist 파일을 열면 UUID 값을 알아낼 수 있다.

개인적으로 HTML5 번들의 것을 기본으로 지정해 두었는데, 해당 명령은 다음과 같다.

defaults write com.macromates.textmate OakDefaultLanguage 6F87DAE1-56E0-4193-A940-8D68BC76874C

Change Textmate startup syntax 요령 설명 동영상

과거 WebKit 브라우저에서의 CSS3 Gradients 용법은 Mozilla에서 사용되던 것과 달리 독자적인 문법이 사용되었는데, 이것이 CSS Image Values and Replaced Content Module Level 3에 제시된 용법을 지원하기 시작하면서 통일화되었다는 소식.

당장은 먼저 WebKit nightly build부터 적용되고 나중에 Safari의 정식 버전에서도 이 용법을 지원하게 된다. 물론 과거 사용되던 용법도 얼마간 계속 지원될 예정이다.

div {
  background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, red), color-stop(51%, green), color-stop(100%, blue)); /* Safari */
  background-image: -webkit-linear-gradient(left, red, green, blue); /* WebKit nightly */
  background-image: -moz-linear-gradient(left, red, green, blue); /* Modzilla Firefox */
}

물론, 아직 Opera와 IE9의 지원 상황은 불투명해서 이들만을 위한 대체 용법도 신경 써야 하지만 그동안 혼용되어 사용되던 용법의 통일은 환영할 일. 현재 제안된 표준안은 아직 draft 상태로 앞으로 그 용법이 또 바뀔 가능성은 남아 있다.

여기에 빌려와서 구현해 본 것은 우연히 디자인도 산뜻하기로 유명한 Panic Blog를 둘러보다 개인적으로 그 사실적 구현에 감탄을 자아내게 했던 효과이다.
요샌 그 쓰임새가 널리 퍼지면서 이미지에 CSS 3D Transforms Module을 적용한 톡톡 튀는 다양한 효과를 종종 목격하게 되는데, 유달리 더 큰 감탄을 자아냈던 이유는 세심한 사실적 표현이 돋보였기 때문이다. 그림에 마우스를 갖다 대면 뒤에 있는 그림자마저 실제 투시 각도에 따른 적절한 변화를 표현하고 있으니 말이다.

맘에 드는 놈 앞에선 무조건 “View Source” 주문을 외치는 버릇이 동하여 소스를 훑어봤다.
마우스를 갖다 대면 그림이 팔랑거리는 효과 주기(이)란 제목의 글 마저 읽기 →