프레이머로 돈 없이 서비스 홍보 웹 만들기

돈, 코딩 실력 둘다 없는 디자이너 혼자 웹사이트 만든 썰

 

안녕하세요! 별헤는밤의 디자이너 S입니다.

이번 포스팅에서는 서비스 소개 웹사이트 제작기를 들려드릴게요.

 

발단은 커뮤니티 홍보였어요. 작년에 앱을 리뉴얼하며 다양한 곳에 서비스를 홍보하기 시작했는데,

글을 올릴 때 서비스 소개 사이트 링크도 함께 있으면 좋겠더라구요.

하지만 저희 팀은…🥲

 

1. 계획에 없던 호스팅 비용 (거지 이슈)
2. 개발자들은 앱 만드느라 바쁨
3. 리소스 남는 디자이너는 코딩 실력 제로

 

바로 이럴 때 유용하게 쓸 수 있는 툴! ‘프레이머’를 소개합니다.

*아래의 별헤는밤 소개 페이지를 프레이머로 제작했어요.

💫 https://starsurfers.framer.website/ 💫

(좌) PC 버전 (우) 모바일 버전

 

프레이머(Framer)란?

‘애니메이션, 페이징, 스크롤 등 다양한 기능을 제공하여 프로토타입을 만들 수 있게 해주는 웹 기반의 디자인 툴’

 

Framer — The web builder for stunning sites.

Framer — The web builder for stunning sites.

 

대충 피그마와 비슷한 툴이라고 보시면 이해가 쉬워요.

저는 그간 현업에서 피그마만 써와서, 프레이머를 ‘토스에서 쓰는 디자인 툴’ 정도로만 인지하고 있었는데요.

막상 써보니 피그마와 다른 여러 장점이 있었어요! 아래에서 하나씩 소개해 볼게요.

 

1. 개발자 없이 웹사이트 바로 완성

보통 디자이너는 웹 디자인이 끝나면 개발자가 웹을 완성해줄 때까지 기다려야 하는데요.

🐌  피그마로 디자인 완료 → 무한의 기다림(개발 → 개발 완료 → QA → 웹 호스팅&도메인 구매) → 웹사이트 완성

 

하지만 프레이머에선 디자인이 끝나자마자 웹을 완성할 수 있어요!

⚡ 프레이머로 디자인 완료 → Publish 클릭 → 웹사이트 완성

 

그간 50개가 넘는 서비스 소개 페이지를 만들며 사용해본 결과,

프레이머는 체감 상 거의 “완벽한 노코드 툴”로 원하는 대부분의 요소를 비개발자도 손쉽게 만들 수 있어요.

시간도, 인건비도 완전 단축!

 

 

2. 호스팅 + 도메인 비용 무료

보통 새로운 사이트를 인터넷에 등록하려면 호스팅 비용과 도메인 비용이 필요해요.

 

• 호스팅 비용 = 인터넷 공간 대여비
• 도메인 비용 = 그럴싸해보이는 웹 주소를 사는 것

 

하지만 프레이머에서는 이 모든 게 무료예요. 자체 지원하는 호스팅과 도메인이 있다고…? 🫢

아래처럼 클릭 몇번이면 웹이 완성됩니다.

 

이렇게 사용해요

프레이머 페이지를 만든 뒤, 우측 상단의 Publish 버튼을 눌러 도메인을 추가하고 업데이트 해주세요.

 

이렇게 빈 칸에 들어갈 키워드를 입력하면 1초만에 웹 주소가 생기고, 사이트를 확인해볼 수 있어요.

 

3. AI로 손쉽게 반응형 웹 레이아웃 제작

 

 

디자이너로서 가장 놀란 부분! 프레이머에는 ‘Start with AI’ 라는 생성형 AI 기능이 있어요.

원하는 웹사이트를 문장으로 설명하기만 하면 자동으로 만들어줘요.

 

AI로 페이지를 만들면 PC/태블릿/모바일 모두 대응되는 궁극의 반응형 UI 세트가 제공되는데요… 😱

귀찮게 하나씩 디자인하지 않아도 되고, 수정이 필요할 때도 세 화면의 컴포넌트들이 다 연동되어 있어서

메인으로 내세울 한가지 환경의 디자인만 수정하면 나머지도 알아서 바뀌니 매우 편했어요.

(아래 영상 참고)

 

이렇게 사용해요

‘별헤는밤’ 앱서비스를 소개하는 사이트를 만들어달라고 요청한 예시

 

 

위 예시처럼 AI 프롬프트를 입력해 하나의 페이지를 만든 뒤,

 

• 테마 컬러를 바꾸거나
• 일부 텍스트를 바꾸거나
• 일부 섹션을 삭제/추가하며 수정해요.

 

생성 결과와 다른 스타일의 사이트를 만들고싶다면 지우고 재시도 하세요.

 

디자이너인 저의 경우, AI로 틀을 잡고 세부 디자인은 전부 원하는대로 수정했지만

비디자이너라면 이 기능이 더욱 유용하겠죠? 마음에 드는 디자인이 나올 때까지 새로고침 한 뒤 사진과 텍스트만 바꾸면 돼요!

 

💡 프롬프트 작성은 어떻게 해요?

프롬프트란 AI에게 특정 내용을 요청하는 명령문이에요.

저는 영어를 잘 몰라서, ‘~한 특징을 가진 서비스 000을 소개하는 웹사이트를 만들어 줘’라는 내용을 먼저 한글로 쓴 다음 챗 GPT에게 영어 프롬프트로 바꿔달라고 요청했어요.

챗 GPT는 뤼튼( https://wrtn.ai/ ) 사이트를 이용했어요.

 

• 우리 서비스는 이러한 장점이 있어
• 웹사이트에 헤더 영역이 있게 해줘
• 웹사이트 최상단에는 사진을 크게 넣어줘… 등등

프롬프트는 구체적으로 요청할수록 좋겠죠?

 

마치며

지금까지 프레이머로 공짜 웹사이트를 만들어 본 후기였습니다. 😋

디자이너가 사용해본 입장에서 후기를 작성했지만, 비디자이너도 쉽게 쓸 수 있는 툴이라고 생각해요.

툴 자체에 대한 자세한 사용법은 인터넷에 많으니 참고해보세요!

 

솔직히, 프레이머 AI가 너무 편해서 웹 디자이너의 미래가 두려워지지만…

디자이너라도 저처럼 사이드 프로젝트를 할 때나, 빠르게 웹사이트를 제작해야 할 때

요긴하게 쓸 수 있는 툴 같아요. (포트폴리오 사이트로도 좋을 것 같네요!)

 

그럼 다들 프레이머로 광명 찾으시길 바랍니다 :D

 

🌟 디자이너가 이렇게 열심히 홍보하는 ‘별헤는밤’ 앱 다운로드!

별 헤는 밤: 밤하늘, 별자리, 여행정보와 날씨예보까지 - Apps on Google Play

별 헤는 밤: 밤하늘, 별자리, 여행정보와 날씨예보까지 - Google Play 앱

 

-

Notice

별헤는밤 디자인 블로그는 당분간 쉬어갈 예정입니다.