# Translate a brand definition into a website

> Map problem, promise, proof, and personality to the hero, sections, and tone

- Canonical: https://learning.reopt.ai/en/courses/studio-brandfront/lessons/sbf-l2-definition
- Language: en
- HTML: https://learning.reopt.ai/en/courses/studio-brandfront/lessons/sbf-l2-definition

---

[Build a website with Brandfront](/en/courses/studio-brandfront) 1. Understand Brandfront — turn a definition into a website 2 / 12

# Translate a brand definition into a website

Map problem, promise, proof, and personality to the hero, sections, and tone
Concept 35 XP 7 min

브랜드프론트의 첫 화면은 브랜드 정의가 가장 먼저 드러나는 자리 입니다. 좋은 브랜드프론트는 로고를 크게 거는 대신, 방문자가 3초 안에 “이 브랜드가 나의 어떤 문제를 어떻게 해결하는지”를 읽게 합니다.
브랜드 설계 3축 전략 (누구를 위해, 어떤 문제를, 어떤 약속으로) · 표현 (시각·언어·행동으로 일관되게) · 운영 (확장 속에서도 일관성 유지). 브랜드프론트는 전략에서 고정한 정의를 표현 으로 옮기는 단계입니다.

## 정의 4요소 → 페이지 요소

| 정의 4요소 | 핵심 질문 | 페이지에서의 자리 |
| 문제 (Problem) | 고객이 가장 귀찮아하는 건? | 히어로 위쪽의 문제 제기 한 줄 |
| 약속 (Promise) | 우리와 함께하면 뭐가 달라지나? | 히어로 헤드라인 |
| 증거 (Proof) | 왜 그 약속을 할 수 있나? | 사례·수치·후기 섹션 |
| 성격 (Personality) | 어떤 사람 같은가? | 카피의 톤앤매너와 비주얼 무드 |

## 정의를 페이지로 옮기는 순서

- 1 약속을 헤드라인으로 가장 강한 한 문장을 히어로 맨 위에 둡니다.

- 2 문제를 바로 위/아래에 “이런 불편 있으셨죠?”로 방문자를 끌어당깁니다.

- 3 증거로 뒷받침 수치·사례·후기로 약속을 믿게 만듭니다.

- 4 성격을 톤으로 Voice(변하지 않는 성격)를 카피 문장 규칙으로 적용합니다.

- 5 행동 유도(CTA) 방문자가 다음에 할 한 가지를 명확히 제시합니다.

운영 원칙의 마지막 점검은 언제나 “ 첫 화면·첫 문장·첫 경험에 정의가 드러나는가 ”입니다. 멋있지만 약속이 안 보이는 히어로는 브랜드프론트의 가장 흔한 실패입니다.
핵심 정리

- 브랜드프론트는 전략에서 고정한 정의를 표현으로 옮기는 단계다
- 약속=헤드라인, 문제=끌어당김, 증거=뒷받침, 성격=톤으로 매핑한다
- 첫 화면에 브랜드 정의가 드러나는지가 최종 점검 기준이다

[Previous](/en/courses/studio-brandfront/lessons/sbf-l1-what) Got it · Continue

---

Site guide for agents: https://learning.reopt.ai/llms.txt · Sitemap: https://learning.reopt.ai/sitemap.xml · Contact: https://learning.reopt.ai/contact