# 하루결 브랜드 파일 사용 안내

브랜드·서비스 미리보기 0.5의 원본 자산입니다. 설치 앱 0.4.0의 자산이나 실제 계정 서버를 변경하지 않습니다.

## 이름과 약속

- 브랜드: **하루결 / HARUGYEOL**
- 기업 확장: **하루결 비즈니스 / HARUGYEOL BUSINESS**
- 공통: **오늘의 일을, 내일의 나에게.**
- 개인: **한 줄이면 충분해요.**
- 기업: **업무의 다음을 이어갑니다.**

‘하루’는 살아낸 시간, ‘결’은 그 시간에 남은 나만의 방식입니다. 펼친 기록의 선은 하루의 결을, 모서리의 점은 이어질 내일을 나타냅니다.

## 로고 선택

| 파일 | 용도 | SVG 캔버스 | 화면 최소 크기 |
|---|---|---|---|
| mark.svg | 앱 심볼·파비콘 | 64 × 64 | 24 × 24px; 파비콘만 16px 허용 |
| wordmark.svg | 개인 서비스·대표 브랜드 | 240 × 64 | 너비 120px |
| wordmark-business.svg | 기업 서비스 | 368 × 64 | 너비 184px |
| wordmark-en.svg | 영문 브랜드 | 304 × 64 | 너비 152px |
| wordmark-business-en.svg | 영문 기업 서비스 | 392 × 64 | 너비 294px |
| social-personal.svg | 개인 소개용 공유 배너 | 1200 × 630 | 원본 비율 유지 |
| social-business.svg | 기업 소개용 공유 배너 | 1200 × 630 | 원본 비율 유지 |
| share-card.svg | 사이트 공통 공유 이미지 초안 | 1200 × 630 | personal 배너와 동일 |

각 로고에는 `-mono.svg` 단색형과 `-reverse.svg` 반전형이 있습니다. SVG의 모든 글자는 윤곽선(path)으로 제공하며 외부 글꼴을 불러오지 않습니다. `-mono`는 단일 잉크색(#213D32)입니다. 검정 단색 인쇄가 필요하면 단일 색만 #000000으로 치환합니다.

밝은 종이색·흰색 배경에는 기본형을, 잉크색·숲색 배경에는 반전형을 사용합니다. 심볼의 너비를 x로 잡고 로고 바깥에 x/4 이상의 보호 여백을 추가합니다. SVG 캔버스의 내부 여백을 보호 여백으로 대신하지 않습니다.

가로세로 비율, 자간, 심볼 위치를 바꾸거나 회전하지 않습니다. 그림자·테두리·그라데이션을 추가하지 않습니다. 회사 로고와 서비스 로고를 같은 것으로 표시하지 않습니다. 회사의 등록 로고는 별도 조직 영역에 표시합니다.

## 색상

| 토큰 | 색상 | 용도 |
|---|---|---|
| --hg-paper | #F8F6F0 | 기본 화면 바탕 |
| --hg-ink | #213D32 | 제목·본문·짙은 배경 |
| --hg-muted | #57685F | 도움말·보조 설명 |
| --hg-green | #315B47 | 주요 버튼 |
| --hg-line | #D9DFD5 | 장식적 구분선 |
| --hg-white | #FFFEFA | 표면·짙은 배경 위 글자 |
| --hg-peach | #EFD5C2 | 개인 보조 면색 |
| --hg-clay | #9C553B | 개인 강조·온기 |
| --hg-teal | #245C61 | 기업 강조·초점 표시 |

일반 텍스트 조합: Ink/Paper 10.93:1, Muted/Paper 5.47:1, White/Forest 7.66:1, Clay/Paper 5.15:1, White/Clay 5.51:1, White/Teal 7.49:1, Ink/Apricot 8.42:1. 값은 제공된 RGB 색의 상대 휘도로 계산했습니다. `--hg-line`을 작은 글자나 입력 테두리의 유일한 식별 수단으로 사용하지 않습니다.

## 글자와 화면

시스템 글꼴 `Malgun Gothic`, `Apple SD Gothic Neo`, `system-ui`, `sans-serif` 순서. 외부 웹폰트는 요청하지 않습니다. 본문 16–18px, 본문 줄 간격 1.65 이상, 도움말 12–14px. 주요 제목은 화면 크기에 맞춰 40–76px 범위로 조정합니다. 공통 간격은 4px 단위로 쓰고, 기본 모서리는 8px입니다.

키보드 초점은 3px 선과 5px 바깥 여백으로 표시합니다. 버튼·메뉴의 조작 영역은 최소 44px 높이로 만듭니다. 오류·완료·대기 상태는 색과 문장으로 함께 알립니다. 움직임은 짧게 하고 `prefers-reduced-motion`을 따릅니다.

## 말투

개인은 짧고 다정하게, 기업은 구체적이고 존중하며 씁니다. 두 서비스 모두 다음 행동을 알려 주고, 검증하지 않은 결과를 단정하지 않습니다.

| 상황 | 권장 문구 |
|---|---|
| 개인 빈 화면 | 오늘, 어떤 일을 남겨둘까요? |
| 저장 완료 | 오늘의 기록을 남겼어요. |
| 다시 방문 | 지난 기록부터 이어서 볼까요? |
| 입력 누락 | 남길 내용을 한 줄 적어 주세요. |
| 저장 실패·화면 보존 확인 시 | 아직 저장하지 못했어요. 작성한 내용은 화면에 남아 있어요. |
| 기업 승인 대기 | 회사 관리자의 승인을 기다리고 있어요. |
| 보완 요청 | 다음 담당자가 확인할 자료 위치를 적어 주세요. |
| 조직 공유 안내 | 이 내용은 회사 공간의 구성원에게 보여요. |
| 미리보기 결제 | 결제 흐름 미리보기예요. 실제 결제는 발생하지 않아요. |
| 문의 파일 생성 | 요청서를 내려받았어요. 아직 전달되지 않았어요. |

성과 수치·보안 인증·실제 고객 후기·가입 완료·결제 완료·문의 접수는 근거가 있을 때만 표시합니다. 개인 기록에 인수인계 메뉴를 넣지 않고, 회사 참여가 개인 기록의 자동 공유로 보이지 않게 설명합니다.

## 사용·재생성

`tokens.css`를 사이트의 공통 스타일보다 먼저 불러옵니다. 로고는 의미 있는 `alt`를 가진 `img`로 표시하고, 인접 텍스트와 중복되는 장식용 심볼은 빈 `alt`로 제공합니다.

`create-assets.ps1`은 Windows의 맑은 고딕으로 글자를 윤곽선으로 바꾸어 SVG 자산을 재생성하는 제작 도구입니다. 글꼴 파일은 배포하지 않으며 생성된 SVG는 글꼴 설치 없이 표시됩니다. 다른 운영체제에서는 제공된 SVG 원본을 그대로 사용합니다.

최종 공개 때는 브랜드명·사업자 표시를 확정하고, 공유 채널에 맞는 PNG/JPEG 미리보기 이미지를 렌더링해 확인합니다. 이 묶음은 외부 서비스에 업로드하거나 기존 앱에 적용하지 않습니다.