Logo
Docs초대장 만들기

테마와 디자인 커스터마이징

색상, 폰트, 배경, 음악, 애니메이션까지 초대장을 내 스타일대로 꾸미는 방법을 알아보세요.

13 min read
2026-03-11

테마와 디자인 커스터마이징

초대장을 나만의 스타일로 꾸며보세요! 색상, 폰트, 배경, 음악, 애니메이션까지 모두 바꿀 수 있어요.

테마 설정 찾기

  1. 편집 화면 왼쪽 영역
  2. 상단 탭 중 "테마 설정" 클릭
  3. 다양한 커스터마이징 옵션이 표시됩니다

추천 순서: 먼저 내용을 모두 입력하고, 그 다음에 테마를 설정하세요. 내용이 있어야 색상과 폰트가 잘 어울리는지 확인할 수 있어요!


테마 프리셋

미리 만들어진 테마를 한 번에 적용할 수 있어요:

프리셋느낌
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)


폰트(글씨체) 설정

글로벌 폰트 설정

전체 초대장에 적용되는 기본 폰트입니다.

테마 설정 > 폰트 선택에서:

  1. 폰트 선택: 드롭다운에서 원하는 글씨체 선택
  2. 글씨 크기 슬라이더: 전체 폰트 크기 비율 조절 (0.5배 ~ 2.0배)
  3. 텍스트 정렬: 왼쪽 / 가운데 / 오른쪽 (전체 기본값)

제공되는 한글 폰트:

폰트느낌추천
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)
  • 각 섹션별로 프레임 비활성화 가능 ("프레임 비활성화" 옵션)

텍스트 정렬

글로벌 정렬

테마 설정에서 전체 초대장의 기본 텍스트 정렬을 선택:

  • 왼쪽 정렬: 모던하고 잡지 같은 느낌
  • 가운데 정렬: 전통적이고 안정적 (기본값)
  • 오른쪽 정렬: 특수한 디자인

섹션별 정렬

각 섹션에서 글로벌 정렬을 오버라이드할 수 있어요. 예를 들어 전체는 가운데 정렬이지만, 인사말만 왼쪽 정렬로 설정할 수 있습니다.


반응형 디자인

모든 테마 설정은 데스크톱과 모바일에서 자동으로 최적화됩니다:

  • 폰트 크기 자동 조정
  • 이미지 크기 반응형
  • 간격과 여백 자동 조절
  • 버튼 터치 영역 최적화

모바일 확인 팁:

  • 편집 후 오른쪽 미리보기에서 확인
  • 저장 후 실제 휴대폰에서도 확인하세요

완료 체크리스트

  • 테마 프리셋 또는 커스텀 색상 선택
  • 글로벌 폰트 & 크기 설정
  • 필요한 섹션에 개별 폰트/크기 오버라이드
  • 레이아웃 스타일 확인
  • 배경 패턴/비디오 설정 (선택)
  • 배경 음악 설정 (선택)
  • 스크롤 애니메이션 설정
  • 데스크톱 + 휴대폰에서 확인
  • 저장!

도움이 필요하신가요?

디자인 설정에 어려움이 있으시면 **카카오톡 상담**으로 문의해주세요!

다음 단계