LivePack V4 정책서
2026-09-02 기준

콘솔 화면 공통 규칙

기능별 정책이 아니라 모든 화면에 걸리는 규칙이다. 화면마다 다르게 만들면 같은 정보가 화면마다 다른 자리·다른 단위로 나와 사용자가 매번 다시 찾게 된다. 스타일 체계(디자인 토큰·클래스)는 CLAUDE.md 를, 여기서는 무엇을 어디에 어떻게 보여줄지를 정한다.

화면 구성의 기준은 비디오팩 리뉴얼 콘솔이다(§22 와 같은 이유 — 같은 계정이 두 콘솔을 오간다). 비디오팩에 대응 화면이 없을 때만 이 문서의 규칙으로 정한다.

23.1 화면 뼈대#

  • 페이지는 공용 헤더 + 스크롤 영역으로 구성한다. 카피라이트는 스크롤 영역 에 둔다 — 밖에 두면 뷰포트 하단에 고정돼 어느 화면에서든 작업 영역의 아랫단을 상시 차지한다. 내용이 짧으면 화면 아래에 붙고, 길면 콘텐츠 끝으로 밀려난다.
  • 카피라이트 문구는 연도를 넣지 않는다© MALGNSOFT INC. All Rights Reserved. 실제 저작권 연도와 무관하게 매년 바뀌어 오히려 부정확해진다.
  • 화면 폭을 가르는 요소: 축 네비 · 탭 · 필터바 · 표 · 목록 하단 바. 이들은 페이지 좌우 여백 없이 끝까지 닿는다(각자 자체 좌우 패딩을 갖는다). 필터바 바로 아래 오는 표는 사이를 띄우지 않는다 — 바의 아래 경계선이 표 머리글로 이어져야 한 덩어리로 읽힌다.

스크롤하면 위쪽 장식을 접는다

  • 굴리기 시작하면 제목 줄(52→42px, 제목 글자도 한 단계 작게) · 브레드크럼 바 · 목록의 한 번 읽으면 되는 안내(녹화의 보관 규칙)를 접는다. 위로 되돌리면 다시 펼친다. design-system.css 의 표준 압축 규칙이고 비디오팩 리뉴얼도 같은 동작이다 — 켜는 배선만 셸에 둔다.
  • 접지 않는 것: 필터바(조건을 바꾸러 다시 올라가야 한다) · 표 머리글 · 하단 쪽 바 (목록 끝에 다다랐을 때 쪽을 넘기는 자리다) · 만료 임박 요약처럼 지금 손써야 하는 것.
  • 판정은 스크롤 위치로 한다(60px 접힘 / 30px 펼침). 스크롤 방향이 아니다. 접으면 스크롤 영역이 그만큼 커지는데, 방향으로 켜고 끄면 접힘 → 내용이 화면에 맞음 → 위치가 0 으로 밀림 → 펼침 → 다시 접힘이 초당 수십 번 반복된다. 임계를 벌리고(히스테리시스), 접힘 동안 재판정을 잠그고(0.35초), 접힌 상태의 스크롤 여유가 복귀 임계보다 작으면 펼치지 않는다 — 이 세 가지가 있어야 떨지 않는다.
  • 화면을 옮기면 접힘을 푼다. 셸은 화면이 바뀌어도 살아 있어서, 풀지 않으면 맨 위인데 접힌 채로 열린다.

23.2 계층 표현#

같은 화면에 축이 두 층 있으면 다른 형태로 그린다. 같은 형태로 두면 어느 쪽이 상위인지 읽히지 않는다.

  • 1차 축 — 배경이 있는 전체 폭 바. 페이지 전체를 가른다.
  • 하위 축 — 배경 없이 콘텐츠 폭에서 얇은 밑줄만 쓴다. 아래 카드들과 좌측 정렬이 맞아 "이 탭이 아래 내용을 지배한다"가 읽힌다.
  • 축 선택은 URL 쿼리와 동기화한다(?axis=, 세부 축은 ?dim=). 세부 축을 고르는 것도 화면을 옮기는 일이라 링크로 바로 열 수 있어야 하고 새로고침해도 보던 탭이 유지돼야 한다.
  • 세부 축은 모두 한 단계 더 들어간다(V3 라이브팩과 같은 5축 2단 구조). 국가 → 도시, 도메인 → URL, OS → OS 종류, 디바이스 → 디바이스 종류, 브라우저 → 브라우저 종류다 (V3 goCountryType / goDomainType / goOsType / goDeviceType / goBrowserType). 2단이 끝이다 — 도시·URL·종류 아래로는 내려가지 않는다. 기타 처럼 묶음 항목은 들어갈 곳이 없으므로 화살표를 달지 않는다. 마지막 단계의 행에는 링크 표시(밑줄·브랜드색)도 걷어낸다 — 눌러도 아무 일이 없는데 링크처럼 보이면 매번 눌러 보게 된다.

23.3 좌측 메뉴 (LNB)#

  • 순서는 라이브 → 미디어 설정 → 분석 → 계정 관리다. 매일 쓰는 것이 위, 가끔 여는 설정이 아래다.

  • 하위 항목이 있는 메뉴는 접고 펼칠 수 있다(비디오팩 리뉴얼 상세 모드와 같다). 현재 보고 있는 화면이 속한 메뉴는 자동으로 펼친다.

  • 플랜·사용량은 메뉴 항목으로 두지 않는다 — 하단 배너가 같은 수치를 상시 보여주므로 메뉴에 또 넣으면 한 화면에 같은 정보가 두 번 나온다. 페이지는 헤더 계정 메뉴에서 연다.

  • 플랜 배너의 수치는 굵게 쓰지 않는다. 전부 강조하면 아무것도 강조되지 않는다.

  • 접어도 신호는 남긴다. 좁은 화면에서 LNB 가 접히면 방송 중 채널 수를 적을 폭이 없는데, 배지를 통째로 지우면 "지금 방송 중"이라는 사실까지 사라진다. 아이콘 위의 점으로 줄이고 개수는 툴팁에 남긴다 — 접힘은 자리를 줄이는 일이지 정보를 버리는 일이 아니다.

  • 글자 크기를 사용자가 조절할 수 있다. 헤더의 사용자 메뉴에서 85~130% 를 고르고, 화면 전체 텍스트가 --font-scale 로 비례해서 커진다. 고른 값은 남긴다 — 매번 다시 맞추게 하면 없는 것과 같다.

  • 맨 위로 버튼을 둔다. 목록이 길어지면 상단 필터·탭으로 돌아가려고 계속 굴려 올려야 한다. 굴린 뒤에만 나타나고, 화면마다 구르는 주체가 다르므로(바깥 스크롤 / 내부 표) 굴러 있는 것을 모두 올린다. 자리는 작업 영역 아래 가운데이고, 카피라이트를 덮지 않는 높이에 둔다 — 카피라이트가 스크롤 영역 안에 있어(§23.1) 끝까지 내리면 버튼이 그 위에 겹친다.

23.4 목록 화면#

  • 목록 화면은 화면 세로를 채우고 표만 안에서 스크롤한다(internalScroll). 바깥 스크롤로 두면 표가 짧을 때 하단 바 아래로 빈 공간이 길게 남고 그 아래에 푸터가 놓인다. 적용: 채널 · 방송 이력 · 녹화 · 플레이어 · 방송 설정(채널 탭).
  • 카드 격자의 끝에는 만들기 카드를 둔다(비디오팩 리뉴얼 배포 목록과 같은 장치). 만들기는 헤더에도 있지만, 훑다가 "하나 더 필요하다"고 느끼는 자리는 목록의 끝이라 거기서 손이 닿아야 한다. 채널 카드와 같은 크기로 서되 점선 테두리로 "채널이 아니라 만드는 자리"임을 구분한다. 한도가 찼으면 누를 수 없고 그 이유를 툴팁으로 말한다(§16). 적용: 채널 목록(카드 보기).
  • 하단 바는 화면 아래 끝에 붙인다. 좌우와 마찬가지로 아래도 페이지 패딩을 상쇄해 뷰포트 바닥에 닿게 한다. 같은 하단 바인데 화면마다 높이가 다르면 다른 요소로 읽힌다 — 실제로 방송 이력만 바닥에 닿고 녹화는 24px 떠 있었으며, 방송 설정은 바깥 스크롤이라 푸터 위에 있었다. 기준은 방송 이력이다.
  • 건수는 검색창 옆(왼쪽)에 라벨과 함께 표시한다. 우측 끝에 숫자만 두면 눈에 띄지 않고 무슨 숫자인지도 알 수 없다. 여러 쪽으로 나뉠 때만 지금 보고 있는 구간을 덧붙인다 — 총 40개 (1-10). 네 목록 화면(채널 · 방송 이력 · 녹화 · 플레이어 · 방송 설정)이 같은 표기를 쓴다.
  • 단위를 구분한다. 채널·플레이어처럼 셀 수 있는 자원은 , 방송 이력·녹화처럼 쌓이는 기록은 .
  • 눌러서 들어갈 수 있는 행은 세 가지로 알린다 — 손가락 커서 · 제목의 브랜드색 · hover 배경. 기본 표 제목은 본문과 같은 진한 색이라, 모든 행이 눌리는 표에서는 "왜 여기만 굵지"로만 읽히고 눌러야 한다는 신호가 마우스를 올릴 때에야 나온다. 밑줄은 hover 에서만 긋는다 — 늘 그으면 표가 어수선해진다. 들어갈 곳이 없는 마지막 단계의 행은 색을 주지 않는다. 이 신호는 화면마다 같아야 한다 — 한 표에만 있으면 다른 표에서는 배워도 소용이 없다(공용 규칙으로 둔다).
  • 한 행에 목적지는 하나다. 행을 눌러 무언가 여는 표에서는 셀 안에 다른 링크를 두지 않는다 — 둘이 있으면 어느 쪽이 그 행의 일인지 알 수 없다. 다른 화면으로 가는 길은 연 뒤에 준다 (방송 이력의 채널 이동은 상태 패널 안에 있다).
  • 열려 있는 행은 왼쪽 강조 바로 가리킨다. 옅은 배경색만으로는 어느 행이 오른쪽 패널의 주인인지 흐리다. 배경을 진하게 올리면 글자 대비가 나빠지므로 색을 더하지 않고 선을 긋는다.
  • 적용된 기능(채팅·녹화·라이브 썸네일)은 아이콘이 아니라 글자로 적는다. 아이콘만 두면 배우지 않은 사람에게는 뜻이 없고, 특히 붉은 점은 "이상 상태"나 알림 배지로 읽힌다(실제로 그렇게 보였다). 테두리만 있는 회색 표로 두어 상태 배지(LIVE · 대기)와 섞이지 않게 한다.
    • 켠 것만 적는다. 끈 것까지 흐리게 늘어놓으면 무엇이 켜져 있는지 색을 하나씩 비교해야 한다. 하나도 켜지 않았으면 - 로 남긴다 — 그것도 정보다.
    • 방송 중인지로 표기를 가르지 않는다. 그건 상태 배지(LIVE)가 하는 말이라 겹친다. 녹화는 방송 중이든 대기 중이든 녹화 하나다.
    • 채널 카드에는 채팅 · 녹화 · 라이브 썸네일 셋을 적는다. 썸네일 갱신 간격은 표에 적지 않고 툴팁으로 둔다 — 세 표가 나란히 서는 줄이라 길어지면 다음 줄로 넘어간다.
    • 같은 규칙을 채널 카드와 사용량 분석의 적용 옵션 에 함께 쓴다. 내보내는 CSV 도 같은 규칙이다 — 받은 파일과 화면이 다르면 어느 쪽을 믿을지 알 수 없다.
  • 켜짐/꺼짐 값은 사용 / 미사용으로 쓴다. 확인 / 없음 은 버튼 문구이지 상태를 나타내는 말이 아니다. 체크박스 라벨과 목록 표기는 다른 문구를 쓴다 — 라벨은 라이브 썸네일 사용, 목록은 라이브 썸네일 · 2초 (목록에서 라벨을 그대로 쓰면 라이브 썸네일 사용 · 2초 같은 겹말이 된다).
  • 계산되는 값은 열로 두지 않는다. 방송 이력의 종료시작 + 방송 시간으로 나오는 값이라 열을 하나 더 쓸 이유가 없다 — 열이 늘면 이름·제목이 잘리고 행이 두 줄로 접힌다.
  • 잘린 값은 마우스를 올리면 전부 보인다(title). 열 폭을 지키는 대신 값을 잃지는 않는다.
  • 떠 있는 맨 위로 버튼은 아래 가운데에 둔다. 오른쪽 아래는 이미 자리 임자가 많다 — 목록 하단 바의 쪽 크기 선택, 상세 패널의 다운로드 버튼이 같은 자리에 놓여 서로 가렸다.
  • 스크롤하는 패널은 스크롤바 자리를 미리 비워 둔다. 내용 길이에 따라 스크롤바가 생겼다 사라지면 그만큼 안쪽 폭이 달라져, 고르는 것마다 같은 요소가 좌우로 흔들린다.
  • 표의 열과 카드의 높이는 쪽을 넘겨도 흔들리지 않는다. 같은 표인데 값의 자리가 달라지면 위아래를 비교할 수 없다. (어떻게 고정하는지는 코드 주석에 있다 — 여기서 정할 일이 아니다.)
  • 드릴다운 경로 바(뒤로 포함)는 표 카드 안, 표 바로 위에 둔다. 되돌아갈 대상이 그 표이기 때문이다. 카드 밖에 두면 차트·요약과 표 사이에 떠서 무엇에 딸린 것인지 흐려지고, 화면마다 자리가 달라진다.
  • 경로는 한 줄이다. 채널·방송 범위와 축 안의 위치(국가 → 도시)는 기술적으로 다른 축이지만 사용자에게는 둘 다 "지금 보고 있는 범위"라, 이어 붙여 한 줄로 적는다 — ← 뒤로 전체 › 사내방송 타운홀 › 대한민국. V3 라이브팩도 한 줄이었다. 두 줄로 쌓으면 같은 말을 두 번 하는 것처럼 읽힌다. 표가 무엇을 보여주는지(도시)는 오른쪽 끝에 적는다.
  • 배경은 화면 폭까지, 내용은 여백 선까지. 표를 담은 카드(패널)는 좌우 여백 없이 화면 끝까지 배경을 깔고, 그 안의 드릴다운 경로 바 · 제목/도구 줄 · 표는 페이지 여백 선에 맞춰 들여쓴다 (비디오팩 리뉴얼 section-card 와 같은 구성). 카드까지 여백 안에 가두면 표 양옆에 회색 띠가 남고, 반대로 표를 화면 끝까지 늘리면 위쪽 하위 탭 · 요약과 시작·끝 선이 어긋난다.
  • 그래서 한 화면의 세로 정렬선은 하나다 — 하위 탭 · 요약 · 차트 · 경로 바 · 표의 좌우 끝이 한 줄로 선다. (목록 전용 화면처럼 위 바 바로 아래가 곧 표인 경우는 표가 전체 폭 바를 그대로 잇는다.)
  • 페이지 도구의 자리는 표의 성격으로 갈린다. 목록 화면(방송 이력 · 녹화 · 플레이어 · 방송)은 하단 바 — 선택·일괄 삭제가 같이 놓이는 자리다. 통계 표는 제목 줄 오른쪽 도구 줄(페이지 크기 · 쪽 이동)이다(비디오팩 리뉴얼과 같은 구성).
  • 통계 표에는 순번(No) 열을 맨 앞에 둔다. 쪽을 넘겨도 1부터 다시 세지 않는다 — "몇 위인지"가 통계 표를 읽는 첫 질문이다.
  • 행이 계속 늘어나는 표는 정렬을 제공한다 — 방송 이력 · 녹화 · 시청 분석 · 사용량 분석. 분량을 나누는 방식은 화면 성격에 따라 다르다: 전체 폭 목록(방송 이력 · 녹화 · 플레이어)은 하단 바의 쪽 넘김, 카드 안의 통계 표(시청 분석)는 더보기다. 통계는 위아래 값을 비교하는 표라 쪽을 오가면 앞의 값이 사라진다(§19-14). V3 라이브팩 분석 표도 10/30/50/100개씩 선택과 열 정렬(sort_column/sort_type)을 갖고 있었다. 숫자 열은 큰 값부터, 이름·날짜 열은 작은 값부터를 기본 방향으로 한다. 정렬이 필요 없는 표(고정된 소수 행)에는 화살표를 달지 않는다 — 누를 수 없는 표시를 보여주지 않는다.
  • 기간 검색은 방송 이력에 둔다. 시작일·종료일을 비워 두면 전체다 — 이력 목록에 기본 기간을 걸면 "없는 것처럼 보이는" 데이터가 생긴다.
  • 페이지 번호는 2쪽 이상일 때만 보인다. 페이지 크기 선택은 항상 보인다. 하단 바는 선택된 항목이 있을 때만 강조색이고, 그 밖에는(선택 개념이 없는 목록 포함) 차분한 회색이다 — 화면마다 같은 바의 색이 달라 보이면 안 된다. 하단 바는 표 아래에서만 맞붙이고, 카드 목록 아래에서는 띄운다 — 카드에 닿으면 카드의 일부처럼 보인다.
  • 목록 본문(카드 그리드 · 표)은 필터바 바로 아래에 붙는다. 위 바와 사이가 뜨면 떠 있는 카드처럼 보인다.
  • 한 번 읽으면 되는 각주 안내는 표와 같은 스크롤 영역 안, 표 끝에 둔다. 밖에 두면 화면 높이를 늘 깎아 정작 보러 온 목록이 밀린다(녹화 화면의 실패 안내가 두 줄로 73px 을 먹어 목록이 309px 밖에 남지 않았다). 반대로 지금 손써야 하는 것(만료 임박 요약)과 읽고 목록에 들어가야 하는 전제(보관 규칙)는 표 위에 고정한다.
  • 열 폭은 값의 길이에 맞춘다 — 목록 표에 가로 스크롤을 만들지 않는다. 폭을 정하지 않으면 남는 폭이 모든 열에 고르게 퍼져 27일 남음 같은 짧은 값이 제목 열만큼 넓어진다. 긴 값이 들어오는 열(제목) 하나만 자동으로 두고 나머지는 못 박되, 조건부로만 나타나는 버튼(녹화 재시도)이 있는 동작 열은 그 버튼이 있는 줄 기준으로 잡는다 — 없는 줄에 맞추면 있는 줄에서만 표가 넘친다.
  • 항목이 이미지를 갖는 목록은 이미지 상자의 비율을 고정한다. 원본 비율이 상자를 밀면 카드마다 본문 시작 높이가 달라져 값을 나란히 읽을 수 없다. 카드 하단 통계 줄도 카드 바닥에 붙인다.
  • 일괄 삭제를 제공하는 목록은 행마다 체크박스를 두고 하단 바에 선택 수·삭제·선택 해제를 모은다. 지울 수 없는 행은 체크박스 자체를 비활성화한다 — 골라 놓고 실패하는 것보다 낫다. 머리글 체크박스는 현재 페이지만 다룬다. 검색어·페이지가 바뀌면 선택을 비운다.

23.5 빈 상태#

데이터가 없는 화면은 비워 두지 않는다. 무엇이 없는지와 다음에 무엇을 하면 되는지를 적는다.

  • 목록·집계 화면은 모두 빈 상태를 갖는다 — 채널 · 방송 이력 · 녹화 · 플레이어 · 방송 · 라이브 모니터 · 시청 분석 · 사용량 분석 · 대시보드의 각 카드.
  • "검색 결과 없음"과 "아직 하나도 없음"은 다른 상태다 — 다음 행동이 다르다. 앞은 검색어를 지우게 하고, 뒤는 만들기로 이끈다.
  • 0 으로 채운 표·차트로 대신하지 않는다. 추이 차트에 0 이 늘어선 것과 "이 기간에 방송이 없다"는 읽는 사람에게 전혀 다른 말이다.
  • 예외는 고정 분류표다. 사용량 분석의 저장 종류(녹화본 · 라이브 썸네일 · 등록 이미지 · 프리뷰 영상)처럼 항목 자체가 고정된 표는 0 으로 채워 보여준다 — 무엇이 용량을 쓰는지의 목록은 데이터와 무관하게 늘 같다.
  • "조회 실패"는 빈 상태가 아니다. 실패를 빈 목록으로 삼키면 있는 데이터를 없다고 말하게 되고, 사용자는 이미 가진 채널을 다시 만들려 든다. 실패는 실패라고 적고 다시 시도를 준다. 이 규칙은 목록·상세·집계 화면 전부에 같이 적용된다 — 한 화면만 실패를 삼키면 그 화면만 거짓말을 한다.
  • 없는 주소로 들어와도 콘솔 밖으로 떨어뜨리지 않는다. 무엇이 잘못됐는지와 돌아갈 자리를 함께 보여준다. 프레임워크 기본 오류 화면은 로그아웃된 것처럼 읽힌다.
  • 아직 없는 기능은 누를 수 있게 두지 않는다. 눌러서 "제공되지 않습니다"를 읽게 하는 대신 비활성 + 사유로 둔다(§23.4 와 같은 규칙 — 시청 위치의 지도 차트가 그 경우다).

23.6 대시보드#

대시보드는 "지금 어떤 상태인가"와 "어떻게 되고 있나"를 함께 보여준다. 상태만 있으면 매번 분석 화면으로 넘어가야 하고, 추이만 있으면 지금 방송이 살아 있는지 알 수 없다.

  • 상단 지표(방송 중 · 전체 채널 · 방송시간 · 트래픽) → 지금 방송 중인 채널 → 시청 추이시청자가 많았던 방송 세션 → 최근 방송 순으로 놓는다. 위로 갈수록 즉시성이 높다.
  • 누적 방송시간·트래픽은 이번 달 구간(1일~말일) 집계다. 달이 바뀌면 0 부터 다시 쌓이므로 숫자 옆 툴팁에 이번 달 구간(YYYY-MM-DD ~ YYYY-MM-DD) 기준 이라고 밝힌다. 구간을 적지 않으면 달이 바뀐 다음 날 "왜 줄었나"가 된다.
  • 상단 지표는 넷이 한 줄을 채운다. 개수가 정해진 줄에 auto-fill 을 쓰면 넓은 화면에서 빈 칸이 오른쪽에 남아 왼쪽으로 쏠려 보인다.
  • 지금 방송 중은 한 줄(최대 4장)까지만 늘어놓는다. 넘치면 카드를 더 그리지 않고 N개 채널이 더 방송 중 이라고만 조용히 적어 라이브 모니터로 넘긴다(작게·흐린 색). 대시보드는 요약이라 카드가 여러 줄로 쌓이면 아래 추이·순위가 그만큼 밀린다. 전부 보는 자리는 모니터다.
  • 시청 추이는 고른 구간의 일자별 누적 시청자와, 방송 횟수·누적 시청자·방송 시간·트래픽 합계를 보여준다. 합계 옆의 증감은 직전 같은 길이의 구간 대비다. 직전 구간에 데이터가 없으면 증감을 적지 않는다 — 0% 로 적으면 "변화 없음"이라는 거짓말이 된다.
  • 구간은 최근 7일 / 30일 / 90일 토글로 고른다. 선택지가 셋뿐이라 드롭다운을 쓰지 않는다 — 지금 무엇을 보고 있는지와 다른 선택지가 한눈에 같이 보여야 한다(비디오팩 리뉴얼 대시보드와 같은 형태). 카드 머리글에서는 바로가기 링크와 같은 축에 놓아 줄을 맞춘다.
  • 순위는 채널이 아니라 방송 세션으로 센다. 채널은 용도가 고정된 지속 자원이라(§7) 채널 단위 순위는 매번 같은 줄을 같은 순서로 반복한다 — 이미 아는 사실이다. 세션은 회차마다 달라서 "무엇이 잘 됐나"가 나온다. 줄에는 세션 제목(§7.5) · 누적 시청자 · 채널명 · 방송 시간을 적고, 세션 상세 화면이 없으므로 그 세션이 있는 채널의 방송 이력으로 보낸다.
  • 순위도 같은 토글을 갖고, 추이와 별개로 움직인다 — "이번 주 무엇이 셌나"와 "분기 전체로 무엇이 셌나"는 다른 질문이다.
  • 토글이 카드 안에 있으면 결과가 비어도 카드는 남긴다. 카드째 사라지면 방금 누른 토글까지 없어져 되돌릴 방법이 없다. 대신 카드 안에 "선택한 기간에 방송 세션이 없습니다"를 둔다.
  • 모든 값은 방송 세션 이력에서 집계한다(§7.3). 대시보드용 수치를 따로 저장하면 이력과 어긋난다.

23.7 상세 패널#

  • 목록 우측 패널은 세로를 채우고, 본문만 패널 안에서 스크롤한다. 이때 화면은 바깥이 아니라 안쪽에서 스크롤한다(internalScroll) — 표와 패널이 각자 구르고 하단 바는 제자리에 있는다. 바깥 스크롤에 position: sticky 로 붙이는 방법은 쓰지 않는다: sticky 는 컨테이닝 블록 안에서만 움직이는데, 목록이 패널보다 짧으면 그 블록이 패널과 같은 높이가 되어 움직일 여지가 0 이 된다. 그 상태로 페이지를 굴리면 패널이 그대로 밀려 올라가 바닥에 빈 띠가 남는다.
  • 수정·삭제는 패널 하단 고정 영역에 둔다. 본문 흐름에 두면 내용이 길 때 버튼이 화면 밖으로 밀린다.
  • 좌우 두 열로 나뉜 상세 화면은 열 폭을 드래그로 조정할 수 있다(비디오팩 리뉴얼과 같다). 고른 폭은 화면을 옮겨도 유지한다. 포인터 없이도 쓸 수 있게 좌우 방향키로도 조정된다. 한 열로 접히는 좁은 화면에서는 손잡이를 감춘다 — 조정할 경계가 없다.
  • 차단 사유는 툴팁이 아니라 글로 적는다. 패널은 내부 스크롤을 위해 넘침을 잘라내므로 툴팁 상자가 잘려 읽히지 않는다. 버튼은 비활성 상태로 남기고 사유를 그 위에 쓴다.

23.8 폼 화면#

  • 항목이 많은 설정 폼은 아코디언으로 접는다. 전부 펼쳐 나열하면 무엇이 켜져 있는지 훑기 어렵고 스크롤만 길어진다. 접힌 섹션도 사용 여부를 배지로 알린다.
  • 저장·취소는 폼 하단 고정 바에 둔다(취소 → 저장 순, 왼쪽 정렬). 다 채운 뒤 누르는 동작이라 우상단에 두면 아래로 스크롤한 상태에서 위로 되돌아가야 한다.
  • 켜고 끄는 항목과 그 세부 값이 함께 있으면 사용 여부를 먼저 두고, 끈 상태에서는 세부 값을 비활성화한다(값은 지우지 않는다 — 다시 켜면 돌아와야 한다). 세부 값은 들여쓰고 왼쪽 세로선으로 묶어 상위 항목에 딸린 설정임을 보여준다. 나란히 두면 둘이 별개 설정으로 읽혀 무엇이 무엇을 지배하는지 알 수 없다. 체크박스 설명글도 체크박스가 아니라 라벨 글자 시작선에 맞춘다.