자주 발생할 수 있는 문제들을 피하고 경험을 증진할 수 있도록 신중히 결정하라

문서 옵션 JavaScript가 필요한 문서 옵션은 디스플레이되지 않습니다. 이 페이지 출력 이 페이지를 이메일로 보내기 토론 영어원문  제안 및 의견 피드백

난이도 : 중급

Jesse Skinner, 웹 개발자, Freelance

2008 년 3 월 11 일

ajax는 웹 애플리케이션을 만드는 방법을 바꿔버렸습니다. ajax를 사용해 불편한 사용자 경험(User Experience, UX)을 제거하여 여러분의 웹 사이트를 증진시키는 방법을 익히기 바랍니다.

ajax가 걸어온 길

비 동기 자바스크립트와 XML(Asynchronous JavaScript + XML, ajax) 개발 기술로 인해 진보한 애플리케이션이 처음 웹에 나타났을 때, 웹 개발자들은 경외감을 느꼈다. 갑자기, 웹 사이트와 웹 애플리케이션의 가능성이 무한한 듯이 보였다. 과거에는 많은 개발자와 사용자 들이 웹 사이트와 웹 애플리케이션을 엉성하고 못생기고 복잡한 버전의 데스크톱 대응물로 생각했다. 그러나 ajax로 진보된 애플리케이션과 웹 사이트가 계속 발전함에 따라 개발자들과 사용자들은 브라우저가 할 수 있는 일이 더 많다는 것을 깨달았다. 현대의 웹 브라우저가 진보적인 DOM(Document Obejct Model) 스크립트와 복잡한 CSS를 지원할 수 있게 됨에 따라, ajax는 백그라운드에서 서버에 즉각적으로 변경, 수정, 응답하는 인터페이스를 만드는 데 필요한 마감재가 되었다. 하지만 때로는 이러한 경험이 너무 동떨어져 최적화된 사용자 경험에 못 미치는 결과를 내기도 한다.

웹 개발 게임의 법칙은 계속 변해왔고, 따라서 많은 개발자가 ajax를 가능한 모든 것에 사용해 보기도 했다. 몇몇 사이트는 심지어 사이트 내부에서 모든 HTML을 제거하고 전부 JavaScript™ 코드로 전환해버리기도 했다.

혁신 대 예지력 ajax는 웹에서 혁신적인 것들을 가능케 했다. 하지만 사용자 경험에 반하는 것들 역시 가능케 할 수 있다. ajax를 사이트에 추가할 때마다 사용자들로 인해 발생할 수 있는 문제 수정에 대해 책임을 져야 한다는 것을 명심하라.

평범한 사용자들에게 ajax라는 것에 대해 물어보라 그러면 아마 그 사람들은 여러분을 멍하니 쳐다볼 것이다. 몇몇 사용자들은 그들이 사용하는 사이트에 적용된 기술에 대해 무지하고, 또한 대다수가 그러한 방식을 선호하며 좋은 사용자 경험에 더 많은 관심을 가지고 있다. 애플리케이션이 동작하는 원리는 백그라운드로 그저 감춰두고, 가능한 한 쉽게 자신들이 원하는 것을 할 수 있기를 말이다.

본 기사는 ajax로 무엇을 할 수 있는지 살펴보고, ajax를 과용하여 이익을 얻는 선을 넘게 되면 어떤 문제가 발생할 수 있는지를 검토해볼 것이다. 이전에 생각해보지 못한 방법으로 ajax를 사용하는 데 감명을 받게 될 것이며, 사용자들이 좋아하는 사이트를 만들기 위해 미친 듯이 일하지 않아도 됨을 알게 될 것이다.

위로

리프레시 제거하기

웹 페이지를 계속 다시 읽는 것만큼이나 짜증나고 불필요한 것도 없다. 경매에서 낙찰했는지 기다리는 사람들, 스포츠 점수를 계속 주시하는 사람들, 또는 최신 일기 예보를 보는 사람들에게 ajax는 그들의 사용자 경험을 훌륭하게 증진시켜 주도록 웹 페이지의 격을 올려줄 것이다.

계속해서 업데이트하는 웹 페이지는 ajax 기술이 등장하기 전에도, 간단한 자바스크립트 코드로 가능했다. 하지만 자바스크립트 웹 페이지를 업데이트할 수 있는 유일한 방법은 전체 페이지를 리프레시하는 것이었다. 이것이 바로 웹 애플리케이션에 재림한 ajax 기술이 웹에 혁신적인 충격으로 작용한 주 요인이다.

예전 방법으로 페이지가 리프레시되면, 사용자들이 해당 페이지와 상호 작용할 방법이 없다. ajax 페이지는 사용자들이 보지 못한 정보를 웹 서버에 비동기적으로(Asynchronously, ajax의 A) 요청하는 작업을 백그라운드에서 수행한다. 그리고 데이터가 돌아오면, 페이지의 일부분만 업데이트한다.

위로

실시간일 필요가 없는 웹

페 이지의 일부분을 자동으로 업데이트하는 것은 확실히 사용자들에게 참신한 변화로 느껴질 것이다. 하지만 그런 페이지들이 웹 서버에는 아키텍처적인 악몽이 될 수도 있다. 만약 웹 사이트를 하루에 1000명이 방문한다면, 웹 서버가 그것을 처리하는 것은 별로 무리가 되지 않는다. 하지만 사이트에 있는 각각의 웹 페이지가 ajax를 사용해서 1초마다 리프레시되고, 한 명이 평균적으로 10분간 페이지에 머무른다고 가정하면, 사이트는 갑자기 하루에 60만 페이지 요청을 다루게 되는 것이다.

웹 서버에서 이런 종류의 상황을 피하려면 개발자들은 업데이트 빈도를 최소화하는 것에 신경을 써야 한다. 만약 해당 정보가 몇 분 간격으로 업데이트된다는 것을 알고 있다면, ajax 요청도 같은 주기로 맞춰야 한다. 만약 정보가 매 초마다 업데이트된다면, 리프레시 주기를 적당히 조정하여(예를 들어, 5초나 10초마다 한 번씩) 사용자들을 실망시키지 않으면서도 가능한 천천히 하는 것을 고려해야 한다.

또한 사용자들이 원할 때 ajax 호출을 시작할 수 있도록 간단한 리프레시 링크를 제공할 수도 있다. 이것은 브라우저에 있는 리프레시 버튼을 사용하는 것과 비슷하지만 만약 가져오는 데이터 양이 작다면, 더 빠르고 웹 서버에 더 작은 부하를 준다.

위로

작은 변화가 큰 충격을 가할 수 있다

ajax 는 페이지에 작은 변경을 가하거나 업데이트를 할 때 최선책으로 사용된다. 예전 방식의 웹에서는, 심지어 페이지의 매우 작은 업데이트조차 전체 페이지를 리프레시해야만 했다. ajax와 자바스크립트를 사용하면, 페이지를 거의 실시간에 가깝게 업데이트할 수 있다. 예를 들어, 댓글이 추가될 때 댓글 목록을 업데이트하거나 현재 시간을 보여주는 시계를 보여주거나 현재 아이템에 대한 진행 상황 막대를 보여주는 페이지를 디자인할 수 있다.

여기서 핵심은 개발자들이 사용성을 높일 수 있도록 해준다는 것이다. 다른 말로 하자면, 사용자들이 좀 더 쉽게 어떤 것들을 할 수 있다는 것이다. 페이지가 로딩되는 시간 동안 기다려야 하는 사용자들은 시간이 낭비되는 것처럼 느낄 것이다. 그래서 ajax가 웹 애플리케이션에 등장하기 전까지는 대다수의 사용자들이 웹 애플리케이션보다는 데스크톱 애플리케이션을 사용하길 선호했다. 데스크톱 응용 프로그램이 좀 더 빠르고 반응이 즉각적이기 때문이다. ajax가 대기 상태와 스크롤을 없애 웹 애플리케이션도 일반적인 데스크톱 애플리케이션 차원까지 발전했다.

위로

큰 변화는 큰 차이를 낳는다

페이지에 매우 작은 변경 사항은 행복한 일이 될 수 있다. 하지만 좀 더 급격하게 변하는 경우, 예를 들어 페이지 전체 내용이 거의 다 바뀔 때에는 사용자들을 혼란에 빠트릴 수 있고 원하지 않은 결과를 보여줄 수도 있다.

사이트가 ajax를 사용해 너무 자주 업데이트를 하면, Back과Forward 버튼 그리고 북마크가 깨진다는 것을 사용자들은 알고 있을 수도 있다(이런 상황은 ajax로만 이루어진 사이트에서뿐만 아니라 플래시 사이트에서도 쉽게 볼 수 있다). 사용자들은 Back 버튼을 클릭해 이전 페이지나 뷰로 넘어가길 원할 것이다. 사용자 경험이 더 나빠지는 상황은 다음과 같다. 사용자가 Forward 버튼을 다시 클릭했는데 자신이 방금 전에 보았던 페이지 대신 마치 ajax 사이트를 리프레시한 것과 같이 초기 뷰를 보는 것이다.

사 용자가 임시로 페이지를 읽어 들였다가 이전에 봤던 사이트로 다시 돌아갔는데 예상과 다른 페이지가 뜬다면 혼란스러워할지도 모른다. 불행히도, 브라우저는 초기 페이지를 다시 읽어 들이고, 그로 인해 대부분 이전의 변경 사항들이 날아갔을 것이다. 이와 비슷하게, 만약 사용자들이 사이트의 특정 뷰나 페이지를 다른 누군가와 공유하고 싶어 한다거나, 해당 페이지를 북마크하고 싶을 때, 사용자들은 간단하게 브라우저의 URL을 복사해 그것을 사용하면 된다고 기대하고 있으며 그렇게 되리라 믿고 있고 그것을 사용한다. 그러면 위와 똑같은 일이 발생하게 된다.

페이지 내용이 많이 바뀌어 사용자들이 느끼기에도 새로운 페이지처럼 느껴진다면, 그것은 결국 그냥 새로운 페이지로 보내는 것이 낫다. 하지만 만약 개발자들이 꼭 한 페이지 내에서 변경되는 ajax를 써야겠다면, ajax History 도구를 사용해 Back과 Forward 버튼 그리고 북마크 기능을 제대로 사용할 수 있다. 이 도구는 해시(예를 들어 "#tab3")를 사용해서 URL을 새로운 페이지로 로딩하지 않고 변경한다. 사용자들이 Back 또는 Forward 버튼을 클릭하거나 북마크 URL을 불러들이면, 자바스크립트 코드가 해시를 참조해 원하는 뷰를 만들어 준다. 물론 이것은 자바스크립트 언어를 지원하는 브라우저에서만 가능하다.

위로

웹 페이지에 정보 뿌리기

인 터넷에는 주목해야 할 또 다른 큰 장점이 있다. 바로 로컬 컴퓨터에 복사하지 않고도 제한되지 않은 양의 정보에 접근할 수 있다는 것이다. ajax를 사용하면, 지구 건너편에 거대한 양의 정보를 가진 데이터베이스에 접근할 수 있는 인터페이스를 만들고 누구도 꿈꿔보지 못한 일들을 할 수 있다.

구글 맵은 개발자와 사용자들의 꿈을 포착하여 만든 첫 번째 ajax 애플리케이션이다. 이제 페이지를 한 번도 리프레시하지 않았는데도 지구 전체 지도와 위성 사진을 탐색할 수 있는 웹 사이트가 등장했다. 이런 방식으로 데이터를 공개하는 것은 ajax의 가장 큰 잠재 능력이다.

지 도 웹 사이트는 구글 맵 이전에도 여러 군데 있었지만, 구글 맵은 이전에는 전혀 불가능했던 인터페이스를 제공하기 때문에 특별하다. 기존 지도 사이트들은 서쪽을 보고 싶으면 링크를 클릭하여 이동해야 했다. 그러면 전체적으로 조정된 맵 뷰를 생성한 새로운 페이지가 만들어진다. 따라서 페이지가 지워지고, 다시 읽어 들이는 동안 기다린 다음에 지도를 스크롤할 수 있었다.

이 런 우스꽝스러운 인터페이스는 웹의 근본적인 제약 때문이다. 웹 서버로부터 무언가를 가져오는 유일한 방법은 새로운 URL을 방문해 새로운 정보를 가지고 있는 새로운 웹 페이지를 다운로드하는 것이었다. 지도를 약간만 왼쪽으로 움직이는 것처럼 현재 보고 있는 뷰 중에서 아주 조금만 변경하고 싶더라도 지도 전체를 새로 읽어 들여야만 했다. ajax는 데이터를 백그라운드에서 비동기적으로 가져오므로 전체 페이지를 지우고 다시 읽어 들일 필요가 없다. 오직 지도 데이터와 이미지 타일만 로딩하면 된다. 여전히 특정 맵 뷰로 이동하는 URL을 만들 수도 있지만, 이제 더 이상 그것은 더 많은 정보를 읽어 들이기 위한 유일한 방법이 아니다.

다양한 상황에서 웹 페이지를 데이터에 대한 인터페이스로 사용할 수 있다. 예를 들어 페이지 처리를 하는 경우를 생각해 보자. 검색 결과를 여러 페이지로 나눠 살펴볼 경우가 있다. 사용자 인터페이스 컨트롤인 Previous Page와 Next Page는 전체 웹 페이지를 매번 로딩해야 할 필요가 없다. ajax를 사용하면 다음 검색 결과 페이지를 비동기적으로 읽어 올 수 있다. 다음에 보일 페이지를 미리 읽어 들이고 사용자들이 그 페이지를 보려고 할 때 바로 보여줄 수 있다.

정 보를 여러 문서로 나눠 속도를 향상시킬 수 있고 대역폭을 절약할 수 있다. XML 또는 JSON(JavaScript Serialized Object Notation)에 담겨있는 데이터는 대부분 웹 페이지의 HTML 표현보다 작다. 특히 페이지의 남은 부분을 헤더, 네비게이션, 푸터로 구분하면 더 작다.

위로

웹 페이지에 정보를 그대로 두기

ajax 는 원시(raw) 데이터를 웹 서버에서 가져올 수 있는 가능성을 열었다. 하지만 이것이 예전 스타일의 웹 페이지가 더 이상 필요 없음을 뜻하지는 않는다. 사용자들이 URL을 통해 일부 데이터에 접근하고 그것을 다른 사용자들과 공유할 수 있도록 하는 것은 중요하다.

ajax는 또한 검색 엔진이 사이트를 크롤링하는 것을 불가능하게 한다. 사이트 내용에 대한 검색 엔진 최적화는 단지 사용자들을 자신의 사이트로 끌어들이지는 것에 대한 것만은 아니다. 이것은 사용성 문제이기도 하다. 아마도 하루 동안 여러분이 방문하는 사이트 대부분을 검색 엔진을 사용해 방문할 것이다. 또한 대부분 방문한 사이트의 한 페이지나 두 페이지 정도만 사용할 것이다. 만약 여러분의 사이트에서 제공하는 내용이 ajax 계층으로 마술같이 감춰진 채로 제공된다면, 검색 엔진은 그것에 대해 알지 못하고 따라서 대부분은 여러분의 사이트를 찾지 못할 것이다. 따라서 JSON 또는 XML을 사용하는 것이 가능해도, 일반적인 HTML 페이지를 사용하여 사이트를 이용할 수 있도록 하는 것이 중요하다.

위로

ajax가 여러분의 사이트를 구할 수 있다

웹 사용자 인터페이스는 일반적으로 사용자가 데이터를 웹 서버에 간단하게 저장하거나 아이템을 쉽게 만들고 갱신하고 지울 수 있게 하는 데 쓰인다. 물론 이 작업들은 항상 HTML 폼으로 한다. 그러나 ajax를 쓰면 백그라운드에서 데이터를 비동기적으로 쉽게 보낼 수 있다. 내용을 더하고 편집하고 지우는 걸 단순하게 하는 데 ajax와 자바스크립트 코드를 쓰는 걸 고려해 보라. 아이템 목록을 더 쉽게 관리할 수 있을 것이다. 서버에 메시지를 보내고 DOM 스크립팅을 이용해 페이지에 메시지를 즉시 추가하는 데 ajax를 사용함으로써 게시판에 글 쓰기 같은 단일 아이템 추가 기능 역시 강화할 수 있다.

위로

ajax가 사이트를 망칠 수 있다

사 용자들은 대부분 웹 사이트에서 ajax를 사용한다고 예상하지 못한다. 많은 사용자가 그것에 대해 들어보지도 못했을 것이다. 따라서 ajax를 페이지 디자인에 도입할 때 사용자들과 상호작용을 해야 한다. 예를 들어 폼에 입력하거나 데이터를 서버로 보낼 때 ajax를 사용하면, 애플리케이션은 사용자들과 다음 상황이 벌어질 때마다 상호작용해야 한다.

• 데이터가 전송되거나 가져오는 중일 때, 움직이는 그림 형태나 "불러오는 중…" 또는 "저장하는 중…"이라는 문구를 표시한다.
• 데이터를 성공적으로 보냈거나 가져왔을 때. "완료" 메시지를 보여주거나 자바스크립트 애니메이션을 보여주어 사용자의 관심을 페이지의 특정 부분으로 주목시킬 수 있다.
• 웹 서버를 사용하다 에러나 타임아웃이 발생할 경우 일반적으로 사용자들에게 다시 시도할 수 있는 기회를 제공하는 설명 메시지를 제공한다.

애플리케이션이 상호작용하는 데 실패하면, 사용자들은 무슨 일이 벌어졌는지 모르는 상태로 방치된다. 만약 사용자들이 Form Submit 버튼을 클릭했는데 아무런 일도 벌어지지 않으면, 웹 사이트가 고장 났다고 생각할 것이다. 만약 애플리케이션이 에러로 인해 통신에 실패하면, 사용자들은 보통 요청이 성공했다고 생각할 것이다. 특히 사용자들이 폼을 작성하는 데 오랜 시간을 들였다면, 성공하지 않았다는 사실 때문에 크게 실망할 것이다. 에러나 타임아웃이 발생했을 때 애플리케이션이 사용자들에게 알려준다면, 최소한 사용자들은 데이터를 복사해서 붙여 넣고, 그것을 로컬에 저장할 수 있다. 그렇게 해서 최악의 사용자 경험을 피할 수 있다.

위로

ajax의 강력함에 대한 균형 찾기

점진적인 개선 – 황금률: 자신의 애플리케이션이 최선의 사용자 경험을 제공한다는 것을 확신하려면, 점진적인 개선이라는 황금률을 따르기 바란다. 자바스크립트 코드 없이 먼저 개발을 하고, 사이트에 작업을 하면서 자바스크립트 코드를 추가하라.

ajax는 웹에서 창의적인 것들을 가능케 한다. 하지만 사용자의 가정에 반하는 행위를 할 수도 있다. ajax를 사이트에 추가할 때마다 사용자에게 발생할 수 있는 문제들을 고칠 책임이 있다는 것을 명심하라.

점진적인 개선은 웹 개발 전략의 하나로 모든 기능과 내용을 가용한 모든 브라우저에서 이용할 수 있으면서도 좀 더 진보적인 웹 브라우저에서는 자바스크립트 프로그래밍과 ajax를 사용해 좀 더 나은 경험을 주는 것이다. 최선의 사용자 경험을 제공한는 것을 확신하려면, 점진적인 개선이라는 황금률을 따르기 바란다. 자바스크립트 코드 없이 먼저 개발을 하고, 사이트에 작업을 하면서 자바스크립트 코드를 추가하라. 우선 기본적인 웹 사이트를 진짜 링크와 진짜 URL로 넘기는 폼을 만든다. 그러고 나서 자바스크립트 프로그래밍과 ajax를 사용해 그런 링크와 폼의 기능을 변경하라.

예를 들어, ajax를 사용하는 댓글 폼을 만들어서 페이지를 리프레시하지 않고 추가되는 댓글을 보여주고 싶을 수 있다. 먼저, 댓글 폼을 자바스크립트 코드를 사용하지 않고 일반적으로 만들고 그것이 동작하는 것을 확인한다. 그런 다음, 자바스크립트 onsubmit이벤트를 폼에 추가한다. 폼이 전송될 때, ajax를 사용해 주석을 서버에 저장하고 DOM 스크립팅으로 페이지를 업데이트한다. 이런 방법으로, 폼은 자바스크립트 없이도 동작하지만 요즘 웹 브라우저에서는 좀 더 잘 동작할 것이다.

developerWorks ajax 참고자료 센터 ajax 참고자료 센터는 무료 도구, 코드 그리고 ajax 애플리케이션 개발에 관한 정보를 구하기 위해 제일 먼저 들러야 할 곳이다. ajax 포럼은 ajax 전문가 Jack Herrington이 활발하게 운영하고 있다. 여러분이 궁금해하는 것에 대해 바로 대답해줄 수 있는 친구들과 관계를 맺으라.

몇몇 사이트는 완전히 자바스크립트와 ajax로 만들어져 있다. 나는 항상 가능하다면 이런 것을 피하라고 추천한다. 이런 식으로 사이트를 구축하는 것은 웹의 잠재적인 고객을 소외시키는 것이며, 자바스크립트 언어 지원 기능을 사용하지 않는 상태로 설정하는 소수 사용자들은 이용하지 못한다. 또한 여러분의 컨텐츠에 목말라 하는 검색 엔진과 그 결과 웹에서 검색하는 사용들도 소외시키는 것이다. 게다가, 아직 여러분의 사이트를 테스트해 보지 못한 장치들이나 브라우저로 사이트에 접속하는 사용자들로부터도 소외된다. 자바스크립트로만 되어 있는 사이트는 아주 작은 자바스크립트 에러만으로도 전체 사이트가 깨질 수 있음에 주의해야 한다. 자바스크립트 없이도 사용할 수 있는 사이트를 함께 만들어서 여러분의 훌륭한 콘텐츠에 접속할 모든 잠재적인 사용자(와 잠재적인 고객)를 소외시키지 않을 수 있다.

위로

요약

ajax 는 웹 애플리케이션을 개발하는 방법을 완전히 좋은 쪽과 안 좋은 쪽으로 바꿔버렸다. ajax를 사용하여 고객의 사용자 경험을 높이는 애플리케이션이 되도록 ajax를 적용하는 선택을 하는 것이 중요하다. 혼란을 발생 시키고, 예측 불가능하며 실망스러운 상황이 발생하지 않도록 최선을 다하라. 대부분의 개발자들에게 이것은 사업의 실패나 성공을 결정하는 요소가 될 것이다.

소셜 북마크 mar.gar.in Digg del.icio.us Slashdot

참고자료

• Progressive Enhancement: Paving the Way for Future Web Design: 점진적인 개선 방식의 웹 개발 전략에 대해 더 알고 싶다면 hesketh.com에서 이 문서를 확인하라.
  
  
• "Progressive enhancement with ajax": 이 기사는 Jeremy Keith가 작성했으며 점진적인 개선을 주장한다.
  
  
• Unobtrusive ajax (O'Reilly, 2007년 7월): 웹 개발에서 동작, 내용, 표현을 구분하는 방법을 익힐 수 있다.
  
  
• developerWorks 기술 행사와 웹 캐스트: 이 세션과 관련된 최신 정보를 유지하라.
  
  
• developerWorks웹 개발 존에는 Web 2.0 개발에 관련된 도구와 정보가 있다.
  
  
• developerWorks ajax resource center: ajax와 관련된 라이브러리와 ajax 애플리케이션 개발을 시작할 때 유용한 내용으로 구성되어 있다.
  
  
• 기술 서적 서점: 이 글과 관련된 서적을 참조하라.
  
  

• 포럼에 참여하기.
  
  
• developerWorks 블로그: 이 블로그를 참조하고 developerWorks 커뮤니티에 참여하라.

필자소개

		Jesse Skinner는 프리랜서 웹 개발자로 ajax, 자바스크립트, CSS를 전문으로 한다. 오라일리(O'Reilly)에서 펴낸 Unobtrusive ajax를 썼고 같은 주제로 The ajax Experience에서 발표를 했다. ajax, 자바스크립트, CSS에 대해 더 많은 것을 읽고 싶다면 Jesse의 블로그 The Future of the Web을 참조하라.