화면 패턴
패턴은 "새 화면을 어떤 구조로 시작할지"에 대한 답입니다. 컴포넌트가 부품이라면 패턴은 조립 설계도입니다 — 13가지 검증된 구조가 있고, 각 패턴은 실제 플랫폼 화면 실물과 연결됩니다. 미리보기를 누르면 이 자리에서 크게 열립니다.
기본 구조 3
어떤 화면이든 뼈대는 이 셋 중 하나입니다.
사이드바(228px 고정) + 헤더(브레드크럼·프로젝트 칩) + 메인. 플랫폼 작업 화면의 기본 틀.
상단바(로고+칩) + 히어로 + 카드 1장 + 푸터. 단일 목적 페이지용.
작업 화면 4
TheNoun 플랫폼 고유의 만들고 · 시험하는 화면입니다.
위저드 구조 위에 브리프 폼(2열) → 지식 첨부 → 오디션(시뮬레이션 비교) 3단계. 필수 배지가 채워지며 진행감을 만든다.
캔버스에 가로 분기 흐름 + 우측 Side Panel에서 선택 노드 편집. 기획자가 대화 흐름을 설계한다.
도구 내부를 세로 노드 체인으로 순차 설계. 스텝 클릭 → 우측 상세(NDV)에서 편집. 마지막 스텝은 항상 "AI에게 넘길 내용".
좌측 대화(채팅=Bubble, 통화=Transcript) + 하단 입력/마이크 + 우측 컨텍스트 패널(변수·상태). 에이전트 상태는 Orb로.
운영 화면 6
데이터를 보고, 고르고, 설정하고, 내보내는 화면입니다.
앱 셸 위에 Stat Card 행 → 추이 영역 → 상세 테이블 3층. 모든 지표는 자동 수집·지속 갱신 — 수동 입력 지표는 이 화면에 올리지 않는다.
검색 + 필터 칩 행 → 카드 그리드(3열). 카드 = 미리보기 + 이름 + 한 줄 설명. 항목이 0개면 Empty State가 대신 선다.
좌측 섹션 목록 + 우측 섹션별 폼(Field + Switch + Select). 모든 운영 설정은 UI로 노출한다 — env·코드 상수에 숨기지 않는다. 저장은 섹션 단위, 결과는 Snackbar.
채팅 흐름 안에 340px 미니앱 프레임. 헤더(제목+닫기) → 선택 UI(자리·카드·시간대) → CTA 1개. 완료되면 프레임이 접히고 결과가 말풍선으로 남는다.
완성한 에이전트를 채널에 내보내는 화면. 채널 탭(웹·전화·SMS·임베드) → 채널별 설정 → 코드 스니펫/연결 상태. 복사 버튼은 항상 스니펫 우상단.
민감한 콘텐츠 앞에 정보 입력 + 동의를 먼저 세운다. 게이트 통과 전에는 목록조차 보여주지 않는다. 통과 후 파일 목록 + 행동 버튼.
공통 레시피
패턴 안 어디서나 반복되는 작은 결정들입니다.
그린 원형 체크 + 한 줄 결과 + 접수증 배지. 다음 행동이 없으면 버튼도 없다. → Result Section
문맥 안 오류는 Callout(err), 행동 직후 피드백은 Snackbar. 네이티브 alert 금지. → Callout
진행률을 알면 진행바, 모르면 스피너, 화면 골격은 Skeleton. 셋을 동시에 쓰지 않는다. → Skeleton
이유 한 줄 + 다음 행동 1개. 첫 사용 경험의 첫인상이다. → Empty State
되돌릴 수 없는 행동 앞에만 세운다. 제목=결과, 버튼=동사(삭제/취소). 네이티브 confirm 금지. → Alert Dialog
블러 시점에 필드 아래 한 줄로. 제출 버튼은 필수값이 채워질 때까지 비활성. 전체 요약 에러는 Callout으로 상단에. → Form Field
20행 넘으면 검색 + 페이지네이션. 행 클릭 → Side Panel 상세, 페이지 이동 대신 패널을 연다. → Table · Pagination