refactor(fe): 그림자를 elevation 토큰으로, 관계 지도 무채색 리터럴을 시맨틱 토큰으로

[seongbin9786]

배경

관계 지도와 타임라인 곳곳에 shadow-[...]와 그에 짝지어진 dark:shadow-[...] 리터럴이 흩어져 있었고, 관계 지도에는 bg-white dark:bg-zinc-950처럼 무채색 zinc/white 리터럴과 dark 짝이 반복됐다. 값이 코드에 박혀 있어 elevation 단계를 조정하거나 테마 대응을 바꾸기 어려웠다.

변경 내용

• styles.css에 elevation 1~4 단계 토큰을 라이트/다크 각각 정의했다(--letter-paper, --color-* 선례와 동일한 방식).
• @theme inline에 --shadow-e1--shadow-e4를 등록해 shadow-e1shadow-e4 유틸이 생성되도록 했다. 토큰이 테마별로 자동 전환되므로 dark:shadow-[...] 중복이 사라진다.
• 관계 지도, 타임라인 카드, 타임라인 피드, 홈 스로우백 카드의 그림자 리터럴을 토큰으로 치환했다.
• 관계 지도의 무채색 리터럴을 기존 background/foreground/muted/muted-foreground/accent/border 토큰으로 치환했다(styles.css에 새 색 토큰 추가 없음).

시각 확인 필요

이 PR은 값을 정규화하면서 일부 그림자의 blur/불투명도가 미세하게 바뀌고, 라이트 전용이던 그림자에 다크 그림자가 새로 생긴다. 머지 전에 라이트/다크 두 모드에서 아래 지점을 눈으로 확인해 주세요.

• 타임라인 카드 기본 그림자가 더 진해짐: 기존 0 10px 30px rgba(0,0,0,0.045)에서 라이트 shadow-e3(불투명도 0.045 → 0.08)로 바뀌어 그림자가 뚜렷해진다. 다크에서는 기존에 검정 저투명 그림자가 두 모드 공통으로 쓰였는데, 이제 다크 전용값 rgba(0,0,0,0.32)가 적용되어 다크에서 특히 강해진다. hover 그림자도 shadow-e4로 커진다.
• 라이트 전용 그림자에 다크 그림자가 새로 추가됨: 타임라인 피드 날짜 배지(shadow-e1), 관계 지도 내 이름 라벨과 인물 이름 라벨(shadow-e1)은 원래 다크 그림자가 없었다. 이제 다크에서 그림자가 보이는 의도된 다크 모드 보정이다.
• 내 프로필 이미지(shadow-e3): blur가 20px → 24px로 커지고 다크 불투명도가 0.28 → 0.32로 올라간다.
• 인물 노드 원형(shadow-e2): blur가 20px → 18px로 줄고 불투명도가 낮아져 그림자가 살짝 옅어진다.
• 홈 스로우백 카드(shadow-e4): 라이트 불투명도가 0.14 → 0.12로 약간 옅어진다(다크는 0.38로 동일).

무채색 치환(G)은 같은 회색 또는 매우 가까운 회색으로 매핑되어 겉보기 차이가 거의 없어야 한다. 그림자 정규화(elevation)만 위처럼 일부 값이 달라진다. 앰버 글로우, 스프레드 링, 음수 스프레드 그림자, SVG stroke, stone 궤도선은 건드리지 않았다.

그림자 토큰 매핑

기존 값	토큰	사용처
0 10px 24px rgba(24,24,27,0.08) + dark 0 10px 24px rgba(0,0,0,0.34)	shadow-e3	관계 지도 줌 컨트롤 컨테이너 (다크 0.34 → 0.32)
0 8px 18px rgba(24,24,27,0.05) + dark 0 8px 18px rgba(0,0,0,0.24)	shadow-e2	관계 지도 범례 컨테이너 (라이트 0.05 → 0.06, 다크 0.24 → 0.26)
0 10px 20px rgba(24,24,27,0.14) + dark 0 10px 20px rgba(0,0,0,0.28)	shadow-e3	내 프로필 이미지 (blur 20 → 24, 다크 0.28 → 0.32)
0 4px 12px rgba(24,24,27,0.08) (다크 없음)	shadow-e1	내 이름 라벨 (라이트 0.08 → 0.07, 다크 그림자 신규 추가)
0 8px 18px rgba(24,24,27,0.06) + dark 0 8px 18px rgba(0,0,0,0.28)	shadow-e2	카테고리 클러스터 라벨 (다크 0.28 → 0.26)
0 8px 20px rgba(24,24,27,0.1) + dark 0 8px 20px rgba(0,0,0,0.32)	shadow-e2	인물 노드 원형 (blur 20 → 18, 불투명도 하향)
0 4px 12px rgba(24,24,27,0.06) (다크 없음)	shadow-e1	인물 이름 라벨 (라이트 0.06 → 0.07, 다크 그림자 신규 추가)
0 18px 42px rgba(24,24,27,0.14) + dark 0 18px 42px rgba(0,0,0,0.38)	shadow-e4	홈 스로우백 카드 (라이트 0.14 → 0.12)
0 5px 16px rgba(0,0,0,0.08) (다크 없음)	shadow-e1	타임라인 날짜 배지 (라이트 5/16 → 4/12, 다크 그림자 신규 추가)
0 10px 30px rgba(0,0,0,0.045)	shadow-e3	타임라인 카드 기본 (불투명도 0.045 → 라이트 0.08 / 다크 0.32)
0 14px 36px rgba(0,0,0,0.07)	hover:shadow-e4	타임라인 카드 hover (14/36 → 18/42, 불투명도 상향)

토큰 정의값: e1 = 0 4px 12px rgba(24,24,27,0.07) / dark rgba(0,0,0,0.30), e2 = 0 8px 18px rgba(24,24,27,0.06) / dark rgba(0,0,0,0.26), e3 = 0 10px 24px rgba(24,24,27,0.08) / dark rgba(0,0,0,0.32), e4 = 0 18px 42px rgba(24,24,27,0.12) / dark rgba(0,0,0,0.38).

건드리지 않은 맞춤 그림자 3종:

그림자	위치	이유
앰버 센터 노드 글로우	relation-force-map.tsx me-core	앰버 색 다중 그림자라 elevation 단계가 아님
스프레드 링 0 0 0 4px rgba(0,0,0,0.04)	activity-flow-chart.tsx	drop shadow가 아닌 spread ring
음수 스프레드 0 18px 50px -24px rgba(0,0,0,0.45)	profile-onboarding.tsx 아바타	음수 spread라 단계 토큰에 안 맞음

무채색 토큰 치환

기존	토큰
bg-white/82 dark:bg-zinc-950/82	bg-background/82
bg-zinc-950 dark:bg-zinc-50	bg-foreground
bg-white dark:bg-zinc-950 (2곳)	bg-background
text-zinc-950 dark:text-zinc-50 (2곳)	text-foreground
text-zinc-500 dark:text-zinc-400	text-muted-foreground
text-zinc-600 dark:text-zinc-300	text-muted-foreground
hover:bg-zinc-100 dark:hover:bg-zinc-800	hover:bg-accent
hover:text-zinc-950 dark:hover:text-white	hover:text-foreground
bg-zinc-100/78 dark:bg-zinc-900/78	bg-muted/78
bg-white/80 dark:bg-zinc-950/82	bg-background/80
ring-zinc-200/70 dark:ring-white/10	ring-border

전용 토큰이 없어 이번에는 손튜닝 값으로 남긴 항목(코드에 인라인 주석 표시):

남긴 값	위치	이유
text-zinc-700 dark:text-zinc-200	범례 라벨, 클러스터 라벨	foreground와 muted-foreground 사이 밝기라 1:1 토큰이 없음
bg-zinc-300 dark:bg-zinc-700	비활성 페이저 도트	대응하는 색 토큰이 없음
stroke-zinc-950/25 dark:stroke-zinc-100/30, stroke-zinc-950/12 dark:stroke-zinc-100/16	SVG flow-path stroke	모드별 알파를 손으로 맞춘 값
stroke-stone-* 궤도선	OrbitBackground 타원	zinc가 아닌 따뜻한 색감으로 손튜닝한 값

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
mongle	Ready	Preview, Comment	Jul 19, 2026 8:15am