홈페이지 기획 용어 완벽 정리! 실무에서 알아야 할 웹사이트 키워드 18가지

홈페이지 제작을 앞둔 마케팅·기획 담당자라면 주목! 이런 용어 들어보셨나요?

“IA 정리해서 보내드릴게요”, “와이어프레임 컨펌 부탁드립니다”, “GNB 구조는 어떻게 가져갈까요?”

홈페이지 제작을 처음 맡은 담당자라면, 에이전시와의 첫 미팅에서 외국어를 듣는 기분이 들 수 있어요. 분명 한국어인데 무슨 말인지 모르겠는 상황. 물어보자니 민망하고, 그냥 넘어가자니 찜찜하죠.

이 글에서는 홈페이지 기획 단계에서 자주 등장하는 용어 18가지를 정리했어요. 읽고 나면 에이전시가 하는 말, 이제 다 알아들을 수 있습니다.

1. 사이트 구조 설계에서 쓰이는 용어

홈페이지 기획의 첫 단계는 ‘뼈대’를 잡는 것이에요. 어떤 페이지가 필요한지, 메뉴는 어떻게 구성할지를 정하는 과정에서 아래 용어들이 등장합니다.

1) 사이트맵 (Sitemap)

사이트맵은 홈페이지의 전체 페이지 구조를 한눈에 보여주는 지도예요. 어떤 메뉴 아래 어떤 하위 페이지가 있는지를 트리(tree) 형태로 정리한 문서입니다.

에이전시에서 “사이트맵 초안 보내드릴게요”라고 하면, 우리 홈페이지에 들어갈 페이지 목록을 정리한 문서를 보내준다는 의미예요.

2) IA (Information Architecture, 정보 구조)

IA는 정보 구조 설계를 뜻해요. 사이트맵보다 더 넓은 개념으로, 사용자가 원하는 정보를 쉽게 찾을 수 있도록 콘텐츠를 분류하고 배치하는 작업입니다.

“IA 설계가 잘 되어야 사용자 이탈률이 줄어요”라는 말은, 메뉴와 콘텐츠 구조가 직관적이어야 방문자가 헤매지 않는다는 뜻이에요.

3) GNB (Global Navigation Bar)

GNB는 웹사이트 상단에 고정되어 있는 메인 메뉴 영역이에요. 어느 페이지에서든 보이기 때문에 ‘Global(전역)’이라는 이름이 붙었어요.

보통 ‘회사소개’, ‘서비스’, ‘포트폴리오’, ‘문의하기’ 같은 핵심 메뉴가 GNB에 들어갑니다.

4) LNB (Local Navigation Bar)

LNB는 특정 섹션 내에서만 보이는 하위 메뉴예요. 예를 들어 ‘회사소개’ 페이지에 들어갔을 때 왼쪽이나 상단에 나타나는 ‘인사말’, ‘연혁’, ‘오시는 길’ 같은 서브 메뉴가 LNB입니다.

5) FNB (Footer Navigation Bar)

FNB는 웹사이트 맨 아래(푸터)에 위치한 메뉴 영역이에요. 개인정보처리방침, 이용약관, 회사 연락처 등 부가 정보를 담는 경우가 많아요.

2. 화면 설계에서 쓰이는 용어

구조가 잡혔으면 이제 각 페이지를 어떻게 구성할지 설계하는 단계예요. 디자인에 들어가기 전, 레이아웃과 기능을 미리 그려보는 과정에서 아래 용어들이 나옵니다.

1) 와이어프레임 (Wireframe)

와이어프레임은 페이지의 뼈대를 그린 설계도예요. 색상이나 이미지 없이 회색 박스와 선으로만 구성되어 있어서, 어디에 어떤 요소가 배치되는지를 보여줍니다.

“와이어프레임 컨펌해 주세요”라고 하면, 디자인 전에 레이아웃 구조를 확정해 달라는 요청이에요.

2) 목업 (Mockup)

목업은 와이어프레임에 디자인 요소(색상, 이미지, 폰트 등)를 입힌 시안이에요. 실제 완성본에 가까운 모습을 미리 확인할 수 있어요.

다만 목업은 ‘보여주기용’이라 클릭해도 반응하지 않아요. 움직이는 건 다음 단계인 프로토타입입니다.

3) 프로토타입 (Prototype)

프로토타입은 실제로 클릭하고 이동할 수 있는 시제품이에요. 버튼을 누르면 다른 페이지로 넘어가는 식으로 사용자 경험을 미리 테스트해 볼 수 있어요.

Figma, Adobe XD 같은 툴로 만들며, “프로토타입으로 플로우 확인해 주세요”라는 말은 페이지 간 이동 흐름을 검토해 달라는 의미입니다.

4) 스토리보드 (Storyboard)

스토리보드는 와이어프레임에 기능 설명을 덧붙인 기획 문서예요. 각 화면에서 어떤 동작이 일어나는지, 버튼을 누르면 어떻게 되는지를 상세히 적어둡니다.

개발자가 “스토리보드 보고 작업할게요”라고 하면, 이 문서를 보면서 기능을 구현한다는 뜻이에요.

3. 사용자 경험(UX) 설계에서 쓰이는 용어

좋은 홈페이지는 예쁜 것만으로는 부족해요. 방문자가 원하는 정보를 쉽게 찾고, 원하는 행동(문의, 구매 등)을 자연스럽게 하도록 설계해야 합니다. 이 과정에서 등장하는 용어들이에요.

1) UX (User Experience, 사용자 경험)

UX는 사용자가 제품이나 서비스를 이용하면서 느끼는 총체적인 경험이에요. 홈페이지에서는 ‘얼마나 쉽게 원하는 정보를 찾을 수 있는지’, ‘문의하기가 편한지’ 같은 것들이 UX에 해당합니다.

2) UI (User Interface, 사용자 인터페이스)

UI는 사용자가 실제로 보고 만지는 화면 요소예요. 버튼 모양, 메뉴 위치, 색상 배치 같은 시각적 요소가 UI입니다.

UX가 ‘경험’이라면, UI는 ‘눈에 보이는 것’이라고 생각하면 쉬워요.

3) 사용자 여정 (User Journey)

사용자 여정은 방문자가 홈페이지에 들어와서 목표(문의, 구매 등)를 달성하기까지의 전체 경로예요.

예를 들어 “검색 → 메인 페이지 → 서비스 소개 → 포트폴리오 → 문의하기”가 하나의 사용자 여정이 될 수 있어요.

4) 페르소나 (Persona)

페르소나는 우리 홈페이지의 이상적인 방문자를 구체적으로 정의한 가상의 인물이에요. 나이, 직업, 고민, 목표 등을 설정해서 “이 사람이 우리 사이트에 오면 어떤 정보를 원할까?”를 고민하는 데 활용합니다.

5) CTA (Call to Action)

CTA는 방문자에게 특정 행동을 유도하는 버튼이나 문구예요. ‘무료 상담 신청’, ‘견적 요청하기’, ‘지금 시작하기’ 같은 버튼이 대표적인 CTA입니다.

홈페이지의 목표가 ‘문의 유도’라면, CTA를 어디에 어떻게 배치하느냐가 전환율에 큰 영향을 미쳐요.

4. 콘텐츠 기획에서 쓰이는 용어

구조와 화면 설계가 끝나면, 실제로 들어갈 내용을 준비해야 해요. 어떤 텍스트와 이미지가 필요한지, 어떻게 전달할지를 정하는 단계에서 아래 용어들이 등장합니다.

1) 카피 (Copy)

카피는 홈페이지에 들어가는 텍스트를 총칭해요. 메인 슬로건, 서비스 설명, 버튼 문구 등 모든 글이 카피에 해당합니다.

“카피 전달해 주세요”라는 요청은 각 페이지에 들어갈 텍스트 원고를 달라는 의미예요.

2) 히어로 섹션 (Hero Section)

히어로 섹션은 홈페이지에 접속했을 때 처음 보이는 메인 영역이에요. 보통 전체 화면을 차지하며, 핵심 메시지와 CTA 버튼이 배치됩니다.

첫인상을 결정하는 영역이라 가장 공을 들여야 하는 부분이에요.

3) 어바웃 페이지 (About Page)

어바웃 페이지는 회사나 브랜드를 소개하는 페이지예요. ‘회사소개’, ‘우리에 대해’, ‘About Us’ 등의 이름으로 불립니다.

B2B 홈페이지에서는 신뢰 구축에 매우 중요한 페이지예요.

4) 랜딩페이지 (Landing Page)

랜딩페이지는 광고나 마케팅 캠페인을 통해 유입된 방문자가 처음 도착하는 페이지예요. 하나의 목표(가입, 문의, 구매)에 집중해서 설계합니다.

메인 홈페이지와 별도로 특정 캠페인용으로 만드는 경우가 많아요.

정리하면

홈페이지 기획 단계에서 자주 등장하는 용어 18가지를 정리했어요.

사이트 구조 설계: 사이트맵, IA, GNB, LNB, FNB
화면 설계: 와이어프레임, 목업, 프로토타입, 스토리보드
UX 설계: UX, UI, 사용자 여정, 페르소나, CTA
콘텐츠 기획: 카피, 히어로 섹션, 어바웃 페이지, 랜딩페이지

이 용어들만 알아도 에이전시와의 소통이 훨씬 수월해져요. 더 이상 “네, 알겠습니다” 하고 넘어간 뒤 혼자 검색하는 일은 없을 거예요.

기획이 막막하다면, 웹닷이 도와드릴게요

사실 이 모든 용어를 완벽히 알 필요는 없어요. 중요한 건 좋은 파트너를 만나는 것입니다.

웹닷은 “회사소개서 하나만 주세요”라고 말하는 에이전시예요. 사이트맵, IA, 와이어프레임… 이런 것들은 저희가 리서치해서 먼저 제안드려요. 담당자분은 컨펌만 하시면 됩니다.

기획서 작성에 막막함을 느끼고 계셨다면, 부담 갖지 마시고 편하게 문의해 주세요.

👉 웹닷에 문의하기