968 lines
40 KiB
HTML
968 lines
40 KiB
HTML
<html lang="ko" vid="0"><head vid="1">
|
|
<meta charset="UTF-8" vid="2">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" vid="3">
|
|
<title vid="4">Eroom AI Partners | Legal Tech Vertical AI Agent</title>
|
|
|
|
|
|
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" vid="5">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="" vid="6">
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Noto+Serif+KR:wght@300;400;500;600&display=swap" rel="stylesheet" vid="7">
|
|
<link rel="stylesheet" as="style" crossorigin="" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css" vid="8">
|
|
|
|
<style vid="9">
|
|
:root {
|
|
|
|
--bg-base: #FFFFFF;
|
|
--bg-surface: #F8F9FA;
|
|
--bg-surface-elevated: #FFFFFF;
|
|
|
|
--text-primary: #1A1A1A;
|
|
--text-secondary: #555555;
|
|
--text-muted: #888888;
|
|
|
|
--accent: #C52C75;
|
|
--accent-hover: #A3205E;
|
|
|
|
--border: #E5E7EB;
|
|
--border-light: #F3F4F6;
|
|
|
|
|
|
--brand-gradient: linear-gradient(135deg, #2E3759 0%, #C52C75 100%);
|
|
|
|
--font-sans: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;
|
|
--font-mono: 'Space Mono', monospace;
|
|
|
|
|
|
--space-xs: 4px;
|
|
--space-sm: 8px;
|
|
--space-md: 16px;
|
|
--space-lg: 32px;
|
|
--space-xl: 64px;
|
|
--space-2xl: 120px;
|
|
|
|
--container: 1200px;
|
|
}
|
|
|
|
|
|
*, *::before, *::after {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
body {
|
|
background-color: var(--bg-base);
|
|
color: var(--text-primary);
|
|
font-family: var(--font-sans);
|
|
line-height: 1.6;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
word-break: keep-all;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
transition: color 0.2s ease, opacity 0.2s ease;
|
|
}
|
|
|
|
a:hover {
|
|
color: var(--accent);
|
|
}
|
|
|
|
ul {
|
|
list-style: none;
|
|
}
|
|
|
|
|
|
.t-mono {
|
|
font-family: var(--font-mono);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.15em;
|
|
font-size: 0.75rem;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.font-serif { font-family: var(--font-sans); }
|
|
.text-accent { color: var(--accent); }
|
|
.text-secondary { color: var(--text-secondary); }
|
|
|
|
.label {
|
|
font-size: 0.75rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
color: var(--text-secondary);
|
|
font-weight: 600;
|
|
}
|
|
|
|
h1, h2, h3, h4 {
|
|
line-height: 1.3;
|
|
font-weight: 500;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
h1 { font-size: clamp(2.5rem, 5vw, 4rem); letter-spacing: -0.02em; }
|
|
h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); letter-spacing: -0.01em; }
|
|
h3 { font-size: 1.25rem; }
|
|
|
|
|
|
.container {
|
|
max-width: var(--container);
|
|
margin: 0 auto;
|
|
padding: 0 var(--space-lg);
|
|
}
|
|
|
|
section {
|
|
padding: var(--space-2xl) 0;
|
|
position: relative;
|
|
margin-bottom: 180px;
|
|
}
|
|
|
|
|
|
.section-header {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-md);
|
|
margin-bottom: var(--space-xl);
|
|
max-width: 800px;
|
|
}
|
|
|
|
.section-indicator {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-md);
|
|
font-family: var(--font-sans);
|
|
font-size: 1.275rem;
|
|
color: var(--text-muted);
|
|
border-bottom: 1px solid var(--border);
|
|
padding-bottom: var(--space-md);
|
|
width: 100%;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.dot {
|
|
width: 12px;
|
|
height: 12px;
|
|
background: var(--brand-gradient);
|
|
border-radius: 50%;
|
|
display: inline-block;
|
|
}
|
|
|
|
.index {
|
|
font-variant-numeric: tabular-nums;
|
|
font-weight: 600;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
|
|
nav {
|
|
position: fixed;
|
|
top: 0;
|
|
width: 100%;
|
|
background: rgba(255, 255, 255, 0.9);
|
|
backdrop-filter: blur(12px);
|
|
-webkit-backdrop-filter: blur(12px);
|
|
z-index: 100;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
.nav-inner {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
height: 72px;
|
|
}
|
|
|
|
.logo {
|
|
font-family: var(--font-sans);
|
|
font-size: 1.5rem;
|
|
font-weight: 500;
|
|
letter-spacing: -0.01em;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.nav-links {
|
|
display: flex;
|
|
gap: var(--space-lg);
|
|
font-size: 0.85rem;
|
|
font-weight: 500;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.nav-links a:hover {
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.nav-login {
|
|
color: var(--text-primary);
|
|
border-bottom: 2px solid var(--accent);
|
|
padding-bottom: 2px;
|
|
}
|
|
|
|
.nav-login:hover {
|
|
color: var(--accent);
|
|
}
|
|
|
|
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 12px 28px;
|
|
font-size: 0.9rem;
|
|
font-weight: 500;
|
|
border-radius: 4px;
|
|
transition: all 0.3s ease;
|
|
cursor: pointer;
|
|
border: 1px solid transparent;
|
|
letter-spacing: 0.02em;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: var(--brand-gradient);
|
|
color: white;
|
|
box-shadow: 0 4px 14px 0 rgba(197, 44, 117, 0.2);
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
color: white;
|
|
opacity: 0.9;
|
|
box-shadow: 0 6px 20px 0 rgba(197, 44, 117, 0.3);
|
|
transform: translateY(-1px);
|
|
background-color: transparent;
|
|
}
|
|
|
|
.btn-secondary {
|
|
background-color: transparent;
|
|
color: var(--text-primary);
|
|
border-color: var(--border);
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
background-color: var(--bg-surface);
|
|
border-color: var(--text-primary);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
|
|
.hero {
|
|
min-height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
padding-top: 72px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
|
|
.hero::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0; right: 0; bottom: 0; left: 0;
|
|
background-image:
|
|
linear-gradient(var(--border-light) 1px, transparent 1px),
|
|
linear-gradient(90deg, var(--border-light) 1px, transparent 1px);
|
|
background-size: 64px 64px;
|
|
opacity: 0.8;
|
|
mask-image: radial-gradient(circle at 50% 50%, black, transparent 70%);
|
|
-webkit-mask-image: radial-gradient(circle at 50% 50%, black, transparent 70%);
|
|
z-index: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.hero-content {
|
|
position: relative;
|
|
z-index: 1;
|
|
max-width: 900px;
|
|
}
|
|
|
|
.eyebrow {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
background: var(--bg-surface);
|
|
border: 1px solid var(--border);
|
|
padding: 6px 16px;
|
|
border-radius: 30px;
|
|
font-size: 0.8rem;
|
|
font-weight: 500;
|
|
color: var(--text-primary);
|
|
margin-bottom: var(--space-lg);
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.02);
|
|
}
|
|
|
|
.hero h1 {
|
|
margin-bottom: var(--space-md);
|
|
}
|
|
|
|
.hero p {
|
|
font-size: 1.1rem;
|
|
color: var(--text-secondary);
|
|
max-width: 600px;
|
|
margin-bottom: var(--space-lg);
|
|
}
|
|
|
|
.hero-cta {
|
|
display: flex;
|
|
gap: var(--space-md);
|
|
margin-bottom: var(--space-xl);
|
|
}
|
|
|
|
.tags-container {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--space-sm);
|
|
}
|
|
|
|
.tag {
|
|
font-size: 0.75rem;
|
|
color: var(--text-secondary);
|
|
background: var(--bg-surface);
|
|
padding: 6px 16px;
|
|
border-radius: 4px;
|
|
border: 1px solid var(--border);
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.tag:hover {
|
|
border-color: var(--text-muted);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
|
|
.grid-3 {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
gap: var(--space-lg);
|
|
}
|
|
|
|
.grid-2 {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
|
|
gap: var(--space-lg);
|
|
}
|
|
|
|
.card {
|
|
background-color: var(--bg-surface-elevated);
|
|
border: 1px solid var(--border);
|
|
padding: var(--space-lg);
|
|
border-radius: 8px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-md);
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px -1px rgba(0, 0, 0, 0.02);
|
|
}
|
|
|
|
.card:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.03);
|
|
border-color: var(--border);
|
|
}
|
|
|
|
.card-number {
|
|
font-family: var(--font-sans);
|
|
font-size: 2rem;
|
|
color: var(--border);
|
|
margin-bottom: auto;
|
|
font-weight: 300;
|
|
}
|
|
|
|
.card-title {
|
|
font-size: 1.25rem;
|
|
color: var(--text-primary);
|
|
border-bottom: 1px solid var(--border-light);
|
|
padding-bottom: var(--space-sm);
|
|
margin-bottom: var(--space-sm);
|
|
font-family: var(--font-serif);
|
|
}
|
|
|
|
.card p {
|
|
font-size: 0.95rem;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
|
|
.product-card {
|
|
position: relative;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
aspect-ratio: 4/3;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-end;
|
|
padding: var(--space-lg);
|
|
border: 1px solid var(--border);
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.product-img {
|
|
position: absolute;
|
|
top: 0; left: 0; width: 100%; height: 100%;
|
|
object-fit: cover;
|
|
z-index: 0;
|
|
transition: transform 0.5s ease;
|
|
}
|
|
|
|
.product-card:hover .product-img {
|
|
transform: scale(1.03);
|
|
}
|
|
|
|
.product-overlay {
|
|
position: absolute;
|
|
top: 0; left: 0; width: 100%; height: 100%;
|
|
background: linear-gradient(to top, rgba(20,20,20,0.95) 0%, rgba(20,20,20,0.5) 50%, rgba(20,20,20,0.1) 100%);
|
|
z-index: 1;
|
|
}
|
|
|
|
.product-content {
|
|
position: relative;
|
|
z-index: 2;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.product-content h3 {
|
|
font-family: var(--font-serif);
|
|
font-size: 1.75rem;
|
|
margin-bottom: var(--space-xs);
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.product-content p {
|
|
color: rgba(255, 255, 255, 0.85);
|
|
font-size: 0.95rem;
|
|
margin-bottom: var(--space-md);
|
|
max-width: 90%;
|
|
font-weight: 300;
|
|
}
|
|
|
|
.product-content .label {
|
|
color: #FFFFFF !important;
|
|
opacity: 0.9;
|
|
font-size: 1.125rem;
|
|
}
|
|
|
|
.product-meta {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
border-top: 1px solid rgba(255,255,255,0.2);
|
|
padding-top: var(--space-md);
|
|
margin-top: var(--space-md);
|
|
}
|
|
|
|
.product-meta .text-accent {
|
|
color: #FFB3D9 !important;
|
|
transition: color 0.2s ease;
|
|
}
|
|
|
|
.product-meta a:hover.text-accent {
|
|
color: #FFFFFF !important;
|
|
}
|
|
|
|
|
|
.workflow-container {
|
|
background: var(--bg-surface-elevated);
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
padding: var(--space-xl);
|
|
box-shadow: 0 4px 20px -5px rgba(0,0,0,0.03);
|
|
}
|
|
|
|
.workflow-step {
|
|
display: flex;
|
|
gap: var(--space-lg);
|
|
padding: var(--space-md) 0;
|
|
border-bottom: 1px solid var(--border-light);
|
|
}
|
|
|
|
.workflow-step:last-child {
|
|
border-bottom: none;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.step-icon {
|
|
flex-shrink: 0;
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 50%;
|
|
border: 1px solid var(--border);
|
|
background: var(--bg-surface);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 0.85rem;
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.step-content h4 {
|
|
font-size: 1.1rem;
|
|
margin-bottom: 6px;
|
|
font-family: var(--font-serif);
|
|
}
|
|
|
|
.step-content p {
|
|
font-size: 0.95rem;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
|
|
.data-table {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
margin-top: var(--space-lg);
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.02);
|
|
}
|
|
|
|
.data-cell {
|
|
padding: var(--space-lg);
|
|
border-right: 1px solid var(--border);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
background: var(--bg-surface-elevated);
|
|
}
|
|
|
|
.data-cell:last-child {
|
|
border-right: none;
|
|
}
|
|
|
|
.data-label {
|
|
font-size: 0.75rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
color: var(--text-muted);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.data-value {
|
|
font-family: var(--font-serif);
|
|
font-size: 1.05rem;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
|
|
.footer-cta {
|
|
text-align: center;
|
|
padding: var(--space-2xl) 0;
|
|
border-top: 1px solid var(--border);
|
|
background: var(--bg-surface);
|
|
}
|
|
|
|
.footer-cta h2 {
|
|
margin-bottom: var(--space-md);
|
|
}
|
|
|
|
.footer-cta p {
|
|
color: var(--text-secondary);
|
|
margin-bottom: var(--space-lg);
|
|
max-width: 500px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
|
|
@media (max-width: 768px) {
|
|
.nav-links { display: none; }
|
|
h1 { font-size: 2.2rem; }
|
|
.hero-cta { flex-direction: column; }
|
|
.data-table { grid-template-columns: 1fr; }
|
|
.data-cell { border-right: none; border-bottom: 1px solid var(--border); }
|
|
.grid-3, .grid-2 { gap: var(--space-md); }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body vid="10">
|
|
|
|
<nav vid="11">
|
|
<div class="container nav-inner" vid="12">
|
|
<div class="logo" vid="13">
|
|
</div>
|
|
<ul class="nav-links" vid="15">
|
|
<li vid="16"><a href="#" vid="17">회사 소개</a></li>
|
|
<li><a href="#">팀 소개</a></li>
|
|
<li vid="18"><a href="#" vid="19">서비스</a></li>
|
|
<li vid="20"><a href="#" vid="21">제품 소개</a></li>
|
|
<li vid="22"><a href="#" vid="23">도입 문의</a></li>
|
|
<li vid="24"><a href="#" class="nav-login" vid="25">로그인</a></li>
|
|
<li><a href="#" class="btn btn-primary" style="padding: 8px 16px; font-size: 0.85rem;">법률 에이전트 바로가기</a></li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
|
|
<main vid="26">
|
|
|
|
<section class="hero container" vid="27">
|
|
<div class="hero-content" vid="28">
|
|
<!-- Eroom AI Partners Logo -->
|
|
<div style="margin-bottom: 2.5rem;">
|
|
<img src="Eroom_AI_Partners_logo_transparent.svg"
|
|
alt="Eroom AI Partners"
|
|
style="height: clamp(3.75rem, 7.5vw, 6rem); width: auto; display: block;">
|
|
</div>
|
|
<div class="eyebrow" vid="29">
|
|
<span class="dot" vid="30"></span>
|
|
전문가용 Vertical AI Agent
|
|
</div>
|
|
<h1 class="font-serif" vid="31">전문가가 신뢰할 수 있는<br vid="32">최고 수준의 AI Agent를 만듭니다</h1>
|
|
<p vid="33">Eroom은 전문가용/기업용 지식 작업 AI Agent를 개발하고 운용하는 회사입니다. 우리는 Legal Tech를 시작으로, 전문가가 검토 후 곧바로 실무에 활용할 수 있는 실무형 AI Agent를 설계합니다.</p>
|
|
|
|
<div class="hero-cta" vid="34">
|
|
<a href="#" class="btn btn-primary" vid="35">서비스 보기</a>
|
|
<a href="#" class="btn btn-secondary" vid="36">회사 소개 보기</a>
|
|
</div>
|
|
|
|
<div class="tags-container" vid="37">
|
|
<span class="tag" vid="38">Legal Tech부터 시작하는 Full Vertical AI Agent</span>
|
|
<span class="tag" vid="39">도메인 지식, 실무 workflow, Human-in-the-Loop를 함께 설계한 AI</span>
|
|
<span class="tag" vid="40">문서 자동화가 아니라 실무 진행 구조까지 포함한 에이전트</span>
|
|
<span class="tag" vid="41">AI의 환각(hallucination)을 원천 방지하는 체계</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<section class="container" vid="42">
|
|
<div class="section-header" vid="43">
|
|
<div class="section-indicator" vid="44">
|
|
<span class="index" vid="45">01</span>
|
|
<span vid="46">진짜 문제(Pain Point)의 정의</span>
|
|
<span style="flex-grow: 1;" vid="47"></span>
|
|
<span class="dot" vid="48"></span>
|
|
</div>
|
|
<h2 class="font-serif" vid="49">영역별(Domain) 전문 작업에는 범용 AI를 적용하기 힘든 장벽이 존재합니다.</h2>
|
|
<p class="text-secondary" vid="50">Eroom은 전문 영역의 Last Mile Problem에 집중합니다.</p>
|
|
</div>
|
|
|
|
<div class="grid-3" vid="51">
|
|
<div class="card" vid="52">
|
|
<span class="card-number" vid="53">01</span>
|
|
<div vid="54">
|
|
<h3 class="card-title" vid="55">전문가의 작업흐름(Workflow) 부재</h3>
|
|
<p vid="56">전문가의 실제 업무는 단순 질의응답이 아니라 세밀하게 분류된 단계별 작업을 거쳐 전문 지식을 적용하고 재구성합니다.</p>
|
|
</div>
|
|
</div>
|
|
<div class="card" vid="57">
|
|
<span class="card-number" vid="58">02</span>
|
|
<div vid="59">
|
|
<h3 class="card-title" vid="60">도메인 지식 활용 시스템 부족</h3>
|
|
<p vid="61">예를 들어, 법률 영역에서 AI는 대한민국 법조계의 관행부터 한국의 문서구조, 법적 쟁점 구성, 실무적 관행까지 세부적인 지식체계를 다룰 수 있어야 합니다.</p>
|
|
</div>
|
|
</div>
|
|
<div class="card" vid="62">
|
|
<span class="card-number" vid="63">03</span>
|
|
<div vid="64">
|
|
<h3 class="card-title" vid="65">신뢰성 부족</h3>
|
|
<p vid="66">전문가가 AI가 생성한 결과물을 실무에 곧바로 적용하기 힘든 이유는 AI가 생성하는 결과물의 수준이 낮고, 결과물을 재현하거나 통제하기 힘들기 때문입니다.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<section class="container" style="margin-top: 100px;" vid="67">
|
|
<div class="section-header" vid="68">
|
|
<div class="section-indicator" vid="69">
|
|
<span class="index" vid="70">02</span>
|
|
<span vid="71">핵심 해법</span>
|
|
<span style="flex-grow: 1;" vid="72"></span>
|
|
<span class="dot" vid="73"></span>
|
|
</div>
|
|
<h2 class="font-serif" vid="74">Eroom은 전문가가 곧바로 실무에 적용할 수 있는<br vid="75">신뢰도 높은 AI Agent를 설계합니다</h2>
|
|
</div>
|
|
|
|
<div class="grid-2" vid="76">
|
|
<div class="card" vid="77">
|
|
<h3 class="card-title" vid="78">전문가의 작업흐름(Workflow) 내재화</h3>
|
|
<p vid="79">실제 업무 순서에 맞춘 단계형 구조로 작업흐름이 끊기지 않게 Agent를 설계합니다. 따라서 AI Agent는 실제 전문가처럼 동작합니다.</p>
|
|
</div>
|
|
<div class="card" vid="80">
|
|
<h3 class="card-title" vid="81">도메인 특화 설계</h3>
|
|
<p vid="82">예를 들어 대한민국 법조계에서 통용되는 법적 판단 기준, 업무 관행, 문서 형식, 계산 양식 등을 AI Agent에 정확히 반영합니다.</p>
|
|
</div>
|
|
<div class="card" vid="83">
|
|
<h3 class="card-title" vid="84">사용자와 AI의 상호작용(HITL) 도입</h3>
|
|
<p vid="85">사용자는 각 단계에서 확인, 재실행, 의견개진(혹은 수정)을 통해 에이전트의 작업 진행 방향을 통제합니다.</p>
|
|
</div>
|
|
<div class="card" vid="86">
|
|
<h3 class="card-title" vid="87">실무활용 산출물 중심</h3>
|
|
<p vid="88">중간 요약이나, 파편화된 개별 작업 결과물이 아니라, 예를 들어 소장, 준비서면, 법률자문서 같은 실제 업무 결과물 및 결과에 이르는 과정을 검토할 수 있는 내부검토용 문서도 함께 생성합니다.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<section class="container" style="margin-top: 100px;" vid="89">
|
|
<div class="section-header" vid="90">
|
|
<div class="section-indicator" vid="91">
|
|
<span class="index" vid="92">03</span>
|
|
<span vid="93">제품군(Production Suite)</span>
|
|
<span style="flex-grow: 1;" vid="94"></span>
|
|
<span class="dot" vid="95"></span>
|
|
</div>
|
|
<h2 class="font-serif" vid="96">Legal Tech에서 시작하는<br vid="97">Eroom의 Vertical AI Agent</h2>
|
|
<p class="text-secondary" style="max-width: 600px;" vid="98">Eroom의 첫 번째 진출 영역은 Legal Tech입니다. 우리는 소송과 법률자문 업무에서 변호사가 더 빠르고 안정적으로 실무를 진행할 수 있도록 제품을 설계하고 있습니다.</p>
|
|
</div>
|
|
|
|
<div class="grid-2" vid="99">
|
|
|
|
<div class="product-card" vid="100">
|
|
<div class="product-img" vid="101" style="overflow:hidden;">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600" preserveAspectRatio="xMidYMid slice" width="100%" height="100%" style="display:block;">
|
|
<defs>
|
|
<radialGradient id="litiScalesBg" cx="50%" cy="32%" r="62%">
|
|
<stop offset="0%" stop-color="#1c2f52"/>
|
|
<stop offset="55%" stop-color="#0d1829"/>
|
|
<stop offset="100%" stop-color="#05080f"/>
|
|
</radialGradient>
|
|
<filter id="litiGlow" x="-30%" y="-30%" width="160%" height="160%">
|
|
<feGaussianBlur stdDeviation="5" result="blur"/>
|
|
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
|
</filter>
|
|
<filter id="litiSoftGlow" x="-15%" y="-15%" width="130%" height="130%">
|
|
<feGaussianBlur stdDeviation="2.5" result="blur"/>
|
|
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
|
</filter>
|
|
</defs>
|
|
|
|
<!-- Background -->
|
|
<rect width="800" height="600" fill="url(#litiScalesBg)"/>
|
|
|
|
<!-- Subtle horizontal ruled lines suggesting legal documents -->
|
|
<g opacity="0.045" stroke="#c9a84c" stroke-width="1">
|
|
<line x1="0" y1="80" x2="800" y2="80"/>
|
|
<line x1="0" y1="160" x2="800" y2="160"/>
|
|
<line x1="0" y1="240" x2="800" y2="240"/>
|
|
<line x1="0" y1="320" x2="800" y2="320"/>
|
|
<line x1="0" y1="400" x2="800" y2="400"/>
|
|
<line x1="0" y1="480" x2="800" y2="480"/>
|
|
<line x1="0" y1="560" x2="800" y2="560"/>
|
|
</g>
|
|
|
|
<!-- Decorative side pillars suggesting courthouse columns -->
|
|
<g opacity="0.07" fill="#c9a84c">
|
|
<rect x="30" y="0" width="18" height="600"/>
|
|
<rect x="752" y="0" width="18" height="600"/>
|
|
</g>
|
|
|
|
<!-- ===== SCALES OF JUSTICE ===== -->
|
|
<g filter="url(#litiGlow)" opacity="0.88">
|
|
|
|
<!-- Central vertical pillar -->
|
|
<rect x="395" y="68" width="10" height="420" rx="5" fill="#c9a84c"/>
|
|
|
|
<!-- Top finial ornament -->
|
|
<circle cx="400" cy="56" r="14" fill="#c9a84c"/>
|
|
<circle cx="400" cy="56" r="7" fill="#0d1829"/>
|
|
<polygon points="400,20 388,58 412,58" fill="#c9a84c"/>
|
|
|
|
<!-- Pivot knob at beam center -->
|
|
<circle cx="400" cy="158" r="10" fill="#c9a84c"/>
|
|
|
|
<!-- Horizontal beam — slightly tilted for drama (left side UP, right side DOWN) -->
|
|
<line x1="128" y1="150" x2="672" y2="172" stroke="#c9a84c" stroke-width="8" stroke-linecap="round"/>
|
|
|
|
<!-- ── LEFT PAN (higher / winning side) ── -->
|
|
<!-- Hanging strings from left beam end -->
|
|
<line x1="135" y1="152" x2="92" y2="282" stroke="#c9a84c" stroke-width="2.5" opacity="0.85"/>
|
|
<line x1="135" y1="152" x2="200" y2="282" stroke="#c9a84c" stroke-width="2.5" opacity="0.85"/>
|
|
<!-- Left pan rim -->
|
|
<line x1="72" y1="282" x2="220" y2="282" stroke="#c9a84c" stroke-width="3.5"/>
|
|
<!-- Left pan bowl curve -->
|
|
<path d="M72,282 Q146,324 220,282" stroke="#c9a84c" stroke-width="3" fill="rgba(201,168,76,0.13)"/>
|
|
<!-- Left pan attachment rings -->
|
|
<circle cx="135" cy="152" r="7" fill="none" stroke="#c9a84c" stroke-width="2.5"/>
|
|
|
|
<!-- ── RIGHT PAN (lower / contested side) ── -->
|
|
<line x1="665" y1="174" x2="608" y2="334" stroke="#c9a84c" stroke-width="2.5" opacity="0.85"/>
|
|
<line x1="665" y1="174" x2="728" y2="334" stroke="#c9a84c" stroke-width="2.5" opacity="0.85"/>
|
|
<!-- Right pan rim -->
|
|
<line x1="588" y1="334" x2="748" y2="334" stroke="#c9a84c" stroke-width="3.5"/>
|
|
<!-- Right pan bowl curve -->
|
|
<path d="M588,334 Q668,378 748,334" stroke="#c9a84c" stroke-width="3" fill="rgba(201,168,76,0.13)"/>
|
|
<!-- Right pan attachment ring -->
|
|
<circle cx="665" cy="174" r="7" fill="none" stroke="#c9a84c" stroke-width="2.5"/>
|
|
|
|
<!-- Base pedestal -->
|
|
<rect x="350" y="488" width="100" height="14" rx="7" fill="#c9a84c"/>
|
|
<rect x="368" y="474" width="64" height="16" rx="5" fill="#c9a84c" opacity="0.75"/>
|
|
|
|
</g>
|
|
|
|
<!-- Faint secondary scales echo (depth effect) -->
|
|
<g opacity="0.08" filter="url(#litiSoftGlow)" stroke="#c9a84c" fill="none">
|
|
<line x1="128" y1="150" x2="672" y2="172" stroke-width="14"/>
|
|
<line x1="395" y1="68" x2="400" y2="490" stroke-width="18"/>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
<div class="product-overlay" vid="102"></div>
|
|
<div class="product-content" vid="103">
|
|
<span class="label" style="color: var(--text-primary); margin-bottom: 8px; display: inline-block;" vid="104">Liti-Agent</span>
|
|
<h3 vid="105">소송 문서 작성 AI Agent</h3>
|
|
<p vid="106">민사소송과 형사소송 업무에서 사건 자료를 정리하고 단계별 진행을 거쳐 최종 문서 작성을 지원하는 AI Agent.</p>
|
|
<div class="product-meta" vid="107">
|
|
<a href="#" class="text-accent" style="font-size: 0.9rem; font-weight: 500;" vid="108">소송 서비스 보기 →</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="product-card" vid="109">
|
|
<img src="https://images.unsplash.com/photo-1450101499163-c8848c66ca85?auto=format&fit=crop&q=80&w=1200" alt="Legal Advisory Network" class="product-img" vid="110">
|
|
<div class="product-overlay" vid="111"></div>
|
|
<div class="product-content" vid="112">
|
|
<span class="label" style="color: var(--text-primary); margin-bottom: 8px; display: inline-block;" vid="113">Litcon-Agent</span>
|
|
<h3 vid="114">법률자문 AI Agent</h3>
|
|
<p vid="115">의뢰서와 관련 자료를 바탕으로 리서치와 구조화를 거쳐 법률자문서 작성을 지원하는 AI Agent.</p>
|
|
<div class="product-meta" vid="116">
|
|
<a href="#" class="text-accent" style="font-size: 0.9rem; font-weight: 500;" vid="117">자문 서비스 보기 →</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="data-table" vid="118">
|
|
<div class="data-cell" vid="119">
|
|
<span class="data-label" vid="120">서비스 확대</span>
|
|
<span class="data-value" vid="121">금융(Finance)</span>
|
|
</div>
|
|
<div class="data-cell" vid="122">
|
|
<span class="data-label" vid="123">서비스 확대</span>
|
|
<span class="data-value" vid="124">헬스케어(Health Care)</span>
|
|
</div>
|
|
<div class="data-cell" vid="125">
|
|
<span class="data-label" vid="126">서비스 확대</span>
|
|
<span class="data-value" vid="127">교육(Education)</span>
|
|
</div>
|
|
<div class="data-cell" vid="128a">
|
|
<span class="data-label">서비스 확대</span>
|
|
<span class="data-value">제조(Manufacturing) 및 로보틱스(Robotics)</span>
|
|
</div>
|
|
</div>
|
|
<p class="text-secondary" style="font-size: 0.85rem; margin-top: var(--space-md); text-align: right;" vid="128">
|
|
향후 Eroom은 agriculture, robotics를 포함한 다양한 전문 산업으로 확장 가능한 AI Agent 서비스를 준비하고 있습니다.
|
|
</p>
|
|
</section>
|
|
|
|
|
|
<section class="container" style="margin-top: 100px;" vid="129">
|
|
<div class="section-header" vid="130">
|
|
<div class="section-indicator" vid="131">
|
|
<span class="index" vid="132">04</span>
|
|
<span vid="133">Agent와 사용자의 상호작용(HITL)</span>
|
|
<span style="flex-grow: 1;" vid="134"></span>
|
|
<span class="dot" vid="135"></span>
|
|
</div>
|
|
<h2 class="font-serif" vid="136">검토 가능한 구조가 신뢰를 만듭니다</h2>
|
|
<p class="text-secondary" vid="137">Human-in-the-Loop 기반의 단계형 workflow를 통해 전문가가 직접 통제합니다.</p>
|
|
</div>
|
|
|
|
<div class="workflow-container" vid="138">
|
|
<div class="workflow-step" vid="139">
|
|
<div class="step-icon" vid="140">1</div>
|
|
<div class="step-content" vid="141">
|
|
<h4 vid="142">투명한 진행 상태</h4>
|
|
<p vid="143">단계별 진행 상태를 실시간으로 확인할 수 있습니다.</p>
|
|
</div>
|
|
</div>
|
|
<div class="workflow-step" vid="144">
|
|
<div class="step-icon" vid="145">2</div>
|
|
<div class="step-content" vid="146">
|
|
<h4 vid="147">통제권 확보</h4>
|
|
<p vid="148">각 단계에서 재실행과 전문가의 의견 반영이 가능합니다.</p>
|
|
</div>
|
|
</div>
|
|
<div class="workflow-step" vid="149">
|
|
<div class="step-icon" vid="150">3</div>
|
|
<div class="step-content" vid="151">
|
|
<h4 vid="152">데이터 분리 관리</h4>
|
|
<p vid="153">입력 문서와 중간 산출물, 최종 산출물을 명확히 분리해 관리합니다.</p>
|
|
</div>
|
|
</div>
|
|
<div class="workflow-step" vid="154">
|
|
<div class="step-icon" vid="155">4</div>
|
|
<div class="step-content" vid="156">
|
|
<h4 vid="157">결과 중심 설계</h4>
|
|
<p vid="158">실무자가 즉시 검토하고 활용할 수 있는 실무 산출물 중심으로 작업합니다.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<section class="container" style="margin-top: 100px;" vid="159">
|
|
<div class="section-header" vid="160">
|
|
<div class="section-indicator" vid="161">
|
|
<span class="index" vid="162">05</span>
|
|
<span vid="163">Eroom AI Agent의 진정한 가치</span>
|
|
<span style="flex-grow: 1;" vid="164"></span>
|
|
<span class="dot" vid="165"></span>
|
|
</div>
|
|
<h2 class="font-serif" vid="166">사용자가 더 본질적인 일에<br vid="167">집중할 수 있도록</h2>
|
|
</div>
|
|
|
|
<div class="grid-3" vid="168">
|
|
<div class="card" style="border-top: 3px solid var(--accent);" vid="169">
|
|
<h3 class="card-title" style="border-bottom: none;" vid="170">본질적 작업 집중</h3>
|
|
<p vid="171">에이전트를 직접 감독(orchestrate)하여 자료 정리, 문서 작업 등을 진두지휘</p>
|
|
</div>
|
|
<div class="card" vid="172">
|
|
<h3 class="card-title" style="border-bottom: none;" vid="173">작업 처리 속도 극적 향상</h3>
|
|
<p vid="174">반복 업무를 구조화해 더 많은 사건을 더 빠르게 진행할 수 있는 기반을 제공합니다.</p>
|
|
</div>
|
|
<div class="card" vid="175">
|
|
<h3 class="card-title" style="border-bottom: none;" vid="176">업무 확장성 확보</h3>
|
|
<p vid="177">실무 프로세스를 정돈하고 누적해 사용자와 조직 모두의 처리 역량 확장을 돕습니다.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<section class="container" style="border-top: 1px solid var(--border); margin-top: 100px;" vid="178">
|
|
<div class="section-header" vid="179">
|
|
<div class="section-indicator" vid="180">
|
|
<span class="index" vid="181">06</span>
|
|
<span vid="182">비전과 확장</span>
|
|
<span style="flex-grow: 1;" vid="183"></span>
|
|
<span class="dot" vid="184"></span>
|
|
</div>
|
|
<h2 class="font-serif" vid="185">Legal Tech를 넘어<br vid="186">전문가 업무 전반으로</h2>
|
|
</div>
|
|
|
|
<div style="display: flex; flex-wrap: wrap; gap: var(--space-md);" vid="187">
|
|
<span class="tag" style="font-size: 1rem; padding: 10px 20px; border-radius: 30px;" vid="188">Legal Tech</span>
|
|
<span class="tag" style="font-size: 1rem; padding: 10px 20px; border-radius: 30px;" vid="189">Enterprise AI Agent System</span>
|
|
<span class="tag" style="font-size: 1rem; padding: 10px 20px; border-radius: 30px;" vid="190">Public Sector AI</span>
|
|
<span class="tag" style="font-size: 1rem; padding: 10px 20px; border-radius: 30px;" vid="191">Research Workflow AI</span>
|
|
<span class="tag" style="font-size: 1rem; padding: 10px 20px; border-radius: 30px;" vid="192">Industry-Specific SaaS</span>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<section class="footer-cta" vid="193">
|
|
<div class="container" vid="194">
|
|
<h2 class="font-serif" vid="195">실무에 연결되는 AI Agent를<br vid="196">가장 먼저 만나보세요</h2>
|
|
<p vid="197">Legal Tech를 시작으로, 전문가가 신뢰하고 사용할 수 있는 AI Agent 서비스를 Eroom이 만들어갑니다.</p>
|
|
<div style="display: flex; gap: var(--space-md); justify-content: center; margin-top: var(--space-lg);" vid="198">
|
|
<a href="#" class="btn btn-primary" vid="199">도입 문의하기</a>
|
|
<a href="#" class="btn btn-secondary" style="background: white;" vid="200">제품 상세 보기</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
|
|
</body></html> |