섹션 유형별 모양 미리보기

홈페이지의 한 페이지는 여러 섹션을 위에서 아래로 쌓아 만듭니다. 섹션은 보여 줄 콘텐츠와 그 콘텐츠를 늘어놓는 배치로 이루어집니다. 이 문서는 섹션 유형별로 Laney가 쓰는 배치를 모두 모아, 열 수, 사진 비율, 제목 위치, 폭처럼 옵션을 바꾼 모습까지 실제 화면으로 보여 줍니다.

배치를 바꾸는 방법은 홈페이지 수정하기를 참고하세요. AI에게 요청할 때에는 이 문서의 모양 이름이나 괄호 안의 배치 값을 그대로 말하면 됩니다.

이 자료가 돕는 판단

같은 내용이라도 항목 수, 사진이 있는지, 글이 얼마나 긴지에 따라 알맞은 모양이 다릅니다. 어떤 모양은 항목 수가 맞아야만 쓸 수 있습니다. 예를 들어 카드 3열은 항목이 3개나 6개일 때 빈칸 없이 채워지고, 한 장씩 크게 넘기기는 항목이 5개 이상일 때 씁니다. 모양마다 이런 조건을 함께 적었습니다. 배치를 바꿔도 문구와 사진은 그대로 남기 때문에 부담 없이 비교할 수 있습니다.

예시: 한 의원의 시술 페이지. 첫 화면은 콘텐츠 섹션의 사진 배경 첫 화면으로 두고, 특징 세 가지는 기능 섹션의 사진과 글 번갈아로, 진행 과정 세 단계는 단계 섹션의 번호 가로 단계로 둡니다. 과정이 네 단계로 늘면 번호 가로 단계에 빈칸이 생기므로 세로 타임라인으로 바꿉니다.

콘텐츠 섹션: 첫 화면과 띠

콘텐츠 섹션(content)은 제목, 설명, 버튼을 사진이나 색 띠 위에 올립니다. 페이지 첫 화면, 중간 상담 권유, 마지막 예약 안내에 씁니다. 하위 항목 없이 섹션 하나로 완성됩니다.

사진 배경 첫 화면 (사진 배경 켜기, 크기 lg)

사진을 화면 가득 깔고 위에 제목과 버튼을 올립니다. 페이지 첫 화면의 기본 모양입니다.

사진 배경 띠 (사진 배경 켜기)

페이지 중간에 낮은 사진 띠를 넣어 흐름을 끊고 상담을 권합니다.

흐린 사진 배경 띠 (사진 배경 켜기, backdrop soft, screen rounded)

사진을 옅게 깔아 질감처럼 보이게 합니다. 글자는 진한 색 그대로입니다.

제목 아래 큰 사진 (사진 배경 끄기, 사진 표시 켜기)

제목과 설명을 먼저 보여 주고 아래에 사진을 크게 둡니다. 원장 소개나 칼럼처럼 사람이나 글이 주인공인 첫 화면에 씁니다. 사진 위에 글자가 올라가지 않아 얼굴과 사진이 잘 보입니다.

회색 바탕 단일 소개 (사진 배경 끄기, 사진 표시 켜기, 배경색 muted)

장비나 시술 하나를 회색 바탕에 사진과 함께 소개합니다. 소개할 항목이 하나뿐일 때 카드 모음 대신 씁니다.

회색 바탕 문구 띠 (배경색 muted)

사진 없이 문구와 버튼만 둡니다. 페이지 중간의 상담 권유에 씁니다.

테마 색 마지막 띠 (배경색 primary, 정렬 center)

테마 대표색 위에 예약 버튼과 상담 버튼을 둡니다. 페이지 마지막에 한 번만 씁니다.

기능 섹션: 여러 항목 보여 주기

기능 섹션(features)은 시술, 장비, 의료진, 진료 원칙처럼 항목이 여러 개인 내용을 보여 줍니다. 같은 항목이라도 배치를 바꿔 다른 모양으로 보여 줄 수 있습니다. 다만 배치마다 알맞은 항목 수가 정해져 있습니다. 아래 모양 설명에 조건을 함께 적었습니다.

카드 모음 열 수와 사진 비율

카드 모음(grid)은 열 수와 사진 비율을 바꿔 가장 넓게 쓰는 모양입니다. 항목 수가 열 수로 나누어떨어져야 마지막 줄에 빈칸이 생기지 않습니다. 항목이 9개 이상이면 카드 모음 대신 옆으로 넘어가는 카드를 씁니다. 목록 페이지에서는 9개 이상도 카드 모음으로 펼칠 수 있습니다.

카드 2열 (grid, 열 2)

카드를 한 줄에 둘씩 놓습니다. 항목이 2개나 4개일 때 씁니다.

카드 3열 (grid, 열 3)

카드를 한 줄에 셋씩 놓습니다. 항목이 3개, 6개, 9개일 때 씁니다.

카드 4열 (grid, 열 4)

작은 카드를 한 줄에 넷씩 놓습니다. 장비 목록처럼 항목이 8개일 때 씁니다. 4개는 2열 두 줄로 두는 것이 기본입니다.

세로로 긴 사진 카드 (grid, 사진 비율 tall)

사진을 세로로 길게 잘라 인물이나 전신 사진에 맞춥니다.

가로로 넓은 사진 카드 (grid, 사진 비율 video)

사진을 가로로 넓게 잘라 공간이나 장면 사진에 맞춥니다. 사진 비율은 square, photo, video, wide, tall 중에서 고릅니다.

항목 하나 크게 (grid, 열 1, 나란히 켜기)

항목이 하나뿐일 때 제목 옆에 사진 카드 하나를 크게 둡니다. 항목이 하나인 카드 모음은 반드시 열을 1로, 나란히를 켜 둡니다.

사진 카드와 사진 모음

제목 아래 사진 카드 3열 (photo-card, 열 3)

카드 제목 아래에 사진을 붙여, 배경을 지운 사진이나 캐릭터가 제목과 한 덩어리로 보입니다. 항목 수는 열 수로 나누어떨어져야 합니다. 3열이면 3개나 6개입니다.

제목 아래 사진 카드 4열 (photo-card, 열 4)

추천 대상처럼 고민 네 가지를 한 줄로 보여 줍니다. 4개나 8개일 때 씁니다.

테두리 없는 사진 3열 (gallery, 열 3)

카드 테두리 없이 사진과 설명만 가볍게 놓습니다. 진료 원칙의 일러스트처럼 사진 비율을 살리고 싶을 때 씁니다. 항목 수는 열 수로 나누어떨어져야 합니다.

테두리 없는 사진 2열 (gallery, 열 2)

같은 모양을 한 줄에 둘씩 크게 놓습니다. 항목이 2개나 4개일 때 씁니다.

대표 사진 강조 (showcase)

섹션의 대표 사진 한 장을 크게 두고 항목을 함께 보여 줍니다. 항목 수는 3개나 6개처럼 3의 배수여야 합니다.

크기가 다른 사진 모음 (bento)

사진 세 장을 잡지처럼 크기를 섞어 놓습니다. 항목은 정확히 3개이고, 모든 항목에 사진이 있어야 합니다. 같은 페이지에 옆으로 넘기는 섹션이 많을 때 섞어 쓰면 페이지가 단조롭지 않습니다.

겹쳐 놓은 사진 (collage)

사진 세 장을 살짝 기울여 겹쳐 놓습니다. 항목은 정확히 3개입니다.

사진 위에 글자

큰 사진 하나와 작은 사진 둘 (overlay)

세 항목 중 하나를 크게 강조하고 사진 위에 제목을 올립니다. 항목은 정확히 3개이고, 모든 항목에 사진이 있어야 합니다.

사진 위 글자 타일 (overlay-grid, 열 2)

같은 크기의 사진 타일 위에 제목을 올립니다. 항목은 2개나 4개이고, 나란히는 끕니다.

사진 위 글자, 한 장씩 쌓기 (overlay-grid, 열 1, 나란히 켜기, 사진 비율 video)

제목 옆에 넓은 사진 타일을 하나씩 쌓습니다. 항목은 4개까지이고, 한 페이지에 한 번만 씁니다.

옆으로 넘기기

옆으로 넘기는 모양은 항목이 2개일 때 쓰지 않습니다. 2개면 카드 2열이나 사진과 글 번갈아로 둡니다.

옆으로 넘어가는 카드 (carousel)

카드가 자동으로 넘어갑니다. 장비나 관련 시술처럼 항목이 많은 목록에 씁니다. 항목은 3개 이상이고, 9개 이상이면 이 모양이 기본입니다.

화면 끝까지 넘어가는 카드 (carousel, 폭 full)

카드 줄이 화면 양끝까지 이어집니다. 병원 공간 사진에 씁니다.

한 장씩 크게 넘기기 (slider)

한 항목씩 크게 보여 주고 화살표로 넘깁니다. 항목이 5개 이상일 때 씁니다.

넓은 사진 넘기기 (gallery-track)

전후 사진처럼 가로로 긴 사진을 자르지 않고 옆으로 넘깁니다. 항목은 3개 이상입니다. 전후 사진은 실제 사진만 쓰고, 환자 동의와 의료광고 기준을 먼저 확인하세요.

세로 영상 (reels)

짧은 세로 영상을 나란히 놓고 옆으로 넘깁니다. 항목은 3개 이상입니다.

영상 카드 (video, 열 2)

유튜브 영상을 눌러서 재생하는 카드로 보여 줍니다. 항목 수는 열 수로 나누어떨어져야 합니다.

사람과 이야기

의료진 카드 (team, 열 3)

원장님 사진과 이름, 직함을 나란히 보여 줍니다. 인원 수는 열 수로 나누어떨어져야 합니다.

사진과 글 번갈아 (zigzag)

사진과 설명이 좌우로 번갈아 나옵니다. 특징이 4개 이하일 때의 기본 모양입니다. 항목은 5개 이하이거나 짝수여야 하고, 5개를 넘기면 페이지가 길어집니다. 나란히는 끕니다.

원장님 한 분씩 길게 (zigzag, 의료진 항목)

의료진이 한두 분일 때 사진과 약력을 번갈아 길게 보여 줍니다.

사진 연혁 (timeline)

사진 액자가 가운데 선을 따라 이어집니다. 학회 활동이나 병원 역사에 씁니다.

글 중심 목록

한 줄 목록 (list, 목록 모양 minimal)

진료 시간, 주소, 주차처럼 짧은 정보를 줄마다 나열합니다. 항목이 하나뿐이면 쓰지 않습니다.

제목 옆 한 줄 목록 (list, 목록 모양 minimal, 나란히 켜기)

제목을 왼쪽에, 목록을 오른쪽에 둡니다. 시술 시간, 마취, 회복 기간 같은 한눈에 보기 정보에 어울립니다.

아이콘 목록 (list, 목록 모양 feature)

항목마다 작은 아이콘이 붙습니다. 특징이 7개 이상일 때 씁니다. 5개나 6개면 뜻이 겹치는 항목을 합쳐 4개로 줄이고 사진과 글 번갈아로 두는 것이 먼저입니다.

사진 붙은 목록 (list, 목록 모양 split)

줄마다 사진과 설명이 좌우로 놓입니다. 함께 보는 시술처럼 다른 페이지로 이어지는 목록에 씁니다.

눌러서 펼치는 목록 (accordion)

제목을 누르면 설명이 펼쳐지고 옆의 사진이 바뀝니다. 나란히는 끕니다.

번호 붙은 펼침 목록 (accordion-numbered, 나란히 켜기)

순서가 있는 설명을 번호와 함께 접어 둡니다. 진행 과정이 4단계 이상이고 단계마다 설명이 길 때 씁니다. 이 모양은 항상 나란히를 켭니다.

눌러서 넓어지는 카드 (expandable)

카드를 누르면 넓어지며 설명이 보입니다. 항목은 4개까지이고, 나란히는 끕니다.

탭으로 나눠 보기 (tabs)

항목 이름을 누르면 사진과 설명이 바뀝니다. 항목은 4개 이하이거나 짝수여야 하고, 나란히는 끕니다.

단계 섹션: 순서 안내

단계 섹션(steps)은 상담부터 귀가까지, 주의사항 묶음처럼 순서가 있는 내용을 보여 줍니다. 단계는 2개 이상이어야 합니다.

번호 가로 단계 (row-numbered)

단계 번호를 크게 두고 가로로 놓습니다. 한 줄에 셋씩 놓이므로 단계가 3개나 6개일 때 씁니다.

칸 나눈 단계 (grid-divided)

단계를 칸으로 나눠 한 줄에 셋씩 놓습니다. 단계가 3개나 6개일 때 씁니다.

세로 타임라인 (timeline, 나란히 켜기)

단계를 세로 선을 따라 보여 줍니다. 4단계나 5단계처럼 가로 단계에 빈칸이 생길 때 씁니다. 이 모양은 항상 나란히를 켭니다.

주의사항 묶음 (timeline, 나란히 켜기, 크기 sm)

시술 전 확인, 시술 당일, 회복 과정, 시술 후 관리처럼 묶어서 보여 줍니다. "시술 후 관리"와 "주의사항"이 따로 있으면 한 섹션으로 합칩니다.

세로로 쌓은 단계 (stack, 나란히 켜기)

단계마다 설명이 길 때 씁니다. 이 모양도 항상 나란히를 켭니다.

자주 묻는 질문 섹션

눌러서 펼치는 질문 (accordion, 나란히 켜기)

제목 옆에 질문 목록을 두고, 질문을 누르면 답이 보입니다. 첫 질문을 펼친 채로 둘 수 있습니다(defaultOpen). 자주 묻는 질문 섹션은 이 모양 하나만 쓰고, 나란히를 항상 켭니다.

통계 섹션

통계 섹션(stats)은 출처가 확인된 숫자만 씁니다.

숫자 한 줄 (strip)

숫자 서너 개를 한 줄로 보여 줍니다. 숫자는 2개 이상이고, 5개 이상이면 4개씩 줄이 채워지도록 8개로 맞춥니다.

추천사 섹션: 후기

추천사 섹션(testimonials)은 병원이 게시를 허락한 후기만 씁니다. 환자 후기는 의료광고 기준을 먼저 확인하세요. 후기 수는 열 수(기본 3)로 나누어떨어지게 맞춥니다.

후기 카드 (grid, 열 3)

후기를 카드로 나란히 보여 줍니다.

후기 하나 크게 (spotlight)

대표 후기 하나를 크게 보여 줍니다.

사례 소개 (case-study)

사진과 함께 사례를 길게 소개합니다.

후기 넘기기 (slider)

후기를 한 장씩 넘겨 봅니다.

로고 섹션과 흐르는 로고 띠

로고 섹션(logos)과 흐르는 로고 띠(marquee)는 학회, 제휴 기관, 언론 로고에 씁니다.

로고 모음 (grid, 열 3)

로고를 칸에 맞춰 놓습니다. 로고 수는 열 수로 나누어떨어져야 합니다.

칸 나눈 로고 (grid-bordered, 열 3)

로고마다 테두리 칸을 둡니다. 로고 수는 열 수로 나누어떨어져야 합니다.

로고 카드 (cards, 열 3)

로고를 카드에 하나씩 담습니다. 로고 수는 열 수로 나누어떨어져야 합니다.

둘러싼 로고 (orbit)

로고가 가운데를 둘러쌉니다. 로고가 6개 이상일 때 씁니다.

퍼져 나가는 로고 (radial)

로고가 가운데에서 퍼져 나가듯 놓입니다. 로고가 6개 이상일 때 씁니다.

선으로 이은 로고 (connector)

로고를 선으로 이어 연결 관계를 보여 줍니다.

흐르는 로고 띠 (marquee)

로고가 화면 끝에서 끝까지 천천히 흘러갑니다.

글 본문 섹션: 긴 글

글 본문 섹션(markdown)은 칼럼, 시술 원리, 원장 약력처럼 긴 글에 씁니다. 소제목이 둘 이상이면 목차가 옆에 붙습니다. 한 페이지에 하나만 둡니다. 이 섹션은 현재 대시보드의 섹션 화면에서 추가할 수 없으니, 글을 옮기거나 올리려면 Laney 담당자에게 요청하세요.

목차가 있는 긴 글 (기본)

글 옆에 소제목 목차가 따라다닙니다.

도해가 있는 설명 글 (대표 사진 cover, 나란히 켜기)

글 위에 넓은 도해를 두고 시술 원리를 설명합니다.

사진이 있는 소개 글 (대표 사진 avatar)

둥근 프로필 사진과 함께 약력을 글로 보여 줍니다.

상품 섹션: 가격표

상품 섹션(products)은 상품 화면에 등록한 가격을 그대로 보여 줍니다. 구성 방법은 커머스형 랜딩페이지 구성하기를 참고하세요.

가격 카드 (grid, 열 3)

시술과 가격을 카드로 보여 줍니다.

가격 목록 (list)

시술과 가격을 줄마다 보여 줍니다.

쓰지 않는 모양

다음 배치는 렌더러에는 있지만 Laney 홈페이지 구성 규칙에서 쓰지 않습니다. 이미 쓰고 있다면 오른쪽 모양으로 바꾸세요.

제목을 왼쪽에 두기

나란히(split) 옵션을 켜면 섹션 제목과 설명이 왼쪽에, 항목이 오른쪽에 놓입니다. 페이지의 세로 길이가 줄고, 가운데 정렬 섹션과 번갈아 쓰면 리듬이 생깁니다.

모양에 따라 나란히가 정해진 경우가 있습니다.

• 항상 켭니다: 자주 묻는 질문, 단계 섹션의 세로 타임라인과 세로로 쌓은 단계, 번호 붙은 펼침 목록, 항목이 하나인 카드 모음, 사진 위 글자 한 장씩 쌓기
• 항상 끕니다: 눌러서 펼치는 목록, 눌러서 넓어지는 카드, 탭으로 나눠 보기, 사진과 글 번갈아, 큰 사진 하나와 작은 사진 둘, 크기가 다른 사진 모음, 사진 위 글자 타일, 번호 가로 단계, 칸 나눈 단계
• 고를 수 있습니다: 한 줄 목록, 항목이 2개 이상인 카드 모음

고를 수 있는 모양에서 끈 모습(왼쪽)과 켠 모습(오른쪽)입니다.

한 줄 목록

카드 모음

콘텐츠 섹션에서는 나란히를 켜도 제목이 왼쪽으로 정렬될 뿐 모양이 거의 달라지지 않습니다.

조절할 수 있는 것

어느 섹션에서나 쓰는 옵션입니다. 섹션 화면의 옵션에서 바꾸거나 AI에게 요청하세요.

카드와 목록을 쓰는 기능 섹션에는 다음 옵션이 더 있습니다.

자주 묻는 질문 섹션은 첫 질문 펼치기(defaultOpen)와 여러 질문 동시에 펼치기(allowMultiple), 단계 섹션은 단계 사이 표시(connector), 통계 섹션은 숫자가 올라가는 효과(animate)를 바꿀 수 있습니다.