러브인포 · 꾸미기

꾸미기

🪟 꾸미기 창 보는 법

✎ EDIT로 여는 편집 창 왼쪽 메뉴의 DESIGN · HOME · MORE 칸이 꾸미기입니다.

• 넓은 화면에서는 메뉴 · 설정 · 미리보기 세 칸으로 나뉩니다.
• 창은 홈의 테마 색을 따라가는 반투명 유리 창이라 뒤의 홈이 살짝 비칩니다.
• 창 글꼴은 홈 글꼴과 상관없이 늘 Pretendard입니다(홈 글꼴은 그대로).

왼쪽 메뉴

번호와 이름으로 11칸입니다.

• DESIGN — 01 색 · 글씨 · 02 머리글 · 03 페이지 · 카드 · 04 배경 · 효과
• HOME — 05 공개 · 대문 · 06 배너 · 07 아이콘 · 공유 · 08 맨 아래 · 09 BGM
• MORE — 10 커스텀 CSS · 11 관리

고른 칸은 포인트색 글자와 →로 표시됩니다. 메뉴 아래에 내 홈 주소와 가이드 링크가 있습니다.

가운데 설정

위에 「01 — DESIGN」처럼 지금 위치, 큰 제목과 한 줄 설명, 그 아래 설정 줄(왼쪽 이름 · 오른쪽 칸). 맨 아래 저장 줄은 내용이 짧아도 늘 바닥에 붙어 있고, 저장 안 한 변경이 있으면 ● UNSAVED가 뜹니다.

⌕ 설정 찾기

위쪽 밑줄 칸에 「폰트」 「대문」 「커서」처럼 적으면 맞는 설정 줄이 번호와 함께 뜹니다. 누르거나 Enter면 그 칸으로 가서 그 줄을 잠깐 반짝여 줘요. Esc로 닫기.

오른쪽 미리보기

내 홈을 실제 기기 화면 한 장으로 띄웁니다.

• 위 MOBILE / PC로 폰(390×760) · PC(1280×800)를 고르고, 편집 미리보기와 같이 바뀝니다.
• 색 · 글꼴 · 머리글 · 맨 아래는 저장 전에도 바로 바뀌고, 페이지 내용은 저장하면 다시 불러옵니다.
• ↻ 다시 불러오기 · ⤢ 크게 보기. 위 「미리보기」 스위치로 끄고 켜고, 이 기기에 기억됩니다.
• 칸이 좁으면 비율대로 줄어듭니다.

폰에서

메뉴 대신 위쪽 「탭 고르기」로 칸을 고르고, 미리보기는 숨겨집니다(홈 자체가 미리보기니까요).

편집 창 색

01 색 · 글씨 맨 위. 편집 창(꾸미기 · 편집 · 페이지 관리)은 홈 테마 색을 따라가서, 테마 색을 특정 페이지에만 맞춰 둔 홈(예: 글자색을 어둡게)에선 창이 흐릿해질 수 있습니다.

• 자동 — 홈 글자색 · 카드색 대비가 낮을 때 편집 창만 밝게 · 어둡게 바꿉니다.
• 홈 색 · ☀ 밝게 · 어둡게 — 직접 고릅니다.
• 이 기기에만 기억되고 홈 화면엔 영향이 없습니다. 바꾼 색일 땐 유리가 덜 비칩니다.

사진 자리img/li-edtone.png

사진 자리img/li-design.png

사진 자리img/li-deco-find.png

메뉴 번호가 바뀌었어요 (2026.10.13)

06 홈 정보에 너무 많은 게 모여 있어서 나눴습니다. 설정 값은 그대로이고 자리만 옮겼어요.

06 홈 정보 →

06 배너(내 배너 · 맞배너 확인 · 러브로그 홈 연결) · 07 아이콘 · 공유(파비콘 · 앱 아이콘 · 공유 카드) · 08 맨 아래(표시 요소 · 하트 · 링크 복사 모양 · 맨 아래 문구)

04 안의 BGM →

09 BGM(곡 목록 · 플레이어 · 재생)

06 「러브로그에서 가져오기」 →

01 색 · 글씨 맨 아래

07 · 08 →

10 커스텀 CSS · 11 관리

이름

• 03 「페이지 넘김 · 넘김 모양 · 페이지 전환」 → 「넘김 버튼 · 버튼 모양 · 넘어갈 때 효과」(안에 페이지 · 카드 · 간격 소제목)
• 04 「배경색으로 덮는 정도」 → 「덮는 정도 (사진)」 · 「덮는 정도 (HTML)」
• 05 대문은 「형태」 · 「모양」 칸으로
• 09 「첫 클릭에 자동 재생」

칸별로 한눈에

색 · 폰트

프리셋 10종 + 색 3종 · 폰트 · 제목 폰트 · 본문 크기/줄간격.

• 배경 · 글자 · 포인트 · 카드 색을 직접 고쳤다면 프리셋 아래 「↺ 프리셋 색으로 되돌리기」로 그 프리셋의 원래 색으로 돌립니다(지금 쓰는 프리셋을 다시 고르면 고르기 칸이 반응하지 않아서 이 버튼이 있습니다).
• 실수로 눌렀으면 토스트 「되돌리기」.

카드

모서리 · 투명도 · 테두리(점선·이중선·그림자·장식) · 안 여백. 블록마다 개별 지정도 가능(이 블록 디자인). 블록과 블록 사이는 「블록 간격」(좁게 · 보통 · 넓게) — 아래 블록 간격 참고.

머리글

글 / 이미지+글 / 이미지만 / 없음. 이미지는 1200×400 비율 권장, 위치·확대·높이 조절. 이미지 없는 자리는 방문자에게 안 보입니다. 밑줄 장식(—)은 끌 수 있습니다.

배경

04 배경 · 효과.

• 이미지 + 덮는 정도(0~96%)
• 배경 효과 — 눈 · 별 · 꽃잎 · 노이즈 · 비네팅
• 커서 효과 — 별 꼬리 · 반짝임 · 원 · 물방울
• 커서 모양 — 내 그림을 커서로(아래 커서 모양)
• 배경 HTML — 캔버스 · 애니메이션을 글 뒤에 화면 가득(아래 배경 HTML)

🎵 홈 BGM

09 BGM. 아래 홈 BGM — 여러 곡 참고.

• 유튜브 링크 / mp3 주소 / mp3 올리기(10MB)를 30곡까지 목록으로. 한 곡이 끝나면 다음 곡으로 이어지고, 반복 · 무작위 순서를 고를 수 있습니다.
• 플레이어 모양 14종(심플 4종 포함). 자리는 9칸 또는 미리보기에서 끌어 놓기(폰 · PC 따로 — 아래 심플 모양 · 자리)
• 홈에 들어와 처음 화면을 누르면 자동 재생(대문이 있으면 「입장」 때)

넘김 버튼 · 효과

03 페이지 · 카드. 넘김 버튼 · 버튼 모양 · 넘어갈 때 효과. 페이지 참고.

공개 · 대문

05 공개 · 대문. 대문 참고.

배너

06 배너. 내 배너 올리기 · 🤝 맞배너 확인 · 내 러브로그 홈 연결. 맞배너 확인 참고.

아이콘 · 공유 카드

07 아이콘 · 공유. 파비콘 · 앱 아이콘과 함께, 홈 제목 · 주소 · 테마 색으로 공유용 이미지를 만듭니다. 아래 공유 카드 참고.

맨 아래 표시

08 맨 아래. 하트 · 링크 복사 · 가이드 · 문의 · 날짜 · 방문자 수를 켜고 끕니다. 방문자 수는 기본 꺼짐. 하트 · 링크 복사의 모양(글자 · 알약 · 네모)도 여기서 — 아래 하트 · 링크 복사 모양 참고.

직접 CSS

10 커스텀 CSS. 화면이 깨지면 주소 뒤에 ?nocss=1을 붙여 들어와 지우세요.

러브로그에서 가져오기

01 색 · 글씨 맨 아래. 러브로그 핸들을 넣으면 색·폰트·머리글·파비콘·배경·대문을 가져옵니다(비밀번호 제외).

관리

11 관리. 로그인 방법 · 홈 복구 코드 · 백업 · 되돌리기 · 🗄 자동 백업 보관함 · 페이지 휴지통 · 주소 변경 · 홈 초기화·삭제. 백업·되돌리기·이사 참고.

사진 자리img/li-presets.png

프리셋 — 네온 · 사이버 · 터미널 (2026.10.14)

• 01 색 · 글씨 → 테마 프리셋에 셋이 더 생겼습니다.

  네온

  검정 보라 바탕 · 핑크 빛 제목 · 민트 포인트

  사이버

  남색 HUD · 격자 · 화면 모서리 꺾쇠 · 카드 모서리 깎임 · Orbitron 제목

  터미널

  검정 콘솔 · ● ● ● ~/핸들 창 제목 · $ INFO · 깜빡이는 커서

• 프리셋 안 색은 전부 포인트색과 보조색에서 나와요. 포인트색을 바꾸면 빛 · 선 · 꺾쇠까지 같이 바뀝니다.
• 보조색 칸은 이 세 프리셋을 골랐을 때만 포인트 아래에 보입니다. 네온은 포인트 글자 · 버튼 빛, 사이버는 고른 탭 알약, 터미널은 창 제목 줄 · 버튼 테두리에 쓰입니다. 프리셋을 바꾸거나 「↺ 프리셋 색으로 되돌리기」를 누르면 보조색도 같이 초기화됩니다.
• 사이버 · 터미널은 글꼴을 안 고르면 모노 글꼴, 고르면 고른 대로.

사진 자리img/li-preset-new.png

사진 자리img/li-preset-acc.png

홈 BGM — 여러 곡

• 꾸미기 09 BGM. 유튜브 링크나 mp3 주소를 붙여 넣고 「+ 추가」(Enter), 또는 「mp3 파일 올리기」(10MB · mp3 · m4a · ogg · wav). 30곡까지.
• 곡 줄에서 제목 · 아티스트를 바로 고칩니다. 유튜브 링크는 제목 · 채널명이 자동으로 들어옵니다. ↑ ↓ 순서, ✕ 빼기(토스트 「되돌리기」).
• 한 곡이 끝나면 다음 곡으로 이어집니다. 반복은 마지막 곡 다음에 처음부터, 무작위 순서는 매번 다른 순서로.
• 곡이 하나면 전과 똑같이 보이고, 둘 이상일 때만 다음 곡 »(바 모양은 « 이전 곡도)과 곡 번호가 나타납니다.
• 시작 볼륨 — 09 BGM → 재생 아래 슬라이더(5~100%). 방문자가 들어왔을 때 처음 나오는 소리 크기입니다.
  • 움직이는 동안 지금 나오는 소리로 바로 들어 볼 수 있습니다.
  • 아이폰 · 아이패드는 애플 규칙상 「mp3 파일 올리기」로 올린 곡만 적용되고, 유튜브 · 외부 mp3 주소는 기기 볼륨 그대로 나옵니다.
• 유튜브 곡과 mp3 곡을 섞으면 일부 폰에서 자동 이어재생이 멈출 수 있습니다. 같은 종류끼리 넣는 것을 권장합니다.
• 자동 재생(「첫 클릭에 자동 재생」) — 홈에 들어와 처음 화면을 누르는 순간 재생됩니다(대문이 있으면 「입장」 버튼 때). 브라우저가 클릭 전 자동 재생을 막기 때문에 첫 터치가 가장 빠른 방식이에요. 플레이어의 ■로 끄면 그 방문 동안은 다시 켜지지 않습니다.

사진 자리img/li-bgm-list.png

플레이어 색

• 09 BGM → 플레이어 → 「색」에서 포인트 · 바탕 · 글자 색을 따로 고를 수 있어요. 안 고르면 홈 색을 따라가고, 고른 뒤 옆의 「홈 색」을 누르면 다시 홈 색으로.
• 고르는 즉시 플레이어에 보이고, 미리보기는 PC로 두면 확인할 수 있어요(MOBILE 미리보기에선 「미리보기에서 끌어 놓기」를 켠 동안만 보이고, 소리는 나지 않아요). 픽셀 · 레트로 · 터미널처럼 고유한 색이 있는 모양은 일부만 바뀔 수 있어요.

사진 자리img/li-bgm-color.png

플레이어 모양 — 기본 10종

알약 · 동그라미 · 하단 한 줄

기존 모양.

미니멀

BGM 글자와 얇은 선 네모 버튼(▶ / ■ / »). 재생하면 글자 자리에 ♪ 제목. 색은 포인트색.

링

동그라미 버튼 하나. 테두리를 따라 재생 진행이 차오르고, 유튜브 곡이면 테두리가 천천히 돕니다. 재생 중이거나 올리면 옆에 제목.

터미널

$ play 제목 ▮ 한 줄. 재생 중엔 커서가 깜빡입니다. 배너의 터미널 모양과 세트.

글자 한 줄

배경 없이 ♪ 제목 · 아티스트 · 2/3 글자만 흘러갑니다. 글자를 눌러도 재생/멈춤.

픽셀

두꺼운 테두리 · 하드 섀도 · 대문자 모노. 재생하면 픽셀 음표가 뜁니다.

레트로

검은 디스플레이(녹색 글씨 + LED) + 얇은 선 버튼 + 진행선.

앨범 카드

커버 이미지를 크게. 왼쪽 위 ▾ 로 작은 알약으로 접히고 ▴ 로 펼칩니다(그 방문 동안 기억). 이 모양을 고르면 설정에 「커버 이미지」 올리기 칸이 나타납니다.

사진 자리img/li-bgm-players.png

플레이어 심플 모양 4가지 · 자리 (2026.10.15)

심플 4가지

09 BGM → 모양.

• 점 하나 — 작은 점 + BGM, 재생하면 점이 포인트색으로 숨 쉬듯
• 음표 — 선으로 그린 음표 하나, 재생하면 포인트색 · 마우스를 올리면 제목
• 글자만 — play ▸, 재생하면 ■ 제목
• 막대 셋 — 작은 막대 셋이 재생 중 위아래로

버튼 하나뿐이라 다음 곡 »은 없습니다. 곡이 여럿이면 끝나면 알아서 이어지고, 넘기기가 필요하면 다른 모양을 고르세요.

자리 — 9칸

09 BGM → 자리. 왼쪽 · 오른쪽 아래 둘뿐이던 자리가 9칸(위 · 가운데 · 아래 × 왼쪽 · 가운데 · 오른쪽)으로. 위 오른쪽은 ☰ 메뉴 아래에 놓여요. 하단 한 줄 모양은 늘 맨 아래. 전에 쓰던 자리는 그대로예요.

직접 놓기

1. 「미리보기에서 끌어 놓기」를 켭니다. 오른쪽 미리보기의 플레이어에 점선이 생기고 ☰ 메뉴 자리가 흐리게 보입니다.
2. 플레이어를 끌어다 놓습니다. 화면 비율(%)로 바로 자리가 잡히고, 화면 밖이나 ☰과 겹치면 안쪽으로 붙습니다.
3. 「● 저장」을 눌러야 남습니다.

폰 미리보기에는 이때만 플레이어가 보입니다.

폰 · PC 따로

자리 칸의 PC / 폰은 미리보기 MOBILE / PC와 같이 바뀝니다.

• 폰 자리를 안 정하면 PC의 9칸 자리를 따라갑니다. PC가 직접 놓은 자리면 좁은 폰에서 다른 걸 가릴 수 있어 왼쪽 아래로 갑니다.
• 「폰 자리 지우기」로 되돌립니다. 폰 ↔ PC 폭이 바뀌면(회전 등) 자리도 따라 바뀝니다.

폰 미리보기 띠

MOBILE 미리보기 아래에 사파리 주소창 · 홈 바 자리가 띠로 보입니다. 실제 폰에서 보이는 화면은 띠 위까지라, 플레이어는 늘 띠 위에 뜹니다. 폰 기종과 주소창 상태에 따라 높이가 조금씩 달라서 가장자리 근처는 거의 같고 한가운데는 조금 움직일 수 있어요.

사진 자리img/li-bgm-simple.png

사진 자리img/li-bgm-pos.png

사진 자리img/li-pv-safari.png

커서 모양 (2026.10.19)

내 커서 올리기

04 배경 · 효과 → 커서 모양 → 「내 커서 올리기」. 고른 그림이 방문자 화면의 마우스 커서가 됩니다.

• 큰 그림도 알아서 커서 크기로 줄여 저장하니 그대로 올리면 됩니다. 배경이 투명한 PNG가 가장 깔끔합니다.
• 움짤(GIF)은 첫 장면만 쓰입니다.
• 「기본으로」를 누르면 원래 화살표로 돌아갑니다.

크기 · 누르는 점

• 크기 — 작게(24) · 보통(32) · 크게(48)
• 누르는 점 — 클릭이 되는 자리. 화살표 모양 그림이면 왼쪽 위, 하트 · 동그라미처럼 가운데가 중심인 그림이면 가운데

「크게」는 브라우저 가장자리 가까이에서 잠깐 기본 화살표로 보일 수 있어요(브라우저가 큰 커서를 그렇게 처리해요).

어디에 보이나

• 홈 전체와 링크 · 버튼 위, HTML 페이지 · HTML 블록 안에서도 같은 커서입니다.
• 방명록처럼 글 쓰는 칸에서는 글자 커서(I) 그대로입니다. HTML 페이지 코드에 직접 cursor를 정해 둔 곳은 그 코드가 우선합니다.
• 편집 창(꾸미기 · 편집 · 페이지 관리) 안은 작업하기 편하게 기본 커서이고, 오른쪽 미리보기에서는 바뀐 커서를 바로 볼 수 있습니다.
• 「● 저장」을 눌러야 방문자에게 보입니다.

커서 효과와 같이

별 꼬리 · 반짝임 같은 「커서 효과」와 함께 쓸 수 있어요. 폰에는 마우스 커서가 없어서 폰에서는 커서 효과(터치한 자리)만 보여요.

사진 자리img/li-cursor.png

배경 HTML

• 넣기 — 꾸미기 04 배경 · 효과 → 「배경 HTML」 칸에 코드를 붙여넣고 「저장」. 캔버스 파티클 · 움직이는 그라데이션 · 직접 짠 애니메이션처럼 HTML로 만든 배경이 글 상자 뒤에 화면 가득 깔립니다. 10만 자까지.
• HTML 블록과 같은 격리 프레임에서 돌아가서 스크립트 · 캔버스 · 음원이 다 됩니다. 스크롤해도 화면에 고정되고, 클릭은 통과돼 배경은 눌리지 않습니다(배경 안의 버튼 · 링크는 동작하지 않아요).
• 겹치는 순서 — 배경 이미지 위 · 글 상자 아래 · 눈 · 별 같은 배경 효과는 그 위. 「덮는 정도 (HTML)」 슬라이더(기본 0%)로 테마 배경색을 살짝 덮으면 글이 더 잘 읽힙니다.
• position: fixed는 프레임 안에서 absolute로 바뀌고, 100vh는 화면 높이에 맞춰집니다. 화면을 채우려면 html, body { height: 100% }로 두고 안쪽 요소를 position:absolute; inset:0으로.
• 화면이 깨지거나 글이 안 읽히면 주소 뒤에 ?nocss=1을 붙여 들어오세요 — 배경 HTML · 직접 CSS가 꺼진 채 열립니다. 백업(JSON)에는 꾸미기와 함께 담깁니다.

<style>
  html, body { height: 100%; margin: 0; }
  .sky { position: absolute; inset: 0;
    background: linear-gradient(135deg, #ffd6e8, #d6e8ff, #ffd6e8);
    background-size: 300% 300%; animation: flow 12s ease infinite; }
  @keyframes flow { 0% { background-position: 0 50% } 50% { background-position: 100% 50% } 100% { background-position: 0 50% } }
</style>
<div class="sky"></div>

사진 자리img/li-bg-html.png

공유 카드

• 꾸미기 07 아이콘 · 공유. 홈 제목 · 부제(또는 직접 적은 문구) · 주소 · 테마 색과 폰트로 카드 이미지를 브라우저에서 만듭니다.
• 비율 — 가로 1200×630(카카오톡 · 트위터) · 정사각 1080×1080(인스타그램)
• 배경 — 테마 색 · 머리글 이미지 · BGM 커버 이미지 중에서. 이미지 위엔 테마 색 그라데이션이 깔려 글자가 읽힙니다.
• 보내기 — 「공유하기」는 폰 공유 시트로 이미지와 링크를 바로 보냅니다(안 되는 브라우저는 저장으로 대체). 「이미지 저장」은 PNG 내려받기, 「링크 복사」는 홈 주소.
• 제목 · 부제를 고치면 미리보기가 바로 바뀝니다. 어두운 테마에선 로고가 글자색으로 그려집니다.

사진 자리img/li-share-card.png

블록 간격

• 꾸미기 03 페이지 · 카드 → 「간격」 묶음의 「블록 간격」. 한 페이지 안에서 블록과 블록 사이 간격을 좁게(10px) · 보통(18px) · 넓게(30px) 중에 고릅니다. 홈 전체에 적용됩니다.
• 테두리 있는 블록(프로필 · 접은 글 · 음악)과 없는 블록(글 · 디데이 · 인용)이 섞여 들쭉날쭉해 보이면 「넓게」, 빽빽하게 이어 붙이고 싶으면 「좁게」.
• CHAT · TIMELINE 처럼 위에 라벨이 달린 블록은 라벨이 윗 블록에 붙어 보이지 않게 6px 더 띄웁니다.
• 같은 묶음의 「아래 여백」은 페이지 내용 끝 ~ 넘김 버튼 ~ 맨 아래 표시 사이 간격이라 다른 설정입니다.

사진 자리img/li-block-gap.png

하트 · 링크 복사 모양

• 꾸미기 08 맨 아래 → 「하트 · 링크 복사 모양」. 맨 아래의 ♡ 하트와 링크 복사 버튼 모양을 글자 · 알약 · 네모 중에 고릅니다. 고르면 바로 미리 보여요.

• 글자 (기본)

  테두리 없이 ♡ 12 · 링크 복사

  알약

  둥근 테두리 버튼 두 개

  네모

  모서리가 프리셋의 모서리 설정(둥글게 · 각지게)을 따라갑니다

• 어떤 모양이든 누르는 영역은 40~44px이고, 하트를 누르면 포인트색으로 바뀌는 건 같습니다. 하트나 링크 복사를 아예 끄는 건 바로 위 「맨 아래 표시 요소」에서.

사진 자리img/li-heart-skins.png

글자 또렷하게 · 폰 바닥 (2026.10)

• 회색 글자 — 프리셋 11개 모두 연한 회색(INFO · 날짜 · CHAT 라벨 · 맨 아래 표시)과 보조 회색(부제 · 설명)을 배경 대비 기준에 맞게 올렸습니다.
• 포인트색 글자 — 포인트색을 글자로 쓰는 곳(@계정 · D+숫자 · Q. · 방명록 이름)은 글자만 진하게 보정되고, 버튼 · 점 · 선의 포인트색은 그대로입니다. 직접 고른 포인트색에도 같이 적용됩니다.
• 맨 아래 표시 · 링크 복사 · 방명록 날짜 · 편집 패널 안내문 글자를 키웠고, 한글은 단어 중간에서 끊기지 않게, 한글 페이지 제목은 영문용 넓은 자간을 쓰지 않게 바뀌었습니다.
• 폰 화면 맨 아래 늘 깔리던 회색 띠(닫힌 설정 창의 그림자)가 사라졌고, ☰ 메뉴 · 넘김 화살표 · 페이지 점 · 재생 버튼은 보이는 크기는 그대로 두고 누르는 영역만 44px로 넓혔습니다.
• 날짜는 디데이 · 방명록 · 맨 아래 표시 모두 2026.01.14 모양으로 통일, 방문자 수의 「오늘」은 한국 시간 자정 기준입니다.

사진 자리img/li-footer-after.png