홈페이지 만들 때 알아야 할 용어집 2편 : 클릭하고 반응하는 요소들
CTA 버튼, 호버, 띠배너, 아코디언 등. 방문자가 직접 클릭하고 반응하는 요소들을 정리했어요.
한 줄 요약
CTA 버튼, 호버, 띠배너, 아코디언... 이름은 몰랐어도 이미 매일 누르고 스쳐 지나갔던 요소들이에요. 이번 편에서 그 이름과 역할을 하나씩 정리해요.
홈페이지 만들 때 알아야 할 용어집
이 시리즈는 홈페이지 화면 요소의 이름을 정리한 용어집이에요. 이름을 모르면 화면을 손으로 짚어가며 커뮤니케이션해야 하는데, 이름을 알면 그 과정 없이 훨씬 빠르게 원하는 그림을 전달할 수 있어요.
1편에서는 페이지의 뼈대와 배치를 이루는 용어(헤더 · 푸터 · 섹션 · 컨테이너 등)와 그 의미를 다뤘어요. 이번 편에서는 그 뼈대 안에서 방문자가 직접 클릭하고, 넘겨보고, 반응하는 요소들을 정리하고 이해하는 시간을 가져볼게요.
잠깐, 용어는 왜 알아두면 좋을까요?
두 가지 상황 때문이에요.
1) 직접 에디터를 만질 때
이름을 모르면 에디터의 수많은 기능을 하나씩 눌러보면서 "이게 맞나?" 확인해야 하는 상황이 반복돼요. 그러나 "CTA 버튼", "아코디언"이라는 이름을 알면 뭘 찾아야 할지 바로 떠오르고 곧장 그 항목으로 갈 수 있어요.
2) 디자이너나 개발자와 소통할 때
"눌렀을 때 열리고 닫히는 그거요"라고 설명하는 대신 "아코디언"이라고 말하면 훨씬 빠르고 정확하게 피드백이 전달돼요.
Tip. 여기서 다루는 요소들은 큐샵 클래식 에디터·스튜디오 에디터에서도 구현할 수 있어요.
다른 페이지나 정보로 이동시키는 요소
홈페이지는 한 화면에 모든 정보를 다 담을 수 없어서, 방문자가 원하는 정보로 이동하거나 찾아갈 수 있는 장치가 필요해요.
메뉴를 눌러 다른 페이지로 가거나, 탭을 눌러 같은 화면에서 내용만 바꿔보거나, 지금 어디에 있는지 경로를 확인하는 것 모두 여기 속해요.
| 용어 | 한 줄 정의 | 위치/역할 |
|---|---|---|
| 햄버거 메뉴 | 클릭하면 메뉴가 펼쳐지는 세 줄 아이콘. 눌러야 GNB가 나타남 | 모바일 헤더에 위치하며, 평소엔 GNB를 숨겨두고 클릭하면 나타나게 하는 역할 |
| 드롭다운 메뉴 | 마우스를 올리거나 클릭하면 하위 메뉴가 펼쳐지며, 클릭하면 다른 페이지로 이동함 | GNB 안에 위치하며, 카테고리를 세분화해서 보여주는 역할 |
| 탭 | 페이지 이동 없이, 같은 화면 안에서 콘텐츠만 바뀌는 요소 | 섹션 안에 위치하며, 한 공간에 여러 정보를 나눠 보여주는 역할 |
| 브레드크럼 | 현재 위치를 경로로 보여주며, 클릭하면 상위 페이지로 이동함 | 헤더 아래나 본문 상단에 위치하며, "홈 > 카테고리 > 상세" 식으로 위치를 안내하는 역할 |
이 중 브레드크럼은 카테고리가 여러 단계로 나뉜 사이트에서 유용해요.
알림 요소
방문자가 페이지를 둘러보다가 놓칠 수 있는 소식이나 정보를 강제로든 자연스럽게든 보여주는 장치들이에요.
화면 위쪽에 계속 떠 있는 형태부터, 화면을 잠깐 가리며 나타나는 형태, 상품 이미지 위에 작게 붙는 표시까지, 방식은 다르지만 결국 방문자 눈에 한 번은 걸리게 만드는 게 목적이에요.
| 용어 | 한 줄 정의 | 위치/역할 |
|---|---|---|
| 띠배너 | 특정 소식·이벤트를 알리는 띠 형태 영역 | 헤더 상단에 위치하며, 화면에 계속 남아있는 형태로 업데이트, 이벤트, 할인 소식을 알리는 역할 |
| 팝업 | 화면 위에 뜨는 별도의 창 | 홈페이지 위 화면 중앙 등에 떠서, 닫기 전까지 화면에 남아있는 역할 |
| 뱃지 | 상태·속성을 알려주는 작은 표시 | 카드나 상품 이미지 위에 위치하며, "NEW", "SALE"처럼 정보를 압축해서 전달하는 역할 |
띠배너와 팝업은 자주 혼동돼요. 띠배너는 화면 상단에 계속 떠 있는 형태이고, 팝업은 화면 위에 나타났다가 닫히는 형태라는 점이 달라요.
행동을 이끄는 요소
홈페이지를 만드는 이유는 결국 방문자에게 특정 행동을 유도하기 위함이에요.
구매 버튼을 누르거나, 문의 폼을 채워 제출하거나, 마우스를 올려서 "여기 누를 수 있어요"라는 신호를 받는 것까지, 방문자의 클릭과 입력을 이끌어내는 장치들을 모아뒀어요.
| 용어 | 한 줄 정의 | 위치/역할 |
|---|---|---|
| CTA 버튼* | 방문자에게 특정 행동을 유도하는 버튼 | 히어로 섹션이나 섹션 끝에 위치하며, 전환으로 이어지는 클릭 지점 역할 |
| 아이콘 버튼 | 텍스트 없이 아이콘만 있는 버튼 (검색·장바구니·공유 등) | 헤더 우측 등에 위치하며, 공간을 절약하며 기능을 전달하는 역할 |
| 호버** | 마우스를 요소 위에 올렸을 때 나타나는 반응 | CTA 버튼, 아이콘 버튼이나 링크 위에서 나타나며, 클릭 가능한 요소임을 알려주는 역할 |
| 폼 | 방문자가 정보를 입력하는 영역 | 섹션 안에 위치하며, 문의·신청 등 서비스를 위해 필요한 고객 정보를 수집하는 역할 |
홈페이지 방문자에게 "눌렀을 때 다음이 있음"을 알려주는 힌트를 주는 호버는 PC 화면에만 존재해요. 모바일은 마우스가 아니라 손가락으로 직접 터치하기 때문에, 모바일에서는 고려하지 않아도 돼요.
*CTA : CTA는 Call To Action(행동 유도)의 약자예요.
**호버(Hover) : 호버는 "떠 있다, 맴돌다"라는 뜻의 영어 단어예요. 웹 디자인에서는 마우스 커서가 요소 위에 머물러 있는 상태를 의미해요.
내용을 담는 요소
같은 정보라도 어떤 형태로 보여주느냐에 따라 방문자가 읽는 느낌이 달라져요.
여러 상품을 나란히 보여줄 땐 카드로 묶고, 질문이 많을 땐 아코디언으로 접어두고, 스크롤할 내용이 더 있다는 걸 알려줄 땐 화살표를 써요. 정보를 어떻게 "포장"해서 보여줄지에 대한 요소들이에요.
| 용어 | 한 줄 정의 | 위치/역할 |
|---|---|---|
| 카드 | 이미지+텍스트를 하나의 박스로 묶은 콘텐츠 단위 | 섹션에 배치한 그리드, 스택 안에 보통 위치하며, 여러 항목을 나란히 비교·나열하는 역할 |
| 아코디언 | 클릭하면 펼쳐지고 다시 클릭하면 접히는 요소 | FAQ 섹션 등에 위치하며, 정보량이 많을 때 접어두는 역할 |
| 스크롤 인디케이터 | 아래로 더 볼 내용이 있음을 알려주는 화살표·아이콘 | 히어로 섹션 하단에 위치하며, 방문자의 이탈을 막는 역할 |
FAQ
Q. 띠배너와 팝업은 같은 건가요?
A. 아니에요. 띠배너는 화면 상단에 계속 떠 있는 형태이고, 팝업은 화면을 가리며 나타났다가 닫히는 형태예요.
Q. 호버는 모바일에서도 되나요?
A. 모바일에서는 어려워요. 호버는 마우스가 있는 PC 환경에만 존재하는 개념이에요. 원래 호버는 방문자가 클릭하기 전에 "이게 눌리는 요소구나"를 미리 알려주는 신호인데, 모바일은 터치 자체가 곧 클릭이라 중간 신호가 되는 호버가 필요 없어요.