IE에 WebKit을 렌더러로 적용한다는 생각을 재미있어하는 사람들이 있습니다. 아마도 다음과 같은 부분때문에 이런 생각을 하게 된 것 같습니다.
호주 시드니에서 열린 개발자 컨퍼런스 연설에서, Microsoft 사의 CEO인 스티브 발머는 자사의 브라우저에서 WebKit을 렌더링 엔진으로 사용하게되면 "재밌을 것"이라고 하고, "검토하고 있을지도 모르죠"라고 덧붙였습니다.
재미있지 않습니까? 이것은 지난주에 우리가 PDC에서 말한 것과는 맞지 않지만요. 한 세션에서 우리는 IE8과 Office가 같은 렌더러를 공유한다는 것을 보았었습니다. 그것이나 그것으로 인해 재미있는 웹 상의 쇼케이스 오피스에 아주 재미있는 UI가 가능해질 것을 생각해보면 재미있습니다.

Microsoft와 Apple이 같은 오픈소스 코드 기반으로 작업을 한다고? 생각해보세요! 전 별로 믿음이 안가네요.

from Adopting WebKit in IE?
Posted by 행복한고니 트랙백 0 : 댓글 1
사용자 삽입 이미지

우리는 간단한 CSS를 통해 크기를 바꾸고, 변형하고, 기울이고, 매트릭스 작업을 할 수 있는 WebKit의 CSS 변형에 대해 얘기한 바 있습니다.

새로운 -moz-transform 덕분에 Mozilla는 진보했고, Keith Schwarz씨는 Firefox에서의 CSS 변형 지원에 대한 글을 작성하셨습니다.
[code:css]
-moz-transform: translate(100px, 200px); /* Move right 100 pixels, down 200 pixels */
-moz-transform: translate(30px); /* Move down and right 30 pixels */
-moz-transform: translate(50%, 50%); /* Move down and right by 50% of the size of the element. */
이 기능은 지정된 오프셋만큼 단순히 엘리먼트를 이동시킵니다. 예를 들어 -moz-transform: translate(100px)가 설정된 텍스트 엘리먼트는 원래의 위치에서 100 픽셀 우측 하단에 나타납니다. 물론, 단순한 변형 이상의 기능들도 있습니다. 예를 들면, 엘리먼트를 지정한 각도의 숫자만큼 회전시키는 회전; 엘리먼트를 각 축의 임의의 선을 기준으로 축소, 확대시키는 스케일; X, Y 축을 따라 기울이는 기울임; 그리고 임의의 매트릭스 변형을 위한 매트릭스 기능 등이 있습니다. 또한 skewx(X축 기울임), skewy(Y축 기울임)과 같이 몇가지 경우에 대해 보다 단순한 문법을 사용할 수 있는 단순한 버전도 있습니다.

CSS변형을 위해 개발자들이 사용한 것이 무엇인지를 보는 것도 재밌을 것입니다. 기능의 대부분들은 플러그인에서 구현될 예정이었지만, 지금은 CSS와 JavaScript에 직접 통합되어 웹 개발자들이 현재의 페이지들을 보다 생생하게 만드는 것에 도움을 줄 것입니다. 우리는 또한 이제 두 개의 구현체가 있게 된 이 속성의 표준화가 빨리 이루어지기를 기대하고 있습니다.

from CSS Transforms: First WebKit, now Gecko too!
Posted by 행복한고니 트랙백 2 : 댓글 0
SquirrelFish가 정말 재밌는 듯 이에 대한 글이 자주 올라옵니다. 그것과 관련된 여러 논의가 있는 모양인데, 이런저런 분들이 많은 얘기를 하고 있는 것 같습니다.

Mozilla의 David Mandelin씨도 SquirrelFish를 보고 그의 관점 및 향상된 부분을 포스팅 하셨습니다.

David씨는 direct-threaded dispatch 와  register-based interpreter를 테스트하기 위해 microbenchmarks를 작성하셨습니다. Parrot과 Dalvik 진영도 이를 보고 있을 것이라고 생각합니다. bytecodes를 한번 보세요.

Chales Ying 씨는 어떻게 SquirrelFish가 Tamaring보다 빠른지를 살펴보셨고, Mason Chang씨는 SquirrelFish와 SpiderMonkey를 비교하셨습니다.

from SquirrelFish: Technical excitement on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 0
사용자 삽입 이미지
SquirrelFish는 예전에 포스팅한 적이 있는 새로운 WebKit의 JavaScript 엔진입니다. 그리고 이 녀석에 대한 공식 발표가 나왔습니다.

SquirrelFish에 대한 설명(아예 컴파일러와 엔진에 대한 약간은 low-level의 이야기입니다)을 하고 있으며, M. Anton Ertl 교수와 David Gregg 교수 등과 Lua 프로그래밍 언어의 개발자들이 연구한 효율적인 가상 머신 분야에 대한 최근 연구를 설계에 많이 반영했다고 합니다.

또한 왜 그렇게 빨라질 수 있었는지에 대한 상세 설명도 곁들여졌는데, 컴파일러에 관심있으신 분이라면 한번 읽어볼만할 것 같습니다.

끝으로 이것은 단지 시작을 뿐이라며 앞으로 더 빨라질 것이라고 하는군요.
사용자 삽입 이미지

from SquirrelFish: Details on the new on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 0
WebKit의 새로운 CSS 변환에는 회전, 크기 변경 등의 여러 기능이 있어 사람들이 여러 가능성을 생각할 수 있게 되었습니다. LifeRayPaul Bakaus씨는 실험적으로 이런 새 기능을 이용해 iTunes 같은 멋진 Coverflow 효과를 작성하셨습니다. 실시간으로 흐름 및 애니메이션도 지원하지만, canvas나 미리 렌더링된 그래픽은 사용하지 않았습니다.
이 편리하고 매력있는 css 기능은 커스텀 CSS 태그를  이용해 페이지의 어느 엘리먼트에서도 모든 종류의 2d 변환을 실행할 수 있도록 합니다. 이것은 DOM 엘리먼트를 회전하거나 변형할 수 있을 뿐 아니라, 여러분이 원하는 것을 위해 일반적인 매트릭스 함수를 사용할 수도 있다는 의미입니다.

CSS 변환은 nightly build 뿐 아니라 Safari 3.1과 iPhone에서도 가능합니다. 따라서, 현재의 사용자들을 목표로 삼는 것도 가능합니다.

사용자 삽입 이미지
Paul 씨는 실제 Coverflow 위젯을 작성하는데 jQueryUI를 사용했으며, jQueryUI의 슬라이더로 슬라이드 효과를 낼 수 있었습니다. 마우스를 클릭하거나 키보드의 좌/우 화살표를 이용해 탐색할 수 있습니다.

이 데모를 보시려면 CSS 변환이 지원되는 Safari 3.1 이나 Webkit이 필요합니다.

from Using CSS transforms to Build a Coverflow Effect on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 1

Safari 에서 뒤집기

2008.06.10 01:41 from [IT] Web Tech
사용자 삽입 이미지
Thomas Fuchs 씨가 RailsConf 에서 재밌는 것을 보여주셨습니다. 북마클릿을 이용한 새로운 WebKit 변환 예제입니다.
[code:js]
javascript:document.body.style['-webkit-transform']='rotate(180deg)';

javascript:document.body.style['-webkit-transform']='rotate('+prompt('degrees',180)+'deg)';

from Flipping out over Safari on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 0
WebKit에 SquirrelFish 라는 코드네임을 사용하는 새로운 JavaScript 엔진이 생겼습니다.

성능 벤치마크를 보면 여러 테스트에서 눈에 띄게 향상된 것을 보실 수 있습니다.

테스트 결과에 의하면 평균적으로 4배 정도의 개선이 이루어졌으며(Safari 3.1과 비교), 몇몇 접근 테스트에서 12.6x 배의 최고치를, 문자열 해제부분에서 1.63x의 최저치를 기록했습니다.

브라우저들의 성능이 개선되고 있다는 얘기가 속속 들려오니 관련업에 종사하는 사람으로 기분이 좋네요(이제 IE6는 버려주셨으면... T^T)

from SquirrelFish: WebKit has a new, fast, JavaScript engine on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 4

다음은 CSS 변수?

2008.04.28 00:16 from [IT] Web Tech

CSS 에서 색상 이름을 지정하거나 변수를 지정할 수 있게 되었습니다. Daniel Glazman 씨와 David Hyatt씨가 이러한 기능에 대한 제안서를 작성했습니다.

10년전, 1998년 5월 CSS Level 2 권고안이 나온 이래로, 웹 제작자 커뮤니티는 CSS에 변수를 정의할 방법을 요구해왔습니다. 변수를 이용하면 스타일시트 전역에 걸친 값을 정의할 수 있습니다. 이 값은 토큰으로 식별되고, 모든 CSS 선언에서 사용가능합니다. 값이 스타일시트에서 자주 사용된다면 - 일반적인 예제로는 color 나 background-color 속성이 있습니다 - 전체 스타일 시트를 업데이트 하기 위해 속성/값 쌍을 적용하는 모든 스타일 규칙을 수정하는 것보다 단지 하나의 변수를 정적 혹은 동적으로 수정하는 편이 훨씬 쉽습니다. 우리는 CSS 변수가 웹 제작자 커뮤니티와 브라우저 벤더들의 매우 긍정적인 의견을 받아들이기를 기대하고 있습니다.

Dave 씨가 작성자 목록에 있으니, WebKit 에서 다음 코드가 지원되기를 바래볼 수도 있을 것 같습니다!

[code:css]
@variables {
  CorporateLogoBGColor: #fe8d12;
}

div.logoContainer {
  background-color: var(CorporateLogoBGColor);
}

from CSS Variables are next? on Ajaxian
Posted by 행복한고니 트랙백 1 : 댓글 1

WebKit의 CSS 마스크

2008.04.28 00:09 from [IT] Web Tech
CSS Mask 샘플

CSS Mask 샘플


WebKit 에서 CSS 마스크를 지원한다고 합니다. 이 속성은 이미지는 몰론, <video> 엘리먼트에도 적용이 가능합니다.

WebKit 이 CSS에서의 알파 마스크를 지원하게 되었습니다. 마스크를 이용하면 최종 화면에서 어떤 부분을 제외하는 데 사용하는 패턴을 컨텐트 위에 겹칠 수 있습니다. 다시 말해, 어떤 이미지의 알파를 이용해 복잡한 모양으로 자를 수도 있습니다.

이런 속성들을 사용할 수 있습니다:

-webkit-mask (background)
-webkit-mask-attachment (background-attachment)
-webkit-mask-clip (background-clip)
-webkit-mask-origin (background-origin)
-webkit-mask-image (background-image)
-webkit-mask-repeat (background-repeat)
-webkit-mask-composite (background-composite)
-webkit-mask-box-image (border-image)

이 글 상단에 있는 이미지는 이렇게 만들 수 있습니다:
[code:Xml]
<img src=”kate.png” style=”-webkit-mask-box-image: url(mask.png) 75 stretch;”/>

좀 더 둥근 모서리를 사용할 수도 있습니다:
[code:Xml]
<img src=”kate.png”style=”-webkit-border-radius:10px; -webkit-mask-image:
-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1), to(rgba(0,0,0,0))”/>

이미지 입력을 SVG로 할 수도 있습니다:
[code:Xml]
<img src=”kate.png” style=”-webkit-mask-image: url(circle.svg)”/>

from WebKit keeps going with CSS Masks on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 0
from CSS Gradients in WebKit on Ajaxian

사용자 삽입 이미지
Dave Hyatt 씨가 WebKit 에서의 CSS Gradients 에 대해서 포스팅했습니다. 위 이미지가 CSS로만 만든 그래디언트 효과 입니다. 이 효과는 다음과 같은 코드를 이용해서 가능합니다.
-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)
가능한 영역은
  • 배경 이미지
  • 경계선 이미지
  • 목록 이미지
  • 본문
이라고 합니다.

몇 가지 예제가 더 있습니다:
Posted by 행복한고니 트랙백 0 : 댓글 0
from iPhone WebKit Goodness: 3D CSS Transforms and ontouch events on Ajaxian

사용자 삽입 이미지

그림:
1992년...
Visual Basic 개발자 : 메모리 관리요? 그런 것도 해요? 불쌍한 Visual C++ 개발자들...
COM 개발자 : 질 낮은 스크립팅? 고수준? 불쌍한 Visual Basic 개발자들...

2008년...
iPhone 웹킷 개발자 : 메모리 관리요? [대괄호 [쓰고 [여기저기 ]]]? 불쌍한 Cocoa 개발자들...
Objective C 개발자 : 질 낮은 스크립팅? 고수준? 불쌍한 JavaScript 개발자들...

글쓴이는 애플의 다른 제품에는 관심이 없지만(차세대 맥북 프로나 3G iPhone이 나오거나 말거나 하는 식이죠), "iPhone 에서 뭘 개발할 수 있지?" 에 대해서는 관심이 많다고 합니다.

JavaScript 로만 할 수 있는 것을 찾고 있는데, 지난번에 발표된 iPhone SDK는 Cocoa 개발자들만 좋을 것 같다고 합니다. WebKit 사용자들을 위한 onguesture* 이벤트 같은 것도 있기는 했고요.

이제 iPhone Ajax 개발자들을 위한 몇가지 사항이 더 추가되었습니다.

일단 첫번째는 Safari입니다. 3.1 버전이 발표되고 나서 CSS 2D 변환이 가능했었는데, iPhone에서는 진정한 앨범 넘기기 효과를 만드는 게 가능한 3D 변환도 지원된다고 합니다.

그 다음은 onguesture* 이벤트에 이은 ontouch* 이벤트와 새로운 DOM 인터페이스인 Touch, TouchList, TouchEvent 등입니다.

이 같은 지원을 무척 반기면서도 걱정 반, 기대 반인 모양입니다.  웹 진영은 안 그래도 어려우니까 잡스옹께서 잘 봐달라고 하네요.
Posted by 행복한고니 트랙백 0 : 댓글 0