라이믹스용 서비스 레이아웃 el_service

스크린샷

el_service.0.1.zip

# el_service Layout

**Template v2** 기반 라이믹스 레이아웃 - 웹사이트 현대화 서비스 전문 레이아웃

## 🎯 개요

이온디서비스의 제로보드, 그누보드, XE 웹사이트 현대화 서비스를 위한 전문 레이아웃입니다. Template v2 (Blade) 문법을 사용하여 개발되었으며, 현대적인 UI/UX와 완전한 반응형 디자인을 제공합니다.

## ✨ 주요 특징

### 📱 완전한 반응형 디자인
- 모바일, 태블릿, 데스크톱 최적화
- 터치 친화적 인터페이스
- 접근성 준수 (WCAG 2.1 AA)

### 🛠️ Template v2 문법 사용
- `@version(2)` 선언
- Blade 문법 (`{{ }}`, `@if`, `@foreach`)
- 안전한 변수 출력 (XSS 방지)
- 컴포넌트 기반 구조

### 🎨 현대적 UI/UX
- Inter 폰트 사용
- CSS 변수를 통한 테마 커스터마이징
- 부드러운 애니메이션 및 트랜지션
- 그라데이션 및 그림자 효과

### ⚡ 성능 최적화
- 최소한의 CSS/JS 사용
- CDN 기반 폰트 로딩
- 이미지 최적화 대응
- 지연 로딩 지원

## 📁 파일 구조

```
el_service/
├── layout.html              # 메인 레이아웃 (Template v2)
├── conf/
│   └── info.xml             # 레이아웃 설정
├── assets/
│   ├── css/
│   │   └── style.min.css    # 통합 CSS 파일
│   ├── js/
│   │   └── script.js        # ES6+ JavaScript
│   └── img/                 # 이미지 리소스
├── pages/
│   ├── index.html           # 메인 랜딩 페이지
│   ├── request.html         # 상담 신청 페이지
│   └── service.html         # 서비스 소개 페이지
├── README.md                # 이 파일
└── CLAUDE.md               # 개발 가이드
```

## 🚀 설치 및 사용

### 1. 레이아웃 설치
```bash
# layouts 디렉토리에 el_service 폴더 전체 복사
cp -r el_service /path/to/rhymix/layouts/
```

### 2. 레이아웃 활성화
1. 라이믹스 관리자 페이지 접속
2. `사이트 관리` > `레이아웃` 메뉴 이동
3. `el_service` 레이아웃 선택 및 적용

### 3. 메뉴 설정
```xml
<!-- 기본 메뉴 구조 -->
- 서비스 소개 (mid: service)
- 무료 상담 (mid: request)  
- 포트폴리오 (mid: portfolio)
- 문의하기 (mid: contact)
```

## ⚙️ 레이아웃 설정

### 기본 정보
- **사이트 제목**: `{{ $layout_info->site_title }}`
- **사이트 설명**: `{{ $layout_info->site_description }}`
- **서비스 이름**: `{{ $layout_info->service_name }}`

### 색상 테마
- **주요 색상**: `{{ $layout_info->primary_color }}` (기본: #3b82f6)
- **보조 색상**: `{{ $layout_info->secondary_color }}` (기본: #10b981)

### 연락처 정보
- **회사 이메일**: `{{ $layout_info->company_email }}`
- **회사 전화번호**: `{{ $layout_info->company_phone }}`

### 소셜 미디어
- **페이스북 URL**: `{{ $layout_info->facebook_url }}`
- **트위터 URL**: `{{ $layout_info->twitter_url }}`

## 📄 페이지별 설명

### 🏠 메인 페이지 (pages/index.html)
- 히어로 섹션 (제목, 설명, CTA)
- 대시보드 목업 (현대화 완료 후 상태)
- 4단계 프로세스 소개
- 선택 이유 (25년 경험, 구버전 지원, 무손실)
- 고객 후기 (그라데이션 카드)
- 최종 CTA 섹션

### 📝 상담 신청 페이지 (pages/request.html)
- 4단계 폼 위저드 (진행률 표시)
- **1단계**: 기본 정보 (이름, 연락처, 웹사이트 URL)
- **2단계**: 시스템 정보 (CMS 선택, 문제점, 운영기간)
- **3단계**: 상담 내용 (상담 유형, 예산, 추가 문의)
- **4단계**: 완료 (다음 단계 안내)

### 🛠️ 서비스 소개 페이지 (pages/service.html)
- 탭 네비게이션 (문제별 해결, CMS별 서비스, 패키지)
- **문제별 해결**: 6가지 서비스 (긴급복구, 보안강화, 현대화, 모바일최적화, 지속관리, 종합솔루션)
- **CMS별 서비스**: 5가지 CMS (제로보드, 그누보드, XE, 라이믹스, 워드프레스)
- **패키지 상품**: 3가지 패키지 (기본 500만원, 표준 1,200만원, 프리미엄 2,500만원)

## 🔧 커스터마이징

### CSS 변수 수정
```css
:root {
  --primary-color: #your-color;
  --secondary-color: #your-color;
  --accent-color: #your-color;
}
```

### 레이아웃 설정 추가
```xml
<!-- info.xml에 새 설정 항목 추가 -->
<var name="custom_setting" type="text">
    <title xml:lang="ko">커스텀 설정</title>
    <default>기본값</default>
</var>
```

### 새 페이지 템플릿 추가
```html
<!-- pages/new_page.html -->
@version(2)
<div class="container mx-auto px-4 py-8">
    <h1>{{ $layout_info->page_title }}</h1>
    {!! $content !!}
</div>
```

## 🎛️ JavaScript 기능

### 서비스 레이아웃 클래스
```javascript
// 메인 JavaScript 클래스
const serviceLayout = new ServiceLayout();

// 공개 API 메서드
serviceLayout.showNotification('메시지', 'info');
serviceLayout.updatePageTitle('새 제목');
serviceLayout.setTheme('dark');
```

### 주요 기능
- **네비게이션**: 드롭다운 메뉴, 모바일 메뉴
- **폼 위저드**: 단계별 진행, 유효성 검사
- **탭 시스템**: 서비스 페이지 탭 전환
- **접근성**: 키보드 네비게이션, ESC 키 지원

## 🔒 보안 고려사항

### Template v2 보안 기능
- **자동 이스케이프**: `{{ $variable }}` 사용
- **Raw 출력 제한**: `{!! $variable !!}` 최소 사용
- **XSS 방지**: 모든 사용자 입력 검증

### 폼 보안
- **CSRF 토큰**: 모든 폼에 토큰 검증
- **입력 검증**: 클라이언트/서버 양쪽 검증
- **SQL 인젝션 방지**: 매개변수화된 쿼리 사용

## 🌐 브라우저 지원

### 지원 브라우저
- **Chrome**: 80+
- **Firefox**: 75+
- **Safari**: 13+
- **Edge**: 80+
- **모바일**: iOS Safari 13+, Chrome Android 80+

### 기술 요구사항
- **ES6+**: 모던 JavaScript 문법 사용
- **CSS Grid**: 레이아웃 구성
- **Flexbox**: 컴포넌트 정렬
- **CSS Variables**: 테마 시스템

## 📈 SEO 최적화

### 메타 태그
```html
<title>{{ $site_module_info->browser_title }}</title>
<meta name="description" content="{{ $layout_info->site_description }}">
<meta name="keywords" content="{{ $layout_info->meta_keywords }}">
```

### Open Graph
```html
<meta property="og:title" content="{{ $site_module_info->browser_title }}">
<meta property="og:description" content="{{ $layout_info->site_description }}">
<meta property="og:url" content="{{ getFullUrl() }}">
```

### 구조화된 데이터
- JSON-LD 스키마 지원
- 조직 정보 마크업
- 서비스 정보 구조화

## 🛠️ 개발 도구

### 추천 도구
- **VS Code**: Template v2 문법 지원
- **Browser DevTools**: 디버깅 및 성능 분석
- **Lighthouse**: 성능 및 접근성 검사

### 개발 워크플로우
1. **로컬 개발**: 라이믹스 로컬 환경 구성
2. **템플릿 수정**: pages/ 디렉토리에서 작업
3. **스타일 수정**: assets/css/style.min.css 편집
4. **테스트**: 다양한 기기와 브라우저에서 확인

## 🔄 업데이트 히스토리

### v1.0.0 (2025-01-02)
- **초기 릴리스**: Template v2 기반 완전한 레이아웃
- **3개 페이지**: index, request, service 템플릿
- **반응형 디자인**: 모든 기기 지원
- **접근성 준수**: WCAG 2.1 AA 기준

## 🤝 기여하기

### 버그 리포트
- GitHub Issues 사용
- 상세한 재현 단계 포함
- 브라우저 및 환경 정보 명시

### 기능 요청
- 구체적인 사용 사례 설명
- 예상 동작 방식 기술
- 대안 방안 고려사항

## 📞 지원 및 문의

### 기술 지원
- **이메일**: eond@eond.com
- **웹사이트**: https://eond.com
- **GitHub**: https://github.com/eond

### 상업적 사용
이 레이아웃은 EOND에서 개발한 상업적 목적의 전문 레이아웃입니다. 사용 전 라이선스 조건을 확인해주세요.

## 📄 라이선스

Copyright (c) 2025 EOND. All rights reserved.

---

**Made with ❤️ by EOND**