1upz

이번 학기에 수강하고 있는 웹 디자인 수업은 테크니컬 적인 내용은 배제하고 인터렉티브를 기반으로 한 디자인을 다루고 있습니다.

Interact는 '상호적인(Inter)' 이라는 단어와 '활동, 작용(Act)'을 뜻하는 단어의 합성어로 '상호 작용하다', '서로 영향을 끼치다' 라고 풀이되는데, 상호적으로 작용한다는 의미는 일방적인 활동으로 그치는 것이 아니고 작용에 대한 반응(React)과, 또 반응으로 인해 새로운 행동 반응이 연거푸 일어나는 작용이라 할 수 있습니다. 이해를 돕기 위해 한가지 예를 들자면, 앞에 있는 놈을 한대 쥐어 박았을 경우 그것으로 끝나는 것이 아니라 그 놈의 머리에서 혹이 나고, 눈물을 흘리며 나에게 주먹질을 해오는 이러한 작용과 반응이 인터렉티브라 할 수 있겠죠.

그렇다면 웹사이트에서 가장 기본적인 인터렉티브는 무엇이 있을까요?

a {text-decoration:underline;}
a:link {color:#09c;}
a:visited {color:#906;}
a:hover {font-weight:bold; color:#0c3;}
a:active {color:#c00;}
a:focus {background-color:#eee;}

네, 저는 a 태그의 가상 클래스 라고 생각 합니다. 링크를 확인하고, 마우스를 올리고, 클릭하는 행위가 이뤄지는 부분이죠.

위와 같은 평범한 링크 스타일로도 충분히 상호작용이 일어나지만 일반적으로 mouse over 에 대한 반응에만 신경을 쓰고 있지, 클릭에 대한 반응은 생략하는 경우가 많아 클릭했을 경우의 스타일을 생각 해 봤습니다.

a 태그를 간단하게 버튼 모양으로 만들어 보도록 하겠습니다. 예제 보기

a {
    display:block;
    width:8em;
    padding:.5em 0;
    background-color:#eee;
    font-size:1em;
    text-align:center;
    text-decoration:none;
    border:1px solid #ddd;
    border-width:0 1px 1px 0;
    }

a:link, a:visited {
    color:#000;
    }

a:hover {
    color:#c06;
    }

a:active {
    position:relative;
    top:1px;
    left:1px;
    background-color:#e3e3e3;
    color:#f39;
    }

active 클래스에 position을 relative로 설정하고 위치를 위쪽, 왼쪽에서 각각 1px씩 이동하라고 지정해 뒀습니다. 링크를 클릭하는 순간 마치 버튼을 클릭 한 것과 같은 시각적 효과를 보여줌으로써 자신이 클릭했다는 사실을 눈으로 확인 할 수 있게 되는 것이죠. 클릭과 그 작용에 대한 시각적인 반응, 즉 인터렉트가 일어나는 것입니다.

물론 페이지 이동은 짧은 순간에 이뤄지고 마우스의 커서도 자동으로 바뀌거나 시스템에 따라서는 효과음도 출력되기 때문에 굳이 이러한 노력을 들이지 않더라도 클릭에 대한 반응을 인지할 수는 있습니다만 CSS를 응용하여 좀 더 멋지고 쉬운 인터렉티브 디자인을 만들어내는 것은 디자이너로서 상당히 매력있고 의미있는 일 이라 생각 합니다.