웹페이지에서 생각할 수 있는 일반적인 팝업 메뉴라면, 핫스팟을 클릭하면 팝업메뉴가 나타나고 핫스팟을 다시 클릭하거나 팝업메뉴가 포커스를 잃는 경우 팝업메뉴가 사라지는 것이다. 이번 일에는 팝업이 뜨고 난 후 커서가 핫스팟이나 팝업메뉴 영역을 벗어나면 팝업메뉴가 사라지는 약간은 특이한 팝업메뉴가 필요했다.

인터넷에서 구할 수 있는 비슷한 용도의 코드들 몇 개를 받아 적용을 시도했지만 요구사항에 딱 맞지 않아 수정하는데 오히려 시간이 더 들것 같고 어떤 것들은 코드를 읽기 어렵게 (obfuscated) 만들어 놔서 그냥 만들기로 했다.

팝업메뉴의 요구사항을 정리해 보면 다음과 같다.

• 핫스팟을 클릭하면 팝업메뉴가 핫스팟 엘리먼트 아래에 나타난다.
• 팝업메뉴가 표시중인 경우 핫스팟을 클릭하면 팝업메뉴가 사라진다.
• 팝업메뉴가 표시중인 경우 커서가 팝업메뉴와 핫스팟 영역을 벗어나면 팝업메뉴가 사라진다.
• 팝업메뉴가 표시되거나 사라질 때 페이드 효과를 적용한다.
• 접근성을 해쳐서는 안된다
• 재사용성이 좋도록 구현한다.

prototype과 script.aculo.us 를 사용해 구현해봤다. 코드와 실행 예는 다음 링크를 통해 확인할 수 있다.

코드와 실행 예

Nifty Corners: rounded corners without images

이미지를 사용하지 않고 자바스크리트와 CSS만으로 모서리가 둥근  박스를 만든다.

이미지를 사용하지 않는 다는데 의미가 있긴 한데, 이렇게까지 해서 이미지를 안 써야 하나라는 느낌이다.
단점은 모서리 라운드 부분에 anti-aliasing을 적용할 수 없다는 점.

웹표준 적용과 제작 비용

이 문제가 분명해지지 않고서야 웹표준 얘기는 논란만 일으킬게 뻔하다.

Web 2.0 Color Palette

색 이름이 더 재미있다.

Ruby on Rails Red [#B02B2C]
Newsvine Green [#006E2E]
Techcrunch green [#008C00]
Digg Blue [#356AA0]
…

ㅋㅋ

얼마전 리뉴얼한 사이트의 접속통계를 리뉴얼 전과 비교하다가 든 생각.

리뉴얼 전 사이트에 접속한 사용자의 브라우져는

1. IE - 94.16%
2. 파이어폭스 - 3.03%
3. 사파리 - 0.29%

이랬는데 다른 부라우져도 지원하도록 리뉴얼한 후

1. IE - 85.09%
2. 파이어폭스 - 9.6%
3. 사파리 - 0.94%

이렇게 되었다.

“우리 사이트 접속자는 거의(100% 가까운) IE 사용자니까 다른 부라우져 지원하느라 시간 낭비하지 말자.” 라는 얘기를 몇번은 듣거나 직접 해봤을 것이다. 하지만 이건 크게 잘못 생각하는 것일 수 있다. “우리 사이트가 IE만을 지원했기 때문에 사용자들이 IE로만 들어왔거나 FF나 사파리만 사용하는 사용자는 안들어왔다”가 맞는 말일거다. 전자결제가 필요한 사이트에 파이어폭스로 접속하는 사람이 있겠는가?
위 수치를 보면 대충 15% 가량은 IE 사용자가 아니다. 15%정도 되면 무시할 만한 수가 아니다. IE 전용 사이트를 만드는 사람들이(특히 금융권) 이 사실을 주목야 할 것이다. 앞으로는 더 할 테니…