섹션과 컴포넌트
레이니 홈페이지는 컴포넌트 기반 시스템으로 제작됩니다. 섹션 단위로 카드 스타일, 배경, 애니메이션 등을 조합해 페이지를 구성합니다. 레이아웃 타입은 10종이며, 여기서는 각 섹션 안을 채우는 구성 요소(카드 디자인, 배경 스타일, 애니메이션, CTA 버튼, 네비게이션, 반응형 지원)를 설명합니다.
카드 디자인 (7종)
콘텐츠를 표시하는 카드 스타일입니다. 같은 Entity 데이터라도 카드 스타일에 따라 느낌이 달라집니다.
| 카드 | 설명 | 추천 용도 |
|---|---|---|
| 기본 카드 | 이미지 + 제목 + 설명 | 범용 (서비스, 사례) |
| 아티클 | 블로그/뉴스 스타일 | 소식, 칼럼, 사례 |
| 애플 아티클 | 미니멀 디자인, 텍스트 중심 | 브랜드 스토리, 에세이 |
| 프로필 | 원형 사진 + 이름 + 소개 | 팀 소개, 전문가 소개 |
| 프로덕트 | 이미지 페이드 + 컴팩트 텍스트 | 상품, 서비스 카탈로그 |
| 미니멀 | 작은 아이콘 + 한 줄 텍스트 | 메뉴, 네비게이션, 태그 |
| 피처 | 이미지 위 텍스트 오버레이, 그라데이션 | 히어로, 핵심 서비스 강조 |
카드 스타일 미리보기
같은 Entity 데이터(시술명, 슬로건, 이미지)가 카드 스타일에 따라 다르게 표현되는 모습입니다.
| 카드 스타일 | 미리보기 | 설명 |
|---|---|---|
| 애플 아티클 |  | 미니멀 디자인, 이미지 크게 + 하단 텍스트. 브랜드 스토리, 에세이에 적합 |
| 아티클 |  | 블로그/뉴스 스타일. 이미지와 텍스트가 비슷한 비중 |
| 프로필 |  | 좌측 프로필 이미지 + 우측 이름/소개. 의료진 소개에 적합 |
| 프로덕트 |  | 이미지 아래 제목+설명 컴팩트 배치. 상품/서비스 카탈로그 |
| 피처 |  | 이미지 위 텍스트 오버레이 + 그라데이션. 히어로, 핵심 서비스 강조 |
카드 세부 설정
카드 종류를 고른 다음, 다음 세부 항목을 조정할 수 있습니다.
| 항목 | 옵션 |
|---|---|
| 이미지 비율 | 정사각형, 16:9, 2:1(와이드), 3:4(세로), 자동 |
| 카드 크기 | S / M / L / XL |
| 모서리 | 없음 ~ 완전 원형 (6단계) |
| 표시 항목 | 이미지, 제목, 설명, 태그 각각 표시/숨김 |
| 필드 매핑 | 제목/설명에 어떤 데이터를 표시할지 선택 |
배경 스타일 (8종)
각 섹션의 배경을 개별 설정할 수 있습니다. 섹션마다 배경이 달라지면 구역감이 생겨 콘텐츠를 읽기 쉬워집니다.
밝은 배경
| 배경 | 설명 |
|---|---|
| 기본 | 흰색 배경 |
| 뮤트 | 연한 회색 배경 |
| 액센트 | 브랜드 보조 색상 |
| 그라데이션 | 부드러운 메시 그라데이션 오버레이 |
어두운 배경
| 배경 | 설명 |
|---|---|
| 프라이머리 | 브랜드 메인 색상 |
| 다크 | 어두운 배경 |
| 다크 그라데이션 | 어두운 메시 그라데이션 |
| 이미지 | 섹션 대표 이미지를 배경으로 사용 |
어두운 배경을 적용하면 텍스트, 버튼 등이 자동으로 밝은 색상으로 바뀝니다. 텍스트 색상을 따로 지정할 필요가 없습니다.
섹션 높이 및 여백
각 섹션의 크기와 내부 간격을 조정해 페이지 리듬을 만듭니다.
| 항목 | 옵션 |
|---|---|
| 높이 | 콘텐츠에 맞춤(자동) / 전체 화면 / 라운드 전체 화면 / 고정(스크롤 연동) |
| 상하 여백 | 없음 / 좁게 / 보통 / 넓게 / 매우 넓게 |
| 내부 간격 | 없음 / 좁게 / 보통 / 넓게 / 매우 넓게 |
| 콘텐츠 폭 | 중앙 정렬(기본) / 전체 폭 |
| 구분선 | 섹션 하단 구분선 표시/숨김 |
헤더 스타일
각 섹션의 제목 영역(헤더)을 별도로 조정할 수 있습니다.
| 항목 | 옵션 |
|---|---|
| 텍스트 크기 | S / M / L / XL / 2XL |
| 정렬 | 좌측 / 중앙 / 우측 |
| 배치 방향 | 세로(헤더 위 + 콘텐츠 아래) / 가로(헤더 좌측 고정 + 콘텐츠 우측) |
애니메이션
스크롤과 인터랙션에 반응하는 다섯 가지 애니메이션 효과를 제공합니다.
| 효과 | 설명 |
|---|---|
| 블러 페이드인 | 스크롤 시 흐림에서 선명하게 나타남 (기본) |
| 카드 순차 등장 | 카드가 순서대로 나타나는 스태거 효과 |
| 스크롤 연동 | 스택/가로 스크롤 레이아웃에서 스크롤에 따라 움직임 |
| 호버 효과 | 카드에 마우스 올리면 살짝 위로 올라가며 그림자 생성 |
| 통계 카드 회전 | 통계 카드가 살짝 기울어져 있다가 호버 시 정렬 |
CTA(행동 유도) 버튼
각 섹션에 최대 2개의 CTA 버튼을 배치할 수 있습니다. 버튼이 어떤 동작을 할지 선택합니다.
| 항목 | 옵션 |
|---|---|
| 버튼 수 | 없음 / 1개 / 2개 |
| 버튼 동작 | URL 이동 / 채팅 상담 열기 / 예약 화면 열기 / 고객센터 연결 |
| 버튼 텍스트 | 다국어 지원 (한/영/일/중) |
히어로 섹션에 "무료 상담 예약"과 "전화 상담" 두 버튼을 배치하는 식으로 사용합니다. 버튼을 누르면 채팅 창이 열리거나, 예약 폼으로 이동하거나, 전화가 연결되도록 설정할 수 있습니다.
네비게이션 (헤더/푸터)
헤더
- 로고 + 메뉴 구성
- 드롭다운 메뉴 지원 (다중 컬럼 가능)
- 메뉴별 표시할 콘텐츠 유형 선택
- 다국어 메뉴 라벨 지원
푸터
- 링크 그룹 구성
- 소셜 미디어 링크 (인스타그램, 유튜브, 네이버 블로그 등)
- 주소, 저작권 표시
- 언어 전환 버튼
브랜드 테마 설정
홈페이지 전체에 적용되는 브랜드 테마를 설정할 수 있습니다.
| 항목 | 설명 |
|---|---|
| 브랜드 색상 | 메인 색상, 보조 색상, 강조 색상 등 |
| 모서리 둥글기 | 전체 UI 컴포넌트의 둥글기 통일 |
| 폰트 스타일 | 고딕(Sans) / 명조(Serif) |
| 라이트/다크 모드 | 각각 독립적으로 색상 설정 가능 |
| 그라데이션 색상 | 그라데이션 배경에 사용되는 5가지 차트 색상 |
반응형 지원
모든 레이아웃과 카드는 모바일 우선 반응형으로 설계되어 있습니다. 화면 크기에 따라 레이아웃이 자동으로 조정됩니다.
| 화면 크기 | 동작 |
|---|---|
| 모바일 (< 640px) | 1열 레이아웃, 터치 스와이프 |
| 태블릿 (640px~) | 2열 그리드 |
| 데스크탑 (768px~) | 가로 배치 헤더, 사이드바 |
| 대형 화면 (1024px~) | 3~4열 그리드 |
모바일 버전을 따로 만들 필요가 없습니다. 데스크탑에서 설정한 섹션이 모바일에서 자동으로 맞춰 표시됩니다.
조합 가능성
| 커스터마이징 영역 | 가능한 변형 수 |
|---|---|
| 레이아웃 타입 | 10종 |
| 카드 디자인 | 7종 |
| 배경 스타일 | 8종 |
| 이미지 비율 | 5종 |
| 헤더 크기 | 5단계 |
| 높이 옵션 | 4종 |
| 여백 옵션 | 5단계 |
| 애니메이션 | 5종 |
| CTA 동작 | 4종 |