Top Navigation

구조는 당근 SEED Top Navigation(Apache-2.0)을 따른다 — "화면 상단에 위치하여 탐색 인터페이스를 제공하는 네비게이션 컴포넌트" 로, 앱의 최상위 탭에서 쓰는 Root 와 "2-depth 이상의 화면에서" 쓰는 Standard 두 타입, 왼쪽(뒤로 · 닫기) · 가운데(제목) · 오른쪽(아이콘 · 글 버튼) 세 자리. 높이 56 · 아이콘 버튼 44 · 아이콘 24 · 화면 끝 6 은 SEED 값 그대로다. 데스크톱 머리(GNB)는 SEED 에 컴포넌트가 없어 groo 가 같은 규칙으로 더했다. 값은 groo 토큰이고, SEED 와 다른 자리는 맨 아래 "SEED 와 다른 점" 에 적었다(2026-10-04 사용자 결정). groo 에 처음 두는 컴포넌트다 — 지금 제품마다 다른 머리(56 · 58 · 48, 아이콘 버튼 36 · 40 · 48)를 대신한다.

수치 원본은 top-navigation.yaml이다. 수치 표 자리([표: …])와 그림 자리([그림: …])는 사이트가 그 파일로 그린다 — GitHub 에서는 그 파일 · 그림 코드로 가는 링크로 보인다.

직접 골라 보기제목 링크 복사

타입(Root · Standard · 데스크톱 머리) · 왼쪽 버튼(← · ✕ · ☰) · 오른쪽(아이콘 0 ~ 3 · 글 버튼) · 알림 점 · 제목 길이를 고르면 스펙대로 그린 바와 그 코드가 바뀐다. 제목을 길게 하면 오른쪽 자리 앞 8 에서 말줄임된다.

import { Bell, Search } from "lucide-react"
import { TopNavigation, TopNavigationActions, TopNavigationIconButton, TopNavigationTitle } from "@/components/ui/top-navigation"

<TopNavigation type="root">
  <TopNavigationTitle>홈</TopNavigationTitle>
  <TopNavigationActions>
    <TopNavigationIconButton aria-label="검색" onClick={openSearch}><Search /></TopNavigationIconButton>
    <TopNavigationIconButton notification={hasUnread} aria-label={hasUnread ? "알림, 새 알림 있음" : "알림"} onClick={openNotifications}><Bell /></TopNavigationIconButton>
  </TopNavigationActions>
</TopNavigation>

Anatomy제목 링크 복사

부위

Properties제목 링크 복사

Type제목 링크 복사

탭 첫 화면은 큰 제목으로 "이 탭의 맨 위" 가 보이고, 그 아래 화면은 ← 와 작은 제목이다(SEED Root · Standard). 제목은 늘 왼쪽이다 — 가운데 제목(iOS)은 두지 않는다. 굵기는 둘 다 700 이다(지금 하위 화면의 600 은 쓰지 않는 굵기다 — v100).

타입

제목제목 링크 복사

한 줄이다 — 길면 말줄임(…)하고, 오른쪽 자리 앞 8 을 늘 비운다(SEED titleMinGap). 글자 크기 설정을 1.2배까지 따른다(SEED) — 더 커져도 바 높이를 넘지 않는다. 제목은 화면의 h1 이다 — 화면을 옮기면 초점이 이 제목으로 온다(아래 "화면을 옮길 때").

제목

아이콘 버튼제목 링크 복사

상자 44 가 곧 누르는 영역이고 아이콘은 24 다 — 맨 끝 버튼의 상자가 화면 끝에서 6(아이콘은 16)이고, 버튼끼리는 붙는다(아이콘 중심 간격 44). 본문 안의 아이콘 버튼(Button medium · iconOnly — 보이는 40 · 아이콘 18)과 다른 부품이다. 바탕은 누를 때 · 마우스를 올릴 때만 보인다. 아이콘은 lucide 선 아이콘이다(v106 — 상단은 선 아이콘).

아이콘 버튼

글 버튼제목 링크 복사

오른쪽 자리에 하나만 둔다("완료" · "모두 읽음") — 높이 44 · 좌우 10 · 16 / 22 · 500. 글 버튼과 아이콘 버튼을 함께 두지 않는다. 글 버튼 글은 한두 마디로 쓴다 — 큰 글자 · 긴 글 버튼에서 제목이 밀리는 것은 이 쓰기 규칙(아이콘 둘 · 셋까지 · 글 버튼 한두 마디)으로 막고, 코드는 SEED 그대로 둔다(제목 최소 폭을 두지 않는다). 영어 문구도 짧게 — "Mark all as read" 가 아니라 "Read all"(2026-10-21 사용자 결정 — 03-G 결정 2 A).

글 버튼

검색칸제목 링크 복사

거래 검색 화면의 제목 자리와 데스크톱 머리의 왼쪽 자리에는 검색칸을 둔다 — Text Field 상자형(outline) medium 40 · 앞 돋보기 · 지우기 버튼. 바 56 안이라 폰에서도 medium 이다(large 52 를 두지 않는다). 검색 화면에서는 ← 다음 6 에서 시작해 오른쪽 자리 앞 8 까지 늘어난다 — 화면 이름 대신 칸이 서므로 보이지 않는 h1 "검색" 을 둔다(SEED — "Standard Top Navigation 의 경우 Title 영역을 Slot 으로 구성"). 데스크톱 머리에서는 본문 여백 32 에서 시작하는 폭 360 이다(2026-10-16 사용자 결정 — 구현 세션 질문 Q-017-3a C · Q-017-5 정리).

검색칸

왼쪽 버튼제목 링크 복사

standard 의 왼쪽 자리다. ← 는 들어온 화면으로 돌아가고, ✕ 는 모달 · 독립 흐름을 닫고, ☰ 는 주 메뉴(왼쪽 Side Panel)를 연다 — ☰ 는 HR 폰에서만 쓴다(Desk 폰은 Bottom Navigation). 아래 "← 와 ✕" · "← 는 들어온 화면으로" 를 따른다.

왼쪽 버튼

알림 점제목 링크 복사

벨 아이콘에 Notification Badge small(점 6 · fg-brand)을 붙인다 — 24 아이콘 상자의 x 17 ~ 23 · y 1 ~ 7. 상단 바에는 점만 둔다 — 숫자 알약(large)은 아이콘 오른쪽으로 자라 맨 오른쪽 버튼에서 "99+" 가 화면 밖으로 8.5 나간다. 새 알림이 있는지는 버튼 이름에 넣는다("알림, 새 알림 있음").

알림 점

바제목 링크 복사

높이 56 은 폰 · 데스크톱 모든 화면이 같다. 위 안전 영역(상태 표시줄)만큼 바가 높아지고 내용은 그 아래 56 에 놓인다 — 바탕은 화면 끝까지, 버튼 · 제목은 안전 영역 안이다(Layout 의 Safe Area). 바탕은 불투명한 bg-layer-default 이고 스크롤해도 선 · 그림자를 긋지 않는다.

바

Tone — 사진 위 투명 바제목 링크 복사

layer(기본)는 불투명 bg-layer-default 바다 — 모든 화면. transparent 는 사진이 화면 위를 채우는 상세(맨 위에 꽉 찬 카드 그림 · 사진)에서 사진 위에 겹쳐 두는 투명 바다 — 제목 · 아이콘 · 글 버튼이 흰 글자(static-white)이고, 막힌 버튼은 fg-disabled 그대로다(SEED tone transparent). 본문(사진)은 바 아래가 아니라 화면 맨 위(위 안전 영역 포함)에서 시작한다. 스크롤해 사진이 바 밑으로 지나가면 바탕이 채워진다 — layer 로 바뀌고(바탕 · 글 · 아이콘 색이 150ms 로) 선은 긋지 않는다(SEED — "배경이 투명한 Top Navigation 을 사용하는 경우 스크롤할 때 배경색이 채워지는 동작을 가집니다"). 지금 이 톤을 쓰는 화면은 없다(2026-10-22 사용자 결정 5C — https://claude.ai/artifact/Mag1tEv51MdQHdy1o8hY3L).

두 값은 열린 일이다 — groo 에 토큰이 없어 이 톤을 쓰는 화면을 이관할 때 함께 정한다(값은 SEED 그대로 둘 자리다).

• 바 위 막 — SEED 는 막(gradient — 바 위 검정 35% #00000059 → 아래 투명, 바 아래로 20 더)을 권한다 — 막 없이 쓰면 "콘텐츠 가독성을 직접 확보해야" 한다. 막 없이 흰 글자 · 아이콘을 밝은 사진 위에 두면 대비가 모자란다.
• 누름 · 호버 바탕 — SEED 는 투명도 있는 bg.transparent-pressed 다. groo 의 누름 바탕(bg-layer-default-pressed)은 불투명이라 사진 위에 회색 상자가 된다 — 정할 때까지 바탕 없이 2px 거리 축소만 한다.

톤

State제목 링크 복사

상태 — 아이콘 버튼

상태 — 글 버튼

모션

Guidelines제목 링크 복사

탭 첫 화면은 큰 제목, 그 아래는 ← 와 제목제목 링크 복사

하단 탭의 첫 화면(홈 · 가계부 · 캘린더 · 전체)은 root 다 — 왼쪽 큰 제목, 뒤로 버튼이 없다. 거기서 들어간 화면은 standard 다 — ← 와 제목. 같은 화면이 어떤 때는 큰 제목, 어떤 때는 ← 로 바뀌지 않게 화면마다 타입을 정해 둔다. 제목은 짧은 화면 이름이다 — "알림" · "카드 혜택".

오른쪽은 둘까지 — 넘치면 ⋯제목 링크 복사

오른쪽 아이콘 버튼은 2개를 권장하고 3개까지 둔다(SEED) — 더 있으면 자주 쓰는 것만 남기고 나머지를 ⋯ 하나에 모은다(1280 이상 Menu, 미만 Menu Sheet — 이름 "{화면 이름} 더보기"). 글 버튼은 하나만, 아이콘 버튼과 섞지 않는다. 제목이 오른쪽 자리에 밀려 읽히지 않을 만큼 늘어놓지 않는다.

Desk 에서는제목 링크 복사

아래는 부품 규칙이 아니라 Desk 의 화면 배치다 — 다른 서비스는 위 규칙(오른쪽은 둘까지 · 넘치면 ⋯)만 따른다(2026-10-22 사용자 결정 9B — https://claude.ai/artifact/Mag1tEv51MdQHdy1o8hY3L).

탭 첫 화면의 오른쪽 — 홈은 검색 · 알림, 나머지는 검색제목 링크 복사

Desk 폰(앱 · 웹 768 미만)의 탭 첫 화면은 오른쪽에 홈 = 검색 · 알림, 가계부 · 캘린더 · 전체 = 검색을 둔다 — 어느 탭에서나 머리에 검색이 있어 탭을 옮기지 않고 검색으로 간다(2026-10-16 사용자 결정 — 구현 세션 질문 Q-017-2a A). 검색은 어느 탭에서 누르든 같은 거래 검색 화면으로 가고, 벨은 알림 화면(standard — ← · "알림" · "모두 읽음")으로 간다. 웹도 같은 자리다 — 웹은 거래 검색 화면을 먼저 만들고 입구를 단다. "준비 중" 으로 가는 입구는 두지 않는다(Q-017-3a C).

금액 가리기는 탭 첫 화면의 머리에 두지 않는다 — 홈 · 자산 순자산 카드의 눈이 그 자리다. 그 눈은 그 카드가 가려졌는지를 그리고, 누르면 금액 가리기 설정의 그 화면 묶음(홈 · 자산)으로 간다(Q-017-2b A — 켜고 끄는 단추가 아니다, Toggle 의 "금액 가리기 눈은 Toggle 이 아니다").

거래 검색 화면 — 제목 자리 검색칸 · 숨는 거르는 줄제목 링크 복사

거래 검색 화면은 standard 다 — ← · 제목 자리의 검색칸 · 오른쪽 고급 필터 아이콘 버튼 하나. 검색칸 아래 거르는 줄(전체 · 지출 · 수입 Chip — 줄 40)은 바 아래 스크롤 상자 맨 위의 Scroll Auto Hide 다 — 목록을 내리면 숨고, 올려서 반 넘게 나오면 다 드러난다(2026-10-16 사용자 결정 — 구현 세션 질문 Q-017-5 C). 카드 혜택 화면의 거르는 줄(카드 이름 검색칸 + 칩 두 줄 — 140)도 같다. 바 자체는 숨지 않는다. 웹의 거래 검색 화면도 앱과 같은 화면이다 — 데스크톱(768 이상)에서는 머리 왼쪽 검색칸이 그 화면의 입력이다(Q-017-3a C). 검색 조건은 넷이다 — 키워드(검색칸) · 유형(전체 · 지출 · 수입 칩 줄) · 금액 범위(최소 · 최대) · 기간(시작 · 종료 — Input Button 으로 여는 Date Picker 기간 고르기, 브라우저 날짜 칸을 쓰지 않는다). 금액 · 기간은 고급 필터 안에 있다. 카테고리 · 자산 조건은 두지 않는다 — 가계부 화면의 필터가 맡는다(웹 · 앱 같다, 2026-10-21 사용자 결정 — I-01 결과 확인 결정 5A · 고치기 W2).

← 와 ✕제목 링크 복사

두 버튼은 다른 동작이다(SEED — 표는 원문 그대로).

✕ 는 모달 · 독립 흐름(여러 단계를 거치는 가져오기 · 처음 쓰기)을 닫을 때만 쓴다 — 일반 화면에 ✕ 를 두지 않는다. 입력한 값이 있는 흐름을 ✕ 로 닫으면 "작성한 내용이 사라져요" 를 묻는다(Field 의 규칙). 시트 · 대화상자의 닫기는 그 부품의 닫기 버튼이다(Bottom Sheet · Dialog).

← 는 어디로 — History 기본 · 화면마다 Hierarchy제목 링크 복사

← 는 기본으로 사용자가 실제로 지나온 화면으로 돌아간다(SEED 의 History Back — 웹 history.back() · 앱 pop). 주소로 바로 들어왔거나(알림 · 북마크 · 새 탭) 앱 안에 앞 화면이 없으면 그 화면의 상위 화면으로 간다 — 이때는 지금 주소를 고쳐 쓴다(뒤로 가기를 눌러 다시 이 화면으로 오지 않게). 상위 화면은 화면마다 정해 둔다(경로 설정). 기기 · 브라우저의 뒤로 가기와 ← 는 같은 곳으로 간다.

SEED 는 두 방식을 "화면의 목적과 진입 경로에 따라 선택" 하게 한다 — 설정처럼 "어디서 왔든 같은 곳" 이 나은 화면은 화면마다 상위 화면(Hierarchy Back)을 고를 수 있다. 두 방식이 갈리는 것은 지름길로 들어왔을 때뿐이다 — 들어온 길이 구조와 같으면 같은 곳으로 간다. 어느 화면이 Hierarchy 인지는 화면 이관 때 화면마다 비교 페이지로 고르고, 정하지 않은 화면은 History 다(2026-10-22 사용자 결정 4B — https://claude.ai/artifact/Mag1tEv51MdQHdy1o8hY3L).

• 대가 — Hierarchy 를 고른 화면은 ← 가 다른 탭의 화면으로 갈 수 있다 — 하단 탭 바의 지금 칸이 홈에서 전체로 뛴다(홈의 눈 → 금액 가리기 → ← → 설정). 고를 때 이것을 함께 본다.
• 열린 일 — Hierarchy 화면에서 기기 · 브라우저의 뒤로 가기도 ← 와 같은 곳으로 가는지(웹 브라우저의 뒤로는 방문 기록대로다), 레시피 TopNavigationBackButton · 앱 PTopNavigation 의 ← 에 "상위로" 를 고르는 값은 Hierarchy 를 고르는 화면이 생길 때(이관 때) 정해 더한다. 그 전까지 ← 는 지금 동작(History) 그대로다.

스크롤해도 선을 긋지 않는다제목 링크 복사

바는 스크롤해도 맨 위에 그대로 있고, 목록이 그 밑으로 지나가도 선 · 그림자를 긋지 않는다(SEED Top Navigation — "고정된 영역과 스크롤되는 영역을 구분하기 위해 별도의 시각적인 장치를 표시하지 않습니다"). 데스크톱 머리 아래 늘 있던 1px 선도 걷는다. 바는 스크롤 방향에 따라 숨지 않는다 — 원장 머리처럼 스크롤하면 숨는 보조 머리는 바 아래 스크롤 상자 안의 Scroll Auto Hide 다(2026-10-10). 사진 위 투명 바(transparent)는 사진이 바 밑으로 지나가면 바탕이 채워지고, 그때도 선을 긋지 않는다(위 "Tone"). 한 표면 안에서 머리와 본문이 따로 스크롤되는 Dialog · Side Panel · Side Navigation 은 그 부품의 규칙대로 본문이 스크롤되면 머리 아래 1px 선을 긋는다.

데스크톱 머리(Desk)제목 링크 복사

768 이상의 Desk 웹은 Side Navigation 오른쪽 · 본문 위에 머리(desktop)를 둔다 — 높이 56, 선 없음. 왼쪽은 검색칸(본문 여백 32 에서 · 폭 360 — 거래 검색 화면의 입구, Q-017-3a C), 오른쪽은 주 버튼 하나(Button brandSolid small — "내역 추가")와 아이콘 버튼 둘(알림 · 설정)이고 맨 끝 아이콘 버튼의 상자가 화면 끝에서 6 이다. 금액 가리기 눈은 머리에 두지 않는다 — 홈 · 자산 순자산 카드의 눈이 맡는다(2026-10-16 사용자 결정 — 구현 세션 질문 Q-017-3c = Q-018-3 B). 접기 버튼은 Side Navigation 머리에, 테마는 설정에 있다. HR 은 데스크톱 머리를 두지 않는다 — 접기 버튼은 Side Navigation 머리로, 테마는 사이드바 바닥 계정 메뉴의 "화면 테마"(기기 설정 · 라이트 · 다크)로 갔고(2026-10-23 사용자 결정 H-A3 A · H-A4 B) 위치는 Side Navigation 의 지금 항목이 알린다(빵부스러기는 걷었다). 머리가 없으면 본문은 화면 위 32(layout-margin — 본문 좌우 여백과 같다)에서 화면 제목부터 시작한다.

벨을 누르면 알림 목록이 뜬다 — 1280 이상은 벨 아래 Popover, 768 ~ 1279 는 Bottom Sheet 다(Q-017-3b B — Popover 의 "1280 미만은 Bottom Sheet" 그대로). 머리 "알림" · "모두 읽음" · 목록 · 바닥 "알림 설정" 은 두 표면이 같다. 폰(768 미만)의 벨은 알림 화면으로 간다.

데스크톱 화면 제목 — 한 줄제목 링크 복사

화면 제목은 머리가 아니라 본문 맨 위 h1 이다(text-screen-title 26 / 35 · 700, 머리 아래 spacing-nav-to-title 20). 모든 데스크톱 화면에 하나 둔다 — 홈 · 캘린더도 "홈" · "캘린더" 다(Q-018-2 정리 — 위치는 사이드바의 지금 항목과 이 제목이 알린다). 제목 줄은 한 줄이다 — 제목(설명 — 화면 부제는 그 아래 16 / 22 · 400 · fg-neutral-muted, 2026-10-16 사용자 결정 글자 역할 D6)이 왼쪽, 그 화면의 동작 버튼(Button small · neutralOutline — 회색 바닥 위라 neutralWeak 은 바닥과 같은 색이다, 2026-10-16 사용자 결정 174-3 A · 기초 웹 01-040 B)이 오른쪽이고 버튼은 제목 덩어리 아래 끝에 맞춘다(2026-10-16 사용자 결정 — 구현 세션 질문 Q-018-2 A). 글이 길면 설명이 줄을 바꾸고 버튼은 그 자리에 남는다. 화면을 옮기면 초점이 이 제목으로 온다(아래 "화면을 옮길 때").

화면 제목 줄

HR 폰 — ☰ 와 주 메뉴제목 링크 복사

HR 웹 768 미만은 하단 탭 바가 없다 — 모든 화면이 standard 이고 왼쪽에 ☰ 를 둔다(이름 "주 메뉴"). 누르면 왼쪽 Side Panel 이 열려 Side Navigation 의 항목을 보인다 — 지금 화면의 묶음이 펼쳐진 채 열리고, 항목을 누르면 이동하고 닫힌다. 사이드바 항목이 아닌 상세 화면은 ☰ 대신 ← 다.

화면을 옮길 때제목 링크 복사

다른 화면으로 옮기면(링크 · 탭 · 사이드바 항목) 스크롤을 맨 위로 보내고 초점을 그 화면의 제목(h1)으로 옮긴다 — 키보드 · 스크린리더가 새 화면의 처음에서 시작한다. 문서 제목(브라우저 탭)은 화면마다 "{화면 제목} - 그루 담다" · "{화면 제목} - 그루 이음" 이다. 뒤로 가기로 돌아오면 그 화면의 스크롤 위치를 돌려놓는다. 하단 탭을 오갈 때는 Bottom Navigation 이 정한다(탭마다 마지막 화면 · 스크롤을 기억 — 웹도), 가계부 묶음의 1차 탭을 오갈 때는 Tabs 가 정한다(탭마다 기억 — 초점은 고른 탭에 남는다).

글제목 링크 복사

제목은 화면 이름 — 명사로 짧게("알림" · "카드 혜택"), 마침표 없이. 아이콘 버튼의 이름은 동작이나 대상("검색" · "알림" · "설정"), 더보기는 "{화면 이름} 더보기". 글 버튼은 동사로 짧게("완료" · "모두 읽음").

코드제목 링크 복사

레시피 recipes/shadcn/components/ui/top-navigation.tsx 를 쓴다. 아래 미리보기는 스펙 값으로 그린 모습이다.

• TopNavigation — 바(<header>, main 밖). type("root" · "standard" 기본 · "desktop") · tone("layer" 기본 · "transparent" — 사진 위 흰 글자 · 아이콘, 바탕 없음). 투명 바는 쓰는 쪽이 사진이 바 밑으로 지나갔는지 보고 tone 을 "layer" 로 바꾼다(바탕 · 색은 150ms). 막 · 투명 누름 바탕은 열린 일이라 아직 그리지 않는다 — 누르면 축소만. 자식은 아래 부품.
• TopNavigationBackButton — ← (이름 "뒤로"). 누르면 앱 안에 앞 화면이 있으면 navigate(-1), 없으면 fallbackHref(그 화면의 상위 화면 주소, 필수)로 지금 주소를 고쳐 간다(replace). onClick 을 주면 그것을 부른다(앱은 pop).
• TopNavigationCloseButton — ✕ (이름 "닫기"). onClick 필수 — 흐름의 처음 자리로. dirty 면 닫기 전에 "작성한 내용이 사라져요" 를 묻는다.
• TopNavigationMenuButton — ☰ (이름 "주 메뉴", aria-haspopup="dialog" · aria-expanded · aria-controls). HR 폰의 주 메뉴 Side Panel 을 연다.
• TopNavigationTitle — 제목(<h1 tabIndex={-1} data-screen-title>). 한 줄 말줄임.
• TopNavigationSearch — 검색칸 자리. 자식은 Input 하나(size="medium" · prefixIcon 돋보기 · clearable). standard 에서는 제목 자리 — ← 다음 6 부터 오른쪽 자리 앞 8 까지 늘어나고 보이지 않는 h1(title, 기본 "검색")을 스스로 둔다. desktop 에서는 머리 왼쪽 폭 360.
• TopNavigationActions — 오른쪽 자리. 자식은 TopNavigationIconButton 3개까지 또는 TopNavigationTextButton 하나, desktop 이면 맨 앞에 TopNavigationPrimaryButton 하나.
• TopNavigationIconButton — 상자 44 · 아이콘 24. aria-label 필수, notification(벨의 알림 점 — 이름에 "새 알림 있음" 을 넣는 것은 부르는 쪽), <button type="button"> 속성. aria-pressed 는 그 자리에서 켜지고 꺼지는 단추에만 준다 — 이름은 그대로 두고, 아이콘은 지금 상태를 넘긴다. 켬은 선 2.5, 끔은 선 2 이고 색은 켬 · 끔 모두 이웃 버튼과 같은 fg-neutral 이다 — Toggle 의 흐린 끔(fg-neutral-muted)은 상단 바에서 쓰지 않는다. 아이콘 줄에서 하나만 흐리면 막힌 단추처럼 보인다(사용자 결정 2026-10-09 19B). 다른 화면으로 가는 버튼에는 aria-pressed 를 달지 않는다 — 낭독기가 "눌림" 을 읽고 누르면 화면이 바뀐다.
• TopNavigationTextButton — 글 버튼(<button type="button">).
• TopNavigationPrimaryButton — 데스크톱 머리의 주 버튼(Button brandSolid · small 그대로 + 오른쪽 8).
• ScreenTitle — 데스크톱 본문 맨 위 제목(<h1 tabIndex={-1} data-screen-title> · text-screen-title). description(제목 아래 설명 — t3 fg-neutral-subtle) · actions(그 화면의 동작 버튼 — Button small)를 주면 한 줄 제목 줄(제목 덩어리 왼쪽 · 버튼 오른쪽 아래 끝 맞춤)로 그린다. ref 는 늘 h1 이다.
• TopNavigationProvider — product("그루 담다" · "그루 이음"). useScreenTitle(title) 가 문서 제목을 "{title} - {product}" 로 쓴다.
• focusScreenTitle() — 셸이 화면을 옮긴 뒤 부른다: 본문 스크롤을 맨 위로, [data-screen-title] 에 초점(링은 키보드로 왔을 때만). { resetScroll: false } 면 초점만 옮긴다 — 하단 탭 · 가계부 묶음 탭을 오갈 때 셸이 기억한 스크롤을 돌려놓는다(목록이 그려진 뒤).

앱은 같은 값을 Dart 로 둔다(PTopNavigation — AppBar 대신, 제목은 Semantics(header: true, headingLevel: 1) — iOS 는 header 를, 안드로이드는 headingLevel 을 읽는다). 앱에는 랜드마크가 없어 이 제목이 화면 읽기의 첫 정거장이다 — DESIGN.md Layout 의 "랜드마크"(2026-10-16 사용자 결정 — 틀 앱 02-004).

탭 첫 화면 — Root제목 링크 복사