# 페이지 구성 요소 살펴보기

## 이 글에서는

페이지를 구성하는 여러 요소에 관해 알아봅니다.

***

## 페이지 화면 이해하기

페이지는 '메인 화면'과 '콘텐츠 화면' 두 가지로 구성됩니다. 사용자가 페이지에 접속하는 환경이 PC인지 모바일인지에 따라 자동으로 반응형 디자인이 적용됩니다.

#### PC에서 페이지에 접속하는 경우

<figure><img src="https://468498824-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeAMHRdY4ATDXfWZWQs3p%2Fuploads%2FJcX9iPFAkHvcvwRoAJTI%2F%ED%8E%98%EC%9D%B4%EC%A7%80%20%EA%B5%AC%EC%84%B1.png?alt=media&#x26;token=1d383114-c0bc-4404-9127-8c259e28b427" alt=""><figcaption></figcaption></figure>

#### 모바일에서 페이지에 접속하는 경우

<figure><img src="https://468498824-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeAMHRdY4ATDXfWZWQs3p%2Fuploads%2FWV0X7Fe1ncbDSwr5dUta%2F%ED%8E%98%EC%9D%B4%EC%A7%80%20%EA%B5%AC%EC%84%B1%20%EB%B0%98%EC%9D%91%ED%98%95.png?alt=media&#x26;token=ae9180d2-feee-45c2-9bc8-f597d9b12bbd" alt=""><figcaption></figcaption></figure>

## 메인 화면 <a href="#h_3e360d52f1" id="h_3e360d52f1"></a>

구독자가 페이지에 접속했을 때, 가장 먼저 확인할 수 있는 화면으로, 페이지와 관련한 여러 정보를 확인할 수 있습니다.

<figure><img src="https://468498824-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeAMHRdY4ATDXfWZWQs3p%2Fuploads%2FGfk9dy2XSTmVxub1s6Gd%2F%ED%8E%98%EC%9D%B4%EC%A7%80%20%EA%B5%AC%EC%84%B12.png?alt=media&#x26;token=57874889-d8a2-4eb3-b508-e544ac316faf" alt=""><figcaption></figcaption></figure>

### 상단 메뉴바

페이지 가장 위쪽, 상단 메뉴바 영역에 프로필 사진, 뉴스레터 이름, 구독하기 및 로그인 버튼이 표시됩니다.&#x20;

예비 구독자는 \[[구독하기](https://help.stibee.com/page/broken-reference)] 버튼을 눌러 뉴스레터 구독을 신청할 수 있습니다. 기존 구독자는 \[[로그인](https://help.stibee.com/page/subscriber-guide/login)] 버튼을 눌러 페이지에 로그인할 수 있으며, 로그인을 진행하면 \[구독하기] 버튼은 표시되지 않습니다.

뉴스레터 이름은 \[페이지 → 기본 설정]에서, 프로필 사진과 구독하기 버튼 디자인은 \[페이지 → 디자인]에서 변경할 수 있습니다.

<figure><img src="https://468498824-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeAMHRdY4ATDXfWZWQs3p%2Fuploads%2FAk7oZOLdsgviCTJyNSjE%2F%ED%8E%98%EC%9D%B4%EC%A7%80%20%EA%B5%AC%EC%84%B13.png?alt=media&#x26;token=7dfd873f-5e9c-4b80-aa03-95b565c1f7c2" alt=""><figcaption></figcaption></figure>

### 헤더 <a href="#h_d38264031e" id="h_d38264031e"></a>

상단 메뉴바 밑에 헤더 영역에는 헤더 이미지, 프로필 사진, 뉴스레터 이름, 소개글, SNS 링크, 구독하기 버튼, 공유하기 링크가 표시됩니다. 운영 중인 페이지가 어떤 내용을 담고 있는지 (예비)구독자에게 안내할 수 있는 중요한 영역으로, 신경 써서 설정해 주시면 좋습니다.

헤더 이미지와 프로필 사진, 구독하기 버튼은 \[페이지 → 디자인]에서 변경할 수 있습니다. 뉴스레터 이름, SNS 링크는 \[페이지 → 기본 설정]에서 변경할 수 있습니다.

<figure><img src="https://468498824-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeAMHRdY4ATDXfWZWQs3p%2Fuploads%2FYovqNUqmLfMvBKevzD9y%2F%ED%8E%98%EC%9D%B4%EC%A7%80%20%EA%B5%AC%EC%84%B14.png?alt=media&#x26;token=dae4e5c0-3793-4add-a315-27686f424b33" alt=""><figcaption></figcaption></figure>

### 지난 뉴스레터 <a href="#h_47a67c44d2" id="h_47a67c44d2"></a>

지금까지 발송한 뉴스레터 중 [전체 공개로 발행](https://help.stibee.com/email/share/archive#page)한 이메일이 목록에 표시되며, 발송일시를 기준으로 자동 정렬됩니다.

**\*주의:** 페이지와 연결된 주소록에 발송한 이메일만 발행할 수 있습니다. 다른 주소록으로 발송한 이메일은 발행 대상에 포함되지 않습니다.

<figure><img src="https://468498824-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeAMHRdY4ATDXfWZWQs3p%2Fuploads%2Fkk6IZTBtAYxPcV5uPu6K%2F%ED%8E%98%EC%9D%B4%EC%A7%80%20%EA%B5%AC%EC%84%B15.png?alt=media&#x26;token=94382e5e-c386-43ec-b82b-d58ee60cc1e9" alt=""><figcaption></figcaption></figure>

'유료 구독자용으로 발행'된 뉴스레터는 자물쇠 모양의 아이콘이 표시되며, 페이지에 로그인한 유료 구독자만 확인할 수 있습니다.

<figure><img src="https://468498824-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeAMHRdY4ATDXfWZWQs3p%2Fuploads%2FioweGxVRasnitWTMW0gP%2F%ED%8E%98%EC%9D%B4%EC%A7%80%20%EA%B5%AC%EC%84%B16.png?alt=media&#x26;token=dc50373f-c02e-4454-aa22-c97cc8487234" alt=""><figcaption></figcaption></figure>

&#x20;

## 콘텐츠 화면 <a href="#h_5d10d4d348" id="h_5d10d4d348"></a>

구독자가 개별 이메일 제목을 클릭했을 때 확인할 수 있는 화면으로, 발행한 뉴스레터를 읽을 수 있습니다.

<figure><img src="https://468498824-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeAMHRdY4ATDXfWZWQs3p%2Fuploads%2FTENfniQn4sfEkweW1dcZ%2F%ED%8E%98%EC%9D%B4%EC%A7%80%20%EA%B5%AC%EC%84%B1%207.png?alt=media&#x26;token=597b8c09-7769-4ec0-a51a-772ee72e8b57" alt=""><figcaption></figcaption></figure>

### 뉴스레터 본문 <a href="#h_7e5398c638" id="h_7e5398c638"></a>

\[지난 뉴스레터] 목록에서 이메일 제목을 누르면 뉴스레터 본문을 읽을 수 있습니다. 만약, 본문에 메일머지가 포함되어 있다면 \[사용자 정의 필드]에서 설정한 '기본값'이 자동으로 표시됩니다.

### 구독 팝업, 구독 폼

외부에서 검색, 링크 등을 통해 유입된 방문자에게 구독을 적극적으로 유도하는 구독 팝업, 구독 폼 화면이 표시됩니다.

<figure><img src="https://468498824-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeAMHRdY4ATDXfWZWQs3p%2Fuploads%2FxaYjWdaPCN5iILzPSZzC%2F%ED%8E%98%EC%9D%B4%EC%A7%80%20%EA%B5%AC%EC%84%B1%208.png?alt=media&#x26;token=9b62d851-e890-455b-9952-f299dd8dd9c0" alt=""><figcaption></figcaption></figure>

<figure><img src="https://468498824-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeAMHRdY4ATDXfWZWQs3p%2Fuploads%2FWZ9aJV6S3yVGfu1d5SoG%2F%ED%8E%98%EC%9D%B4%EC%A7%80%20%EA%B5%AC%EC%84%B1%209.png?alt=media&#x26;token=e69423fd-c956-41bb-9277-4c77485c91cf" alt=""><figcaption></figcaption></figure>

### 네비게이션 메뉴 <a href="#h_21775ec527" id="h_21775ec527"></a>

다른 뉴스레터로 이동하도록 유도하는 영역으로, 현재 보고 있는 뉴스레터를 기준으로 '이전 뉴스레터' 또는 '다음 뉴스레터'를 클릭해 다른 뉴스레터로 넘어갈 수 있습니다.

<figure><img src="https://468498824-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeAMHRdY4ATDXfWZWQs3p%2Fuploads%2FNSFI7NgaaAcILgW6APq4%2F%ED%8E%98%EC%9D%B4%EC%A7%80%20%EA%B5%AC%EC%84%B1%2010.png?alt=media&#x26;token=ec9373c3-ec66-41a3-a877-37e957fe1d08" alt=""><figcaption></figcaption></figure>

### 푸터 <a href="#h_3d73615611" id="h_3d73615611"></a>

뉴스레터 이름과 짧은 소개가 표시됩니다. 유료 뉴스레터를 운영하고 있다면, 결제 관련 기본 안내 사항이 함께 표시됩니다.

<figure><img src="https://468498824-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeAMHRdY4ATDXfWZWQs3p%2Fuploads%2FuSwIxOA1kMwfOlx87POe%2F%ED%8E%98%EC%9D%B4%EC%A7%80%20%EA%B5%AC%EC%84%B1%2011.png?alt=media&#x26;token=81da6022-7284-45bf-9215-44fd68d46067" alt=""><figcaption></figcaption></figure>