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

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

끈적이 노트(sticky notes)라 함은, 주로 웹에서 알림 글이나 주의를 요하는 글의 내용을 담아두는 배경으로 많이 사용되는데 (개인적론 웹사이트 대문에 twitter feed 표시용으로 사용하고 있다), 요넘을 사용할 경우엔 몇 가지 주의사항이 있다.

우선, 이 배경 그림을 쓸 때는 글 내용에 맞는 크기의 이미지를 미리 마련해 두어야 한다는 것이다. 나중에 글 내용이 길어지거나 줄어들기라도 하는 날엔 그 크기에 맞게 이미지 편집기에서 불러와 조물락 다듬어 주어야 할 경우도 생긴다. 그리고, 여기에 끈적이의 구석이 약간 말려 올라간 그림자 효과까지 줄라 치면, 투명 영역이 들어간 png 파일을 사용해야 하는데, 요넘을 그대로 사용하면 IE6에서 보기 흉한 흔적을 남겨서 이를 위한 불필요한 꼼수를 부려야 하는 골칫거리도 있다.

이런 상황에서 훌륭한 대안으로 사용될 수 있는 것이 바로 우리의 수퍼스타 CSS3이다.
CSS3를 쓰면서 얻을 수 있는 이점은 위에서 말한 부작용도 없거니와, CSS 선언 단 몇 줄로 이미지 사용을 배제하면서 더 빠르고 접근성 높은 사이트를 만들 수 있고, 물론 오래된 브라우저들에서도 “degrades well” 한 결과를 보여준다. 그림을 쓰지 않고 멋진 sticky notes 만들기(이)란 제목의 글 마저 읽기 →

iPhone 4의 Retina display는 잘 알려진 바와같이 326dpi의 높은 해상도를 지니고 있다.
물론, 이것은 장점 중에 하나로 일려져 있지만, 이 고해상도 화면을 가지고 일반 웹 사이트에 표시되는 그림들을 보면 결국 2배로 확대된 픽셀 형태로 보여지는 결과를 낳게 된다.

그래서, 앞으로 점점 늘어날 이런 고해상도 display를 염두해 둔 이미지를 준비해놓지 않는다면 정교한 화면의 장점을 충분히 활용하지 못할 것이라는 얘기다.

이런 고해상도 display에 대한 준비 요령은 이미 제시되어 있는데, 해결책은 결국 CSS3(background-size, ::marker pseudo-element, boarder-image)와 SVG에서 찾을 수 있다는 소리.

자, 이렇게 해서 준비된 고해상도 이미지를 진정 고해상도 display를 가진 iPhone 4에만 보여주고 싶다면 아래의 CSS3 media query 안에서 적용해 주면 된다.

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  /* iPhone 4-specific styles go here */
}

지금 당장이야 그 필요성이 적겠지만, 앞으로 이런 고성능/고해상도 휴대 장비의 사용이 늘어나면 또 하나 progressive enhancement의 좋은 본보기가 되지 않을까? 이미 시작되었는지도.

각 브라우저별 CSS3 properties의 사용 용법이 서로 다르고, 그래서 모두한테 적용하기가 번거롭다는 점 때문에 CSS3 사용을 주저할 이유가 없어졌다. CSS3 Please TextMate bundle만 설치해놓고, tab trigger만 당기면 너무나 간단할 일이 되어버렸기 때문이다.

snippets은 CSS3, Please! The Cross-Browser CSS3 Rule Generator에서 따온 것으로, 현재 다음과 같은 CSS3 snippets을 제공한다:

• border-radius (borderrad)
• box-shadow (boxshadow)
• rgba (rgba)
• background-gradient (bggradient)
• transition (transition)
• rotate (rotate)
• font-face (fontface)

앞으로, background-gradient에 방향 옵션(linear/radial)을 지정할 수 있는 기능도 추가될 예정.

CSS3 Please!

아무래도, 이렇게 놓고 보면 WebKit 엔진을 사용하고 있는 브라우저들(Safari, Google Chrome)에서 보는 것이 제일 예쁘고 CSS3 지원도 가장 앞서 있음을 알 수 있다. 다른 브라우저들의 지원 상황에도 가속도가 붙길 바라며, CSS3 많이 사용해 주세요!

WebKit에서 먼저 CSS Gradients가 소개된 이후 CSS 3의 Gradients 표준 용법은 아직 Draft 상태이나, 현재 Safari 4, Firefox 3.6, Google Chrome에 바로 적용해서 사용할 수 있다.

따로 이미지를 쓸 필요가 없는 이점에도 불구하고 통일되지 못한 사용법과 IE 미지원으로 아직은 많이 사용되지 않고 있는데, 그나마 CSS3 Gradient Generator가 있어서 적용에는 큰 어려움이 없다.

아래는 이 곳에 적용한 예.

#page {
  background-color: #160B37;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#271362), to(#160B37));
  background-image: -webkit-linear-gradient(top, #271362, #160B37);
  background-image: -moz-linear-gradient(top, #271362, #160B37);
  background-image: -o-linear-gradient(top, #271362, #160B37);
  background-image: -ms-linear-gradient(top, #271362, #160B37);
}

미적용 브라우저들엔 전처럼 그냥 이미지로 대체해주면 될 것이다.

요즘 CSS 작성할 때 점차 그 사용이 늘어나는 vendor specific extensions로 논쟁이 많은데, 어차피 표준 제정이 마무리 되지 않는 한 불편은 계속되겠지만 시도한 만큼의 결과물 만족감은 더 크다.