1. 브랜드 소개
플로온은 반려견과 보호자가 원하는 시간만큼 빌려 쓰는 대관 운동장이에요. 예약한 시간 동안 우리 일행만 쓰는 방식으로 준비하고 있어요. 여행 중에 들르기에도, 평소에 찾기에도 맞도록 만들고 있습니다.
핵심 문장
여행과 일상에서 반려견과 함께 쓸 공간을 찾는 보호자를 위한 대관 운동장. 플로온은 예약 전 이용 조건을 확인하고 상황에 맞게 선택할 수 있도록 돕습니다.
고객에게 하는 약속
예약하기 전에 이용 조건과 공간 정보를 확인할 수 있게 안내합니다. 함께 쓰는 사람과 반려견의 범위, 울타리와 출입구 사진, 이용 규칙, 변경·취소 조건을 숨기지 않고 먼저 보여드릴게요.
우리가 지키려는 것
2. 로고
플로온은 별도의 로고 그림 없이 글자 로고 "플로온"을 써요. 동글(Dongle) Bold 서체 한 줄로 적고, 글자를 바꾸거나 꾸미지 않아요.
배경별 적용
여백과 최소 크기
로고 둘레에는 글자 높이만큼 빈 공간을 둬요. 빗금 부분에는 다른 글자나 그림을 넣지 않아요.
플로온화면에서 가장 작게 쓸 때는 글자 크기 32px이에요. 동글은 글자가 작게 그려지는 서체라 다른 서체보다 크게 써요: 플로온
이렇게 쓰지 않아요
3. 색
맑은 날 하늘 아래 잔디 운동장을 떠올리게 하는 색이에요. 남색이 글자와 선을 맡고, 노랑과 초록은 꼭 필요한 곳에만 써요.
#E6EEF5아침 하늘
기본 배경
#1F3A5F깊은 남색
제목, 본문, 선, 로고
#7FB069잔디
"우리 차례" 칸
#FFD166햇살 노랑
주요 버튼 배경
#FFFFFF흰색
시간표 칸, 정보 상자
#46586F흐린 남색
보조 설명, 시간 표시
글자와 배경 조합 (명도 대비)
본문 글자는 대비 4.5 : 1 이상, 큰 제목과 버튼은 3 : 1 이상을 지켜요.
4. 글꼴
제목은 동글동글 발랄한 동글(Dongle), 본문은 붓으로 쓴 듯 부드럽고 오래 읽어도 편한 고운돋움(Gowun Dodum)을 써요. 두 서체 모두 류양희 디자이너가 만들었고, 수정과 배포가 자유로운 SIL Open Font License 1.1 서체예요. 화면에서는 Google Fonts로 불러와요.
플로온은 반려견과 보호자가 원하는 시간만큼 빌려 쓰는 운동장이에요. 지금은 문을 열기 위해 준비하고 있어요.
시간표의 시간은 예시예요. 실제 운영 시간은 정해지면 알려 드릴게요.
지키는 것
- 본문 한 줄은 한글 40자 안팎으로, 너무 길게 늘이지 않아요.
- 제목 안에서 한 단어만 다른 색이나 굵기로 강조하지 않아요.
- 글자는 단어 단위로 줄을 바꿔요(
word-break: keep-all).
5. 이미지
지금은 운영 중인 운동장이 없어서, 플로온 현장 사진은 아직 없어요. 그래서 보호자가 키우는 반려견의 실제 외출 사진을 이용 장면 예시로 써요. 오픈하면 실제 운동장 사진으로 바꿀게요.
사진: 보호자 제공. 여행 중에 찍은 보호자의 반려견이며 플로온 운동장이 아니에요.
분위기
반려견이 편안하게 쉬거나 마음껏 움직이는 순간. 맑은 하늘, 잔디, 나무처럼 바깥 공기가 느껴지는 장면을 골라요.
지키는 것
- 예시 사진에는 "플로온 운동장이 아니에요"처럼 실제 현장이 아님을 함께 적어요.
- 다른 시설이나 공원의 기구가 보이는 사진을 플로온 시설처럼 쓰지 않아요.
- 얼굴을 알아볼 수 있는 사람이 나오면 그 사람의 동의를 받은 사진만 써요.
- 반려견의 얼굴, 귀, 꼬리가 잘리지 않게 잘라요.
- 대체 텍스트는 사진에 보이는 장면을 그대로 적어요. 예: "은행나무 아래 한옥 돌담 앞 벤치에 앉아 웃고 있는 회색 반려견".
- 꾸밈용 사진에는 대체 텍스트를 비워 두고, 내용이 있는 사진에만 적어요.
6. 말투
확인할 수 있는 정보를 또렷하게, 친절한 존댓말로 말해요. 아직 정해지지 않은 것은 "준비하고 있어요", "정해지면 알려 드릴게요"라고 솔직하게 적어요.
| 쓰는 말 | 쓰지 않는 말 |
|---|---|
| 예약 전에 확인할 수 있어요 | 안전 보장, 절대 안전 |
| 이용 조건을 살펴보세요 | 완전 프라이빗, 항상 단독 이용 |
| 우리 일행만 쓰는 방식으로 준비하고 있어요 | 울타리 완비 (확인 전) |
| 정해지면 알려 드릴게요 | 최고, 유일, 어디서나 편리 |
예시
| 제목 | 예약하기 전에 이것들을 먼저 보여드릴게요 |
|---|---|
| 설명 | 이용 시간, 포함되는 것, 반려견이 여러 마리일 때의 조건은 오픈 전에 자세히 알려 드릴게요. |
| 버튼 | 준비 소식 받아보기 (지금), 가능한 날짜와 시간 확인하기 (오픈 후) |
| 안내 | 시간표의 시간은 예시예요. |
7. 화면 구성
첫 화면은 "우리 차례의 시간표"예요. 큰 제목 아래에 하루 시간표가 놓이고, 그중 한 칸만 넓게 열려 반려견 사진과 "우리 차례" 표시를 품어요. 예약한 시간 동안 우리 일행이 쓰는 플로온의 방식을 한눈에 보여줘요.
첫 화면 구조
시간표 칸
14시우리 차례시간표의 시간은 예시예요.
버튼
주요 버튼은 한 화면에 하나만 두고, 첫 화면과 마지막 구역에 같은 문구로 반복해요. 높이는 손가락으로 누르기 쉬운 52px이에요.
휴대폰 원칙
- 한 줄로 쌓아요. 가로로 밀어야 보이는 내용을 만들지 않아요.
- 시간표는 세로로 바꿔 시간이 위에서 아래로 흐르게 하고, "우리 차례" 칸만 크게 열어요.
- 양옆 여백은 16px, 버튼과 누르는 부분은 44px 이상이에요.
- 본문 글자는 16px 아래로 줄이지 않아요.
8. 움직임과 접근성
움직임은 "우리 차례"가 열리는 한 장면에만 써요. 구역마다 떠오르는 효과나 계속 반복되는 움직임은 쓰지 않아요.
| 움직임 | 위치 | 시작 | 멈춤 | 동작 줄이기를 켰을 때 |
|---|---|---|---|---|
| 시간표 칸이 차례로 나타나고 "우리 차례" 칸이 넓게 열림 (약 1초) | 첫 화면 | 페이지를 처음 열 때 한 번 | 끝나면 그대로 멈춤, 반복 없음 | 움직임 없이 열린 상태로 바로 보여요 |
| 버튼이 살짝 떠오르고, 누르면 살짝 작아짐 | 주요 버튼 | 마우스를 올리거나 누를 때 | 손을 떼면 원래대로 | 크기·위치 대신 투명도만 바뀌어요 |
| 버튼을 누르면 안내 문구가 바뀌며 강조됨 | 버튼 옆 안내 | 클릭·Enter·Space | 한 번 바뀌고 멈춤 | 움직임 없이 글자만 바뀌어요 |
직접 보기
14시우리 차례버튼을 누르면 첫 화면의 움직임을 다시 보여드려요.
키보드와 화면 읽기
- Tab으로 모든 버튼과 링크에 갈 수 있고, Enter와 Space로 눌러요.
- 키보드로 선택한 곳에는 남색 테두리가 항상 보여요.
- 그림으로만 전달하는 정보(시간표 등)에는 화면 읽기 프로그램을 위한 설명을 붙여요.
- 버튼을 눌러 바뀌는 안내 문구는 화면 읽기 프로그램에도 읽혀요.