AI 블로그 글 생성기

기본 프롬프트

블로그 글 작성 완전 가이드:

## 📝 목표와 방향성
- 독자에게 실질적인 도움이 되는 고품질 콘텐츠 작성
- SEO 최적화된 구조와 키워드 활용
- 읽기 쉽고 이해하기 쉬운 설명
- 전문성과 신뢰성을 갖춘 내용

## 📖 목차 구성 (주제에 맞게 유연하게 조정)
글의 주제와 성격에 따라 다음 중 적절한 구조를 선택하여 사용:

**기술/튜토리얼 글:**
1. 개요 및 필요성
2. 준비사항과 기초 개념
3. 단계별 구현 가이드
4. 실무 활용 예제
5. 문제 해결과 팁
6. 마무리 및 다음 단계

**분석/리뷰 글:**
1. 배경과 현황
2. 핵심 특징 분석
3. 장단점 비교
4. 실제 사용 후기
5. 추천 대상
6. 결론 및 제언

**정보/가이드 글:**
1. 주제 소개
2. 기본 개념 정리
3. 세부 내용 1부
4. 세부 내용 2부
5. 실무 적용 방법
6. 요약 및 체크리스트

## 🎨 HTML 구조 및 CSS 활용
### 제목 태그 활용:
- **h1**: 메인 제목 (1개만)
- **h2**: 주요 섹션 제목
- **h3**: 하위 섹션 제목  
- **h4**: 세부 항목 제목

### 강조 요소:
- **strong 태그**: 핵심 키워드, 중요한 단어/문장에 적극 활용
- **em 태그**: 부차적 강조, 설명 포인트
- **mark 태그**: 하이라이트가 필요한 부분

### 콘텐츠 구조화:
- 목차에 앵커 링크 포함 (`<a href="#section1">`)
- 단락 구분 명확히
- 리스트 활용으로 가독성 향상

## 📊 테이블과 그래프 활용
### 테이블 사용 시기:
- 비교 데이터가 있을 때
- 단계별 정보 정리 시
- 기능/특징 매트릭스
- 가격/스펙 비교

### 그래프 제안:
- 진행 상황: 프로그레스 바
- 비율 데이터: 파이 차트 (CSS로 구현)
- 트렌드: 라인 차트 설명
- 비교: 막대 그래프 형태

## ✍️ 작성 스타일
- 친근하고 전문적인 톤앤매너
- 단계별 가이드 형식으로 구성
- 실무 예제와 코드를 적극 활용
- 최신 트렌드와 정보 반영
- **strong 태그**로 핵심 내용 강조

## 🔍 SEO 최적화
- 포커스 키워드를 **첫 문장**에 포함
- 키워드 밀도 1.5% 유지
- 목차에 앵커 링크 포함
- 메타 설명과 제목 최적화
- **strong 태그**를 이용한 키워드 강조

## 🛠️ 기술 요구사항
- 코드 블록에 언어 지정
- 이미지 alt 텍스트 포함
- 외부 링크에 rel="noopener" 추가
- 모바일 친화적 구조
- 시맨틱 HTML 활용

## 📋 필수 포함 요소
- **목차** (앵커 링크 포함)
- **FAQ 섹션** (질문/답변 형태)
- **요약/체크리스트** (주요 포인트 정리)
- **관련 리소스** (참고 링크, 도구 등)
- **결론** (핵심 내용 재정리)

기본 프롬프트 사용

CSS 스타일 편집기

제목 스타일

목차 스타일

글 내용 스타일

/* 글 내용 스타일 */
p {
    margin: 15px 0;
    line-height: 1.6;
    color: #333;
    text-align: justify;
}

/* 강조 요소들 */
strong {
    color: #007bff;
    font-weight: 700;
    background: linear-gradient(180deg, transparent 60%, rgba(0, 123, 255, 0.15) 60%);
    padding: 2px 4px;
    border-radius: 3px;
    font-size: 1.02em;
}

em {
    color: #6c757d;
    font-style: italic;
    font-weight: 500;
}

mark {
    background: linear-gradient(120deg, #ffeb3b 0%, #ffc107 100%);
    padding: 3px 6px;
    border-radius: 4px;
    color: #212529;
    font-weight: 500;
}

.highlight {
    background: #ffeb3b;
    padding: 2px 4px;
    border-radius: 3px;
}

.emphasis {
    color: #28a745;
    font-weight: bold;
}

/* 키워드 강조 스타일 */
.keyword-primary {
    background: linear-gradient(45deg, #007bff, #0056b3);
    color: white;
    padding: 4px 8px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.95em;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.keyword-secondary {
    background: linear-gradient(45deg, #28a745, #20c997);
    color: white;
    padding: 3px 6px;
    border-radius: 4px;
    font-weight: 500;
}

/* 인용구 및 콜아웃 */
blockquote {
    border-left: 4px solid #007bff;
    margin: 20px 0;
    padding: 15px 20px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    font-style: italic;
    color: #555;
    border-radius: 0 8px 8px 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

blockquote::before {
    content: """;
    font-size: 3em;
    color: #007bff;
    line-height: 0.1em;
    margin-right: 10px;
    vertical-align: -0.4em;
}

/* 리스트 스타일 */
ul {
    padding-left: 20px;
}

ul li {
    margin: 8px 0;
    position: relative;
}

ul li::marker {
    color: #007bff;
    font-weight: bold;
}

ol li {
    margin: 8px 0;
    padding-left: 5px;
}

ol li::marker {
    color: #007bff;
    font-weight: bold;
}

/* 코드 스타일 */
code {
    background: linear-gradient(135deg, #f1f3f4 0%, #e8eaed 100%);
    padding: 3px 8px;
    border-radius: 4px;
    font-family: 'Fira Code', 'Consolas', monospace;
    color: #d73a49;
    font-size: 0.9em;
    border: 1px solid #e1e4e8;
}

pre {
    background: linear-gradient(135deg, #f6f8fa 0%, #f1f3f4 100%);
    border: 1px solid #e1e4e8;
    border-radius: 8px;
    padding: 20px;
    overflow-x: auto;
    margin: 20px 0;
    position: relative;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

pre::before {
    content: "Code";
    position: absolute;
    top: 8px;
    right: 12px;
    font-size: 0.8em;
    color: #6c757d;
    background: rgba(255,255,255,0.8);
    padding: 2px 6px;
    border-radius: 3px;
}

pre code {
    background: none;
    padding: 0;
    color: inherit;
    border: none;
}

/* 섹션 구분 */
hr {
    border: none;
    height: 3px;
    background: linear-gradient(90deg, #007bff, #28a745, #ffc107, #dc3545);
    margin: 30px 0;
    border-radius: 2px;
}

표 스타일

/* 표 스타일 */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    background: white;
}

th, td {
    padding: 15px 18px;
    text-align: left;
    border-bottom: 1px solid #e9ecef;
    vertical-align: middle;
}

th {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    color: white;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.85em;
    letter-spacing: 1px;
    position: relative;
}

th::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, #28a745, #20c997);
}

tr:nth-child(even) {
    background: linear-gradient(135deg, #f8f9fa 0%, #f1f3f4 100%);
}

tr:hover {
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    transition: all 0.3s ease;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,123,255,0.15);
}

/* 비교 테이블 스타일 */
.table-comparison {
    margin: 25px 0;
}

.table-comparison th {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    text-align: center;
}

.table-comparison td {
    text-align: center;
    font-weight: 500;
}

.table-comparison .positive {
    color: #28a745;
    font-weight: bold;
}

.table-comparison .negative {
    color: #dc3545;
    font-weight: bold;
}

.table-comparison .neutral {
    color: #6c757d;
}

/* 스펙 테이블 스타일 */
.table-specs th:first-child {
    background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
    width: 30%;
    font-weight: 600;
}

.table-specs td:last-child {
    font-weight: 500;
    color: #007bff;
}

/* 단계별 테이블 */
.table-steps th {
    background: linear-gradient(135deg, #ffc107 0%, #fd7e14 100%);
    color: #212529;
}

.table-steps .step-number {
    background: #007bff;
    color: white;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    margin-right: 10px;
}

/* 반응형 테이블 */
.table-responsive {
    overflow-x: auto;
    margin: 20px 0;
    border-radius: 12px;
    box-shadow: 0 2px 15px rgba(0,0,0,0.1);
}

.table-striped tr:nth-child(odd) {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
}

.table-bordered {
    border: 2px solid #dee2e6;
}

.table-bordered th,
.table-bordered td {
    border: 1px solid #dee2e6;
}

/* 프라이싱 테이블 */
.pricing-table {
    text-align: center;
}

.pricing-table th {
    background: linear-gradient(135deg, #6f42c1 0%, #e83e8c 100%);
}

.pricing-table .price {
    font-size: 1.5em;
    font-weight: bold;
    color: #007bff;
}

.pricing-table .featured {
    background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
    border: 2px solid #ffc107;
}

/* 테이블 캡션 */
table caption {
    caption-side: top;
    padding: 10px;
    font-weight: 600;
    color: #495057;
    text-align: center;
    background: #f8f9fa;
    margin-bottom: 0;
    border-radius: 8px 8px 0 0;
}

그래프 스타일

/* 그래프 스타일 */
.chart-container {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    border-radius: 12px;
    padding: 25px;
    margin: 25px 0;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    border: 1px solid #e1e4e8;
    position: relative;
}

.chart-title {
    font-size: 1.3em;
    font-weight: 700;
    color: #333;
    margin-bottom: 20px;
    text-align: center;
    position: relative;
}

.chart-title::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, #007bff, #28a745);
    border-radius: 2px;
}

/* 프로그레스 바 */
.progress-bar {
    background: #e9ecef;
    border-radius: 15px;
    height: 25px;
    margin: 15px 0;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}

.progress-fill {
    height: 100%;
    background: linear-gradient(45deg, #007bff 0%, #28a745 50%, #ffc107 100%);
    border-radius: 15px;
    transition: width 2s ease-in-out;
    position: relative;
}

.progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, 
        transparent 30%, 
        rgba(255,255,255,0.3) 50%, 
        transparent 70%);
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.progress-label {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-weight: bold;
    color: white;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* 막대 그래프 스타일 */
.bar-chart {
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    height: 200px;
    margin: 20px 0;
    padding: 10px;
}

.bar {
    background: linear-gradient(180deg, #007bff 0%, #0056b3 100%);
    border-radius: 6px 6px 0 0;
    min-width: 40px;
    position: relative;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,123,255,0.3);
}

.bar:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 15px rgba(0,123,255,0.4);
}

.bar-label {
    position: absolute;
    bottom: -25px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.9em;
    color: #666;
    font-weight: 500;
}

.bar-value {
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    font-weight: bold;
    color: #007bff;
    background: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.8em;
}

/* 원형 그래프 (도넛 차트) */
.donut-chart {
    width: 200px;
    height: 200px;
    margin: 20px auto;
    position: relative;
}

.donut-segment {
    stroke-width: 30;
    fill: transparent;
    transition: stroke-width 0.3s ease;
}

.donut-segment:hover {
    stroke-width: 35;
}

/* 데이터 포인트 */
.data-point {
    display: inline-block;
    width: 25px;
    height: 25px;
    background: linear-gradient(45deg, #007bff, #0056b3);
    border-radius: 50%;
    margin: 8px;
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,123,255,0.3);
}

.data-point:hover {
    transform: scale(1.3);
    box-shadow: 0 4px 15px rgba(0,123,255,0.4);
}

.data-point::after {
    content: attr(data-value);
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.8em;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.data-point:hover::after {
    opacity: 1;
}

/* 범례 */
.legend {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 20px;
    padding: 15px;
    background: rgba(248,249,250,0.8);
    border-radius: 8px;
}

.legend-item {
    display: flex;
    align-items: center;
    margin: 8px 15px;
    padding: 5px 10px;
    background: white;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: transform 0.2s ease;
}

.legend-item:hover {
    transform: translateY(-2px);
}

.legend-color {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    margin-right: 10px;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.legend-text {
    font-size: 0.9em;
    color: #333;
    font-weight: 500;
}

/* 축 레이블 */
.axis-label {
    font-size: 0.9em;
    color: #666;
    font-weight: 600;
    text-align: center;
    margin: 10px 0;
}

.axis-x {
    border-top: 2px solid #dee2e6;
    padding-top: 10px;
}

.axis-y {
    border-right: 2px solid #dee2e6;
    padding-right: 10px;
    writing-mode: vertical-lr;
    text-orientation: mixed;
}

/* 통계 박스 */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
    margin: 20px 0;
}

.stat-box {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    border: 1px solid #dee2e6;
    transition: all 0.3s ease;
}

.stat-box:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.stat-number {
    font-size: 2em;
    font-weight: bold;
    color: #007bff;
    display: block;
}

.stat-label {
    font-size: 0.9em;
    color: #666;
    margin-top: 5px;
}

FAQ & Q&A 스타일

/* FAQ & Q&A 스타일 */
.faq-container {
    margin: 20px 0;
}

.faq-item {
    border: 1px solid #e1e4e8;
    border-radius: 8px;
    margin-bottom: 15px;
    overflow: hidden;
    transition: box-shadow 0.3s ease;
}

.faq-item:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.faq-question {
    background: #f8f9fa;
    padding: 15px 20px;
    font-weight: bold;
    color: #333;
    cursor: pointer;
    position: relative;
    border-bottom: 1px solid #e1e4e8;
}

.faq-question::before {
    content: "Q.";
    color: #007bff;
    font-weight: bold;
    margin-right: 8px;
}

.faq-question::after {
    content: "▼";
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.3s ease;
    color: #007bff;
}

.faq-question.active::after {
    transform: translateY(-50%) rotate(180deg);
}

.faq-answer {
    padding: 15px 20px;
    background: #fff;
    color: #555;
    line-height: 1.6;
}

.faq-answer::before {
    content: "A.";
    color: #28a745;
    font-weight: bold;
    margin-right: 8px;
}

.qa-section {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 20px;
    border-radius: 10px;
    margin: 20px 0;
}

기타 스타일

/* 기타 스타일 */
.alert {
    padding: 15px;
    border-radius: 6px;
    margin: 15px 0;
    border-left: 4px solid;
}

.alert-info {
    background: #d1ecf1;
    border-left-color: #17a2b8;
    color: #0c5460;
}

.alert-warning {
    background: #fff3cd;
    border-left-color: #ffc107;
    color: #856404;
}

.alert-success {
    background: #d4edda;
    border-left-color: #28a745;
    color: #155724;
}

.alert-danger {
    background: #f8d7da;
    border-left-color: #dc3545;
    color: #721c24;
}

.badge {
    display: inline-block;
    padding: 4px 8px;
    font-size: 0.8em;
    border-radius: 12px;
    background: #007bff;
    color: white;
    margin: 2px;
}

.footnote {
    font-size: 0.9em;
    color: #666;
    border-top: 1px solid #eee;
    padding-top: 10px;
    margin-top: 30px;
}

.callout {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 15px;
    margin: 15px 0;
}

.callout-header {
    font-weight: bold;
    color: #007bff;
    margin-bottom: 8px;
}

/* 반응형 스타일 */
@media (max-width: 768px) {
    table {
        font-size: 14px;
    }
    
    .faq-question,
    .faq-answer {
        padding: 12px 15px;
    }
    
    .chart-container {
        padding: 15px;
    }
}

프롬프트 템플릿 업로드

텍스트 파일을 드래그하거나 클릭하여 업로드

지원 형식: .txt, .md, .json

프롬프트 템플릿 저장

저장된 템플릿

사용자 프로필

타겟 독자

글쓰기 톤

콘텐츠 중점사항

실무 활용도 초보자 친화적 최신 트렌드 심층 분석 단계별 가이드 풍부한 예제

AI 블로그 글 생성기

API 연결 상태

키워드 입력

AI 블로그 글이 여기에 생성됩니다

생성된 HTML 소스 코드

SEO 스니펫 정보

이미지 프롬프트

이미지 프롬프트가 여기에 생성됩니다

생성된 이미지

AI 블로그 글 생성기

API 연결 상태

키워드 입력

AI 블로그 글이 여기에 생성됩니다

생성된 HTML 소스 코드

SEO 스니펫 정보

이미지 프롬프트

이미지 프롬프트가 여기에 생성됩니다

생성된 이미지

설정

기본 프롬프트 설정

제목 스타일

목차 스타일

글 내용 스타일

표 스타일

그래프 스타일

FAQ & Q&A 스타일

기타 스타일

로그인