[HTML] LABEL과 사용자 중심의 프로그래밍-UI

프로그램의 UI(User Interface)는 코드 못지 않게 중요하며
최근에는 오히려 코드보다 더 무거운 비중을 차지하고 있다.
UI의 성공이 곧 프로그램의 성공으로 이어지며 그 반대의 경우도 동일하다.
전문적으로 UI만 개발해 주는 업체도 있고, UI개발자도 있다.
인기있는 프로그램은 UI에서 다른 프로그램을 압도하며
사용자들은 편안하고 거부감 없는 UI를 가지고 있는 프로그램을 선호하게 되는데
특히, 접근성이 중요한 웹의 경우 UI의 비중은 더 크다.
대형 사이트들은 '아이트래킹'이라는 시스템을 사용해 사용자 시선의 흐름을 분석하고
그 결과를 토대로 메뉴 위치를 구성하기도 한다.

프로그램은 사람을 좀더 편하게 하기 위한 것이다.
프로그램을 쓰면서 사람이 더 피곤해지거나 스트레스를 받는다면
그 프로그램은 실패작이다.
프로그래머는 어떤 프로그램을 만들때 사용자 입장에서 많은 생각을 해야 한다.

"이 버튼이 여기에 있는것이 누르기 편할까?"
"메뉴를 오른쪽에 두는것이 보기에 편할까?"
"날짜를 수기로 입력하게 하는것이 좋을까 달력콤포넌트에서 선택을 하게 하는것이 좋을까?"
"이 부분은 직접 해보니까 불편하잖아! 당장 고쳐야겠다 -_-"

서론이 쓸데 없이 길었다.
자 이제 본론이다.

여러 사이트들 중에 다음과 같은 추가 정보를 입력 받는 곳들이 있다.

앞에 있는 체크박스에 정확히 마우스를 갔다 대고 클릭해야 영광의 상처같은 "v"가 표시된다.
나이드신 분들이나 장애우,어린이들의 경우 어려운 일이 될 수 있다.
위에서 괜히 길게 서론을 열변했던것이 아니다.
바로 이런 UI를 프로그래머는 지양해야 하는 것이다.

그렇다고 저 페이지를 없애버리면 안되지 않겠는가?
뭔가 근사한 해결책은 없는것인가...

있다 -_-

오늘의 주인공 LABEL을 쓰자.

<FORM action="..." method="post">
<LABEL for="fname">First Name</LABEL>
<INPUT type="text" name="firstname" id="fname"><br />
<LABEL for="lname">Last Name</LABEL>
<INPUT type="text" name="lastname" id="lname"><br />

<LABEL><INPUT type="radio" name="sex" value="M" />Male</LABEL>
<LABEL><INPUT type="radio" name="sex" value="F" />Female</LABEL><br />

<LABEL><INPUT type="checkbox" name="book" value="book" />Book</LABEL>
<LABEL><INPUT type="checkbox" name="game" value="game" />Game</LABEL>
<LABEL><INPUT type="checkbox" name="sport" value="sport" />Sport</LABEL>
</FORM>

위 코드를 브라우져에서 열어보자.
<LABEL>이 무슨 역할을 하는지 보는것만으로는 알 수 없다.
하지만 눈으로 보이는것이 다가 아니라는 유명한 말이 있지 않던가??
각 콤포넌트들의 옆에 있는 텍스트를 클릭해보자.
어떤가?
지금쯤 당신의 입가에 살며시 번지는 미소를 나는 알 수 있다.
바로 그것이다.
말로 설명하지 않겠다.
해봐라.
해본자와 안해본자의 차이는 하늘과 땅차이보다 클것이니.....


-----------------------------------------------------------------------------------------
2007-01-10 추가
위의 밑줄친 코드는 IE에서 제대로 작동하지 않습니다.
다음과 같이 수정하면 IE와 FF모두 정상 작동합니다.

<input id="sex1" type="radio" value="M" name="sex"><label for="sex1">Male</label>
<input id="sex2" type="radio" value="F" name="sex"><label for="sex2">Female</label>

<input id="chk1" type="checkbox" value="book" name="book"><label for="chk1">Book</label>
<input id="chk2" type="checkbox" value="game" name="game"><label for="chk2">Game</label>
<input id="chk3" type="checkbox" value="sport" name="sport"><label for="chk3">Sport</label>

Male Female
Book Game Sport