gil/fe-agent
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

📝 docs: FE AI 표준화 HTML 문서 추가

Browse Source
This commit is contained in:
hyeonggil
2026-03-24 22:26:13 +09:00
parent 5b84d0f30a
commit 1440f335b7
1 changed files with 721 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

721
html/fe_ai_standardization.html Normal file
View File

@@ -0,0 +1,721 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FE AI 표준화 방안</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&display=swap');
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: 'Noto Sans KR', 'Apple SD Gothic Neo', sans-serif;
background: #0f0f1a;
color: #e0e0f0;
min-height: 100vh;
padding: 40px 20px;
}
#wrap {
overflow: auto;
max-height: 800px;
}
/* ─────────────────── HEADER ─────────────────── */
.header {
text-align: center;
margin-bottom: 60px;
}
.header .badge {
display: inline-block;
background: linear-gradient(135deg, #6366f1, #8b5cf6);
color: #fff;
font-size: 12px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
padding: 6px 18px;
border-radius: 20px;
margin-bottom: 16px;
}
.header h1 {
font-size: 36px;
font-weight: 900;
background: linear-gradient(135deg, #a5b4fc, #818cf8, #c4b5fd);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1.2;
margin-bottom: 12px;
}
.header p {
font-size: 15px;
color: #7b7fa0;
max-width: 600px;
margin: 0 auto;
}
/* ─────────────────── CROSS-CUTTING ─────────────────── */
.cross-cutting {
display: flex;
justify-content: center;
gap: 16px;
margin-bottom: 48px;
flex-wrap: wrap;
}
.cross-chip {
display: flex;
align-items: center;
gap: 8px;
background: rgba(99,102,241,0.15);
border: 1px solid rgba(99,102,241,0.4);
border-radius: 30px;
padding: 8px 20px;
font-size: 13px;
font-weight: 500;
color: #a5b4fc;
}
.cross-chip .dot {
width: 8px; height: 8px;
border-radius: 50%;
background: #6366f1;
animation: pulse 2s infinite;
}
@keyframes pulse {
0%,100% { opacity:1; transform:scale(1); }
50% { opacity:0.5; transform:scale(1.3); }
}
/* ─────────────────── FLOW CONNECTOR ─────────────────── */
.flow-wrapper {
max-width: 1100px;
margin: 0 auto;
}
.step-connector {
display: flex;
flex-direction: column;
align-items: center;
margin: 8px 0;
}
.connector-line {
width: 2px;
height: 40px;
background: linear-gradient(180deg, #4f46e5, #7c3aed);
}
.connector-arrow {
width: 0; height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 10px solid #7c3aed;
}
/* ─────────────────── PHASE CARD ─────────────────── */
.phase {
border-radius: 20px;
overflow: hidden;
margin-bottom: 6px;
box-shadow: 0 4px 30px rgba(0,0,0,0.4);
}
.phase-header {
display: flex;
align-items: center;
gap: 16px;
padding: 20px 28px;
}
.phase-number {
width: 44px; height: 44px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
font-weight: 900;
color: #fff;
flex-shrink: 0;
}
.phase-title-wrap {}
.phase-label {
font-size: 11px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
opacity: 0.7;
margin-bottom: 2px;
}
.phase-title {
font-size: 20px;
font-weight: 700;
color: #fff;
}
.phase-subtitle {
font-size: 13px;
opacity: 0.75;
color: #fff;
margin-top: 2px;
}
.phase-body {
padding: 24px 28px 28px;
background: rgba(255,255,255,0.03);
}
.items-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 14px;
}
.item-card {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 14px;
padding: 16px;
transition: transform 0.2s, box-shadow 0.2s;
}
.item-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.item-icon {
font-size: 22px;
margin-bottom: 8px;
}
.item-title {
font-size: 14px;
font-weight: 700;
color: #e2e2f0;
margin-bottom: 6px;
}
.item-tags {
display: flex;
flex-wrap: wrap;
gap: 5px;
}
.tag {
font-size: 11px;
padding: 2px 8px;
border-radius: 6px;
font-weight: 500;
}
/* AI badge */
.ai-badge {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.5px;
padding: 3px 8px;
border-radius: 6px;
background: linear-gradient(135deg, #f59e0b, #ef4444);
color: #fff;
margin-left: auto;
flex-shrink: 0;
}
.item-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 6px;
}
/* ─────────── PHASE COLOR THEMES ─────────── */
/* Phase 0: Cross-cutting - already handled */
/* Phase 1: 기획 - Indigo */
.phase-plan { background: linear-gradient(135deg, #312e81, #1e1b4b); }
.phase-plan .phase-header { background: linear-gradient(135deg, #4338ca, #3730a3); }
.phase-plan .phase-number { background: rgba(255,255,255,0.2); }
.phase-plan .tag { background: rgba(99,102,241,0.2); color: #a5b4fc; border: 1px solid rgba(99,102,241,0.3); }
/* Phase 2: 디자인 - Rose */
.phase-design { background: linear-gradient(135deg, #4a1942, #2d1b2e); }
.phase-design .phase-header { background: linear-gradient(135deg, #9d174d, #831843); }
.phase-design .phase-number { background: rgba(255,255,255,0.2); }
.phase-design .tag { background: rgba(244,63,94,0.2); color: #fda4af; border: 1px solid rgba(244,63,94,0.3); }
/* Phase 3: 구현 - Teal */
.phase-dev { background: linear-gradient(135deg, #134e4a, #0d3330); }
.phase-dev .phase-header { background: linear-gradient(135deg, #0f766e, #0d9488); }
.phase-dev .phase-number { background: rgba(255,255,255,0.2); }
.phase-dev .tag { background: rgba(20,184,166,0.2); color: #5eead4; border: 1px solid rgba(20,184,166,0.3); }
/* Phase 4: 검증 - Amber */
.phase-verify { background: linear-gradient(135deg, #451a03, #2d1104); }
.phase-verify .phase-header { background: linear-gradient(135deg, #b45309, #d97706); }
.phase-verify .phase-number { background: rgba(255,255,255,0.2); }
.phase-verify .tag { background: rgba(245,158,11,0.2); color: #fcd34d; border: 1px solid rgba(245,158,11,0.3); }
/* ─────────── OVERVIEW BANNER ─────────── */
.overview {
display: flex;
justify-content: center;
gap: 0;
margin-bottom: 48px;
flex-wrap: wrap;
}
.ov-step {
display: flex;
align-items: center;
}
.ov-box {
padding: 12px 20px;
border-radius: 12px;
text-align: center;
min-width: 130px;
}
.ov-num {
font-size: 11px;
font-weight: 700;
opacity: 0.7;
margin-bottom: 2px;
letter-spacing: 1px;
}
.ov-name {
font-size: 16px;
font-weight: 700;
color: #fff;
}
.ov-arrow {
font-size: 20px;
color: #4b5563;
padding: 0 6px;
}
.ov-plan { background: linear-gradient(135deg, #4338ca, #3730a3); }
.ov-design { background: linear-gradient(135deg, #9d174d, #831843); }
.ov-dev { background: linear-gradient(135deg, #0f766e, #0d9488); }
.ov-verify { background: linear-gradient(135deg, #b45309, #d97706); }
/* ─────────── SECTION DIVIDER ─────────── */
.section-divider {
display: flex;
align-items: center;
gap: 12px;
margin: 36px 0 20px;
}
.divider-line { flex:1; height:1px; background: rgba(255,255,255,0.1); }
.divider-label {
font-size: 11px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: #4b5563;
}
/* ─────────── CONVENTION DETAILS ─────────── */
.convention-pills {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 8px;
}
.conv-pill {
font-size: 11px;
padding: 3px 10px;
border-radius: 20px;
background: rgba(20,184,166,0.15);
color: #5eead4;
border: 1px solid rgba(20,184,166,0.25);
font-weight: 500;
}
/* ─────────── FOOTER ─────────── */
.footer {
text-align: center;
margin-top: 60px;
color: #374151;
font-size: 12px;
}
/* responsive */
@media (max-width: 600px) {
.header h1 { font-size: 26px; }
.items-grid { grid-template-columns: 1fr; }
.overview { flex-direction: column; align-items: center; }
.ov-arrow { transform: rotate(90deg); }
}
</style>
</head>
<body>
<div id="wrap">
<!-- HEADER -->
<div class="header">
<div class="badge">🤖 AI-Powered</div>
<h1>FE AI 표준화 방안</h1>
<p>브레인스토밍을 바탕으로 정리한 프론트엔드 AI 활용 표준화 단계별 가이드</p>
</div>
<!-- OVERVIEW FLOW -->
<div class="flow-wrapper">
<div class="overview">
<div class="ov-step"><div class="ov-box ov-plan"><div class="ov-num">STEP 01</div><div class="ov-name">📋 기획</div></div></div>
<div class="ov-arrow">→</div>
<div class="ov-step"><div class="ov-box ov-design"><div class="ov-num">STEP 02</div><div class="ov-name">🎨 디자인</div></div></div>
<div class="ov-arrow">→</div>
<div class="ov-step"><div class="ov-box ov-dev"><div class="ov-num">STEP 03</div><div class="ov-name">⚙️ 구현</div></div></div>
<div class="ov-arrow">→</div>
<div class="ov-step"><div class="ov-box ov-verify"><div class="ov-num">STEP 04</div><div class="ov-name">✅ 검증</div></div></div>
</div>
<!-- ═══════════ STEP 01: 기획 ═══════════ -->
<div class="phase phase-plan">
<div class="phase-header">
<div class="phase-number">01</div>
<div class="phase-title-wrap">
<div class="phase-label">Step 01 · Planning</div>
<div class="phase-title">📋 기획</div>
<div class="phase-subtitle">AI 기반 스펙 검토 · SEO · 번역 코드 자동화</div>
</div>
</div>
<div class="phase-body">
<div class="items-grid">
<div class="item-card">
<div class="item-header">
<div class="item-icon">🔍</div>
<span class="ai-badge">✦ AI</span>
</div>
<div class="item-title">스펙 검토 표준화</div>
<div class="item-tags">
<span class="tag">플로우차트 기준</span>
<span class="tag">기능 요건 정의</span>
</div>
</div>
<div class="item-card">
<div class="item-header">
<div class="item-icon">🌐</div>
<span class="ai-badge">✦ AI</span>
</div>
<div class="item-title">SEO 정보 표준화 및 검증</div>
<div class="item-tags">
<span class="tag">검증 도구 선정</span>
<span class="tag">검증 프로세스 표준화</span>
</div>
</div>
<div class="item-card">
<div class="item-header">
<div class="item-icon">🗣️</div>
<span class="ai-badge">✦ AI</span>
</div>
<div class="item-title">번역코드 생성 표준화</div>
<div class="item-tags">
<span class="tag">i18n 키 자동 생성</span>
</div>
</div>
</div>
</div>
</div>
<!-- connector -->
<div class="step-connector">
<div class="connector-line"></div>
<div class="connector-arrow"></div>
</div>
<!-- ═══════════ STEP 02: 디자인 ═══════════ -->
<div class="phase phase-design">
<div class="phase-header">
<div class="phase-number">02</div>
<div class="phase-title-wrap">
<div class="phase-label">Step 02 · Design</div>
<div class="phase-title">🎨 디자인</div>
<div class="phase-subtitle">Figma 네이밍 규칙 · EDM · 프로모션 템플릿 표준화</div>
</div>
</div>
<div class="phase-body">
<div class="items-grid">
<div class="item-card">
<div class="item-header">
<div class="item-icon">🖊️</div>
<span class="ai-badge">✦ AI</span>
</div>
<div class="item-title">피그마 네이밍 규칙</div>
<div class="item-tags">
<span class="tag">컴포넌트 명명 규칙</span>
</div>
</div>
<div class="item-card">
<div class="item-header">
<div class="item-icon">📧</div>
<span class="ai-badge">✦ AI</span>
</div>
<div class="item-title">EDM 마크업 표준화</div>
<div class="item-tags">
<span class="tag">이메일 템플릿 규격 정의</span>
<span class="tag">이메일 마크업 표준화</span>
<span class="tag">이메일 검증 도구 선정</span>
<span class="tag">이메일 검증 프로세스 표준화</span>
</div>
</div>
<div class="item-card">
<div class="item-header">
<div class="item-icon">🎯</div>
<span class="ai-badge">✦ AI</span>
</div>
<div class="item-title">프로모션 마크업 표준화</div>
<div class="item-tags">
<span class="tag">필요 정보 입력 방식</span>
<span class="tag">이미지 url, 기간, 유의사항, 아이템코드</span>
</div>
</div>
</div>
</div>
</div>
<!-- connector -->
<div class="step-connector">
<div class="connector-line"></div>
<div class="connector-arrow"></div>
</div>
<!-- ═══════════ STEP 03: 구현 ═══════════ -->
<div class="phase phase-dev">
<div class="phase-header">
<div class="phase-number">03</div>
<div class="phase-title-wrap">
<div class="phase-label">Step 03 · Implementation</div>
<div class="phase-title">⚙️ 구현 (개발)</div>
<div class="phase-subtitle">AI 코딩 · 컨벤션 · 리뷰 · CI/CD · 기술문서 자동화</div>
</div>
</div>
<div class="phase-body">
<div class="items-grid">
<div class="item-card">
<div class="item-header">
<div class="item-icon">💻</div>
<span class="ai-badge">✦ AI</span>
</div>
<div class="item-title">AI 코딩</div>
<div class="item-tags">
<span class="tag">Copilot</span>
<span class="tag">Cursor</span>
<span class="tag">코드 자동 완성</span>
</div>
</div>
<div class="item-card">
<div class="item-header">
<div class="item-icon">📐</div>
</div>
<div class="item-title">개발 컨벤션 표준화</div>
<div class="convention-pills">
<span class="conv-pill">i18n</span>
<span class="conv-pill">미들웨어</span>
<span class="conv-pill">언어정책</span>
<span class="conv-pill">점검</span>
<span class="conv-pill">인트로</span>
<span class="conv-pill">에러</span>
</div>
</div>
<div class="item-card">
<div class="item-header">
<div class="item-icon">🔄</div>
<span class="ai-badge">✦ AI</span>
</div>
<div class="item-title">코드 리팩토링</div>
<div class="item-tags">
<span class="tag">AI 리팩토링 제안</span>
<span class="tag">품질 개선</span>
</div>
</div>
<div class="item-card">
<div class="item-header">
<div class="item-icon">👁️</div>
<span class="ai-badge">✦ AI</span>
</div>
<div class="item-title">코드 리뷰 자동화</div>
<div class="item-tags">
<span class="tag">AI 코드 리뷰</span>
<span class="tag">MR/PR 자동 요약</span>
<span class="tag">Conflict 처리</span>
</div>
</div>
<div class="item-card">
<div class="item-header">
<div class="item-icon">📝</div>
<span class="ai-badge">✦ AI</span>
</div>
<div class="item-title">파일 수정 표준화</div>
<div class="item-tags">
<span class="tag">커밋 메시지 표준</span>
<span class="tag">단위 테스트 표준</span>
<span class="tag">테스트 코드 자동 생성</span>
</div>
</div>
<div class="item-card">
<div class="item-header">
<div class="item-icon">⚡</div>
<span class="ai-badge">✦ AI</span>
</div>
<div class="item-title">CI 파이프라인</div>
<div class="item-tags">
<span class="tag">파이프라인 스크립트 생성</span>
<span class="tag">빌드 오류 분석</span>
<span class="tag">최적화 제안</span>
</div>
</div>
<div class="item-card">
<div class="item-header">
<div class="item-icon">📚</div>
<span class="ai-badge">✦ AI</span>
</div>
<div class="item-title">기술 문서 자동화</div>
<div class="item-tags">
<span class="tag">기능별 ERD 작성</span>
<span class="tag">README 자동 생성</span>
<span class="tag">주석 자동 생성</span>
</div>
</div>
<div class="item-card">
<div class="item-header">
<div class="item-icon">🔒</div>
<span class="ai-badge">✦ AI</span>
</div>
<div class="item-title">보안검수 표준화</div>
<div class="item-tags">
<span class="tag">취약점 자동 탐지</span>
<span class="tag">보안 패턴 검사</span>
</div>
</div>
</div>
</div>
</div>
<!-- connector -->
<div class="step-connector">
<div class="connector-line"></div>
<div class="connector-arrow"></div>
</div>
<!-- ═══════════ STEP 04: 검증 ═══════════ -->
<div class="phase phase-verify">
<div class="phase-header">
<div class="phase-number">04</div>
<div class="phase-title-wrap">
<div class="phase-label">Step 04 · Verification</div>
<div class="phase-title">✅ 검증</div>
<div class="phase-subtitle">AI 기반 테스트 설계 · 통합 테스트 · 성능·보안 검토 · 버그 수정</div>
</div>
</div>
<div class="phase-body">
<div class="items-grid">
<div class="item-card">
<div class="item-header">
<div class="item-icon">🧪</div>
<span class="ai-badge">✦ AI</span>
</div>
<div class="item-title">테스트 케이스 설계</div>
<div class="item-tags">
<span class="tag">케이스 자동 생성</span>
<span class="tag">엣지 케이스 도출</span>
</div>
</div>
<div class="item-card">
<div class="item-header">
<div class="item-icon">🔗</div>
<span class="ai-badge">✦ AI</span>
</div>
<div class="item-title">기능·통합 테스트</div>
<div class="item-tags">
<span class="tag">테스트 자동화 스크립트</span>
<span class="tag">이슈 자동 탐지</span>
</div>
</div>
<div class="item-card">
<div class="item-header">
<div class="item-icon">⚡</div>
<span class="ai-badge">✦ AI</span>
</div>
<div class="item-title">성능·보안 검토</div>
<div class="item-tags">
<span class="tag">취약점 탐지</span>
<span class="tag">병목 분석</span>
</div>
</div>
<div class="item-card">
<div class="item-header">
<div class="item-icon">🐛</div>
<span class="ai-badge">✦ AI</span>
</div>
<div class="item-title">버그 리포트·수정</div>
<div class="item-tags">
<span class="tag">버그 원인 분석</span>
<span class="tag">수정 제안</span>
<span class="tag">자동 리포팅</span>
</div>
</div>
</div>
</div>
</div>
<!-- ─────────── SUMMARY TABLE ─────────── -->
<div class="section-divider">
<div class="divider-line"></div>
<div class="divider-label">AI 적용 포인트 요약</div>
<div class="divider-line"></div>
</div>
<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin-bottom:48px;">
<div style="background:rgba(99,102,241,0.12);border:1px solid rgba(99,102,241,0.3);border-radius:14px;padding:18px;text-align:center;">
<div style="font-size:28px;margin-bottom:8px;">📋</div>
<div style="font-weight:700;color:#a5b4fc;font-size:15px;">기획</div>
<div style="font-size:12px;color:#6b7280;margin-top:6px;line-height:1.6;">스펙 검토 · SEO 추출<br>번역 코드 생성</div>
</div>
<div style="background:rgba(244,63,94,0.12);border:1px solid rgba(244,63,94,0.3);border-radius:14px;padding:18px;text-align:center;">
<div style="font-size:28px;margin-bottom:8px;">🎨</div>
<div style="font-weight:700;color:#fda4af;font-size:15px;">디자인</div>
<div style="font-size:12px;color:#6b7280;margin-top:6px;line-height:1.6;">Figma 네이밍<br>EDM · 프로모션</div>
</div>
<div style="background:rgba(20,184,166,0.12);border:1px solid rgba(20,184,166,0.3);border-radius:14px;padding:18px;text-align:center;">
<div style="font-size:28px;margin-bottom:8px;">⚙️</div>
<div style="font-weight:700;color:#5eead4;font-size:15px;">구현</div>
<div style="font-size:12px;color:#6b7280;margin-top:6px;line-height:1.6;">AI 코딩 · 컨벤션<br>리뷰 · CI · 문서화</div>
</div>
<div style="background:rgba(245,158,11,0.12);border:1px solid rgba(245,158,11,0.3);border-radius:14px;padding:18px;text-align:center;">
<div style="font-size:28px;margin-bottom:8px;">✅</div>
<div style="font-weight:700;color:#fcd34d;font-size:15px;">검증</div>
<div style="font-size:12px;color:#6b7280;margin-top:6px;line-height:1.6;">테스트 자동화<br>성능·보안 · 버그 수정</div>
</div>
</div>
</div><!-- /flow-wrapper -->
<div class="footer">
FE AI 표준화 방안 · Smilegate FE Team · 2026
</div>
</div>
</body>
</html>