GRID.OS Internal · 설정 탭 2차 점검

설정 탭 정보구조·행 정렬 2차 점검 — 결정보드

2026-08-28 원우 재지시 — 1차 점검(이모지·좁은폭·문구)이 놓친 「설정이 맞는 탭에 있는가」「스냅샷 보호 스위치가 왜 이상한 자리에 있는가」 두 가지를 다시 봤습니다. 라이브 앱(localhost:4790, GRID.OS Internal 3.0.0 빌드 21, 소스커밋 cb42fb39…)을 설정값 변경 없이 직접 열어 5개 탭 전부의 DOM 좌표를 실측했습니다. 코드 수정은 하지 않았습니다 — 이 보드는 조사 결과와 결정 제안입니다.
A

탭 배치 판정표 — 등록된 22개 항목 전수

5개 탭(연결/AI/화면/그리드/정보)에 등록된 섹션 22개 전부를 나열하고, 「사용자가 이 기능을 찾을 때 어느 탭을 먼저 열겠는가」 기준으로 판정했습니다. 근거는 settings-internal.js·app.jsregisterSection() 호출부(패키지 앱 app.asar 기준)입니다.
항목현재 탭적절?제안 탭근거
연동 (Notion·Slack·Figma·Google·Cloudflare 등 외부 서비스)연결적절탭 이름과 정확히 일치하는 핵심 기능. settings-internal.js:767
회사 폴더 (NAS 등 공유 저장소 연결)연결적절"폴더 연결" 액션이라 탭 이름에 부합. app.js:9674
팀 배포 상태 (필수구성·코어규칙블록·AI상태훅·스냅샷안전망·업무보드데이터)연결재고그리드내용 전부가 "이 그리드 자체의 구조 상태" 점검입니다. 그리드 탭에 이미 스냅샷·휴지통·그리드경로가 있어 흩어짐 → SET10
AI 연결 (Claude·Codex·Gemini 카드, CLI 자동 업데이트, 권한 모드)AI적절AI 도구 자체의 연결·동작 설정. app.js:9672
새 대화 기본값 (모델·추론강도)AI적절새 대화가 시작될 때 쓰는 AI 설정.
뇌 (대화에서 관찰한 것 기억하기)AI적절AI의 기억 기능.
컴퓨터 사용 (화면 캡처·조작 브릿지, 시스템 권한)AI적절AI 터미널이 쓰는 기능.
AI 상태 훅 (Claude 훅 등록 상태)AI중복AI (유지)탭 자체는 맞지만, 같은 라벨·같은 상태값이 연결 탭 "팀 배포 상태" 안에도 그대로 한 줄 더 있습니다 → SET11
진행 중 대화 개입 (수동/자동)AI적절대화 스트리밍 동작 설정.
클로드 Remote ControlAI적절클로드 터미널 세션 시작 방식.
화면 (테마·색스킨·레이아웃·AI사용량표시·시스템폴더보기)화면적절탭 이름과 정확히 일치.
대시보드 위젯 구성화면적절화면에 무엇을 보여줄지 설정.
터미널 (글자크기·자동복사·동시상한)화면경계—(유지)글자크기·자동복사는 화면 맞음. "동시 상한"(PTY 리소스 사용량)만 성격이 다르지만, 5탭 체계에 대안 위치가 없어 이동 보류.
알림 · 성능 HUD화면경계—(유지)"완료 알림"은 엄밀히 알림 기능이지 화면 기능이 아니지만, 성능 HUD와 묶여 있고 대안 탭이 없어 이동 보류.
그리드 (현재 경로, 그리드 폴더 변경)그리드적절탭 이름과 정확히 일치.
스냅샷 자동 백업 (보호 토글·주기·백업현황)그리드명칭 혼동그리드 (유지)탭은 맞지만 "팀 배포 상태"의 "스냅샷 안전망"과 이름이 비슷해 같은 기능으로 오인하기 쉬움 → SET12
업무 시작·종료 루틴그리드적절2026-08-16에 이미 "화면→그리드"로 옮긴 이력 — 현재 위치가 맞습니다. 단 "자동" 옵션 노출 자체는 별도 문제 → SET13
휴지통그리드적절그리드 데이터 보호 기능.
내 정보 (이름·이메일)정보적절사용자 신원 정보.
계정 · 업데이트정보적절라이선스·버전 정보.
피드백정보적절제품 문의 채널.
정보 · 도움 (가이드·커뮤니티·문의)정보적절탭 이름과 정확히 일치.
탭 구성 자체(5개·이름)에 대한 판정 — 연결·AI·화면·그리드·정보 5분류와 그 이름은 대체로 합리적입니다. 유일하게 어색한 지점은 "연결" 탭이 ① 외부 서비스 연동 ② 로컬 폴더 연결 ③ 그리드 구조 상태 점검 세 가지 다른 성격을 한 탭에 담고 있다는 것이며, 그 중 ③(팀 배포 상태)만 정말 안 맞는 자리에 있습니다(위 SET10). ①·②는 둘 다 "무언가를 이 그리드에 연결한다"는 공통점이 있어 한 탭에 있어도 자연스럽습니다.
B

행 레이아웃 이탈표 — 실측 좌표

모든 .set-row의 DOM 좌표를 getBoundingClientRect()로 실측했습니다(뷰포트 1440×900, 패널 폭 651px, 좌측 라벨 시작 x=475·우측 끝 x=1126 기준). 원인은 전부 같습니다 — 기본 CSS .set-row{justify-content:space-between}는 자식이 2개(라벨+컨트롤)일 때만 "라벨 왼쪽/값 오른쪽"으로 예쁘게 갈라집니다. 자식이 3개(라벨+컨트롤+값, 또는 라벨+값+버튼)가 되는 순간 가운데 항목이 행 중앙으로 떠 버립니다. 거기에 더해 일반 버튼 스타일 .set-btn{margin-top:12px}.set-btn-sm에도 그대로 상속돼, 행 안에 놓인 버튼만 다른 형제보다 12px 아래로 처져 "따로 줄 차지"한 것처럼 보입니다.
이탈 내용 (실측)제안
그리드스냅샷 보호 자식 3개(라벨+스위치+값). 라벨 x475, 스위치 x787(행 폭 651의 약 48% 지점 — 사실상 정중앙), 값 "보호 켜짐" x1080(우측 끝). 이것이 원우님이 지적하신 "토글이 가운데에 떠 있는" 현상의 정확한 원인입니다. 스위치+값을 한 그룹(.set-row-tail)으로 묶어 우측 정렬 → D-1
그리드백업 현황 자식 3개(라벨+값+버튼). 값 "4307개 보관…" x724(행 중앙부), 버튼 "패널 열기" x1067(우측 끝)이지만 y좌표가 라벨보다 12px 낮음(버튼 상속 margin-top:12px) — 그래서 "그 아래 어중간한 위치"로 보입니다. 값+버튼 그룹화 + 버튼 margin-top 제거 → D-2
그리드보관 현황 (휴지통) 백업 현황과 동일 구조·동일 증상. 값 x712(중앙부), 버튼 "휴지통 열기" x1058(우측 끝, y +12px). 동일 그룹화 적용
연결필수 구성(온보딩)
"팀 배포 상태" 섹션
동일 구조. 값 "해당 없음(기존 그리드)" x732(중앙부, 행 우측 끝과 278px 떨어짐), 버튼 "구조 이식 다시 열기" x1025(y +12px). SET10 채택 시 그리드 탭으로 함께 이동. 동일 그룹화 적용
AI새 대화 기본값 — 저장 자식 3개(빈 라벨+버튼+상태 span). 라벨이 비어 있는데도 3분할 규칙이 그대로 적용돼 "저장" 버튼이 x771(행 중앙 근처)에 뜸 — 왼쪽도 오른쪽도 아닌 애매한 위치. 빈 라벨 span 제거, "내 정보" 저장행과 같은 2분할 패턴 재사용 → D-3
정보계정·업데이트 — 업데이트
(신규 버전 있을 때만 3번째 자식 등장)
코드상 위와 동일한 라벨+값+버튼 구조 확인(app.js:9630). 현재 "최신 상태"라 버튼이 없어 실측 재현은 못 했음 — 코드 근거로만 표기. 동일 그룹화를 사전 적용해 대비
대조군 — 같은 화면 안에 정상 패턴도 이미 있습니다. "내 정보"의 저장 행과 "피드백"의 남기기 행은 둘 다 자식이 정확히 2개(값+버튼)라 버튼이 깔끔하게 우측 끝에 붙습니다. 즉 새 컴포넌트를 만들 필요 없이, 이미 있는 2분할 패턴을 3분할이 된 곳에 다시 적용하면 됩니다.
FIX

시안 없이 바로 수리 — 8건

정렬 교정은 "어느 쪽이 맞는지"를 고를 필요가 없는 자명한 수정이라 결정 카드로 만들지 않았습니다. 실제 화면 배치는 D 섹션에서 렌더로 확인할 수 있습니다.
1스냅샷 보호 행 정렬 — 스위치+값을 그룹화해 우측 정렬settings-internal.js:1123–1125
2백업 현황 행 정렬 — 값+버튼 그룹화settings-internal.js:1128–1130
3휴지통 "보관 현황" 행 정렬 — 동일 패턴settings-internal.js:1178–1180
4"필수 구성(온보딩)" 행 정렬 — 동일 패턴 (SET10 채택 시 이동 후 함께 정리)settings-internal.js:804–805
5"새 대화 기본값" 저장 행 — 빈 라벨 span 제거, 2분할 패턴 재사용app.js:9253
6"계정·업데이트" 업데이트 행 — 버튼 노출 시를 대비해 동일 그룹화 사전 적용 (조건부, 실측 재현 안 됨)app.js:9630–9631
7전역 CSS 한 줄 보강.set-row .set-btn-sm{margin-top:0} 추가로 1·2·3·4·6의 "버튼만 12px 아래로 처지는" 현상을 한 번에 해결style.css:2052 (.set-btn margin-top:12px 상속 문제)
8내부 문서명 재노출 확인 — "디자인 기준은 STYLEGUIDE.md." 문구가 1차 점검에서 지적됐음에도 이번 재확인 시점에 여전히 노출 중입니다(아직 미반영으로 보임)settings-internal.js:1131
SET10

"팀 배포 상태" 섹션 위치 — 연결 → 그리드

필수 구성(온보딩)·코어 규칙 블록·AI 상태 훅·스냅샷 안전망·업무 보드 데이터, 5개 항목 전부 "이 그리드 자체의 구조가 정상인지"를 보여줍니다. 그리드 탭에는 이미 같은 성격의 스냅샷·휴지통·그리드경로가 있습니다.
A — 현재 선택됨
연결 탭 = 연동(외부서비스 10종) + 회사폴더(NAS) + 팀 배포 상태(그리드 구조 점검 5항목)

그리드 탭 = 그리드경로 + 스냅샷 자동백업 + 업무루틴 + 휴지통
"연결"을 열면 외부 서비스 연동을 기대하는데, 스크롤 맨 아래에 갑자기 "코어 규칙 블록: 해당 없음" 같은 그리드 진단 항목이 나옵니다. 실측: settings-internal.js:838 registerSection({tab:'connect'})
B (권고) 선택됨
연결 탭 = 연동(외부서비스 10종) + 회사폴더(NAS) — 외부 자원 연결 전용으로 정리

그리드 탭 = 그리드경로 + 팀 배포 상태 + 스냅샷 자동백업 + 업무루틴 + 휴지통
"팀 배포 상태"를 그리드경로 바로 아래(priority 15)로 옮깁니다. 연결 탭은 "무언가를 연결한다"는 의미로 완전히 일관되고, 그리드 탭은 "이 그리드의 상태 전체"를 한 곳에서 보여주게 됩니다.
SET11

"AI 상태 훅" 중복 노출

같은 라벨 "AI 상태 훅"이 AI 탭의 전용 섹션과, 연결 탭 "팀 배포 상태" 안의 한 줄, 두 군데에 따로 표시됩니다. 데이터 출처(/api/agent-hooks/status, /api/doctor)도 서로 다른 API라 이론상 값이 어긋날 수도 있습니다.
A — 현재 선택됨
AI 상태 훅등록됨
↑ 연결 탭 "팀 배포 상태" 안의 행 (doctor.hooks 기준)
AI 상태 훅 (Claude)
등록 상태등록됨
↑ AI 탭의 전용 섹션 (agent-hooks.status 기준) — 같은 정보를 두 API·두 탭에서 각각 보여줍니다.
B (권고) 선택됨
필수 구성(온보딩)해당 없음
코어 규칙 블록해당 없음
AI 상태 훅등록됨
업무 보드 데이터있음
"팀 배포 상태"에서 "AI 상태 훅" 행만 제거합니다(취소선 표시 = 삭제 대상). AI 탭의 전용 섹션이 유일한 출처가 되고, 나머지 4개 그리드 구조 항목은 그대로 남습니다.
SET12

"스냅샷 안전망" ↔ "스냅샷 보호" 명칭 혼동

둘은 실제로 다른 기능입니다 — "스냅샷 안전망"(팀 배포 상태 안)은 상시 켜져 있고 끌 수 없는 최소 보호장치이고, "스냅샷 보호"(스냅샷 자동 백업 섹션)는 사용자가 켜고 끌 수 있는 자동 백업 토글입니다. 비유하면 "화재경보기"(항상 켜짐, 끌 수 없음)와 "정기 소방점검 예약"(내가 켜고 끌 수 있음) 관계인데 이름이 "안전망" / "보호"로 너무 비슷해서, 사용자가 하나를 끄면 둘 다 꺼진다고 오해할 수 있습니다. SET10을 채택하면 두 항목이 같은 "그리드" 탭에 나란히 놓이게 되어 이 혼동이 더 커집니다.
A — 현재 선택됨
스냅샷 안전망켜짐 (상시 — 끌 수 없음)
↑ 팀 배포 상태 안의 한 줄 (그리드 탭 이동 후 위치 예상)
스냅샷 자동 백업
스냅샷 보호보호 켜짐
↑ 별도 섹션. 이름이 "안전망" vs "보호"로만 갈려 관계가 안 보입니다.
B (권고) — 한 섹션으로 병합 선택됨
스냅샷
기본 안전망 (상시)항상 켜짐
추가 자동 백업보호 켜짐
"스냅샷"이라는 이름 하나로 묶고, 그 안에서 "기본 안전망(상시, 끌 수 없음)"과 "추가 자동 백업(끄고 켤 수 있음)"을 위아래로 배치합니다. 팀 배포 상태에서는 이 행을 제거합니다(§9 이중 소스 원칙과도 일치).
SET13

"업무 시작·종료 루틴" — 작동 안 하는 "자동" 옵션 노출

실행 방식 드롭다운에 "자동"을 고를 수 있지만, 실제로는 값과 무관하게 항상 수동 버튼을 눌러야 합니다. 이 사실은 드롭다운 아래 별도 문단에만 적혀 있어, 문단을 읽지 않으면 "자동을 선택했으니 자동으로 되겠지"라고 오해하게 됩니다. 비유하면 리모컨에 "자동 모드" 버튼이 있는데 눌러도 아무 일도 안 일어나고, 설명서 맨 아래에만 "이 버튼은 아직 준비 중입니다"라고 적혀 있는 상황입니다.
A — 현재 선택됨
실행 방식
"자동"을 골라도 동작은 그대로입니다 — 설명은 드롭다운 아래 별도 문장으로만 존재. 실측: settings-internal.js:955
B (권고) — 옵션 문구에 바로 명시 선택됨
실행 방식
옵션 라벨 자체에 "(준비 중 — 지금은 수동과 동일)"을 넣어, 드롭다운만 봐도 상태를 알 수 있게 합니다. 값 저장 위치·설계 의도("다음 단계가 읽을 자리")는 그대로 유지합니다.
대안 C — 이번 범위에서 옵션 자체를 숨김
select를 "버튼 수동" 하나만 노출하고, 저장값(config)은 그대로 둡니다. 자동 실행을 실제로 구현하는 배치에서 옵션을 다시 노출합니다. B보다 확실하지만, "다음 단계를 위해 값만 미리 받아둔다"는 원래 설계 의도가 화면에서 안 보이게 됩니다.
D

정렬 비교 렌더 — 현재 vs 제안

실제 앱 CSS 클래스(.set-row·.set-switch·.set-btn-sm)를 그대로 가져와 재현했습니다. 아래 상자들은 라이브 데이터가 아니라 정적 재현이지만, 클래스·값·비율은 실측과 동일합니다.
D-1 현재
스냅샷 보호 보호 켜짐
스위치가 행 중앙 부근에 떠 있음 (실측 x=787, 행 폭 651의 48% 지점)
D-1 제안
스냅샷 보호 보호 켜짐
스위치+값을 .set-row-tail로 묶어 우측 정렬
D-2 현재
백업 현황 4307개 보관 · 최근 5분 전
값은 중앙부, 버튼은 상속된 margin-top:12px 때문에 아래로 처짐
D-2 제안
백업 현황 4307개 보관 · 최근 5분 전
값+버튼 그룹화, 버튼 margin-top:0 — 라벨과 같은 줄에 정렬
D-3 현재
빈 라벨 때문에 "저장" 버튼이 중앙 근처(x≈771)에 뜸
D-3 제안
저장됐습니다
빈 라벨 제거 — "내 정보" 저장행과 같은 2분할 패턴
클립보드 복사가 막혀 있으면 아래 상자를 직접 드래그해 복사하세요
0/4 선택