이온디
6개월 전
<style>
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
.page {
max-width: 800px;
margin: 0 auto;
padding: 60px 50px;
}
…
<style>
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
.page {
max-width: 800px;
margin: 0 auto;
padding: 60px 50px;
}
@media print {
.page {
padding: 40px;
}
.page-break {
page-break-before: always;
}
}
/* Header */
.header {
text-align: center;
margin-bottom: 50px;
padding-bottom: 40px;
border-bottom: 3px solid #2563eb;
}
.logo {
width: 120px;
margin-bottom: 20px;
}
.header h1 {
font-size: 32px;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 10px;
}
.header .subtitle {
font-size: 18px;
color: #2563eb;
font-weight: 500;
}
.header .company {
margin-top: 20px;
font-size: 14px;
color: #666;
}
/* Section */
.section {
margin-bottom: 45px;
}
.section h2 {
font-size: 22px;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 2px solid #e5e7eb;
}
.section h3 {
font-size: 18px;
font-weight: 600;
color: #374151;
margin: 25px 0 15px 0;
}
.section p {
margin-bottom: 15px;
color: #374151;
}
/* Problem List */
.problem-list {
list-style: none;
padding: 0;
}
.problem-list li {
padding: 12px 0 12px 30px;
position: relative;
border-bottom: 1px solid #f3f4f6;
}
.problem-list li:before {
content: "⚠️";
position: absolute;
left: 0;
}
/* Comparison Table */
.comparison-table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
}
.comparison-table th,
.comparison-table td {
padding: 15px;
text-align: left;
border: 1px solid #e5e7eb;
}
.comparison-table th {
background: #f8fafc;
font-weight: 600;
color: #1a1a1a;
}
.comparison-table td:last-child {
background: #eff6ff;
color: #1e40af;
font-weight: 500;
}
/* Highlight Box */
.highlight-box {
background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
border-left: 4px solid #2563eb;
padding: 25px;
margin: 25px 0;
border-radius: 0 8px 8px 0;
}
.highlight-box p {
margin: 0;
font-size: 16px;
color: #1e40af;
font-weight: 500;
}
/* Speed List */
.speed-list {
list-style: none;
padding: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
margin: 20px 0;
}
.speed-list li {
background: #f0fdf4;
padding: 15px;
border-radius: 8px;
text-align: center;
border: 1px solid #bbf7d0;
}
.speed-list li strong {
color: #15803d;
}
/* Demo Table */
.demo-table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
}
.demo-table th,
.demo-table td {
padding: 15px;
text-align: left;
border-bottom: 1px solid #e5e7eb;
}
.demo-table th {
font-weight: 600;
width: 30%;
}
.demo-table a {
color: #2563eb;
text-decoration: none;
}
/* Pricing Card */
.pricing-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin: 25px 0;
}
.pricing-card {
border: 2px solid #e5e7eb;
border-radius: 12px;
padding: 25px;
text-align: center;
}
.pricing-card.featured {
border-color: #2563eb;
background: #eff6ff;
}
.pricing-card h4 {
font-size: 16px;
color: #374151;
margin-bottom: 10px;
}
.pricing-card .price {
font-size: 28px;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 15px;
}
.pricing-card .price span {
font-size: 14px;
font-weight: 400;
color: #666;
}
.pricing-card ul {
list-style: none;
padding: 0;
text-align: left;
font-size: 14px;
}
.pricing-card ul li {
padding: 8px 0;
padding-left: 20px;
position: relative;
}
.pricing-card ul li:before {
content: "✓";
position: absolute;
left: 0;
color: #2563eb;
font-weight: bold;
}
/* Process */
.process-steps {
display: flex;
justify-content: space-between;
margin: 30px 0;
position: relative;
}
.process-steps:before {
content: "";
position: absolute;
top: 25px;
left: 50px;
right: 50px;
height: 2px;
background: #e5e7eb;
}
.process-step {
text-align: center;
position: relative;
z-index: 1;
}
.process-step .number {
width: 50px;
height: 50px;
background: #2563eb;
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 18px;
margin: 0 auto 10px;
}
.process-step .label {
font-size: 13px;
color: #374151;
}
/* CTA Box */
.cta-box {
background: #1e40af;
color: #fff;
padding: 35px;
border-radius: 12px;
text-align: center;
margin: 30px 0;
}
.cta-box h3 {
color: #fff;
font-size: 22px;
margin-bottom: 15px;
}
.cta-box p {
color: #bfdbfe;
margin-bottom: 10px;
}
/* About */
.about-list {
list-style: none;
padding: 0;
}
.about-list li {
padding: 10px 0 10px 30px;
position: relative;
}
.about-list li:before {
content: "•";
position: absolute;
left: 10px;
color: #2563eb;
font-size: 20px;
}
/* Contact */
.contact-box {
background: #f8fafc;
padding: 30px;
border-radius: 12px;
text-align: center;
}
.contact-box h3 {
margin-bottom: 20px;
}
.contact-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
text-align: left;
max-width: 500px;
margin: 0 auto;
}
.contact-item {
display: flex;
align-items: center;
gap: 10px;
}
.contact-item .icon {
width: 24px;
text-align: center;
}
.contact-item a {
color: #2563eb;
text-decoration: none;
}
/* Footer */
.footer {
margin-top: 50px;
padding-top: 20px;
border-top: 1px solid #e5e7eb;
text-align: center;
font-size: 13px;
color: #9ca3af;
}
</style>
<div class="page">
<!-- Header -->
<div class="header">
<img src="https://eond.com/files/attach/images/441847/2fd362f6524a9e817a49c35d52ff2f9d.svg" alt="EOND Logo" class="logo">
<h1>XE 사이트 현대화 제안서</h1>
<div class="subtitle">React 기반 프론트엔드 전환 솔루션</div>
<div class="company">이온디(EOND) · XE 전문 개발</div>
</div>
<!-- Problem Section -->
<div class="section">
<h2>문제 인식</h2>
<p>XE 기반 사이트를 오래 운영하셨다면 이런 고민이 있으실 겁니다.</p>
<ul class="problem-list">
<li>페이지 이동할 때마다 <strong>전체 새로고침</strong>으로 인한 느린 체감 속도</li>
<li><strong>모바일 환경</strong>에서의 불편한 사용자 경험</li>
<li>"XE는 옛날 기술"이라는 <strong>이미지 문제</strong></li>
<li>그렇다고 <strong>데이터 이전</strong>하며 플랫폼 바꾸기엔 부담</li>
</ul>
</div>
<!-- Solution Section -->
<div class="section">
<h2>솔루션: XE + React</h2>
<p><strong>기존 XE 구조는 그대로, 프론트엔드만 현대화합니다.</strong></p>
<table class="comparison-table">
<thead>
<tr>
<th>구분</th>
<th>기존 XE</th>
<th>React 전환 후</th>
</tr>
</thead>
<tbody>
<tr>
<td>페이지 전환</td>
<td>매번 새로고침</td>
<td><strong>즉시 전환 (SPA)</strong></td>
</tr>
<tr>
<td>체감 속도</td>
<td>클릭마다 대기</td>
<td><strong>앱처럼 빠름</strong></td>
</tr>
<tr>
<td>모바일 경험</td>
<td>기본 반응형</td>
<td><strong>네이티브 앱 수준</strong></td>
</tr>
<tr>
<td>기술 이미지</td>
<td>레거시 PHP</td>
<td><strong>최신 React 스택</strong></td>
</tr>
</tbody>
</table>
<h3>왜 가능한가?</h3>
<ul class="about-list">
<li>자체 개발한 <strong>XE REST API 모듈</strong> 활용</li>
<li>XE 데이터베이스/관리자 기능 <strong>100% 유지</strong></li>
<li>프론트엔드만 React로 교체하는 <strong>비파괴적 전환</strong></li>
</ul>
</div>
<!-- Speed Section -->
<div class="section">
<h2>체감 속도 차이</h2>
<p>React 기반 SPA(Single Page Application)의 특성상:</p>
<div class="highlight-box">
<p>초기 로딩 1회 후, 이후 페이지 전환은 거의 즉시 이루어집니다.</p>
</div>
<ul class="speed-list">
<li>게시판 목록 → 글 상세<br><strong>즉시</strong></li>
<li>카테고리 이동<br><strong>즉시</strong></li>
<li>검색 결과 표시<br><strong>즉시</strong></li>
</ul>
<p>기존 XE처럼 매번 서버에서 HTML을 받아오는 방식이 아니라,<br>필요한 데이터만 API로 받아와 화면을 갱신하기 때문입니다.</p>
</div>
<!-- Demo Section -->
<div class="section">
<h2>라이브 데모</h2>
<p>실제 React로 전환된 XE 사이트를 직접 체험해보세요.</p>
<table class="demo-table">
<tr>
<th>메인 사이트</th>
<td><a href="https://eond.com">https://eond.com</a></td>
</tr>
<tr>
<th>블로그</th>
<td><a href="https://eond.com/blog">https://eond.com/blog</a></td>
</tr>
<tr>
<th>포트폴리오</th>
<td><a href="https://eond.com/portfolio">https://eond.com/portfolio</a></td>
</tr>
</table>
<p><strong>직접 클릭해보시면 속도 차이를 체감하실 수 있습니다.</strong></p>
</div>
<div class="page-break"></div>
<!-- Pricing Section -->
<div class="section">
<h2>서비스 구성 및 가격</h2>
<div class="pricing-grid">
<div class="pricing-card">
<h4>React 스킨 패키지</h4>
<div class="price">50만원<span>~</span></div>
<ul>
<li>React 레이아웃 스킨</li>
<li>React 게시판 스킨</li>
<li>React 통합검색 스킨</li>
<li>설치 가이드 제공</li>
</ul>
</div>
<div class="pricing-card featured">
<h4>전체 사이트 전환</h4>
<div class="price">300만원<span>~</span></div>
<ul>
<li>XE REST API 모듈</li>
<li>React 풀 커스터마이징</li>
<li>디자인 반영/신규</li>
<li>설치 및 세팅 완료</li>
<li>유지보수 안내</li>
</ul>
</div>
<div class="pricing-card">
<h4>API 모듈 단독</h4>
<div class="price">200만원<span>~</span></div>
<ul>
<li>XE REST API 모듈</li>
<li>API 문서 제공</li>
<li>자체 개발팀용</li>
</ul>
</div>
</div>
</div>
<!-- Process Section -->
<div class="section">
<h2>진행 프로세스</h2>
<div class="process-steps">
<div class="process-step">
<div class="number">1</div>
<div class="label">문의 및 상담</div>
</div>
<div class="process-step">
<div class="number">2</div>
<div class="label">사이트 분석</div>
</div>
<div class="process-step">
<div class="number">3</div>
<div class="label">견적 안내</div>
</div>
<div class="process-step">
<div class="number">4</div>
<div class="label">개발</div>
</div>
<div class="process-step">
<div class="number">5</div>
<div class="label">검수 및 인도</div>
</div>
</div>
</div>
<!-- CTA Section -->
<div class="cta-box">
<h3>무료 사이트 진단</h3>
<p>관심이 있으시다면, 먼저 현재 사이트를 무료로 분석해드립니다.</p>
<p>현재 사이트 속도 측정 · React 전환 시 개선 포인트 · 예상 견적 및 일정</p>
</div>
<!-- About Section -->
<div class="section">
<h2>이온디(EOND) 소개</h2>
<ul class="about-list">
<li>XE 기반 디지털 제품 <strong>500개 이상</strong> 제작/판매</li>
<li>XE 커뮤니티 <strong>15년 이상</strong> 활동</li>
<li>React + XE REST API <strong>자체 개발</strong></li>
</ul>
</div>
<!-- Contact Section -->
<div class="contact-box">
<h3>연락처</h3>
<div class="contact-grid">
<div class="contact-item">
<span class="icon">🌐</span>
<a href="https://eond.com">eond.com</a>
</div>
<div class="contact-item">
<span class="icon">📧</span>
<a href="mailto:eond@eond.com">eond@eond.com</a>
</div>
<div class="contact-item">
<span class="icon">📞</span>
<span>0507-1433-0311</span>
</div>
<div class="contact-item">
<span class="icon">💼</span>
<a href="https://eond.com/services">서비스 안내</a>
</div>
</div>
</div>
<!-- Footer -->
<div class="footer">
© 2024 EOND. All rights reserved.
</div>
</div>