기획까지 자동화?! AI 홈페이지 제작빌더 추천

홈페이지를 만들고 싶지만 첫 화면에 무엇을 넣을지, 메뉴는 어떻게 짤지 고민하다 포기하신 적 없으신가요? 특히 홈페이지 제작은 디자인보다 ‘기획’ 단계에서 어려움을 느끼는 분들이 정말 많습니다.

이번 포스팅에서는 AI가 홈페이지 기획을 대신 해주고, 이를 **피그마(Figma)**와 워드프레스로 옮겨 실제 사이트로 만들어주는 혁신적인 도구, RELUME AI 사용법을 소개해 드립니다.

AI 홈페이지 제작의 핵심, RELUME AI란?

RELUME AI는 사용자가 입력한 프롬프트를 바탕으로 사이트의 뼈대인 와이어프레임을 순식간에 그려주는 서비스입니다.

출처: RELUME AI 공식 홈페이지

STEP 1. 프롬프트로 기획안 생성하기

먼저 만들고자 하는 홈페이지의 컨셉을 입력해야 합니다.

• 명확한 설명 입력: “서울에 위치한 피부과이고, 진심 어린 진료를 강조하는 병원”처럼 구체적일수록 결과물이 좋습니다.
• 언어 팁: 영어가 익숙하지 않다면 한국어로 쓴 뒤 번역기를 활용해 입력해도 AI가 훌륭하게 알아듣습니다.
• 페이지 생성: ‘Generate’ 버튼을 누르면 AI가 히어로 섹션, 서비스 소개, 리뷰 등 필요한 구조를 쭉 뽑아줍니다.

STEP 2. 레이아웃과 내용, 디자인자유롭게 수정하기

AI가 만든 결과물이 100% 마음에 들지 않아도 걱정 마세요.

• 섹션 교체: 마음에 안 드는 레이아웃은 ‘Replace’ 버튼을 눌러 다른 디자인으로 즉시 바꿀 수 있습니다.
• 카피 수정: AI가 제안한 문구(예: 과잉 진료 없는 정직한 병원)를 내 브랜드 색깔에 맞춰 한글로 바로 수정하세요.

스타일가이드로 들어가면, 디자인 톤 (포인트 색상, 배경색상)도 자유롭게 수정할 수 있습니다.

STEP 3. 피그마(Figma)로 마법처럼 옮기기

기획이 끝났다면 이제 ‘디자인’을 입힐 차례입니다.

• 익스포트 기능: Relume에서 만든 와이어프레임을 ‘Export to Figma’ 기능을 통해 피그마로 보냅니다.
• 플러그인 활용: 피그마 내에서 Relume 플러그인을 실행하면 PC 버전뿐만 아니라 모바일 레이아웃까지 동시에 생성됩니다.

• 비유: 마치 밑그림이 그려진 컬러링북을 받는 것과 같습니다. 여러분은 색칠(사진 교체, 컬러 변경)만 하면 됩니다.

STEP 4. 피그마에서 워드프레스로 연동하기

AI를 활용하면 혼자서 며칠이 걸릴 기획 업무를 단 10분 만에 끝낼 수 있습니다. 피그마에서 디자인을 완성했다면, 다음 단계는 이를 실제 웹사이트로 운영 가능한 워드프레스로 옮기는 것입니다.

📝다음 포스팅에서는 피그마 디자인을 워드프레스로 옮기는 구체적인 방법을 다뤄보겠습니다.(링크클릭)

AI 홈페이지 제작빌더, RELUME AI 무료특강 (유튜브)

보다 자세한 가이드가 필요하신 분들을 위해, 유튜브 무료특강을 준비했습니다.

매달, 성수동에서 진행하는 워드프레스 현장수업

혼자서 워드프레스 공부하기 어려우신가요? 친절한 헨리와 함께 워드프레스 공부해보아요!

헨리의 워드프레스 강의 (WCS) 참석신청하기 (아래링크 클릭)