HAUEN

웹디자인 기능사/디자인 구성요소 제작

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

2020. 1. 8.

웹디자인 기능사/디자인 구성요소 제작

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

2020. 1. 8.

웹디자인 기능사/디자인 구성요소 제작

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

2020. 1. 2.

웹디자인 기능사/디자인 구성요소 제작

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

2019. 12. 31.

웹디자인 기능사/디자인 구성요소 제작

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

2019. 12. 30.

웹디자인 기능사/디자인 구성요소 제작

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

2019. 12. 30.