워드프레스 페이지 빌드 : 엘레멘터(Elementor) 대신 AI와 직접 코딩으로

안녕하세요, 생산적 회계사(PROCPA) 입니다.

지난 글에서는 블록시(Blocksy) 테마를 활용해 우리 집의 ‘인테리어(디자인 설정)’를 마쳤습니다. 이제 남은 건 실제 우리가 생활할 ‘방(페이지)’을 만드는 일입니다. 안방(Home), 서재(Blog), 창고(Docs) 등 각 목적에 맞는 공간을 어떻게 꾸밀지 고민할 차례입니다.

이번 글에서는 기존의 복잡하고 무거운 ‘페이지 빌더’ 대신, ‘AI(Gemini, Antigravity)와 직접 코딩’ 을 조합하여 가장 가볍고 자유로운 페이지를 만드는 저의 노하우를 공유합니다.

1. 6단계 : 메인 페이지 빌드 (정적 페이지)

블로그를 구성하는 주요 페이지(Home, About, Docs, Blog, Contact)를 만드는 과정입니다.

1.1. 페이지 빌드 방법 비교

워드프레스에서 페이지를 만드는 방법은 크게 세 가지가 있습니다.

엘레멘터(Elementor): 가장 유명한 페이지 빌더입니다. 드래그 앤 드롭으로 PPT 만들듯 쉽게 만들 수 있지만, 사이트 속도가 현저히 느려지고 코드가 지저분해집니다. 또한 모든 요소를 하나하나 직접 만들어야 해서 시간이 많이 걸리고, 동적 기능을 페이지에 구현하는 데 한계가 있습니다.
구텐베르그(Gutenberg): 워드프레스 기본 에디터입니다. 가볍지만 디자인 자유도가 떨어져 원하는 모양을 100% 구현하기 어렵습니다.
직접 코딩(Coding): HTML/CSS/JS/PHP를 직접 작성합니다. 압도적으로 빠르고(Speed) 내가 원하는 모든 것을 구현할 수 있는 자유도(Freedom) 가 장점입니다.

과거에는 3번 방식이 전문가(개발자)의 영역이었지만, 이제는 다릅니다. 우리에겐 AI 비서 가 있기 때문입니다. 저는 과감하게 ‘직접 코딩’ 방식을 선택했습니다.

왜 그냥 웹사이트를 만들지 않고 워드프레스에서 코딩하나요?
일반적으로 바닥부터 웹사이트를 개발(React, Next.js 등)하면 자유도는 무한하지만, ‘관리자 기능(CMS)’ 까지 직접 만들어야 하는 큰 부담이 있습니다. 글쓰기 에디터, 이미지 업로드, 데이터베이스 설계, 보안 업데이트 등을 모두 혼자 감당해야 합니다.
반면, ‘워드프레스 + 직접 코딩’ 방식은 ‘강력한 백엔드(관리자 기능)’는 워드프레스에게 맡기고, 방문자가 보는 ‘프론트엔드(화면)’만 내 입맛대로 만드는 하이브리드 전략입니다. 백엔드 구축 없이도 서비스 수준의 웹사이트를 가장 빠르게 만들 수 있는 방법입니다.

1.2. 직접 코딩을 위한 준비 (Setting)

직접 코딩을 위해 몇 가지 준비물이 필요합니다.

자식 테마(Child Theme): 원본 테마를 보호하기 위해 필수입니다. 지난 글에서 설치한 바 있습니다.
WP File Manager 플러그인: FTP 프로그램 없이 워드프레스 관리자 화면에서 직접 서버 파일을 수정할 수 있게 해주는 플러그인입니다.(Filezila와 같은 FTP 프로그램을 사용해도 됩니다.)
템플릿 구조 이해: PHP 파일 상단에 아래 주석을 달면 워드프레스가 이를 ‘페이지 템플릿’으로 인식합니다.

<?php
/*
 * Template Name: Custom Page
 */
get_header(); ?>
<!-- 여기에 내용 작성 -->
<?php get_footer(); ?>

요약하면, 외부에서 제작한 ‘페이지 템플릿’ 파일을 WP File Manager를 통해 자식 테마 폴더에 업로드한 뒤, 워드프레스 페이지 설정에서 해당 템플릿을 연결하기만 하면 됩니다. 그러면 작성한 코드 그대로의 페이지가 화면에 나타나게 됩니다.

1.3. AI 활용 워크플로우

제가 직접 경험하며 정립한 ‘AI 활용 워크플로우’ 는 다음과 같습니다. 비전공자도 충분히 따라 할 수 있는 4단계 프로세스입니다.

Step 1: 웹페이지 초안 디자인 (Gemini – 캔버스, 동적뷰)

먼저 Gemini에게 웹 디자이너 페르소나를 부여하고, 기획한 내용을 바탕으로 초안을 요청합니다. 특히 Gemini의 ‘캔버스(Canvas)’ 기능을 활용하면 실시간으로 화면을 보며 디자인을 수정할 수 있어 매우 직관적입니다.

[프롬프트 예시 (Home 페이지)]

아래의 사항 참고해서 생산적 회계사 워드프레스 블로그의 Home 페이지를 빌드해줘

- **Persona**: 당신은 현대적인 디자인에 능한 웹 프론트엔드 디자이너입니다.
- **Concept**: 전문성을 드러낼 수 있고 현대적인 컨셉의 디자인
- **Color**: Indigo, Blue
- **Script**
    - 1. 소개글: 블로그 방문을 환영합니다! 업무와 학습 과정에서 미래의 저를 위해 정리한 기록이 여러분들과 함께 성장하는 데 작은 힘이 되길 바랍니다.
    - 2. 주요 콘텐츠
        1. **Docs**: 회계/재무 실무 A to Z 가이드북. 수험서, 기준서만으로는 배울 수 없었던 ‘진짜’ 실무 가이드.
        2. **Blog**: 생산성에 진심인 회계사 블로그. 노션, 옵시디언 활용법 및 Python 업무자동화 노하우 공유.

[디자인 초안 결과물]

워드프레스 페이지 빌드 : 엘레멘터(Elementor) 대신 AI와 직접 코딩으로 | 블로그 구축 #04

Step 2: PHP 파일 변환 (Gemini)

디자인이 마음에 들면 Gemini에게 php파일 변환 업무를 맡깁니다. HTML/CSS를 직접 짤 필요 없이 말 한마디면 됩니다.

“이 디자인 그대로 Tailwind CSS를 적용한 HTML 코드로 변환해줘. 그리고 워드프레스 템플릿 파일 구조(get_header(), get_footer() 포함)로 만들어줘.”

이렇게 요청하여 만들어진 코드를 복사한 후 php파일로 저장합니다.

Step 3: 파일 세부 수정 (Antigravity)

이제 가장 중요한 단계입니다. 1차로 만들어진 코드를 다듬고, 동적인 기능을 추가하는 작업은 코딩 특화 AI인 Antigravity (또는 Cursor)에게 맡깁니다.

(Antigravity는 구글의 AI 기반 IDE인데, 구체적인 사용법은 추후 별도의 글에서 자세히 다루겠습니다.)

[요청 사항 예시]

“상단에 내 프로필 사진과 간단한 소개 섹션을 추가해줘.”
“하단에는 WP_Query를 사용해 추천 포스트 3개를 자동으로 불러오게 해줘.”
“내가 직접 개발했다는 것을 보여줄 수 있는 ‘Code Snippet’ 디자인 요소를 넣어줘.”

Step 4: 서버 업로드 (WP File Manager)

복잡한 FTP 프로그램(FileZilla 등)을 켤 필요가 없습니다. 플러그인을 통해 웹상에서 바로 배포합니다.

WP File Manager 플러그인을 실행합니다.
테마 폴더(/wp-content/themes/blocksy-child/)로 이동하여 완성된 PHP 파일을 업로드합니다.

워드프레스 페이지 편집 화면의 페이지 - 템플릿 속성에서 방금 업로드한 템플릿을 선택하면 적용이 완료됩니다.

1.4. 주요 페이지 핵심 코드

위 프로세스를 통해 실제로 구축한 주요 페이지들의 핵심 코드(Key Code) 와 구현 포인트 입니다.

1.4.1. Home

방문자가 처음 마주하는 얼굴입니다. 단순한 이미지 배치를 넘어 동적인 요소를 추가했습니다.

히어로 섹션: Brand Color(#2872fa)를 활용한 그라데이션과 ‘Fade-in-up’ 애니메이션(CSS)을 적용하여 생동감을 더했습니다.

/* Home.php: CSS Animation */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in-up {
    animation: fadeInUp 0.6s ease-out forwards;
}

개발자스러운 소개: 하단에 accountant.js 라는 가상의 코드 블록을 디자인 요소로 배치하여 ‘개발하는 회계사’라는 정체성을 시각화했습니다.

<!-- Home.php: Visual Code Block -->
<div class="bg-slate-800 ... font-mono text-sm ...">
    <span class="text-purple-400">class</span> <span class="text-yellow-300">Accountant</span> 
    <span class="text-purple-400">extends</span> <span class="text-yellow-300">Developer</span> {
        <span class="text-purple-400">constructor</span>() {
            <span class="text-red-400">super</span>();
            this.skills = ['CPA', 'Python', 'Web'];
        }
    }
</div>

1.4.2. Docs

실무지식을 체계적으로 정리하는 아카이브 공간입니다. 일일이 링크를 걸지 않고 코드로 자동화했습니다.

자동화된 카드형 레이아웃: Docs라는 상위 카테고리를 찾아 그 하위 카테고리(Sub-categories)를 자동으로 불러와 카드 형태로 뿌려줍니다. 이제 카테고리만 추가하면 페이지는 알아서 업데이트됩니다.

// Docs.php: Sub-category Fetching Logic
$parent_cat = get_term_by('slug', 'docs', 'category');

if ($parent_cat) {
    // 부모 카테고리(Docs)를 기준으로 자식 카테고리 호출
    $sub_categories = get_categories(array(
        'parent' => $parent_cat->term_id,
        'hide_empty' => false,
        'orderby' => 'id'
    ));

    foreach ($sub_categories as $cat) {
        // ... 카드 UI 렌더링 ...
    }
}

1.4.3. Blog

가장 공을 들인 페이지로, 워드프레스 기본 검색의 느린 속도(새로고침)를 개선했습니다.

카테고리 필터링 (Category Filter): 페이지 새로고침 없이(처럼 보이지만 실제로는 GET 요청) 빠르고 직관적인 카테고리 이동을 구현합니다. URL 파라미터를 통해 현재 카테고리를 인식하고 WP_Query를 돌립니다.

// Blog.php: Category Filter Logic
$current_slug = isset($_GET['cat_slug']) ? $_GET['cat_slug'] : 'blog';

$args = array(
    'category_name' => $current_slug, // URL 파라미터로 받은 슬러그로 쿼리
    'posts_per_page' => 9,
    'post_status' => 'publish',
);
$query = new WP_Query($args);

실시간 검색(Instant Search): PHP에서 모든 글 데이터를 미리 JSON으로 구워두고, 클라이언트(브라우저)에서 자바스크립트로 즉시 필터링합니다. 0.1초 만에 결과가 나옵니다.

// 1. PHP: 데이터를 JSON 포맷으로 준비 (Blog.php)
$blog_search_data[] = array(
    'title' => $post->post_title,
    'excerpt' => wp_strip_all_tags(get_the_excerpt($post->ID)),
    'content' => wp_strip_all_tags($post->post_content), // 검색용 본문
    'permalink' => get_permalink($post->ID),
    // ...
);

// 2. JS: 클라이언트 사이드 실시간 필터링
window.blogSearchData = <?php echo json_encode($blog_search_data); ?>;

// 검색어가 입력될 때마다 필터링
const filtered = window.blogSearchData.filter(item => {
    return item.title.toLowerCase().includes(term) ||
           item.content.toLowerCase().includes(term);
});
renderResults(filtered);

2. 마치며

이렇게 해서 ‘느린 빌더’ 없이 ‘AI와 코드’ 만으로 나만의 고유한 블로그를 구축했습니다.
처음에는 코드가 낯설 수 있지만, AI를 잘 활용하면 누구나 제가 만든 정도의 페이지는 충분히 만들 수 있습니다.

다음 글에서는 이번 글에서 다루지 못한 ‘싱글 페이지(Single.php)’ 와 ‘카테고리 페이지(Category.php)’ 의 상세한 커스터마이징 방법, 그리고 워드프레스의 핵심인 ‘functions.php’ 를 활용해 나만의 기능을 추가하는 심화 내용을 다뤄보겠습니다.

블로그 운영을 고민하시는 분들께 작은 도움이 되기를 바랍니다.