브런치 스토리

매거진 AI 로 생산성 10배 올리기

라이킷 15 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

프레이머 AI 로 PC/모바일 웹사이트 만들기

Framer AI로 웹사이트 쉽게 만들기

by 코아 Jun 08. 2024

프레이머(Framer)는 웹사이트와 애플리케이션을 쉽게 만들 수 있게 도와주는 강력한 디자인 도구입니다. 이 도구는 특히 시각적인 디자인과 코딩의 통합을 통해 사용자 경험(UX)과 사용자 인터페이스(UI)를 최적화하는 데 중점을 둡니다. 사용자는 드래그 앤 드롭 방식으로 다양한 컴포넌트를 배치하고 스타일을 적용할 수 있는 직관적인 인터페이스를 활용해 복잡한 UI를 손쉽게 구현할 수 있습니다. 이번 블로그에서는 Framer AI를 활용하여 PC와 모바일 웹사이트를 손쉽게 제작할 수 있는 방법을 소개합니다.

1. 회원가입

프레이머 사이트에서 회원가입을 완료한 후 로그인합니다. "Start your site" 버튼을 클릭하여 사이트 제작을 시작합니다.

Framer — The internet is your canvas

Framer is where teams design and publish stunning sites.

www.framer.com

2. 웹페이지 생성 및 배포

이제 AI를 활용해 본격적으로 웹사이트를 만들어 보겠습니다. 상단 메뉴에서 [Actions]를 클릭한 후 나타나는 팝업에서 AI 영역의 "Generate Page"를 선택합니다.

웹사이트에 대한 설명을 입력할 수 있는 프롬프트 창이 표시됩니다. 프롬프트를 명확하게 입력하는것은 만족스러운 결과물을 얻는 데 아주 중요합니다. 이를 위해 제가 사용 중인 템플릿도 공유드립니다. 각자의 제품이나 서비스에 맞게 설명을 수정하여 사용해보시기 바랍니다. 참고로, 프롬프트 아래에 글자 수 게이지가 표시되며 게이지가 다 차면 더 이상 내용이 반영되지 않으니, 주의해서 작성해 주세요.

프롬프트 템플릿(웹페이지 제작)

1. 내 제품/서비스 소개

제품/서비스 명

간단한 설명

다른 제품/서비스와 차별화되는 점

이 사이트의 분위기

2. 히어로 섹션

10자 이내의 슬로건

20자 이내의 부제목

인상적인 거대한 이미지

3. 특징 섹션

제품/서비스의 차별화에 대해 설명

아름다운 이미지 또는 멋진 시각적 요소

4. 고객 평가 섹션

가상 고객 평가 4개 작성

5. 갤러리 섹션

제품/서비스를 나타내는 이미지 삽입

제품/서비스를 사용하는 행복한 고객 사진 전시

6. 액션 영역

버튼을 통해 사용자에게 원하는 행동 취하도록 유도

7. FAQ 섹션

자주 묻는 질문 4개

프롬프트 템플릿 활용 방법

템플릿의 모든 내용을 직접 입력하는 것은 번거로울 수 있습니다. 이런 경우에 ChatGPT와 같은 도구를 활용하여 원하는 내용을 쉽게 작성할 수 있습니다. 예를 들어, "20 ~ 30대 직장인이 좋아하는 캐쥬얼 정장을 판매하는 사이트를 만들고 싶습니다. 아래 웹페이지 제작 템플릿에 맞춰서 영어로 작성해주세요" 라는 내용과 함께 템플릿을 붙혀넣고 자동 작성된 결과를 사용하는것 입니다.

프롬프트는 한국어보다 영어로 입력 시 결과물이 더 좋게 나오는 경우가 많아, 영어를 사용했습니다.

프롬프트를 입력하고 [Start] 버튼을 클릭합니다. 잠시 기다리면, 웹페이지가 생성되는 것을 확인할 수 있습니다. 생성된 페이지는 Desktop, Tablet, Phone 세 가지 버전으로 제공됩니다.

웹페이지의 디자인이 마음에 들지 않는다면 [Regenerate] 버튼을 클릭하여 다시 생성할 수도 있습니다. 또한, 웹페이지의 톤을 수정하려면 오른쪽의 Palettes 영역에서 원하는 색상을 선택하거나, Display Fonts 영역을 활용하여 보여지는 글꼴을 수정할 수 있습니다.

웹페이지를 배포하려면 우측 상단의 [Publish] 버튼을 클릭하고 원하는 사이트 주소를 입력한 후 배포를 시작합니다. 예를 들어, 'clasicwear.framer.ai'를 입력하여 생성해보겠습니다. 잠시 후 사이트가 생성되며, 클릭하면 사이트로 이동하는 것을 확인할 수 있습니다.

3. 웹페이지 수정

프레이머는 블록 형태의 툴이기 때문에, 블록을 이리저리 옮기며 페이지를 수정할 수 있습니다. 이미 만들어진 웹페이지의 블록을 드래그하여 위치를 바꿀 수도 있고 왼쪽 툴바에 제공되는 기능을 통해 화면을 편집할 수도 있습니다. 페이지(Page), 섹션(Sections), 네비게이션(Navigation), 메뉴(Menus)를 활용하여 웹페이지 디자인을 한층 업그레이드할 수 있습니다.

여기까지 프레이머 AI를 활용해 웹사이트를 만들어 보았습니다. 도움이 되셨나요? AI 도구를 잘 활용하면 누구나 손쉽게 웹사이트를 만들고 세부 사항을 수정하여 고퀄리티의 결과물을 얻을 수 있습니다. 창업을 준비 중이거나 개인 사이트가 필요하신 분들은 꼭 활용해보시기 바랍니다.

글이 마음에 드셨다면 하트 누르는것 잊지 마세요 ~