테마와 디자인 커스터마이징
색상, 폰트, 배경, 음악, 애니메이션까지 초대장을 내 스타일대로 꾸미는 방법을 알아보세요.
테마와 디자인 커스터마이징
초대장을 나만의 스타일로 꾸며보세요! 색상, 폰트, 배경, 음악, 애니메이션까지 모두 바꿀 수 있어요.
테마 설정 찾기
- 편집 화면 왼쪽 영역
- 상단 탭 중 "테마 설정" 클릭
- 다양한 커스터마이징 옵션이 표시됩니다
추천 순서: 먼저 내용을 모두 입력하고, 그 다음에 테마를 설정하세요. 내용이 있어야 색상과 폰트가 잘 어울리는지 확인할 수 있어요!
테마 프리셋
미리 만들어진 테마를 한 번에 적용할 수 있어요:
| 프리셋 | 느낌 |
|---|---|
| Minimal | 깔끔하고 심플 |
| Classic | 전통적이고 격식 있음 |
| Modern | 세련되고 도시적 |
| Elegant | 우아하고 고급스러움 |
| Romantic | 사랑스럽고 로맨틱 |
| Pastel | 부드럽고 따뜻함 |
| Gold | 화려하고 럭셔리 |
프리셋을 선택한 뒤 색상, 폰트 등을 개별적으로 변경할 수도 있고, 커스텀을 선택해서 모든 값을 직접 지정할 수도 있어요.
색상 바꾸기
컬러 피커
테마 설정에서 각 색상 항목을 클릭하면:
- 컬러 피커: 시각적으로 색상 선택
- HEX 코드: 직접 입력 (예: #FFB6C1)
변경 가능한 색상
| 항목 | 적용 범위 |
|---|---|
| Primary (기본) | 제목, 버튼, 강조 포인트, 아이콘 |
| Secondary (보조) | 부제목, 보조 요소 |
| Accent (포인트) | 특별 강조 요소 |
| Background (배경) | 전체 배경색 |
| Surface (표면) | 카드, 섹션 배경 |
| Text Primary | 본문 텍스트 |
| Text Secondary | 보조 텍스트 |
| Text Muted | 흐린 텍스트, 캡션 |
| Border | 구분선, 테두리 |
색상 조합 팁
로맨틱: Primary 핑크 (#FFB6C1) + Background 아이보리 (#FFFAF0)
모던: Primary 블랙 (#000000) + Accent 골드 (#FFD700)
내추럴: Primary 그린 (#8FBC8F) + Background 베이지 (#F5F5DC)
폰트(글씨체) 설정
글로벌 폰트 설정
전체 초대장에 적용되는 기본 폰트입니다.
테마 설정 > 폰트 선택에서:
- 폰트 선택: 드롭다운에서 원하는 글씨체 선택
- 글씨 크기 슬라이더: 전체 폰트 크기 비율 조절 (0.5배 ~ 2.0배)
- 텍스트 정렬: 왼쪽 / 가운데 / 오른쪽 (전체 기본값)
제공되는 한글 폰트:
| 폰트 | 느낌 | 추천 |
|---|---|---|
| Noto Sans KR | 깔끔하고 현대적, 가독성 최고 | 모던한 초대장 |
| 고운바탕 (Gowun Batang) | 고급스럽고 정통적 | 클래식 결혼식 |
| 나눔고딕 | 부드럽고 편안, 친근함 | 따뜻한 초대장 |
| 나눔명조 | 전통적이고 단정함 | 격식 있는 초대장 |
| 나눔손글씨 | 손으로 쓴 듯한 느낌 | 캐주얼한 초대장 |
영문 폰트:
- Playfair Display: 우아하고 세련됨
- Montserrat: 모던하고 깔끔
- Dancing Script: 손글씨 느낌
- Great Vibes: 화려한 필기체
폰트는 최대 2개까지 사용할 수 있어요. 너무 많은 폰트는 일관성을 해칠 수 있습니다.
섹션별 폰트 오버라이드
각 섹션마다 글로벌 설정과 다른 폰트/크기를 지정할 수 있어요!
왼쪽 사이드바에서 원하는 섹션을 선택한 후, 해당 섹션의 편집 영역에서:
| 설정 | 설명 |
|---|---|
| 개별 폰트 | 해당 섹션만 다른 글씨체 적용 (글로벌 폰트와 무관) |
| 개별 크기 배율 | 해당 섹션만 글씨 크기 배율 조절 (글로벌 크기와 독립) |
| 제목만 적용 | 켜면 폰트/크기가 섹션 제목(h2)에만 적용, 본문은 글로벌 설정 유지 |
| 개별 정렬 | 해당 섹션의 텍스트 정렬을 글로벌 설정과 다르게 지정 |
활용 예시:
예시 1: 인사말만 명조체로
- 글로벌 폰트: Noto Sans KR (산돌체)
- 인사말 섹션: 개별 폰트 → 나눔명조 (격식 있는 느낌)
- 나머지 섹션: 글로벌 설정 그대로
예시 2: 메인 화면 제목만 크게
- 글로벌 크기 배율: 1.0 (기본)
- 메인 화면(Hero) 섹션: 개별 크기 배율 → 1.5 + "제목만 적용" 켜기
- 결과: Hero 제목만 1.5배 크게, 본문은 기본 크기 유지
예시 3: 갤러리 섹션만 왼쪽 정렬
- 글로벌 정렬: 가운데
- 갤러리 섹션: 개별 정렬 → 왼쪽
- 나머지 섹션: 가운데 정렬 유지
글로벌 vs 섹션별 설정 우선순위
섹션 개별 설정 (있으면) > 글로벌 설정
- 섹션에 개별 폰트를 지정하면 → 해당 섹션은 개별 폰트 사용
- 섹션에 개별 설정이 없으면 → 글로벌 설정 적용
- "제목만 적용"을 켜면 → 제목은 개별 설정, 본문은 글로벌 설정
섹션별 폰트 오버라이드는 특별한 강조가 필요한 섹션에만 사용하는 것을 추천합니다. 전체적인 일관성을 유지하면서 포인트를 줄 수 있어요!
레이아웃 선택
초대장의 전체적인 구조와 분위기를 결정하는 10가지 레이아웃:
| 레이아웃 | 특징 |
|---|---|
| Basic | 기본 레이아웃, 심플하고 깔끔 |
| Arch | 아치형 프레임, 우아한 느낌 |
| Celebration | 축제 느낌, 화려한 장식 |
| DateReveal | 날짜 강조형, 숫자가 돋보이는 |
| ElegantArch | 정교한 아치형, 고급스러움 |
| GoldBorder | 금색 테두리, 럭셔리 |
| ModernMinimal | 미니멀, 여백 강조 |
| Party | 파티 느낌, 생동감 |
| Polaroid | 폴라로이드 사진 느낌 |
| Romantic | 로맨틱, 부드러운 곡선 |
레이아웃은 메인 화면(Hero)과 전체 구조에 영향을 줍니다. 템플릿 선택 시 기본 레이아웃이 결정되지만, 편집 중에 변경할 수 있어요.
배경 설정
배경 패턴
다양한 배경 패턴을 추가할 수 있어요:
- 스타일: 풀 배경 또는 테두리만 표시
- 고정 배경: 스크롤해도 배경이 고정되는 옵션
- 여러 종류의 패턴 이미지 제공
배경 비디오
움직이는 배경 효과를 추가할 수 있어요:
| 효과 | 설명 |
|---|---|
| 꽃잎 (Petal) | 떨어지는 꽃잎 애니메이션 |
| 눈 (Snow) | 눈이 내리는 효과 |
- 루프 재생: 반복 재생 여부 설정
- 배경 패턴과 비디오는 동시 사용 가능
배경 음악
초대장을 열면 음악이 자동으로 재생되도록 설정할 수 있어요.
프리셋 음악
- 로맨틱: 잔잔한 피아노, 발라드 계열
- 모던: 세련된 어쿠스틱
- 전통: 클래식, 한국 전통 느낌
커스텀 음악
직접 음악 파일 URL을 입력할 수 있어요.
재생 설정
| 설정 | 설명 |
|---|---|
| 자동 재생 | 초대장 열릴 때 자동 시작 (브라우저 정책에 따라 제한될 수 있음) |
| 루프 | 끝까지 재생 후 처음부터 반복 |
| 볼륨 | 0~100% 볼륨 조절 슬라이더 |
대부분의 모바일 브라우저는 사용자 터치 없이 자동 재생을 차단합니다. 게스트가 초대장을 터치하면 음악이 시작됩니다.
스크롤 애니메이션
스크롤할 때 각 섹션이 등장하는 효과를 설정할 수 있어요.
| 효과 | 설명 |
|---|---|
| Slide | 아래에서 위로 슬라이드하며 등장 |
| Blur-Fade | 흐릿한 상태에서 선명하게 페이드인 |
| 없음 | 효과 없이 즉시 표시 |
켜기/끄기 토글로 전체 스크롤 애니메이션을 제어할 수 있습니다.
섹션 프레임
오벌 프레임
섹션 래퍼를 오벌(타원형) 프레임으로 감쌀 수 있어요:
- 투명도(Opacity) 슬라이더로 프레임 진하기 조절 (0~1)
- 각 섹션별로 프레임 비활성화 가능 ("프레임 비활성화" 옵션)
텍스트 정렬
글로벌 정렬
테마 설정에서 전체 초대장의 기본 텍스트 정렬을 선택:
- 왼쪽 정렬: 모던하고 잡지 같은 느낌
- 가운데 정렬: 전통적이고 안정적 (기본값)
- 오른쪽 정렬: 특수한 디자인
섹션별 정렬
각 섹션에서 글로벌 정렬을 오버라이드할 수 있어요. 예를 들어 전체는 가운데 정렬이지만, 인사말만 왼쪽 정렬로 설정할 수 있습니다.
반응형 디자인
모든 테마 설정은 데스크톱과 모바일에서 자동으로 최적화됩니다:
- 폰트 크기 자동 조정
- 이미지 크기 반응형
- 간격과 여백 자동 조절
- 버튼 터치 영역 최적화
모바일 확인 팁:
- 편집 후 오른쪽 미리보기에서 확인
- 저장 후 실제 휴대폰에서도 확인하세요
완료 체크리스트
- 테마 프리셋 또는 커스텀 색상 선택
- 글로벌 폰트 & 크기 설정
- 필요한 섹션에 개별 폰트/크기 오버라이드
- 레이아웃 스타일 확인
- 배경 패턴/비디오 설정 (선택)
- 배경 음악 설정 (선택)
- 스크롤 애니메이션 설정
- 데스크톱 + 휴대폰에서 확인
- 저장!
도움이 필요하신가요?
디자인 설정에 어려움이 있으시면 **카카오톡 상담**으로 문의해주세요!