랜딩 페이지 만들기

이 튜토리얼에서는 제품이나 서비스를 소개하는 간단한 랜딩 페이지를 만들어봅니다.

작은 HTML 코드에서 시작해 CSS로 디자인을 추가하고, 기능 소개 영역과 모바일 화면에 대응하는 스타일을 차례대로 만들어보겠습니다.

이 튜토리얼에서 만드는 페이지에는 다음 내용이 포함됩니다.

제품이나 서비스를 소개하는 첫 화면
방문자의 행동을 유도하는 버튼
주요 기능을 소개하는 영역
모바일 화면에 대응하는 디자인
완성된 페이지 인터넷에 공개하기

전체 코드

이 튜토리얼을 끝까지 진행하면 아래와 같은 페이지가 완성됩니다.

시작하기 전에 완성된 결과와 전체 코드를 가볍게 살펴보세요. 지금 모든 코드를 이해할 필요는 없습니다. 코드를 하나씩 작성하고 수정하면서 각 부분이 어떤 역할을 하는지 알아보겠습니다.

시작하기 전에

에스페이지에 로그인하고 빈 템플릿(Blank)을 선택해 새 프로젝트를 만드세요.

프로젝트를 만들면 다음과 같은 홈페이지 파일이 생성됩니다.

/public
└── +page.essepage

/public 폴더의 +page.essepage는 웹사이트의 기본 홈페이지입니다.

프로젝트 대시보드에서 코드 에디터(Code Editor)를 선택하고 /public/+page.essepage 파일을 엽니다.

1. 첫 화면 만들기

기존 코드를 모두 지우고 다음 코드를 붙여넣으세요.

<div id="_main">
    <h1>Turn Your Ideas Into Reality</h1>

    <p>
        We provide simple and efficient solutions
        to help you build better services.
    </p>

    <a href="#">Learn More</a>
</div>

파일을 저장합니다.

Windows 또는 Linux: Ctrl + S
macOS: Cmd + S

오른쪽 미리보기 화면에 제목과 설명, 링크가 표시됩니다.

실시간 미리보기 사용하기

첫 번째 줄에는 다음과 같이 밑줄(_)로 시작하는 id가 사용되었습니다.

<div id="_main">

에스페이지에서는 요소의 id를 밑줄(_)로 시작하면 해당 영역에 실시간 미리보기(Live Preview)가 적용됩니다.

이제 코드를 입력할 때마다 저장하지 않아도 오른쪽 미리보기 화면이 바로 업데이트됩니다.

h1의 문장을 조금 수정해보면서 미리보기 화면이 어떻게 변하는지 확인해보세요.

2. CSS로 디자인 추가하기

현재 페이지에는 내용만 있고 디자인은 적용되어 있지 않습니다.

앞에서 작성한 HTML 아래에 다음 코드를 추가하세요.

<style id="_css">
    body {
        font-family: system-ui;
        padding: 20px;
    }

    h1 {
        font-size: 64px;
        margin-bottom: 20px;
    }

    p {
        line-height: 1.7;
    }

    a {
        display: inline-block;
        margin-top: 32px;
        padding: 14px 28px;
        color: white;
        background: #111;
        border-radius: 999px;
        text-decoration: none;
    }
</style>

제목이 커지고 Learn More 링크가 둥근 검은색 버튼으로 변경됩니다.

<style>에도 밑줄로 시작하는 id가 지정되어 있습니다.

<style id="_css">

따라서 CSS의 색상이나 크기를 수정하는 동안에도 결과가 실시간으로 미리보기에 표시됩니다.

예를 들어 버튼의 배경색을 다음과 같이 바꿔보세요.

background: royalblue;

에스페이지에서는 페이지 파일 안에 <style>을 작성할 수 있습니다. 페이지를 구성할 때 스타일 코드는 자동으로 <head> 영역에 배치됩니다.

3. 콘텐츠를 화면 가운데에 배치하기

지금은 콘텐츠가 화면 왼쪽 위에 표시되어 있습니다.

CSS에서 기존 body 부분을 찾아 다음 코드로 교체하세요.

body {
    box-sizing: border-box;
    display: flex;
    min-height: 100vh;
    margin: 0;
    padding: 20px;
    align-items: center;
    justify-content: center;
    font-family: system-ui;
    text-align: center;
}

콘텐츠가 화면의 가로와 세로 가운데에 배치됩니다.

4. 기능 소개 영역 추가하기

대부분의 랜딩 페이지에는 제품이나 서비스의 장점을 설명하는 영역이 있습니다.

HTML에서 Learn More 버튼 아래에 다음 코드를 추가하세요.

<section>
    <h2>Our Strengths</h2>

    <ul>
        <li>Fast and intuitive experience</li>
        <li>Fully responsive on all devices</li>
        <li>Reliable customer support</li>
    </ul>
</section>

전체 HTML 구조는 다음과 같은 형태가 됩니다.

<div id="_main">
    <h1>Turn Your Ideas Into Reality</h1>

    <p>
        We provide simple and efficient solutions
        to help you build better services.
    </p>

    <a href="#">Learn More</a>

    <section>
        <h2>Our Strengths</h2>

        <ul>
            <li>Fast and intuitive experience</li>
            <li>Fully responsive on all devices</li>
            <li>Reliable customer support</li>
        </ul>
    </section>
</div>

미리보기 화면에 세 가지 장점을 소개하는 새로운 영역이 표시됩니다.

5. 기능 영역의 간격 조정하기

기능 목록이 서로 가깝게 붙어 있으므로 CSS로 간격을 조정해보겠습니다.

<style id="_css"> 안쪽의 기존 CSS 아래에 다음 코드를 추가하세요.

section {
    margin-top: 80px;
}

ul {
    padding: 0;
    list-style: none;
}

li {
    margin: 16px 0;
}

6. 모바일 화면에 맞게 조정하기

PC 화면에서는 큰 제목이 잘 보이지만 모바일 화면에서는 지나치게 크게 표시될 수 있습니다.

<style id="_css">의 가장 아래에 다음 코드를 추가하세요.

@media (max-width: 640px) {
    h1 {
        font-size: 42px;
    }
}

미리보기 영역의 너비를 줄여 제목 크기가 변하는지 확인해보세요.

화면 크기에 따라 디자인을 변경하는 방식을 반응형 디자인(Responsive Design)이라고 합니다.

7. 공개 사이트에 변경사항 적용하기

페이지가 완성되었다면 먼저 파일을 저장하세요.

macOS: Cmd + S
Windows 또는 Linux: Ctrl + S

미리보기에서 최종 결과를 확인한 뒤 공개 사이트에 변경사항을 반영합니다.

이미 홈페이지는 공개된 상태이므로 변경사항 적용(Apply Changes)을 사용합니다.

파일 탐색기에서 /public/+page.essepage를 마우스 오른쪽 버튼으로 클릭합니다.
변경사항 적용(Apply Changes)을 선택합니다.
적용이 끝나면 파일을 다시 마우스 오른쪽 버튼으로 클릭합니다.
페이지 열기(Open Page)를 선택합니다.

완성된 랜딩 페이지가 새 탭에서 열립니다.

변경사항을 적용한 뒤 캐시가 갱신되는 데 최대 1분 정도 걸릴 수 있습니다. 공개 페이지에 이전 내용이 표시된다면 잠시 기다린 뒤 새로고침하세요.

웹사이트를 완성했습니다

지금까지 다음 작업을 진행했습니다.

HTML로 제목, 설명과 버튼 만들기
CSS로 글자와 버튼 디자인하기
콘텐츠를 화면 가운데에 배치하기
제품이나 서비스의 기능 소개하기
콘텐츠 사이의 간격 조정하기
모바일 화면에 맞게 제목 크기 변경하기
변경사항을 공개 사이트에 적용하기

작은 코드에서 시작해 내용을 하나씩 추가하면서 반응형 랜딩 페이지를 완성했습니다.

이제 예제의 제목, 설명, 버튼 색상과 기능 목록을 자신이 소개하려는 제품이나 서비스에 맞게 변경해보세요.

다음 단계

랜딩 페이지를 완성했다면 다음 문서로 넘어가세요.

여러 페이지로 구성된 사이트를 만들고 싶다면: 개인 웹사이트 만들기
HTML 요소와 페이지 구조를 자세히 알아보고 싶다면: 페이지 구조
파일과 URL의 연결 방식을 알고 싶다면: 페이지와 URL 구성하기
공통 메뉴와 푸터를 여러 페이지에서 사용하고 싶다면: 레이아웃과 컴포넌트

언어

목차

Title