UX 구성 요소 적용 UX(user experience, 사용자 경험) UX(user experience), 즉 사용자 경험이란 사용자가 제품이나 시스템을 이용하면서 얻게 되는 느낌이나 생각 등을 포함한 모든 측면에서의 총체적 경험을 의미한다. 여기서의 경 험은 단순히 지각적 경험만을 의미하는 것이 아니라, 지각 전반에 걸쳐 사용자가 참여하 고 사용하고 관찰하며 상호 교감을 통해 누적되는 가치 있는 경험을 의미한다. 사용자 경 험은 제품·시스템에 대한 사용자의 느낌과 생각에 관한 것이기 때문에 본질적으로 주관 적 특성을 지닌다. 사용자 경험의 목표는 사용자의 요구에 부합하는 제품·시스템을 제공 함으로써 사용자에게 긍정적 경험을 만들어내는 것이다. UX 관련 영역 사용자 경험은 제품·시스템에 대한 사용자의..
UI 제작의 원칙 인터페이스(Interface)란 두 개체가 만나는 접점에서 상호 간의 소통을 위하여 만들어진 매 개체, 즉 소통하는 통로를 의미한다. 특히 사용자와 디지털 기기·디지털 시스템이 상호작 용할 수 있도록 하는 물리적·가상적 매개체를 사용자 인터페이스(UI, User Interface)라고 하는데, 사용자가 디지털 기기·시스템을 조작할 수 있게 하는 ‘입력장치’와 사용자가 입력한 것의 결과를 표시하는 ‘출력장치’로 구성된다. 사용자 인터페이스를 제작하기 위해 고려해야 하는 원칙은 다음과 같다. 메타포(Metaphor) 메타포는 ‘은유’, ‘비유’를 뜻하는 말로, UI에서의 메타포란 휴지통이 ‘문서 삭제’, 폴더가 ‘문서보관’을 의미하는 것처럼 시스템에서 표현하고자 하는 대상을 사용자의 경 험..
심미적 요소 표현 시각 인터페이스의 심미적 요소 인간은 주변의 데이터나 언어 등의 정보를 시각적 요소로 변환하여 생각하는 특징을 지니 고 있다. 따라서 정보의 시각화를 통하여 정보를 효율적이고 직관적으로 이해할 수 있도 록 구성하는 것이 중요하다. 시각화 시각화(visualization)란 언어나 수치로만 된 정보를 마음속에서 그림이나 이미지 등의 형태 로 바꾸어 사고하는 과정을 뜻한다. 특히, 정보의 시각화는 사용자가 보다 효율적으로 정 보를 찾거나 이해할 수 있도록 정보의 의미와 상호 관계를 그래프, 이미지, 일러스트레이 션, 색, 타이포그래피 등의 그래픽 요소로 나타내는 과정을 의미한다. 정보를 시각화하면 사용자가 정보를 직관적으로 이해할 수 있을 뿐만 아니라 한 번에 많 은 데이터를 보여 줄 수 ..
스토리보드 작성 스토리보드 웹에서의 스토리보드는 웹 사이트 개발에 있어서 중요한 설계도이자 구체적인 작업 지침 서로, 각 화면에 대한 정의와 구성, 내용, 기능, 서비스 흐름을 상세하게 설계하고 정의한 문서이다. 와이어 프레임이 화면의 구조와 흐름을 파악하거나 전체 구조를 조감하기 위해 비교적 단순화한 작업인 반면, 스토리보드는 각 화면의 흐름이 자세히 포함된 작업이다. 스토리보드의 완성은 기획 단계의 마무리를 의미하는데, 스토리보드에 명시된 내용을 토 대로 디자이너는 시각 인터페이스를 디자인하고, 프로그래머는 프로그램을 설계하고 세부 적인 코딩을 진행하게 된다. 스토리보드 작성 스토리보드는 대개 표지와 개정 이력, 공통 요소 정의, 정보 구성도, 서비스 흐름도, 화면 설계의 순으로 작성하며, 프로젝트 ..
와이어 프레임 작성 와이어 프레임의 개념 와이어 프레임(wire frame)이란 실제로 디자인을 진행하기 전에 화면에 표시될 구성, 정보 체계, 기능, 콘텐츠에 대한 전체적 레이아웃을 간단한 선(wire)으로 단순하게 표현한 스케 치를 의미하며, 색상, 타이포그래피, 이미지 등의 정보를 최소화하여 도식(schematic), 청사 진, 프로토타입(prototype) 형식으로 보여 줄 수 있다. 와이어 프레임은 그래픽 요소나 시 각적 요소의 표현보다는 계층 요소의 구현을 중심으로 표현해야 한다 와이어 프레임 작성 와이어 프레임을 작성할 때에는 웹 브라우저, 모바일 웹 등 다양한 매체의 화면 비율을 고려하여 작성하며, 콘텐츠의 세부 내용과 디자인적 요소는 최대한 배제하고 대략적인 페 이지를 스케치한다. 이전 ..
레이아웃 레이아웃이란 전체적인 디자인 콘셉트와 계획에 따라 서체와 이미지 등 각각의 시각적 요소들을 한정된 공간 안에 적절하게 배치하는 것을 의미하는 것으로, 인터페이스 디자인에서 레이아웃이란 화면의 전체적인 구도를 파악하고 심미적 요소들을 화면에 배치하는 것을 의미한다. 시각적 인터페이스의 레이아웃을 결정하는데 있어서의 핵심은 정보의 분류와 위계, 체계등의 정보 설계, 즉 콘텐츠 구조이다. 레이아웃을 구성할 때에는 그리드가 명확해야 하며, 페이지 간의 일관성이 뛰어나 사용자 가 어떤 페이지에 머물든지 간에 원하는 정보를 빠르게 찾을 수 있어야 한다. 그러나 모든 페이지가 일관적이기만 하면 페이지의 인상이 지루해질 수 있기 때문에 일관성을 유지하면서도 약간의 변화와 다양성을 줄 수 있어야 한다. 레이아웃..
디자인 가이드 구성 서비스, 제작물의 통합적이 아이덴티티를 고려하여 디자인 가이드를 조합할 수 있다. 콘셉트와 트랜드 디자인 리서치(Design Research) 디자인을 기획하기 전에 과학적 연구의 방법과 도구를 기반으로 자료를 수집하고 분석하는 활동이다. 영국 왕립예술대학의 크리스토퍼 프레이링(Sir Christopher Fryling) 경은 디자인 리서치를 3가지의 중요 분류로 제안하였다. 디자인에 투입되는 리서치 : 전통적이고 역사적이며 심미적인 디자인과 예술에 대한 연구 활동을 말한다. 디자인을 통한 리서치 : 전통적이고 역사적이며 심미적인 디자인과 예술에 대한 연구 활동을 말한다. 디자인을 위한 리서치 : 앞서 연구된 활동의 가치를 증명하는 활동을 말한다. 비주얼 콘셉트(Visual Conce..
웹디자인 정보 정보디자인(Information Design), 유저 인터페이스 디자인(User Interface Design), 그래픽 디자인(Graphic Design), 컴퓨터그래픽(Computer Design) 운영 등 필요 지식을 기반으로 정보를 계층화하고 설계해야한다 웹 디자인의 정보 종류 디지털 콘텐츠를 기반으로 사용자에게 전달되는 정보는 다음과 같다. 구체적 사실(Facts): 실제의 사실을 말하며, 특별한 설명이 없어도 이해할 수 있는 구체적인 정보 개념(Concept): 대상을 이해하기 쉽도록 나타내는 정의 절차(Procedures): 순차적으로 진행되어야하는 과정에 대한 정보 과정(Process): 특정한 주제를 전달되는 원리에 대한 정보 웹 디자인의 정보 구조화 체계화된 정보 체계를 ..