 |
Ajax로 사이트 전면 개편 |
|
2008년 11월 11일
|
|
|
이미 만든 사이트에 Ajax를 적용하기란 쉽지 않은 일입니다. 특히 사용성이나 사용자 경험을 개선하는 데 Ajax가 유용한 것을 알아도 시간과 인력이 부족한 환경에서는 사이트를 대대적으로 고친다는 것은 엄두도 나지 않는 일입니다. 이번 연재에서는 점진적 개선 원칙에 따라 불편한 사용자 인터페이스를 Ajax를 이용해 좀 더 효율적인 방식으로 개편해 보겠습니다.
-
1회: Ajax와 jQuery로 기존 사이트 개선하기
Ajax 유행 이전 시기에는 사용자가 웹 사이트를 돌아다니다 길을 잃지 않도록 하기 위해 다양한 해결책이 마련되었습니다. 쇼핑몰의 예를 들면 소비자가 제품 구입을 포기하지 않도록 최적의 주문 경로를 제공했지만 사이트 내 이동 중 제품 정보를 보기 위해 샛길로 빠지는 것을 막을 수는 없었습니다. 이 문제에 대해 팝업이 해법으로 제시됐지만 불쑥 튀어나오는 창 때문에 사용자들은 오히려 혼란스러워 했습니다. 1회에서는 Ajax 기술을 바탕으로 한 모달 대화 상자를 이용해 사용자가 ‘미아’ 상태에 빠지는 것을 막는 방법을 알아보겠습니다.
-
2회: jQuery, Ajax, 툴팁, 라이트박스로 기존 사이트 개선하기
1회에 이어 팝업을 툴팁으로, 사이트 밖으로 나가는 링크를 라이트박스로 바꾸어 웹 사이트 내비게이션을 좀 더 효율적으로 개선해 보겠습니다.
-
3회: jQuery, Ajax 탭, 회전식 슬라이드쇼로 기존 사이트 개선하기
쇼핑몰 제품 상세 정보 페이지에는 정보가 많이 들어갑니다. 그러다 보면 페이지가 느리게 뜨고 사용자는 그만큼 기다려야 하는 불편을 겪습니다. 이번 회에서는 스크롤이 긴 페이지와 여러 페이지로 나뉜 페이지를 1, 2회에 마찬가지로 점진적 개선 원칙에 따라 Ajax 응용 기법으로 개편해 보겠습니다. 모든 문제를 해결할 수는 없겠지만 이전보다는 쾌적하고 단순해진 인터페이스를 경험할 수 있을 것입니다.
-
4회: 기존 사이트를 jQuery와 Ajax forms를 사용하여 개선하기
마지막 회에서 다룰 문제는 복잡한 폼입니다. 제품을 주문할 때 보통 여러 개의 폼에 필요한 내용을 채워 넣기 마련인데 이런 과정은 지루하고 사용자가 실수하기도 쉽습니다. Ajax를 이용해 복잡한 주문 절차를 사용자 친화적인 인터페이스로 개편해 보겠습니다.
|
|
|
|
