실습형 강의 자료
AI를 활용한
아임웹 홈페이지 제작 교육
기획부터 디자인 방향 설정, 코드 생성, 아임웹 적용과 링크 연결까지. 나만의 홈페이지를 직접 완성하는 실전 수업입니다.
- 01내 홈페이지 기획 문서
- 02내 페이지의 디자인 방향
- 03아임웹에 적용된 랜딩 페이지
- 04링크까지 연결한 완성형 페이지
오늘 만들 결과물을
먼저 확인합니다
오늘의 목표는 ‘홈페이지를 예쁘게 꾸미는 것’이 아니라, 방문자가 이해하고 행동할 수 있는 페이지를 직접 만드는 것입니다.
시작 전 질문
- 내 홈페이지는 누구를 위한 페이지인가?
- 방문자가 가장 먼저 이해해야 할 내용은 무엇인가?
- 방문자가 페이지에서 취했으면 하는 행동은 무엇인가?
홈페이지 기획서를
작성합니다
홈페이지는 예쁜 화면보다 먼저, 무엇을 누구에게 어떻게 전달할지 정하는 과정이 필요합니다.
질문에 답하면서 홈페이지 기획서의 초안을 만듭니다. 완벽한 답을 찾기보다, 지금 만들 페이지의 중심을 잡는 데 집중합니다.
기획서에 담을 내용
- 소개할 서비스 또는 상품
- 주요 고객과 고객의 고민
- 제공하는 변화 또는 도움
- 핵심 메시지와 섹션 구성
- 방문자가 눌러야 할 버튼
“기획은 완벽한 답을 찾는 일이 아니라, 지금 만들 페이지의 중심을 정하는 일입니다.”
디자인 방향을
정합니다
디자인은 취향을 보여주는 장식이 아니라, 브랜드의 분위기와 신뢰를 전달하는 방식입니다.
디자인 방향을 정하는 방법
- 마음에 드는 홈페이지를 레퍼런스로 선택합니다.
- 이미 있는 브랜드 가이드의 색상·폰트·이미지 분위기·말투를 활용합니다.
Design.md 파일로 레퍼런스 얻기
아래 사이트에서 원하는 디자인을 참고하거나 Design.md 파일을 쉽게 내려받아 AI에게 전달할 수 있습니다.
첫 화면에서 무엇을 크게 보여주는지, 제목과 본문은 어떻게 구분되는지, 버튼이 어떤 행동을 유도하는지, 사진과 여백이 어떤 분위기를 만드는지 살펴봅니다.
AI에게 랜딩 페이지
코드를 요청합니다
기획서와 디자인 방향이 준비되면, 두 자료를 바탕으로 AI에게 페이지 제작을 요청합니다.
요청에 포함할 내용
- 홈페이지의 목적과 주요 고객
- 핵심 메시지와 필요한 섹션 순서
- 원하는 디자인 분위기, 색상, 폰트
- 버튼 문구와 연결할 링크
- 모바일에서도 보기 좋은 구성
아래 홈페이지 기획서와 디자인 가이드를 바탕으로 아임웹 코드 위젯에 넣을 랜딩 페이지 HTML/CSS를 만들어줘.
[홈페이지 기획서]
여기에 홈페이지 기획서 내용을 붙여넣기
[디자인 가이드]
첨부한 Design.md 참고해서 디자인
요청 사항
- 첫 화면에서 핵심 메시지가 바로 이해되게 구성해줘.
- 섹션마다 하나의 메시지만 명확히 보여줘.
- CTA 버튼 문구와 링크를 넣을 자리를 만들어줘.
- PC와 모바일에서 읽기 편하게 만들어줘.
- 아임웹 코드 위젯에서 바로 사용할 수 있도록 HTML과 CSS를 함께 작성해줘.
“좋은 결과물은 한 번의 요청에서 나오기보다, 원하는 방향을 구체적으로 설명할수록 가까워집니다.”
아임웹에 직접
적용합니다
생성한 코드를 아임웹 디자인 모드에서 직접 적용하고, 실제 화면을 확인합니다.
- 아임웹 디자인 모드로 이동합니다.
- 코드 위젯을 추가합니다.
- AI가 만든 HTML/CSS 코드를 붙여넣습니다.
- 저장 후 페이지를 확인합니다.
- PC와 모바일 화면을 함께 점검합니다.
화면 점검 체크
- 글자가 너무 작거나 빽빽하지 않은가?
- 버튼이 눈에 잘 띄는가?
- 이미지가 어색하게 잘리지 않는가?
- 모바일에서 내용의 순서가 자연스러운가?
메뉴와 기본 설정을
정리합니다
페이지를 만들었다면 방문자가 길을 잃지 않도록 기본 구조를 정리합니다.
- 메뉴와 페이지 이름을 설정했습니다.
- 메뉴와 페이지를 연결했습니다.
- 공개 여부와 기본 설정을 확인했습니다.
- 검색과 공유를 위한 기본 정보를 점검했습니다.
필요한 링크를
연결합니다
홈페이지의 버튼은 단순한 장식이 아니라, 방문자의 다음 행동을 안내하는 장치입니다.
연결할 수 있는 링크
- 신청 폼
- 카카오톡 채널 또는 오픈채팅
- 상품 구매 페이지
- 다른 소개 페이지
- 예약 페이지 또는 이메일 문의
버튼 문구 예시
신청하기 · 상담 문의하기 · 자세히 보기 · 프로그램 살펴보기 · 지금 시작하기
아임웹 위젯과 메뉴를
활용합니다
필요한 기능은 위젯으로 확장할 수 있습니다. 기능을 많이 넣기보다, 방문자의 행동을 돕는 기능부터 선택합니다.
자주 활용하는 기능
팝업 · 게시판 · 예약 · 상품 · 문의 폼 · 메뉴와 하위 페이지
“지금 내 홈페이지에 꼭 필요한 기능은 무엇인가?”
공유하고 피드백을
반영합니다
완성한 페이지를 함께 보고, 가장 효과가 큰 한 가지를 먼저 더 좋아지게 만듭니다.
가장 작은 실행으로
마무리합니다
피드백을 모두 반영하려 하기보다, 가장 효과가 큰 한 가지부터 수정합니다.
최종 체크리스트
- 홈페이지의 목적이 한 문장으로 설명된다.
- 주요 고객이 누구인지 분명하다.
- 핵심 메시지가 첫 화면에 있다.
- 버튼과 링크가 연결되어 있다.
- 모바일 화면을 확인했다.
- 다음에 보완할 한 가지를 정했다.
오늘 만든 페이지를 한 명에게 보내고, “처음 봤을 때 무엇을 하는 페이지인지 이해됐는지” 물어봅니다.
Participant Worksheet
참여자 실습지
아래 질문에 짧게 적으며 내 홈페이지의 중심을 잡아보세요.
AI를 활용한 아임웹 홈페이지 제작 교육 · 강의 자료
