722 lines
24 KiB
HTML
722 lines
24 KiB
HTML
|
|
<!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>
|