본문 바로가기

기획 연재

[직장용어사전] 3편. 웹디자이너라면 필수로 알아야 할 디자인 용어 알아보기

 

안녕하세요! 신도리코 블로그에서는 매달 기획 시리즈 <직장용어사전>을 연재하고 있습니다. 이 코너는 실제 그 직군에서 근무하는 실무자, 관계자 혹은 해당 직군으로 취업을 희망하는 취준생분들을 위해 준비한 것으로 그 분야에서 자주 사용하는 기본 용어들을 소개해 드리고 있는데요. 지난 달 마케팅 편에 이어서 이번 달은 웹디자인 분야의 대표적인 용어들을 함께 살펴보겠습니다.

 

웹디자인 기본 용어

 

 

UX(User Experience) 디자인

 

‘UX디자인’은 웹디자인에서 가장 많이 사용되는 용어 중 하나입니다. User Experience라는 단어 자체에서 파악할 수 있듯이 사용자(user)가 서비스나 제품을 직/간접적으로 사용하면서 느끼고 생각하는 총체적 경험을 말하는데요. 웹을 사용할 때 가장 먼저 그리고 자주 사용하는 화면 등을 분석해 가장 효과적인 디자인을 구상하는 것이죠. 이처럼 사용자가 웹에서 경험하게 될 전반적인 요소를 고려한 디자인 작업을 ‘UX디자인’이라고 칭합니다.

 

UI(User Interface) 디자인

 

UI 디자인은 앞서 말씀드린 UX디자인과 혼동하는 경우가 많은데요. UX가 사용자의 경험을 총체적으로 고려한 디자인이라면 UI는 사용자가 웹을 사용할 때 시각적으로 접하는 화면의 디자인을 의미합니다. 웹사이트 혹은 모바일 앱의 아이콘, 위젯, 헤더 등등 각종 다양한 요소의 디자인을 총칭하는 것이죠.

 

반응형 웹: Responsive Web

 

같은 내용을 담고 있는 웹페이지라도 PC와 태블릿, 모바일에서 보여지는 화면이 각각 다릅니다. 같은 PC로 보더라도 창의 크기에 따라 화면 구조가 자동으로 변하기도 하고요. 이처럼 단말기와 화면에 따라 최적화되어 화면이 변하는 웹 페이지를 ‘반응형 웹’이라고 합니다. 최근 스마트폰, 태블릿PC를 비롯해 다양한 IT기기가 인기를 끌고 있는 만큼 각 화면의 크기에 따라 사용자의 편의를 고려한 최적화된 ‘반응형 웹 디자인’이 필요하겠죠?

 

웹 화면 구성 요소

 

 

GNB: Global Navigation Bar

 

GNB는 웹사이트를 방문한 사용자의 이동 경로를 하이퍼링크 형태로 모아 보여주는 내비게이션 시스템을 말합니다. 웹사이트에 접속했을 때 메인 페이지에 보여지는 대표 메뉴라고 생각하면 되죠. 방문자의 이동 경로를 하이퍼링크 형태로 모아 방문자가 원하는 정보를 바로 이동할 수 있도록 직관적으로 디자인하는 것이 중요합니다.

 

LNB: Local Navigation Bar

 

LNB는 GNB의 하위 메뉴라고 보면 되는데요. GNB가 대분류라고 하면 LNB는 중분류/소분류라고 할 수 있습니다.

 

헤더: Header

 

헤더는 명칭에서 추측할 수 있듯이 웹페이지에 접속했을 때 가장 상단에 보이는 메인 화면을 의미합니다. 웹사이트의 성격에 맞게 로고가 들어갈 수도, 모델 이미지, 제품 이미지 등이 들어갈 수도 있는데요. 웹디자이너는 해당 사이트의 정체성을 확연히 드러내고 방문자의 이목을 끌 수 있는 디자인을 하는 것이 중요합니다.

 

푸터: Footer

 

헤더가 상단 화면이었다면 푸터는 가장 하단 화면입니다. 회사 웹페이지라면 회사 대표자명, 주소, 문의처 등의 정보와 소셜 링크 등이 배치되겠죠?

 

웹 화면 구현 요소

 

 

레이아웃: Layout

 

레이아웃은 웹 화면에 들어가는 모든 구성요소들의 전반적인 배치를 의미합니다. 한 화면에 보여지는 페이지 공간은 한정적일 수밖에 없죠. 따라서 디자인을 할 때 그 공간 안에서 어떻게 하면 중요 요소들을 효과적으로 배치할 지에 대한 고민이 필요합니다.

 

그리드: Grid

 

그리드는 레이아웃을 구현할 때 이용하는 격자인데요. 우리가 원고지에 글자를 쓸 때 칸 안에 깔끔하게 맞춰 쓰는 것처럼 그리드를 기반으로 화면 구성 요소들을 배치했을 때 웹 페이지의 시각적 질서와 일관성을 유지시켜야 합니다. 평소 스마트폰 화면에 위젯을 배치할 때를 생각하면 그리드의 개념을 쉽게 이해할 수 있습니다.

 

목업: Moke up

 

목업은 디자인 전반적으로 사용하는 용어이기도 한데요. 실제 디자인이 나오기 전에 가상으로 구현해 놓은 작업을 말합니다. 목업을 보고 앞으로 어떻게 웹 화면이 디자인이 될 지 미리 확인할 수 있죠. 많은 직장인 분들께서 PPT작업을 할 때 무료 기본 템플릿 사이트를 참고하시는 것처럼 디자인 작업을 위한 목업 사이트도 있습니다. 아래 몇 가지 목업 사이트 링크도 함께 소개해드립니다😊

 

- Pixeden (사이트 바로가기)
- Mockupworld (사이트 바로가기)
- FDR (사이트 바로가기)

 

 

지금까지 웹디자인 관련 다양한 용어들을 살펴봤는데요. 평소 별 다른 생각없이 접속했던 웹 사이트와 모바일 앱의 작은 부분 하나하나가 사용자를 생각한 디자인으로 이루어졌다는 사실을 알게 된 것 같습니다. 다음시간에도 더욱 유용한 <직장용어사전>으로 돌아오겠습니다!