웹의 한번 클릭과 IE 버튼

오래 전에 한국HCI연구회에 쓴 글이다.

작성일 : 1999. 4.12

1996년도 넷스케이프 3.0이 웹 브라우저 시장의 90% 이상을 점유 하고 있을 때, 뒤늦게 마이크로소프트사에서는 인터넷으로 눈을 돌려 인터넷 익스플로러 3.0을 발표 하였다.

사용자 인터페이스 관점에서 볼 때 인터넷 익스플로러 3.0의 특이한 것 중 하나는 바로 툴 바(toolbar) 버튼이었다. 이 툴바 버튼은 일반적으로 사용되어온 버튼이 아닌 새로운 것이었다. 이 전의 버튼은 실제 버튼처럼 보이게 하기 위해서 아이콘에 네모난 테두리를 가지고 있었고 볼록하게 튀어나온 것 처럼 보이게 하기 위해 테두리 주변에 그림자를 주었다. 그러나 인터넷 익스플로러 3.0의 툴 바 버튼은 버튼에 테두리도 없었고 볼록한 효과도 없는 평평한 버튼(flat button)이었다. 또한 다른 버튼의 아이콘은 칼라를 가지고 있었는데, 인터넷 익스플로러의 버튼은 단색이었다. 칼라 모니터가 주류를 이루고 있던 시대였는데도 말이다.

실제 버튼 처럼 보이게 하려는 이전의 버튼을 따르지 않고 오히려 실제 버튼과는 다른 평평한 형태의 버튼을 만든 이유는 무엇이었을까. 또한 칼러플한 아이콘을 그리지 않은 이유는 무엇일까.

해답은 버튼위에 마우스를 갖다 대면 알 수 있다.
기존의 버튼위에 마우스를 갖다 댈 경우 버튼은 아무 변화도 보이지 않는다. 다만 마우스를 클릭했을 때만 실제 버튼이 눌리는 것 같은 동작을 볼 수 있다. 그러나 인터넷 익스플로러의 버튼위에 마우스를 갖다 대면 평평한 아이콘이 갑자기 이전의 버튼처럼 테두리가 있고 볼록한 모습으로 바뀐다. 또한 단색이었던 아이콘의 색깔은 칼라플하게 바뀐다. 이 버튼을 IE 버튼이라고 한다.

그럼 왜 마이크로소프트사는 이런 버튼을 만들 게 된 것일까?

인터넷이 보편화되면서 하이퍼텍스트가 웹 컨텐츠의 주요한 구성요소가 되었고, 이 하이퍼텍스트는 밑줄쳐진 문자열이나 이미지를 한번 클릭하면 그것이 연결된 곳으로 이동하는 사용성을 가지고 있다. 문자열의 경우 하이퍼 링크가 걸려 있을 때 문자열에 밑줄을 쳐서 표시를 한다. 물론, 일반적으로는 강조를 할 때 문자열에 밑줄을 치지만, HTML 에서는 기본적으로 밑줄친 문자열은 하이퍼 링크를 의미한다. 그럼 밑줄친 문자열이 하이퍼 링크인지 그냥 보통 문자열인지 어떻게 알 수 있을 까? 물론 클릭해 보면 알 수 있겠지만, 문자열위에 마우스를 갖다 대면 일반적으로 커서 모양의 마우스가 손모양으로 변한다. 마우스는 모양을 변화시켜서 상태를 표시하는데, 윈도우즈에서 디폴트로 제공되는 모양은 보통 상태일 때는 화살표, 작업중에 대기하라는 의미의 모래시계 모양, 선택할 수 있다는 의미의 손모양등이 있다. 즉, 하이퍼링크가 있어서 실행할 수 있다는 의미로 마우스의 모양으로 변화시켜서 사용자에게 피드백하는 것이다.

일반적으로 사용자의 마우스 동작과 관련해서 명령을 실행할 수 있는 대상은 크게 버튼 처럼 한번 클릭이 선택과 실행을 의미하는 것과, 한번 클릭은 선택, 두 번 클릭은 실행을 의미하는 것으로 나눌 수 있다. 한번 클릭이 선택, 두 번 클릭이 실행인 경우에는 선택과 실행의 마우스 행동이 분명하다. 그러나 한 번 클릭이 실행인 경우에는 선택의 의미가 포함되어 있어서 사용자에게 선택이라는 의미와 실행할 수 있다는 두가지 의미를 피드백 해주어야 한다. 웹의 네비게이팅에 있어서 사용자의 마우스 액션은 모두 한번클릭으로 수행된다. 따라서 사용자의 행동에 대해서 선택의 의미를 좀더 명확하게 피드백할 필요가 생긴 것이다. 결국, 웹 네비케이터인 인터넷 익스프로러도 웹의 컨텐츠의 동일한 사용성을 위해서 버튼도 같은 사용 방법인 한번 클릭으로 바꾼 것이라고 본다.

이후, 인터넷 익스플로러의 경우 HTML에서 하이퍼링크에 대해서 마우스의 모양이 변하는 것 외에 색깔을 다르게 할 수 있고, 밑줄이 없었다가 생기기도 하는 사용자 인터페이스를 추가 하였다.

IE 버튼은 유행처럼 퍼져 나갔고, 결국에는 약간 다르기는 하지만 넷스케이프 다음 버전에서도 IE 툴바 버튼과 같은 형태의 버튼을 채용 했다. 넷스케이프에서는 마우스를 갖다 대기 전에 버튼의 구분이 없는 평평한 버튼은 IE 버튼과 같고, 다만 색깔이 약간 있는 상태에서 마우스를 갖다 대면 색깔의 변화를 주는 것이 달랐다.

인터넷의 큰 물결과 더불어 세계의 컴퓨터 사용자들은 마이크로소프사 인터넷 익스플로러와 넷스케이프 네비게이터를 사용하게 되었고, 자연스럽게 웹의 한번 클릭에 익숙해 졌고, 이와 더불어 IE 툴바 버튼은 일반 응용프로그램들 까지 영향을 미쳐서 최근의 대부분의 프로그램들의 툴 바 버튼을 채용하게 되었다.

http://hci.or.kr/colum/19990412.html

Related Post







Scroll Up