Oregami
Repositories/oxedyne/daimond

oxedyne/daimond/www/guide/ko/interface.html

36.4 KiB, 51 runs

created by r2519314175:1255, which is this file's identity for as long as the history lasts, whatever it is later renamed to

download · who wrote it · its history

1<!DOCTYPE html>
2<html lang="ko" data-guide-locale="ko" data-guide-locales="en de es fr ja ko pt-BR zh-Hans">
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
6<title>인터페이스 — Daimond 사용 안내</title>
7<link rel="icon" type="image/svg+xml" href="../../assets/daimond_mark.svg">
8<link rel="stylesheet" href="../../css/variables.css">
9<link rel="stylesheet" href="../../css/guide.css">
10<style>
11/* The region map. On a phone the whole schematic scaled to the column width put
12 its labels at five pixels, which is a diagram that says nothing to the reader
13 who most needs it. It keeps a floor on its width and scrolls sideways inside
14 its own box instead: the page still never scrolls sideways, and the words can
15 still be read. The same treatment the widget map on social.html has, and the
16 floor is set from the same measurement -- 720px puts this map's smallest label
17 at the eleven rendered pixels that one's smallest label already gets, because
18 this map's smallest type is 9 units against that one's 10. */
19.diagram.scrolls { overflow-x: auto; }
20.diagram.scrolls svg { min-width: 720px; }
21</style>
22<script src="../frame.js"></script>
23<script src="search-index.js"></script>
24<script src="../search.js"></script>
25</head>
26<body>
27
28<header class="site-head">
29 <div class="site-head-inner">
30 <a class="brand" href="index.html" aria-label="Daimond 사용 안내, 홈">
31 <img class="wordmark wm-dark" src="../../assets/daimond_word.svg" alt="Daimond" translate="no">
32 <img class="wordmark wm-light" src="../../assets/daimond_word_dark.svg" alt="Daimond" translate="no">
33 <span class="brand-sub">안내</span>
34 </a>
35 <nav class="site-nav" aria-label="안내 페이지">
36 <a href="index.html">시작하기</a>
37 <a href="interface.html" aria-current="page">인터페이스</a>
38 <a href="models.html">모델 &amp; 크레딧</a>
39 <a href="chats-and-diamonds.html">채팅 &amp; Diamonds</a>
40 <a href="../capps.html">Capps</a>
41 <a href="email-web-files.html">메일, 웹 &amp; 파일</a>
42 <a href="accounts.html">계정</a>
43 <a href="sync.html">기기 간 동기화</a>
44 <a href="spending.html">지출</a>
45 <a href="../machine-operations.html">기기에서 명령 실행</a>
46 <a href="../social.html">소셜</a>
47 </nav>
48 </div>
49</header>
50
51<main>
52 <h1>인터페이스</h1>
53 <p class="lede">화면 한 바퀴: 세 구역과 저마다 하는 일이에요. 구역을 알고 나면 Daimond의 모든 것에 자리가 생겨요.</p>
54
55 <figure class="diagram scrolls">
56 <svg class="regionmap" viewBox="0 0 760 470" role="img" aria-labelledby="rm-title rm-desc" preserveAspectRatio="xMidYMid meet">
57 <title id="rm-title">Daimond 창의 이름 붙은 구역들</title>
58 <desc id="rm-desc">A schematic of the window. Across the top is the top bar. Below it, three zones side by side: the rail on the left (what you work on above a divider, the admin panel below it), the stage in the centre, holding the conversation and, beside it, from one to three more panels according to how wide the stage is, and the dock on the right (Email, Workspace and Agents).</desc>
59 <style>
60 .regionmap text { font-family: var(--font); }
61 .rm-win { fill: var(--bg-primary); stroke: var(--border-2); stroke-width: 1; }
62 .rm-bar { fill: var(--bg-tertiary); stroke: var(--border); stroke-width: 1; }
63 .rm-pan { fill: var(--bg-secondary); stroke: var(--border); stroke-width: 1; }
64 .rm-cell { fill: var(--bg-tertiary); stroke: var(--border); stroke-width: 1; }
65 .rm-name { fill: var(--accent); font-weight: 700; }
66 .rm-title{ fill: var(--text-secondary); font-weight: 600; }
67 .rm-sub { fill: var(--text-muted); }
68 .rm-fill { fill: var(--accent); }
69 .rm-soft { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1; }
70 .rm-rule { stroke: var(--accent); stroke-width: 2; }
71 .rm-div { stroke: var(--border-2); stroke-width: 1.5; }
72 .rm-divf { fill: var(--border-2); }
73 .rm-skel { fill: var(--text-muted); opacity: .30; }
74 </style>
75
76 <!-- window + top bar -->
77 <rect class="rm-win" x="10" y="10" width="740" height="450" rx="16"/>
78 <path class="rm-bar" d="M10,26 a16,16 0 0 1 16,-16 h708 a16,16 0 0 1 16,16 v30 h-740 z"/>
79 <!-- top-bar furniture: brand, name pill, panel chips, appearance menu -->
80 <rect class="rm-fill" x="30" y="27" width="12" height="12" rx="2" transform="rotate(45 36 33)"/>
81 <rect class="rm-skel" x="52" y="29" width="46" height="7" rx="3.5"/>
82 <rect class="rm-soft" x="118" y="22" width="98" height="22" rx="11"/>
83 <text class="rm-name" x="167" y="37" text-anchor="middle" font-size="12">상단 바</text>
84 <rect class="rm-cell" x="430" y="25" width="40" height="16" rx="8"/>
85 <rect class="rm-cell" x="478" y="25" width="34" height="16" rx="8"/>
86 <circle cx="716" cy="33" r="9" fill="none" stroke="var(--border-2)"/>
87 <path class="rm-fill" d="M716,24 a9,9 0 0 1 0,18 z" opacity=".5"/>
88
89 <!-- ── rail ───────────────────────────────────────────── -->
90 <rect class="rm-pan" x="22" y="66" width="196" height="382" rx="10"/>
91 <text class="rm-name" x="36" y="93" font-size="15">레일</text>
92 <text class="rm-sub" x="112" y="93" font-size="11">왼쪽</text>
93 <line class="rm-rule" x1="36" y1="100" x2="70" y2="100"/>
94 <text class="rm-title" x="36" y="120" font-size="10.5">하고 있는 일</text>
95 <!-- Diamonds -->
96 <text class="rm-sub" x="36" y="137" font-size="9" letter-spacing="1">DIAMONDS</text>
97 <text class="rm-sub" x="204" y="137" text-anchor="end" font-size="12">+</text>
98 <rect class="rm-cell" x="36" y="142" width="170" height="26" rx="6"/>
99 <rect class="rm-skel" x="44" y="149" width="70" height="6" rx="3"/>
100 <rect class="rm-soft" x="150" y="148" width="20" height="9" rx="4.5"/>
101 <rect class="rm-soft" x="174" y="148" width="28" height="9" rx="4.5"/>
102 <rect class="rm-cell" x="36" y="172" width="170" height="26" rx="6"/>
103 <rect class="rm-skel" x="44" y="179" width="58" height="6" rx="3"/>
104 <rect class="rm-soft" x="150" y="178" width="24" height="9" rx="4.5"/>
105 <!-- Chats -->
106 <text class="rm-sub" x="36" y="219" font-size="9" letter-spacing="1">채팅</text>
107 <rect class="rm-cell" x="36" y="224" width="170" height="18" rx="6"/>
108 <rect class="rm-skel" x="44" y="230" width="96" height="6" rx="3"/>
109 <!-- divider between the two halves of the rail -->
110 <line class="rm-div" x1="30" y1="258" x2="198" y2="258"/>
111 <rect class="rm-divf" x="106" y="255.5" width="16" height="5" rx="2.5"/>
112 <text class="rm-sub" x="36" y="274" font-size="9.5">칸막이 — 끌 수 있어요</text>
113 <!-- Admin panel -->
114 <text class="rm-title" x="36" y="294" font-size="10.5">관리 패널</text>
115 <g>
116 <rect class="rm-cell" x="36" y="300" width="170" height="15" rx="4"/>
117 <circle class="rm-fill" cx="46" cy="307.5" r="3" opacity=".55"/>
118 <rect class="rm-skel" x="56" y="304.5" width="66" height="6" rx="3"/>
119 <rect class="rm-skel" x="176" y="304.5" width="26" height="6" rx="3"/>
120 <rect class="rm-cell" x="36" y="320" width="170" height="15" rx="4"/>
121 <circle class="rm-fill" cx="46" cy="327.5" r="3" opacity=".55"/>
122 <rect class="rm-skel" x="56" y="324.5" width="54" height="6" rx="3"/>
123 <rect class="rm-skel" x="176" y="324.5" width="26" height="6" rx="3"/>
124 <rect class="rm-cell" x="36" y="340" width="170" height="15" rx="4"/>
125 <circle class="rm-fill" cx="46" cy="347.5" r="3" opacity=".55"/>
126 <rect class="rm-skel" x="56" y="344.5" width="72" height="6" rx="3"/>
127 <rect class="rm-skel" x="176" y="344.5" width="26" height="6" rx="3"/>
128 <rect class="rm-cell" x="36" y="360" width="170" height="15" rx="4"/>
129 <circle class="rm-fill" cx="46" cy="367.5" r="3" opacity=".55"/>
130 <rect class="rm-skel" x="56" y="364.5" width="60" height="6" rx="3"/>
131 <rect class="rm-skel" x="176" y="364.5" width="26" height="6" rx="3"/>
132 </g>
133
134 <!-- ── stage ──────────────────────────────────────────── -->
135 <rect class="rm-pan" x="228" y="66" width="300" height="382" rx="10"/>
136 <text class="rm-name" x="244" y="93" font-size="15">스테이지</text>
137 <text class="rm-sub" x="330" y="93" font-size="11">가운데</text>
138 <line class="rm-rule" x1="244" y1="100" x2="290" y2="100"/>
139 <text class="rm-title" x="244" y="119" font-size="10.5">채팅 — 나의 대화</text>
140 <text class="rm-sub" x="244" y="133" font-size="9.5">two to four seats, by width</text>
141 <rect class="rm-cell" x="244" y="146" width="196" height="30" rx="8"/>
142 <rect class="rm-skel" x="254" y="153" width="176" height="6" rx="3"/>
143 <rect class="rm-skel" x="254" y="164" width="120" height="6" rx="3"/>
144 <rect class="rm-soft" x="344" y="184" width="168" height="26" rx="8"/>
145 <rect class="rm-skel" x="354" y="194" width="148" height="6" rx="3"/>
146 <rect class="rm-cell" x="244" y="218" width="212" height="30" rx="8"/>
147 <rect class="rm-skel" x="254" y="225" width="192" height="6" rx="3"/>
148 <rect class="rm-skel" x="254" y="236" width="150" height="6" rx="3"/>
149 <!-- composer -->
150 <rect class="rm-cell" x="244" y="410" width="268" height="28" rx="8"/>
151 <rect class="rm-skel" x="256" y="421" width="150" height="6" rx="3"/>
152 <circle class="rm-fill" cx="498" cy="424" r="9"/>
153
154 <!-- ── dock ───────────────────────────────────────────── -->
155 <rect class="rm-pan" x="538" y="66" width="200" height="382" rx="10"/>
156 <text class="rm-name" x="552" y="93" font-size="15">독</text>
157 <text class="rm-sub" x="642" y="93" font-size="11">오른쪽</text>
158 <line class="rm-rule" x1="552" y1="100" x2="596" y2="100"/>
159 <!-- Email -->
160 <rect class="rm-cell" x="552" y="112" width="172" height="90" rx="8"/>
161 <text class="rm-title" x="564" y="131" font-size="11">메일</text>
162 <rect class="rm-skel" x="564" y="142" width="148" height="6" rx="3"/>
163 <rect class="rm-skel" x="564" y="156" width="120" height="6" rx="3"/>
164 <rect class="rm-skel" x="564" y="170" width="134" height="6" rx="3"/>
165 <rect class="rm-skel" x="564" y="184" width="96" height="6" rx="3"/>
166 <!-- Workspace -->
167 <rect class="rm-cell" x="552" y="210" width="172" height="90" rx="8"/>
168 <text class="rm-title" x="564" y="229" font-size="11">작업 공간</text>
169 <rect class="rm-skel" x="564" y="240" width="110" height="6" rx="3"/>
170 <rect class="rm-skel" x="576" y="254" width="120" height="6" rx="3"/>
171 <rect class="rm-skel" x="576" y="268" width="98" height="6" rx="3"/>
172 <rect class="rm-skel" x="564" y="282" width="88" height="6" rx="3"/>
173 <!-- Agents, with a mini tile that shows the chips -->
174 <rect class="rm-cell" x="552" y="308" width="172" height="132" rx="8"/>
175 <text class="rm-title" x="564" y="327" font-size="11">에이전트</text>
176 <rect class="rm-pan" x="562" y="336" width="152" height="96" rx="6"/>
177 <rect class="rm-skel" x="570" y="346" width="66" height="7" rx="3.5"/>
178 <circle class="rm-fill" cx="704" cy="350" r="4"/>
179 <rect class="rm-soft" x="570" y="362" width="50" height="12" rx="6"/>
180 <text class="rm-name" x="577" y="371" font-size="8">↳</text>
181 <rect class="rm-cell" x="626" y="362" width="26" height="12" rx="6"/>
182 <rect class="rm-cell" x="658" y="362" width="36" height="12" rx="6"/>
183 <rect class="rm-skel" x="570" y="384" width="128" height="6" rx="3"/>
184 <rect class="rm-skel" x="570" y="396" width="96" height="6" rx="3"/>
185 <rect class="rm-cell" x="570" y="410" width="52" height="13" rx="6"/>
186 <rect class="rm-cell" x="628" y="410" width="40" height="13" rx="6"/>
187 </svg>
188 <figcaption>이름 붙은 구역들. <strong>상단 바가</strong> 위를 가로질러요. 그 아래로 세 구역이 있어요. <strong>레일</strong> (왼쪽) — 칸막이 위에는 하고 있는 일, 아래에는 관리 패널. <strong>스테이지</strong> (centre) for the conversation and whatever you have opened beside it, two seats on a laptop and up to four on a wide screen; and the <strong>독</strong> (오른쪽)은 메일, 작업 공간, 에이전트를 담아요.</figcaption>
189 </figure>
190
191 <h2 id="s1">레일 — 왼쪽</h2>
192 <p>레일은 끌 수는 있어도 없앨 수는 없는 칸막이로 나뉘어요. 칸막이 위는 지금 하고 있는 일, 아래는 관리 패널이에요.</p>
193
194 <p> <span class="ui">전체</span> 행이 전부 위에 있어서, 한 번 누르면 Diamond도, 채팅도, 일꾼도, 메일함도, 페이지 가져오기도 붙잡아요. 그 불빛은 앱에 있는 다른 모든 불빛의 뿌리예요. 돈이 나갈 수 있는 것이 돌고 있으면 초록, 하나도 돌지 않으면 빨강, 그 사이면 호박빛이에요. 레일 자신을 닫는 버튼도 그 줄에 있고, 레일 전체를 대신 말하는 것은 이 줄뿐이에요.</p>
195
196 <div class="cards">
197 <div class="card">
198 <h3 id="s2">Diamonds</h3>
199 <p>내가 이어 가는 일들이에요. Diamond은 어떤 일에 대해 채팅이 알려 준 것을 담아 두니, 그 일의 다음 구간은 내가 아는 것에서 시작해요. 하나 추가할 때 누를 것은 <strong>+</strong> — 옆은 <strong>Diamonds</strong>. 그 옆 버튼은 Diamonds을 <strong>관계도</strong>로 그려 줘요. 쌓이면 태그를 붙이세요. <span class="ui">태그로 거르기</span> 행이 목록을 좁혀 줘요.</p>
200 </div>
201 <div class="card">
202 <h3 id="s3">채팅</h3>
203 <p>내 대화가 새것부터 놓여요. 시작할 때 누를 것은 <strong>+</strong> — 옆은 <strong>채팅</strong>. 어느 채팅이든 누르면 가운데로 돌아와요. <span class="ui">⋯</span> 은 <strong>+</strong> 옆에 있고, <span class="ui">모든 채팅 삭제</span>를 품고 있어요. 하나가 아니라 모든 채팅에 대한 조작이라, 채팅 타일에는 두지 않았어요.</p>
204 </div>
205 </div>
206 <p>두 목록 사이에는 칸막이가 하나 더 있어요. Diamonds은 쌓이는 것이라, 이것이 없으면 긴 목록이 채팅 타일을 아래로 밀어내 버렸어요. 끌면 어느 목록에든 자리를 줄 수 있고, 두 번 누르면 반반이 돼요. 어느 쪽도 아주 눌러 없앨 수는 없고, 이 배분은 다른 배치와 마찬가지로 기기마다 기억돼요.</p>
207
208 <p>Diamonds이 채팅 위에 있는 것은 땅이 생긴 모양 그대로예요. 아래 대화에서 캐고, 캐 올린 것은 그 위에서 깎이고 다듬어져요. 채팅은 날것, Diamond은 다듬은 것. 이 차례가 일이 어느 쪽으로 흐르는지를 한마디 설명 없이 말해 줘요. <strong>채팅이라는</strong> 말을 그대로 둔 것도 같은 까닭이에요. Diamond은 새로운 종류의 것이라 새 이름을 얻을 만하고, 대화는 흔한 것이라 흔한 말을 그대로 지녀요.</p>
209
210 <p>둘 다 빠짐없이 다룬 곳은 여기예요 — <a href="chats-and-diamonds.html">채팅 &amp; Diamonds</a>.</p>
211
212 <h3 id="s4">관리 패널</h3>
213 <p>칸막이 아래의 관리 패널은 기계의 상태를 한눈에 보여 줘요. 설정이 팝업이 아니라 여기 있으니, 그 옆에서 채팅이 살아 있어요. 앱 비밀번호가 뭐냐고 Daimond에게 물으면서, 그것을 묻는 칸을 화면에 그대로 둘 수 있죠. 손댈 수 있는 줄은 저마다 그 이름이 가리키는 것을 여는 버튼이에요.</p>
214 <ul>
215 <li> <strong>신원 줄</strong> (이 기기에서 내가 누구인지)옆에 설정 톱니가 있어요.</li>
216 <li><span class="ui">모델</span>. 연결한 제공자의 수를 세어 보여 주고, 모델 화면을 열어요.</li>
217 <li><span class="ui">크레딧</span>. 잔액을 보여 주고, 크레딧 화면을 열어요.</li>
218 <li><span class="ui">도구 · M개 중 N개</span>. 쓸 수 있는 도구가 몇인지 보여 주고, 도구 패널을 열어요.</li>
219 <li><span class="ui">버전</span>. 지금 돌리는 릴리스의 이름과 그것을 쓴 기간을 알려 주고, 아래의 릴리스 이력을 열어요.</li>
220 <li><strong>작업 공간 저장</strong>. 작업 공간이 있을 수 있는 자리마다 내 파일이 얼마나 공간을 쓰는지 보여 줘요.</li>
221 </ul>
222
223 <h3 id="s5">지금 돌리고 있는 버전</h3>
224 <p> <span class="ui">버전</span> 행은 빌드 번호가 아니라 이름과 지난 시간으로 읽혀요 (<span class="ui">버전 · Albany · 오늘</span>). 릴리스에는 서오스트레일리아의 지명이 알파벳 순으로 붙어서, 아무것도 찾아보지 않고 차례를 읽을 수 있어요. 이름이 표시하는 것은 <strong>이정표</strong>예요. Daimond은 하루에도 빌드를 여럿 내보내니, 하나하나에 이름을 붙이면 소음이 돼요. 줄에 포인터를 올리면 빌드 id와 낸 날짜가 나와요.</p>
225 <p>줄을 누르면 관리 패널에 <strong>릴리스 이력이</strong>이 열려요. 위에서부터 이렇게 읽어요.</p>
226 <ul>
227 <li><strong>예정된 것</strong>이 맨 먼저, 점선 테두리로.</li>
228 <li><strong>지금 돌리고 있는 빌드</strong>. 표시는 <span class="ui">지금 여기</span>.</li>
229 <li><strong>그 이전의 모든 빌드</strong>. 새것부터, 날짜와 무엇이 바뀌었는지 적은 한 줄, 빌드 id, 그리고 봉인된 기록 안에서의 자리가 함께 있어요.</li>
230 </ul>
231 <p>이건 앱 옆에 따로 둔 변경 기록이 아니에요. Daimond 자신의 배달 점검이 읽는, 공개된 기록이에요. 지금까지 내보낸 모든 빌드가 차례대로 놓이고, 부수지 않고는 다시 쓸 수 없는 사슬을 이뤄요. 한 줄짜리 메모는 그 사슬을 건드리지 않고 덧붙였어요. 그러니 지금 읽는 것은 주석이 붙은 역사이지, 다시 말한 이야기가 아니에요.</p>
232 <div class="note"><strong>예정 항목이 달라 보이는 것은 실제로 다르기 때문이에요.</strong> 빌드 id도 봉인 번호도 없고, 아직 만들어지지 않았으며 날짜도 약속하지 않았다고 말로 밝혀요. 그 아래는 모두 봉인되어 확인할 수 있어요. 의향의 표명은 그 어느 쪽도 아니니, 기록의 권위를 빌려서는 안 돼요.</div>
233 <p>예전 빌드로 돌아가는 길은 없어요. 붙잡아 둔 빌드는 너무 오래된 클라이언트와는 말하지 않겠다는 게이트웨이 자신의 거절에 부딪혀요. 이미 고친 보안 결함을 그대로 안고 있을 수도 있는데, 그 앱은 내 제공자 키와 신원과 패스키를 들고 있죠. 그리고 더 새로운 로컬 자료를 만나면 잘못 읽을 위험이 있어요. 바뀐 게 싫다는 말에는 그 변경 자리에서 답해요. 무엇이 바뀌었는지 또렷이 말하는 것, 이 메모가 하는 일이 그거예요.</p>
234
235 <h3 id="s6">업데이트가 오는 방식</h3>
236 <p>Daimond은 스스로 업데이트해요. 내려받을 것은 없어요. 돌고 있는 탭이 더 새 빌드를 알아채고 그리로 다시 읽어 들여요. 다시 읽어도 잃는 것은 없어요. 켤 때마다 내 작업이 내구성 저널에서 복구되기 때문이에요.</p>
237 <p>물음은 <em>언제</em> 뿐이에요. 보통의 업데이트는 조용한 때를 기다려요 — 탭이 뒤에 있을 때, 또는 십 분쯤 손대지 않았을 때 — 돌고 있는 턴이나 반쯤 쓴 메시지 위로는 결코 다시 읽지 않아요. 위쪽 버튼 옆의 칩이 하나가 준비된 때를 알려 줘요. 누르면 그 자리에서 업데이트를 받아요.</p>
238 <p>기다릴 수 없는 업데이트도 있어요. 어떤 변경으로 낡은 탭이 더는 서버와 함께 일하지 못하게 되면, 서버가 그 탭을 거절하고, 탭은 스스로 지금 버전으로 다시 읽어 들여요. 그때도 돌고 있는 턴을 끊지 않고, 문장 한가운데서 다시 읽는 대신 마지막 키 입력 뒤 잠깐 기다려요. 버전을 거절할 길은 없어요. 내가 남길 앱은 같은 사람들의 같은 앱이고, 브라우저는 어제의 빌드를 오늘의 서버에 맞대어 돌릴 수 없으니까요.</p>
239
240 <h2 id="s7">스테이지 — 가운데</h2>
241 <p>The stage is the middle zone. Its occupants sit side by side and never dock at the right, so you never leave the conversation to do a thing: read the message, watch the page, read the document beside the pages it was typeset into, with the daimon still there to be asked about any of it.</p>
242
243 <p>How many seats there are is decided by <strong>how wide the stage is</strong>, not by a fixed number: two at the narrowest, four at the widest, and one more for roughly every 380 pixels, which is where a line of prose still holds about 45 characters. Four of them want around 1550 pixels of stage, so they are for a large monitor; a laptop usually gets two or three. Two is the floor whatever the width, because the whole point of the stage is that whatever you are attending to opens <em>— 옆은</em> the conversation rather than over it.</p>
244
245 <p>Narrow the window and the rightmost seat closes, the one you opened most recently first. The conversation is never the one to go. Widening again does not bring the panel back: a panel that reappeared because a window grew would be one you never asked for, with no way to tell it not to, and getting it back is one click on its chip. Ask for a panel when every seat is taken and the guest that has been on the stage longest leaves instead, because you have just said which one you want.</p>
246
247 <div class="cards">
248 <div class="card">
249 <h3 id="s8">AI — 채팅</h3>
250 <p>daimon과 이야기하는 곳이에요. 여기 기본으로 있는 손님이고, 스테이지가 비려 할 때면 언제나 돌아와요. 내 메시지, 답, 그리고 도구 단계가 여기 나와요.</p>
251 </div>
252 <div class="card">
253 <h3 id="s9">웹</h3>
254 <p>웹 페이지를 보여 주거나 조작해요. 머리글에서 열거나, Daimond이 링크를 따라갈 때 열려요.</p>
255 </div>
256 <div class="card">
257 <h3 id="s10">문서</h3>
258 <p>A file as its characters, given room to read it and to edit it. Its header carries the paperclip that attaches what you are reading to what you are working on.</p>
259 </div>
260 <div class="card">
261 <h3 id="s11">Preview</h3>
262 <p>What a file looks like, as against what it says: a compiled PDF, a picture, or the typeset pages of a document as you write it. It is a panel of its own so that a source and its pages can be on screen at once, which is why the stage grew past two seats.</p>
263 </div>
264 <div class="card">
265 <h3 id="s12">메시지</h3>
266 <p>메일 한 통. 메일에서 열어 채팅 옆에서 읽어요.</p>
267 </div>
268 <div class="card">
269 <h3 id="s13">도구</h3>
270 <p>Daimond이 할 수 있는 일, 그리고 나머지는 얼마인지. 여는 곳은 <span class="ui">도구</span> 행이에요.</p>
271 </div>
272 <div class="card">
273 <h3 id="s14">작성</h3>
274 <p>메일 메시지를 써요. 여기서 저절로 보내지는 것은 없어요. <span class="ui">보내기</span> 버튼만 메일을 회선에 올리고, 누를 수 있는 사람은 나뿐이에요.</p>
275 </div>
276 <div class="card">
277 <h3 id="s15">관계도</h3>
278 <p>내 Diamonds과 그 사이의 링크를 그려요. Diamonds 머리에 있는 관계도 버튼에서 열고, 거기서 다시 늘어놓거나 새 링크를 그을 수도 있어요.</p>
279 </div>
280 <div class="card">
281 <h3 id="s16">터미널</h3>
282 <p>내 기기에 있는 진짜 터미널이고, 명령이 도는 것과 같은 칸 안에 있어요. 자세한 것은 <a href="../machine-operations.html">기기에서 명령 실행</a>.</p>
283 </div>
284 </div>
285
286 <p>스테이지 손님은 저마다 머리글에 닫기 버튼을 가지고 있어요. 닫은 패널은 사라지지 않아요. 칩은 상단 바에 채워지지 않은 모습으로 남고, 칩을 누르면 돌아와요.</p>
287
288 <h2 id="s17">독 — 오른쪽</h2>
289 <p>독은 내가 끌어오는 원천을 담아요. 하나를 닫아도 칩은 상단 바에 남고, 칩을 누르면 다시 들어와요. 독을 어떻게 나눌지, 그러니까 한 번에 패널을 몇 개 담을지는 <strong>독 분할</strong> 항목에서 정해요. 아래에서 설명해요.</p>
290
291 <div class="cards">
292 <div class="card">
293 <h3 id="s18">메일</h3>
294 <p>내 메일함과 그 안에 든 것. 메일함을 추가하고, 동기화하고, 메시지를 스테이지에 열어요.</p>
295 </div>
296 <div class="card">
297 <h3 id="s19">작업 공간</h3>
298 <p>내 파일을 평범한 나무로. 에이전트의 파일 도구가 여기를 읽고 써요.</p>
299 </div>
300 <div class="card">
301 <h3 id="s20">에이전트</h3>
302 <p>돌고 있는 에이전트 실행을 일어나는 그대로. 몇이 일하고 있는지 수도 나와요.</p>
303 </div>
304 <div class="card">
305 <h3 id="s21">지출</h3>
306 <p>무엇에 얼마를 썼는지. 자세한 곳은 <a href="spending.html">지출</a>.</p>
307 </div>
308 <div class="card">
309 <h3 id="s22">대기</h3>
310 <p>daimon이 청해 놓고 기다리는 것들이에요. 줄은 우선순위로도 나이로도 정렬할 수 있고, 답은 <span class="ui">실행</span>, <span class="ui">먼저 상의</span> 또는 <span class="ui">버리기</span>.</p>
311 </div>
312 <div class="card">
313 <h3 id="s23">휴지통</h3>
314 <p>지운 채팅과 Diamonds이에요. 서른 날 동안 보관되고, 내 어느 기기에서든 되돌릴 수 있어요. 자세한 것은 <a href="chats-and-diamonds.html">채팅 &amp; Diamonds</a>.</p>
315 </div>
316 </div>
317
318 <h2 id="s24">상단 바</h2>
319 <p>위쪽에는 워드마크, <strong>패널 칩</strong>이 놓이고, 오른쪽 끝에는 <strong>다른 기기 연결</strong> 버튼, <strong>About</strong> 대화상자, 이 <strong>안내서</strong>, 그리고 <strong>모양과 배치</strong> 메뉴가 있어요. 새 빌드가 나오면 그 옆에 칩이 하나 나타나요.</p>
320
321 <h3 id="s25">칩</h3>
322 <p>패널에는 모두 칩이 있어요. 열려 있든 닫혀 있든 있고, 누르면 그 패널이 켜지고 꺼져요. 열린 패널의 칩은 채워져 있으니, 이 줄은 화면에 무엇이 있는지 보여 주는 지도로 읽혀요. 닫힌 패널만 칩을 가졌다면, 앱이 가장 비었을 때 줄이 가장 길어지고, 하나 쓸 때마다 칩이 옆으로 밀렸을 거예요. 자리를 지키는 칩이라야 그 자리를 익힐 수 있죠. (에이전트는 <em>모든</em>이라는 말의 예외예요. 첫 에이전트가 돌기 전까지는 비켜 있어요.)</p>
323 <p>칩은 구역별로 묶여 있어요. 레일, 스테이지, 독 순서이고, 사이에는 가는 칸막이가 들어가며, 화면에서 구역이 놓인 차례 그대로예요. 그래서 칩은 그것이 여는 패널이 나타날 쪽에 있어요. 뜻을 지닌 표시가 둘 있어요.</p>
324 <ul>
325 <li>닫힌 스테이지 칩 가운데, 그 패널이 <strong>displace a guest already on the stage</strong> is drawn with a dashed outline. It appears only when every seat is taken, which depends on the width, so the same chip is plain on a wide screen and dashed on a narrow one. The chat keeps its seat and the guest that has been there longest leaves. It warns without refusing, and it is an outline and not an added mark so the chip keeps its width and its neighbours stay put.</li>
326 <li>닫힌 독 칩은 <strong>독이 가득 찼을 때 회색이 돼요</strong>. 툴팁이 고치는 길을 가리켜요. 모양 메뉴에서 분할을 더 크게 하거나, 독 패널 하나를 닫는 거예요.</li>
327 </ul>
328
329 <h3 id="s26">고정한 패널과 패널 모음</h3>
330 <p>상단 바에 어떤 칩을 둘지는 내가 정해요. 어떤 패널이든 <strong>고정할 수</strong> 있고 풀 수도 있어요. 푼 것들은 줄 끝의 <span class="ui">⋯</span> 칩 뒤에 들어가고, 거기 몇 개가 있는지 수가 붙어요. 누르면 <strong>패널 모음</strong>이 열려요: 있는 모든 패널이 이름으로 검색되고, 구역별로 묶이고, 줄마다 고정 조작과 그 패널이 열려 있는지가 붙어요. 줄을 누르면 칩처럼 패널이 열리거나 닫혀요.</p>
331 <p>이 줄이 빠짐없지 않아도 되는 것은 패널 모음이 빠짐없기 때문이에요. 자주 쓴다고 순위가 매겨지지도 않아요. 스스로 차례를 바꾸는 줄은, 자리가 고정되어야 자라는 몸의 기억을 부숴 버리니까요.</p>
332
333 <h3 id="s27">명령 팔레트</h3>
334 <p><kbd>Ctrl</kbd> <kbd>K</kbd>, <kbd>Cmd</kbd> <kbd>K</kbd> (Mac에서는) 를 누르면, 치는 것만으로 어떤 패널이나 설정에도 닿는 검색 칸이 열려요. 결과 사이는 화살표 키로 옮기고, <span class="ui">Enter</span> 로 고른 것을 실행하고, <span class="ui">Esc</span> 로 닫아요. 늘어서는 것은 패널, 팔레트, 네 가지 글자 크기, 독 분할, 언어, 통화, 그리고 권한 모드예요. 칩이 보이는 패널로 가는 가장 빠른 길은 결코 아니고, 패널이 몇이든 빠짐없이 남는 길이에요.</p>
335
336 <h3 id="s28">키보드로, 귀로</h3>
337 <p>Daimond은 마우스 없이도 몰 수 있어요. <span class="ui">Tab</span> 은 그려진 차례대로 조작을 옮겨 다니고, <span class="ui">Enter</span> 또는 <span class="ui">Space</span> 는 지금 있는 조작을 눌러 주고, <span class="ui">Esc</span> 는 열려 있는 것을 닫아요. 어떤 대화상자든 메뉴든 시트든 모서리에 가위표가 있고, 같은 방식으로 만든 하나의 조작이며, 휴대폰에서 엄지에 맞는 크기예요.</p>
338 <p>지금 어디에 있는지는 조작의 <em>바깥에</em> 테두리에서 떨어져 선 고리로 그려요. 예전처럼 조작 자신의 테두리 변화로 그리면, 고리는 쉬고 있을 때의 테두리가 거의 보이지 않을 때만 읽혀요. 테두리를 보이게 했다면 모든 팔레트에서 초점 고리가 한꺼번에 사라졌겠죠. 뒤에 있는 면을 바탕으로 그린 고리는 그 폭 전체에서 살아남아요. 열한 팔레트 모두에서 재어 보니, 가장 옅은 고리도 기준이 요구하는 대비의 네 배 반이에요.</p>
339 <p>특히 두 곳이에요.</p>
340 <ul>
341 <li><strong>메일은 키보드만으로 온전히 다룰 수 있어요.</strong> 메일함도, 폴더도, 초안도, 메시지도 닿아서 누를 수 있는 조작이지, 누르기에만 답하는 줄이 아니에요. 지금 있는 메일함과 읽고 있는 폴더는 현재의 것으로 알려지니, 화면 낭독기는 거기 무엇이 있는지만이 아니라 내가 어디에 있는지도 말해 줘요.</li>
342 <li><strong>대화상자는 초점을 제 안에 붙들어 둬요</strong> . 열려 있는 동안 그렇고, 닫을 때는 그것을 연 쪽으로 초점을 돌려줘요. 탭 이동이 화면을 덮은 창 뒤로 흘러가지 않고, 닫았다고 페이지 맨 위로 떨어뜨리지도 않아요.</li>
343 </ul>
344 <p>화면 낭독기에서는 답이 <strong>도착했을 때 한 번만</strong> 알려져요 — “Daimond이 답했어요, 120 단어” — 쓰이는 대로가 아니고요. 라이브 영역은 바뀔 때마다 읽히니, 흘러오는 답은 모델이 계속 쓰는 내내 조각조각 읽혀요. 사람들은 그걸 꺼 버리죠. 그리고 알림이 꺼진 앱은 답할 수 있어 보이지만 답하지 못해요. 턴마다 한 문장은 적지만, 쓸 수 있어요.</p>
345 <p>창에는 이름 붙은 구역과 진짜 제목이 두루 있어서, 화면 낭독기가 가진 표지 목록이 그대로 앱의 차례가 돼요. 닿지 못하거나 듣지 못하는 것이 있다면 그건 한계가 아니라 결함이에요. 그렇게 말해 주세요.</p>
346
347 <h3 id="s29">모양과 배치</h3>
348 <p>오른쪽 위 버튼은 Daimond이 무엇을 하는지가 아니라 어떻게 보이고 어떻게 앉는지에 대한 선택을 모아 둔 메뉴 하나를 열어요.</p>
349 <ul>
350 <li><strong>보기</strong>: <span class="ui">심플</span> 또는 <span class="ui">최대</span>. 심플은 저마다 이름과 돌고 있는지만 보여 주고, 나머지는 모두 한 번 누르면 나오게 둬요. 최대는 모델과 비용과 컨텍스트를 옆에 붙이니, 둘 다 열지 않고도 견줄 수 있어요. 인터페이스의 모양도 이것이 함께 정해요. 가장 빽빽한 밀도에 널찍한 모양이라는 짝은 아무도 원하지 않으니까요. 타일 자신의 톱니는 그 타일에 대해서는 여전히 이보다 앞서요.</li>
351 <li><strong>테마</strong>, 세 묶음에 팔레트 열하나예요. <span class="ui">밝게</span>, <span class="ui">중간</span> 그리고 <span class="ui">어둡게</span>. 묶음은 찾는 방법이고, 그 안에서는 취향껏 고르면 돼요. 다만 <span class="ui">호박빛</span>만은 그리는 모든 것에서 파란빛을 빼요. 밤늦게 읽기 위한 거예요. 이 안내서는 Daimond 안에서 보일 때 앱이 입은 팔레트를 그대로 입어요.</li>
352 <li><strong>글자 크기</strong>: 네 단계, <span class="ui">작게</span>, <span class="ui">기본</span>, <span class="ui">크게</span> 그리고 <span class="ui">더 크게</span>. 바뀌는 것은 글자뿐이에요. 틀도, 여백도, 패널 너비도 그대로예요. 이건 읽기를 위한 조작이지 확대가 아니니까요. 인터페이스 전체를 크게 하려면 브라우저 자체의 확대를 쓰세요. 메뉴의 보기는 고르려는 크기로 짜여 있으니, 조작이 변화를 말로 부르는 대신 보여 줘요.</li>
353 <li><strong>독 분할</strong>: <span class="ui">자동</span>, <span class="ui">1</span> 열, <span class="ui">2×2</span>, <span class="ui">2×3</span> 또는 <span class="ui">3×2</span>, 저마다 고르는 격자 모양으로 그려져요. 분할은 <em>독이 패널을 몇 개나 담을 수 있는지</em>를 열 곱하기 행으로 정해요. 한 열이면 넷, 2 × 2도 넷, 2 × 3이나 3 × 2면 여섯이에요. <span class="ui">자동</span> 는 창이 정하게 두고, 두 번째 열이 들어갈 자리가 생기면 두 열로 가요. 더 작은 격자로 바꾸면 들어가지 못하게 된 패널부터 닫혀요. 가장 최근에 연 것이 먼저이고, 저마다 보이고 누를 수 있는 칩으로 돌아가요.</li>
354 <li><strong>언어</strong> 그리고 <strong>통화</strong>: Daimond이 말하는 언어와, 금액을 보여 주는 단위예요. 아직 표가 없는 언어는 영어로 남고, 표시가 어떻든 청구는 늘 미국 달러예요.</li>
355 </ul>
356
357 <h3 id="s30">배치를 Diamond과 함께 남기기</h3>
358 <p>Diamond을 고른 상태에서 모양 메뉴는 지금의 패널 배치를 그 Diamond과 함께 남기겠느냐고 물어요. 이미 저장한 것을 새로 고치거나 잊게 할 수도 있고요. 그 Diamond을 다시 열면 배치가 돌아오니, 일로 돌아가는 것이 패널을 손으로 다시 짜는 일이 되지 않아요. 저장은 부탁했을 때만 되고, 짐작하지도 뒤에서 하지도 않아요. 말없이 패널을 닫는 전환은 일이 사라진 것처럼 읽히니까요.</p>
359
360 <h2 id="s31">좁은 화면에서는</h2>
361 <p>전화 너비보다 좁아지면 칩과 갤러리는 전화 셸에 자리를 내주고, 더 좁은 자리에서 같은 물음에 답합니다. 채팅이 바닥이고, 패널은 그 위로 끌어 올릴 수 있는 시트로 떠오르며, 레일은 왼쪽 위 버튼으로 여는 서랍이 됩니다. 아래쪽 줄은 같은 칩 줄이며, 옆으로 스크롤됩니다. 모든 패널이 거기에 칩을 가지며, 순서는 큰 화면에서 구역이 놓이는 순서 그대로입니다. 채워진 칩은 지금 보고 있는 것이지 열려 있는 모든 것이 아닙니다. 전화에서는 한 번에 하나만 보이기 때문입니다. 그리고 칩은 전환하는 것이 아니라 그곳으로 데려갑니다. 닫는다면 화면 전체를 닫는 셈이기 때문입니다. 관리 패널은 서랍 아래쪽에서 닿습니다. 잃는 것은 없습니다. 같은 패널을 한 번에 하나씩 보여 줄 뿐입니다.</p>
362 <p>홈 화면에 넣으면 Daimond은 브라우저 장식 없는 저만의 창에서 돌고, 노치와 홈 인디케이터를 피해 자리를 잡아요. 같은 페이지이고 저장된 작업도 같으니, 그리로 옮겨야 할 것은 없어요.</p>
363
364 <div class="next">
365 <a href="index.html">&larr; 시작하기</a>
366 <a href="models.html">다음: 모델 &amp; 크레딧 &rarr;</a>
367 </div>
368</main>
369
370<footer class="site-foot">
371 <span>Daimond은 내 브라우저에서 돌아요. 여기 있는 어떤 것도 저희에게 보내지지 않아요.</span>
372 <nav aria-label="안내 페이지">
373 <a href="index.html">시작하기</a>
374 <a href="interface.html">인터페이스</a>
375 <a href="models.html">모델</a>
376 <a href="chats-and-diamonds.html">채팅 &amp; Diamonds</a>
377 <a href="../capps.html">Capps</a>
378 <a href="email-web-files.html">메일, 웹 &amp; 파일</a>
379 <a href="accounts.html">계정</a>
380 <a href="sync.html">기기 간 동기화</a>
381 <a href="spending.html">지출</a>
382 <a href="../machine-operations.html">기기에서 명령 실행</a>
383 <a href="../social.html">소셜</a>
384 </nav>
385</footer>
386</body>
387</html>