정보 구조

페이지가 어떤 형태를 갖는지. 색과 여백을 정하기 전에 결정할 일입니다.

이 절의 다른 페이지들은 부품에 대한 질문에 답합니다. 이 페이지는 그보다 앞선 질문에 답합니다. 화면이 담아야 할 것이 이만큼일 때, 읽는 사람은 무엇을 하러 왔고 어떤 배치라야 그 일을 해낼 수 있는가.

페이지	답하는 것
정보 구조(이 페이지)	페이지가 어떤 형태여야 하는가
디자인 시스템	토큰이 무엇인가: 어휘
디자인 가이드	화면을 만들 때 어떻게 고르는가
테마	런타임에 어떻게 바꾸고 덮어쓰는가

이럴 때 봅니다. 여러 객체와 여러 상태, 그리고 그 사이의 관계를 한꺼번에 담아야 하는 화면을 시작할 때. 콘솔, 대시보드, 관리 화면, 워크벤치, 모니터링 페이지가 여기 해당합니다. 랜딩 페이지나 단일 전환 폼은 대상이 아닙니다. 그런 화면의 성패는 설득력에 달려 있지, 빽빽한 정보 속에서 정확히 판단할 수 있는지에 달려 있지 않습니다.

데이터가 다 있다는 것과 페이지가 설계됐다는 것은 다릅니다. API가 돌려주는 필드가 하나도 빠짐없이 올라가 있고 필터와 상태 태그, 일괄 작업까지 갖춰져 있어도, 읽는 사람은 무엇부터 볼지 모를 수 있습니다. 빠진 것은 정보가 아니라 순서입니다.

컴포넌트를 고르기 전 세 가지 질문

들어온 순간 반드시 봐야 할 한 가지는 무엇인가? 그것이 페이지의 주 정보입니다.
그것을 이해하려면 무엇이 함께 보여야 하는가? 연관 리소스, 연관 모델, 맥락.
보고 나서 무엇을 하는가? 판단하거나, 조작하거나, 계속 생각하거나.

셋 다 컴포넌트 목록을 열기 전에 답합니다. 세 답이 분명한 페이지는 형태를 잘못 고르는 일이 드물고, 이 단계를 건너뛴 페이지는 결국 API 응답을 중심으로 짜입니다.

한 페이지에 주 모델은 하나. 보조 모델은 주 모델을 이해하고 조작하는 것을 도울 수는 있지만, 첫 화면을 놓고 경쟁해서는 안 됩니다.

형태는 과업이 정한다, 응답이 정하지 않는다

형태가 어긋난 페이지 대부분은 이 두 가지 지름길에서 나옵니다.

엔드포인트가 배열을 돌려줬으니 테이블이 됐다.
라우트에 ID가 있으니 상세 페이지가 됐다.

둘 다 이유가 되지 못합니다. 같은 객체라도 과업이 달라지면 형태가 달라집니다. 찾을 때 이슈는 컬렉션이고, 처리할 때는 상태 흐름이며, 협업할 때는 논의 스레드, 감사할 때는 사건 열입니다. 레코드에 날짜 필드가 있다는 것은 데이터에 날짜가 있다는 뜻일 뿐, 그 페이지가 달력이라는 뜻은 아닙니다.

표현 골격 고르기

주된 질문에 머릿속 변환이 가장 적게 필요한 배치를 고릅니다.

읽는 사람 앞에 놓인 질문	함께 놓여야 하는 정보	표현 골격
이것들은 무엇이 어떻게 다른가	비교할 필드를 고정된 열에	이차원 비교표
어느 것인가, 열어 보려고	이름, 식별자, 상태	목록 / 리소스 카탈로그
어느 것인가, 그림을 보면 안다	이미지를 먼저, 그 둘레에 이름과 필드	카드 그리드
이 객체는 무엇이고 지금 어떤 상태인가	정체성, 상태, 주 동작, 그다음이 속성	구역별 상세
이것은 어디에 속하는가	경로, 상위, 형제	계층 트리
무엇이 이것에 의존하고, 바꾸면 무엇이 깨지는가	상류와 하류, 영향 범위	인접 목록
지금 몇 번째 단계이고 다음은 무엇인가	단계, 현재 입력, 이후 절차	단계 흐름
각 항목이 어느 단계인가, 옮기는 것이 곧 일이다	열이 곧 단계, 카드에 정체성과 병목	칸반
왜 멈췄는가	단계 요약, 다음 단계별 결과, 다음 원시 로그	추적 드릴다운
지금 건강한가, 피해는 어디까지인가	객체 이름, 상태, 그 상태를 바꾼 사건	상태 월
무엇이, 어떤 순서로, 누구에 의해 일어났는가	시각, 행위자, 사건 유형	사건 타임라인
누가 무엇을 말했고 어떻게 답했는가	작성자, 발언, 답글 구조	논의 스레드
전과 후가 무엇이 다른가	두 버전을 나란히	나란히 비교
추세는 어떻고 이상은 어디인가	지표, 그 기준선, 상세로 들어가는 입구	대시보드
언제 점유돼 있고 언제 충돌하는가	시작, 종료, 지속 시간을 한 축 위에	달력 / 일정
다음에 무엇을 처리하는가	한쪽에 큐, 다른 쪽에 그 항목	마스터-디테일 워크벤치
어떤 규칙이 적용되고 무엇에 영향을 주는가	설정 항목, 적용 범위, 그 결과	설정 폼
이 본문은 무엇을 말하는가	본문을 순서대로, 옆에 목차	연속 문서
어디에 있는가	위치, 경계, 분포	지도 / 캔버스

자주 뒤바뀌는 짝

타임라인이냐 단계냐. 타임라인은 이미 일어난 일을 순서대로 말하고, 단계는 지금 어디이고 다음이 무엇인지를 말합니다. 생김새는 닮았지만 시간의 방향은 반대입니다.
칸반이냐 필터냐. 카드를 옮기는 것 자체가 동작일 때만 칸반이 성립합니다. 열이 저장된 필터 조건에 불과하다면, 드래그가 필요한 필터를 만든 셈입니다.
달력이냐 타임라인이냐. 달력은 점유와 충돌에 답하고 타임라인은 순서에 답합니다. 레코드의 날짜가 둘 중 하나를 골라 주지 않습니다. 질문이 고릅니다.
카드 그리드냐 테이블이냐. 이미지가 인식의 닻이거나, 아니거나 둘 중 하나입니다. 숫자를 비교해서 고르는 일이라면 첫 열의 섬네일이 정작 판단을 가르는 필드를 밀어냅니다.
그래프냐 인접 목록이냐. 경로나 전파 자체가 판단 근거일 때만 그림을 그립니다. 그렇지 않다면 상류와 하류를 묶은 목록이 더 빨리 읽힙니다.
문서냐 필드 격자냐. 순서대로 읽는 글은 글로 둡니다. 문단마다 카드나 키-값 행으로 쪼개면 읽기 좋게 만들던 것이 그대로 무너집니다.

만들 수 있다고 세 가지 뷰를 다 만들지는 마세요. 뷰가 하나 늘 때마다 필터 한 벌, 상태 매핑 하나, 계속 맞춰 둬야 할 동작 한 묶음이 늘어납니다. 두 번째 사용 방식이 실제로 잦아졌을 때 더하세요. 혹시 몰라서가 아니라.

정보마다의 자리

정보	답하는 질문	있어야 할 곳	가면 안 되는 곳
정체성	이것은 무엇인가	제목, 객체 요약	마지막 열, 또는 탭 뒤
상태	지금 어떤가	제목 영역이나 요약 영역	상세 필드에서만 찾을 수 있는 자리
속성	어떤 것인가	상세 본문, 사람이 이해하는 방식으로 묶어서	API 필드 순서대로 펼쳐 놓은 자리
관계	무엇과 이어져 있는가	자기 영역이나 탭. 소유·의존·참조를 구분해서	속성 테이블에 뒤섞인 자리
변경	이전과 무엇이 다른가	차이 영역, 타임라인	바뀐 값만 보여 주는 자리
근거	왜 그렇게 판단해도 되는가	그 판단 바로 옆, 펼칠 수 있게	어딘가 다른 로그 페이지
동작	지금 무엇을 할 수 있는가	주 동작은 제목 영역에, 나머지는 대상 옆에	「더 보기」 아래
피드백	방금 그것이 무엇을 했는가	동작 옆, 과업 맥락을 지킨 채	대상과 끊어진 전역 알림

사실마다 권위 있는 자리는 하나뿐입니다. 다른 곳에는 요약이나 입구만 두고 그리로 링크합니다.

읽는 순서

페이지 정체성
→ 현재 상태 또는 예외
→ 주 과업과 주 동작
→ 판단에 필요한 정보
→ 관계, 변경, 근거
→ 부차 정보와 저빈도 동작

시각적 주 제목은 페이지에 하나. 절 제목은 의미로 나아갑니다. 글자 크기로 계층인 척하지 않습니다.
과업 영역마다 주 동작은 최대 하나. 주 버튼은 가장 일어날 법한 다음 한 수이지 가장 파괴적인 한 수가 아닙니다. 위험한 동작에는 위험의 의미를 주되 가장 무거운 시각적 비중은 주지 않습니다.
경고색과 위험색은 정말로 주의가 필요한 상태의 몫입니다. 온통 초록인 페이지는 이미 신호를 다 써 버린 것입니다.
배지, 태그, 배너는 하나의 주의 예산을 나눠 씁니다. 판단을 바꿀 것만 강조합니다.

정보 밀도

밀도는 단위 면적에 컨트롤이 몇 개 들어가느냐가 아니라, 한 번 볼 때 판단에 쓸 수 있는 정보를 얼마나 가져가느냐입니다. 여백을 조이면 시각적 밀도만 올라가고 실효 밀도는 그대로입니다. 관계없는 필드를 덜어 내고 비교를 한자리에 모아야 실효 밀도가 오릅니다.

단계	어울리는 자리	무엇을 얻는가
여유	첫 사용, 드문 설정, 위험한 확인	설명할 여지, 넓은 그룹 간격, 눈에 보이는 영향 예고
표준	대부분의 목록, 상세, 폼	훑기 쉬움과 화면당 정보량의 기본 균형
조밀	고빈도 전문 워크벤치: 모니터링, 운영, 감사	안정된 열 너비, 짧은 문구, 키보드 효율, 저장된 뷰

한 페이지에는 인접한 두 단계까지만 씁니다. 표준 페이지 안에 조밀한 표가 들어가는 것은 괜찮지만, 영역마다 제 나름의 잣대를 만드는 것은 안 됩니다.
조밀함은 「글자와 터치 영역을 함께 줄이기」가 아닙니다. 컨테이너 여백과 줄 높이는 조일 수 있어도, 본문 가독성과 보이는 포커스 링, 포인터 타깃 크기는 조일 수 없습니다.
전문 사용자에게는 한 번에 더 많이 보여 주기보다 열 관리, 저장된 뷰, 일괄 작업, 단축키가 낫습니다.

과업 맥락 지키기

골격을 정했다면 보조 내용을 어디에 둘지 정합니다.

읽는 사람이 하고 있는 일	주어야 할 것
객체나 근거 사이를 반복해서 오간다	마스터-디테일 분할. 한쪽에 큐, 한쪽에 그 항목
가볍고 금방 지나갈 것을 잠깐 본다	펼침 행(`r-disclosure-row`)이나 팝오버(`r-popover`)
공유할 수 있거나 너비가 필요한 일을 한다	자기 라우트
확인하거나 한 항목만 입력한다	모달(`r-modal`)

모달은 내비게이션 계층이 아닙니다. 복사할 링크, 브라우저 기록, 나란히 놓는 비교, 새로 고침 뒤에도 남아야 하는 작업이 필요하다면 라우트를 줍니다.

이 층에서 ranui가 주는 것

ranui는 페이지 형태에 대해 의도적으로 입장을 갖지 않습니다. 기본 요소와 토큰을 줄 뿐, 페이지 템플릿을 주지 않습니다. 이 층에서 쓸 수 있는 것은 이렇습니다.

골격이 나뉘는 띠에는 r-section, 정말로 독립적인 반복 항목에는 r-card. 카드 안에 카드는 넣지 않습니다. 폼 필드는 소제목이나 구분선으로 묶습니다.
r-tabs는 한 객체의 동급 뷰(그 논의, 그 검사, 그 차이)를 위한 것이지 서로 무관한 모듈을 위한 것이 아닙니다. 그건 내비게이션의 몫입니다.
점진적 공개에는 r-disclosure-row, 잠깐 스치는 맥락에는 r-popover와 r-dropdown, r-modal은 위 표가 허용하는 용도로만.
상태에는 r-state-dot을 쓰되 항상 라벨과 함께: 색만으로 알리지 않기.
첫 화면이 로딩되는 동안에는 r-skeleton, 기다리는 사람이 의아해할 만큼 긴 작업에는 r-progress, 결과는 r-message로 알립니다.

ranui에는 테이블, 트리, 달력, 칸반, 타임라인이 없습니다. 직접 만들 때는 두 번째 시각 체계를 세우지 말고 토큰과 디자인 가이드 위에서 만드세요. 여백은 스케일에서, 글자는 역할에서, 색은 시맨틱 토큰에서 가져오고, 닿을 수 있는 상태를 모두 설계합니다.

안티패턴

엔드포인트가 돌려주는 필드가 그대로 상세 한 줄이 되어, 정체성·상태·관계·근거가 같은 비중으로 한꺼번에 도착한다.
카드와 색, 장식적인 여백으로 계층을 지어내면서 정작 무엇부터 읽어야 하는지는 말하지 않는다.
여러 동작이 주 버튼 스타일을 나눠 쓰거나, 저빈도 동작이 제목 영역에 자리 잡는다.
상태, 속성, 관계, 변경이 한 표에 뒤섞여 어디서도 비교가 서지 않는다.
이름과 상태만 찾아보려던 사람에게 관계 그래프를 보여 준다.
긴 흐름, 비교, 또는 누군가 링크로 보내고 싶어 할 것을 모달에 담는다.
같은 한 문장이 제목과 요약, 탭 이름과 표에 되풀이되면서 어디서도 새로운 것을 더하지 않는다.

페이지를 내보내기 전 점검표

주 정보, 연관 정보, 읽는 사람의 다음 동작이 적혀 있다.
골격을 응답의 모양이 아니라 질문에서 골랐다.
페이지의 주 모델은 하나이고, 보조 뷰는 그것과 경쟁하지 않고 그것에 봉사한다.
명세를 읽지 않고도 대상과 상태, 주 동작을 5초 안에 알 수 있다.
비교는 한자리에서 일어나고, 탭이나 페이지를 건너 값을 외울 필요가 없다.
사실마다 권위 있는 자리가 하나이고, 나머지는 그리로 링크한다.
밀도가 사용 빈도에 맞고, 인접한 두 단계를 넘지 않는다.
긴 문장, 큰 숫자, 좁은 뷰포트가 정보 순서를 무너뜨리지 않는다.
판단에 도움이 되지 않는 블록, 필드, 태그, 버튼은 지웠다.