나를 찾는 아이 - Simple is the best, Go to basic

http://www.windowshop.com/

 

아주 쉽고도 멋진 UX를 가진 아마존 윈도우샵 입니다.

아마존의 상품들을 키보드를 이용하여 쉽게 네비게이션할수 있도록 UX가 설계되어 있네요.

키보드의 상하좌우키를 사용하여 상품간의 이동이 가능하며

엔터키를 클릭하면 해당 상품의 상세보기가 됩니다.

상품 진열을 이렇게도 할수 있구나 라는 것을 보여주는 좋은 예입니다.

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

이미 포털에서는 사용자들을 직접 불러 특수한 장비를 이용해

사용자의 시각이 어떠한 순서로 정보를 훑어나가는지에 대해 분석하고

이 결과를 바탕으로 포털서비스내에서 정보와 광고의 배치를 고민합니다.


http://story.nhncorp.com/story.nhn?story_id=12







사용자들이 어떠한 순서로 정보를 인식하는지 그리고 어느 부분을 가장 주목해서 보는지 UI테스트를 하고 있지요.




이번에 여러분께 소개해드리는 이 서비스는

바로 이 작업을 시스템이 직접 이미지 패턴을 분석하여 어느부분이 가장 주목도가 높은지 분석해주는 서비스입니다.





어떠한 사진이든 이곳에 업로드를 하면

몇초간의 연산시간이 흐른후 내가 업로드한 이미지와 붉은색에서 부터 푸른색으로 표시된 영역이 함께 나타납니다.


빨간색은 말 그대로 주목도가 높다는 뜻이며 반면에 파란색은 주목도가 낮다는 의미 입니다.

얼마나 정확한지 몇몇 이미지를 테스트해본결과



이미지의 색상을 시스템이 인식하여 두드러져 보이는 색상에 주목도가 높다고 판단하는 것 같습니다.

그리고 텍스트와 사진이 함께 있는 이미지를 업로드 하면 사진에 주목도가 높다고 표시해줍니다.




실제 네이버를 비롯한 포털들이 하는만큼 정교하지는 않지만 흥미있게 한번쯤 해볼만한 서비스 입니다.

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

모든 디자이너가 해야할 9가지 CSS 원칙 이라는 나름 재미있는 포스팅이 올라와 번역하여 소개한다.


이미 웹개발 UI가이드는 국내에도 많이 소개되어있고

웹표준 강의시에도 항상 나오는 이야기이다.


또한 네이버UI가이드(http://html.nhndesign.com/)가 공개됨으로써

많은 분들이 이곳을 참고하고 있기도하다.


네이버 UI가이드 역시 100% 완벽하지 않다.

갑론을박해야할 요소도 있긴 하지만

이정도 분량의 꼼꼼한 가이드을 공개한것 역시 네이버가 한일중에서는 정말 칭찬할 만한 일이라고

생각한다.



1. 하위선택자 사용에 따른 들여쓰기

필자의 견해 :
하위선택자를 사용했을때 이에 맞춰 들여쓰기를 하면 훨씬 코드 보기가 수월해진다.
이미 대다수의 홈페이지에서 이렇게 사용하고 있는 것같다.



2. 그룹화와 CSS의 주석

필자의 견해 :
의미있는 CSS끼리 그룹화 시키고 보기 쉽게 주석처리
물론 모든 네이밍작업이 그렇지만 CSS 네이밍도 사람들마다 조금씩 다르다
어떤이는 영어를 그냥 발음나는대로 영어로 옮기는 사람이 있는 반면에
영단어를찾아서 쓰는 사람이 있고
아니면 영어동사까지 포함해서 쓰는 사람도 있고
영문네이밍은 정말 사람마다 다양하다 이때 주석으로 이 부분이 어디에 해당하는 부분임을 명시하면
좀더 보기 수월한 코드가 된다.


3. 스타일 선언은 한줄에

필자의 견해 :
물론 CSS 코드가 길어지면
한줄에 하나의 속성만 지정하는 방식은 괜한 공백을 많이 잡아먹어서
용량이 커지기 때문에 불필요하지만
확실히 한줄에 하나의 속성만 적어놓는것이 가독성이 좋을때가 많다
때에 따라 둘을 적절히 사용하는 센스가 필요하겠다.

4. css 파일의 분리

필자의 견해 :
이곳의 예제에서는 layout.css, typography.css 등으로 css 파일을 분류하였는데
물론 이런식으로 분류도 있겠지만
나는 메뉴섹션별로(우리나라의 웹사이트는 대게 섹션별로 공통되는 디자인이 많다)
CSS파일을 구분하여 사용한다


5. 엘리먼트 초기화

필자의 견해 :
브라우저마다 엘리먼트의 default style일 틀리므로 반드시 초기화 할것.

6. 사용되는 색상코드를 한곳에 모아 적어 둔다

필자의 견해 :
확실히 도움되는 정보다
해당 웹사이트에서 주로 사용되는 폰트명과 폰트사이즈 컬러셋을 모아놓고 이를 미리 정의해두면
색상 가이드라인이 확실해질수 있겠다

실제로 프로젝트 경험에 의해 특정 콘텐츠마다 각각의 색상과 폰트와 line-height, 마진을 가진 경우를 보았다.
예를 들면 A에 관한 콘텐츠는 어떤 폰트와 어떤 색상을 사용하며 하단에 마진값 얼마를 반드시 가져야 한다. 이런종류.
이럴때 해당 프로젝트에 처음 투입되는 사람은 그러한 규칙이 이미 있는지 인수인계를 못받았을 확률도 많다.
이때 이러한 규칙에 대해서 짤막하게(길게 주석으로 남긴다는 것은 절대 하지 말아야할것. 길게 주석을 적어 넣을바에야 차라리 ppt또는 문서 파일로 UI 가이드라인을 만드는게 낫다.) 적어 놓으면 갑작스럽게 관계자가 아닌사람이 UI를 수정한다거나 할때 좋은점도 있는 것 같다.




7. 의미있는 네이밍

필자의 견해 :
가장 중요하다
네이밍기법에 항상 언급되는 내용이지만
green 이라던지 left, right 등의 네이밍보다는
header, menu, nav, footer등의 의미있는 네이밍이 좋다.



8. 알파벳순서의 프로퍼티정의

필자의 견해 :
사실 나는 이부분은 찬성하지 않는다
자주쓰이는 속성 순서대로, 레이아웃에 영향을 많이 주는 순서대로 나열하는 것이
경험상 코드가독성에 아주 좋다.
알파벳순으로 나열하게 되면 정작 중요한 width같은 속성은 거의 맨뒤에 위치하게 되는데
이것보다는 중요한 순서대로 프로퍼티를 나열하는게 경험상 좋은것 같다.
필자는 display,position,float,width,height,padding,margin,border,background 순으로 사용한다
물론 이부분 역시 네이버UI가이드에서 사용빈도에 따른 프로퍼티 나열이 언급되어있다.



9. 유용한 css 클래스 유지

필자의 견해 :
유용한 css 클래스를 미리 정의하는 것은 아주 좋은 행위지만
이곳 예제에서는 width100이라던지 alignRight라던지
7번에서 언급한 의미있는 네이밍이 되어 있지 않다

필자는 clear라는 css클래스를 global css에 선언하는데
IE에서 clear:both시에 상단에 마진이 생기는 현상을 제거하기 위해

.clear {clear:both;height:0;line-height:0;font-size:0;}

이렇게 사용하고 있다.

현석님의 트랙백을 보고나니 내가 이 9번 문항에 대해서 잘못 코멘트한것 같다.
원본에서의 유용한 CSS의 클래스의 의미가 단순히 표현을 위한 width100, width75 이런 클래스가 유용한 클래스라고 말한것이라면 정말 절대 삼가해야할 것이다. 현석님 말대로 .mt10 {margin-top:10px;} 이런 클래스는 정말 삼가해야할 일이다. 이걸 클래스로 지정해서 사용하느니 인라인 스타일시트로 적용하는게 훨씬 나은 방법이다.
저는 유용한 클래스의 의미를 좀더 넓은 범위의 유용한 클래스(의미있는 네이밍이 되어있는 특정 콘텐츠 형식에 대한 클래스화)라고 잘못 해석하고 이해한것 같아서 추가 코멘트 남깁니다.




모두 아주 좋은 내용이다.

계속해서 HTML과 CSS를 사용하여 표현과 문서를 분리하는 곳이 많아졌다.

이런 중요한 개발방법론은 계속해서 공유되어져

새로 웹퍼블리셔가 되고싶은 사람들에게 많은 도움이 되었으면 좋겠다.

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

어떠한 웹서비스를 만들때라도 생각해야하는 점.

"사용자는 똑똑하지 않다."

기획자는 으레 이러한 실수를 범하기 쉽다.

자신이 기획한 내용이고 자신이 기획을 하면서 수십번 수백번 생각했던 부분이기 때문에

이런 자가당착에 빠진다. 사용자 = 자신

사용자는 이 서비스를 이용한 다음에 다음 동선이 어디로 이어지고 어디로 이어지고

이렇게 되서 이러한 행동을 취하거나 이러한 행동을 취할수 있고.... 어쩌구 저쩌구...

그거야 당신이 기획했으니 어디까지나 사용자가 그렇게 움직여주기만을 바라는 당신의 바람이다.

또한 사용자 역시 당신만큼의 웹서비스 사용경험을 가지고 있다는 사실도 깔려있다.

사용자가 우리 웹서비스에 처음 접하게 되면 이걸 클릭해보겠지?

라고 생각하는것. 그것을 왜 클릭하지? 아니 그것을 왜 클릭 안하죠? 이런 소모적인 싸움에 말리고 싶지는 않다.

웹서비스를 많이 사용해 본 사람은 그만큼의 사용경험이 축적되어있기때문에

다른 사이트역시 별다른 어려움없이 항해항수 있다.

대표적인 예로 좌측상단에 있는 로고를 클릭하면 메인홈페이지로 이동한다는 것.

1 2 3 4 5 로 표기되는 게시판의 페이징 부분도

게시판을 이미 많이 접해본 우리야 이게 게시판의 페이징 부분이라는 것을 쉽게 알겠지만

게시판이라는 존재를 처음 접해본 사람은 1 2 3 4 5 이게 갑자기 무엇인가 하는 느낌을 받을 것이다.

우리는 게시판 밑에는 글쓰기, 삭제, 수정버튼이 존재할 것이라고 믿고 있고 그렇게 행동하고 있다.

물론 그러한 익숙한 UI 구성이 올바르긴 하다.

사람들은 낯선환경보다는 익숙함을 원하는 경향도 그렇기도 하고.

그리고 스팸로봇을 막기위한 사용자에게 특정값을 입력하는 행위도

그 행위를 처음 접하는 사람은 이게 뭐하는 짓인가 어리둥절하는 경우가 많다.

우리 어머니는 다음카페를 이용하려는데 54와 32중 큰수를 묻는 질문에 당황하여

이게 뭔가해서 다음카페를 전혀 이용못하고 있다.

우리 아버지는 인터넷을 하다가 어떤 사이트 들어갔는데 팝업창이 떠버리면

내가 뭐 잘못만진거 아닌가 하고 겁먹고 그 사이트에 다시 절대 안들어가신다.


언제나 훌륭한 웹서비스를 만들때는 사용자는 서비스를 만드는 자신만큼 똑똑하지 않다는 사실을 명심하자.

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.