비즈니스 웹사이트 만들기

이 튜토리얼에서는 가상의 꽃집을 소개하는 간단한 비즈니스 웹사이트를 만들어봅니다.

홈, 서비스와 연락처 페이지를 만들고, 공통 메뉴를 사용해 세 페이지를 연결하겠습니다. 연락처 페이지에는 영업시간과 위치를 안내하는 Google 지도도 추가합니다.

이 튜토리얼부터는 페이지를 디자인할 때 Tailwind CSS를 사용합니다.

별도의 CSS를 직접 작성하는 대신 HTML 요소의 class 속성에 Tailwind CSS가 제공하는 클래스를 추가해 디자인합니다. 이번 예제에서는 전체 코드를 이해하기 쉽도록 꼭 필요한 클래스만 사용하겠습니다.

이 튜토리얼에서 만드는 웹사이트에는 다음 내용이 포함됩니다.

꽃집을 소개하는 홈 페이지
제공하는 서비스를 보여주는 서비스 페이지
주소와 영업시간을 안내하는 연락처 페이지
세 페이지를 연결하는 공통 메뉴
Google 지도를 이용한 위치 안내
모바일 화면에 대응하는 페이지 구성

전체 코드

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

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

시작하기 전에

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

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

/public
└── +page.essepage

프로젝트 대시보드에서 코드 에디터(Code Editor)를 선택해 에디터를 여세요.

이 튜토리얼을 완료하면 /public 폴더는 다음과 같은 구조가 됩니다.

/public
├── +layout.essepage
├── +page.essepage
├── services
│   └── +page.essepage
└── contact
    └── +page.essepage

각 페이지 파일은 다음 주소에 해당합니다.

/public/+page.essepage → /
/public/services/+page.essepage → /services
/public/contact/+page.essepage → /contact

1. 공통 레이아웃 만들기

먼저 모든 페이지에서 사용하는 메뉴와 푸터를 레이아웃으로 만들겠습니다.

파일 탐색기의 /public 폴더 안에 다음 파일을 만드세요.

/public/+layout.essepage

파일을 열고 다음 코드를 붙여넣으세요.

<head>
    <title>Bloom Flower Studio</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" >
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>

<header class="border-b">
    <nav class="mx-auto flex max-w-5xl items-center justify-between gap-2 px-6 py-4">
        <a href="/" class="font-bold">
            Bloom
        </a>

        <div class="flex gap-4 text-sm">
            <a href="/">Home</a>
            <a href="/services">Services</a>
            <a href="/contact">Contact</a>
        </div>
    </nav>
</header>

<main class="mx-auto max-w-5xl px-6">
    <essepage-slot></essepage-slot>
</main>

<footer class="border-t py-8 text-center text-sm text-gray-500">
    © Bloom Flower Studio
</footer>

파일을 저장하세요.

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

Tailwind CSS 불러오기

<head> 안의 다음 코드는 프로젝트에서 Tailwind CSS를 사용할 수 있도록 브라우저용 스크립트를 불러옵니다.

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

이제 별도의 <style>을 작성하지 않고 HTML 요소의 class 속성에 Tailwind CSS 클래스를 사용할 수 있습니다.

예를 들어 다음 메뉴에는 여러 개의 클래스가 적용되어 있습니다.

<nav class="mx-auto flex max-w-5xl items-center justify-between px-6 py-4">

각 클래스는 하나의 디자인 역할을 담당합니다.

mx-auto: 요소를 화면 가운데에 배치합니다.
flex: 내부 요소를 가로 방향으로 배치합니다.
max-w-5xl: 콘텐츠의 최대 너비를 제한합니다.
justify-between: 내부 요소를 양쪽 끝에 배치합니다.
px-6: 좌우 안쪽 여백을 추가합니다.
py-4: 위아래 안쪽 여백을 추가합니다.

지금 모든 클래스의 이름을 외울 필요는 없습니다. 코드를 따라 작성하고 미리보기에서 결과를 확인하면서 하나씩 익혀보세요.

2. 홈 페이지 만들기

파일 탐색기에서 다음 홈페이지 파일을 여세요.

/public/+page.essepage

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

<section class="py-20 text-center">
    <p class="text-sm text-rose-600">
        Bloom Flower Studio
    </p>

    <h1 class="mt-3 text-4xl font-bold">
        Flowers for life’s special moments.
    </h1>

    <p class="mx-auto mt-4 max-w-xl text-gray-600">
        We create fresh flowers for gifts,
        celebrations, and everyday spaces.
    </p>

    <a href="/services" class="mt-8 inline-block rounded bg-rose-600 px-5 py-3 text-white">
        View Services
    </a>

    <img
        src="https://images.unsplash.com/photo-1627819797319-6e187b6e9762?auto=format&fit=crop&w=1600&q=80"
        alt="Pink and white flowers in a vase"
        class="mt-12 h-72 w-full rounded object-cover md:h-96"
    >
</section>

<section class="grid gap-4 pb-16 md:grid-cols-3">
    <article class="rounded border p-6">
        <h2 class="font-bold">
            Custom Bouquets
        </h2>

        <p class="mt-2 text-gray-600">
            Fresh bouquets made for any occasion.
        </p>
    </article>

    <article class="rounded border p-6">
        <h2 class="font-bold">
            Weddings & Events
        </h2>

        <p class="mt-2 text-gray-600">
            Floral arrangements for memorable events.
        </p>
    </article>

    <article class="rounded border p-6">
        <h2 class="font-bold">
            Weekly Flowers
        </h2>

        <p class="mt-2 text-gray-600">
            Regular flower delivery for homes and businesses.
        </p>
    </article>
</section>

<section class="border-t py-12 text-center">
    <h2 class="text-2xl font-bold">
        Visit Our Studio
    </h2>

    <p class="mt-3 text-gray-600">
        Monday–Saturday · 10:00–18:00
    </p>

    <a href="/contact" class="mt-4 inline-block text-rose-600">
        Contact Us
    </a>
</section>

파일을 저장하고 오른쪽 미리보기에서 결과를 확인하세요.

홈 페이지에는 다음 영역이 표시됩니다.

꽃집 이름과 소개 문구
서비스 페이지로 이동하는 버튼
세 가지 주요 서비스
영업시간과 연락처 페이지 링크

Tailwind CSS로 디자인하기

첫 번째 영역의 제목에는 다음 클래스가 적용되어 있습니다.

<h1 class="mt-3 text-4xl font-bold">

mt-3: 요소의 위쪽에 여백을 추가합니다.
text-4xl: 글자 크기를 크게 만듭니다.
font-bold: 글자를 굵게 표시합니다.

버튼에는 다음 클래스가 적용되어 있습니다.

<a href="/services" class="mt-8 inline-block rounded bg-rose-600 px-5 py-3 text-white">
    View Services
</a>

이 클래스들은 버튼에 여백, 둥근 모서리, 배경색과 글자색을 적용합니다.

별도의 CSS 선택자를 만들지 않아도 HTML 요소에 클래스를 추가해 디자인할 수 있습니다.

모바일 화면에 대응하기

서비스 목록에는 다음 클래스가 사용되었습니다.

<section class="grid gap-4 pb-16 md:grid-cols-3">

md:grid-cols-3은 화면이 일정 크기 이상일 때 서비스 항목을 세 개의 열로 표시합니다.

작은 화면에서는 항목이 한 줄에 하나씩 표시되고, 넓은 화면에서는 세 개의 항목이 나란히 표시됩니다.

미리보기 화면의 너비를 줄이면서 서비스 목록의 배치가 어떻게 달라지는지 확인해보세요.

3. 서비스 페이지 만들기

이번에는 꽃집에서 제공하는 서비스를 소개하는 페이지를 만들겠습니다.

/public 폴더 안에 다음 폴더를 만드세요.

services

services 폴더 안에 +page.essepage 파일을 만듭니다.

/public/services/+page.essepage

파일을 열고 다음 코드를 붙여넣으세요.

<section class="py-16">
    <h1 class="text-3xl font-bold">
        Our Services
    </h1>

    <p class="mt-3 text-gray-600">
        Flowers created for everyday moments
        and special celebrations.
    </p>

    <div class="mt-10 grid gap-4 md:grid-cols-3">
        <article class="rounded border p-6">
            <h2 class="font-bold">
                Custom Bouquets
            </h2>

            <p class="mt-2 text-gray-600">
                Tell us the occasion and your preferred colors.
                We will create a bouquet just for you.
            </p>
        </article>

        <article class="rounded border p-6">
            <h2 class="font-bold">
                Weddings & Events
            </h2>

            <p class="mt-2 text-gray-600">
                Bouquets and floral decorations
                designed for your special day.
            </p>
        </article>

        <article class="rounded border p-6">
            <h2 class="font-bold">
                Weekly Flowers
            </h2>

            <p class="mt-2 text-gray-600">
                Fresh seasonal flowers delivered
                to your home or workplace.
            </p>
        </article>
    </div>
</section>

<section class="border-t py-12 text-center">
    <h2 class="text-2xl font-bold">
        Looking for something special?
    </h2>

    <a href="/contact" class="mt-6 inline-block rounded bg-rose-600 px-5 py-3 text-white">
        Contact Us
    </a>
</section>

파일을 저장하세요.

이 파일은 다음 주소의 페이지가 됩니다.

/services

4. 연락처 페이지 만들기

이번에는 꽃집의 위치와 영업시간을 안내하는 연락처 페이지를 만들겠습니다.

/public 폴더 안에 다음 폴더를 만드세요.

contact

contact 폴더 안에 +page.essepage 파일을 만듭니다.

/public/contact/+page.essepage

파일을 열고 다음 코드를 붙여넣으세요.

<section class="py-16">
    <h1 class="text-3xl font-bold">
        Contact
    </h1>

    <p class="mt-3 text-gray-600">
        Visit our studio or contact us
        to discuss your flowers.
    </p>

    <div class="mt-10 grid gap-8 md:grid-cols-2">
        <div>
            <h2 class="font-bold">
                Location
            </h2>

            <p class="mt-3 text-gray-600">
                Champ de Mars<br>
                5 Avenue Anatole France<br>
                75007 Paris, France
            </p>

            <h2 class="mt-6 font-bold">
                Opening Hours
            </h2>

            <p class="mt-3 text-gray-600">
                Monday–Friday · 10:00–18:00<br>
                Saturday · 10:00–16:00<br>
                Sunday · Closed
            </p>

            <a href="mailto:hello@bloom.example" class="mt-8 inline-block rounded bg-rose-600 px-5 py-3 text-white">
                Send an Email
            </a>
        </div>

        <iframe
            src="https://maps.google.com/maps?output=embed&q=Eiffel+Tower%2C+Paris%2C+France"
            title="Map showing the Eiffel Tower in Paris"
            loading="lazy"
            allowfullscreen
            referrerpolicy="strict-origin-when-cross-origin"
            class="h-80 w-full rounded border"
        ></iframe>
    </div>
</section>

파일을 저장하세요.

이 파일은 다음 주소의 페이지가 됩니다.

/contact

Google 지도 삽입하기

연락처 페이지에는 <iframe>을 사용해 Google 지도를 삽입했습니다.

<iframe
    src="https://maps.google.com/maps?output=embed&q=Eiffel+Tower%2C+Paris%2C+France"
    title="Map showing the Eiffel Tower in Paris"
    loading="lazy"
    allowfullscreen
    referrerpolicy="strict-origin-when-cross-origin"
    class="h-80 w-full rounded border"
></iframe>

src의 q에는 지도에서 표시할 장소가 들어갑니다.

현재 예제에서는 에펠탑이 표시되도록 다음 값이 사용되었습니다.

Eiffel+Tower%2C+Paris%2C+France

다른 장소를 표시하고 싶다면 이 부분을 자신의 매장 이름이나 주소로 변경할 수 있습니다.

지도에는 다음 Tailwind CSS 클래스가 적용되어 있습니다.

h-80 w-full rounded border

h-80: 지도의 높이를 지정합니다.
w-full: 지도를 사용할 수 있는 전체 너비로 표시합니다.
rounded: 모서리를 둥글게 만듭니다.
border: 지도에 테두리를 추가합니다.

md:grid-cols-2가 적용되어 있으므로 넓은 화면에서는 연락처 정보와 지도가 나란히 표시되고, 작은 화면에서는 위아래로 표시됩니다.

5. 새 페이지 공개하기

홈페이지는 프로젝트를 만들 때 이미 공개되어 있지만, 새로 만든 서비스와 연락처 페이지는 아직 공개되지 않은 상태입니다.

다음 두 페이지 파일을 각각 공개하세요.

/public/services/+page.essepage
/public/contact/+page.essepage

각 파일을 공개하는 방법은 다음과 같습니다.

파일 탐색기에서 +page.essepage 파일을 마우스 오른쪽 버튼으로 클릭합니다.
공개(Publish)를 선택합니다.
다른 페이지 파일도 같은 방법으로 공개합니다.

새 페이지를 처음 공개한 뒤 다시 수정하면 메뉴가 변경사항 적용(Apply Changes)으로 바뀝니다.

6. 미리보기에서 웹사이트 확인하기

오른쪽 미리보기 화면의 상단에서 홈 아이콘을 선택해 홈페이지를 여세요.

다음 내용을 차례대로 확인합니다.

홈페이지에 꽃집 이름과 세 가지 서비스가 표시되는지 확인합니다.
View Services 버튼을 선택해 /services 페이지로 이동합니다.
상단 메뉴에서 Contact를 선택합니다.
/contact 페이지에 주소, 영업시간과 Google 지도가 표시되는지 확인합니다.
화면의 너비를 줄여 서비스 목록과 연락처 영역의 배치가 변경되는지 확인합니다.
페이지를 이동해도 상단 메뉴와 하단 푸터가 유지되는지 확인합니다.

7. 모든 변경사항 적용하기

미리보기에서 모든 페이지가 제대로 표시된다면 저장된 변경사항을 공개 사이트에 반영합니다.

이번에는 홈페이지와 공통 레이아웃을 함께 변경했으므로 전체 적용(Apply All)을 사용합니다.

에디터 상단에서 전체 적용(Apply All)을 선택하세요.

적용이 끝나면 다음 방법으로 공개된 웹사이트를 확인할 수 있습니다.

에디터에서 페이지(Page) → 홈페이지 열기(Open Homepage) 선택하기
프로젝트 대시보드에서 사이트 주소(Site URL) 열기
각 페이지 파일에서 페이지 열기(Open Page) 선택하기

공개된 웹사이트에서 메뉴와 버튼을 선택해 세 페이지가 모두 정상적으로 열리는지 확인하세요.

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

웹사이트를 완성했습니다

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

Tailwind CSS 불러오기
Tailwind CSS 클래스로 페이지 디자인하기
홈, 서비스와 연락처 페이지 만들기
공통 레이아웃으로 메뉴와 푸터 관리하기
반응형 그리드로 화면 크기에 따라 콘텐츠 배치하기
Google 지도로 매장 위치 표시하기
새 페이지를 공개하고 전체 변경사항 적용하기

이번 튜토리얼에서는 별도의 CSS를 직접 작성하지 않고 Tailwind CSS 클래스만 사용해 웹사이트를 디자인했습니다.

이제 예제의 꽃집 이름, 서비스, 주소와 영업시간을 자신이 운영하는 비즈니스의 정보로 변경해보세요. 버튼과 배경색에 사용된 rose를 다른 색상으로 변경해 사이트의 분위기를 바꿔볼 수도 있습니다.

다음 단계

비즈니스 웹사이트를 완성했다면 다음 문서로 넘어가세요.

파일과 URL의 연결 방식을 자세히 알고 싶다면: 페이지와 URL 구성하기
레이아웃과 재사용 요소를 자세히 알아보고 싶다면: 레이아웃과 컴포넌트
페이지의 디자인 방식을 알아보고 싶다면: 스타일과 Tailwind CSS
페이지를 공개하고 관리하는 방법을 알고 싶다면: 공개와 사이트 관리

언어

목차

Title

전체 코드

시작하기 전에

1. 공통 레이아웃 만들기

Tailwind CSS 불러오기

2. 홈 페이지 만들기

Tailwind CSS로 디자인하기

모바일 화면에 대응하기

3. 서비스 페이지 만들기

4. 연락처 페이지 만들기

Google 지도 삽입하기

5. 새 페이지 공개하기

6. 미리보기에서 웹사이트 확인하기

7. 모든 변경사항 적용하기

웹사이트를 완성했습니다

다음 단계

목차