GRID.OS Internal · 설정 탭 UI 점검

설정 탭 UI 어색함 점검 — 시안·결정보드

2026-08-28 원우 지시 — «설정영역 수리하면서 설정 탭들에서 UI가 어색한 부분도 점검해서 같이 잡아줘»에 따라 실행한 읽기 전용 점검 결과입니다. 라이브 앱(localhost:4790, GRID.OS Internal 3.0.0 빌드 21)을 설정값 변경 없이 직접 열어 5개 탭 전부를 스크린샷·코드로 대조했습니다. 설정값은 하나도 바꾸지 않았습니다.
A

점검 결과 목록

심각도 높음이 상단입니다. 근거 열은 실측 스크린샷 + 코드 파일:줄(패키지 앱 app.asar 기준, 소스커밋 cb42fb39…)입니다.
심각도증상근거제안 수정
높음 AI · 정보 · 연결 화면 곳곳에 픽토그래프 이모지가 그대로 노출됩니다 — 🔐 손쉬운 사용 설정 열기, 🖥 화면 기록 설정 열기, 온보딩, 📋 업데이트 노트, 📘 사용 가이드, 🌐 커뮤니티, 문의, 🗗 플로팅 창 안내. 그리드 UI 규칙(«버튼·라벨은 아이덴티티 SVG만, 이모지 금지») 위반입니다. app.js:9410, 9087, 9632,
9657–9659
settings-internal.js:439
전부 텍스트 라벨만 남기거나 이미 있는 서비스 로고류처럼 SVG 아이콘으로 교체
높음 전 탭 공통 상태 배지·확인 표시에 체크마크(✓·✔)·경고(⚠)·오류(✘) 글리프를 광범위하게 사용합니다. 그리드 검수 기준상 체크마크(U+2713)도 이모지 금지 대상입니다. «연결됨»·«등록됨» 같은 텍스트가 이미 함께 있어 글리프가 없어도 뜻은 통합니다. settings-internal.js
statusBadge() 약 368행
+ AI상태훅·업데이트 등 다수
배지를 색상 배경 + 텍스트 라벨만으로 (글리프만 제거, 문구·색은 그대로)
보통 설정 창 전체 (5개 탭 공통) 창 폭을 700px 이하로 좁히면 좌측 세로 탭이 상단 가로 바로 바뀌는데, 이 바가 position:static이라 본문을 스크롤하면 탭 전환 바 자체가 화면 밖으로 사라집니다. 실측: 640px 폭에서 스크롤 후 탭 바 좌표가 뷰포트 위쪽 −1584px 지점까지 밀려남 — 탭을 바꾸려면 스크롤을 맨 위로 되돌려야 합니다. internal-theme.css:679–693
(@media max-width:700px)
→ 결정 카드 SET1
확인 필요 그리드 «스냅샷 보호» 항목이 disabled 속성 없는 일반 켜짐 스위치로 렌더됩니다. 그리드 운영 규칙 문서상 스냅샷 안전망은 «상시 켜짐 — 끌 수 없음»으로 알려져 있어, 실제로 껐을 때 정말 꺼지는지 화면 표현과 동작이 맞는지 확인이 필요합니다. 설정값을 실제로 바꿔보지 않아 검증하지 못했습니다. 그리드 탭 실측 + DOM 조회
#set-snap-protect disabled:false
실제로 끌 수 있는 사양이면 문제 없음. 아니라면 잠금 아이콘 + 고정 문구로 표현 교체
낮음 그리드 스냅샷 섹션 설명문에 «디자인 기준은 STYLEGUIDE.md»처럼 내부 개발 문서 파일명이 사용자 화면에 그대로 노출됩니다. 일반 사용자는 이 파일에 접근할 수도, 무엇인지 알 수도 없습니다. settings-internal.js:1057 부근
(스냅샷 자동 백업 섹션)
해당 문구를 사용자용 설명에서 제거
낮음 연결 «연결» 서브탭은 로고+설명+상태배지가 있는 카드형인데, 같은 서비스 10개를 보여주는 «스킬» 서브탭은 로고 없이 텍스트 두 줄만 나열합니다. 같은 데이터를 보여주는 두 하위탭 사이 시각 언어가 갈라져 있어 스캔하기 번거롭습니다. settings-internal.js
renderSkillsTabHtml() vs
renderPresetCard()
스킬 목록에도 이미 있는 서비스 로고를 작게 재사용
낮음 화면 대부분 항목은 화면에 노출된 한 줄 설명이 붙어 있는데, «완료 알림 (맥)»·«성능 HUD» 두 항목만 title 툴팁에만 설명이 있어 마우스를 올려야 뜻을 알 수 있습니다. 같은 탭 안에서 설명 깊이가 고르지 않습니다. settings-internal.js
notify-hud 섹션 약 994–1010행
다른 항목과 같은 수준으로 한 줄 설명 문구 추가
낮음 AI «권한 모드» 세그먼트 버튼 3개(안전/자유/바이패스) 아래 설명이 한 문단으로 이어 붙어 있어, 어느 버튼이 어느 문장에 대응하는지 눈으로 매핑하기 번거롭습니다. app.js:9086 부근
(renderSetSecAiConnect)
옵션별로 줄바꿈하거나 문장을 짧게 재구성
FIX

시안 없이 바로 수리 — 6건

화면 배치는 그대로 두고 문구·아이콘만 바꾸는 자명한 소수정입니다. 결정 카드로 만들지 않았습니다.
1이모지 전량 제거 — 🔐🖥✨📋📘🌐✉🗗를 텍스트 라벨 또는 이미 있는 SVG 아이콘으로app.js:9410, 9087, 9632, 9657–9659 · settings-internal.js:439
2상태 배지 글리프 제거 — ✓·✔·⚠·✘ 유니코드 글리프를 빼고 텍스트+색상만 유지settings-internal.js statusBadge()
3내부 문서명 노출 제거 — «디자인 기준은 STYLEGUIDE.md» 문구 삭제settings-internal.js:1057 부근
4설명 문구 보강 — «완료 알림 (맥)»·«성능 HUD»에 화면 노출 한 줄 설명 추가settings-internal.js notify-hud 섹션
5권한 모드 설명 재구성 — 옵션별 줄바꿈 또는 요약app.js:9086 부근
6«스킬» 서브탭에 로고 추가 — 「연결」 서브탭이 이미 쓰는 로고를 재사용settings-internal.js renderSkillsTabHtml()
SET1

좁은 폭에서 탭 전환 바가 스크롤에 딸려 사라짐

700px 이하 폭에서 좌측 세로 탭이 상단 가로 바로 바뀌는 것 자체는 기존 설계입니다. 문제는 그 바가 스크롤과 함께 화면 밖으로 사라진다는 것입니다. 아래 두 상자를 직접 스크롤해 보세요 — 실제 CSS 동작 그대로 재현했습니다.
A — 현재 (실측) 선택됨
폭 340px 이하 · 아래를 스크롤해 보세요
설정
연결AI화면그리드정보
연동 (서비스 연결)
Notion — 계정 연결됨
Slack — 계정 연결됨
Figma — 계정 연결됨
Google Drive
Google Calendar
회사 폴더
grida-company · 쓰기 허용
↑ 계속 스크롤하면 위 탭 바가 사라져 있습니다
스크롤하면 탭 바가 화면 밖으로 밀려나 탭 전환 불가
실측: internal-theme.css:691 .set-nav{position:static} — 나머지 규칙(690행)은 .settings-body 자체를 세로 스크롤 컨테이너로 바꾸므로, static 탭 바는 본문과 함께 스크롤돼 버립니다.
B (권고) — 탭 바 sticky 유지 선택됨
폭 340px 이하 · 아래를 스크롤해 보세요
설정
연결AI화면그리드정보
연동 (서비스 연결)
Notion — 계정 연결됨
Slack — 계정 연결됨
Figma — 계정 연결됨
Google Drive
Google Calendar
회사 폴더
grida-company · 쓰기 허용
↑ 계속 스크롤해도 탭 바는 그대로 있습니다
탭 바가 상단에 고정돼 언제든 다른 탭으로 바로 이동
수정: .set-nav의 700px 이하 규칙에서 position:staticposition:sticky; top:0로 바꾸고 배경색(var(--panel)z-index를 얹습니다. 넓은 폭(700px 이상)의 좌측 세로 탭은 이미 sticky라 무변경입니다.
SET2

「지침 파일 표시」 옵션 — 설정 정식 항목 위치·기본값

이 옵션은 그리드의 _system 폴더·CLAUDE.md/AGENTS.md 같은 지침 파일을 좌측 트리에 보이게 합니다. 지금은 ① 온보딩 마법사 안에 «시스템 폴더 보기 — 제품 개발자 전용»으로 숨어 있고, ② 실제로는 «화면» 탭에도 같은 토글이 이미 코드로 있지만 devAccess(개발자 전용 플래그)가 꺼져 있으면 화면에서 통째로 사라지며, ③ 값 저장도 브라우저 localStorage뿐이라 다른 컴퓨터로 옮기면 초기화됩니다.
A — 현재 (실측) 선택됨
시스템 폴더 보기 — 제품 개발자 전용
온보딩 마법사 «환경 점검» 화면 안에서만 보임 · devAccess:true인 기기만 노출 · 값은 이 브라우저의 localStorage에만 저장
실측: app.js:8197(온보딩 위저드), app.js:9550(화면 탭 — devAccess 꺼져 있어 이번 조사에선 실제로 뜨지 않음) · gridos_show_system localStorage 키
B (권고) — 「화면」 탭 정식 항목 선택됨
테마Light · Auto · Dark
색 스킨GRIDA · Mist · Mono …
AI 사용량 표시
지침 파일 표시
설명 문구: «그리드의 CLAUDE.md·AGENTS.md 등 지침 파일과 _system 폴더를 좌측 트리에 표시합니다. 평소 업무에는 필요 없고, 그리드 운영 규칙을 직접 확인·수정할 때만 켜세요.»
에디션기본값
인터널켜짐
그리다켜짐
그 외(대행사 에디션 등)꺼짐
위치는 이미 코드가 있는 «화면» 탭 그대로 유지(테마·AI 사용량 표시 옆) — devAccess 게이트만 제거하고 에디션 기본값으로 교체합니다. 저장은 이 컴퓨터의 서버 설정(~/.gridos-internal/config.json류)으로 이관해, 앱을 재설치하거나 다른 브라우저로 열어도 유지되게 합니다.
클립보드 복사가 막혀 있으면 아래 상자를 직접 드래그해 복사하세요
0/2 선택