페이지 종류
레이니 홈페이지는 세 종류의 페이지로 구성됩니다. 메인 페이지, 리스트 페이지, 디테일 페이지입니다. 각 페이지의 역할과 어울리는 레이아웃을 설명합니다.
세 가지 페이지 유형
메인 페이지
브랜드의 첫인상을 결정하는 페이지입니다. 히어로 섹션, 서비스 소개, 의료진 하이라이트, 통계, 후기, 오시는 길 등 여러 섹션을 자유롭게 배치합니다. Entity Schema 하나에 묶이지 않고 여러 Schema의 데이터를 조합해 구성합니다.
위 이미지처럼, 메인 페이지의 각 섹션은 서로 다른 Entity Schema에서 데이터를 가져옵니다. 통계 섹션은 Stat Schema에서, 시술 소개는 Product Schema에서, 의료진 하이라이트는 Team Member Schema에서 각각 데이터를 가져와 카드로 표시합니다.
리스트 페이지 (목록 페이지)
특정 Entity Schema에 속한 모든 Entity를 카드 형태로 나열하는 페이지입니다. "시술" Schema를 등록하면 /treatments 경로에 시술 목록 페이지가 자동으로 생깁니다. 새 Entity를 추가하면 카드가 늘어나고, 삭제하면 사라집니다.
디테일 페이지 (상세 페이지)
각 Entity마다 자동으로 만들어지는 개별 페이지입니다. 보톡스 Entity를 등록하면 /treatments/botox처럼 슬러그 기반 URL로 상세 페이지가 생깁니다. Relations로 연결된 데이터(담당 의료진, 카테고리, 시술 후 안내)도 함께 표시됩니다.
디테일 페이지의 각 영역은 해당 Entity 자체 데이터와 Relations로 연결된 다른 Entity 데이터를 함께 보여줍니다. 예를 들어 "반영구 문신" 디테일 페이지에서 "이런 분께 추천해요"는 Target Condition Entity에서, 시술 방법은 Method Entity에서, 관련 시술 추천은 Product Entity에서 가져옵니다. 대시보드에서 어느 한 Entity를 수정하면 이 페이지에도 즉시 반영됩니다.
섹션 구성 방식
홈페이지는 섹션(Section) 단위로 구성됩니다. 각 섹션은 독립적인 블록이며 순서를 자유롭게 배치할 수 있습니다.
| 순서 | 섹션 예시 | 레이아웃 |
|---|---|---|
| 1 | 히어로 | 전체 화면 |
| 2 | 서비스 소개 | 그리드 |
| 3 | 성공사례 | 캐러셀 |
| 4 | 통계 | 스탯 카드 |
| 5 | 팀 소개 | 프로필 카드 |
| 6 | 오시는 길 | 리스트 |
각 섹션은 독립적으로 레이아웃 타입, 카드 디자인, 배경 스타일, 헤더 크기 및 정렬, 애니메이션 효과, CTA 버튼, 높이 및 여백을 설정할 수 있습니다.
10가지 레이아웃 타입
각 섹션에 적용할 수 있는 레이아웃은 10종입니다. 기본 레이아웃, 인터랙티브 레이아웃, 콘텐츠 특화 레이아웃으로 나뉩니다.
기본 레이아웃
| 레이아웃 | 설명 | 추천 용도 |
|---|---|---|
| 그리드 | 반응형 격자 배열, 벤토(비대칭) 레이아웃 지원 | 서비스, 포트폴리오, 팀 소개 |
| 캐러셀 | 좌우 스와이프, 자동 재생 지원 | 서비스 하이라이트, 후기 |
| 무한 스크롤 | 끊김 없이 연속 흐르는 애니메이션 | 고객사 로고, 후기, 파트너 |
| 리스트 | 세로 목록, 구분선 지원 | 위치 안내, FAQ, 공지사항 |
인터랙티브 레이아웃
| 레이아웃 | 설명 | 추천 용도 |
|---|---|---|
| 스택 | 스크롤 시 카드가 겹치며 쌓이는 효과 | 핵심 장점, 브랜드 스토리 |
| 가로 스크롤 | 세로 스크롤 시 가로로 이동하는 패럴랙스 | 타임라인, 프로세스 안내 |
| 스텝 안내 | 좌측 단계 목록 + 우측 이미지, 자동 전환 | 절차 안내, 서비스 플로우 |
콘텐츠 특화 레이아웃
| 레이아웃 | 설명 | 추천 용도 |
|---|---|---|
| 통계 카드 | 숫자 강조 + 이미지 교차 배치, 호버 애니메이션 | 실적, 경력, 핵심 수치 |
| 상세 콘텐츠 | 본문 렌더링 + 목차 사이드바 | 상세 소개, 블로그, 안내문 |
디테일 페이지에서 Entity의 긴 설명 본문을 표시할 때는 상세 콘텐츠 레이아웃이 잘 맞습니다. 목차 사이드바가 자동으로 생성되어 긴 내용을 탐색하기 쉽습니다.
페이지 종류별 레이아웃 선택 가이드
| 페이지 종류 | 적합한 레이아웃 | 이유 |
|---|---|---|
| 메인 페이지 히어로 | 전체 화면(그리드) | 첫인상, 강한 시각적 임팩트 |
| 메인 페이지 서비스 강조 | 스택, 가로 스크롤 | 인터랙션으로 관심 유도 |
| 메인 페이지 실적 | 통계 카드 | 숫자로 신뢰감 전달 |
| 메인 페이지 후기 | 무한 스크롤, 캐러셀 | 많은 후기를 부드럽게 전달 |
| 리스트 페이지 | 그리드, 캐러셀 | 카드 목록을 체계적으로 나열 |
| 디테일 페이지 본문 | 상세 콘텐츠 | 긴 설명 + 목차 탐색 |
| 오시는 길, FAQ | 리스트 | 항목별 정보 명확하게 전달 |
| 시술 플로우, 절차 | 스텝 안내 | 단계별 정보 자동 전환 |
조합 예시
클리닉 홈페이지
| 섹션 | 레이아웃 | 카드 | 배경 | 비고 |
|---|---|---|---|---|
| 히어로 | 전체 화면 | - | 이미지 | CTA: "온라인 예약" |
| 시술 안내 | 스텝 안내 | - | 기본 | 자동 전환 5초 |
| 비포&애프터 | 캐러셀 | 기본 카드 | 뮤트 | 비율: 정사각형 |
| 핵심 장점 | 스택 | 피처 | 기본 | 스크롤 연동 애니메이션 |
| 의료진 소개 | 그리드 | 프로필 | 기본 | - |
| 무한 후기 | 무한 스크롤 | 애플 아티클 | 기본 | 호버 시 일시정지 |
법률사무소 홈페이지
| 섹션 | 레이아웃 | 카드 | 배경 | 비고 |
|---|---|---|---|---|
| 히어로 | 전체 화면 | - | 다크 그라데이션 | CTA: "무료 상담 예약" + "전화 상담" |
| 업무분야 소개 | 캐러셀 | 피처 | 기본 | 비율: 세로 |
| 승소사례 | 그리드 (벤토) | 아티클 | 뮤트 | 비율: 16:9 |
| 실적 통계 | 통계 카드 | - | 기본 | 숫자 강조 |
| 변호사 소개 | 그리드 | 프로필 | 기본 | 비율: 정사각형 |
| 오시는 길 | 리스트 | 미니멀 | 뮤트 | - |