섹션·컴포넌트 예시

레이니 홈페이지는 컴포넌트 기반 시스템으로 제작됩니다. 섹션 단위로 레이아웃, 카드 스타일, 배경, 애니메이션을 조합해 브랜드와 목적에 맞는 페이지를 구성할 수 있습니다. 별도 개발 없이 디자인을 바꿀 수 있으며, 한국어·영어·일본어·중국어 4개 국어를 지원합니다.

사전 준비

섹션 구성을 시작하기 전에 아래 항목이 준비되어 있는지 확인하세요.

Entity 등록 완료 (시술, 의료진, 카테고리 등): 섹션은 Entity 데이터를 참조하므로, 먼저 등록되어 있어야 홈페이지에 표시됨
대표 이미지·로고 파일: 히어로 배경, 시술 카드 이미지 등에 사용
병원 브랜드 색상 코드: 섹션 배경·버튼 색상 지정
메인 CTA 문구 결정: "온라인 예약", "무료 상담 예약" 등 — 히어로 섹션 버튼
노출할 섹션 순서 기획: 히어로 → 시술 소개 → 의료진 → 후기 → 오시는 길 등

관리자 AI로 섹션 수정하기

홈페이지 디자인은 관리자 AI 채팅으로 수정하는 것을 권장합니다. 아래와 같이 자연어로 요청하면 됩니다.

"메인 페이지 섹션 구성을 보여줘"
"히어로 섹션 배경을 다크 그라데이션으로 바꿔줘"
"시술 소개 섹션의 카드 스타일을 프로덕트로 변경해줘"
"CTA 버튼 텍스트를 '무료 상담 예약'으로 바꿔줘"
"구성원 소개 섹션을 시술 소개 위로 올려줘"
"네비게이션에 '이벤트' 메뉴를 추가해줘"

섹션 구성 방식

홈페이지는 섹션 단위로 구성됩니다. 각 섹션은 하나의 독립적인 블록이며, 순서를 자유롭게 배치할 수 있습니다.

순서	섹션 예시	레이아웃
1	히어로	전체 화면
2	서비스 소개	그리드
3	성공사례	캐러셀
4	통계	스탯 카드
5	팀 소개	프로필 카드
6	오시는 길	리스트

각 섹션은 독립적으로 레이아웃 타입, 카드 디자인, 배경 스타일, 헤더 크기 및 정렬, 애니메이션 효과, CTA 버튼, 높이 및 여백을 설정할 수 있습니다.

레이아웃·카드 변경 예시

레이아웃 바꾸기

"시술 소개 섹션의 레이아웃을 캐러셀로 바꿔줘"
"의료진 소개를 그리드 3열로 바꿔줘"
"이벤트 섹션을 무한 스크롤 배너로 변경해줘"

레이아웃 타입은 전체 화면, 그리드, 캐러셀, 스탯, 리스트, 스택, 무한 스크롤 등 10종을 지원합니다.

카드 스타일 바꾸기

섹션 안에 카드가 있는 경우, 카드 스타일도 변경할 수 있습니다.

"시술 소개 카드를 프로덕트 스타일로 바꿔줘"
"후기 섹션 카드를 애플 아티클 스타일로 변경해줘"
"의료진 소개를 프로필 카드로 바꿔줘"

7종의 카드 스타일을 지원합니다: 기본 카드, 프로덕트, 프로필, 피처, 애플 아티클, 미니멀, 와이드.

클리닉 홈페이지 섹션 구성 예시

병원 홈페이지에서 자주 사용하는 섹션 조합입니다.

섹션	레이아웃	카드	배경	비고
히어로	전체 화면	-	이미지	CTA: "온라인 예약"
시술 안내	스텝 안내	-	기본	자동 전환 5초
비포&애프터	캐러셀	기본 카드	뮤트	비율: 정사각형
핵심 장점	스택	피처	기본	스크롤 연동 애니메이션
의료진 소개	그리드	프로필	기본	-
무한 후기	무한 스크롤	애플 아티클	기본	호버 시 일시정지

커스터마이징 가능 범위 요약

레이아웃과 카드, 배경만 조합해도 560가지 이상의 섹션 디자인이 나오고, 세부 설정까지 더하면 조합은 사실상 무제한입니다.

커스터마이징 영역	가능한 변형 수
레이아웃 타입	10종
카드 디자인	7종
배경 스타일	8종
이미지 비율	5종
헤더 크기	5단계
높이 옵션	4종
여백 옵션	5단계
애니메이션	5종
CTA 동작	4종

브랜드 가이드라인(색상, 폰트, 로고)을 적용하고 콘텐츠를 배치하면, 별도 개발 없이도 전문적인 홈페이지를 구성할 수 있습니다.

확인 사항

히어로 섹션 CTA 버튼 문구가 예약 시스템과 연결되어 있는지 확인
시술 소개 섹션에 Entity에 등록된 시술이 모두 표시되는지 확인
의료진 소개 섹션이 의료진 Entity 데이터를 정확히 참조하는지 확인
모바일 화면에서 섹션 레이아웃이 올바르게 보이는지 확인