웹사이트의 구성 요소: 설명이 표시된 디자인 예시

We.Inc로 만든 디자인 예시를 통해 웹사이트 구성 요소를 설명합니다. 헤더와 탐색 메뉴, 히어로, 행동 유도, 서비스, 신뢰 근거, 소개, 연락처, 바닥글과 도메인·페이지 제목·사이트맵 같은 비공개 구성 요소를 알아보세요.

대부분의 소기업 웹사이트는 위에서 아래로 같은 여덟 가지 요소로 구성됩니다. 헤더와 탐색 메뉴, 히어로, 행동 유도, 서비스, 신뢰 근거, 소개, 연락처, 바닥글입니다. 방문자에게 보이지 않는 도메인, 페이지 제목, 사이트맵 같은 요소도 뒤에서 작동합니다. 아래에서 We.Inc로 만든 디자인 예시에 각 부분을 표시해 설명합니다.

헤더, 탐색 메뉴, 히어로 제목, 행동 유도 버튼이 표시된 We.Inc 회계법인 웹사이트 디자인 예시
실제 고객 사이트가 아닌 디자인 예시입니다. 아래 목록 번호는 페이지 위에서 아래 순서와 일치합니다.

방문자에게 보이는 부분: 위에서 아래 순서

  1. 헤더. 로고나 사업체 이름이 있는 페이지 상단의 띠입니다. 모든 페이지에 표시되어 방문자가 현재 어느 사이트에 있는지 알 수 있습니다.
  2. 탐색 메뉴(내비게이션). 서비스, 소개, 가격, 연락처 등 주요 페이지나 섹션으로 연결하는 링크입니다. 항목은 5~7개로 제한하세요. 휴대전화에서는 메뉴 버튼 안에 접힙니다.
  3. 히어로. 첫 화면에 보이는 부분입니다. 무엇을 누구를 위해 하는지 설명하는 제목과 짧은 보조 문구, 대개 이미지가 포함됩니다. 방문자는 몇 초 안에 더 둘러볼지 결정합니다. 히어로 섹션 예시를 참고하세요.
  4. 행동 유도(CTA). “상담 예약”, “견적 받기” 같은 주요 버튼입니다. 히어로에 두고 페이지 아래쪽에도 반복하세요.
  5. 서비스 또는 기능. 제공 항목마다 짧은 블록 하나를 배정하고 고객이 얻는 결과를 한 줄로 설명하세요.
  6. 신뢰 근거. 후기, 작업 사례, 인증, 보증입니다. 실제 자료만 사용하세요.
  7. 소개. 사업을 운영하는 사람과 그들을 믿을 수 있는 이유를 설명합니다. 소개 페이지 작성법을 참고하세요.
  8. 연락처. 양식, 전화번호, 이메일, 주소 또는 서비스 지역을 표시합니다. 문의 양식 추가 방법을 참고하세요.
  9. 바닥글. 페이지 아래쪽에 연락처를 다시 표시하고 보조 링크, 개인정보 처리방침, 소셜 미디어 링크를 둡니다.

방문자에게 보이지 않는 부분

부분역할
도메인yourbusiness.com 같은 웹사이트 주소
호스팅방문자에게 사이트를 제공하는 컴퓨터
페이지 제목과 설명Google 검색 결과와 브라우저 탭에 표시되는 내용
사이트맵검색 엔진이 페이지를 찾도록 돕는 페이지 목록
파비콘브라우저 탭의 작은 아이콘
공유 이미지소셜 미디어에 링크를 게시할 때 표시되는 이미지

구성 요소는 같아도 페이지 수는 다를 수 있습니다

원 페이지 웹사이트는 이 모든 요소를 스크롤하는 한 페이지에 쌓고 메뉴는 각 섹션으로 이동합니다. 여러 페이지 사이트는 서비스, 소개, 연락처를 각각 별도 페이지로 나누되 모든 페이지에서 같은 헤더와 바닥글을 사용합니다. 웹 앱은 여기에 로그인과 저장 데이터를 추가합니다.

We.Inc에서 필요한 요소 모두 갖추기

모든 We.Inc 템플릿에는 헤더, 탐색 메뉴, 히어로, CTA, 바닥글이 포함되어 있습니다. 게시한 사이트에는 제목, 사이트맵, 공유 이미지도 기본 설정됩니다. Free 요금제는 AI 크레딧과 맞춤 도메인 없이 we.inc 주소로 템플릿 사이트를 최대 3개까지 게시할 수 있습니다. 월 $20부터 시작하는 유료 요금제에서는 AI 제작과 자체 도메인을 이용할 수 있습니다. 템플릿을 둘러보세요.

자주 묻는 질문

웹사이트의 주요 구성 요소는 무엇인가요?

헤더, 탐색 메뉴, 히어로, 행동 유도, 서비스, 신뢰 근거, 소개, 연락처, 바닥글과 방문자에게 보이지 않는 도메인, 호스팅, 페이지 제목, 사이트맵 등이 있습니다.

웹사이트의 히어로 섹션은 무엇인가요?

방문자가 처음 보는 화면입니다. 제목, 짧은 보조 문구, 대개 이미지와 주요 행동 유도 버튼이 포함됩니다.

웹사이트 바닥글에는 무엇을 넣나요?

연락처 정보, 개인정보 처리방침과 이용약관 같은 보조 링크, 소셜 링크, 경우에 따라 짧은 메뉴를 다시 표시합니다.

원 페이지 사이트도 같은 구성 요소를 갖추나요?

네. 같은 섹션을 한 페이지에 쌓고 메뉴를 눌렀을 때 새 페이지 대신 해당 섹션으로 이동하게 합니다.

무료로 시작하기 · 신용카드 필요 없음

Product

Who It's For

Features

Resources

Company

View Sitemap