ttipo/arasystem
1
0
Fork 0
generated from ttipo/project-base
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 휴대폰 앱을 스토어 없이 사내에 나눠 주는 받기 화면 · API · 운영 도구 · 앱 서명 #22

Merged
ttipo merged 7 commits from feat/app-distribution into main 2026-11-09 09:45:52 +09:00
Conversation 0 Commits 7 Files Changed 85
+620 -8
3 changed files with 620 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 178a53fd6f - Show all commits
docs/design/webmail/App1Push.dc.html
+17 -5
View File
@@ -199,7 +199,7 @@ a{color:#0E7C86}a:hover{color:#0A5F67}
<div style="flex: 0 0 828px; display: flex; flex-direction: column; gap: 12px">
<div style="height: 62px; display: flex; flex-direction: column; gap: 2px">
<h3 style="margin: 0; height: 20px; font-size: 13px; line-height: 20px; font-weight: 700; color: #344054">4. 설정 › 새 메일 알림 줄</h3>
<p style="margin: 0; font-size: 12.5px; line-height: 20px; color: #667085; word-break: keep-all">설정 탭의 다른 칸과 로그아웃 확인 창은 App1Shell 그대로입니다. 알림 줄만 상태마다 그렸습니다. 왼쪽은 스위치를 누를 수 있는 상태, 오른쪽은 누를 수 없는 상태입니다.</p>
<p style="margin: 0; font-size: 12.5px; line-height: 20px; color: #667085; word-break: keep-all">설정 탭의 다른 칸과 로그아웃 확인 창은 App1Shell 그대로이고, 앱 정보 절에만 [새 버전 받기] 줄을 더했습니다. 알림 줄만 상태마다 그렸습니다. 왼쪽은 스위치를 누를 수 있는 상태, 오른쪽은 누를 수 없는 상태입니다.</p>
</div>
<div style="display: flex; gap: 48px; align-items: flex-start">
<div style="flex: 0 0 390px; display: flex; flex-direction: column; gap: 18px">
@@ -234,6 +234,18 @@ a{color:#0E7C86}a:hover{color:#0A5F67}
<p style="margin: 0; font-size: 13px; line-height: 20px; color: #667085; word-break: keep-all"><b style="font-weight: 700; color: #344054">설정을 열지 못했을 때</b> · [설정 열기]를 누른 뒤 뜨는 알림</p>
<div role="status" style="margin: 0 12px; display: flex; align-items: center; min-height: 52px; box-sizing: border-box; padding: 12px 16px; border-radius: 10px; background: #0B3640; color: #FFFFFF; font-size: 14.5px; line-height: 1.5; box-shadow: 0 10px 28px rgba(16, 24, 28, 0.22); word-break: keep-all">휴대폰 설정을 열지 못했습니다. 휴대폰의 [설정] 앱에서 ARA SYSTEM을 찾아 알림을 켜 주세요.</div>
</div>
<div style="display: flex; flex-direction: column; gap: 6px">
<p style="margin: 0; font-size: 13px; line-height: 20px; color: #667085; word-break: keep-all"><b style="font-weight: 700; color: #344054">앱 정보 절</b> · 새로 더한 [새 버전 받기]는 업데이트 화면의 단추처럼 브라우저로 포털의 휴대폰 받기 화면을 엽니다</p>
<section aria-labelledby="about-h" style="padding-bottom: 8px; border-radius: 16px; overflow: hidden; background: #FFFFFF; box-shadow: 0 0 0 1px #D0D5DD, 0 4px 12px rgba(16, 24, 28, 0.06)">
<h4 id="about-h" style="margin: 0; padding: 18px 20px 6px; font-size: 13px; font-weight: 600; color: #667085">앱 정보</h4>
<div style="display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; box-sizing: border-box; padding: 0 20px">
<span style="font-size: 15.5px">앱 버전</span>
<span style="font-size: 14px; color: #667085; font-variant-numeric: tabular-nums">1.0.0</span>
</div>
<button type="button" style="width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; box-sizing: border-box; padding: 0 12px 0 20px; border: 0; background: transparent; font: inherit; font-size: 15.5px; color: #171C26; text-align: left; cursor: pointer"><span>새 버전 받기</span><span aria-hidden="true" style="display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; color: #667085"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg></span></button>
<button type="button" style="width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; box-sizing: border-box; padding: 0 12px 0 20px; border: 0; background: transparent; font: inherit; font-size: 15.5px; color: #171C26; text-align: left; cursor: pointer"><span>오픈소스 라이선스</span><span aria-hidden="true" style="display: inline-flex; color: #667085"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="9 18 15 12 9 6"></polyline></svg></span></button>
</section>
</div>
</div>
<div style="flex: 0 0 390px; display: flex; flex-direction: column; gap: 18px">
<sc-for list="{{ notifyRight }}" as="c" hint-placeholder-count="4">
@@ -542,15 +554,15 @@ a{color:#0E7C86}a:hover{color:#0A5F67}
<main style="display: flex; flex-direction: column; gap: 20px; padding: 32px 20px 32px">
<div style="display: flex; flex-direction: column; gap: 10px">
<h1 style="margin: 0; font-size: 22px; line-height: 1.35; font-weight: 700; letter-spacing: -0.02em">앱을 업데이트해 주세요</h1>
<p style="margin: 0; font-size: 15px; line-height: 1.6; color: #4A5363; word-break: keep-all">지금 쓰는 버전으로는 로그인하거나 메일을 볼 수 없습니다. Play 스토어에서 ARA SYSTEM을 업데이트한 뒤 다시 열어 주세요.</p>
<p style="margin: 0; font-size: 15px; line-height: 1.6; color: #4A5363; word-break: keep-all">지금 쓰는 버전으로는 로그인하거나 메일을 볼 수 없습니다. 새 버전을 받아 설치한 뒤 다시 열어 주세요.</p>
</div>
<button type="button" style="display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border: 0; border-radius: 10px; background: #0E7C86; color: #FFFFFF; font: inherit; font-size: 15.5px; font-weight: 600; cursor: pointer"><span>Play 스토어 열기</span><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg></button>
<button type="button" style="display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border: 0; border-radius: 10px; background: #0E7C86; color: #FFFFFF; font: inherit; font-size: 15.5px; font-weight: 600; cursor: pointer"><span>새 버전 받기</span><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg></button>
<p style="margin: 0; font-size: 13.5px; color: #667085; font-variant-numeric: tabular-nums">지금 쓰는 버전 1.0.0</p>
<p style="margin: 0; padding-top: 16px; border-top: 1px solid #EEF0F3; font-size: 13.5px; line-height: 1.55; color: #667085; word-break: keep-all">Play 스토어에 업데이트가 보이지 않나요?<br><span style="color: #344054; font-weight: 500">IT 담당 홍길동 · 02-000-0000 · 사내 메신저 @it</span></p>
<p style="margin: 0; padding-top: 16px; border-top: 1px solid #EEF0F3; font-size: 13.5px; line-height: 1.55; color: #667085; word-break: keep-all">새 버전을 받거나 설치하기 어려우신가요?<br><span style="color: #344054; font-weight: 500">IT 담당 홍길동 · 02-000-0000 · 사내 메신저 @it</span></p>
</main>
</div>
<sc-if value="{{ updateFail }}" hint-placeholder-val="{{ false }}">
<div role="status" style="position: absolute; left: 12px; right: 12px; bottom: 16px; display: flex; align-items: center; min-height: 52px; box-sizing: border-box; padding: 12px 16px; border-radius: 10px; background: #0B3640; color: #FFFFFF; font-size: 14.5px; line-height: 1.5; box-shadow: 0 10px 28px rgba(16, 24, 28, 0.22); word-break: keep-all">Play 스토어를 열지 못했습니다. Play 스토어 앱을 직접 열어 ARA SYSTEM을 찾아 업데이트해 주세요.</div>
<div role="status" style="position: absolute; left: 12px; right: 12px; bottom: 16px; display: flex; align-items: center; min-height: 52px; box-sizing: border-box; padding: 12px 16px; border-radius: 10px; background: #0B3640; color: #FFFFFF; font-size: 14.5px; line-height: 1.5; box-shadow: 0 10px 28px rgba(16, 24, 28, 0.22); word-break: keep-all">브라우저를 열지 못했습니다. 휴대폰의 브라우저에서 portal.arasystem.it.kr/app에 들어가 새 버전을 받아 주세요.</div>
</sc-if>
</div>
</div>
docs/design/webmail/SettingsMobileApp.dc.html
+598
View File
@@ -0,0 +1,598 @@
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>설정 · 휴대폰 앱 · 앱 받기 화면</title>
<script src="./support.js"></script>
</head>
<body>
<x-dc>
<helmet>
<style>
@font-face{font-family:'Pretendard';src:url('/_blob/16067b9aa5137abf808e3dbef30c42e0') format('woff2-variations'),url('/_blob/16067b9aa5137abf808e3dbef30c42e0') format('woff2');font-weight:45 920;font-style:normal;font-display:swap}
body{margin:0}
a{color:#0E7C86}a:hover{color:#0A5F67}
:focus-visible{outline:2px solid #0E7C86;outline-offset:2px}
.primary{background:#0E7C86;color:#FFFFFF}
.primary:hover{background:#0A5F67;color:#FFFFFF}
.menu-link{color:#344054}
.menu-link:hover{background:#EEF0F3}
</style>
</helmet>
<div style="width: 1440px; height: 3209px; box-sizing: border-box; display: flex; flex-direction: column; background: #F6F7F9; color: #171C26; font-family: Pretendard, -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif; font-size: 13px; line-height: 1.5; word-break: keep-all; overflow-wrap: anywhere">
<div style="flex: 0 0 auto; box-sizing: border-box; padding: 40px 48px 0; display: flex; flex-direction: column; gap: 18px">
<div style="display: flex; flex-direction: column; gap: 6px; max-width: 1100px">
<h1 style="margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -0.02em">설정 · 휴대폰 앱 · 앱 받기 화면</h1>
<p style="margin: 0; font-size: 13.5px; color: #4A5363">안드로이드 앱은 스토어에 올리지 않고, 웹메일에 로그인한 직원만 받게 합니다. 위 A는 PC에서 여는 설정 › 계정 › 휴대폰 앱이고, 아래 B는 휴대폰 브라우저로 여는 받기 화면(/app)입니다. 단추로 상태를 바꿔 볼 수 있습니다. 예시 값은 버전 1.0.0 · 올린 날 2026년 11월 18일 · 크기 31 MB입니다. 초안이며 사용자 확인 전입니다(2026-11-08).</p>
</div>
<div style="display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px">
<span id="contact-modes-label" style="font-size: 13.5px; font-weight: 700; color: #344054">문의 연락처</span>
<div role="group" aria-labelledby="contact-modes-label" style="display: flex; gap: 8px">
<sc-for list="{{ contactModes }}" as="s" hint-placeholder-count="2">
<button type="button" aria-pressed="{{ s.pressed }}" onClick="{{ s.pick }}" style="flex: 0 0 auto; min-width: 152px; min-height: 44px; box-sizing: border-box; padding: 0 16px; border: 1px solid {{ s.border }}; border-radius: 10px; background: {{ s.bg }}; color: {{ s.fg }}; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer">{{ s.label }}</button>
</sc-for>
</div>
<span style="font-size: 12.5px; color: #667085">A2 · B1 · B2 · B3의 문의 줄이 함께 바뀝니다. 연락처는 운영 도구로 넣는 값이고, 보드의 연락처는 자리 표시입니다.</span>
</div>
</div>
<section aria-labelledby="sec-a-h" style="flex: 0 0 auto; box-sizing: border-box; padding: 36px 48px 16px; display: flex; flex-direction: column; gap: 12px">
<div style="display: flex; align-items: baseline; gap: 16px">
<h2 id="sec-a-h" style="margin: 0; font-size: 19px; line-height: 28px; font-weight: 700; color: #0B3640; white-space: nowrap">A. 설정 › 계정 › 휴대폰 앱 (PC)</h2>
<p style="margin: 0; font-size: 13.5px; color: #4A5363">계정 묶음에서 메일 프로그램 연결 바로 다음에 둡니다. 주소는 /settings/account/mobile-app, 탭 제목은 휴대폰 앱입니다.</p>
</div>
<div style="display: flex; align-items: center; gap: 16px">
<div role="group" aria-label="설정 화면 상태 고르기" style="display: flex; gap: 8px">
<sc-for list="{{ settingsModes }}" as="s" hint-placeholder-count="2">
<button type="button" aria-pressed="{{ s.pressed }}" onClick="{{ s.pick }}" style="flex: 0 0 auto; min-width: 200px; min-height: 44px; box-sizing: border-box; padding: 0 16px; border: 1px solid {{ s.border }}; border-radius: 10px; background: {{ s.bg }}; color: {{ s.fg }}; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer">{{ s.label }}</button>
</sc-for>
</div>
<div style="display: flex; flex-direction: column; gap: 1px">
<h3 style="margin: 0; font-size: 13px; font-weight: 700; color: #344054">{{ aStateTitle }}</h3>
<p style="margin: 0; font-size: 12.5px; color: #667085">{{ aStateNote }}</p>
</div>
</div>
</section>
<div id="board-pc" role="region" aria-label="{{ aRegionLabel }}" style="flex: 0 0 auto; height: 900px; box-sizing: border-box; display: flex; background: #FFFFFF; border-top: 1px solid #E6E8EC; border-bottom: 1px solid #E6E8EC; overflow: hidden">
<nav aria-label="사내 시스템" style="flex: 0 0 72px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 10px 0 12px; background: #0B3640">
<a href="Main.dc.html" style="display: inline-flex; align-items: center; justify-content: center; width: 60px; min-height: 44px; border-radius: 10px; text-decoration: none">
<img src="/_blob/2b9ef4349333debc969432c859eaf1bf" alt="ARA SYSTEM" width="48" height="17" style="display: block; width: 48px; height: auto">
</a>
<ul style="list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px">
<li>
<a href="Main.dc.html" style="display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 60px; min-height: 56px; border-radius: 10px; font-size: 11px; text-decoration: none; color: #A3C2C6; font-weight: 500">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
<span>메일</span>
</a>
</li>
<li>
<a href="#" style="display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 60px; min-height: 56px; border-radius: 10px; font-size: 11px; text-decoration: none; color: #A3C2C6; font-weight: 500">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
<span>캘린더</span>
</a>
</li>
<li>
<a href="#" style="display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 60px; min-height: 56px; border-radius: 10px; font-size: 11px; text-decoration: none; color: #A3C2C6; font-weight: 500">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>
<span>파일</span>
</a>
</li>
<li>
<a href="Contacts.dc.html" style="display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 60px; min-height: 56px; border-radius: 10px; font-size: 11px; text-decoration: none; color: #A3C2C6; font-weight: 500">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
<span>주소록</span>
</a>
</li>
</ul>
<a href="Settings.dc.html" aria-current="page" style="margin-top: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 60px; min-height: 56px; border-radius: 10px; font-size: 11px; text-decoration: none; background: #155A64; color: #FFFFFF; font-weight: 600">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
<span>설정</span>
</a>
</nav>
<div style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column">
<header style="display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; box-sizing: border-box; min-height: 56px; padding: 6px 12px 6px 20px; border-bottom: 1px solid #E6E8EC">
<span style="font-size: 16px; font-weight: 700; letter-spacing: -0.01em">설정</span>
<div style="flex: 1 1 280px; max-width: 520px; display: flex; align-items: center; gap: 8px; box-sizing: border-box; height: 40px; padding: 0 12px; border: 1px solid #8A94A3; border-radius: 8px; background: #FFFFFF">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#667085" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
<input type="search" aria-label="통합 검색" placeholder="통합 검색" style="flex: 1 1 auto; min-width: 0; border: 0; background: transparent; font: inherit; color: #171C26">
</div>
<div style="margin-left: auto; display: flex; align-items: center; gap: 10px">
<span aria-hidden="true" style="display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: #E3F2F3; color: #0A5F67; font-size: 13px; font-weight: 600">김</span>
<div style="display: flex; flex-direction: column; line-height: 1.3">
<span style="font-weight: 600">김아라</span>
<span style="font-size: 12px; color: #667085">ara.kim@arasystem.it.kr</span>
</div>
<a href="Login.dc.html" style="display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px; border-radius: 8px; color: #4A5363; font-weight: 500; text-decoration: none">
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
<span>로그아웃</span>
</a>
</div>
</header>
<div style="flex: 1 1 auto; display: flex; flex-wrap: wrap; align-items: stretch">
<nav aria-label="설정 메뉴" style="flex: 1 1 208px; box-sizing: border-box; display: flex; flex-direction: column; gap: 4px; padding: 14px 10px; background: #F8F9FB; border-right: 1px solid #E6E8EC">
<p style="margin: 4px 10px 4px; font-size: 12px; font-weight: 600; color: #667085">계정</p>
<ul style="list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px">
<li><a href="SettingsAccount.dc.html" class="menu-link" style="display: flex; align-items: center; gap: 10px; min-height: 40px; box-sizing: border-box; padding: 0 10px; border-radius: 7px; font-weight: 500; text-decoration: none">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>
<span>비밀번호</span>
</a></li>
<li><a href="SettingsTwoFactor.dc.html" class="menu-link" style="display: flex; align-items: center; gap: 10px; min-height: 40px; box-sizing: border-box; padding: 0 10px; border-radius: 7px; font-weight: 500; text-decoration: none">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path><polyline points="9 12 11 14 15 10"></polyline></svg>
<span>2단계 인증</span>
</a></li>
<li><a href="SettingsAppPasswords.dc.html" class="menu-link" style="display: flex; align-items: center; gap: 10px; min-height: 40px; box-sizing: border-box; padding: 0 10px; border-radius: 7px; font-weight: 500; text-decoration: none">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4"></path></svg>
<span>앱 비밀번호</span>
</a></li>
<li><a href="SettingsMailClients.dc.html" class="menu-link" style="display: flex; align-items: center; gap: 10px; min-height: 40px; box-sizing: border-box; padding: 0 10px; border-radius: 7px; font-weight: 500; text-decoration: none">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 8V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h8"></path><path d="M10 19v-3.96 3.15"></path><path d="M7 19h5"></path><rect x="16" y="12" width="6" height="10" rx="2"></rect></svg>
<span>메일 프로그램 연결</span>
</a></li>
<li><a href="#" aria-current="page" style="display: flex; align-items: center; gap: 10px; min-height: 40px; box-sizing: border-box; padding: 0 10px; border-radius: 7px; background: #E3F2F3; color: #0A5F67; font-weight: 600; text-decoration: none">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="5" y="2" width="14" height="20" rx="2" ry="2"></rect><line x1="12" y1="18" x2="12.01" y2="18"></line></svg>
<span>휴대폰 앱</span>
</a></li>
<li><a href="SettingsLoginHistory.dc.html" class="menu-link" style="display: flex; align-items: center; gap: 10px; min-height: 40px; box-sizing: border-box; padding: 0 10px; border-radius: 7px; font-weight: 500; text-decoration: none">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"></path><path d="M3 3v5h5"></path><path d="M12 7v5l4 2"></path></svg>
<span>로그인 기록</span>
</a></li>
</ul>
<p style="margin: 14px 10px 4px; font-size: 12px; font-weight: 600; color: #667085">메일</p>
<ul style="list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px">
<li><a href="Settings.dc.html" class="menu-link" style="display: flex; align-items: center; gap: 10px; min-height: 40px; box-sizing: border-box; padding: 0 10px; border-radius: 7px; font-weight: 500; text-decoration: none">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 20h9"></path><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path></svg>
<span>서명</span>
</a></li>
<li><a href="SettingsVacation.dc.html" class="menu-link" style="display: flex; align-items: center; gap: 10px; min-height: 40px; box-sizing: border-box; padding: 0 10px; border-radius: 7px; font-weight: 500; text-decoration: none">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line><line x1="10" y1="14" x2="14" y2="18"></line><line x1="14" y1="14" x2="10" y2="18"></line></svg>
<span>부재중 자동 응답</span>
</a></li>
<li><a href="SettingsFilter.dc.html" class="menu-link" style="display: flex; align-items: center; gap: 10px; min-height: 40px; box-sizing: border-box; padding: 0 10px; border-radius: 7px; font-weight: 500; text-decoration: none">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"></polygon></svg>
<span>필터</span>
</a></li>
<li><a href="SettingsSendRead.dc.html" class="menu-link" style="display: flex; align-items: center; gap: 10px; min-height: 40px; box-sizing: border-box; padding: 0 10px; border-radius: 7px; font-weight: 500; text-decoration: none">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
<span>보내기 · 읽기</span>
</a></li>
<li><a href="SettingsSendRead.dc.html" class="menu-link" style="display: flex; align-items: center; gap: 10px; min-height: 40px; box-sizing: border-box; padding: 0 10px; border-radius: 7px; font-weight: 500; text-decoration: none">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><line x1="4.93" y1="4.93" x2="19.07" y2="19.07"></line></svg>
<span>차단한 주소</span>
</a></li>
<li><a href="SettingsLargeFiles.dc.html" class="menu-link" style="display: flex; align-items: center; gap: 10px; min-height: 40px; box-sizing: border-box; padding: 0 10px; border-radius: 7px; font-weight: 500; text-decoration: none">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg>
<span>대용량 첨부</span>
</a></li>
<li><a href="SettingsNotify.dc.html" class="menu-link" style="display: flex; align-items: center; gap: 10px; min-height: 40px; box-sizing: border-box; padding: 0 10px; border-radius: 7px; font-weight: 500; text-decoration: none">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
<span>알림</span>
</a></li>
</ul>
</nav>
<main style="flex: 999 1 560px; min-width: 0; box-sizing: border-box; display: flex; flex-direction: column">
<div id="board-pc-column" style="max-width: 800px; box-sizing: border-box; padding: 20px 32px 36px; display: flex; flex-direction: column; gap: 22px">
<div style="display: flex; flex-direction: column; gap: 4px">
<h1 style="margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -0.01em">휴대폰 앱</h1>
<p style="margin: 0; color: #4A5363">안드로이드 휴대폰에 ARA SYSTEM 앱을 설치하면 메일을 읽고 보내고, 새 메일 알림도 받을 수 있습니다.</p>
</div>
<sc-if value="{{ aHasApp }}" hint-placeholder-val="{{ true }}">
<div style="display: flex; flex-direction: column; gap: 22px">
<section aria-labelledby="ma-app-title" style="display: flex; flex-direction: column; gap: 8px">
<h2 id="ma-app-title" style="margin: 0; font-size: 14px; font-weight: 700">안드로이드 앱</h2>
<div style="box-sizing: border-box; border: 1px solid #E6E8EC; border-radius: 10px; background: #FFFFFF">
<div style="display: flex; align-items: center; gap: 14px; padding: 16px">
<span aria-hidden="true" style="flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px; background: #0B3640"><img src="/_blob/2b9ef4349333debc969432c859eaf1bf" alt="" width="34" height="12" style="display: block; width: 34px; height: auto"></span>
<div style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; line-height: 1.4">
<span style="font-size: 14px; font-weight: 600">ARA SYSTEM</span>
<p style="margin: 0; font-size: 12.5px; color: #667085; font-variant-numeric: tabular-nums">버전 1.0.0 · 올린 날 2026년 11월 18일 · 크기 31 MB</p>
</div>
<a href="#" class="primary" aria-label="앱 내려받기 (31 MB)" style="flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; box-sizing: border-box; padding: 0 16px; border-radius: 8px; font-size: 13.5px; font-weight: 600; text-decoration: none"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>앱 내려받기</a>
</div>
<div style="display: flex; align-items: flex-start; gap: 20px; padding: 16px; border-top: 1px solid #EEF0F3">
<div style="flex: 0 0 auto; padding: 6px; border: 1px solid #E6E8EC; border-radius: 8px; background: #FFFFFF">
<svg role="img" aria-label="휴대폰에서 앱을 받는 주소의 QR 코드" width="160" height="160" viewBox="0 0 33 33" shape-rendering="crispEdges" style="display: block"><rect width="33" height="33" fill="#FFFFFF"></rect><path fill="#171C26" d="M2 2h7v1h-7zM10 2h1v1h-1zM12 2h1v1h-1zM15 2h3v1h-3zM20 2h3v1h-3zM24 2h7v1h-7zM2 3h1v1h-1zM8 3h1v1h-1zM10 3h2v1h-2zM15 3h1v1h-1zM18 3h3v1h-3zM22 3h1v1h-1zM24 3h1v1h-1zM30 3h1v1h-1zM2 4h1v1h-1zM4 4h3v1h-3zM8 4h1v1h-1zM11 4h4v1h-4zM18 4h1v1h-1zM20 4h3v1h-3zM24 4h1v1h-1zM26 4h3v1h-3zM30 4h1v1h-1zM2 5h1v1h-1zM4 5h3v1h-3zM8 5h1v1h-1zM10 5h2v1h-2zM14 5h1v1h-1zM16 5h2v1h-2zM19 5h1v1h-1zM22 5h1v1h-1zM24 5h1v1h-1zM26 5h3v1h-3zM30 5h1v1h-1zM2 6h1v1h-1zM4 6h3v1h-3zM8 6h1v1h-1zM11 6h4v1h-4zM16 6h1v1h-1zM18 6h1v1h-1zM21 6h1v1h-1zM24 6h1v1h-1zM26 6h3v1h-3zM30 6h1v1h-1zM2 7h1v1h-1zM8 7h1v1h-1zM12 7h1v1h-1zM14 7h2v1h-2zM17 7h2v1h-2zM20 7h3v1h-3zM24 7h1v1h-1zM30 7h1v1h-1zM2 8h7v1h-7zM10 8h1v1h-1zM12 8h1v1h-1zM14 8h1v1h-1zM16 8h1v1h-1zM18 8h1v1h-1zM20 8h1v1h-1zM22 8h1v1h-1zM24 8h7v1h-7zM10 9h1v1h-1zM12 9h1v1h-1zM17 9h6v1h-6zM2 10h1v1h-1zM4 10h2v1h-2zM7 10h3v1h-3zM14 10h2v1h-2zM17 10h3v1h-3zM21 10h2v1h-2zM24 10h1v1h-1zM27 10h1v1h-1zM29 10h2v1h-2zM2 11h1v1h-1zM7 11h1v1h-1zM10 11h8v1h-8zM19 11h8v1h-8zM30 11h1v1h-1zM2 12h2v1h-2zM5 12h6v1h-6zM15 12h1v1h-1zM20 12h1v1h-1zM25 12h1v1h-1zM28 12h2v1h-2zM5 13h2v1h-2zM9 13h5v1h-5zM18 13h1v1h-1zM21 13h1v1h-1zM23 13h3v1h-3zM30 13h1v1h-1zM2 14h1v1h-1zM6 14h4v1h-4zM12 14h1v1h-1zM14 14h1v1h-1zM16 14h4v1h-4zM21 14h2v1h-2zM25 14h1v1h-1zM27 14h2v1h-2zM6 15h2v1h-2zM11 15h3v1h-3zM16 15h3v1h-3zM21 15h1v1h-1zM24 15h1v1h-1zM28 15h3v1h-3zM2 16h2v1h-2zM7 16h2v1h-2zM10 16h1v1h-1zM14 16h2v1h-2zM18 16h1v1h-1zM21 16h3v1h-3zM26 16h1v1h-1zM28 16h3v1h-3zM3 17h3v1h-3zM9 17h1v1h-1zM12 17h3v1h-3zM16 17h2v1h-2zM21 17h1v1h-1zM23 17h1v1h-1zM26 17h1v1h-1zM29 17h1v1h-1zM3 18h1v1h-1zM5 18h1v1h-1zM7 18h3v1h-3zM11 18h1v1h-1zM13 18h2v1h-2zM16 18h1v1h-1zM18 18h1v1h-1zM20 18h1v1h-1zM26 18h2v1h-2zM29 18h1v1h-1zM3 19h2v1h-2zM7 19h1v1h-1zM9 19h2v1h-2zM13 19h1v1h-1zM16 19h2v1h-2zM20 19h1v1h-1zM22 19h1v1h-1zM25 19h1v1h-1zM27 19h3v1h-3zM2 20h1v1h-1zM4 20h7v1h-7zM12 20h7v1h-7zM22 20h1v1h-1zM24 20h2v1h-2zM28 20h1v1h-1zM4 21h2v1h-2zM9 21h1v1h-1zM11 21h2v1h-2zM15 21h2v1h-2zM19 21h1v1h-1zM22 21h1v1h-1zM24 21h1v1h-1zM26 21h1v1h-1zM28 21h1v1h-1zM3 22h1v1h-1zM5 22h1v1h-1zM7 22h2v1h-2zM12 22h1v1h-1zM15 22h2v1h-2zM18 22h2v1h-2zM21 22h8v1h-8zM10 23h1v1h-1zM12 23h1v1h-1zM18 23h3v1h-3zM22 23h1v1h-1zM26 23h5v1h-5zM2 24h7v1h-7zM10 24h1v1h-1zM12 24h1v1h-1zM16 24h1v1h-1zM18 24h1v1h-1zM20 24h3v1h-3zM24 24h1v1h-1zM26 24h2v1h-2zM29 24h1v1h-1zM2 25h1v1h-1zM8 25h1v1h-1zM10 25h8v1h-8zM22 25h1v1h-1zM26 25h2v1h-2zM2 26h1v1h-1zM4 26h3v1h-3zM8 26h1v1h-1zM13 26h2v1h-2zM19 26h1v1h-1zM22 26h5v1h-5zM28 26h2v1h-2zM2 27h1v1h-1zM4 27h3v1h-3zM8 27h1v1h-1zM10 27h1v1h-1zM12 27h2v1h-2zM15 27h1v1h-1zM17 27h1v1h-1zM23 27h1v1h-1zM25 27h3v1h-3zM30 27h1v1h-1zM2 28h1v1h-1zM4 28h3v1h-3zM8 28h1v1h-1zM10 28h2v1h-2zM13 28h1v1h-1zM15 28h1v1h-1zM18 28h2v1h-2zM21 28h1v1h-1zM25 28h1v1h-1zM28 28h1v1h-1zM30 28h1v1h-1zM2 29h1v1h-1zM8 29h1v1h-1zM11 29h3v1h-3zM21 29h3v1h-3zM26 29h2v1h-2zM29 29h1v1h-1zM2 30h7v1h-7zM10 30h1v1h-1zM13 30h1v1h-1zM18 30h1v1h-1zM20 30h4v1h-4zM25 30h1v1h-1zM27 30h1v1h-1zM29 30h1v1h-1z"></path></svg>
</div>
<div style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 8px; padding-top: 2px">
<h3 style="margin: 0; font-size: 13.5px; font-weight: 600">휴대폰으로 받기</h3>
<p style="margin: 0; color: #344054">휴대폰 카메라로 QR 코드를 찍어 주세요. 휴대폰 브라우저에서 웹메일에 로그인하면 바로 앱을 받을 수 있습니다.</p>
<div style="display: flex; flex-direction: column; gap: 4px; padding-top: 10px; border-top: 1px solid #EEF0F3">
<p style="margin: 0; color: #344054">QR 코드를 찍을 수 없으면 휴대폰 브라우저의 주소 칸에 아래 주소를 직접 넣어 주세요.</p>
<p style="margin: 0; font-size: 14px; font-weight: 600; color: #171C26">portal.arasystem.it.kr/app</p>
</div>
<p style="margin: 0; font-size: 12.5px; color: #667085">PC에서 받은 파일은 휴대폰으로 옮겨야 설치할 수 있습니다.</p>
</div>
</div>
</div>
</section>
<section aria-labelledby="ma-steps-title" style="display: flex; flex-direction: column; gap: 10px">
<h2 id="ma-steps-title" style="margin: 0; font-size: 14px; font-weight: 700">설치 방법</h2>
<ol style="list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px">
<li style="display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 6px">
<span aria-hidden="true" style="font-weight: 700; color: #0A5F67; font-variant-numeric: tabular-nums">1</span>
<span>휴대폰에서 [앱 내려받기]를 눌러 파일을 받아 주세요. 브라우저가 이 파일을 받을지 한 번 더 물으면 그대로 받아 주세요.</span>
</li>
<li style="display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 6px">
<span aria-hidden="true" style="font-weight: 700; color: #0A5F67; font-variant-numeric: tabular-nums">2</span>
<span>받은 파일(ARA-SYSTEM-1.0.0.apk)을 열어 주세요. 처음 설치할 때는 휴대폰이 알 수 없는 앱의 설치를 허용할지 묻습니다. 허용한 뒤 돌아와 설치를 이어 가 주세요.</span>
</li>
<li style="display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 6px">
<span aria-hidden="true" style="font-weight: 700; color: #0A5F67; font-variant-numeric: tabular-nums">3</span>
<span>Play 스토어를 거치지 않은 앱이라 Play 프로텍트가 경고할 수 있습니다. 웹메일에서 받은 ARA SYSTEM 앱이면 설치를 이어 가 주세요.</span>
</li>
<li style="display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 6px">
<span aria-hidden="true" style="font-weight: 700; color: #0A5F67; font-variant-numeric: tabular-nums">4</span>
<span>설치한 앱을 열고 웹메일과 같은 메일 주소와 비밀번호로 로그인해 주세요. 앱 비밀번호는 만들지 않으셔도 됩니다.</span>
</li>
</ol>
</section>
<section aria-labelledby="ma-update-title" style="display: flex; flex-direction: column; gap: 6px">
<h2 id="ma-update-title" style="margin: 0; font-size: 14px; font-weight: 700">새 버전이 나오면</h2>
<p style="margin: 0; color: #344054">새 버전도 같은 곳에서 받아 설치하면 됩니다. 쓰던 앱을 지우지 않고 설치하면 로그인과 설정이 그대로 남습니다.</p>
<p style="margin: 0; color: #344054">꼭 필요한 업데이트가 있으면 앱이 먼저 알려 드립니다.</p>
</section>
<div style="display: flex; align-items: flex-start; gap: 10px; box-sizing: border-box; padding: 12px 14px; border-radius: 8px; background: #F3F8F8; color: #344054">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#0A5F67" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto; margin-top: 2px"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>
<div style="flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px">
<span style="font-weight: 600; color: #0A5F67">아이폰용 앱은 아직 없습니다</span>
<span>아이폰에서는 브라우저로 웹메일을 쓰거나, 기본 메일 앱에 회사 메일을 연결해 주세요. 연결 방법은 <a href="SettingsMailClients.dc.html">메일 프로그램 연결</a>에서 볼 수 있습니다.</span>
</div>
</div>
</div>
</sc-if>
<sc-if value="{{ aNoApp }}" hint-placeholder-val="{{ false }}">
<div style="display: flex; flex-direction: column; gap: 22px">
<section aria-labelledby="ma-none-title" style="display: flex; flex-direction: column; gap: 8px">
<h2 id="ma-none-title" style="margin: 0; font-size: 14px; font-weight: 700">안드로이드 앱</h2>
<div style="display: flex; flex-direction: column; align-items: flex-start; gap: 10px; box-sizing: border-box; padding: 20px; border: 1px solid #E6E8EC; border-radius: 10px; background: #FFFFFF">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#98A2B3" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="5" y="2" width="14" height="20" rx="2" ry="2"></rect><line x1="12" y1="18" x2="12.01" y2="18"></line></svg>
<div style="display: flex; flex-direction: column; gap: 2px">
<span style="font-size: 14px; font-weight: 600">아직 받을 수 있는 앱이 없습니다</span>
<span style="color: #4A5363">앱이 준비되면 이곳에서 받아 설치할 수 있습니다.</span>
</div>
<p style="align-self: stretch; margin: 2px 0 0; padding-top: 12px; border-top: 1px solid #EEF0F3; font-size: 12.5px; color: #667085">
<sc-if value="{{ contactSet }}" hint-placeholder-val="{{ true }}">언제 받을 수 있는지 궁금하신가요?<br><span style="color: #344054; font-weight: 500">IT 담당 홍길동 · 02-000-0000 · 사내 메신저 @it</span></sc-if>
<sc-if value="{{ contactUnset }}" hint-placeholder-val="{{ false }}">언제 받을 수 있는지는 관리자에게 문의해 주세요.</sc-if>
</p>
</div>
</section>
</div>
</sc-if>
</div>
</main>
</div>
</div>
</div>
<section aria-labelledby="sec-b-h" style="flex: 0 0 auto; box-sizing: border-box; padding: 44px 48px 0; display: flex; flex-direction: column; gap: 12px">
<div style="display: flex; align-items: baseline; gap: 16px">
<h2 id="sec-b-h" style="margin: 0; font-size: 19px; line-height: 28px; font-weight: 700; color: #0B3640; white-space: nowrap">B. 휴대폰 받기 화면 /app</h2>
<p style="margin: 0; font-size: 13.5px; color: #4A5363">앱 레일과 상단 바가 없는 독립 화면이고, 로그인해야 열립니다. QR 코드와 앱의 [새 버전 받기]가 휴대폰 브라우저로 이 주소를 엽니다.</p>
</div>
<div role="group" aria-label="받기 화면 상태 고르기" style="display: flex; gap: 8px">
<sc-for list="{{ pageModes }}" as="s" hint-placeholder-count="2">
<button type="button" aria-pressed="{{ s.pressed }}" onClick="{{ s.pick }}" style="flex: 0 0 auto; min-width: 200px; min-height: 44px; box-sizing: border-box; padding: 0 16px; border: 1px solid {{ s.border }}; border-radius: 10px; background: {{ s.bg }}; color: {{ s.fg }}; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer">{{ s.label }}</button>
</sc-for>
</div>
<div style="display: flex; gap: 40px; align-items: flex-start; padding-top: 8px">
<div style="flex: 0 0 360px; display: flex; flex-direction: column; gap: 12px">
<div style="height: 62px; display: flex; flex-direction: column; gap: 2px">
<h3 style="margin: 0; font-size: 13px; line-height: 20px; font-weight: 700; color: #344054">{{ bPhoneTitle }}</h3>
<p style="margin: 0; font-size: 12.5px; line-height: 20px; color: #667085">{{ bPhoneNote }}</p>
</div>
<div id="board-phone" style="width: 360px; height: 1090px; box-sizing: border-box; border-radius: 28px; overflow: hidden; background: #F8F9FB; box-shadow: 0 0 0 1px #D0D5DD, 0 12px 32px rgba(16, 24, 28, 0.12); display: flex; flex-direction: column">
<div aria-hidden="true" style="flex: 0 0 auto; display: flex; align-items: center; gap: 6px; height: 56px; box-sizing: border-box; padding: 0 6px 0 12px; background: #FFFFFF; border-bottom: 1px solid #E6E8EC">
<div style="flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; height: 36px; box-sizing: border-box; padding: 0 14px; border-radius: 18px; background: #F2F4F7; color: #344054; font-size: 13px">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#4A5363" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="flex: 0 0 auto"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>
<span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap">portal.arasystem.it.kr/app</span>
</div>
<span style="flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; color: #4A5363"><svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" stroke="none"><circle cx="12" cy="5" r="1.6"></circle><circle cx="12" cy="12" r="1.6"></circle><circle cx="12" cy="19" r="1.6"></circle></svg></span>
</div>
<div id="board-phone-page" style="flex: 0 0 auto; display: flex; flex-direction: column">
<section aria-label="ARA SYSTEM" style="display: flex; flex-direction: column; gap: 16px; padding: 28px 20px 24px; background: #0B3640">
<img src="/_blob/3a2f4115a8f90207faa7d3a51cd9aec2" alt="ARA SYSTEM" width="120" height="57" style="display: block; width: 120px; height: auto">
<div style="display: flex; flex-direction: column; gap: 6px">
<h1 style="margin: 0; font-size: 20px; line-height: 1.35; font-weight: 700; letter-spacing: -0.02em; color: #FFFFFF">휴대폰 앱 받기</h1>
<p style="margin: 0; font-size: 14px; line-height: 1.6; color: #A3C2C6">안드로이드 휴대폰에 설치하면 메일을 읽고 보내고, 새 메일 알림도 받을 수 있습니다.</p>
</div>
</section>
<main style="display: flex; flex-direction: column; gap: 20px; padding: 20px 16px 28px; font-size: 14px">
<sc-if value="{{ bHasApp }}" hint-placeholder-val="{{ true }}">
<div style="display: flex; flex-direction: column; gap: 22px">
<div style="display: flex; flex-direction: column; gap: 14px; box-sizing: border-box; padding: 16px; border: 1px solid #E6E8EC; border-radius: 12px; background: #FFFFFF">
<div style="display: flex; align-items: center; gap: 12px">
<span aria-hidden="true" style="flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 13px; background: #0B3640"><img src="/_blob/2b9ef4349333debc969432c859eaf1bf" alt="" width="36" height="13" style="display: block; width: 36px; height: auto"></span>
<div style="display: flex; flex-direction: column; line-height: 1.35">
<span style="font-size: 17px; font-weight: 700; letter-spacing: -0.01em">ARA SYSTEM</span>
<span style="font-size: 13px; color: #667085">안드로이드 앱</span>
</div>
</div>
<dl style="margin: 0; display: grid; grid-template-columns: 56px minmax(0, 1fr); row-gap: 2px; font-size: 13px; font-variant-numeric: tabular-nums">
<dt style="color: #667085">버전</dt><dd style="margin: 0; color: #344054">1.0.0</dd>
<dt style="color: #667085">올린 날</dt><dd style="margin: 0; color: #344054">2026년 11월 18일</dd>
<dt style="color: #667085">크기</dt><dd style="margin: 0; color: #344054">31 MB</dd>
</dl>
<a href="#" class="primary" aria-label="앱 내려받기 (31 MB)" style="display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border-radius: 10px; font-size: 15px; font-weight: 600; text-decoration: none"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>앱 내려받기</a>
</div>
<section aria-labelledby="b-steps-h" style="display: flex; flex-direction: column; gap: 10px">
<h2 id="b-steps-h" style="margin: 0; font-size: 15px; font-weight: 700">설치 방법</h2>
<ol style="list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; line-height: 1.55">
<li style="display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 4px">
<span aria-hidden="true" style="font-weight: 700; color: #0A5F67; font-variant-numeric: tabular-nums">1</span>
<span>[앱 내려받기]를 눌러 파일을 받아 주세요. 브라우저가 한 번 더 물으면 그대로 받아 주세요.</span>
</li>
<li style="display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 4px">
<span aria-hidden="true" style="font-weight: 700; color: #0A5F67; font-variant-numeric: tabular-nums">2</span>
<span>받은 파일을 열어 주세요. 처음에는 알 수 없는 앱의 설치를 허용할지 묻습니다. 허용한 뒤 설치를 이어 가 주세요.</span>
</li>
<li style="display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 4px">
<span aria-hidden="true" style="font-weight: 700; color: #0A5F67; font-variant-numeric: tabular-nums">3</span>
<span>Play 프로텍트가 경고해도 이 화면에서 받은 ARA SYSTEM 앱이면 설치를 이어 가 주세요.</span>
</li>
<li style="display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 4px">
<span aria-hidden="true" style="font-weight: 700; color: #0A5F67; font-variant-numeric: tabular-nums">4</span>
<span>설치한 앱을 열고 웹메일과 같은 메일 주소와 비밀번호로 로그인해 주세요.</span>
</li>
</ol>
<p style="margin: 2px 0 0; font-size: 13px; color: #4A5363">새 버전도 이 화면에서 받아 설치하면 됩니다. 쓰던 앱을 지우지 않고 설치하면 로그인과 설정이 그대로 남습니다.</p>
</section>
<div style="display: flex; align-items: flex-start; gap: 10px; box-sizing: border-box; padding: 12px 14px; border-radius: 8px; background: #F3F8F8; color: #344054; font-size: 13px">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#0A5F67" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto; margin-top: 2px"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>
<div style="flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px">
<span style="font-weight: 600; color: #0A5F67">아이폰용 앱은 아직 없습니다</span>
<span>아이폰에서는 브라우저로 웹메일을 쓰거나, 기본 메일 앱에 회사 메일을 연결해 주세요. 연결 방법은 <a href="SettingsMailClients.dc.html">메일 프로그램 연결</a>에서 볼 수 있습니다.</span>
</div>
</div>
<p style="margin: 0; padding-top: 16px; border-top: 1px solid #E6E8EC; font-size: 13px; color: #667085">
<sc-if value="{{ contactSet }}" hint-placeholder-val="{{ true }}">설치가 잘 되지 않나요?<br><span style="color: #344054; font-weight: 500">IT 담당 홍길동 · 02-000-0000 · 사내 메신저 @it</span></sc-if>
<sc-if value="{{ contactUnset }}" hint-placeholder-val="{{ false }}">설치가 잘 되지 않으면 관리자에게 문의해 주세요.</sc-if>
</p>
</div>
</sc-if>
<sc-if value="{{ bNoApp }}" hint-placeholder-val="{{ false }}">
<div style="display: flex; flex-direction: column; align-items: flex-start; gap: 10px; box-sizing: border-box; padding: 20px 16px; border: 1px solid #E6E8EC; border-radius: 12px; background: #FFFFFF">
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#98A2B3" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="5" y="2" width="14" height="20" rx="2" ry="2"></rect><line x1="12" y1="18" x2="12.01" y2="18"></line></svg>
<h2 style="margin: 0; font-size: 17px; line-height: 1.4; font-weight: 650">아직 받을 수 있는 앱이 없습니다</h2>
<p style="margin: 0; color: #344054">앱이 준비되면 이 화면에서 받을 수 있습니다.</p>
<p style="align-self: stretch; margin: 4px 0 0; padding-top: 12px; border-top: 1px solid #EEF0F3; font-size: 13px; color: #667085">
<sc-if value="{{ contactSet }}" hint-placeholder-val="{{ true }}">언제 받을 수 있는지 궁금하신가요?<br><span style="color: #344054; font-weight: 500">IT 담당 홍길동 · 02-000-0000 · 사내 메신저 @it</span></sc-if>
<sc-if value="{{ contactUnset }}" hint-placeholder-val="{{ false }}">언제 받을 수 있는지는 관리자에게 문의해 주세요.</sc-if>
</p>
</div>
</sc-if>
</main>
</div>
</div>
</div>
<div style="flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 12px">
<div style="height: 62px; display: flex; flex-direction: column; gap: 2px">
<h3 style="margin: 0; font-size: 13px; line-height: 20px; font-weight: 700; color: #344054">{{ bWideTitle }}</h3>
<p style="margin: 0; font-size: 12.5px; line-height: 20px; color: #667085">{{ bWideNote }}</p>
</div>
<div id="board-wide" style="height: 1090px; box-sizing: border-box; border: 1px solid #D0D5DD; border-radius: 12px; overflow: hidden; background: #F8F9FB; display: flex; flex-direction: column">
<div aria-hidden="true" style="flex: 0 0 auto; display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 0 14px; background: #EEF0F3; border-bottom: 1px solid #E6E8EC">
<span style="display: inline-flex; gap: 6px"><span style="width: 10px; height: 10px; border-radius: 50%; background: #D0D5DD"></span><span style="width: 10px; height: 10px; border-radius: 50%; background: #D0D5DD"></span><span style="width: 10px; height: 10px; border-radius: 50%; background: #D0D5DD"></span></span>
<div style="flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px; border-radius: 6px; background: #FFFFFF; color: #344054; font-size: 12.5px">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#4A5363" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="flex: 0 0 auto"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>
<span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap"><strong style="font-weight: 600; color: #171C26">portal.arasystem.it.kr</strong>/app</span>
</div>
<span style="flex: 0 0 auto; font-size: 12px; color: #667085">탭 제목 "휴대폰 앱 받기 · ARA SYSTEM"</span>
</div>
<div id="board-wide-page" style="flex: 0 0 auto; display: flex; flex-direction: column">
<section aria-label="ARA SYSTEM" style="padding: 36px 24px 32px; background: #0B3640">
<div style="max-width: 480px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px">
<img src="/_blob/3a2f4115a8f90207faa7d3a51cd9aec2" alt="ARA SYSTEM" width="150" height="72" style="display: block; width: 150px; height: auto">
<div style="display: flex; flex-direction: column; gap: 6px">
<h1 style="margin: 0; font-size: 22px; line-height: 1.35; font-weight: 700; letter-spacing: -0.02em; color: #FFFFFF">휴대폰 앱 받기</h1>
<p style="margin: 0; font-size: 14px; line-height: 1.6; color: #A3C2C6">안드로이드 휴대폰에 설치하면 메일을 읽고 보내고, 새 메일 알림도 받을 수 있습니다.</p>
</div>
</div>
</section>
<main style="display: flex; justify-content: center; padding: 28px 24px 40px; font-size: 14px">
<div style="width: 100%; max-width: 480px; display: flex; flex-direction: column; gap: 22px">
<sc-if value="{{ bHasApp }}" hint-placeholder-val="{{ true }}">
<div style="display: flex; flex-direction: column; gap: 22px">
<div style="display: flex; flex-direction: column; gap: 14px; box-sizing: border-box; padding: 20px; border: 1px solid #E6E8EC; border-radius: 12px; background: #FFFFFF">
<div style="display: flex; align-items: center; gap: 12px">
<span aria-hidden="true" style="flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 13px; background: #0B3640"><img src="/_blob/2b9ef4349333debc969432c859eaf1bf" alt="" width="36" height="13" style="display: block; width: 36px; height: auto"></span>
<div style="display: flex; flex-direction: column; line-height: 1.35">
<span style="font-size: 17px; font-weight: 700; letter-spacing: -0.01em">ARA SYSTEM</span>
<span style="font-size: 13px; color: #667085">안드로이드 앱</span>
</div>
</div>
<dl style="margin: 0; display: grid; grid-template-columns: 56px minmax(0, 1fr); row-gap: 2px; font-size: 13px; font-variant-numeric: tabular-nums">
<dt style="color: #667085">버전</dt><dd style="margin: 0; color: #344054">1.0.0</dd>
<dt style="color: #667085">올린 날</dt><dd style="margin: 0; color: #344054">2026년 11월 18일</dd>
<dt style="color: #667085">크기</dt><dd style="margin: 0; color: #344054">31 MB</dd>
</dl>
<a href="#" class="primary" aria-label="앱 내려받기 (31 MB)" style="display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border-radius: 10px; font-size: 15px; font-weight: 600; text-decoration: none"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>앱 내려받기</a>
</div>
<section aria-labelledby="b3-steps-h" style="display: flex; flex-direction: column; gap: 10px">
<h2 id="b3-steps-h" style="margin: 0; font-size: 15px; font-weight: 700">설치 방법</h2>
<ol style="list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; line-height: 1.55">
<li style="display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 4px">
<span aria-hidden="true" style="font-weight: 700; color: #0A5F67; font-variant-numeric: tabular-nums">1</span>
<span>[앱 내려받기]를 눌러 파일을 받아 주세요. 브라우저가 한 번 더 물으면 그대로 받아 주세요.</span>
</li>
<li style="display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 4px">
<span aria-hidden="true" style="font-weight: 700; color: #0A5F67; font-variant-numeric: tabular-nums">2</span>
<span>받은 파일을 열어 주세요. 처음에는 알 수 없는 앱의 설치를 허용할지 묻습니다. 허용한 뒤 설치를 이어 가 주세요.</span>
</li>
<li style="display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 4px">
<span aria-hidden="true" style="font-weight: 700; color: #0A5F67; font-variant-numeric: tabular-nums">3</span>
<span>Play 프로텍트가 경고해도 이 화면에서 받은 ARA SYSTEM 앱이면 설치를 이어 가 주세요.</span>
</li>
<li style="display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 4px">
<span aria-hidden="true" style="font-weight: 700; color: #0A5F67; font-variant-numeric: tabular-nums">4</span>
<span>설치한 앱을 열고 웹메일과 같은 메일 주소와 비밀번호로 로그인해 주세요.</span>
</li>
</ol>
<p style="margin: 2px 0 0; font-size: 13px; color: #4A5363">새 버전도 이 화면에서 받아 설치하면 됩니다. 쓰던 앱을 지우지 않고 설치하면 로그인과 설정이 그대로 남습니다.</p>
</section>
<div style="display: flex; align-items: flex-start; gap: 10px; box-sizing: border-box; padding: 12px 14px; border-radius: 8px; background: #F3F8F8; color: #344054; font-size: 13px">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#0A5F67" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex: 0 0 auto; margin-top: 2px"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>
<div style="flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px">
<span style="font-weight: 600; color: #0A5F67">아이폰용 앱은 아직 없습니다</span>
<span>아이폰에서는 브라우저로 웹메일을 쓰거나, 기본 메일 앱에 회사 메일을 연결해 주세요. 연결 방법은 <a href="SettingsMailClients.dc.html">메일 프로그램 연결</a>에서 볼 수 있습니다.</span>
</div>
</div>
<p style="margin: 0; padding-top: 16px; border-top: 1px solid #E6E8EC; font-size: 13px; color: #667085">
<sc-if value="{{ contactSet }}" hint-placeholder-val="{{ true }}">설치가 잘 되지 않나요?<br><span style="color: #344054; font-weight: 500">IT 담당 홍길동 · 02-000-0000 · 사내 메신저 @it</span></sc-if>
<sc-if value="{{ contactUnset }}" hint-placeholder-val="{{ false }}">설치가 잘 되지 않으면 관리자에게 문의해 주세요.</sc-if>
</p>
</div>
</sc-if>
<sc-if value="{{ bNoApp }}" hint-placeholder-val="{{ false }}">
<div style="display: flex; flex-direction: column; align-items: flex-start; gap: 10px; box-sizing: border-box; padding: 24px 20px; border: 1px solid #E6E8EC; border-radius: 12px; background: #FFFFFF">
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#98A2B3" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="5" y="2" width="14" height="20" rx="2" ry="2"></rect><line x1="12" y1="18" x2="12.01" y2="18"></line></svg>
<h2 style="margin: 0; font-size: 17px; line-height: 1.4; font-weight: 650">아직 받을 수 있는 앱이 없습니다</h2>
<p style="margin: 0; color: #344054">앱이 준비되면 이 화면에서 받을 수 있습니다.</p>
<p style="align-self: stretch; margin: 4px 0 0; padding-top: 12px; border-top: 1px solid #EEF0F3; font-size: 13px; color: #667085">
<sc-if value="{{ contactSet }}" hint-placeholder-val="{{ true }}">언제 받을 수 있는지 궁금하신가요?<br><span style="color: #344054; font-weight: 500">IT 담당 홍길동 · 02-000-0000 · 사내 메신저 @it</span></sc-if>
<sc-if value="{{ contactUnset }}" hint-placeholder-val="{{ false }}">언제 받을 수 있는지는 관리자에게 문의해 주세요.</sc-if>
</p>
</div>
</sc-if>
</div>
</main>
</div>
</div>
</div>
</div>
</section>
<div style="flex: 0 0 auto; box-sizing: border-box; padding: 44px 48px 48px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start">
<section style="display: flex; flex-direction: column; gap: 10px; padding: 20px; background: #FFFFFF; border: 1px solid #E6E8EC; border-radius: 12px">
<h2 style="margin: 0; font-size: 14px; font-weight: 700">로그인하지 않았을 때</h2>
<ul style="margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; color: #344054">
<li>로그인하지 않은 브라우저로 /app을 열면(QR 코드, 앱의 [새 버전 받기]) 지금의 로그인 화면으로 갔다가, 로그인을 마치면 이 화면으로 돌아옵니다. 다른 보호 화면과 같은 길(requiresAuth 와 redirect=/app)이라 로그인 화면은 새로 그리지 않았습니다.</li>
<li>새 비밀번호 정하기나 2단계 인증 켜기 단계가 걸린 직원도 그 단계를 마친 뒤 이 화면으로 돌아옵니다.</li>
<li>이미 로그인해 둔 휴대폰 브라우저라면 바로 이 화면이 열립니다. [앱 내려받기]는 첨부 받기처럼 누르기 직전에 세션을 확인하고(confirmSession), 세션이 끝났으면 세션 만료 창이 뜹니다.</li>
</ul>
</section>
<section style="display: flex; flex-direction: column; gap: 10px; padding: 20px; background: #FFFFFF; border: 1px solid #E6E8EC; border-radius: 12px">
<h2 style="margin: 0; font-size: 14px; font-weight: 700">정한 것</h2>
<ul style="margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; color: #344054">
<li>메뉴는 계정 묶음의 메일 프로그램 연결 다음, 로그인 기록 앞입니다. 아이콘은 이미 있는 휴대폰 그림(smartphone)입니다.</li>
<li>앱 칸에는 앱 그림, 이름, 버전, 올린 날, 크기, [앱 내려받기]가 있습니다. 앱 그림은 남색 바탕에 흰 ARA 마크(apple-touch-icon.png 를 둥글게 깎은 것)라 새 그림이 들지 않습니다. 받는 파일 이름은 ARA-SYSTEM-버전.apk입니다.</li>
<li>QR은 2단계 인증 켜기와 같은 QrCodeImage(160)이고, 지금 주소의 출처에 /app을 붙인 주소만 담습니다. 비밀이 아닙니다. 보드의 QR은 https://portal.arasystem.it.kr/app으로 만든 진짜 QR입니다.</li>
<li>문의 줄은 로그인 화면의 문의 줄과 같은 꼴입니다. 연락처가 있으면 물음 다음 줄에 연락처를, 없거나 받지 못하면 대신 쓰는 글 한 줄을 둡니다.</li>
<li>받을 앱이 없으면 QR, 설치 방법, 새 버전 안내, 아이폰 안내를 모두 빼고 안내와 문의 줄만 둡니다. 최신 · NEW 같은 꼬리표는 달지 않습니다.</li>
<li>휴대폰으로 설정 화면을 열었을 때(좁은 폭)는 메뉴가 위로 올라가고(지금 설정 화면과 같다), QR 줄은 빼며, [앱 내려받기]는 이름 아래 전체 폭으로 둡니다.</li>
</ul>
</section>
<section style="display: flex; flex-direction: column; gap: 10px; padding: 20px; background: #FFFFFF; border: 1px solid #E6E8EC; border-radius: 12px">
<h2 style="margin: 0; font-size: 14px; font-weight: 700">받기 화면 /app</h2>
<ul style="margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; color: #344054">
<li>앱 레일과 상단 바가 없는 독립 화면입니다. 브랜드 띠는 로그인 화면의 브랜드 패널을 줄인 꼴(로고, 제목, 설명)이고 바탕은 #F8F9FB입니다.</li>
<li>휴대폰 폭이 먼저입니다. 폭 480(30rem)보다 넓으면 띠는 화면 폭 전체로 두고, 로고와 제목, 내용은 가운데 칸 480에 맞춥니다.</li>
<li>[앱 내려받기]는 전체 폭에 높이 48(3rem)이고, 본문 글은 14입니다. 휴대폰에서도 [앱 내려받기]까지 첫 화면에 들어옵니다.</li>
<li>설치 방법 아래의 새 버전 한 줄은 앱의 [새 버전 받기]로 온 직원을 위한 것입니다. 쓰던 앱을 먼저 지우지 않게 합니다.</li>
</ul>
</section>
<section style="display: flex; flex-direction: column; gap: 10px; padding: 20px; background: #FFFFFF; border: 1px solid #E6E8EC; border-radius: 12px">
<h2 style="margin: 0; font-size: 14px; font-weight: 700">구현 때 맞출 것</h2>
<ul style="margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; color: #344054">
<li>받기와 설치 때 뜨는 창의 글은 브라우저와 제조사마다 다릅니다. 갤럭시 S23에서 삼성 인터넷과 Chrome으로 받기 경고, 알 수 없는 앱 설치 허용, Play 프로텍트 경고를 한 번씩 거쳐 보고 차례 글을 맞춥니다.</li>
<li>서명 키가 다른 판(시험판)이 깔린 휴대폰은 새 판을 덮어 설치할 수 없습니다. 그때는 앱을 지운 뒤 설치하고 로그인을 다시 합니다.</li>
<li>앱 정보(버전, 크기, 올린 날)와 파일을 주는 서버 API는 이 보드 밖입니다(backend 에 넘김). 앱 정보를 받지 못하면 칸 자리에 사전 문구와 [다시 시도]를 둡니다.</li>
</ul>
</section>
</div>
</div>
</x-dc>
<script type="text/x-dc" data-dc-script data-props='{"$preview":{"width":1440,"height":3209}}'>
class Component extends DCLogic {
state = { settings: null, page: null, contact: null };
// 상태 고르기 단추 — 앱 보드(App1Push)와 같은 모양
modes(list, current, choose) {
return list.map((x) => {
const on = x.id === current;
return {
label: x.label,
pressed: on ? 'true' : 'false',
pick: () => choose(x.id),
bg: on ? '#E3F2F3' : '#FFFFFF',
fg: on ? '#0A5F67' : '#344054',
border: on ? '#0E7C86' : '#D0D5DD',
};
});
}
renderVals() {
const st = this.state;
const settings = st.settings ?? 'has';
const page = st.page ?? 'has';
const contact = st.contact ?? 'set';
const aHas = settings === 'has';
const bHas = page === 'has';
const contactSet = contact === 'set';
const contactNote = contactSet ? '문의 연락처를 정해 두었을 때' : '문의 연락처를 정하지 않았을 때';
return {
contactModes: this.modes([{ id: 'set', label: '연락처 있음' }, { id: 'unset', label: '연락처 없음' }], contact, (id) => this.setState({ contact: id })),
settingsModes: this.modes([{ id: 'has', label: 'A1 받을 앱 있음' }, { id: 'none', label: 'A2 받을 앱 없음' }], settings, (id) => this.setState({ settings: id })),
pageModes: this.modes([{ id: 'has', label: 'B1 받을 앱 있음' }, { id: 'none', label: 'B2 받을 앱 없음' }], page, (id) => this.setState({ page: id })),
contactSet,
contactUnset: !contactSet,
aHasApp: aHas,
aNoApp: !aHas,
aRegionLabel: aHas ? '화면: 설정 › 계정 › 휴대폰 앱 (받을 앱 있음)' : '화면: 설정 › 계정 › 휴대폰 앱 (받을 앱 없음)',
aStateTitle: aHas ? 'A1. 받을 앱 있음' : 'A2. 받을 앱 없음 · ' + contactNote,
aStateNote: aHas
? '안드로이드 앱 칸, QR, 설치 방법, 새 버전 안내, 아이폰 안내가 있습니다. 콘텐츠 열은 다른 설정 화면과 같은 800입니다.'
: '안내와 문의 줄만 둡니다. 문의 줄은 위의 문의 연락처 고르기를 따릅니다.',
bHasApp: bHas,
bNoApp: !bHas,
bPhoneTitle: bHas ? 'B1. 휴대폰 (폭 360) · 받을 앱 있음' : 'B2. 휴대폰 (폭 360) · 받을 앱 없음',
bPhoneNote: bHas
? 'QR 코드나 앱의 [새 버전 받기]로 연 모습입니다. 아래로 내리면 설치 방법, 아이폰 안내, 문의 줄이 있습니다.'
: '설치 방법과 아이폰 안내는 빼고, 안내와 문의 줄만 둡니다.',
bWideTitle: 'B3. 넓은 화면 (PC 브라우저 폭 944) · 위의 B1 · B2 고르기를 따릅니다',
bWideNote: '띠는 화면 폭 전체이고, 로고와 제목, 내용은 가운데 칸 480에 맞춥니다. 내용은 휴대폰과 같습니다.',
};
}
}
</script>
</body>
</html>
docs/design/webmail/canvas.json
+5 -3
View File
@@ -58,9 +58,10 @@
"App1Search.dc.html": { "x": 0, "y": 33450, "w": 3098, "h": 1028, "title": "앱 · 검색 (찾기 · 결과)", "is_interactive": true },
"App1SearchStates.dc.html": { "x": 3178, "y": 33450, "w": 2660, "h": 1028, "title": "앱 · 검색 (상태 · 결과에서 연 메일)", "is_interactive": true },
"App1SearchConditions.dc.html": { "x": 5918, "y": 33450, "w": 1784, "h": 1028, "title": "앱 · 검색 2차 (조건으로 찾기)", "is_interactive": true },
"App1Push.dc.html": { "x": 0, "y": 34900, "w": 2222, "h": 3270, "title": "앱 · 새 메일 알림 (푸시)", "is_interactive": true }
"App1Push.dc.html": { "x": 0, "y": 34900, "w": 2222, "h": 3270, "title": "앱 · 새 메일 알림 (푸시)", "is_interactive": true },
"SettingsMobileApp.dc.html": { "x": 0, "y": 38770, "w": 1440, "h": 3209, "title": "설정 · 휴대폰 앱 · 앱 받기 화면", "is_interactive": true }
},
"order": ["Main.dc.html", "Login.dc.html", "Compose.dc.html", "States.dc.html", "MainList.dc.html", "MainListRead.dc.html", "ComposeEditor.dc.html", "Settings.dc.html", "ComposeAssist.dc.html", "Search.dc.html", "BulkSelect.dc.html", "ListStates.dc.html", "SettingsAccount.dc.html", "SettingsVacation.dc.html", "MailboxManage.dc.html", "MailActions4.dc.html", "SettingsNotify.dc.html", "MailRealtime.dc.html", "SettingsFilter.dc.html", "MailFilterStates.dc.html", "MailFilterApply.dc.html", "MailFilterApplyStates.dc.html", "Contacts.dc.html", "ContactsEdit.dc.html", "ContactsMail.dc.html", "MailReadTools.dc.html", "MailPrint.dc.html", "MailSendLater.dc.html", "SettingsSendRead.dc.html", "ComposeLargeFiles.dc.html", "LargeFileBlock.dc.html", "MailReadLargeFiles.dc.html", "SharePage.dc.html", "SettingsLargeFiles.dc.html", "LoginTwoFactor.dc.html", "SettingsTwoFactor.dc.html", "SettingsAppPasswords.dc.html", "SettingsLoginHistory.dc.html", "LoginPasswordChange.dc.html", "LoginTwoFactorSetup.dc.html", "SettingsMailClients.dc.html", "MailNoticesCutover.dc.html", "Search14.dc.html", "Thread14.dc.html", "ListThreads14.dc.html", "App1Login.dc.html", "App1MailList.dc.html", "App1Reader.dc.html", "App1Compose.dc.html", "App1Shell.dc.html", "App1Search.dc.html", "App1SearchStates.dc.html", "App1SearchConditions.dc.html", "App1Push.dc.html"],
"order": ["Main.dc.html", "Login.dc.html", "Compose.dc.html", "States.dc.html", "MainList.dc.html", "MainListRead.dc.html", "ComposeEditor.dc.html", "Settings.dc.html", "ComposeAssist.dc.html", "Search.dc.html", "BulkSelect.dc.html", "ListStates.dc.html", "SettingsAccount.dc.html", "SettingsVacation.dc.html", "MailboxManage.dc.html", "MailActions4.dc.html", "SettingsNotify.dc.html", "MailRealtime.dc.html", "SettingsFilter.dc.html", "MailFilterStates.dc.html", "MailFilterApply.dc.html", "MailFilterApplyStates.dc.html", "Contacts.dc.html", "ContactsEdit.dc.html", "ContactsMail.dc.html", "MailReadTools.dc.html", "MailPrint.dc.html", "MailSendLater.dc.html", "SettingsSendRead.dc.html", "ComposeLargeFiles.dc.html", "LargeFileBlock.dc.html", "MailReadLargeFiles.dc.html", "SharePage.dc.html", "SettingsLargeFiles.dc.html", "LoginTwoFactor.dc.html", "SettingsTwoFactor.dc.html", "SettingsAppPasswords.dc.html", "SettingsLoginHistory.dc.html", "LoginPasswordChange.dc.html", "LoginTwoFactorSetup.dc.html", "SettingsMailClients.dc.html", "MailNoticesCutover.dc.html", "Search14.dc.html", "Thread14.dc.html", "ListThreads14.dc.html", "App1Login.dc.html", "App1MailList.dc.html", "App1Reader.dc.html", "App1Compose.dc.html", "App1Shell.dc.html", "App1Search.dc.html", "App1SearchStates.dc.html", "App1SearchConditions.dc.html", "App1Push.dc.html", "SettingsMobileApp.dc.html"],
"notes": {
"flow": { "x": 0, "y": -300, "text": "arasystem 웹메일 — 1단계 화면 (로그인 → 메일함 → 쓰기)", "kind": "title1", "maxW": 4480 },
"phase2": { "x": 0, "y": 2180, "text": "2단계 화면 — 임시 저장 · 받는 사람 자동 완성 · 서명 (2026-10-27 확정)", "kind": "title1", "maxW": 2960 },
@@ -78,7 +79,8 @@
"app1": { "x": 0, "y": 31700, "text": "앱 1단계 화면 — 로그인 · 메일 목록 · 읽기 · 쓰기 · 앱 틀 — 2026-11-05 확정(안드로이드 먼저)", "kind": "title1", "maxW": 8932 },
"app1search": { "x": 0, "y": 33150, "text": "앱 1단계 검색 화면 — 찾기 · 결과 · 강조 · 이어 찾기 · 안내 — 2026-11-07 확정(글은 화면 상수가 기준)", "kind": "title1", "maxW": 5838 },
"app1search2": { "x": 5918, "y": 33150, "text": "앱 검색 2차 — 조건으로 찾기 · 날짜 · 조건 줄 — 2026-11-07 확정(글은 화면 상수가 기준)", "kind": "title1", "maxW": 1784 },
"app1push": { "x": 0, "y": 34600, "text": "앱 새 메일 알림 — 허락 묻기 · 설정 · 휴대폰 알림 · 업데이트 · 앱 아이콘 — 2026-11-07 확정(글은 화면 상수가 기준)", "kind": "title1", "maxW": 2222 }
"app1push": { "x": 0, "y": 34600, "text": "앱 새 메일 알림 — 허락 묻기 · 설정 · 휴대폰 알림 · 업데이트 · 앱 아이콘 — 2026-11-07 확정(글은 화면 상수가 기준) · 11-08 업데이트 화면 · 앱 정보를 사내 배포에 맞게 바꿈(확정)", "kind": "title1", "maxW": 2222 },
"appdist": { "x": 0, "y": 38470, "text": "휴대폰 앱 받기 — 설정 › 휴대폰 앱 · 휴대폰 받기 화면(로그인한 직원만) — 2026-11-08 확정(글은 화면 상수가 기준)", "kind": "title1", "maxW": 1440 }
},
"designSystems": []
}