LOLLYCHAT · BRAND GUIDE 01A LITTLE HELLO. A BIG FRIENDSHIP.

우리 아이 외국인 친구, 롤리챗.

작은 인사에서
시작되는 큰 우정.

익숙한 채팅 심볼에 새로운 이름을 담았어요.
외국인 AI 친구와 대화하며 배우는
공부메신저, LollyChat.

01 / IDENTITY

부담 없이 말을 걸 수 있는 친구처럼.

이름은 새롭게.
친근함은 그대로.

롤리챗은 아이가 먼저
이야기하고 싶은 친구입니다.

영어뿐 아니라 일본어·중국어 등 다양한 언어로 일상의 대화를 나눕니다. 밝은 노랑, 부드러운 말풍선, 또렷한 눈빛으로 즐거운 첫인사를 표현합니다.

영문 표기LollyChat

한글 표기롤리챗

문장에서는 LollyChat, 로고에서는 소문자 lollychat을 사용합니다.

친근하게

가르치는 목소리보다
먼저 인사하는 친구의 말투.

명랑하게

가볍고 밝게.
과하게 유아적이지 않게.

믿음직하게

꾸밈은 간결하게.
정보와 약속은 또렷하게.

02 / LOGO SYSTEM

같은 얼굴, 새로운 이름.

PRIMARY LOCKUP · VECTOR OUTLINES

채팅 심볼

기존 말풍선·두 눈·세 줄을 그대로 계승.

SVG 다운로드 ↗

워드마크

레트로 소문자. 글자는 벡터 아웃라인으로 제공.

SVG 다운로드 ↗

보호 공간

심볼 폭의 ¼을 x로 정합니다. 로고 사방에 최소 x만큼 여백을 둡니다.

최소 크기

조합 로고 140px 이상. 일반 UI 심볼 24px 이상. 16px 심볼은 전용 파비콘을 사용합니다.

형태 유지

늘리기 ×기울이기 ×윤곽 변경 ×

가로세로 비율, 눈 간격, 말풍선 꼬리, 세 줄의 위치를 바꾸지 않습니다.

03 / COLOR & TYPE

밝게 기억되고, 선명하게 읽히도록.

Hello Yellow

브랜드의 첫인사#FFEB00

Chat Ink

로고·제목·주요 텍스트#111827

Talk Blue

활성·링크·대화 강조#0066FF

Cloud Gray

여백·보조 배경#F1F5FA

같은 목소리로,
선명하게 말해요.

랜딩페이지 실제 스타일을 기준으로 정리했습니다. 한글·영문 UI는 Pretendard 1.3.9, 로고는 American Typewriter Bold 기반의 전용 SVG를 사용합니다.

폰트 상세 가이드 보기 ↓

03.1 / TYPOGRAPHY

랜딩페이지 기준 폰트 가이드.

글자는 친근하게.
정보는 또렷하게.

기준 파일은 랜딩페이지 index.html과 assets/style.css입니다. 아래 값은 현재 구현값이며, 개별 섹션에 별도 지정된 스타일은 해당 규칙을 따릅니다.

UI & Body · Pretendard

우리 아이의 새로운 친구.
Hello, my friend!

한글·영문·숫자를 같은 서체로 사용합니다. 랜딩은 Pretendard 1.3.9의 정적 CSS를 CDN에서 불러옵니다. 미설치·로딩 실패 시 운영체제 기본 sans-serif로 표시됩니다.

Logo · American Typewriter Bold

로고 전용 서체입니다. 제공된 SVG 윤곽선을 사용하며 본문·버튼·긴 문장에 적용하지 않습니다. 별도 폰트 설치 없이 로고가 유지됩니다.

HERO TITLE

첫인상을 만드는 큰 제목.

기본 PC · clamp(72px, 7.35vw, 108px) / 850.
모바일 ≤800px · clamp(43.5px, 11.55vw, 60px).
PC 행간 1.16 · 자간 −0.065em. 모바일 행간 1.18.

너비 801–1100px는 58.5–75px. PC 높이 ≤850px는 54–93px, ≤670px는 45–70.5px. 모바일 너비 ≤360px는 43.5px, 높이 ≤700px는 39–51px, 가로 화면 높이 ≤480px는 37.5px. CSS 적용 순서에 따라 마지막 조건이 우선합니다.

SECTION TITLE

섹션 제목.

clamp(30px, 3.2vw, 44px) / 750.
모바일 ≤700px는 30px.
행간 1.25 · 자간 −0.045em.

문제 제기·말풍선 등 별도 지정된 섹션은 전용 크기를 사용합니다.

STEP TITLE

관심사가 통하는 친구를 찾아요.

시작 안내 단계 제목 · PC 22px / 600.
모바일 ≤800px는 20px / 600.
행간 1.45. 번호와 제목 모두 세미볼드.

BODY COPY

편안하게 읽는 설명.

기본 섹션 설명 · 16px / 400 / 행간 1.9.
모바일 ≤700px는 15px.
시작 안내 단계 설명은 모든 기기에서 16px / 행간 1.85.

시작 안내 설명의 왼쪽은 번호가 아닌 제목 글자의 시작선과 맞춥니다.

KICKER & NAVIGATION

정보의 위치를 알려주는 글자.

섹션 상단 라벨 · 17px / 600 / 행간 1.6.
모바일 ≤700px는 15px.
PC 주 메뉴 · 18px / 400. 좁은 PC에서는 16px.

BUTTON & NOTE

누르는 글자와 보조 정보.

기본 CTA · 16px / 750.
모바일 히어로 CTA · 14px.
보조 문구 · 12px / 행간 1.8.
모바일 ≤700px 보조 문구 · 11px.

작은 CTA와 개별 섹션 버튼은 별도 규칙을 적용합니다.

개발 적용.

랜딩과 같은 로딩 경로와 폰트 스택을 사용합니다. 750·850처럼 기본 정적 굵기 사이의 값은 브라우저가 사용 가능한 굵기로 매칭할 수 있습니다.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css">

body {
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, sans-serif;
  line-height: 1.7;
  word-break: keep-all;
}
h1, h2, h3 {
  line-height: 1.25;
  letter-spacing: -.045em;
}

제목은 의미 단위로 줄바꿈합니다. 본문은 과도한 수동 줄바꿈을 피합니다. 기본 글자 #111827, 설명 #667085, 활성 강조 #0066FF를 사용합니다.

04 / A LITTLE PERSONALITY

눈을 깜빡. 반가움이 반짝.

살짝 움직여서,
더 말 걸고 싶게.

눈 깜빡임과 작은 리액션만으로
심볼에 귀여운 표정을 더합니다.

HELLO LOOP · 4.8s

01 / BLINK

장난스러운 두 번 깜빡임

4.8초 주기. 눈의 중심과 좌우 간격은 유지하고 높이만 짧게 줄입니다.

02 / REACTION

세 줄이 차례로 반짝

0.12초씩 엇갈려 가볍게 뻗었다 돌아옵니다. 심볼 본체는 1px 정도만 통통.

03 / COMFORT

대화에 집중할 때는 조용히

소개·환영 화면에 사용합니다. 본문 옆 반복 배치는 피하고, 움직임 감소 설정에서는 정지합니다.

애니메이션 로고 SVG ↓심볼 SVG ↓심볼 GIF ↓

SVG는 배경 투명·크기 독립형입니다. GIF는 노란 배경의 256px 미리보기용이며 3.6초 루프입니다. 파비콘에는 애니메이션을 적용하지 않습니다.

05 / FAVICON GUIDE

작은 탭에서도, 롤리챗답게.

YELLOW CANVAS · STATIC SYMBOL

노랑 한 칸.
작고 또렷한 얼굴.

워드마크 없이 채팅 심볼만 사용합니다. 노란 배경과 흰 얼굴, 잉크색 윤곽을 유지하고 네 모서리까지 배경을 채웁니다.

LollyChat · 롤리챗×

lollychat.com

180 / 홈 화면

컬러 베리에이션.

기본 Yellow 외에 세 가지 컬러를 제공합니다. 심볼의 모양과 선 두께는 동일하며, 배경·얼굴 내부·라인의 색만 바꿉니다. 파비콘은 정적 이미지로 사용합니다.

Black / Yellow

블랙 배경 · 노란 라인
#000000 / #FFEB00

SVG ↓ · ICO ↓

PNG · 16px · 32px · 48px · 180px · 192px · 512px

White / Ink

흰 배경 · 잉크 라인
#FFFFFF / #111827

SVG ↓ · ICO ↓

PNG · 16px · 32px · 48px · 180px · 192px · 512px

Blue / White

파란 배경 · 흰 라인
#0066FF / #FFFFFF

SVG ↓ · ICO ↓

PNG · 16px · 32px · 48px · 180px · 192px · 512px

블랙 버전은 순수 검정 #000000 배경에 노랑 #FFEB00 윤곽·눈·세 줄을 사용합니다. 아래 예시처럼 파일 경로를 바꾸면 적용됩니다. 기본형은 기존 노란 파비콘으로 유지했습니다. Apple Touch는 같은 컬러의 180px PNG를 사용하며, 설치 아이콘은 Manifest의 192·512px 경로를 함께 변경합니다.

<link rel="icon" type="image/svg+xml" href="assets/favicon-black-yellow.svg">
<link rel="shortcut icon" href="assets/favicon-black-yellow.ico">
<link rel="apple-touch-icon" sizes="180x180" href="assets/favicon-black-yellow-180.png">

브라우저 탭

SVG를 우선 사용합니다. 구형 환경용 ICO에 16·32·48px를 포함했습니다.

favicon.svg ↓ favicon.ico ↓

홈 화면·설치 아이콘

Apple Touch 180px, 웹 앱용 192·512px. 모서리 마스크는 기기에서 적용합니다.

180px PNG ↓ Manifest ↓

작게 쓸 때의 원칙

그림자·글자·추가 장식을 넣지 않습니다. 윤곽을 임의로 가늘게 만들거나 원본 로고 전체를 축소하지 않습니다.

웹사이트 적용 코드 보기

<link rel="icon" href="/brand/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/brand/favicon.ico" sizes="any">
<link rel="apple-touch-icon" href="/brand/apple-touch-icon.png">
<link rel="manifest" href="/brand/site.webmanifest">
<meta name="theme-color" content="#FFEB00">

배포 위치에 맞게 경로를 바꿔주세요. Manifest의 아이콘 파일은 같은 폴더에 둡니다.

06 / READY TO SAY HELLO

바로 사용할 수 있는 조합.

우리 아이 외국인 친구,
롤리챗.

Hi! What made you smile today?

Talking with you! 😊

대화가 쌓이면, 친구가 되니까.

새 이름으로,
다시 인사해요.

벡터 로고 · 모션 SVG · GIF · 파비콘 세트

전체 브랜드 킷 다운로드 ↓

작은 인사에서시작되는 큰 우정.

이름은 새롭게.친근함은 그대로.

친근하게

명랑하게

믿음직하게

채팅 심볼

워드마크

보호 공간

최소 크기

형태 유지

Hello Yellow

Chat Ink

Talk Blue

Cloud Gray

같은 목소리로,선명하게 말해요.

글자는 친근하게.정보는 또렷하게.

UI & Body · Pretendard

Logo · American Typewriter Bold

첫인상을 만드는 큰 제목.

섹션 제목.

관심사가 통하는 친구를 찾아요.

편안하게 읽는 설명.

정보의 위치를 알려주는 글자.

누르는 글자와 보조 정보.

개발 적용.

살짝 움직여서,더 말 걸고 싶게.

장난스러운 두 번 깜빡임

세 줄이 차례로 반짝

대화에 집중할 때는 조용히

노랑 한 칸.작고 또렷한 얼굴.

컬러 베리에이션.

Black / Yellow

White / Ink

Blue / White

브라우저 탭

홈 화면·설치 아이콘

작게 쓸 때의 원칙

새 이름으로,다시 인사해요.

작은 인사에서
시작되는 큰 우정.

이름은 새롭게.
친근함은 그대로.

같은 목소리로,
선명하게 말해요.

글자는 친근하게.
정보는 또렷하게.

살짝 움직여서,
더 말 걸고 싶게.

노랑 한 칸.
작고 또렷한 얼굴.

새 이름으로,
다시 인사해요.