이번 실습은 1,2,3 과정 보다 더 쉽게, AI를 통해서 빠르게 만드는 과정이다.
Table of Content
1,2,3 장에서의 실습과 설명은 비전공, 웹개발 경험이 없는 대상을 위해 안내했지만, 이 과정도 다소 어렵게 느껴질 수 있는 왕초보들을 위한 AI 활용 방법이다.
1. AI에게 구성 만들도록 하기
•
Framer 홈페이지에서 Start with AI 선택
•
프로젝트 소개 페이지므로 Landing Page 선택 및 전송
•
알아서 에디터가 열리면서, 기본 레이아웃을 AI가 작성한다.
•
왼쪽 Ask Framer… 에서 원하는 것을 입력해보려고 한다.
◦
처음 입력한 정보는 다음과 같다.
나는 가상전시관 VEXPO라는 언리얼엔진 프로젝트를 개발했어
이것에 대한 프로젝트 소개 페이지로 구성해줘
프로젝트 설계 과정 이미지들과 레벨디자인 모습 내부/외부 여러 모습이 있고, 기능 구현에 대한 블루프린트 로직 정도의 이미지가 있어.
이걸 포함 할 수 있도록 준비해줘
새로운 페이지를 만들지말고 홈을 변경해줘
불필요한 연락하기, 회사 등은 제거해줘도 되
Shell
복사
•
실시간으로 AI가 페이지를 변경하기 시작한다.
•
간단한 레이아웃이나 설명 등을 통해 기본 레이아웃 정도를 빠르게 생성해주는 도움을 받을 수 있다.
◦
이미지 업로드나 내용 확인은 직접 확인, 수정해야 함
◦
CMS 등 복잡한 관리 시스템은 생성해주지 못함
•
AI는 지시한대로 움직이기 때문에 명령을 보다 명확하게 자세히 할 수록 좋은 결과를 만들어준다.
•
프로젝트를 홍보하고 영상, 이미지 등을 업로드하는 랜딩페이지 정도는 오히려 빠르게 구성 할 수 있음
2. 효과 등 수정해보기
•
원하는 이미지 등을 넣기만 해도 나만의 간단한 프로젝트 소개 홈페이지가 구성된다.
•
각 이미지나 텍스트, 레이아웃 프레임이 나타나거나 확대되는 각종 효과를 추가해보면서 꾸밀 수도 있다.
•
그 외 팀로고, 소셜프리뷰 이미지, Favicon 등 수정을 통해 완성도를 높일 수 있다.
•
아래 처럼 공유하는 링크에 이미지, 로고 아이콘들을 바꿀 수도 있다.
3. 배포하기
•
AI로 만든 페이지도 기본 배포하기와 동일하다. 2장의 [4. 홈페이지를 배포하기]와 동일하므로 보면서 브라우저에서 나의 홈페이지를 볼 수 있도록 설정해본다.
4. 참고사항
•
AI로 홈페이지를 만드는 내부 서비스는 무료로 진행되는 만큼 생각보다 세부적인 것까지 다룰 수 없는 한계가 있다.
•
따라서 빠르게 홈페이지를 시작하는것으로 AI를 활용하는 것을 추천하며, 직접 효과들을 적용한 사례들을 통해서 커스텀하는 것이 보다 완성도 높은 홈페이지를 만들 수 있는 방법이다.
