본문 바로가기

IT/Web 2.0 / Semantic Web

XHTML+CSS로 Drop shadow 표현하기

내가 알기로 이건 굉장히 오래된 고전 떡밥(?)이다. 내가 MS Office 2007에서 가장 반겼던 기능이 바로 파워포인트에서 글자에 그림자 효과를 주면 포토샵에서 한 것과 같이 부드러운 drop shadow 효과가 나타난다는 점이었고, 웹페이지를 만드는 수많은 웹디자이너와 개발자들 또한 웹에서 이것이 쉽게 된다면 얼마나 좋을까 많은 고민을 해봤을 것이다.

결론부터 말하자면 아직까지 완벽한 방법은 없다. CSS 2.1에 text-shadow라는 속성이 있어서 Safari와 Omniweb과 같은 일부 브라우저에서 지원을 하고 있기는 하지만 웹브라우저 벤더 측에서 보면 구현 자체가 난감한 면이 좀 있어서 그런지 사실상 유명무실한 속성이다. 그리고 이건 text에만 적용되는 것인지라 일반적인 block element 등에 적용할 수 없다는 단점이 있다.

사용자 삽입 이미지

리소스 업로드 화면에 적용된 drop shadow (in Firefox 2.0)

요즘 textcube.org 디자인 개선 작업을 하면서 몇몇 사람들로부터 리소스(스킨/플러그인) 업로드 화면이 너무 복잡하게 느껴진다는 보고를 받고 너저분하게 널린 도움말 주석들을 툴팁 형태로 싹 묶어버리기로 했다. 내가 Mootools를 쓰고 있었기 때문에 툴팁을 만드는 일 자체는 javascript 1줄이면 되었지만 그냥 밍숭맹숭한 박스 모양으로 만들자니 아무래도 아쉬워서-_- fade 효과도 좀 넣고 무엇보다 툴팁의 특성상 웹페이지 내용으로부터 튀어나온 모양을 주는 것이 좋을 것 같아 drop shadow를 넣기로 했다.

애초부터 IE는 포기하고 있었고(나중에 IE 전용 스타일시트에 DXImage 어쩌구 하는 필터를 걸어볼까 생각 중이기는 하다), Firefox/Safari/Opera 정도에서 테스트할 요량이었기 때문에 반투명 png를 쓴 솔루션들을 찾아보았다. 그러나 대부분은 일정한 색상의 background에만 적용할 수 있는, 불투명한 배경의 그림자 이미지를 사용하는 방법이었고, 내가 따로 반투명 png로 적용해본 결과 그림자들이 서로 겹쳐서 실패했다. 그러던 중 나를 구원(?)해준 것이 있었으니 바로 yDSF - Robust CSS Drop Shadows이다. (주소를 보고 역시 'sixapart'군..이라는 생각이..-_-)

내가 원했던 requirement를 완벽하게 갖춘 솔루션이었다. 가로/세로 크기의 자유로운 크기 조절, 반투명 png를 이용할 것, CSS hack이나 javascript를 사용하지 않고 구조적 마크업으로 표현 가능할 것. 해답은 :before, :after에 있었다. (물론 IE는 지원하지 않는다. orz) 게다가 아주 약간의 코딩 만으로 IE에 대한 fallback도 부드럽게 처리되었다.

사용자 삽입 이미지

Opera에서의 모습.

한가지 낭패스러운 점이었다면 Opera에서는 opacity가 recursively inherit되는 바람에 그림자가 툴팁의 배경으로 다 비쳐보인다는 것. 그래도 이만하면 봐줄 만 하다. -_-;

윈도우용 Safari의 경우 마우스를 왔다갔다 하면서 툴팁이 생겼다 없어졌다를 반복하게 하다보면 잔상이 남기도 하고 심한 경우는 뻑나서 죽는 경우도 있었는데, 다행히 Mac을 사용하는 다른 사람에게 부탁해서 테스트해보니 원래 Safari에서는 아무 이상 없다고 한다. (더불어 iPod touch의 Safari에서는 물음표 세번 왔다갔다하고 뻑났다고...-_-a)

아무튼 이렇게 해서 또 하나의 삽질이 끝났다.;; (뭔가 결론이 썰렁...ㅠㅠ)