feat: 무보더 글래스 디자인 체계 전환#93
Open
eun-yeon wants to merge 49 commits into
Open
Conversation
- tokens.css 신설: 배경/텍스트/액센트/시맨틱 색, 모션, 그림자 토큰 정의 - global.css를 3윈도우 공유 스타일로 축소, 메인 전용 스타일은 main.css로 분리 - Pretendard Variable 셀프호스팅으로 기본 서체 교체 (CDN 단일 웨이트 제거) - 기존 SUIT 선택 프리셋 호환을 위해 내장 폰트에 cssContent 부여 - 오버레이 폰트 폴백 체인과 폰트 피커 기본 판정을 새 기본 서체로 갱신 - tailwind 테마를 토큰 기반 시맨틱 팔레트로 재작성, 타이포 스케일 5단 정의 - 구 colors.ts/typography.ts 제거
- Checkbox를 액센트 토글 스위치로 재구축 (로컬 상태 미러 제거) - TabSwitch를 인셋 트랙 세그먼트 컨트롤로 재구축 - Radio/Dropdown을 토큰 기반으로 재구축 (기존 props API 유지) - Button/IconButton/Input 프리미티브 신규 추가
- SVG 아이콘 27종 currentColor 전환으로 상태별 색 제어 가능하게 변경 - 타이틀바/툴바를 토큰 기반 아일랜드 스타일로 재구성 - 툴 버튼 선택/호버 상태를 저알파 화이트 레이어로 통일 - 앱 루트와 콘텐츠 배경을 app/panel 토큰으로 교체
- 섹션 카드를 저알파 화이트 + 헤어라인 보더 카드로 재구성 - 행 라벨/보조 텍스트를 새 타이포 스케일과 텍스트 위계 토큰으로 교체 - 액션 버튼을 공통 스타일로 통일, 리셋 아이콘 버튼 currentColor 적용 - 버전 박스와 프리뷰 패널을 inset/카드 토큰으로 재구성 - 간격을 4px 그리드(12px 기준)로 정규화
- 모달 백드롭을 inset 기반 + 블러로 교체 (창 크기 매직넘버 제거)
- 모달 카드를 elevated 표면 + 헤어라인 보더 + 레이어드 그림자로 통일
- Alert 버튼 체계 정리 및 동적 클래스 조합(w-${}) 안티패턴 수정
- 툴팁/컨텍스트 메뉴를 elevated 메뉴 스타일로 재구성
- 다이얼로그·에디터·매니저·피커·설정 모달 23개 파일의 하드코딩 색을 토큰으로 전환 - 버튼/인풋/구분선/헤더바를 역할 기반 표면 체계로 재분류 - 업데이트 CTA를 그린에서 액센트 프라이머리로 교체, 상태 표시는 success/warning 토큰 - 파괴적 확인 버튼은 솔리드 danger로 정리 - 임의 텍스트 크기를 타이포 스케일(caption/body/label)로 정규화 - 라운드/duration 토큰 통일
- 액센트 토큰을 브랜드 퍼플(#8B5CF6)로 교체 — 버튼/포커스/토글/선택 상태 일괄 반영 - 속성 패널(단일/배치/레이어/플러그인) 하드코딩 색을 토큰으로 전환 - 인풋 웰은 inset, 세그먼트는 인셋 트랙 + elevated 활성 세그먼트로 재분류 - 캔버스 투명 폴백 배경을 panel 톤으로 어둡게 전환, 그리드 라인은 저알파 화이트 - 미니맵 뷰포트 표시를 브랜드 퍼플로 정렬
- TabSwitch에 transform 기반 슬라이딩 인디케이터 도입 - 캔버스/설정 화면 전환 등장 모션 추가 (viewEnter/viewFade) - prefers-reduced-motion 대응 - TabList/Palette 팝업을 elevated 메뉴 스타일로 정리, 스와치 호버 스케일 - 레거시 테마 별칭(primary, button.*) 사용처 정리 후 config에서 제거
- text-style-4 웨이트를 500으로 되돌려 과도한 볼드 완화 - 속성 패널 라벨을 muted 13px로, 값은 body+tabular-nums로 위계 분리 - 패널/레이어 세그먼트에 슬라이딩 인디케이터 적용 - 폰트 스타일 토글·미니맵 뷰포트를 뉴트럴로 되돌림 (액센트 남용 방지) - 모달 버튼 역할 재정립: 확인/저장은 액센트 프라이머리, 취소는 뉴트럴 고스트 - 사운드 트림 파형을 브랜드 틴트로, 배지/시간 표시는 뉴트럴로 정리 - 피커 팝업 그림자·서치 인풋·추가 버튼 다듬기, 타이틀바 로고-텍스트 정렬 통일 - muted 텍스트 토큰 한 단계 밝게 조정
- 속성 패널을 반투명 글래스(블러+헤어라인+좌측 그림자) 표면으로 전환 - 타이틀바에 하단 헤어라인 추가 (툴바와 대칭) - 컬러피커 팝업에 elevation 그림자 부여 - glass 토큰 신설
- 체크 컬럼을 체크 항목이 있는 목록에서만 렌더 (빈 예약 컬럼 제거) - 행 높이 26px, 좌우 패딩/서브메뉴 화살표 정돈 - 높이 추정 산식 동기화
- 모달/팝오버/메뉴를 반투명 글래스(블러+깊은 그림자)로 전환, 보더 전면 제거 - 인풋 포커스를 보더 대신 그림자 링으로 교체 (focus-ring 토큰) - 헤더/푸터 바를 저알파 레이어로, 사이드패널 그림자 토큰화 - 타이틀바/툴바 헤어라인 제거 — 명도 대비로 구획 - 미니맵/줌 인디케이터를 글래스 크롬으로 재작업 - 탭 목록 팝업 구조 재설계: 라벨형 액션 행(탭 생성/삭제), 좌정렬 행 - 인라인 svg 아이콘 currentColor 전환, caret 액센트화 - 그림자 토큰 강화 및 glass/glass-heavy 토큰 도입
- 색 클래스 없이 남은 border-[1px]가 프리플라이트 기본색으로 노출되는 지점 제거 - 설정하기류 버튼을 화이트알파 버튼으로 통일 (호버/트랜지션 포함) - 색 스와치는 저알파 아웃라인으로 경계 유지 - TabCss 제거 버튼 보더 제거
- 액션 행 위에 풀블리드 저알파 디바이더 추가 - 빈 상태 텍스트를 caption 크기로 완화
- 스윕 정규식 경계 버그로 융합된 '-strong' 클래스 3건 복구 (앱 루트 라운드 코너, 팔레트 스와치 높이, 업데이트 모달 체크박스) - 단축키 캡처 리스닝 표시를 포커스 링으로 복원 (죽은 border-accent 대체) - 검색/이름/hex 입력의 포커스 링 누락 복원 - 사운드 파일선택 버튼 hover 무효 수정, 죽은 focus 잔재 정리 - 글래스 모달의 스크롤 페이드 마스크를 글래스 톤으로 일치
- 패널 구분선을 회색 띠에서 저알파 헤어라인으로 교체 - 색 스와치의 중복 보더 잔재 제거, 열림 상태는 포커스 링으로 - 행 라벨(text-white text-style-2)을 muted 라벨 위계로 통일 - 키 매핑 캡처를 인터랙티브 버튼 스타일로 전환 - Grid 내 소형 컨트롤 타이포를 body로 정규화, 이미지 피커 상태 탭 정돈
- 보더 원칙 수정: 장식 금지, 구획(상단/하단 바·플로팅 크롬)에는 유지 - 타이틀바/툴바 헤어라인 복원, line 토큰 가시 수준으로 상향 - 미니맵·줌 컨트롤에 경계선 추가 - 피커 팝업(이미지/컬러/리스트)이 측정 프레임에 잘못된 위치로 노출되던 플리커를 위치 확정 전 hidden 처리로 제거 - 탭 목록을 섹션 헤더 + 리스트 + 풀폭 생성 CTA 구조로 재설계, 선택 행 호버 휴지통으로 삭제 통합 (5개 로케일 tabs.title 추가)
- 코너 고정 크롬에서 그림자 제거 - 뷰포트 표시와 키 블록 명도 완화, 줌바와 간격 확대
- 미니맵/줌 컨트롤을 글래스에서 불투명 inset 표면으로 복원 (글래스는 팝업/모달 전용) - 탭 목록 빈 상태에서 겹말 텍스트 제거 — 생성 CTA만 표시, 헤더/리스트는 탭 존재 시에만
- 줌 컨트롤과 미니맵을 하나의 불투명 카드로 합침 - 뷰포트 표시를 테두리 박스 대신 은은한 밝은 면으로 단순화
- 크롬 필 상태 래더(--ui-fill/-hover/-active), 사이드 패널 글래스(--ui-glass-panel), 상주 크롬 스모크(--ui-glass-dim), 인셋 링+상단 하이라이트 섀도(--ui-shadow-chrome) 토큰 추가 - 미매핑으로 no-op이던 shadow-elevation-panel을 좌측 헤어라인+방향성 드롭으로 활성화 - 미니맵: 콘텐츠 모노크롬 2단계, 뷰포트만 브랜드 액센트, 테일윈드 팔레트 색 제거 - 속성 패널·탭 팝업의 raw 화이트 알파를 토큰으로 치환, 아이콘 currentColor 전환 - 패널 루트 10곳을 PANEL_ROOT_CLASS 상수로 통합, 세그먼트 썸을 필+크롬 섀도로 전환 - 입력 웰(--ui-bg-inset)을 반투명 블랙으로 바꿔 글래스 위에서 재질 통과 - Tailwind content 글롭에 ts 추가 (클래스 상수 퍼지 방지)
- 팝업·드롭다운·모달을 사이드 패널과 동일한 스모크 재질(rgba 14,14,17 @0.78)로 통일 - shadow-elevation-2/3에 인셋 링+상단 하이라이트를 넣어 모든 플로팅 표면에 재질 립 적용 - 메인 윈도우 25개 파일의 raw 화이트 알파 ~93건을 fill/line 토큰으로 치환 (필 트리플릿, 정적 컨테이너 fill-faint 신설, 고스트 버튼은 한 단계 낮은 래더) - ColorPicker 스와치 inert 베이스 보더 정리, 세그먼트 호버를 고스트 관례(6%)로 통일 - 잔여 raw는 Checkbox hover 18% 1건 (대응 토큰 없음, 의도적 보류)
웰 토큰 반투명화 이후 CodeMirror 배경이 뒤 콘텐츠에 영향받던 것을 전용 불투명 토큰(--ui-bg-inset-solid)으로 분리해 가독성 보장
우측 속성 패널과 툴바 팝업이 같은 z-30에 있어 패널이 히트테스트를 가로채고, 외부클릭 핸들러가 이를 바깥 클릭으로 오판해 팝업이 즉시 닫히던 문제. 일시적 팝업(z-40) > 상주 크롬(z-30) 위계로 분리
resetAll이 keyStore만 갱신하고 선택 상태를 남겨, 속성 패널이 초기화 이전 요소를 가리키며 업데이트가 무효 대상에 떨어지던 문제
ResetAllResponse에 serde camelCase 변환이 없어 custom_tabs/selected_key_type이 프론트 계약(customTabs/selectedKeyType)과 어긋나 undefined로 스토어에 유입. 이후 모든 상호작용에서 히스토리 스토어의 JSON.parse(JSON.stringify(undefined))가 SyntaxError를 던져 이벤트 핸들러 체인이 중단되던 근본 원인 수정
글래스 전환에서 팝업 루트에 backdrop-blur가 붙으며 fixed 서브메뉴의 기준이 뷰포트에서 팝업 박스로 바뀌어 뷰포트 좌표가 어긋나던 회귀. 서브메뉴를 body 포털로 전환하고, 포털로 끊기는 호버 유지와 외부클릭 닫힘 판정을 콜백·data 속성으로 재배선
- 서브메뉴 셰브런을 보조 글리프 크기(3x7)로 줄이고 크롬 아이콘 톤(white/45)으로 통일, 래퍼 유령 여백 제거로 좌우 인셋 대칭 - 행 최소 폭 132→96px: 밀도 높은 한글 라벨이 바닥에 걸려 우측 여백이 뜨던 것을 콘텐츠 기반 폭으로 전환
- SectionDivider 헤어라인 대신 PropertySection 카드(fill-faint 라운드 면)로 섹션을 묶는 macOS 설정/토스 문법 채택 — 전 탭·배치·그리드·플러그인 패널 적용 - 행 높이 23→32px, 패널 가장자리·블록 간격 12px 단일값, 패널 폭 220→240px - Lenis를 duration+easeOutExpo에서 lerp 방식으로 전환 — 스크롤 종료 구간의 서브픽셀 계단(드르륵) 제거
scroll-driven animations 지원 엔진(WebView2, Safari 26+)에서만 활성화되는 스크롤 위치 반응형 마스크. 미지원 엔진은 마스크 없이 정상 렌더 (폴백 없음)
탭/헤더 블록의 정적 pb-12와 스크롤 마스크 페이드가 겹쳐 소프트존이 이중으로 두꺼워지던 문제. 거터를 스크롤되는 콘텐츠의 pt-12로 옮겨 휴지 상태는 동일하게 유지하면서 페이드가 탭 경계에서 바로 시작되게 변경
This reverts commit bd3b632f03b098e6ba6160088f1fceef5ec7c0f5.
정적 거터(12px)가 분리를 담당하는 구조로 되돌린 뒤, 위쪽 페이드는 클리핑 라인 소프트닝 역할만 하도록 20→10px로 축소 (아래쪽 20px 유지)
- 라벨+헤어라인 섹션을 섹션 캡션 + PropertySection 카드로 교체, 행 리듬 32px - JS 그라디언트 스크롤 그림자(from-elevated, 글래스와 색 불일치) 제거하고 공용 스크롤 페이드 마스크(.dmn-scroll-fade)로 전환 — 관련 상태·리스너 정리
셸의 pr-6 + 자식들의 pr-14 보정으로 흩어져 있던 스크롤바 차선을 스크롤 요소의 -mr-14 하나로 가둠 — 시각 결과 동일, 비대칭 제거
명시 width가 -mr을 무력화해 오버플로 시 스크롤 영역이 14px 좁아지던 문제
- useLenis가 스크롤 중에만 is-scrolling 클래스를 유지, 모달 스크롤 썸은 해당 클래스에서만 표시 (macOS 오버레이 스크롤바 관례) - 단축키 모달 셸 패딩 20→12 통일, 스크롤바 차선 14→8 재계산
스크롤 위치 단서는 엣지 페이드 마스크가 대신. 임시로 넣었던 오버레이 썸·is-scrolling 배선과 모달 스크롤바 차선(-mr/pr) 제거
그라디언트 그림자 시절의 숨구멍 패딩 — 마스크 전환으로 불필요해짐
인디케이터용 고채도 액센트를 넓은 면에 그대로 칠하면 다크에서 혼자 발광하는 문제 — 면적 크기에 반비례해 휘도·채도를 내리는 CTA 전용 accent-deep 트리오 추가, 모달 8곳 저장·확인 버튼 적용
트랙 8→10px(카드와 동일), 썸·탭 버튼 6→8px (바깥 10 − 인셋 2)
- 대기/입력·단색/그라디언트 스위치를 공용 TabSwitch로 교체 - 이미지 피커: 전폭 프리뷰 + 설정 카드(PropertySection) 구조로 재배치 - 구분선 제거, 초기화는 프리뷰 호버 시 글래스 칩으로 노출
- 검색 필드 전폭, 필터 드롭다운 옆에 같은 재질의 추가 칩 배치 (라벨은 툴팁·aria로 보존) - 리스트를 bg-inset 웰에 담아 면으로 영역 구분, 내용 맞춤 높이(max-h 120) + 스크롤 페이드 - 행 트레일링 ⋮ 버튼을 옵티컬 정렬(-mr 8)로 텍스트 인셋 라인에 정렬 - 쓰이지 않던 renderItemActions/getItemKey 경로와 스크롤바 보정 로직 제거 - 카운터 애니메이션 피커의 ⋮ 메뉴를 usePickerItemMenu로 통일해 재열림 레이스 해소 - 추가 버튼 라벨 i18n 키 5개 로케일 추가
- 패널·모달의 backdrop-filter/mask 아래 인라인 메뉴는 중첩 블러가 무력화되므로 공용 Dropdown과 패널 SelectInput 메뉴를 createPortal + fixed 좌표로 전환 - 레시피 통일: p4·gap4, 라운딩 10-6 동심원, 선택 필, tooltip-fade-in, z 60 - FloatingPopup autoClose=false 분기에도 포털 메뉴 클릭어웨이 예외 추가 - 정렬 이동은 transform 대신 translate 속성 사용 (페이드 애니메이션과 충돌 방지) - ListPopup 패딩 5→4·갭 1→4, 높이 추정식을 새 리듬으로 보정 - 플러그인 API 드롭다운의 하드코딩 색을 토큰으로 교체, 인라인 z 10020→60 - 탭 선택 메뉴(TabList)도 동일 문법 적용, 죽은 스크롤바 보정 제거
세그먼트 개편 때 포커스 스타일이 사라지면서 rightFocused·rightFocusTarget· alphaPercentFocused 전달만 남아 있던 것을 정리. 입력 에코 가드로 실제 동작하는 상류 상태는 유지
- FloatingPopup에 portalToBody·animate 도입 — 고정 좌표 팝업과 패널 기반 피커를 처음부터 body에 렌더해 위치 확정 시 재부모화(포커스·IME·Lenis 리셋) 방지 - 경계 클램핑을 useEffect+rAF에서 useLayoutEffect 동기 측정으로 전환해 첫 페인트 전에 위치 확정 (1프레임 점프 제거) - 리스트 피커: 위치 계산 useCallback 통합, ResizeObserver 직접 관측, 로딩·에러·빈 상태를 리스트 웰 내부로 이동하고 높이를 고정해 필터링 중 출렁임 제거
- 사운드/폰트/카운터 애니메이션 피커를 플로팅 서브패널 대신 패널 안 두 번째 페이지로 전환 (Transitions.dev side-by-side: ±8px 슬라이드+페이드+블러) - 패널을 글래스 프레임 + 2페이지 레이어로 분리 (panelChrome 상수 분할), PanelNavContext로 트리거 8곳(single/batch × Style/Counter)이 페이지 호스트에 포털 - exit 전환 동안 콘텐츠 언마운트 지연(renderPageKey)으로 빈 페이지 슬라이드 방지 - 탭/선택/패널 전환 시 자동 복귀, Escape 닫기(입력 편집 중 제외) - CommonListPickerPopup에 renderMode='page' 추가: ‹ 뒤로가기 헤더 + 전고 리스트 카드 - 패널 헤더 크롬 버튼 호버 배경 제거(색 래더만), 음수 마진으로 헤더를 텍스트 높이에 맞춰 상하 여백 12px 정렬 - 컬러/이미지 피커는 캔버스 미리보기 유지를 위해 플로팅 유지 - 전환 다이얼 토큰 노출: --ui-duration-page, --ui-ease-page, --ui-page-*
- 검색을 프라이머리로 승격: h-30 + 돋보기 글리프, 1차 표면 r-10 - 리스트를 리세스드 인셋 웰 테이블로: 행 h-30·r-6 동심원, 빈 상태 중앙 정렬 - 필터+추가를 하단 도구 바로 이동 (Xcode 내비게이터 문법), 갭 8 - 선택된 사운드 재클릭 시 해제 - Dropdown에 heightClass·paddingXClass·roundedClass 오버라이드 추가 - 행 규격을 pickerRowClass 헬퍼로 공용화 (팝업 24 / 페이지 30)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
개요
디자인 토큰 체계를 세우고 앱 전체를 무보더 글래스 표면으로 전환, 공용 프리미티브와 사이드 패널 카드 시스템 재구축
변경 내용
스택 2/15 · base
feature/ui-integration순서대로 merge commit으로 머지 필요, squash나 rebase로 머지하면 위 PR들이 깨짐