웹 디자인 이론 STEP 01.

 

웹디자인 이론 STEP 01. 에서는 UX Design과 UI Design디자인 용어에 대한 정리와 각 디바이스 환경에 따라 어떻게 구분되는지, 마지막으로는 우리가 매일 접하는 웹사이트의 구성에 대해 간단하게 정리해봤습니다. 실무나 교육기관에서 배운 내용을 기반으로 작성하는 글로 잘못된 내용이 포함될 수 있습니다.

 

 

UX 디자인이란?

UX(User eXperience)란 사용자가 시스템, 서비스, 제품과 상호작용하면서 얻는 모든 측면의 경험(감정, 느낌, 생각)을 의미한다. 총체적인 경험을 UX라고 하며 컨설팅 기획이라고도 한다.

 

UI 디자인이란?

UI(User Interface)란 사용자와 서비스가 만나는 접점을 말하며, 디자인적인 측면을 말한다. 온라인으로도 사용자들에게 콘텐츠를 제공하고 사용할 수 있도록 웹사이트를 구축하고 있다. 의뢰되어 온 기획을 파악하고, 각 회사의 전략적인 측면과 아이덴티티를 파악해서 디자인할 수 있어야 한다.

 

디바이스 환경에 따른 구분

1. PC 웹 사이트(Desktop Device Design)

PC 화면에서 보이는 웹 해상도(72 dpi)를 기준으로 제작하는 사이트를 말한다. 웹사이트의 기본형태이며, 가장 많이 디자인되고 있다.

모바일 디바이스로 접속하는 경우 사이트가 축소되어 보이기 때문에 모바일 전용 사이즈로 따로 제작해야 한다.

 

2. 모바일 웹 사이트(Mobile Device Design)

모바일 디바이스에서 보이는 웹사이트이며, 경우에 따라 태블릿 PC에서 보이는 것 까지도 모바일 사이트에 포함 시키기도 한다. 통상적으로 우리가 사용하고 있는 아이폰이나, 갤럭시 등과 같은 모바일 디바이스에서 보이는 모든 화면을 의미한다.

 

3. 반응형 웹 사이트(Responsive Web Design)

브라우저 화면 크기에 맞춰 반응하며 모바일 화면과 PC 화면에 따라 디자인과 레이아웃이 변화하는 것을 말한다. 즉, 하나의 웹사이트가 PC에서 Tablet을 거쳐 Mobie까지 모든 디바이스에서 최적화되어 보이도록 구축하는 형태이다. 사이즈만 작아지는 것이 아니라 그 특성에 게 보기 좋은 형태의 디자인으로 화면이 전환된다.

 

4. 적응형 웹 사이트(Adaptive Web Design)

반응형처럼 다양한 디바이스에 대응하는 구축 형태지만, 정해진 해상도에 맞춰서 화면이 구성되는 기술이다. 쉽게 말해서 브라우저가 미리 정해놓은 범위 사이즈에 따라 레이아웃이 맞춰져서 보이는 것이다.

 

 

UI 설계 디자인 레이아웃

UI는 사용자와 서비스가 만나는 접점이며, 서비스의 가치를 사용자에게 명확하게 전달할 수 있는 형태로 표현하는 영역이다.

 

Web Page Design Layout 예시 이미지

 

 

1. Top Menu(General Menu)

최상단에 위치한다. 개인 로그인, 국가 언어 변경, 사이트맵 등의 메뉴로 이루어져 있는 영역을 말한다.

 

2. GNB(global Navigator Bar)

사이트 콘텐츠를 카테고리로 구분하는 최상위 메뉴를 말한다.

 

3. Main Visual Area

기업 이미지, 사업 홍보 이미지, 아이덴티티, 프로모션... 등의 메인 비주얼로 이루어진 영역을 말한다.

 

4. Rolling Button

메인 비주얼의 콘텐츠를 여러 장 노출시키기 위한 버튼 영역을 말하며, 사용자가 직접 구동 가능하다.

 

5. Change Button

콘텐츠 화면의 전환을 도와주는 구성요소를 말하며, 좌우 버튼으로 지정된 영역을 말한다.

 

6. Contents Area

사이트의 목적에 맞춰 중요한 콘텐츠를 메인 페이지에 노출시키기 위한 영역을 말한다.

 

7. Link Button

다른 페이지로 연결해주는 구성요소를 말하며, 보통 지정한 서브페이지로 넘어가게 된다.

 

8. Footer

사이트의 최하단부를 지칭하며 보통 기업의 주소, 전화번호, 권리표기 등 회사의 정보와 여러 인증마크를 삽입하는 영역으로 사용한다.

 

9. Quick Menu

사용자들의 편의를 위해 홈페이지의 주요 기능들의 링크를 노출시켜 놓은 일정 영역을 지칭한다.