본문 바로가기

웹디자인 용어 - XD 기초 강좌

DESIGN/WebDesign & App 2022. 8. 7.

웹디자인 용어

웹디자이너 및 웹기획자를 위한 웹디자인 용어 강좌입니다. 어도비 XD를 배우기 앞서 웹디자인 용어를 알고 가면 다음 강좌에 큰 도움이 됩니다. 


1)GNB 글로벌 네비게이션 바의 준말입니다.  웹사이트 최상위 메뉴가 존재하는데, 웹사이트 전체에 공통으로 노출되는 메뉴를 일컬어 이야기합니다. 필요에 따라 로그인 버튼과 검색 버튼이 같이 노출되기도 합니다. GNB만 봐도 사이트의 특성을 알 수 있습니다. 

2)LNB
로컬 네이게이션 바의 준말입니다. GNB 메뉴의 하위 메뉴를 나타냅니다. 클릭하면 서브페이지로 이동하겠죠? 

3)레이어팝업 
시선을 잡기 위해 브라우저 새창으로 열리는 팝업을 지양하는 시대가 오면서 사이트에 창(윈도우)이 있는 듯한 효과를 주어 이벤트나 홍보에 사용이 됩니다. 첫 시선이 집중 되어야 하기 때문에 주로 좌측에 위치하게 됩니다. UI 적으로는 오른쪽에 위치하여 사용자의 접근성을 높이는게 좋습니다.    

4)메인 배너 및 슬라이드
사이트를 방문했을 때 사용자에게 가장 많이 어필되는 부분을 메인 부분이라고 합니다. 일명 히어로 배너로도 불리웁니다. 슬라이드는 현재 트렌드는 아니지만 메인 배너를 여러장 사용하고 싶을 때 사용하는 기능을 이야기합니다. 

5)LNB & RNB Left navigation bar인데 로컬 LNB와 혼용하여 사용합니다. 
좌측 또는 우측에 있는 페이지의 뎁스 표현과 이동을 담당합니다. 이렇게 말이죠

6)fixed
퍼블리셔와 대화 중 이부분은 fixed 해주세요. 하면 웹페이지에 고정이 되어 따라다니게 해주세요를 의미합니다. 고정 배너 및 고정 메뉴로 주로 사용이됩니다.

7)애니메이션 또는 모션 
웹페이지에 움직임을 일컬어 이야기합니다. 주로 자바스크립트로 애니메이션을 적용하였지만, 현재는 CSS, 스타일시트의 발달로 CSS만으로도 애니메이션이 가능해졌습니다. 능력있는 웹디자이너 모션도 신경 써서 작업을 합니다..  

8)버튼 과 토글 
버튼은 주로 이동이나 등록에 사용됩니다. 마우스 올렸을때, 클릭했을 때 효과를 줄수도 있으며, 아래 보이는 이부분은 토글이라고 합니다. ON/off 스위치를 생각하면 됩니다. 

9)부분 횡스크롤
아주 잠깐 전체가 횡스크롤로 이루어진 사이트가 유행했었는데, 현재는 이렇게 부분 횡스크롤이 적용된 사이트가 더 많습니다. 가로스크롤로 표현해도, 퍼블리셔가 알아 듣습니다. 

10)embed 
주로 영상을 웹사이트에 넣을 때 임베드 되어진다고 표현합니다. 유튜브 영상은 임베드도 합니다. 

11)라디오버튼
다양한 항목 중 한가지만 선택하게 하는 요소로 사용됩니다. 라디오에 있던 물리적인 버튼 FM/AM에서 따온말입니다.  항목 중 하나는 선택이 되어지게 디자인 되어야합니다.  

12)체크박스 
다양한 항목 중 다양한 요소를 선택하게 하는 요소로 사용됩니다. 이렇게 여러가지를 선택할 수 있습니다. 주로 설문조사에 사용이 되죠?

13)푸터
사이트의 가장 하단 bottom 부분을 이야기하며, 주로 패밀리사이트, 주소, 전화번호, SNS링크 , 사업자 번호 등 정보를 제공하는 영역으로 사용이 됩니다.  


14)소셜 영역 / SNS 영역
SNS로 연결하는 아이콘들이 있는 영역을 일컬어 말합니다. 

15)튤팁
마우스를 오버했을 때 특정 정보를 보여줄 때 사용을 하지만 많이 사용되는 기능은 아닙니다. 굳이 설명을 해야할 때 사용을 합니다. 이렇게 말이죠. 유튜브는 알아도 저 아이콘들을 모르는 사람이 있을 가능성이 있기 때문에 튤팁으로 작업을 했습니다. 

16)인풋박스 / input field
사용자가 값을 입력할 수 있는 공간을 일컬어 이야기합니다. 값을 서버로 전달하게 되는데 보안을 신경써야 합니다. Id / PW / 메일 값등을 주로 입력하게 됩니다.


17)드롭다운메뉴 / 드롭다운리스트
세부 항목들을 펼치고 그 중 한가지 항목을 선택하게 하는 메뉴형태를 말합니다. 풀다운 메뉴로도 불리우며, 일반적으로 패밀리 사이트에 주로 사용이 됩니다. 


18)탑버튼
사이트의 최상단으로 이동하는 버튼을 이야기합니다. RNB과 혼용되어 사용되는 경우는 거의 없습니다. 

댓글