디자인: 색상, 배경, 글꼴

빌더의 “테마” 탭에서 페이지 전체의 모양을 정합니다. 색상, 배경, 버튼 모양, 글꼴입니다. 커스텀 CSS를 제외한 모든 변경은 약 2초 뒤 초안에 자동으로 저장되며 다음에 게시할 때 공개됩니다.

탭은 위에서 아래로 “템플릿”, “프리셋”, “색상”, “배경”, “콘텐츠 뒤 배경면”, “버튼 스타일”, “글꼴”, “커스텀 CSS” 순으로 구성됩니다. 템플릿은 별도의 글에서 다룹니다.

#프리셋

프리셋은 미리 만들어 둔 색상 조합입니다. 클릭 한 번으로 배경 색상, 글자 색상, 버튼 색상, 버튼 스타일을 한꺼번에 설정하고, 직접 고른 버튼 텍스트 색상은 초기화합니다. 프리셋은 16개입니다: 클래식, 미드나이트, 하버, 오션, 포레스트, 선셋, 로즈, 슬레이트, 모노, 프로스트, 라벤더, 앰버, 차콜, 민트, 크림슨, 샌드. 네 가지 값 중 아무것도 바꾸지 않는 동안 활성 프리셋에 표시가 붙습니다.

#색상

기본 색상 네 가지이며, 각각 색상 선택기와 16진수 값이 있습니다(투명도 없음).

“배경”

페이지의 배경 색상입니다. 배경 유형이 “색상”일 때도 쓰입니다.

“글자 색상”

이름, 소개, 텍스트의 색상입니다.

“버튼 색상”

링크 버튼의 색상이자 블록 안 버튼의 기본 색상입니다.

“버튼 텍스트”

버튼 위의 글자입니다. 직접 고르지 않으면 버튼 색상에서 잘 읽히는 색상이 자동으로 선택됩니다.

표시되는 값은 템플릿에서 온 값이라도 항상 현재 적용 중인 값입니다. 많은 블록에는 “표시 옵션”에 자체 색상 입력란이 있습니다. 그 입력란에 “기본값 (테마 적용)”이 표시되는 동안에는 이 색상들을 따릅니다.

#배경

“색상”, “이미지”, “그라디언트”, “동영상” 버튼으로 페이지 배경의 유형을 정합니다. 유형을 바꿔도 빌더에 있는 동안에는 다른 유형의 값을 기억합니다.

색상

페이지가 “색상” 섹션의 “배경” 색상을 사용합니다.

이미지

“데스크톱 이미지”

큰 화면용 배경이며 1920 × 1080 px입니다.

“모바일 이미지”

선택이며 세로 1080 × 1920 px입니다. 비어 있으면 “데스크톱과 동일”이 표시되고 데스크톱 이미지가 쓰입니다.

“선택”은 에셋을, “관리 ↗”는 에셋 페이지를 열고, “제거”는 이미지를 뺍니다. 이미지가 목표 크기와 정확히 같지 않으면 자르기 도구가 열리고, 자른 이미지는 새 에셋으로 저장됩니다. 자세한 내용은 페이지 빌더의 이미지에 있습니다.

그라디언트

“시작 색상”과 “끝 색상”

그라디언트의 두 색상입니다.

“각도”

0~355도 방향이며 5도 단위로 조절합니다.

“프리셋”

미리 만들어 둔 그라디언트입니다: 인디고, 선셋, 오션, 포레스트, 베리, 미드나이트.

동영상

“데스크톱 동영상”

동영상 파일(.mp4 또는 .webm)로 바로 가는 링크이거나, 동영상 에셋에서 “동영상 선택”으로 고릅니다.

“모바일 동영상”

선택입니다. 예를 들어 모바일 데이터용 작은 파일입니다. 비어 있으면 데스크톱 동영상이 쓰입니다.

동영상은 소리 없이 반복 재생되며 재생 컨트롤이 없습니다. 시스템 설정에서 동작 줄이기를 켠 방문자에게는 숨겨집니다. MP4 또는 WebM 형식의 8 MB 이하 파일을 권장합니다.

오버레이 불투명도

이미지, 그라디언트, 동영상에서는 0~80% 슬라이더로 배경 위에 어두운 층을 덮어 텍스트를 더 읽기 쉽게 합니다.

이미지, 그라디언트, 동영상으로 된 페이지 배경은 템플릿의 배경 이미지를 대체합니다. 이때 템플릿의 이미지 자리에 이에 관한 안내가 표시됩니다. “색상”으로 바꾸면 템플릿 이미지가 다시 보입니다.

#콘텐츠 뒤 배경면

배경 이미지, 그라디언트, 동영상 위에서도 텍스트를 읽기 쉽게 합니다.

“끄기”

배경면 없음입니다. 콘텐츠가 배경 위에 바로 놓입니다.

“전체 콘텐츠”

모든 콘텐츠 뒤에 카드 하나를 둡니다.

“블록별”

프로필과 각 블록 뒤에 카드를 따로 둡니다.

“불투명” 또는 “반투명”

배경면을 켜면 나타납니다. 반투명은 배경이 비쳐 보이게 합니다.

이 설정은 Business Card 템플릿에서는 효과가 없습니다.

#버튼 스타일

버튼 스타일은 기본값입니다. 링크 블록과 개별 링크에서 바꿀 수 있습니다(두 곳 모두 “모서리 둥글기”).

#글꼴

DM Sans, Figtree, Sora, Plus Jakarta Sans, Raleway, Inter, Poppins, Montserrat, Nunito, Outfit, Space Grotesk, “시스템 기본”(기기 자체의 글꼴) 중에서 고를 수 있습니다. “Aa — 다람쥐 헌 쳇바퀴에 타고파.” 줄이 미리보기를 보여 줍니다.

LinkHarbor는 모든 글꼴을 직접 제공합니다. 방문자의 브라우저는 이를 위해 Google Fonts나 다른 제3자 서버에서 아무것도 불러오지 않습니다.

#어떤 설정이 우선할까요?

색상과 모양은 바깥에서 안쪽으로 세밀해집니다.

1. 템플릿: 기본 스타일과 기본 색상
2. 테마 탭: 페이지 전체의 색상, 배경, 버튼 스타일, 글꼴
3. 블록의 표시 옵션: 그 블록의 색상과 모양
4. 개별 링크의 스타일: 다른 모든 값보다 우선
5. 커스텀 CSS: 컨트롤로 할 수 없는 모든 것

자체 CSS로 세밀하게 조정하는 방법은 커스텀 CSS에서 설명합니다.