폼(Form) 디자인 잘했다는 소리를 듣기 위한 방법론
웹 디자인을 처음 하시는 분들에게 있어 폼 디자인은 어려움 그 자체입니다. 하지만 폼은 사용자와의 상호작용을 하는 웹의 특성 상 매우 중요하며 웹 디자이너라면 반드시 이해하고 넘어가야 할 관문입니다. 앞으로 설명하는 내용을 잘 참고하시어 다음부터 제작하는 폼 디자인은 매우 효율적으로 작성하는 웹 디자이너가 되시길 바랍니다.
좋은 폼 디자인을 하기 위해서는 다음의 4가지를 고려하여야 합니다.
-
요소 의미에 맞게 사용하기
-
접근성을 준수하여 제작하기
-
사용성을 고려하여 작성하기
-
보고 이해하기 좋게 디자인하기
폼 디자인을 잘못하면 사용자를 때때로 난처하게 하거나 곤란하게 만들 수 있습니다.
종종 폼을 사용하다 보면 사용자가 웹 문서를 보는 도중 엉뚱한 방향으로 페이지를 옮기거나,
원하지 않는 요소로 이동하는 경우가 생깁니다. 사용자에게는 참 난처할 수 밖에 없는 상황이 연출됩니다.
사용자에게 보다 편리함을 제공해주는 것이 디자이너와 개발자의 역할이라는 측면에서
많은 반성이 필요하겠죠? 자 그럼 앞으로 사용자에게 편리함을 제공해 줄 수 있는
좋은 폼 디자인 방법을 알아봅시다.
1. 의미가 올바른 구조를 작성하라.
A. 유사한 내용은 <fieldset> 요소로 감싸라.
일반적으로 폼 디자인 시에는 <form> 요소 내부에 <input /> 요소를 사용하여 작성합니다.
<form> 요소가 <input /> 요소 들을 감싸 않은 모양이죠. 문제는 내부에 <input /> 요소가 많을 경우입니다.
이처럼 내부에 많은 요소가 사용된다면 사용자의 입장은 물론 디자이너, 개발자의 입장에서도 쉽게 구분하여
이들을 파악하기란 어렵습니다. 이럴 경우 <filedset>을 사용하여 내부 요소를 비슷한 내용끼리 묶어준다면
모두가 손쉽게 내용을 이해할 수 있을 겁니다. 모두를 위한 디자인 [유니버셜 디자인]의 시작인거죠!
(예제 코드)
<form action="process.cgi" method="post">
<fieldset>
<span>빌딩 주소</span><input type="text" />
<span>도시</span><input type="text" />
<span>전화번호</span><input type="text" />
<span>우편번호</span><input type="text" />
</fieldset>
<fieldset>
<span>빌딩주소</span><input type="text" />
<span>도시</span><input type="text" />
<span>전화번호</span><input type="text" />
<span>우편번호</span><input type="text" />
</fieldset>
</form>
B. 구분한 <fieldset> 요소마다 <legend> 요소로 이름을 부여하라.
나뉘어진 <filedset> 요소를 구분하기 위하여 각 <fieldset>은 구분 식별자가 필요하겠죠? 다른 요소의 경우는
name, id 속성으로 구분하겠지만, <fieldset>은 내부에 <legend> 요소를 사용하여 구분 식별할 수 있습니다.
(예제 코드)
<form action="process.cgi" method="post">
<fieldset>
<legend>아카데미 정글</legend>
<span>빌딩 주소</span><input type="text" />
<span>도시</span><input type="text" />
<span>전화번호</span><input type="text" />
<span>우편번호</span><input type="text" />
</fieldset>
<fieldset>
<legend>와인 아카데미</legend>
<span>빌딩 주소</span><input type="text" />
<span>도시</span><input type="text" />
<span>전화번호</span><input type="text" />
<span>우편번호</span><input type="text" />
</fieldset>
</form>
C. <input /> 요소에 name 속성을 작성하라.
폼에 작성된 내용을 스크립트를 통해 서버로 보내기 위해서는 스크립트에서 제어할 수 있는 식별 이름이 필요합니다. 때문에 사용자가 입력하는 공간인 <input />에 name(이름) 속성을 작성하여야 합니다.
(예제 코드)
<fieldset>
<legend>아카데미정글</legend>
<span>빌딩 주소</span><input type="text" name="b_address" />
<span>도시</span><input type="text" name="city" />
<span>전화번호</span><input type="text" name="tel_number" />
<span>우편번호</span><input type="text" name="post_number" />
</fieldset>
D. <span> 대신 <label> 요소를 사용하라.
<span> 요소를 사용하는 것은 아무런 의미없이 문서를 작성한 경우로 이는 잘못된 방법입니다.
이를 개선하기 위해서는 <span> 대신 <label> 요소를 사용하여 문서를 구조화 시켜주셔야 합니다.
(예제 코드)
<fieldset>
<legend>아카데미정글</legend>
<label>빌딩 주소</label><input type="text" name="b_address" />
<label>도시</label><input type="text" name="city" />
<label>전화번호</label><input type="text" name="tel_number" />
<label>우편번호</label><input type="text" name="post_number" />
</fieldset>
E. <label> 요소 for 속성을 제공하여 <input />의 id 속성과 연결하라.
<label> 요소의 for 속성은 관련된 <input /> 요소의 id 값과 연결됩니다.
이를 통해 사용자는 접근성 및 사용성 증대를 높힐 수 있습니다.
(예제 코드)
<fieldset>
<legend>아카데미정글</legend>
<label for="buidding_addr">빌딩 주소</label><input type="text" id="buildding_addr" name="b_address" />
<label for="city_name">도시</label><input type="text" id="city_name" name="city" />
<label for="phone">전화번호</label><input type="text" id="phone" name="tel_number" />
<label for="postal">우편번호</label><input type="text" id="postal" name="post_number" />
</fieldset>
F. <option> 요소를 카테고리화 하기 위한 <optgroup> 요소를 사용하라.
<select> 요소 내부에 <option> 요소가 많을 경우, <optgroup> 요소를 사용하여 그룹화 하는 것이 좋습니다.
옵션 요소들을 그룹화하고 label 속성으로 각 그룹의 타이틀을 작성하여 구분할 수 있습니다.
(예제 코드)
<select>
<optgroup label="USA">
<option>Alabama</option>
<option>Alaska</option>
<option>Arizona</option>
</optgroup>
<optgroup label="Canada">
<option>Alberta</option>
<option>British Columbia</option>
<option>Manitoba</option>
</optgroup>
</select>
G. 속성은 반드시 값을 명시해 준다.
과거 문법이 덜 엄격했던 HTML 문서 작성시와는 다르게 XHTML 1.0 이상 문서 작성 시에는 반드시 속성에
값을 명시해주어야 합니다.
(예제 코드)
<label for="live">Living?</label>
<input name="live" id="live" type="checkbox" checked="checked" disabled="disabled" />
H. <input type="submit" />보다는 <button>을 사용하는 것이 조작하기 좋다.
<input /> Submit 전송 버튼은 CSS로 꾸미기 매우 불편하다. 이를 대체할 유용한 방법으로 <button>을
사용하는 것이 디자인하기 좋다. 관련 글(Button 요소의 재 발견! <button> VS <input />)을 참고해보길
바란다.
2. 접근 가능하게 작성하여야 한다.
I. <input /> 요소에 tabindex를 넣어라.
마우스를 사용하는 일반 사용자에 비해 마우스를 사용하지 못하는 사람들(예를들어 시각 장애가 있는 사람들)이
바라보는 웹 페이지를 읽는 방법은 매우 어렵다. 왜냐하면 문서가 작성된 순서대로 스크린리더(화면낭독) 되기 때문. 이런 불편함을 해소하기 위해 디자인 단계에서 글의 중요도에 따라 우선 적으로 읽힐 수 있는 순서를 고려하여야 한다. 이를 위해 tabindex라는 속성으로 순서를 부여할 수 있다.
(예제 코드)
<input type="text" tabindex="2" />
<input type="text" tabindex="1" />
<input type="text" tabindex="3" />
J. 사용 목적이 타당하다면, accesskey 속성을 부여하라.
accesskey 속성은 input 요소에 키보드 단축키를 제공할 수 있다. 단축키는 키보드 자판의 Alt (Option)와
함께 사용하면 된다. 물론 모든 input 요소에 accesskey를 부여할 필요는 없다. 하지만 분명 필요한 요소도
있다. 예를들면 Search box(검색 창)의 경우이다. 아래 코드처럼 단축키 속성을 부여한다면 사용자는 쉽게
검색할 수 있을 것이다. 여기서 주의할 점은 사용자는 단축키를 모른다는 것이다. 그렇기 때문에 단축키를
명시해서 사용자로 하여금 사전에 알 수 있도록 조치를 취하는 것이 필요하다.
(예제 코드)
<label for="search"><span class="shortcut">S</span>earch</label>
<input type="text" name="s" id="search" accesskey="s" />
K. 사용자로 하여금 현재 활성화된 창을 각인 시켜라. 굿 포커싱!
이 방법은 CSS :hover 가상 클래스(슈도 클래스라고도 부름)를 이용하여 시각적으로 사용자에게 현재 활성화된
input 요소를 알 수 있도록 도와준다. 시각적으로 접근성을 향상 시킬 수 있다. 다만 아쉬운 점은 IE7 이하
브라우저에서는 이 방법은 지원되지 않는다. 왜냐하면 IE6의 경우 <a> 요소에만 :hover 가 적용되며,
아래 사용된 속성 선택자의 경우 IE7은 인식하지 못하기 때문이다. 하지만 그렇다고 해서 아주 방법이 없는
것은 아니다. IE7.js를 이용하는 방법과 javascript, jQuery 등을 이용하는 방법으로 보조가 가능하다.
물론 javascript가 지원 되지 않는 환경에서는 적용되지 않는다.
(예제 코드)
input[type=text]:hover {
background-color:#ffff66; /* 배경색 변경 */
border-color:#999999; /* 테두리색 변경 */
}
L. 스크린리더기를 이용하는 사람들도 있다는 것을 염두에 두어라.
모든 사람들은 쉽고 일목요연한 폼 디자인을 선호한다. 모든 사람들 안에는 스크린리더기를 이용하는 사람들도
포함된다. 이를 염두에 두고, 모든 input 요소에는 label 요소로 명확함을 전달하여야 한다.
아래 사용된 속성 선택자의 경우 IE7은 인식하지 못하기 때문이다. 하지만 그렇다고 해서 아주 방법이 없는
것은 아니다. IE7.js를 이용하는 방법과 javascript, jQuery 등을 이용하는 방법으로 보조가 가능하다.
물론 javascript가 지원 되지 않는 환경에서는 적용되지 않는다.
3. 기능적 실용성을 고려하라.
M. 올바른 컨텐츠 타입을 사용하라.
대다수의 경우 form에 enctype 속성을 설정하지 않는다. enctype의 초기 설정 값은 다음과 같다.
enctype="application/x-www-form-urlencoded" 대부분의 경우 이 속성을 설정하지 않아도 무방하나,
form 내부에 <input type="file" />이 있는 경우는 enctype 속성의 값을 "multipart/form-data"로
설정해줘야 한다. 왜냐하면 일반적으로 초기 값일 경우 form 안의 데이타를 text 형식으로 서버에 보내지만,
이미지나 실행 파일 같은 binary 파일은 초기 설정 값으로는 전송할 수 없기 때문이다. enctype=
"multipart/form-data" 으로 설정해주면 text가 아닌 binary 형식으로 form 안의 데이타를 전송할
수 있다.
(예제 코드)
<form action="verify.php" method="get" enctype="multipart/form-data">
&tl;label for="avatar">Upload your Avatar : </label>
<input type="file" name="avatar" id="avatar" />
</form>
N. get/post 전송 방식의 차이를 제대로 알고 사용하라.
get 또는 post는 form 내부의 데이터를 전송하는 방식을 말한다. 이 둘은 같은 역할을 하지만 명백하게
다른 점이 존재하는데 get 방식에 비해 post 방식이 비교적 정보 보안적이 측면이 더 낫다. get 방식의 경우
form 내부 데이터 전송 시 URL 뒤에 정보를 붙여서 보내기 때문에 눈에 보인다는 점이다. 만약 비밀번호를
폼에 넣어 보낼 경우 get 방식을 사용한다면 낭패다 ㅡ.,ㅡ;; 다 보일테니 말이다. 유의해야 할 부분이다.
post 방식은 get 방식에 비해 안전하다.
|
|
get |
post |
|
보안 |
post에 비해 덜 보안적. |
get에 비해 보안적. |
|
데이터 제한 |
제한, URL 허용 길이 |
제한 없음. |
|
데이터타입 제한 |
오직 ASCII 문자만 허용. |
제한 없음. Binary 역시 사용 가능. |
|
뒤로가기 버튼,
재 전송 버튼 눌렀을 경우 |
사용자가 입력한 내용을 재 작성해야 함. |
사용자에게 경고를 함. |
|
인코딩 |
application/x-www-form-urlencoded |
multipart/form-data 또는
application/x-www-form-urlencoded |
(예제 코드)
<form action="you.php" method="get">
<label for="fname">First Name</label>
<input type="text" name="fname" id="fname" value="Bill" />
<label for="lname">Last Name</label>
<input type="text" name="lname" id="lname" value="Gates" />
</form>
O. 검증은 클라이언트/서버 양쪽에서 진행할 수 있도록 만들어라.
form 내부의 데이타를 보내기 전에 클라이언트 쪽에서 자바스크립트를 이용하여 데이타 내용이 유효한지 검사하는 것 이외에 혹시 모를 자바스크립트 미지원 시 유효성 검사를 진행할 서버쪽에도 검증 시스템을 만들어놔야 접근성을 높힐 수 있다.
P. AJAX를 이용하여 보다 사용성을 높여라. 단, 자바스크립트 미지원시도 고려하라.
AJAX를 이용하여 페이지를 새로 고침하지 않고 현재 페이지에서 사용자에게 내용을 전달하는 것은 사용자에게 많은 사용의 편리를 제공할 수 있다.jQuery 또는 당신이 선호하는 자바스크립트 라이브러리를 사용하여 작성해보는 것은 어떨지 고민해봐라. 단 개발 시 Javascript 미지원 시에도 처리가 가능하도록 설계하여야 함을 명심히라.
