사용자 화면 · 홈

홈 화면 (최근 본 작품만 있을 때)

HOM-003 · 2026. 02. 02

화면 이름 홈 화면 (최근 본 작품만 있을 때)

화면 위치 홈

화면 ID HOM-003

작성일 2026. 02. 02

Description

0	화면 접근 조건	앱 실행 후 홈 탭 진입 시 노출 하단 내비게이션 > 홈 탭 선택 시 접근 최근 본 작품이 있을 경우, 해당 화면 노출
1	사용자 최근 본 작품 영역	사용자가 최근 열람한 작품이 1개 이상 존재할 경우 노출 최대 5개의 작품 카드 노출 최신 열람순 기준으로 좌 → 우 작품 썸네일 작가명 우측 상단 찜 아이콘 카드 클릭 시 해당 작품 상세 화면으로 이동 (MKT-013) 로그인 사용자 아이콘 클릭 시 찜 상태 토글 아이콘 클릭 시 로그인 안내 모달(LOG-008) 노출
2	공통 규칙	홈 화면 내 콘텐츠 노출 우선순위는 다음과 같음 1순위 찜한 작품 영역 2순위 최근 본 작품 영역 찜한 작품 X 최근 본 작품만 존재하는 경우 노출되는 홈 상태 찜한 작품이 1개 이상 존재할 경우 최근 본 작품 영역이 있더라도 HOM-002 화면 구성으로 전환 해당 영역은 노출되지 않으며 HOM-001 화면 구성 홈 화면 내 모든 찜 기능은 로그인 사용자만 사용 가능 비로그인 사용자는 찜 상태 변경 불가 찜 관련 동작에 대한 별도 토스트 메시지는 노출하지 않음

Design Output

UI 디자인 산출물

위 스토리보드 기획을 CHAART OS 디자인 토큰으로 변환한 결과물. 실제 구현 시 참조할 최종 디자인.

9:41

차트, 검증된 기준으로
거래하는 리세일 마켓.

CHRT. 소개 보기

최근 본 작품

남춘모 원화

Nam TchunMo

이배 원화

Lee Bae

김선우 원화

Kim SunWoo

아야코 록카쿠 원화

Ayako Rokkaku

요시토모 나라 아트토이

Yoshitomo Nara

어떤 방식으로 찾으시겠어요?

직접 찾을게요

공개 마켓 탐색

조용히 찾을래요

프라이빗 세일 의뢰

실시간 마켓 업데이트

이배 원화

Lee Bae

김창열 원화

Kim TschangYeul

남춘모 원화

Nam TchunMo

김선우 원화

Kim SunWoo

요시토모 나라 아트토이

Yoshitomo Nara

지금 주목할 작품

이배 원화

Lee Bae

김창열 원화

Kim TschangYeul

남춘모 원화

Nam TchunMo

아야코 록카쿠 원화

Ayako Rokkaku

요시토모 나라 아트토이

Yoshitomo Nara

컬렉터들의 선택

김창열 원화

Kim TschangYeul

이배 원화

Lee Bae

아야코 록카쿠 원화

Ayako Rokkaku

김선우 원화

Kim SunWoo

요시토모 나라 아트토이

Yoshitomo Nara

AD BANNER

홈

마켓

개발 구현 가이드 — HOM-003 홈 화면 (최근 본 작품만 있을 때)

디자인 상태
완료

최종 승인
류우상 ✅

승인일
2026-03-27

Update History

2026.03.19인라인 스타일 → sb-dp-thumb-texture 클래스 전환

2026.03.16구현 가이드 최신화 — Description/토큰/디자인 산출물 기준 전면 재작성 (9섹션)

2026.03.16Applied Design Tokens/Design Description 구현 가이드 병합

2026.03.10와이어프레임+디자인 전면 리빌드 — 피그마 원본 기준 재작성, 최근 본 작품 Full Bleed Carousel 추가, Description 0~2번 정리

Implementation Specification

1. 화면 구조 개요

HOM-003은 찜한 작품이 없고, 최근 본 작품이 1건 이상인 사용자가 홈 탭 진입 시 노출되는 홈 화면이다.

로그인/비로그인 사용자 모두 접근 가능하며, 전체 레이아웃은 세로 단방향 스크롤이다. 가로 스크롤은 캐러셀 섹션 내부에서만 발생한다.

HOM-001(기본 홈)과 구조가 동일하되, 안심영역 카피 아래에 "최근 본 작품" Full Bleed Carousel이 HOM-003 고유 섹션으로 추가된다. 나머지 섹션(판단 프레이밍, 실시간 마켓 업데이트, 지금 주목할 작품, 컬렉터들의 선택, 소형 띠배너)은 HOM-001과 동일하다.

#	영역	높이/패딩	스크롤	HOM-001 대비
0	Status Bar (iOS)	44px	--	동일
1	헤더 (CHRT 로고 + 알림)	48px, px 24px	--	동일
2	안심영역 카피 + CTA	pt 32px pb 44px, px 24px	--	동일
3	최근 본 작품 (Full Bleed Carousel)	py 20px	가로 스냅	HOM-003 고유 추가
--	구분선 (divider)	1px, mx 24px	--	동일
4	판단 프레이밍 (선택 카드 2종)	pt 32px pb 28px, px 24px	--	동일
5	실시간 마켓 업데이트 (캐러셀)	py 20px	가로 스냅	동일
6	지금 주목할 작품 (캐러셀)	py 20px	가로 스냅	동일
7	컬렉터들의 선택 (캐러셀)	py 20px	가로 스냅	동일
8	소형 띠배너 (AD)	44px, py 12px, px 24px	--	동일
9	하단 탭바 (Tab Bar)	80px	--	동일
10	홈 인디케이터 (iOS)	34px	--	동일

2. 레이어 구조 + 치수

전체 뷰포트 너비 393px (iPhone 기준). 위에서 아래로 순서대로 기술한다.

2-0. Status Bar (iOS)

높이 44px, 시스템 영역 (개발 미관여)
좌측 시각 "9:41", 우측 셀룰러/Wi-Fi/배터리 아이콘

2-1. 헤더 (Header)

높이: 48px, display:flex; align-items:center; justify-content:space-between;
배경: var(--bg) var(--bg)
좌우 패딩: 24px
좌측: CHRT 모노그램 SVG (72x19px). 본체 fill --charcoal var(--charcoal), 마침표 점 fill --red-brand var(--red-brand)
우측: Lucide bell 아이콘 20x20px, stroke var(--charcoal) var(--charcoal), stroke-width 1.5

2-2. 안심영역 카피

패딩: 32px 24px 44px
타이틀: "차트, 검증된 기준으로 거래하는 리세일 마켓."
font-family: var(--sans) Pretendard | font-size: 28px | font-weight: 800 | line-height: 1.4 | letter-spacing:var(--ls-tight) | color: #060606
"차트," 부분만 color var(--red-brand) var(--red-brand)
CTA 버튼 "CHRT. 소개 보기":
margin-top: 24px | display: inline-flex | align-items: center | gap: 6px | padding: 10px 14px | min-height: 40px
border: 1px solid /* NOTE: 근사 토큰 없음, 치환 보류 */rgba(6,6,6,0.1) | background: transparent | border-radius: 0
font-family: var(--sans) | font-size: var(--text-13) | font-weight: 500 | letter-spacing:var(--ls-normal) | color: var(--alpha-80)
우측 chevron-right SVG 14x14px, stroke currentColor, stroke-width 2, top: -1.25px relative

2-3. 최근 본 작품 섹션 (HOM-003 고유)

래퍼: padding: 20px 0 20px
타이틀 행: display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; padding:0 24px
타이틀: "최근 본 작품" | font-family: var(--sans) | font-size: 17px | font-weight: 700 | letter-spacing:var(--ls-tight) | color: var(--charcoal) var(--charcoal)
이동 화살표: chevron-right SVG 8x14px | stroke: var(--charcoal) | stroke-width: 1.5 | stroke-linecap: square | stroke-linejoin: miter

스크롤 컨테이너 (#recentScroll)

display: flex | gap: 12px | overflow-x: auto | overflow-y: hidden
scroll-snap-type: x mandatory | scroll-padding-left: 24px | -webkit-overflow-scrolling: touch
scrollbar-width: none | padding: 0 0 2px 24px | cursor: grab

작품 카드 (최대 5장, 최신순)

카드 래퍼: flex: 0 0 44% | min-width: 0 | scroll-snap-align: start
썸네일: aspect-ratio: 1/1 | background: var(--paper) var(--warm-paper) | position: relative | overflow: hidden
이미지: width:100% | height:100% | object-fit: cover
찜 아이콘 (.chrt-save): position:absolute | top:8px | right:8px | z-index:1 | width:28px | height:28px
SVG: 18x18px | stroke: rgba(255,255,255,0.9) | stroke-width: 2 | filter: drop-shadow(0 1px 3px var(--alpha-40))
작가명 블록: margin-top: 8px
국문 작가명: font-family var(--sans) | 14px | 600 | ls -0.02em | color #060606 | line-height 1.3
카테고리 뱃지 (예: "원화"): display: inline-block | font-size: var(--text-2xs) | weight 500 | color /* NOTE: 근사 토큰 없음, 치환 보류 */rgba(6,6,6,0.35) | border: 1px solid /* NOTE: 근사 토큰 없음, 치환 보류 */rgba(6,6,6,0.1) | padding: 1px 5px | margin-left: 4px | ls 0.01em
영문 작가명: font-family var(--serif) Libre Baskerville | 12px | 400 | color /* NOTE: 근사 토큰 없음, 치환 보류 */rgba(6,6,6,0.45) | margin-top: 2px | line-height 1.3
End Spacer: flex: 0 0 24px | min-width: 24px (마지막 카드 우측 여백)

2-4. 구분선 (Divider)

margin: 0 24px | border-top: 1px solid /* NOTE: 근사 토큰 없음, 치환 보류 */rgba(6,6,6,0.06)
최근 본 작품 섹션과 판단 프레이밍 사이 시각적 분리

2-5. 판단 프레이밍 영역

패딩: 32px 24px 28px
타이틀: "어떤 방식으로 찾으시겠어요?" | font-family var(--sans) | 17px | 700 | ls -0.02em | color var(--charcoal) | margin-bottom 16px
카드 컨테이너: display:flex | gap:12px
카드 (.hom-choice-card): flex:1 | min-height:120px | border:1px solid var(--alpha-8) | background:transparent | padding:20px 16px 16px | display:flex | flex-direction:column | gap:12px | border-radius:0
카드 아이콘: Lucide 20x20px | stroke var(--red-brand) var(--red-brand) | stroke-width 1.5
좌측 카드: search 아이콘 | "직접 찾을게요" | "공개 마켓 탐색"
우측 카드: lock 아이콘 | "조용히 찾을래요" | "프라이빗 세일 의뢰"
카드 타이틀: 14px/600 | color #060606 | ls -0.01em | line-height 1.3
카드 서브라벨: 11px | color var(--alpha-40) | ls -0.005em | margin-top:auto

2-6. Full Bleed Carousel 공통 패턴 (3개 섹션)

실시간 마켓 업데이트(#marketScroll), 지금 주목할 작품(#pickScroll), 컬렉터들의 선택(#collectScroll) 3개 캐러셀은 동일 패턴이다.

래퍼: padding: 20px 0 20px
타이틀: font var(--sans) 17px/700/ls -0.02em + 우측 chevron-right 8x14px
스크롤 컨테이너: 최근 본 작품 캐러셀(2-3)과 동일한 CSS 속성
카드: flex 0 0 44% | aspect-ratio 1:1 | scroll-snap-align start
찜 아이콘: 비활성 상태 — bookmark 18x18 | stroke rgba(255,255,255,0.9) | drop-shadow
작가명: 국문 var(--sans) 14px/600 + 영문 var(--serif) 12px/400 세로 적층
End Spacer: 24px

2-7. 소형 띠배너 (AD)

패딩: 12px 24px 12px
배너: height 44px | background var(--paper) var(--warm-paper) | display:flex | align-items:center | justify-content:center | position:relative | overflow:hidden
linen 텍스처 패턴 (SVG data URI, background-size 4x4px, opacity 0.6)
라벨: font var(--mono) TASA Orbiter | 10px | color var(--text-muted) | ls 0.08em | uppercase | z-index 1

2-8. 하단 탭바 (Tab Bar)

높이: 80px | background var(--bg) var(--bg) | border-top: 1px solid rgba(26,26,26,0.06)
display:flex | align-items:center | justify-content:space-around | padding:0 24px
각 탭: flex-direction column | align-items center | gap 3px
활성 (홈): SVG 24x24 stroke var(--red-brand) stroke-width 1.8 | 라벨 10px/600 color var(--red-brand)
비활성 (마켓/PS/MY): SVG 24x24 stroke var(--text-muted) stroke-width 1.5 | 라벨 10px/500 color var(--text-muted)

탭	아이콘	상태
홈	Lucide home 24x24	활성 (red-brand)
마켓	Lucide shopping-cart 24x24	비활성
PS	Lucide lock 24x24	비활성
MY	Lucide user 24x24	비활성

3. 핵심 인터랙션

사용자 동작	시스템 반응
최근 본 작품 카드 탭	MKT-013 (작품 상세) 이동
최근 본 작품 chevron(>) 탭	최근 본 작품 전체 목록 화면 이동
찜 아이콘 탭 (로그인)	찜 상태 토글 (비활성 <-> 활성, fill/stroke var(--red-brand))
찜 아이콘 탭 (비로그인)	로그인 안내 모달 노출 (LOG-008)
캐러셀 가로 스와이프	scroll-snap 단위로 카드 전환, 스크롤바 숨김
캐러셀 마우스 드래그 (데스크톱)	mousedown: cursor grabbing + snap 해제 -> mousemove: scrollLeft 이동 -> mouseup: cursor grab + snap 복원
알림 아이콘(bell) 탭 (로그인)	HOM-004 (알림 목록) 이동
알림 아이콘(bell) 탭 (비로그인)	LOG-008 (로그인 안내 모달) 노출
"CHRT. 소개 보기" CTA 탭	소개 랜딩 (TBD) 이동
"직접 찾을게요" 선택 카드 탭	MKT-001 (공개 마켓) 이동
"조용히 찾을래요" 선택 카드 탭	프라이빗 세일 의뢰 (TBD) 이동
캐러셀 작품 카드 탭 (3개 공통 섹션)	MKT-013 (작품 상세) 이동
캐러셀 chevron(>) 탭	MKT-001 / 해당 목록 이동
띠배너 탭	외부 랜딩 이동
하단 탭바 탭	홈: HOM-001/002/003(분기) \| 마켓: MKT-001 \| PS: TBD \| MY: MYP-001

4. 상태 변화

4-1. 찜 아이콘 (.chrt-save)

상태	클래스	SVG 속성
비활성 (기본)	`.chrt-save`	fill: none \| stroke: rgba(255,255,255,0.9) \| stroke-width: 2 \| drop-shadow(0 1px 3px var(--alpha-40))
활성 (찜됨)	`.chrt-save.is-saved`	fill: var(--red-brand) \| stroke: var(--red-brand) \| transition: fill 0.25s ease, stroke 0.25s ease
프레스	`.chrt-save:active svg`	transform: scale(0.92)

4-2. 선택 카드 (.hom-choice-card)

상태	border-color	background
기본	var(--alpha-8)	transparent
hover	/* NOTE: 근사 토큰 없음, 치환 보류 */rgba(6,6,6,0.2)	rgba(6,6,6,0.015)

4-3. 캐러셀 드래그 상태

상태	cursor	scroll-snap-type
기본 (대기)	grab	x mandatory
드래그 중	grabbing	none (해제)
드래그 종료	grab (복원)	x mandatory (복원)

5. 네비게이션 플로우

5-1. 진입 조건 (어디서 오는가)

앱 실행 -> 홈 탭 진입 시 서버에서 사용자 데이터 확인
분기 우선순위: 찜한 작품 있음 -> HOM-002 > 최근 본 작품 있음 -> HOM-003 (현재) > 둘 다 없음 -> HOM-001
하단 탭바 "홈" 탭 재선택 시에도 동일 분기 로직 적용

5-2. 이탈 경로 (어디로 가는가)

사용자 액션	이동 화면	전환 방식
알림 아이콘 (로그인)	HOM-004	push
알림 아이콘 (비로그인)	LOG-008 (모달)	modal overlay
소개 보기 CTA	소개 랜딩 (TBD)	push
최근 본 작품 chevron	최근 본 작품 전체 목록	push
최근 본 작품 카드	MKT-013	push
"직접 찾을게요"	MKT-001	push
"조용히 찾을래요"	프라이빗 세일 (TBD)	push
캐러셀 작품 카드	MKT-013	push
캐러셀 chevron	MKT-001 / 해당 목록	push
찜 아이콘 (비로그인)	LOG-008 (모달)	modal overlay
띠배너	외부 랜딩	external
홈 탭바	HOM-001/002/003 (분기)	tab switch
마켓 탭바	MKT-001	tab switch
MY 탭바	MYP-001	tab switch

5-3. 화면 분기 규칙

사용자 상태	화면
찜한 작품 있음 (로그인)	HOM-002
찜 없음 + 최근 본 작품 있음	HOM-003 (현재 화면)
둘 다 없음 (기본)	HOM-001
비로그인	HOM-001 (찜 관련 UI 비노출, 최근 본 작품은 로컬 기준 가능)

6. 에러/예외 처리

예외 케이스	처리
비로그인 사용자가 찜 아이콘 탭	LOG-008 로그인 유도 모달 노출. 찜 관련 UI 동작 불가.
비로그인 사용자가 알림 아이콘 탭	LOG-008 로그인 유도 모달 노출
최근 본 작품이 5개 미만	있는 만큼만 노출 (1~4장). 0개인 경우 이 화면 자체가 노출되지 않음 (HOM-001로 분기).
찜한 작품이 새로 생긴 경우	다음 홈 탭 진입 시 HOM-002로 분기 (찜 우선순위가 높음)
네트워크 오류로 최근 본 작품 로딩 실패	최근 본 작품 섹션 비노출 (나머지 섹션 정상 렌더). 재시도 시 복원.
이미지 로딩 실패	썸네일 영역에 `var(--paper)` var(--warm-paper) 배경색 유지 (플레이스홀더)

7. 모션 스펙

대상	속성	값
.hom-choice-card (선택 카드)	transition	border-color 0.2s, background 0.2s
.chrt-save svg (찜 아이콘)	transition	transform 0.2s ease-out
.chrt-save.is-saved svg path	transition	fill 0.25s ease, stroke 0.25s ease
.chrt-save:active svg (프레스)	transform	scale(0.92)
캐러셀 스크롤	scroll-snap-type	x mandatory (드래그 중 none으로 해제 -> 종료 시 복원)

바운시/스프링 애니메이션 사용 금지 -- 절제된 고급 인상 유지
모든 transition은 ease 또는 ease-out 커브 사용

8. 여백 / 간격 요약

위치	속성	값
헤더 좌우	padding-left/right	24px
안심영역	padding	32px 24px 44px
안심영역 CTA 간격	margin-top	24px
최근 본 작품 래퍼	padding	20px 0
캐러셀 타이틀 행	padding / margin-bottom	0 24px / 12px
캐러셀 스크롤 컨테이너	padding / gap	0 0 2px 24px / 12px
캐러셀 End Spacer	flex / min-width	0 0 24px / 24px
작가명 블록	margin-top	8px
영문 작가명	margin-top	2px
카테고리 뱃지	padding / margin-left	1px 5px / 4px
구분선	margin	0 24px
판단 프레이밍	padding	32px 24px 28px
선택 카드 간격	gap	12px
선택 카드 내부	padding / gap	20px 16px 16px / 12px
띠배너	padding	12px 24px
탭바	height / padding	80px / 0 24px
탭바 아이콘-라벨 간격	gap	3px

9. 적용 디자인 토큰

9-1. 색상 토큰

토큰	실제값	사용처
`--bg`	var(--bg)	페이지 배경, 헤더, 탭바
`--charcoal`	var(--charcoal)	CHRT 로고 본체, 헤더 bell, 섹션 타이틀, chevron
`--red-brand`	var(--red-brand)	"차트," 카피, 찜 활성, 선택카드 아이콘, 홈 탭 활성, CHRT 마침표 점
`--paper`	var(--warm-paper)	썸네일 플레이스홀더, 띠배너 배경
`--text-muted`	var(--text-muted)	비활성 탭 아이콘/라벨, 띠배너 텍스트
#060606	(하드 블랙)	안심영역 타이틀, 작가명, 선택카드 타이틀
var(--alpha-8)	(약한 보더)	선택카드 border, CTA border
/* NOTE: 근사 토큰 없음, 치환 보류 */rgba(6,6,6,0.06)	(초약한 보더)	구분선, 탭바 border-top
/* NOTE: 근사 토큰 없음, 치환 보류 */rgba(6,6,6,0.35)	(보조 텍스트)	카테고리 뱃지 color
/* NOTE: 근사 토큰 없음, 치환 보류 */rgba(6,6,6,0.1)	(뱃지 보더)	카테고리 뱃지 border, CTA border
/* NOTE: 근사 토큰 없음, 치환 보류 */rgba(6,6,6,0.45)	(영문 작가명)	영문 작가명
var(--alpha-40)	(서브라벨)	선택 카드 서브라벨
var(--alpha-80)	(CTA 텍스트)	소개 보기 CTA 텍스트
rgba(255,255,255,0.9)	(찜 비활성)	찜 아이콘 stroke (비활성 상태, 이미지 위 가시성 확보)

9-2. 타이포그래피 토큰

요소	font-family	size	weight	letter-spacing
안심영역 타이틀	`--sans`	28px	800	-0.02em
섹션 타이틀	`--sans`	17px	700	-0.02em
선택카드 타이틀	`--sans`	14px	600	-0.01em
국문 작가명	`--sans`	14px	600	-0.02em
CTA 라벨	`--sans`	13px	500	-0.01em
영문 작가명	`--serif` (Libre Baskerville)	12px	400	normal
선택카드 서브라벨	`--sans`	11px	400	-0.005em
카테고리 뱃지	`--sans`	10px	500	0.01em
탭바 라벨	`--sans`	10px	활성 600 / 비활성 500	-0.01em
띠배너 라벨	`--mono` (TASA Orbiter)	10px	400	0.08em

9-3. 아이콘 토큰

아이콘	크기	stroke/fill	위치
bell (알림)	20x20px	stroke `--charcoal` 1.5	헤더 우측
chevron-right (CTA)	14x14px	stroke currentColor 2	소개 보기 CTA 우측
chevron-right (섹션)	8x14px	stroke `--charcoal` 1.5	섹션 타이틀 우측
bookmark (찜)	18x18px	stroke rgba(255,255,255,0.9) 2	썸네일 우상단 (top:8px right:8px)
search (선택카드)	20x20px	stroke `--red-brand` 1.5	좌측 선택 카드
lock (선택카드)	20x20px	stroke `--red-brand` 1.5	우측 선택 카드
home (탭바)	24x24px	stroke var(--red-brand) 1.8	탭바 (활성)
shopping-cart (탭바)	24x24px	stroke `--text-muted` 1.5	탭바 (비활성)
lock (탭바)	24x24px	stroke `--text-muted` 1.5	탭바 (비활성)
user (탭바)	24x24px	stroke `--text-muted` 1.5	탭바 (비활성)

9-4. 레이아웃 토큰

속성	값	비고
전체 좌우 패딩	24px	헤더, 안심영역, 타이틀, 판단 프레이밍, 띠배너 공통
캐러셀 카드 너비	44%	flex-basis, 뷰포트의 약 44% (393px 기준 ~173px)
캐러셀 카드 비율	1:1	aspect-ratio 1/1 (정사각형)
캐러셀 카드 gap	12px	카드 간 간격
border-radius	0	직각 원칙 -- 모든 카드/이미지/CTA R=0
터치 타겟	min 44px	CTA min-height 40px + padding 보정, 탭바 44px+

9-5. CSS 클래스 레퍼런스

클래스	용도
`.hom-choice-card`	판단 프레이밍 선택 카드 (2종) -- hover transition 포함
`.chrt-save`	찜(북마크) 아이콘 래퍼 -- 28x28px absolute 위치
`.chrt-save.is-saved`	찜 활성 상태 -- fill+stroke var(--red-brand)
`.chrt-save:active svg`	프레스 피드백 -- scale(0.92)

9-6. JS 드래그 스크롤

대상 ID 4개: recentScroll, marketScroll, pickScroll, collectScroll
HOM-001은 3개(market/pick/collect), HOM-003은 recentScroll 1개 추가하여 4개
mousedown: cursor='grabbing', scrollSnapType='none'
mousemove: scrollLeft = scrollL - (pageX - offsetLeft - startX)
mouseup / mouseleave: cursor='grab', scrollSnapType='x mandatory'

← 이전 화면: HOM-002 다음 화면: HOM-004 →