# 놀아 계정 브랜드 브리프 (AI 전달용)

이 문서 하나면 됩니다. 색·명칭 규칙·마크 원본·버튼 코드·금지 사항이 모두 들어 있습니다.
마크는 SVG(글자로 된 그림 형식)라 본문에 그대로 담겨 있으므로 **별도 파일 첨부가 필요 없습니다.**

- 항상 최신본: https://account.nola.kr/developers/brief
- 사람이 보는 브랜드 가이드: https://account.nola.kr/developers/brand
- 생성 시각:2026-10-10 05:21:12

---

## 1. 이름 규칙

| 자리 | 표기 |
|---|---|
| 서비스 정식명 | **놀아 계정** |
| 영문 | **Nolaa Account** |
| 로그인 버튼 (기본) | **놀아로 계속하기** |
| 로그인 버튼 (로그인 전용 맥락) | 놀아 계정으로 로그인 |
| 로그인 버튼 (영문) | Continue with Nolaa |

쓰지 않는 표기: ~~놀아:회원~~, ~~놀아 로그인~~, ~~놀아 회원~~, ~~놀아SSO~~.
버튼 문구는 위 3개 외에는 쓰지 않습니다. 이 버튼은 로그인만이 아니라 신규가입도 함께 타기 때문입니다.

---

## 2. 색

| 이름 | 값 | 쓰는 곳 |
|---|---|---|
| 먹 (Ink) | `#15120F` | 로고 획·테두리, 본문 글자 |
| 주홍 (Vermilion) | `#D6342C` | 브랜드 기본, 주 버튼 채움 |
| 주홍 600 | `#B22A23` | 링크, hover |
| 주홍 700 | `#8E211B` | press |
| 주홍 50 | `#FDF2F1` | 옅은 배경 |
| 흰 | `#FFFFFF` | 배지 바탕 |
| 위험(삭제) | `#C0170F` | 되돌릴 수 없는 동작 |

명도 대비: 흰 글자 / 주홍 **4.79:1** (WCAG AA 통과) · 주홍600 링크 / 흰 배경 **6.46:1** · 먹 / 흰 배경 **18.66:1**.

**주의 — 위험 버튼은 색이 아니라 형태로 구분합니다.**
브랜드 주홍과 삭제 빨강이 색상환에서 가까워, 색만으로 나누면 「확인」과 「삭제」가 같은 붉은 버튼이 됩니다.
주 버튼은 색을 채우고, 삭제 버튼은 **흰 배경 + 붉은 테두리 + 경고 아이콘**으로 만듭니다.

---

## 3. 마크

흰 배지에 먹 테두리, 붓으로 그은 「ㄴ」 한 획, 그리고 주홍 낙관. 전체가 하나의 도장입니다.

### 3.1 기본 (20px 초과에서 사용)
```svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="48" height="48" role="img" aria-label="놀아 계정">
  <rect x="1.5" y="1.5" width="45" height="45" rx="11" fill="#FFFFFF" stroke="#15120F" stroke-width="2.8"/>
  <g transform="translate(24 24) scale(.70) translate(-26.35 -23.75)"><path d="M14.6 8.4c-2.3 0-3.9 1.8-3.9 4.2v19.6c0 5 3.7 8.6 8.9 8.6h16.1c2.3 0 3.9-1.5 3.9-3.7s-1.7-3.8-4-3.9l-15.1-.6c-1.4 0-2-.8-2-2.3V12.6c0-2.4-1.6-4.2-3.9-4.2z" fill="#15120F"/><rect x="32" y="6.6" width="10" height="10" rx="2.4" fill="#D6342C"/></g>
</svg>
```

### 3.2 소형 (20px 이하 전용 — 테두리가 더 굵습니다)
```svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="48" height="48" role="img" aria-label="놀아 계정">
  <rect x="1.9" y="1.9" width="44.2" height="44.2" rx="10.5" fill="#FFFFFF" stroke="#15120F" stroke-width="3.6"/>
  <g transform="translate(24 24) scale(.66) translate(-26.35 -23.75)"><path d="M14.6 8.4c-2.3 0-3.9 1.8-3.9 4.2v19.6c0 5 3.7 8.6 8.9 8.6h16.1c2.3 0 3.9-1.5 3.9-3.7s-1.7-3.8-4-3.9l-15.1-.6c-1.4 0-2-.8-2-2.3V12.6c0-2.4-1.6-4.2-3.9-4.2z" fill="#15120F"/><rect x="32" y="6.6" width="10" height="10" rx="2.4" fill="#D6342C"/></g>
</svg>
```
기본 마크는 테두리가 얇아 16px에서 흐려집니다. **작은 크기에서는 반드시 이쪽을 쓰세요.**

### 3.3 반전 (어두운 배경에 마크만 올릴 때)
```svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="48" height="48" role="img" aria-label="놀아 계정">
  <rect width="48" height="48" rx="11" fill="#15120F"/>
  <g transform="translate(24 24) scale(.72) translate(-26.35 -23.75)"><path d="M14.6 8.4c-2.3 0-3.9 1.8-3.9 4.2v19.6c0 5 3.7 8.6 8.9 8.6h16.1c2.3 0 3.9-1.5 3.9-3.7s-1.7-3.8-4-3.9l-15.1-.6c-1.4 0-2-.8-2-2.3V12.6c0-2.4-1.6-4.2-3.9-4.2z" fill="#FAF7F2"/><rect x="32" y="6.6" width="10" height="10" rx="2.4" fill="#D6342C"/></g>
</svg>
```

### 3.4 규칙
- **최소 크기** 화면 16px / 인쇄 6mm
- **보호 여백** 마크 높이의 25%를 사방에 비웁니다
- **가로 락업** `[마크] 놀아 계정` — 마크 높이 = 글자 높이 × 1.35, 간격 = 마크 높이 × 0.3

---

## 4. 로그인 버튼

### 4.1 규격
```
높이       40 / 44 / 48  (한 서비스 안에서는 하나로 통일)
모서리     8
좌우 패딩  16
마크 크기  높이 40→20, 44→22, 48→24
마크·글자 간격  10
글꼴       상속, weight 700, size 14
줄바꿈     금지 (white-space: nowrap)
```

### 4.2 종류
| 코드 | 배경 | 테두리 | 글자 | 쓰는 곳 |
|---|---|---|---|---|
| `light` | `#FFFFFF` | `#DADDE3` 1px | `#15120F` | 밝은 화면 (기본) |
| `dark` | `#20242C` | `#333944` 1px | `#F2F4F7` | 어두운 화면 |
| `filled` | `#D6342C` | 없음 | `#FFFFFF` | 강조. 한 화면에 하나만 |
| `icon` | 투명 | 없음 | 없음 | 폭이 좁은 자리 |

### 4.3 HTML
```html
<link rel="stylesheet" href="https://account.nola.kr/brand/nolaa-button.css">

<a class="nolaa-btn nolaa-btn--light nolaa-btn--44"
   href="/내서비스/로그인시작">놀아로 계속하기</a>
```
배경 클래스 1개 + 높이 클래스 1개를 함께 붙입니다.
`href`는 여러분 서버의 로그인 시작 지점을 가리켜야 합니다(거기서 인증 주소로 넘깁니다).

### 4.4 CSS 전문 (이 프로젝트 CSS에 의존하지 않는 독립 실행본)
```css
/* ============================================================
 * 놀아 계정 — 로그인 버튼 (Sign in with Nolaa) 독립 실행 CSS
 * devplan12 차수6
 *
 * 사용법
 * 1) 이 파일을 그대로 여러분의 사이트에 포함하세요: <link rel="stylesheet" href="nolaa-button.css">
 * 2) <a class="nolaa-btn nolaa-btn--light nolaa-btn--44" href="...">놀아로 계속하기</a> 처럼
 *    배경 클래스(--light/--dark/--filled/--icon) 1개 + 높이 클래스(--40/--44/--48) 1개를 함께 붙이세요.
 * 3) 이 파일은 이 프로젝트의 CSS 변수(--brand-primary 등)에 의존하지 않습니다. 값은 모두 고정 HEX이며
 *    임의로 바꾸면 안 됩니다. 자세한 규정은 /developers/brand, /developers/button 문서를 참고하세요.
 * ============================================================ */

.nolaa-btn {
  /* nolaa-mark.svg 를 인라인 data URI로 내장 — 외부 서버 요청 없이 항상 렌더됩니다. */
  --nolaa-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Crect x='1.5' y='1.5' width='45' height='45' rx='11' fill='%23FFFFFF' stroke='%2315120F' stroke-width='2.8'/%3E%3Cg transform='translate(24 24) scale(.7) translate(-26.35 -23.75)'%3E%3Cpath d='M14.6 8.4c-2.3 0-3.9 1.8-3.9 4.2v19.6c0 5 3.7 8.6 8.9 8.6h16.1c2.3 0 3.9-1.5 3.9-3.7s-1.7-3.8-4-3.9l-15.1-.6c-1.4 0-2-.8-2-2.3V12.6c0-2.4-1.6-4.2-3.9-4.2z' fill='%2315120F'/%3E%3Crect x='32' y='6.6' width='10' height='10' rx='2.4' fill='%23D6342C'/%3E%3C/g%3E%3C/svg%3E");

  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 16px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-family: inherit;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-font-smoothing: antialiased;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease;
}

.nolaa-btn::before {
  content: "";
  flex: none;
  display: inline-block;
  background-image: var(--nolaa-mark);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* 높이 3종 — 서비스 내에서는 하나만 골라 통일해서 쓰세요. 마크 크기는 높이에 비례합니다. */
.nolaa-btn--40 { height: 40px; }
.nolaa-btn--40::before { width: 20px; height: 20px; }

.nolaa-btn--44 { height: 44px; }
.nolaa-btn--44::before { width: 22px; height: 22px; }

.nolaa-btn--48 { height: 48px; }
.nolaa-btn--48::before { width: 24px; height: 24px; }

/* 배경 4종 */
.nolaa-btn--light {
  background-color: #FFFFFF;
  border-color: #DADDE3;
  color: #15120F;
}
.nolaa-btn--light:hover { background-color: #F5F6F8; }
.nolaa-btn--light:active { background-color: #EBEDF1; }

.nolaa-btn--dark {
  background-color: #20242C;
  border-color: #333944;
  color: #F2F4F7;
}
.nolaa-btn--dark:hover { background-color: #282D36; }
.nolaa-btn--dark:active { background-color: #171A20; }

.nolaa-btn--filled {
  background-color: #D6342C;
  border-color: transparent;
  color: #FFFFFF;
}
.nolaa-btn--filled:hover { background-color: #B22A23; }
.nolaa-btn--filled:active { background-color: #8E211B; }

/* 아이콘 전용(정사각, 글자 없음) — 마크만 표시합니다. 마크 크기는 높이 클래스가 그대로 결정합니다. */
.nolaa-btn--icon {
  background-color: transparent;
  border-color: transparent;
  padding: 0;
  gap: 0;
}
.nolaa-btn--icon.nolaa-btn--40 { width: 40px; }
.nolaa-btn--icon.nolaa-btn--44 { width: 44px; }
.nolaa-btn--icon.nolaa-btn--48 { width: 48px; }
.nolaa-btn--icon:hover { background-color: rgba(21, 18, 15, .06); }
.nolaa-btn--icon:active { background-color: rgba(21, 18, 15, .12); }

/* 포커스 상태 — 키보드 사용자를 위한 필수 표시 */
.nolaa-btn:focus-visible {
  outline: 2px solid #D6342C;
  outline-offset: 2px;
}
```

---

## 5. 하면 안 되는 것

**마크**
1. 색 변경 — 먹·주홍·흰 외 사용 금지
2. 비율 왜곡, 회전
3. 배지 테두리 제거 또는 두께 임의 변경
4. 그림자·글로우·외곽선 추가
5. 획과 낙관의 위치·크기 임의 조정
6. 복잡한 사진 위에 직접 얹기 (흰 판을 깔 것)
7. 문장 안에 아이콘을 글자처럼 끼워 넣기

**버튼**
1. 정해진 3개 외의 문구
2. 마크를 다른 아이콘으로 교체
3. 브랜드 색 외의 배경색
4. 다른 로그인 버튼보다 작게 배치
5. 마크와 글자 사이 간격을 6px 미만으로

**브랜드 사용 범위**
마크와 이름은 «이 서비스는 놀아 계정으로 로그인할 수 있다»를 알리는 목적으로만 씁니다.
놀아가 그 서비스를 보증·추천·제휴한다는 인상을 주는 방식으로는 쓸 수 없습니다.

---

## 6. 파일 (필요하면 내려받기)

| 파일 | 용도 |
|---|---|
| https://account.nola.kr/brand/nolaa-mark.svg | 마크 기본 |
| https://account.nola.kr/brand/nolaa-mark-sm.svg | 20px 이하 전용 |
| https://account.nola.kr/brand/nolaa-mark-dark.svg | 어두운 배경용 |
| https://account.nola.kr/brand/nolaa-mark.png | 래스터 512 (벡터 불가 환경) |
| https://account.nola.kr/brand/nolaa-button.css | 버튼 스타일 |
| https://account.nola.kr/developers/assets/download | 위 전부를 묶은 ZIP |

---

## 7. 로그인 연동까지 하려면

이 브리프는 **디자인**만 다룹니다. 실제 로그인 연동은 아래 문서를 보세요.

| 문서 | 주소 |
|---|---|
| 5분 만에 붙이기 | https://account.nola.kr/developers/quickstart |
| OAuth 2.0 연동 가이드 | https://account.nola.kr/developers/oauth |
| API 레퍼런스 | https://account.nola.kr/developers/api |
| 스코프 레퍼런스 | https://account.nola.kr/developers/scopes |
| 에러 코드 사전 | https://account.nola.kr/developers/errors |
| 보안 체크리스트 | https://account.nola.kr/developers/security |
| 데이터 취급 정책 | https://account.nola.kr/developers/policy |

연동에서 꼭 알아야 할 것 세 가지:
- **PKCE 필수** — `code_challenge` 없이 요청하면 거부됩니다. 방식은 `S256`만.
- **`state` 필수** — 보내기만 하지 말고 돌아온 값을 반드시 대조하세요.
- **`redirect_uri`는 등록값과 완전히 일치** — 끝 슬래시 하나만 달라도 거부됩니다.