홈페이지 디자인

관리자 AI로 수정하기

홈페이지 디자인은 관리자 AI 채팅으로 수정하는 것을 권장합니다.

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

아래는 채팅으로 수정할 수 있는 디자인 옵션들의 상세 레퍼런스입니다.

개요

Laney 홈페이지는 컴포넌트 기반 시스템으로 제작됩니다. 섹션 단위로 레이아웃, 카드 스타일, 배경, 애니메이션 등을 조합하여 브랜드와 목적에 맞는 다양한 페이지를 구성할 수 있습니다.

별도의 개발 없이 디자인을 변경할 수 있으며, 한국어/영어/일본어/중국어 4개 국어를 지원합니다.

도메인 설정

기존 홈페이지가 없는 경우: 메인 도메인으로 배포
기존 홈페이지 유지 시: contact.도메인 서브도메인으로 배포

1. 페이지 구성 방식

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

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

각 섹션은 독립적으로 다음 항목을 설정할 수 있습니다:

레이아웃(컨테이너) 타입
카드 디자인
배경 스타일
헤더 크기 및 정렬
애니메이션 효과
CTA(행동 유도) 버튼
높이 및 여백

2. 레이아웃 타입 (10종)

각 섹션에 적용할 수 있는 레이아웃입니다.

기본 레이아웃

레이아웃	설명	추천 용도
그리드	반응형 격자 배열, 벤토(비대칭) 레이아웃 지원	서비스, 포트폴리오, 팀 소개
캐러셀	좌우 스와이프, 자동 재생 지원	서비스 하이라이트, 후기
무한 스크롤	끊김 없이 연속 흐르는 애니메이션	고객사 로고, 후기, 파트너
리스트	세로 목록, 구분선 지원	위치 안내, FAQ, 공지사항

인터랙티브 레이아웃

레이아웃	설명	추천 용도
스택	스크롤 시 카드가 겹치며 쌓이는 효과	핵심 장점, 브랜드 스토리
가로 스크롤	세로 스크롤 시 가로로 이동하는 패럴랙스	타임라인, 프로세스 안내
스텝 안내	좌측 단계 목록 + 우측 이미지, 자동 전환	절차 안내, 서비스 플로우

콘텐츠 특화 레이아웃

레이아웃	설명	추천 용도
통계 카드	숫자 강조 + 이미지 교차 배치, 호버 애니메이션	실적, 경력, 핵심 수치
상세 콘텐츠	본문 렌더링 + 목차 사이드바	상세 소개, 블로그, 안내문

3. 카드 디자인 (7종)

콘텐츠를 표시하는 카드 스타일입니다.

카드	설명	추천 용도
기본 카드	이미지 + 제목 + 설명	범용 (서비스, 사례)
아티클	블로그/뉴스 스타일	소식, 칼럼, 사례
애플 아티클	미니멀 디자인, 텍스트 중심	브랜드 스토리, 에세이
프로필	원형 사진 + 이름 + 소개	팀 소개, 전문가 소개
프로덕트	이미지 페이드 + 컴팩트 텍스트	상품, 서비스 카탈로그
미니멀	작은 아이콘 + 한 줄 텍스트	메뉴, 네비게이션, 태그
피처	이미지 위 텍스트 오버레이, 그라데이션	히어로, 핵심 서비스 강조

카드 세부 설정

항목	옵션
이미지 비율	정사각형, 16:9, 2:1(와이드), 3:4(세로), 자동
카드 크기	S / M / L / XL
모서리	없음 ~ 완전 원형 (6단계)
표시 항목	이미지, 제목, 설명, 태그 각각 표시/숨김
필드 매핑	제목/설명에 어떤 데이터를 표시할지 선택

4. 배경 스타일 (8종)

각 섹션의 배경을 개별 설정할 수 있습니다.

밝은 배경

배경	설명
기본	흰색 배경
뮤트	연한 회색 배경
액센트	브랜드 보조 색상
그라데이션	부드러운 메시 그라데이션 오버레이

어두운 배경

배경	설명
프라이머리	브랜드 메인 색상
다크	어두운 배경
다크 그라데이션	어두운 메시 그라데이션
이미지	섹션 대표 이미지를 배경으로 사용

어두운 배경 적용 시 텍스트, 버튼 등이 자동으로 밝은 색상으로 전환됩니다.

5. 섹션 높이 및 여백

항목	옵션
높이	콘텐츠에 맞춤(자동) / 전체 화면 / 라운드 전체 화면 / 고정(스크롤 연동)
상하 여백	없음 / 좁게 / 보통 / 넓게 / 매우 넓게
내부 간격	없음 / 좁게 / 보통 / 넓게 / 매우 넓게
콘텐츠 폭	중앙 정렬(기본) / 전체 폭
구분선	섹션 하단 구분선 표시/숨김

6. 헤더 스타일

항목	옵션
텍스트 크기	S / M / L / XL / 2XL
정렬	좌측 / 중앙 / 우측
배치 방향	세로(헤더 위 + 콘텐츠 아래) / 가로(헤더 좌측 고정 + 콘텐츠 우측)

7. 애니메이션

효과	설명
블러 페이드인	스크롤 시 흐림에서 선명하게 나타남 (기본)
카드 순차 등장	카드가 순서대로 나타나는 스태거 효과
스크롤 연동	스택/가로 스크롤 레이아웃에서 스크롤에 따라 움직임
호버 효과	카드에 마우스 올리면 살짝 위로 올라가며 그림자 생성
통계 카드 회전	통계 카드가 살짝 기울어져 있다가 호버 시 정렬

8. CTA(행동 유도) 버튼

각 섹션에 최대 2개의 CTA 버튼을 배치할 수 있습니다.

항목	옵션
버튼 수	없음 / 1개 / 2개
버튼 동작	URL 이동 / 채팅 상담 열기 / 예약 화면 열기 / 고객센터 연결
버튼 텍스트	다국어 지원 (한/영/일/중)

9. 브랜드 테마 설정

홈페이지 전체에 적용되는 브랜드 테마를 설정할 수 있습니다.

항목	설명
브랜드 색상	메인 색상, 보조 색상, 강조 색상 등
모서리 둥글기	전체 UI 컴포넌트의 둥글기 통일
폰트 스타일	고딕(Sans) / 명조(Serif)
라이트/다크 모드	각각 독립적으로 색상 설정 가능
그라데이션 색상	그라데이션 배경에 사용되는 5가지 차트 색상

10. 네비게이션 (헤더/푸터)

헤더

로고 + 메뉴 구성
드롭다운 메뉴 지원 (다중 컬럼 가능)
메뉴별 표시할 콘텐츠 유형 선택
다국어 메뉴 라벨 지원

푸터

링크 그룹 구성
소셜 미디어 링크 (인스타그램, 유튜브, 네이버 블로그 등)
주소, 저작권 표시
언어 전환 버튼

11. 반응형 지원

모든 레이아웃과 카드는 모바일 우선 반응형으로 설계되어 있습니다.

화면 크기	동작
모바일 (< 640px)	1열 레이아웃, 터치 스와이프
태블릿 (640px~)	2열 그리드
데스크탑 (768px~)	가로 배치 헤더, 사이드바
대형 화면 (1024px~)	3~4열 그리드

12. 조합 예시

법률사무소 홈페이지

섹션	레이아웃	카드	배경	비고
히어로	전체 화면	-	다크 그라데이션	CTA: "무료 상담 예약" + "전화 상담"
업무분야 소개	캐러셀	피처	기본	비율: 세로
승소사례	그리드 (벤토)	아티클	뮤트	비율: 16:9
실적 통계	통계 카드	-	기본	숫자 강조
변호사 소개	그리드	프로필	기본	비율: 정사각형
오시는 길	리스트	미니멀	뮤트	-

클리닉 홈페이지

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

요약

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

레이아웃 x 카드 x 배경만 조합해도 560가지 이상의 섹션 디자인이 가능하며, 세부 설정까지 포함하면 사실상 무한한 조합을 만들 수 있습니다.

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

홈페이지 디자인

On this page