UI 기획은 기호학적 의사소통을 만드는 작업.

"당신의 H는 무엇입니까?"

수업시간에 이런 주제로 얘기를 나눈적이 있습니다.
임권택에게 H는, 윤도현에게 H는..,

위의 카피는 현대건설의 힐스테이트 광고에 나오는 메인 카피입니다.
'HillState'라는 단어가 갖는 어휘적인 의미는 우선 '부유층이 사는 동네'를 말하고, 로고로 사용되는 "H" 역시 "부유함"을 상징하듯" 전체적인 이미지가 고급스럽게 만들어졌습니다.

아파트를 구경하지 못한 소비자들에게 공간의 고급스러움과 편안함, 만족감을 전달하는 것이 바로 이 광고의 목적입니다. 로고를 비롯하여 임권택이 거니는 대나무 숲, 광고에 깔린 바탕의 색채, 그리고 등장인물...모두다 "고급스럽움"과 편안함을 부각시키기 위한 기호로 사용되고 있습니다.

광고가 스크린에 의미를 담아 미래의 소비자에게 메세지를 전달하는 과정이었다면 UI 기획은 소비자와 대화를 나눌 수 있는 공간을 사이트에 담는 것입니다. 그것은 이미지를 배치하는 과정이 아니라 개념을 심는 과정입니다. UI기획은 사용자와 대화를  준비하는 작업이기때문에 광고보다 더욱 복잡한 작업이 될 것입니다.

웹페이지는 공간과 형태,정의어라는 추상적인 언어를 사용합니다.
추상적인 언어기재는 소통의 기호론적 연관성을 여전히 가지고 있는 복잡하고 난해한 부분입니다.

사용자가 접하는 페이지에 우리는 전달하고자 하는 내용을 사용자의 목적획득을 위해 배치해야 하고,
만족했을 경우와 그렇지 못한 경우를 위한 또다른 대화의 창구를 열어두어야 합니다.

이런 대화가 끊이지 않기 위해 명확한 의미와 목적전달이 되어야 하며 사이트메뉴와 함께 그 안에 어떤 내용이 담겨있는지 색채와 이미지 ....공간의 배치, 여백 등을 통해 소통의 기호론적 연관성을 갖는 창구를 가져야 합니다.

"직관성, 일관성, 다양성, 체계성, 적절성, 효율성, 명확성"을 담아봅시다.

 
1) 정보구조
 ① 사용자 멘탈 모델에 부합하는 메뉴 구조
 ② 메뉴 간 균형이 맞는 컨텐츠의 계층 구조
 ③ 메뉴 간 구성 기준이 명확한 메뉴 구조
 ④ 상/하위 메뉴간 관계 및 컨텐츠 내용이 드러나는 레이블링

2) 네비게이션 & UI
 ① UI 가이드 적용
 ② 각 메뉴 depth 별 네비게이션의 유형화 및 일관적인 적용

3)링크
 ① 각 요소별 링크 대상의 단일화 및 일관적인 적용 
 ② 사용자가 링크로 인식하는 요소에 대해 링크 제공
 ③ 불필요한 중간 페이지로의 경유 배제

4)비쥬얼 디자인
 ① 각 요소별 폰트에 대한 스타일 정의 및 일관적 적용
 ② 링크 관련 폰트에 대한 스타일 정의 및 일관적 적용
 ③ 그래픽스타일 정의 및 일관적 적용

5)팝업
 ① 사용자 기대에 부합하는 피드백 제공
 ② UI 가이드 적용

(예제를 하나 들면 좋겠는데, 이미지작업하기 되게 힘들군요 ㅡ.,ㅡ)


[Appendix] howling님 댓글을 보고 추가로 붙입니다..ㅋ

센스 CF의 주인공 임수정씨..
이 사진을 보면 무엇이 떠오르시나요?

"디지탈 유목민"

유목민 스탈의 헤어.
유목민은 자기 소유의 모든 것을 들고 다니죠.

과거에는 정보의 서술이 책을 통해 이루어졌다면 이젠 디지탈기기를 통해 이뤄집니다.
책은 어딘가에 두고 다녀야 했다면 이젠 센스라는 노트북 하나를 갖고 있다면 나의 모든 정보를 들고 어디로든 떠날 수 있습니다.