본문가기 메뉴가기 분류가기 하단가기

HIWEB :blog

‘디자인’으로 분류된 글들.

  1. 2009/04/30 UI/UX의 개발 프로페셔널 (1)
  2. 2009/03/11 인터랙션 디자인. 관대하게 디자인 하자 (2)
  3. 2009/02/28 크로스브라우징? CSS 핵은 왜?
다음글>

UI/UX의 개발 프로페셔널

본문 건너뛰기

“당신이 생각하는 디자인DESIGN이란 무엇입니까?

단순히 표현EXPRESSION인가요?
그렇다면, 구조STRUCTURE는 고려하였는지요?”

이상하게도 대한민국의 다수는 디자인이라는 용어의 개념을 잘못 이해하고 있는 것 같습니다. 디자인은 '생각하고 설계하여 제작하는 일'입니다. 단순하게 보기 좋으면 그만 이라는 생각은 접어서 주머니에 넣어두세요. 이 안에서 다루는 대부분의 내용은 구조 디자인입니다. 물론, 표현 디자인도 다루기는 합니다만, 현장에서 활약하는 여러분들에게 이미 표현력은 충분하다는 전제하에 이 과정은 만들어진 것이니까요.

이 안에서 표현력을 증강시킬 생각은 안 하시는게 좋을 거에요. 이 곳에서의 목표는 크로스 커뮤니케이션이니까요. 단편적인 사고를 벗어나 입체적인 사고를 할 수 있는 웹 구현자. 그것이 궁극의 목적이자 목표랍니다.

그런 사람이 되고 싶은 당신!

UX(User eXperience, 사용자 경험)과 UI(User Interface)의 차이는 인터렉션에 있습니다. UI는 기능 자체 즉 인터페이스만 고려한 것이고 UX는 인터페이스 설계를 할 때, 그 인터페이스에 대해 사용자가 어떻게 반응하고 사용하는 인터렉션까지 고려할 것이라 할 수 있습니다.

그래서 UX는 디자인 뿐만 아니라 사용자의 이용 행태를 캐치하여 디자인에 반영할 수 있는 안목이 필요합니다. 방망이 깍는 노인은 방망이질하는 아낙네의 인터렉션을 잘 이해하는 분이었을 겁니다.

UI (User Interface) 와 UX (User eXperience)

UI와 UX의 공통점은 무엇보다도 공급을 하는 쪽에서의 관점이 아니라 이를 사용하는 사용자의 관점에서 바라보고 있다는 것입니다. UI와 UX의 차이점은 UI는 사용자의 Need에 따른 Action의 편의성에 초점을 둔다면 UX는 이를 통하여 사용자가 느낄 수 있는 것에 초점을 둔다는 것이구요. 어떻게 보면 UI는 좀 더 이성적인 측면에 UX는 좀 더 감성적인 측면에 닿아 있을 수 있지만, 이 둘의 관계는 서로 완전히 분리되어 있다기 보다 동시에 발생합니다.

Action을 취하기 전에 인지단계에서도 사용자는 제품 및 서비스를 느낍니다. Action을 취하면서도 마찬가지이고 Action을 마쳤을 경우에도 마찬가지이죠.

헛! 댓글이 있어요

  1. EveR™2009/04/30 15:52

    대부분의 웹디자인 한다는 사람들은 겉으로 보이는건만 생각합니다.
    웹디자이너들의 사고방식이 좀 바껴서 퍼블리셔의 고민과 부담을 줄여주었으면 좋겠습니다. ㅠㅠ

댓글 남기기

인터랙션 디자인. 관대하게 디자인 하자

본문 건너뛰기

사람들이 컴퓨터를 이용해서 하는 작업은 언제나 쌍방향으로 상호작용하는(인터랙티브하다) 라고 말할 수 있습니다. 컴퓨터와 소프트웨어는 도구이며, 그 목적은 사람들이 언어, 숫자, 그림들과 상호작용을 하는 일을 돕는것이죠. 다만 요즘은 인터랙티브하다고 여겨지지 않았던 일, 예를 들어 책읽기, 보기, 오락과 같은 행위에 컴퓨터가 사용되고 있는 것입니다. 가장 중요한 것은 무엇을 보고 무엇을 무시하느냐의 결정을, 디자이너가 아닌 방문자들이 하고 있음을 뜻합니다.

인터페이스 디자인, 그러나 인터랙티브 디자인을 하나의 프로세서로 접근하면 생각만큼 복잡하지 않습니다.

정보 디자인

자신이 추구하는 커뮤니케이션 목표를 명확하게 하고, 그러한 목표를 만족시키는 디자인을 통해 자신의 아이디어를 표현하는 것을 의미합니다. 이미 존재하는것을 수도 있고, 완전히 새로운 것일 수도 있습니다.
어느 쪽이든간에, 정보 디자인부터 시작해야 합니다.

구조의. 보이지 않는. 손.

정보디자이너는 정보의 출입을 통제하는 존재입니다. 비록 이용자가 스스로 선택한다 할지라도, 그들이 맨 처음 보게 되는 것, 그들이 갈 수 있는 곳, 그리고 그들이 전혀 볼 수 없는 곳 등의 선택사항은 전부 여러분에 달려 있습니다.

당연한 사항 알고 있지만, 풀어 볼까요?

디자이너가 콘텐츠를 배열하는 것은 모든 정보 단위에 쉅게 도달할 수 있는 방법을 결정합니다. 그리고 이것을 좀더 쉽고 빠르게, 그리고 보다 직접적으로 하나이상의 토픽에 접근할 수 있게 만들다 보면, 필연적으로 하나의 관점을 만들게 됩니다. 하나의 관점을 부여하는 것이 전혀 나쁠 것이 없습니다. 디자이너의 관점은 종종 흥미 있는 것을 만들어 내기 때문이죠. 그런데 디자이너가 우선 순위를 암시하는 방법으로 토픽을 배열할때, 무의식적으로 편견을 만들어 낸다면 문제가 생기게 됩니다.

제발 콘텐츠의 부담좀 줄입시다!

메인 내비게이션은 콘텐츠로 가는 관문이기 때문에, 어떤 다른 화면보다 훨씬 더 자주 사용됩니다. 따라서 이 곳에 사용자가 한두 번 정도밖에 사용하지 않는 가정용 아이템으로 배치한다면, 문제가 생겨납니다. 내비게이션과는 아무런 관계가 없는 잡동사니들로 화면을 채워지는 꼴이 되겠죠.

관대하게. 만들어라.

인터페이스는 사람들이 예측하는 방식으로 작동할 경우에 한해 직관적이라고 말할 수 있습니다. 사용자들은 마우스를 클릭하면 어디로 가거나 어떤 장면을 보게 될 것이며, 똑같은 아이콘은 똑같은 기능을 할 것이라는 기대를 하죠. 잡다구리한 장애물들을 제거하고 직접적으로 콘텐츠와 상호 작용하도록 만드는 것. 마우스를 클릭했을때 딸깍 하는 컴퓨터 사운드보다 더욱 친절한 디자인.

혹시 이글을 보시는 분은 포토샵 기술 디자이너?

헛! 댓글이 있어요

  1. 이순재2009/03/18 03:23

    정보디자이너는 정보의 출입을 통제하는 존재라...

  2. 정환나라2009/03/26 01:27

    순재님// 예로 포털사이트의 뉴스 란을 들수 있지 않을까요? 결국은 통제가 되는거죠..

댓글 남기기

크로스브라우징? CSS 핵은 왜?

본문 건너뛰기

이 포스팅에서 언급하고 있는 CSS핵(hack)들은 대부분 옛날 브라우저들을 대상으로 한 것들이라 아마도 활용도가 그다지 높지 않으리라 생각하지만 해외사이트에 사용하고 있는 경우가 많으므로 알아두면 해외사이트를 분석할때도 상당히 도움이 되리라 생각한다. 또 CSS핵(hack)의 사용시 많은 주의를 기울여야 하며 CSS 문법상 맞지 않는 경우도 많으므로 주의하여야 한다. 일단 웹표준에 의한 사이트 제작이 익숙해지면 브라우저의 버그를 CSS핵이 아니라 CSS구조를 이용하여 회피하는 방법도 자연스럽게 익히게 되리라 생각한다. CSS핵은 정말 피치못한 경우에만 사용해야 한다.

Netscape 4 제외시키기

Netscape 4은 media속성값에 "screen"이외의 값이 올 경우 읽어 들이지 못하는 것을 이용한 방법이다.

<link rel="stylesheet" type="text/css" href="/css/style.css" media="all" />

<link rel="stylesheet" type="text/css" href="/css/style.css" media="screen, tv" />

라고 지정할 경우 Netscape 4은 읽어 들이지 못한다.

부분적으로 읽어들이지 못하게 하는 경우에는 Caio's hack인 /*/*/를 이용한다. 보통 코멘트는 */으로 닫지만 /*/으로 닫게 되면 Netscape 4에서는 인식되지 않는다. 그 뒤에 평상시의 코멘트 /* */를 적어두면 그 뒤의 스타일은 Netscape 4에서도 문제없이 적용된다.

p {/*/*/ color:white; /* */}

Mac IE 4.5, Netscape 4 제외시키기

@import룰로 url()함수를 이용하여 외부 스타일시트를 이중인용부호로 지정한다.

Mac IE 4.5는 @import에 url()함수를 이용하는 경우, 단일 인용부호와 인용부호가 없는 것이 아니면 읽어 들이지 못한다. Netscape 4은 @import를 지원하지 않는다.

@import url("/css/style.css")

Mac IE 5 제외시키기

CSS소스 안의 코멘트 서식을 /* \*/ 이라는 방식으로 기술한다. holly hack이라고 하며 그 뒤에 평상시의 코멘트 /* */를 적어두면 그 뒤의 스타일은 Mac IE 5에서도 문제없이 적용된다.

p {/* \*/ color:white; /* */}

Win IE 4~5 제외시키기

셀렉터 바로 뒤에 /**/라고 적는다.

p/**/ {color:white;}

Win IE 4~5, Mac IE 4.5~5 제외시키기

프로퍼티와 값을 구분하는 콜론(;) 앞에 코멘트에 스페이스를 포함하여 /* */라고 적는다.

p {color/* */:white;}

Win IE 4~6, Mac IE 4, Netscape 4 제외시키기

셀렉터 앞에 html>body를 붙인다.

html>body p {color:white;}

Win IE 6 제외시키기

프로퍼티와 값을 구분하는 콜론(;)의 앞에, 스페이스와 코멘트를 /**/라고 적는다.

p {color /**/:white;}

Star Hack

셀렉트 앞에 *html를 붙이면, Win IE 4~6, Mac IE 4~5 등에는 스타일이 적용되고, 그 외의 브라우저에서는 적용되지 않는다.

*html p { color:white; }

underscore hack

프로퍼티의 가장 앞부분에 언더스코어(_)를 붙이면, Win IE 4~6에서 스타일이 적용되고, 다른 브라우저에서는 적용되지 않는다.

p {_color:white;}

hash hack

프로퍼티의 앞에 샾(#)을 붙이면, Win IE 4~6, Mac IE 5, Opera 7, Mozilla, Firefox에서는 스타일이 적용되고, 다른 브라우저에는 적용되지 않는다.

p {#color:white;}

Star 7 Hack

셀렉트의 앞에 html*을 붙이면, Win IE 5.5~6, Mac IE 5, Safari 등에서 스타일이 적용되고, 다른 브라우저에서는 적용되지 않는다. html*과 셀렉터사이에 스페이스를 넣지 않는다.

html*p { color:white; }

xmlns Hack

속성셀렉터를 이용하여, html요소에 붙이는 xmlns속성을 스타일적용을 위하여 사용하는 방법.

Mozilla, Fire-fox, Opera 7/8, Safari 등 속성셀렉터를 서포트하는 브라우저에서는 스타일이 적용되고, 다른 브라우저에서는 적용되지 않는다.

html[xmlns] h1 {color:red;}

:root hack

셀렉터의 앞에 :root를 붙이면, Mozilla, Firefox, Mac IE 5, Safari 등 :root유사클래스를 지원하는 브라우저에만 스타일이 적용되고, 다른 브라우저에서는 적용되지 않는다.

:root h1 {color:red;}

Tantek box model hack

voice-family프로퍼티를 이용한 가장 유명한 박스모델핵.

div#content {width:500px; voice-family: ""}""; voice-family:inherit; width:400px;}

Win IE 5용 패스필터

@media tty { i{content:"";/*" "*/}}; @import '/css/style.css'; {;}/*";} }/* */

Win IE 5.5용 패스필터

@media tty { i{content:"";/*" "*/}}@m; @import '/css/style.css';/*";} }/* */

Win IE 5-5.5용 패스필터

@media tty { i{content:"";/*" "*/}}@import '/css/style.css';/*";} }/* */

모던브라우저용 패스필터

@import "null?"{"; @import "/css/style.css"; @import "null?"}";

이 이외에도 많은 핵(hack)이 존재한다. CSS Filters (dithered.com)에 다양한 CSS hack이 잘 정리되어 있으므로 참고하시길…

IE7에만 적용

*+html body

IE7를 포함한 모든 IE에만 적용하는 방법은

*+html body, * html body

IE7을 포함한 모던브라우저에 적용(IE6이하를 제외)

html>body

IE7을 제외한 모던브라우저에만 적용

html>/**/body

댓글 남기기

다음글>