사용자 삽입 이미지

<< 일반적인 디자인 패턴 >>

이 그림을 보고 과연 어떤 팁일까?
이해하지 못하시는 분들도 이해하시더라도 보잘것 없어 보일 수도 있겠습니다.
하지만 좀더 깊게 생각해보면 다양한 이점이 숨어있습니다.

위의 그림을 구현하는 것은 매우 간단해 보입니다.
하나의 영역에 로그인 화면과 로그아웃 화면에 함께 표출 되도록 디자인을 하고 display 값을 통해서 로그인 상태, 로그아웃 상태를 볼 수 있음을 의미합니다.

만약 서버 사이드 개발자라면 이런 경우 if문을 통해서 사용자가 로그인한 경우라면 로그인 된 상태의 HTML 소스를 표시하고 그렇지 않는 경우 로그인 할 수 있는 화면 소스를 표시할 것입니다.

그리고 디자이너라면 로그인 된 HTML 파일, 로그인 되지 않는 HTML 파일로 각각 디자인을 처리하는 경우가 많을 것입니다. (꼭 그렇지 않는 경우도 있습니다.)

이런 방식은 Web1.0 방식의 전형적인 방식으로 Ajax 개발 시에는 좀더 웹 표준을 준수하고 사용자의 경험을 존중해줄 수 있는 HTML Design 설계를 해야할 것입니다. 

그에 있어 위의 그림은 기본적인 화면 설계 방법중에 하나일 것입니다.


요약해보면 크게 아래와 같은 이점이 있습니다.

첫째
디자이너와 개발자 모두 하나의 페이지에서 다양한 액션을 프로토타입핑 손쉽게 해볼 수 있습니다.


둘째
하나의 페이지에서 일어나는 액션과 사용자 경험에 대한 것을 모두 담고 있기 때문에 관리할 페이지가 줄어듭니다.  (예를 들어 여러 페이지에 적용되어있던 css가 변경되어질 경우가 불 필요한 작업량이 줄어든다.)


셋째
Ajax/Rich UI 개발자들에게는 엘리먼트의 CSS class name 통해서 원하는 처리를 손쉽게 할 수 있다.



디자이너에게도 Ajax/Rich UI 개발을 위한 기술적인 이해와 사용자 경험(User Experience)에 대한 요구 사항을 디자인 단계에서 부터 적용시켜야 한다는 것입니다.


사용자 삽입 이미지

<< 사용자 경험과 Ajax/Rich UI를 위한 디자인 패턴 >>


로그인 UI에 관한 부분을 위에서 설명한 부분을 추가해 다시 한번 그려 보았습니다.

네모단 박스는 모두 div이고 로그인 실패 알림 영역과 인디케이터 부분까지 표시를 한다는 것
기획자와 디자이너, 퍼블리셔, 디벨로퍼까지 모든 부분에서 사용자 경험(user experience)에 대한 부분에 관심을 갖고 기획하고 디자인을 하고 퍼블리싱을 하고 개발을 해야하지 않을까 생각해봅니다.

각 분야에서 자기만의 업무 분야도 중요하지만... 하나의 본질은 웹 서비스를 사용하는 사용자에게 장애없이 원한할한 서비스로서 만족감을 느끼게 하기 위함이니 늘 서로가 고민해야할 부분인것 같습니다.


신고
Posted by Rhio.kim
사용자 삽입 이미지
바로 오늘 HTML 5 가 W3C에 의해서 첫번째 표준안의 밑그림이 발표되었습니다.
W3C HTML WG 과 WHATWG 의 협력적 노력으로 W3C 기술 리포트에 두가지의 문서로 결실을 맺었습니다.

하나는 HTML 5  그리고 또 하나는 HTML 5 differences from HTML 4 입니다.
많은 변화가 있습니다. 자세한 사항은 살펴 보지 않았지만 이번 HTML 5의 표준안 발표로
웹의 판도가 어떻게 흘러갈지 기대됩니다.

Web2.0이 각광받기 시작하고 이미 발표한 ECMAScript 4 또한 HTML5의 발표에 발맞춰 웹의 판도는
어마 어마한 시장성을 확보하고 볼수 없는 상상조차 할 수 없는 무궁무진한 잠재력이
내포되어 있음을 뜻합니다.

앞으로 다가올 웹 2.0 혹은 그 이상의 시대는 어떻게 변할지 상상조차 가지 않습니다.
가슴이 두근 두근 거립니다.


변화 요약!
새로운 속성추가, 변경된 엘리먼트, 없어지는 엘리먼트와 속성

새로운 엘리먼트 추가
  + dialog

  + figure
  + audio, video
  + header, footer
  + nav

Input 엘리먼트의 type 추가
  + datetime
  + datetime-local
  + date
  + email
  + url

HTMLDocument 에 getElementsByClassName() 메서드가 추가되면서 className 으로 element collection
을 쉽게 컨트롤 할 수 있게 되었네요.

그리고 다양한 API까지 제공을 하게 되었네요.

자세한 내용은 Draft 를 통해서 참고하시기 바랍니다.
신고
Posted by Rhio.kim
TAG HTML, html4, HTML5, W3c
사용자 삽입 이미지

“RIA Cowboy” 자칭하는 James Ward 는 최근에 그의 RIA data 로딩 벤츠마킹을 정보를 업데이트 하였습니다.
텍스트 스트림에 대한 Gzip 압축에 대한 부분도 추가되었습니다. 그리고 이 테스트는 꾀 신뢰성있습니다.
다양한 방식으로 경유해서 오는 데이터의 퍼포먼스를 측정하였습니다.

이 테스트의 목적은 다양한 데이터 로딩 방법에 따라서 퍼포먼스, 데이터량 와 클라이언트 메모리 사용량을 측정해 입증하기 위함입니다. 또한 편견없고 신뢰성에 겨냥하고 있습니다.

아래 추가한 그래프는 James Ward 가 Flex 로 개발한 테스트 App입니다.
상당히 신뢰성 있다고 자부하고 있는것 같습니다.

JSON 을 사용하고 있어서 JSON 에 대한 부분의 퍼포먼스에 관심이 있었는데 기대치 만큼보이네요.


원본 출처 : http://www.jamesward.org/wordpress/2007/08/15/census-ria-benchmark-updated-with-gzip-and-laszlo/
벤츠마킹 : http://www.jamesward.org/census/

신고
Posted by Rhio.kim