Sooool's studysooool

매체별 디자인 제작 및 표준화 매체별 디자인 픽셀(pixel) 픽셀(pixel)은 picture element의 약자로, 디지털 이미지를 이루는 가장 작은 단위의 사각형 점을 의미한다. picture(그림)와 element(원소)를 합성한 단어이기 때문에, 우리나라에서는 ‘화소(畫素)’라 부르기도 한다. 해상도 해상도란 그래픽 화면을 표시하는 장치의 정밀도, 즉 화면을 구성하는 픽셀(pixel) 수를 의 미한다. 예를 들어 1,024*768 크기의 이미지는 가로 1,024개, 세로 768개의 픽셀로 구성되 58 는 것이다. 해상도를 나타내는 단위로 PPI를 사용한다. PPI는 pixel per inch의 약자로, 모 니터 등 디스플레이 장치의 가로 세로 1인치 면적 안에 몇 개의 픽셀이 들어갔는지에 대 ..

UX(user experience, 사용자 경험) UX(user experience), 즉 사용자 경험이란 사용자가 제품이나 시스템을 이용하면서 얻게 되는 느낌이나 생각 등을 포함한 모든 측면에서의 총체적 경험을 의미한다. 여기서의 경 험은 단순히 지각적 경험만을 의미하는 것이 아니라, 지각 전반에 걸쳐 사용자가 참여하 고 사용하고 관찰하며 상호 교감을 통해 누적되는 가치 있는 경험을 의미한다. 사용자 경 험은 제품·시스템에 대한 사용자의 느낌과 생각에 관한 것이기 때문에 본질적으로 주관 적 특성을 지닌다. 사용자 경험의 목표는 사용자의 요구에 부합하는 제품·시스템을 제공 함으로써 사용자에게 긍정적 경험을 만들어내는 것이다. UX 관련 영역 사용자 경험은 제품·시스템에 대한 사용자의 느낌과 생각에 관한 ..

UI 구성 요소 제작 UI 제작의 원칙 인터페이스(Interface)란 두 개체가 만나는 접점에서 상호 간의 소통을 위하여 만들어진 매 개체, 즉 소통하는 통로를 의미한다. 특히 사용자와 디지털 기기·디지털 시스템이 상호작 용할 수 있도록 하는 물리적·가상적 매개체를 사용자 인터페이스(UI, User Interface)라고 하는데, 사용자가 디지털 기기·시스템을 조작할 수 있게 하는 ‘입력장치’와 사용자가 입력한 것의 결과를 표시하는 ‘출력장치’로 구성된다. 사용자 인터페이스를 제작하기 위해 고려해야 하는 원칙은 다음과 같다. 메타포(Metaphor) 메타포는 ‘은유’, ‘비유’를 뜻하는 말로, UI에서의 메타포란 휴지통이 ‘문서 삭제’, 폴더가 ‘문서보관’을 의미하는 것처럼 시스템에서 표현하고자 하는 ..

심미적 요소 표현 인간은 주변의 데이터나 언어 등의 정보를 시각적 요소로 변환하여 생각하는 특징을 지니 고 있다. 따라서 정보의 시각화를 통하여 정보를 효율적이고 직관적으로 이해할 수 있도록 구성하는 것이 중요하다. 시각화 시각화(visualization)란 언어나 수치로만 된 정보를 마음속에서 그림이나 이미지 등의 형태 로 바꾸어 사고하는 과정을 뜻한다. 특히, 정보의 시각화는 사용자가 보다 효율적으로 정 보를 찾거나 이해할 수 있도록 정보의 의미와 상호 관계를 그래프, 이미지, 일러스트레이 션, 색, 타이포그래피 등의 그래픽 요소로 나타내는 과정을 의미한다. 정보를 시각화하면 사용자가 정보를 직관적으로 이해할 수 있을 뿐만 아니라 한 번에 많 은 데이터를 보여 줄 수 있고, 각 정보들의 관계나 차이를..

스토리보드 작성 스토리보드 웹에서의 스토리보드는 웹 사이트 개발에 있어서 중요한 설계도이자 구체적인 작업 지침 서로, 각 화면에 대한 정의와 구성, 내용, 기능, 서비스 흐름을 상세하게 설계하고 정의한 문서이다. 와이어 프레임이 화면의 구조와 흐름을 파악하거나 전체 구조를 조감하기 위해 비교적 단순화한 작업인 반면, 스토리보드는 각 화면의 흐름이 자세히 포함된 작업이다. 스토리보드의 완성은 기획 단계의 마무리를 의미하는데, 스토리보드에 명시된 내용을 토 대로 디자이너는 시각 인터페이스를 디자인하고, 프로그래머는 프로그램을 설계하고 세부 적인 코딩을 진행하게 된다. 스토리보드 작성 스토리보드는 대개 표지와 개정 이력, 공통 요소 정의, 정보 구성도, 서비스 흐름도, 화면 설계의 순으로 작성하며, 프로젝트 ..

와이어 프레임 작성 와이어 프레임 와이어 프레임(wire frame)이란 실제로 디자인을 진행하기 전에 화면에 표시될 구성, 정보 체계, 기능, 콘텐츠에 대한 전체적 레이아웃을 간단한 선(wire)으로 단순하게 표현한 스케 치를 의미하며, 색상, 타이포그래피, 이미지 등의 정보를 최소화하여 도식(schematic), 청사 진, 프로토타입(prototype) 형식으로 보여 줄 수 있다. 와이어 프레임은 그래픽 요소나 시 각적 요소의 표현보다는 계층 요소의 구현을 중심으로 표현해야 한다. 와이어 프레임 작성 와이어 프레임을 작성할 때에는 웹 브라우저, 모바일 웹 등 다양한 매체의 화면 비율을 고려하여 작성하며, 콘텐츠의 세부 내용과 디자인적 요소는 최대한 배제하고 대략적인 페 이지를 스케치한다. 이전 모듈에..

레이아웃 레이아웃이란 전체적인 디자인 콘셉트와 계획에 따라 서체와 이미지 등 각각의 시각적 요 소들을 한정된 공간 안에 적절하게 배치하는 것을 의미하는 것으로, 인터페이스 디자인에 서 레이아웃이란 화면의 전체적인 구도를 파악하고 심미적 요소들을 화면에 배치하는 것 을 의미한다. 1. 그리드 시스템을 활용한 레이아웃 그리드란 같은 간격으로 배치된 수직·수평의 가상의 선, 즉 격자로 된 가이드라인을 의 미하며, 그리드를 이용하여 디자인 요소들을 조화롭게 구성하고 배치하는 레이아웃 기법 을 그리드 시스템(Grid System)이라고 한다. 그리드는 가로 선을 로(Row), 세로 선을 칼럼(Column)이라고 하며, 로와 칼럼이 겹쳐지는 사 각형을 모듈(Module)이라고 한다. 시각적 요소들은 각 모듈, 혹은..

메가박스 사이트 제작하기(5) [HTML] 메가박스 전체메뉴 영화 큐레이션 영화관 특별관 스토어 이벤트 로그인 배너 영역 전체메뉴 필름 소사이어티 클래식 소사이어티 고객센터 멤버쉽 VIP 상영시간표 빠른예매 어벤져스 : 앤드게임 역대 최단 기간 1000만 관객 돌파 기록 어벤져스 : 앤드게임 역대 최단 기간 1000만 관객 돌파 기록 어벤져스 : 앤드게임 역대 최단 기간 1000만 관객 돌파 기록 [style] @charset "utf-8"; /* 레이아웃 */ #mNav {display: none; position: absolute; top: 10px; right: 14px;} #header {width: 100%; border-bottom: 1px solid #c6c6c6;} #banner {posi..

메가박스 사이트 제작하기(4) [HTML] 메가박스 전체메뉴 영화 큐레이션 영화관 특별관 스토어 이벤트 로그인 배너 영역 전체메뉴 필름 소사이어티 클래식 소사이어티 고객센터 멤버쉽 VIP 상영시간표 빠른예매 [sytle] @charset "utf-8"; /* 레이아웃 */ #mNav {display: none; position: absolute; top: 10px; right: 14px;} #header {width: 100%; border-bottom: 1px solid #c6c6c6;} #banner {position: relative;} /* container */ .container {position: relative; width: 1280px; margin: 0 auto; background: ..