What is cool button | 좋은 button은 어떤 것인가.
Home > Document > Web design > Menu > Button > Designing cool button

Button 제작시 고려해 봄 직한 것들.

웹 사이트의 대문 페이지를 구성하는 요소 중에서 가장 큰 비중을 차지하는 요소가 button 이라고 해도 과언이 아닐 겁니다. 이러한 button의 종류는 너무 많아서 일일이 예를 들기 힘들 정도져. 단순히 Hypertext로 된 button, button element등으로 단추 모양을 갖춘 button, image를 사용한 button, 거기에 flash로 만든 button까지 정말 다양합니다. 그렇다면 좋은 button이 되는 조건은 어떤 것 일까요? 삐까 번쩍한 image를 사용한 button은 좋은 button이고, 단순한 text로 된 button은 꼬진 button일까요? 만약 저한테 좋은 button이 갖추어야 될 절대 조건이 뭐냐고 묻는다면... 그건 저도 모른다고 대답 할 수 밖에 없습니다. 사물의 가치라는게 워낙 주관적이어서 누구한테는 좋아도 다른 누구한테는 별로일 수 있으니까요. 예를 들어 web surfing을 하는 사람들이 text button과 image button 중에 어떤 것을 더 좋아하는지에 대해 생각해 보면 제 짐작으로는 아무래도 image button을 더 좋아할 것이라 추측하지만 그건 어디까지나 제 추측일 뿐 조사해 보지 않은 이상 알 도리가 없는 것 이구요.

하지만 좋은 button의 절대 조건이 아닌 일반적인 조건이 뭐냐고 묻는다면 그에 대해서는 몇 가지 제 생각을 말씀 드릴 수 있겠습니다. 그러면 좋은 button의 일반적인 조건에 대해 말하기 전에 바람직하지 못한 button에 대한 제 생각을 먼저 말해 보겠습니다. 그리고 좋지 않은 button에 대한 아래의 내용에는 다분히 제 주관적인 생각이 포함되어 있음을 밝혀 두겠습니다.

  • Cloaking button
    StarCraft에 나오는 Terran의 Ghost나 Protoss의 Dark templar 처럼 stealth 기능이 개발된 button이 되겠습니다. 즉, button인지 아닌지 click해 보기 전에는 도저히 알 수 없는 그런 button 말이죠. 그게 의도적인지 아닌지는 모르지만, 도대체 이기 멈미까? 숨길려면 아예 만들지를 말든지... scan을 뿌릴 수도 없고, 그렇다고 overlord를 부를 수도 없고... 여기 저기 click 하면서 spider mine으로 잡을 수 밖에요... 대략 추측해서 click해 보지만 click하고 나서도 제대로 된 건지 어떤건지 알 수 없는 button이 여기에 해당되겠습니다.
  • Big noise button
    저는 개인적으로 이런 button이 제일 무서운데, 모양은 둘째치고 mouse를 올렸을 때 엄청난 굉음이 동반된 button... 까딱 실수해서 마우스 커저가 button들을 피아노 건반 긁듯이 훑어 버리면 첫 번째 굉음이 끝나기도 전에 연속적으로 터져나오는 굉음들... 물론 OnMouseOver event에 sound를 사용해서 식별성을 높여주는 자체는 아주 훌륭한 생각입니다만 volumn이 지나치게 크면 mouse올려 놓기가 좀 망설여 집니다.

대략 위의 경우를 바람직하지 못한 button의 예라고 할 수 있겠습니다. 바로 이런 전제 하에서 바람직한 button이 되기 위한 몇 가지 조건을 제시해 보겠습니다.

  1. Mouse를 올려놓지 않고도 button인 것을 예측 할 수 있을 것.

    이 문제는 크게 2 가지로 구분할 수 있는데, 첫 번째는 화면에서의 button의 위치를 어디로 정하느냐하는 문제입니다. 반드시 그래야 되는 것은 아니겠지만 일반적으로 흔히 사용하는 화면 좌측이나 상단에 위치 시키는 방법이 무난하다고 할 수 있겠고, 두 번째는 menu text의 색상이나 굵기등으로 menu text와 일반적인 text를 차별화하거나 text 대신 image를 사용하는 방법이 있겠습니다.

  2. Text sample
    Button 01 Button 02 Button 03 Button 04 Button 05
    Button 01
    Button 02
    Button 03
    Button 04
    Button 05
    Main text

  3. Mouse를 올려 놓으면 button이라는 것을 확실히 알 수 있을 것.

    즉, mouse를 올렸을 때 button이 "어서와! 나 button 맞어... 잘 올려놨어..." 라고 반응하듯이 MouseOver시에 button에 어떤 변화가 생겨서 button임을 확인시켜 주는 방법인데, 이 것도 두 가지로 크게 구분할 수 있겠습니다. 하나는 button 자체에 변화를 주는 방법이고, 다른 하나는 button은 가만히 있더라도 mouse cursor의 모양이 바뀌는 방법이 되겠습니다. 이 때 손 모양 cursor를 지정하는 CSS property와 keyword 를 cursor:hand 보다는 cursor:pointer로 지정하면 IE 와 NN, FF 등에서도 작동 하겠죠.

  4. Mouse on text sample
    Button 01 Button 02 Button 03 Button 04 Button 05
    Button 01
    Button 02
    Button 03
    Button 04
    Button 05
    Main text




  5. Click 했을 때 어디로 갈지 예측 가능할 것.

    이 문제는 text button이 아닌 image등을 사용하여 icon 화 시킨 button의 경우에 발생할 수 있는 문제인데, button에 mouse를 올렸을 때 button image 이외에 별다른 설명이 없는 경우가 되겠습니다. 비근한 예로 우리가 사용하는 browser의 menu bar에 있는 '뒤로', '앞으로', '중지', '새로고침' 등의 icon과 같이 옆에 도구이름을 보여주지 않드라도 알 수 있는 icon이나, '남자 화장실', '여자 화장실' 등의 icon 같이 우리가 체험적으로 알고 있는 것들이면 사용해도 무방하겠지만, 거의 접해 본 적이 없는 모양의 icon이라면 방문자가 예측하기 곤란할 것 입니다. 그 까이꺼 걍 click 한 번 가지고 뭘 그러느냐고 할 수도 있겠지만, 원래 인터넷 사용자라는 사람들이 클릭 한 번 하기를 귀찮아하거니와, 원하지 않는 길로 갔다가 다시 볼아오는 것은 더 싫어한다는 사실을 감안한다면 아무리 사소한 면이라도 소홀히 여기면 안되겠습니다. 이런 경우의 image를 사용한 button의 경우 IMG element의 alt attribute를, 또 text를 사용한 경우에는 화면상에 render 되는 tag에는 모두 사용할 수 있는 title attribute를 사용하여 풍선 도움말을 사용하는 것이 그 해결 방법이 되겠습니다.





  6. 기분 나쁜 놀라움은 주지 말 것.

    Button에 sound를 사용하는 대표적인 예로 flash를 사용한 button이 있다는 것은 다 아실 겁니다. 물론 flash를 사용하지 않고도 button에 sound effect를 줄 수 있습니다만... 이런 button을 사용한 대표적인 사이트는 Walt Disney 홈페이지가 있는데, 어느 정도의 음량이 적당한지를 판단하는 문제는 듣는 사람마다 느낌이 다르므로 참으로 어렵다고 할 수 있겠습니다. 기분좋을 때는 괜찮다가도 언짢거나 심통이 날 때는 그저 짜증하는 소음으로 들릴 수도 있기 때문이죠. 신중히 고려할 필요가 있는 부분입니다.



    위의 sound effect sample은 이 정도면 적당한 volumn이 아닐까 해서 제시한 하나의 예 이지만 글쎄요 어디까지나 제 자신의 기준에 맞춘 거라서...





이 문서의 저작권은 www.cadvance.org 에 있습니다.

Top
Back
New
검색