how2ice/ai-code-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: test deploy snapshot

Browse Source
This commit is contained in:
how2ice
2026-05-28 08:09:49 +09:00
parent e195ac8088
commit 983887dc05
30 changed files with 1730 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

709
public/resource/Codex Live/공유채팅/채팅방 헤더 재배치 제안/20260527/docs/chat-room-header-notification-preview.html Normal file
View File

@@ -0,0 +1,709 @@
<!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>

53
public/resource/Codex Live/공유채팅/채팅방 헤더 재배치 제안/20260527/docs/feature-spec.md Normal file
View File

@@ -0,0 +1,53 @@
# 공유채팅 채팅방 헤더 재배치 제안
## 목적
- 실제 공유채팅에서 사용하는 라이트 블루 테마를 유지한 채, 헤더를 방 선택과 알림센터 진입의 허브로 재구성한다.
- 채팅방 제목 또는 아이콘 선택 시 필터와 채팅방 목록을 함께 노출하고, 헤더 손잡이를 아래로 내리면 iOS 알림센터 같은 요약 대시보드와 알림 피드를 보여준다.
- 기존 기능은 유지하되, 설정/최소화/닫기 같은 툴 액션은 헤더 집중도를 해치지 않도록 보조 영역으로 정리한다.
## 현재 테마 확인 기준
- 공유채팅 카드 바디는 `#edf3fb → #e4edf8` 계열 세로 그라데이션과 얕은 inset border, soft shadow를 사용한다.
- 헤더 액션은 흰색 pill 버튼 위에 `#2563eb` 아이콘 포인트를 두고 hover 시 더 밝은 블루 계열로 반응한다.
- 헤더 배경은 반투명 흰색보다 한 단계 채도 낮은 블루톤이며 blur가 들어간다.
- 방 상태/요청 상태는 회색, 파랑, 초록, 빨강 계열 pill로 구분한다.
## 제안 방향 공통 원칙
- 헤더 1행은 현재 방 인지와 이동, 헤더 2행은 상태/필터/알림센터 진입으로 역할을 명확히 분리한다.
- 방 목록은 제목 또는 아이콘을 누르는 행위 하나로 열리도록 통합하고, 목록 안에서 필터 칩과 최근 대화 프리뷰를 동시에 보여준다.
- 알림센터는 현재 방 전용이 아니라 전체 채팅방과 apps 알림을 함께 집계한다.
- 손잡이 드래그는 모달보다 시스템 오버레이처럼 느껴지게 하고, 상단에는 다시보드형 요약 카드를 고정한다.
## 제안안 구성
### A안 Capsule Rail
- 제목 캡슐 자체가 방 목록 트리거다.
- 헤더 중앙 손잡이를 내려 알림센터를 여는 패턴으로 가장 직관적이다.
- 알림센터 상단은 처리중, 새 답변, apps 경고, 캘린더성 일정 같은 4분할 다시보드다.
### B안 Split Status Bar
- 좌측은 방 정보, 우측은 앱 알림과 빠른 전환 상태를 모은 split bar 구조다.
- 필터를 헤더 하단의 segment row로 남겨 자주 쓰는 상태 전환을 더 빠르게 한다.
- 데스크톱 확장성은 좋지만 모바일에서는 약간 더 촘촘해질 수 있다.
### C안 Focus Stack
- 방 아이콘과 제목을 한 덩어리 hero chip으로 키워 현재 방 인지를 강화한다.
- 알림센터 대시보드 카드를 더 크게 두고, 현재 처리중 요청 중심의 집중도를 높인다.
- 정보량이 많을 때보다 “현재 작업 집중” 상황에 적합하다.
## 유지되어야 할 기존 기능
- 방 이동
- 필터 전환
- 설정
- 최소화
- 닫기
- 현재 연결 상태 표시
- 현재 방 상태 요약
## 알림센터 추천 콘텐츠
- 상단 고정 다시보드: 처리중 요청 수, 읽지 않은 다른 채팅방, apps 경고/완료, 오늘 일정 또는 예약 작업
- 중단: 현재 방 진행 카드와 다른 방 새 답변 카드 혼합 피드
- 하단: 앱별 알림 묶음, 빠른 액션, 전체 읽음/필터 토글
## 검토 포인트
- 방 목록과 알림센터를 둘 다 헤더에 얹되 탭 충돌 없이 한 손 조작이 가능한지
- 모바일에서 드래그 손잡이와 브라우저 스크롤 제스처가 충돌하지 않는지
- 현재 존재하는 설정/최소화/닫기 액션을 보조 영역으로 빼도 발견 가능성이 유지되는지