710 lines
23 KiB
HTML
710 lines
23 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ko">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>공유채팅 헤더 재배치 제안</title>
|
||
<style>
|
||
:root {
|
||
--bg-top: #edf3fb;
|
||
--bg-bottom: #e4edf8;
|
||
--surface: rgba(255, 255, 255, 0.84);
|
||
--surface-strong: rgba(255, 255, 255, 0.94);
|
||
--surface-soft: rgba(248, 250, 252, 0.92);
|
||
--line: rgba(148, 163, 184, 0.24);
|
||
--text: #0f172a;
|
||
--muted: #64748b;
|
||
--blue: #2563eb;
|
||
--blue-soft: rgba(219, 234, 254, 0.96);
|
||
--green: #166534;
|
||
--green-soft: rgba(220, 252, 231, 0.98);
|
||
--amber: #92400e;
|
||
--amber-soft: rgba(254, 243, 199, 0.98);
|
||
--red: #b91c1c;
|
||
--red-soft: rgba(254, 226, 226, 0.98);
|
||
--shadow-lg: 0 20px 50px rgba(15, 23, 42, 0.14);
|
||
--shadow-md: 0 12px 28px rgba(148, 163, 184, 0.16);
|
||
--radius-xl: 28px;
|
||
--radius-lg: 22px;
|
||
--radius-md: 18px;
|
||
--radius-sm: 14px;
|
||
}
|
||
|
||
* {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
margin: 0;
|
||
font-family: "Pretendard", "Inter", sans-serif;
|
||
color: var(--text);
|
||
background:
|
||
radial-gradient(circle at top left, rgba(59, 130, 246, 0.12), transparent 28%),
|
||
linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bottom) 100%);
|
||
}
|
||
|
||
.page {
|
||
width: min(1480px, calc(100vw - 40px));
|
||
margin: 0 auto;
|
||
padding: 28px 0 40px;
|
||
}
|
||
|
||
.hero {
|
||
display: grid;
|
||
gap: 14px;
|
||
padding: 22px 24px;
|
||
border: 1px solid rgba(196, 210, 226, 0.88);
|
||
border-radius: 28px;
|
||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(248, 250, 252, 0.86));
|
||
box-shadow: var(--shadow-lg);
|
||
backdrop-filter: blur(18px);
|
||
}
|
||
|
||
.eyebrow,
|
||
.chip,
|
||
.tag {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 8px 12px;
|
||
border-radius: 999px;
|
||
font-size: 12px;
|
||
font-weight: 700;
|
||
letter-spacing: -0.01em;
|
||
}
|
||
|
||
.eyebrow {
|
||
width: fit-content;
|
||
color: var(--blue);
|
||
background: var(--blue-soft);
|
||
}
|
||
|
||
.hero h1 {
|
||
margin: 0;
|
||
font-size: 34px;
|
||
line-height: 1.1;
|
||
letter-spacing: -0.04em;
|
||
}
|
||
|
||
.hero p {
|
||
margin: 0;
|
||
max-width: 920px;
|
||
color: var(--muted);
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.dna {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 10px;
|
||
}
|
||
|
||
.chip {
|
||
color: #334155;
|
||
background: rgba(255, 255, 255, 0.82);
|
||
border: 1px solid rgba(196, 210, 226, 0.92);
|
||
}
|
||
|
||
.grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||
gap: 18px;
|
||
margin-top: 22px;
|
||
}
|
||
|
||
.proposal {
|
||
display: grid;
|
||
gap: 14px;
|
||
padding: 18px;
|
||
border-radius: 26px;
|
||
border: 1px solid rgba(196, 210, 226, 0.96);
|
||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(244, 248, 253, 0.94));
|
||
box-shadow: var(--shadow-md);
|
||
}
|
||
|
||
.proposal h2 {
|
||
margin: 0;
|
||
font-size: 22px;
|
||
letter-spacing: -0.03em;
|
||
}
|
||
|
||
.proposal p {
|
||
margin: 0;
|
||
color: var(--muted);
|
||
line-height: 1.55;
|
||
}
|
||
|
||
.tag-row {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
}
|
||
|
||
.tag {
|
||
padding: 6px 10px;
|
||
color: #334155;
|
||
background: rgba(255, 255, 255, 0.86);
|
||
border: 1px solid rgba(196, 210, 226, 0.86);
|
||
}
|
||
|
||
.phone {
|
||
display: grid;
|
||
gap: 10px;
|
||
min-height: 740px;
|
||
padding: 14px;
|
||
border-radius: 30px;
|
||
background:
|
||
linear-gradient(180deg, rgba(237, 243, 251, 0.98), rgba(228, 237, 248, 0.94)),
|
||
radial-gradient(circle at top left, rgba(59, 130, 246, 0.1), transparent 32%);
|
||
border: 1px solid rgba(196, 210, 226, 0.98);
|
||
box-shadow:
|
||
inset 0 0 0 1px rgba(255, 255, 255, 0.4),
|
||
0 18px 38px rgba(15, 23, 42, 0.12);
|
||
}
|
||
|
||
.status-bar {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 2px 4px 0;
|
||
font-size: 11px;
|
||
color: #475569;
|
||
}
|
||
|
||
.header {
|
||
display: grid;
|
||
gap: 10px;
|
||
padding: 12px;
|
||
border-radius: 24px;
|
||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(248, 250, 252, 0.78));
|
||
border: 1px solid rgba(196, 210, 226, 0.9);
|
||
backdrop-filter: blur(18px);
|
||
}
|
||
|
||
.header-top,
|
||
.header-bottom,
|
||
.header-split {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 10px;
|
||
}
|
||
|
||
.room-trigger,
|
||
.action-pill,
|
||
.filter-pill {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
min-height: 38px;
|
||
padding: 0 14px;
|
||
border-radius: 999px;
|
||
border: 1px solid rgba(148, 163, 184, 0.22);
|
||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(241, 245, 249, 0.92));
|
||
box-shadow:
|
||
inset 0 0 0 1px rgba(255, 255, 255, 0.42),
|
||
0 8px 18px rgba(148, 163, 184, 0.14);
|
||
}
|
||
|
||
.room-trigger {
|
||
min-width: 0;
|
||
flex: 1 1 auto;
|
||
justify-content: flex-start;
|
||
}
|
||
|
||
.room-avatar {
|
||
width: 28px;
|
||
height: 28px;
|
||
border-radius: 12px;
|
||
background: linear-gradient(135deg, rgba(37, 99, 235, 0.94), rgba(59, 130, 246, 0.72));
|
||
color: white;
|
||
display: grid;
|
||
place-items: center;
|
||
font-weight: 800;
|
||
font-size: 13px;
|
||
flex: 0 0 auto;
|
||
}
|
||
|
||
.room-copy {
|
||
display: grid;
|
||
min-width: 0;
|
||
}
|
||
|
||
.room-copy strong {
|
||
font-size: 14px;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.room-copy span {
|
||
color: var(--muted);
|
||
font-size: 11px;
|
||
}
|
||
|
||
.icon-circle {
|
||
width: 36px;
|
||
height: 36px;
|
||
border-radius: 999px;
|
||
display: grid;
|
||
place-items: center;
|
||
background: rgba(219, 234, 254, 0.94);
|
||
color: var(--blue);
|
||
font-size: 14px;
|
||
font-weight: 800;
|
||
}
|
||
|
||
.handle {
|
||
width: 44px;
|
||
height: 5px;
|
||
margin: 2px auto 0;
|
||
border-radius: 999px;
|
||
background: rgba(148, 163, 184, 0.52);
|
||
}
|
||
|
||
.dashboard {
|
||
display: grid;
|
||
gap: 10px;
|
||
}
|
||
|
||
.dashboard-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
gap: 10px;
|
||
}
|
||
|
||
.metric {
|
||
padding: 14px;
|
||
border-radius: 20px;
|
||
border: 1px solid rgba(196, 210, 226, 0.92);
|
||
background: rgba(255, 255, 255, 0.82);
|
||
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
|
||
}
|
||
|
||
.metric strong {
|
||
display: block;
|
||
font-size: 24px;
|
||
letter-spacing: -0.04em;
|
||
}
|
||
|
||
.metric span {
|
||
color: var(--muted);
|
||
font-size: 12px;
|
||
}
|
||
|
||
.metric.blue {
|
||
background: linear-gradient(180deg, rgba(239, 246, 255, 0.98), rgba(219, 234, 254, 0.94));
|
||
}
|
||
|
||
.metric.green {
|
||
background: linear-gradient(180deg, rgba(240, 253, 244, 0.98), rgba(220, 252, 231, 0.94));
|
||
}
|
||
|
||
.metric.amber {
|
||
background: linear-gradient(180deg, rgba(255, 251, 235, 0.98), rgba(254, 243, 199, 0.94));
|
||
}
|
||
|
||
.metric.red {
|
||
background: linear-gradient(180deg, rgba(254, 242, 242, 0.98), rgba(254, 226, 226, 0.94));
|
||
}
|
||
|
||
.sheet {
|
||
display: grid;
|
||
gap: 12px;
|
||
padding: 14px;
|
||
border-radius: 26px;
|
||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.92));
|
||
border: 1px solid rgba(196, 210, 226, 0.9);
|
||
box-shadow:
|
||
inset 0 0 0 1px rgba(255, 255, 255, 0.32),
|
||
0 14px 28px rgba(148, 163, 184, 0.14);
|
||
}
|
||
|
||
.sheet-title {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 10px;
|
||
}
|
||
|
||
.sheet-title strong {
|
||
font-size: 15px;
|
||
}
|
||
|
||
.section {
|
||
display: grid;
|
||
gap: 8px;
|
||
}
|
||
|
||
.section-label {
|
||
color: var(--muted);
|
||
font-size: 11px;
|
||
font-weight: 700;
|
||
letter-spacing: 0.04em;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.list,
|
||
.feed {
|
||
display: grid;
|
||
gap: 8px;
|
||
}
|
||
|
||
.list-item,
|
||
.feed-item {
|
||
display: grid;
|
||
gap: 4px;
|
||
padding: 12px 13px;
|
||
border-radius: 18px;
|
||
background: var(--surface-strong);
|
||
border: 1px solid rgba(196, 210, 226, 0.86);
|
||
}
|
||
|
||
.list-item-top,
|
||
.feed-item-top {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 8px;
|
||
}
|
||
|
||
.list-item strong,
|
||
.feed-item strong {
|
||
font-size: 13px;
|
||
}
|
||
|
||
.list-item span,
|
||
.feed-item span,
|
||
.feed-item p {
|
||
margin: 0;
|
||
color: var(--muted);
|
||
font-size: 12px;
|
||
line-height: 1.45;
|
||
}
|
||
|
||
.badge {
|
||
padding: 5px 9px;
|
||
border-radius: 999px;
|
||
font-size: 11px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.badge.blue {
|
||
color: #1d4ed8;
|
||
background: rgba(219, 234, 254, 0.96);
|
||
}
|
||
|
||
.badge.green {
|
||
color: var(--green);
|
||
background: var(--green-soft);
|
||
}
|
||
|
||
.badge.amber {
|
||
color: var(--amber);
|
||
background: var(--amber-soft);
|
||
}
|
||
|
||
.badge.red {
|
||
color: var(--red);
|
||
background: var(--red-soft);
|
||
}
|
||
|
||
.message {
|
||
flex: 1 1 auto;
|
||
display: grid;
|
||
gap: 10px;
|
||
align-content: start;
|
||
padding: 8px 2px 2px;
|
||
}
|
||
|
||
.bubble {
|
||
max-width: 86%;
|
||
padding: 12px 14px;
|
||
border-radius: 18px;
|
||
line-height: 1.55;
|
||
font-size: 13px;
|
||
box-shadow: 0 10px 22px rgba(148, 163, 184, 0.1);
|
||
}
|
||
|
||
.bubble.self {
|
||
justify-self: end;
|
||
color: white;
|
||
background: linear-gradient(135deg, #2563eb, #3b82f6);
|
||
}
|
||
|
||
.bubble.other {
|
||
justify-self: start;
|
||
background: rgba(255, 255, 255, 0.9);
|
||
border: 1px solid rgba(196, 210, 226, 0.82);
|
||
}
|
||
|
||
.footer-note {
|
||
padding: 14px 16px;
|
||
border-radius: 18px;
|
||
background: rgba(255, 255, 255, 0.8);
|
||
border: 1px dashed rgba(148, 163, 184, 0.4);
|
||
color: #475569;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
@media (max-width: 1280px) {
|
||
.grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.phone {
|
||
min-height: auto;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<main class="page">
|
||
<section class="hero">
|
||
<span class="eyebrow">공유채팅 실제 테마 기반 제안</span>
|
||
<h1>채팅방 헤더를 방 목록 + 알림센터 허브로 재구성</h1>
|
||
<p>
|
||
현재 공유채팅이 쓰는 옅은 블루 그라데이션, 반투명 화이트 surface, 파란 pill 액션 톤을 유지하면서
|
||
헤더의 역할을 명확히 분리했습니다. 공통 방향은 “제목/아이콘 클릭으로 방 목록”, “중앙 손잡이 드래그로
|
||
iOS 알림센터 스타일”, “현재 방과 다른 방 알림을 한 시트에서 함께 확인”입니다.
|
||
</p>
|
||
<div class="dna">
|
||
<span class="chip">현재 테마: #edf3fb → #e4edf8</span>
|
||
<span class="chip">액션 톤: white pill + #2563eb</span>
|
||
<span class="chip">재질감: blur + soft shadow</span>
|
||
<span class="chip">상태칩: blue / green / amber / red</span>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="grid">
|
||
<article class="proposal" id="option-a">
|
||
<div>
|
||
<h2>A안. Capsule Rail</h2>
|
||
<p>가장 자연스럽게 익숙한 안입니다. 제목 캡슐이 방 목록 진입점이 되고, 중앙 손잡이를 내려 전체 알림센터를 펼칩니다.</p>
|
||
</div>
|
||
<div class="tag-row">
|
||
<span class="tag">추천: 모바일 우선</span>
|
||
<span class="tag">방 목록 발견성 높음</span>
|
||
<span class="tag">알림센터 구분 명확</span>
|
||
</div>
|
||
<div class="phone">
|
||
<div class="status-bar"><span>9:41</span><span>Live 5G 92%</span></div>
|
||
<div class="header">
|
||
<div class="header-top">
|
||
<div class="room-trigger">
|
||
<div class="room-avatar">CC</div>
|
||
<div class="room-copy">
|
||
<strong>공유채팅 운영룸</strong>
|
||
<span>제목/아이콘 탭: 방 목록 + 필터 열기</span>
|
||
</div>
|
||
</div>
|
||
<div class="action-pill">설정</div>
|
||
<div class="icon-circle">-</div>
|
||
<div class="icon-circle">×</div>
|
||
</div>
|
||
<div class="header-bottom">
|
||
<div class="filter-pill">진행중 6 · 다른 방 새답변 4</div>
|
||
<div class="filter-pill">apps 2건</div>
|
||
</div>
|
||
<div class="handle"></div>
|
||
</div>
|
||
|
||
<div class="sheet">
|
||
<div class="sheet-title">
|
||
<strong>알림센터</strong>
|
||
<span class="badge blue">전체 채팅 + apps</span>
|
||
</div>
|
||
|
||
<div class="dashboard">
|
||
<div class="dashboard-grid">
|
||
<div class="metric blue"><strong>12</strong><span>처리중 요청</span></div>
|
||
<div class="metric green"><strong>4</strong><span>다른 방 새 답변</span></div>
|
||
<div class="metric amber"><strong>2</strong><span>apps 경고</span></div>
|
||
<div class="metric red"><strong>1</strong><span>확인 필요 실패</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="section">
|
||
<div class="section-label">방 목록 + 필터</div>
|
||
<div class="list">
|
||
<div class="list-item">
|
||
<div class="list-item-top"><strong>전체 방</strong><span class="badge blue">18</span></div>
|
||
<span>최근답변, 처리중, 안읽음, apps 연결방 필터를 같은 레이어에서 전환</span>
|
||
</div>
|
||
<div class="list-item">
|
||
<div class="list-item-top"><strong>개발 운영방</strong><span class="badge green">새 답변</span></div>
|
||
<span>3분 전 Codex 응답 도착 · 앱 연결 2개</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="section">
|
||
<div class="section-label">알림 피드</div>
|
||
<div class="feed">
|
||
<div class="feed-item">
|
||
<div class="feed-item-top"><strong>자동화 공유방</strong><span class="badge blue">진행중</span></div>
|
||
<p>배포 확인 캡처 업로드 완료. 검증 스크린샷 2장 확인 필요.</p>
|
||
</div>
|
||
<div class="feed-item">
|
||
<div class="feed-item-top"><strong>Apps 알림</strong><span class="badge amber">권한</span></div>
|
||
<p>캘린더 동기화 1건 지연. 알림센터에서 바로 상세 열기 버튼 제공.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="message">
|
||
<div class="bubble other">헤더 제목을 누르면 바로 방 목록과 필터가 한 번에 보여야 합니다.</div>
|
||
<div class="bubble self">A안은 그 요구를 가장 직접적으로 충족합니다.</div>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="proposal" id="option-b">
|
||
<div>
|
||
<h2>B안. Split Status Bar</h2>
|
||
<p>좌측은 현재 방, 우측은 전체 알림과 apps 상태를 쌓아 두는 데스크톱 친화형입니다. 헤더 하단은 세그먼트 필터로 남깁니다.</p>
|
||
</div>
|
||
<div class="tag-row">
|
||
<span class="tag">추천: 데스크톱 확장</span>
|
||
<span class="tag">필터 접근 가장 빠름</span>
|
||
<span class="tag">정보량 많음</span>
|
||
</div>
|
||
<div class="phone">
|
||
<div class="status-bar"><span>9:41</span><span>Workspace online</span></div>
|
||
<div class="header">
|
||
<div class="header-split">
|
||
<div class="room-trigger">
|
||
<div class="room-avatar">PM</div>
|
||
<div class="room-copy">
|
||
<strong>프로젝트 메인룸</strong>
|
||
<span>아이콘/제목 클릭: 방 전환</span>
|
||
</div>
|
||
</div>
|
||
<div class="action-pill">다른 방 4</div>
|
||
<div class="action-pill">apps 2</div>
|
||
</div>
|
||
<div class="header-bottom">
|
||
<div class="filter-pill">전체</div>
|
||
<div class="filter-pill">진행중</div>
|
||
<div class="filter-pill">안읽음</div>
|
||
<div class="filter-pill">apps</div>
|
||
</div>
|
||
<div class="handle"></div>
|
||
</div>
|
||
|
||
<div class="sheet">
|
||
<div class="sheet-title">
|
||
<strong>Notification Center Dashboard</strong>
|
||
<span class="badge green">실시간 집계</span>
|
||
</div>
|
||
<div class="dashboard-grid">
|
||
<div class="metric blue"><strong>08</strong><span>현재 방 처리 흐름</span></div>
|
||
<div class="metric green"><strong>03</strong><span>다른 방 확인대기</span></div>
|
||
<div class="metric amber"><strong>05</strong><span>apps 작업 알림</span></div>
|
||
<div class="metric red"><strong>02</strong><span>실패/재시도</span></div>
|
||
</div>
|
||
|
||
<div class="section">
|
||
<div class="section-label">요약 콘텐츠</div>
|
||
<div class="feed">
|
||
<div class="feed-item">
|
||
<div class="feed-item-top"><strong>현재 방</strong><span class="badge blue">3건</span></div>
|
||
<p>작업중인 요청, 마지막 응답 시간, 첨부 리소스 생성 수를 카드형으로 고정 배치</p>
|
||
</div>
|
||
<div class="feed-item">
|
||
<div class="feed-item-top"><strong>다른 채팅방</strong><span class="badge green">새 답변</span></div>
|
||
<p>현재 방이 아니어도 읽지 않은 응답과 mention 성격 요청을 한 섹션에 모아 보여줌</p>
|
||
</div>
|
||
<div class="feed-item">
|
||
<div class="feed-item-top"><strong>Apps</strong><span class="badge amber">확인 필요</span></div>
|
||
<p>캘린더, 알림, 연결 앱의 상태 메시지를 채팅 알림과 동일한 카드 리듬으로 정렬</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="message">
|
||
<div class="bubble other">필터를 자주 바꾸는 운영자라면 헤더 안에서 바로 전환하고 싶습니다.</div>
|
||
<div class="bubble self">B안은 필터 중심 운영에 가장 유리합니다.</div>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="proposal" id="option-c">
|
||
<div>
|
||
<h2>C안. Focus Stack</h2>
|
||
<p>현재 작업중인 방을 더 크게 인지시키는 집중형입니다. 알림센터는 “현재 방 집중 + 다른 방 보조” 우선순위가 드러납니다.</p>
|
||
</div>
|
||
<div class="tag-row">
|
||
<span class="tag">추천: 집중 작업</span>
|
||
<span class="tag">브랜드감 강함</span>
|
||
<span class="tag">운영감시형 대시보드</span>
|
||
</div>
|
||
<div class="phone">
|
||
<div class="status-bar"><span>9:41</span><span>Preview theme sync</span></div>
|
||
<div class="header">
|
||
<div class="header-top">
|
||
<div class="room-trigger" style="min-height: 52px;">
|
||
<div class="room-avatar" style="width: 34px; height: 34px; border-radius: 14px;">UX</div>
|
||
<div class="room-copy">
|
||
<strong>UX 검토 채팅방</strong>
|
||
<span>Hero chip 탭: 방 목록 / 필터 / 최근방</span>
|
||
</div>
|
||
</div>
|
||
<div class="icon-circle">≡</div>
|
||
</div>
|
||
<div class="header-bottom">
|
||
<div class="filter-pill">현재 방 진행중 4</div>
|
||
<div class="filter-pill">전체 알림 9</div>
|
||
</div>
|
||
<div class="handle"></div>
|
||
</div>
|
||
|
||
<div class="sheet">
|
||
<div class="sheet-title">
|
||
<strong>집중 대시보드</strong>
|
||
<span class="badge blue">현재 방 우선</span>
|
||
</div>
|
||
<div class="dashboard-grid">
|
||
<div class="metric blue"><strong>4</strong><span>현재 방 처리중</span></div>
|
||
<div class="metric green"><strong>2</strong><span>완료 직전</span></div>
|
||
<div class="metric amber"><strong>3</strong><span>다른 방 확인</span></div>
|
||
<div class="metric red"><strong>1</strong><span>apps 경고</span></div>
|
||
</div>
|
||
|
||
<div class="section">
|
||
<div class="section-label">우선순위 피드</div>
|
||
<div class="feed">
|
||
<div class="feed-item">
|
||
<div class="feed-item-top"><strong>현재 방 요청</strong><span class="badge blue">우선</span></div>
|
||
<p>마지막 응답 이후 7분 경과. 첨부 preview 3개 생성됨. 바로 이어보기 버튼 노출.</p>
|
||
</div>
|
||
<div class="feed-item">
|
||
<div class="feed-item-top"><strong>다른 방 답변</strong><span class="badge green">보조</span></div>
|
||
<p>메인 운영방에 새 응답 2건. 눌러서 방 전환 없이 quick peek 가능.</p>
|
||
</div>
|
||
<div class="feed-item">
|
||
<div class="feed-item-top"><strong>Apps 이벤트</strong><span class="badge amber">연결</span></div>
|
||
<p>배포 완료, 캘린더 일정, 리소스 등록 완료 이벤트를 낮은 대비 카드로 정렬.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="message">
|
||
<div class="bubble other">작업 중인 방을 잃지 않으면서도 다른 방 알림은 놓치고 싶지 않습니다.</div>
|
||
<div class="bubble self">C안은 집중감은 가장 좋지만, 운영형 전체 목록성은 A안보다 약합니다.</div>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</section>
|
||
|
||
<section class="footer-note">
|
||
추천 순서는 A안 → B안 → C안입니다. A안은 현재 공유채팅의 둥근 pill 액션과 blur 헤더 감성을 가장 자연스럽게 이어가면서,
|
||
“제목/아이콘으로 방 목록”, “손잡이로 알림센터”라는 두 행동을 가장 덜 헷갈리게 분리합니다.
|
||
</section>
|
||
</main>
|
||
</body>
|
||
</html>
|