사용자 삽입 이미지

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

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

위의 그림을 구현하는 것은 매우 간단해 보입니다.
하나의 영역에 로그인 화면과 로그아웃 화면에 함께 표출 되도록 디자인을 하고 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
좀더 안정된 Ajax 개발 Pattern - Dynamic rendering with many HTTP Request
javascript 가 document rendering 에 미치는 영향 과는 다른 부분에서 접근했습니다.

정리하고 있는 문서중의 일부를 적어봅니다.

아래 이미지와 같은 UI를 동적으로 구현하려 할때에 Image를 포함(document component)한 Dynamic Rendering에 의해 발생하는 HTTP Requests 와 관련한 내용입니다.

사용자 삽입 이미지
좌측 이미지와 같이 "HD", "▲", "▼"는 이미지로 구성되어져 있습니다.

"HD" 이미지는 2개 하지만 정적인 페이지를 요청한 것이라면 첫번째 요청한 이미지만 Requst Result가 200(Headers and content returned)이 발생하고 그외의 이미지는 304(Content read from browser cache)가 발생하게 됩니다. Static 페이지의 경우에는 캐시를 사용하게 됩니다.

그렇기 때문에 불필요한 작은 이미지 하나 때문에 HTTP Request 를 발생하지 않습니다.

또한 우측으로 보이는
"▲", "▼" 이미지 역시 "HD" 이미지와 동일합니다.

하지만 동적으로 rendering 하는 방식은 경우(innerHTML을 통하거나, 동적 element를 사용)에 따라 이미지 개수만큼 HTTP Request가 발생합니다.

첨부한 자료는 아래의 시나리오에 의해서 나타난 결과입니다.

시나리오

  1.    createElement 를 통해 수십개의 엘리먼트를 생성합니다.
  2.    CSS에 background : transparent url(‘image url’); 속성을 갖는 className을 생성해 놓는다.
  3.    해당 엘리먼트들에 생성해 놓은 className을 부여합니다.
  4.    생성된 엘리먼트를 appendChild로 document에 rendering 합니다.


신고
Posted by Rhio.kim
Dynamic Word Break!!  크로스브라우징 word-break, word break

사용자 삽입 이미지






우리는 간혼 이렇게 div 나 기타 html document 에서 문자열이 layout 구조를 뚫고 나오는 경우를
종종 봅니다.

IE의 경우에는 css로 이 부분을 유연하게 처리할 수 있습니다. 하지만 기타 다른 브라우저에서는 특별한 해결책이 아직은 없는거 같습니다.



제가 제시하는 해결 방법은 각 문자마다 일정의 띄어쓰기를 넣는 방식입니다.
white space를 일정 간격 혹은 자간 사이에 입력하므로써 브라우저에서 자동으로 Word-Break를 하게 됩니다.

즉 위의 이미지를 보면 div는 width:200px 입니다.
길게 늘여진 aaa.......aaa 문자열 각 사이에 white space인 space 값을 강제적으로 입력해 넣습니다.

aaaaaaa aaaaaaa aaaaaaa aaaaaaa  ....

이런식으로 넣게 되면 브라우저에서는 자동으로 Word-Break 하게 됩니다. 역시 크로스 브라우징도 가능하게 됩니다.   다만 여기에도 문제가 있습니다.

"i'mastudent' 이라는 문장을 입력하였다면 몇자 간격으로 띄어쓰기를 하느냐에 따라서 의미 전달이 달라질 수 있기 때문입니다.  또한 쓸모없이 중간 중간 띄어쓰기가 있다면 유연한 문장이 되지 않거나 보기 싫게 됩니다.

4byte 단위로 쪼갠다면 i'ma stud ent 가 되겠죠.  사실 저렇게 쓰는 사용자들은 거의 없겠죠.
하지만 경우에 따라 제목에 원치 않는 긴 제목을 'ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ' 이렇게 넣는
경우가 있죠. 

여기서 고안해낸것인데요.  중간중간 space값을 넣을때 바로 0px의 문자열을 넣는 것이죠.
aaaaaaa<i style="font-size:0px;"> </i>aaaaaaa<i style="font-size:0px;> </font> .....



이렇게 좀더 쉽게 만들었습니다.

요약
목표 : 크로스브라우징 word-break 이 가능하도록 javascript 동적 컨트롤
문제 : IE에서는 css를 통하여 word-break 가 가능하지만 그외 브라우저에서는 word-break가 되지 않는다.
고안 : div를 뚫거나 기본 layout 을 변형 시키는 긴 문자열에 일정 간경 혹은 word-break할 단위마다
         띄어쓰기를 강제적으로 넣어줄 경우 모든 브라우저에서 어떤 컨트롤 없이 word-break가 이루어진다.
         하지만 강제적인 띄어쓰기(white space)를 넣을 경우 부자연스러운 띄어쓰기로 원 문자열의 의미가
         없어지고 문자열의 규칙적인 띄어쓰기가 보는 사람들에게는 불편할 수 있다.

결론 : word-break를 해야하는 긴 문자열에 강제적으로 띄어쓰기를 입력하되 띄어쓰기할 문자(white space)는         0px 사이즈의 문자열로 한다.


이것은 직접 사용해본 예제입니다. 

document가 onload가 되면 document 에서 name으로 word-break 엘리먼트를 찾아서
한번에 위의 예제처럼 사용하시면 가장 좋을 것 같구요.

그외에 일부분만 word-break해야한다 하면 wordBreak 메서드를 활용해

    '문자열'.wordBreak();

처럼 사용하시는게 좋겠네요.
신고
Posted by Rhio.kim