make the app name the largest text on the landing page
CI/CD / test (push) Successful in 32s
CI/CD / deploy (push) Successful in 1m29s

The branding review no longer flags the missing purpose description, but
still reports that the app name does not match the homepage — even though
the console value and the h1 text are identical strings.

The likely reason is visual hierarchy: the app name was a 15px label while
the tagline underneath it was 32px, so the tagline read as the site's name.
The name and the tagline now swap sizes, and the logo moves above the
heading instead of sitting inline next to it.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
2026-08-11 10:34:15 +09:00
co-authored by Claude Opus 5
parent 0e8688c25b
commit b173911269
2 changed files with 23 additions and 31 deletions
+17 -24
View File
@@ -1136,37 +1136,30 @@ label {
text-align: center; text-align: center;
} }
/* 로고 + 앱 이름 h1 묶음. h1은 시각적으로 작은 브랜드 라벨이지만 문서 구조상 최상위 제목이다. */ .landing-logo {
width: 56px;
height: 56px;
border-radius: 14px;
}
/* 앱 이름 h1 — 화면에서 가장 큰 글자여야 한다(위 home.html 주석 참고). */
.landing-brand { .landing-brand {
display: flex;
align-items: center;
gap: 8px;
font-size: 15px;
font-weight: 700;
color: var(--color-accent);
letter-spacing: -0.01em;
}
.landing-brand h1 {
margin: 0; margin: 0;
font-size: inherit;
font-weight: inherit;
color: inherit;
letter-spacing: inherit;
}
.landing-brand img {
width: 24px;
height: 24px;
border-radius: 6px;
}
.landing-hero-title {
font-size: 32px; font-size: 32px;
font-weight: 700; font-weight: 700;
letter-spacing: -0.02em; letter-spacing: -0.02em;
text-wrap: balance; text-wrap: balance;
color: var(--color-accent);
}
/* 태그라인은 앱 이름 아래 부제 */
.landing-hero-title {
font-size: 18px;
font-weight: 600;
letter-spacing: -0.01em;
text-wrap: balance;
margin: 0; margin: 0;
color: var(--color-text);
} }
.landing-tagline { .landing-tagline {
+6 -7
View File
@@ -4,13 +4,12 @@
{% block content %} {% block content %}
<div class="landing"> <div class="landing">
<div class="landing-hero"> <div class="landing-hero">
{# 앱 이름은 h1의 순수 텍스트여야 한다 — 구글 브랜딩 심사가 OAuth 동의 화면의 앱 이름과 홈페이지 h1을 대조하는데, {# 앱 이름은 h1의 순수 텍스트이면서 화면에서 가장 큰 글자여야 한다 — 구글 브랜딩 심사가 OAuth 동의 화면의
h1 안에 alt="" 이미지가 섞여 있으면 이름을 추출하지 못한다. 로고는 h1 바깥에 둔다. #} 앱 이름과 홈페이지의 앱 이름을 대조하는데, 태그라인이 이름보다 크면 그쪽을 사이트 이름으로 본다.
<div class="landing-brand"> 로고는 이름 추출을 방해하지 않도록 h1 바깥에 둔다. #}
<img src="/static/icons/icon-192.png" alt="" /> <img class="landing-logo" src="/static/icons/icon-192.png" alt="" />
<h1>해빗랩 (HabitLab)</h1> <h1 class="landing-brand">해빗랩 (HabitLab)</h1>
</div> <p class="landing-hero-title">습관이 만들어지는 진짜 시간</p>
<p class="landing-hero-title">습관이 만들어지는<br />진짜 시간</p>
<p class="landing-tagline">21일의 법칙 대신, 습관마다 다른 진짜 목표 기간을 알려드려요</p> <p class="landing-tagline">21일의 법칙 대신, 습관마다 다른 진짜 목표 기간을 알려드려요</p>
<div class="landing-streak" aria-hidden="true"> <div class="landing-streak" aria-hidden="true">