프레이머 AI로 30초만에 랜딩페이지를 만드는 방법 (게다가 무료임)
Framer AI, 진짜 미쳤습니다. 놀랍습니다. 노코드 웹사이트 빌더 프레이머(Framer)가 AI 기반으로 웹사이트의 초안을 생성해주는 Framer AI 기능을 공개했습니다.
구체적으로 어떻게 프롬프트를 쓰고, 어떻게 초안을 생성하고, 어떻게 수정하는지 구체적인 방법을 가이드합니다. 생성형 AI와 노코드의 결합은 정말 놀랍습니다.
00:00 인트로, Framer 소개
01:21 프롬프트 가이드
02:40 첫번째 AI 작품 : 카페 홍보 페이지 (카페 장피엠)
05:36 두번째 AI 작품 : 실내 테니스장 홍보 페이지 (Tennis Master Club)
07:00 AI의 초안을 수정 개선하기
09:25 Framer AI 프롬프트 엔지니어링 한계점
10:26 마무리
#노코드 #생성형 #인공지능 #ai #framer #framerai #홈페이지 #랜딩페이지 #상세페이지
[이하는 제가 사용한 프롬프트 전문입니다]
Landing page for the product/service below. The landing page should act to sell my product/service. Use the section design guide below. The site should be bold and stunning. The site should include full-screen images.
[Details of the product/service]
- my product/service name :
- brief description :
- what makes my product/service different :
- the vibe of this site :
[Sections design guide]
1. Hero section
- Include the product/service name
- Write a main slogan short, impactful, and iconic within 10 words.
- Add a sub title within 15 words or less.
- Insert impressive huge image.
2. Features section
- Write about differentiation of my product/service.
- Insert beautiful images or cool visual elements.
3. Testimonials section
- Write fictional customer testimonials that align with site contents and tone.
4. Gallery section
- Insert more than 4 images that represent my product/service.
- Showcase happy customers using your product/service, close-up shots of specific products/services, etc
5. CTA section
- Write an eye-catching and memorable call to action.
6. FAQ section
- List at least 4 questions that customers might ask about this product/service.
7. Footer section
Write slogan, tagline, text description, all texts in Korean.
Пікірлер: 89
Framer AI 버튼 위치가 바뀌어서 안내드립니다. 상단의 Action 버튼을 누르시거나, 단축키 Cmd (Ctrl) + K를 누르시면 메뉴 중에 AI - Generate Page 기능이 있습니다.
저도 좋아요 먼저 누르고 영상 봅니다~앞서가는 장피엠님, 놀라운 정보 감사드립니다ㆍ
감사합니다. 잘 보고 있습니다~^^
웹사이트 디자인의 초안과 컨셉을 잡으려고 할 때 엄청 도움이 되겠네요....항상 앞서가는 장피엠님의 영상을 보면서 많이 배워요...
일단 좋아요 누르고 시청합니다 믿고보는 장피엠님이니까요~ㅎ
마지막 말씀 진동처럼 와닿습니다^^
안녕하세요! 기분 좋은 정보 감사합니다.🎉
자고나면 새로운 세상이 펼쳐지는 요즘 덕분에 또다른 툴을 접하게 되어서 정말 고맙습니다👍
@jangpm
Жыл бұрын
제가 더 감사합니다😊
장피엠님 늘 새로운 툴 소개해주셔서 감사해요 :) 도전해봐야겠습니다!
여기에 처음 들어가서 어떻게 해야 하나 처음에는 많이 당황스러웠는데, 알려준 덕분에 어떻게 해야 할지 점차 감이 잡혀지네요...처음에는 무료로 사용해보면서 연습을 해봐야 하겠어요....
와 너무 좋네요.그리고 마지막에 말씀 너무 공감합니다.일하는 방식 사업하는 방식이 바뀔겁니다.만능이라고 생각하기보다 사람의 생산성을 돕는 도구로 ai를 활용한다면 인간의 생산성 증대에 분명 도움이 될것 같습니다.자리마련해주세요 ㅎ
@jangpm
Жыл бұрын
네네 평범한사업가님 감사합니다!
코딩의 코자도 모르는데, 딴 분께서 추천해 주셔서 들어왔어요. 지금 역주행중인데(2년전 자료부터 정주행하기는 좀 부담스러워서 ^^;) 프레이머AI는 정말 놀라자빠질 정도의 아웃풋을 보여주는군요. 좋은 영상 감사드립니다.
@jangpm
Жыл бұрын
흥미롭게 봐주셔서 감사합니다! 새로운 시선을 제시하는 콘텐츠 크리에이터가 되도록 분발해보겠습니다앗..
좋은 영상 만들어주셔서 감사합니다. 저두 오늘부터 정주행!!
대박이네요.. 항상 좋은 것들 공유해주셔서 너무 감사드려요!!
@jangpm
10 ай бұрын
봐주셔서 감사합니다!
와 좋은 정보 감사합니다. 혹시 배너 광고 소재 리사이즈 자동으로 해주는 AI는 없을까요?
@jangpm
Жыл бұрын
vcat ai가 그런 솔루션 같아요 한번 살펴보세요
와~ 대박이네요~~ 꼭 한번 해볼께요 👍👍👍👍👍👍
또 하나 배워갑니다. 수고하셨습니다!
감사합니다. 피엠님~!
늘 좋은 컨텐츠 감사합니다. 그런데 html , css로 export는 안되는건가요? 무조건 여기서만 deploy 해야하는건지 궁금하네요.
@jangpm
Жыл бұрын
아쉽게도 코드 익스포트는 framer가 지원하지 않는다고 하네요ㅠ
워드프레스도 가능한가요? 아니면 프레이머 창작물은 그냥 html+js 구조인가요
너무 감사합니다^^
좋은 영상 너무너무 감사드랴요!! 혹시 고객의 결제를 받을수잇도록 결제서비스를 연동할수도잇나요??
@jangpm
Жыл бұрын
네네 가능해요 근데 프레이머 자체 기능은 아니고요. 페이플, 검로드, 토스페이먼츠 결제위젯과 같은 외부 결제 모듈을 가져다가 쓸 수 있습니다.
@davidjeong5881
Жыл бұрын
@@jangpm 아하 그렇군요 친절한 답변 감사합니다 장펨님
와 정말 미쳤다..
와 정말 너문 좋은 내용이네요 ㅜㅜ 지금까지 너무 힘들게 디자인 작업한거같아요 .. 듣고 배워야하네요 ㅠㅠ 상품 상세페이지도 프레이머로 디자인이 명령할수 있나요 ?? 가능하다면 혹시 프롬프트 양식 추천좀 부탁드려요 ~
@jangpm
Жыл бұрын
한국 스타일 상품 상세페이지는 저도 가장 관심 있는 분야이긴 한데 아직 만족할만큼 잘 안나오더라고요. 프롬프트로 디자인 스타일, 레이아웃, 개별 디자인 요소들이 생성되는 수준까지는 아직 잘 안되는거 같아요. 그렇지만 이런 부분도 점차 개선될거라 믿습니다. 아무튼 저도 관심 있는 주제지만 현재는 솔루션이 없어요...ㅋㅋ 솔루션이 생기고 공유해질만하면 다른 컨텐츠로 제작해볼게요. 구독자님도 영감이 떠오르면 저한테 귀뜸 좀 해주세요~
@shopierr
Жыл бұрын
@@jangpm 마케팅 자동화 관련 강의는 언제 오픈하며 가격은 얼마예요 ?
영상 너무 잘 보았습니다 혹시 메타 DR 이나 구글 GDN 광고 스크립트는 심을수 있나요 ?
@jangpm
11 ай бұрын
제가 메타 DR이나 구글 GDN은 정확히 모르는데요. framer는 각 프로젝트 별로 유료 비용을 지불하면 와 영역에 커스텀 코드를 넣을 수 있습니다. 아마 원하시는 기능은 커스텀 코드로 추가하실 수 있지 않을까 싶어요.
혹시 배포까지 도와주는건가요? 그럼 버튼을 눌렀을 때 해당 페이지로 이동하거나 게시물 작성 및 게시물 목록도 볼 수 있게 할 수 있나요…?
@jangpm
2 ай бұрын
배포도 바로 됩니다. 다만 멀티페이지 구성은 안될거예요. 일단은 각각 싱글페이지만 생성해주고 있고 그걸 연결하는건 수동으로 하셔야 합니다
@rick13299
2 ай бұрын
@@jangpm 감사합니다…항상 피그마로 디자인하고 코딩해서 배포했었는데 그냥 홍보용 페이지는 이렇게 만들어야겠어요
나아가야할 방향에 대해 많은 고민이 드네요… 제가 디자이너라서 그런지 조금은 무섭지만 사용성이 무궁무진해보여요 디자이너 없이도 상향평준화된 퀄리티의 결과물을 얻을 수 있다는 점에서 제 자리를 잃을까봐 불안하지만… 결과적으로는 안목과 미감이 있어야 이 중에서도 더더 높은 퀄리티를 만들어낼 수 있는 거니까 상향평준화 된 웹사이트 사이에서도 더 돋보이려면 디자이너가 필요는 하겠죠?🥹 아직까진 이런 AI가 문제해결 관점에서의 UX디자인을 하지도 못할 거라고 생각해서결국 디자이너는 살아남을거라고 자기위안을 해볼게요… 요즘은 PPT도 한장 한장 만들지 않고 웹사이트처럼 스크롤링 형식으로 제작해서 길게 연결된 한 페이지처럼 표현한 그래픽을 보여주는 경우도 많은데 그런 PPT 제작 초안 용도로 사용하기 좋아보여요! 간단하게 느낌만 내게 여러 선택지를 제작해서 클라이언트의 취향 파악을 하기도 좋아보이고 해커톤처럼 짧은 시간 내에 디자인을 해야할 때 갈아끼울 레이아웃 용으로 여러개의 시안을 만들어가기도 좋아보이네요 속상하지만… 변화하는만큼 저도 변해야겠죠! 오늘부터 프레이머 공부를 시작해봐야겠어요 💪🏻
@jangpm
Жыл бұрын
아직은 인간 디자이너의 파이널 터치가 꼭 필요한거 같습니다. 당장의 위협은 되시지 않을거예요. 그렇지만 말씀하신대로 나를 변화시키는 계기로 삼아보시는 것은 좋아보입니다. AI의 부각으로 디자이너의 일이라는게 과거와 똑같지 않을 가능성이 높기 때문입니다. 변화하는 기술 세계에서 내 일에 대해서 새롭게 바라보고, 다시 정의 내리고, 그 역량을 개발하는게 구독자님을 더 경쟁력있는 프로페셔널로 만들어주실겁니다. 제가 비디자이너로서 노코드 관련된 컨텐츠를 하면서 내가 디자이너 였으면 참 좋겠다는 생각을 많이 합니다. 오히려요. 조금만 미적으로 체계적인 관점으로 결과물을 만들 수 있으면 제 컨텐츠나 제 결과물의 퀄리티가 확 올라갈거 같다고 생각하거든요. 구독자님도 지금 가지고 계신 스킬셋의 경쟁력을 너무 과소평가하지는 마세요. 다만 거기에 무언가를 섞어보세요. 그러면 기존 디자이너보다 훨씬 뛰어나고 기존 창업가들보다 훨씬 뛰어난 무언가가 되어 계실거라 생각합니다.
오늘 랜딩 페이지 ai로 유투브 찾아보다가 이 영상을 보게되었어요.. 보자마자 framer 에 들어가서 한번해보려고하니 영상에서 보여주셨던 페이지가 안보여요.. 런칭 with AI로 아보이고..ㅠㅠ 제가 잘못 찿은건지 그새 바뀐건지..궁금해요.. 꼭 해보고싶은데 혹시 어실까요?
@jangpm
7 ай бұрын
현재 framer 기능 업데이트 때문에 잠시 비활성화되어 있대요 곧 다시 활성화시킨다는 framer 커뮤니티의 공식 답변이 있었으니 새해에 한번 확인해보세요~ 연말에는 아마 기능 업데이트가 안될듯 합니다
프레이머는 정말 Ai의 무서움을 느끼게 해주네요.
ai 로 프롬프트 입력하는것이 사라졌는데. 어떻게 된건가요?? 유료버전에서만 제공하는걸로 바뀐걸가요? ?
@jangpm
8 ай бұрын
그러네요! 현재 신규 기능 테스트 때문에 잠시 뺐는데 다음주에 다시 돌아온다고 합니다. (참고 : www.framer.community/c/bugs/missing-framer-ai) 제보해주셔서 감사합니다 :)
안녕하세요 영상 잘 봤습니다 접속하신 URL 복사해서 똑같은 사이트로 들어왔는데 보여주시는 첫 페이지가 왜? 다른지 모르겠어요 사파리,구글크롬 다르네요.. Start with AI가 없네요 전..ㅜㅜ
@jangpm
8 ай бұрын
framer 커뮤니티에서 제가 확인했는데요. 현재는 잠시 비활성화되어 있다고 합니다. 기능 업데이트 후에 재활성화된다고 하니 조금만 기다려주세요~
@TheSUKJIN
7 ай бұрын
@@jangpm 감사합니다
와, 이렇게만든 홈페이지, SEO 같은 것도 다룰 수 있을까요?
@jangpm
Жыл бұрын
SEO도 유료 플랜에서 셋팅 가능해요
@sleepcycle_
Жыл бұрын
@@jangpm 와, 감사합니다 ~~~ 😍🙌🏻
요금제 뭘써야할지 모르겠더라구요,, ㅋㅋ
여기서 만들어진 화면을 소프터나 웹플로우에 바로 적용하는 방법이있을까요?
@jangpm
Жыл бұрын
framer는 code export 기능을 제공하지 않습니다. 여기서 만든 결과물을 다른 노코드 툴에서 적용하기란 쉽지 않을거 같습니다.
질문있어요! 근데 게시판이나 결제 시스템은 어떻게 만드나요? 진짜 궁금해요!
@jangpm
9 ай бұрын
외부 플러그인을 커스텀 코드를 이용해서 임베드해야합니다. 질문하신 내용이 고급 사용자로 넘어갈때 엄청 큰 화두인데요. 간단히 답하기 어려운 내용이라 일단은 이렇게만 답을 드립니다.
@sunnyr6583
9 ай бұрын
오 그렇군요! 답변 달아주셔서 정말 감사합니다!@@jangpm
지금도 동일하게 무료로 이용 가능한가요? 뭔가 창이 달라진 것 같아서요
@jangpm
5 ай бұрын
좀 숨겨놨습니다. ctrl+K 단축키를 눌러보시면 거기에서 보이실겁니다
랜딩페이지 만든 후 따로 html 코드 따로 다운 받을 수 있을까요?
@jangpm
Жыл бұрын
framer는 코드 익스포트는 지원하지 않는거 같아요ㅠㅠ 아쉽게도
ai기능은 유료버전만되는건가요?
@jangpm
5 ай бұрын
메뉴가 업데이트 되서 좀 숨어들어갔어요. ctrl+K를 눌러보시면 거기서 ai 기능을 확인하실 수 있습니다
혹시 백엔드는 에어테이블로 프론트엔드는 프레이머로 할수 있나요???
@jangpm
11 ай бұрын
프레이머는 db 기능이 거의 없다 싶이한 쉬운 웹빌더라 에어테이블을 db나 백엔드로 사용하긴 어렵습니다.
@streemsofwater
11 ай бұрын
@@jangpm 음 , 제가 잘 이해못하나 싶은데요 ... 프레이머의 디비 기능이 거의 없다시피 하니까, 에이테이블이 그 기능을 보충해주지 않을까 싶어서요. 제가 개념을 잘못잡고 있나요???
@jangpm
11 ай бұрын
@@streemsofwater 프레이머에서는 데이터베이스와 상호작용을 하는 그러니까 백엔드가 있는 웹서비스를 만들수가 없어요 아예... 간단한 CMS가 있긴 하지만 블로그 처럼 미리 글을 발행하는 것만 가능하지 DB처럼 값을 업데이트하는게 불가능합니다. 프론트엔드에서 아예 받아서 처리할 수 없는 정말 간단한 웹빌더 (상세 페이지, 정적인 홈페이지 정도 만드는)기 때문에 에어테이블로 보완한다는게 불가능하다는 의견이었습니다. 제가 알기론 그래요...ㅋㅋ
포트폴리오 문서 ui를 잡아주는 툴은 없을까요?
@jangpm
Жыл бұрын
문서 ui를 잡아주는 툴은 제가 아는건 없네요ㅠㅠ 프레이머 AI도 레이아웃은 다소 랜덤인거 같습니다. 아직 결과물의 디자인적 요소까지 AI가 알잘딱깔센 딱 해주는건 잘 없는거 같습니다.
디자이너인데 신기하면서도 무섭군요 덜덜….
명령어는 영어만 가능해요?
@jangpm
5 ай бұрын
한국어도 가능합니다 근데 아마 영어로 했을때 품질이 더 좋을거예요
ai 입력창이 현재는 사라진걸까요? 보이질 않네요 ㅠ
@jangpm
8 ай бұрын
현재 신규 기능 테스트 때문에 잠시 뺐는데 다음주에 다시 돌아온다고 합니다. (참고 : www.framer.community/c/bugs/missing-framer-ai) 제보해주셔서 감사합니다 :)
@williamim9508
8 ай бұрын
@@jangpm 알려주셔서 정말 감사합니다
사이트 아무리 뒤져도 start with AI 가 없네요
@jangpm
8 ай бұрын
그러네요! 현재 신규 기능 테스트 때문에 잠시 뺐는데 다음주에 다시 돌아온다고 합니다. (참고 : www.framer.community/c/bugs/missing-framer-ai) 제보해주셔서 감사합니다 :)
START WITH AI를 못찾겟어요ㅠㅠ
@jangpm
6 ай бұрын
이 기능이 현재 12월 중순부터 deactivate되어 있어요. 유료화는 아니고 무료로 계속 쓸 수 있게 한다고는 하는데 framer 측에서 현재는 비활성화해놓고 있습니다. 2024년에 오픈한다고 했는데 기약이 없네요. 일단은 조금 더 기다려보셔야 할거 같아요. 영상으로 소개했는데 못써보시는 상황이라 저도 아쉽고 죄송하네요ㅠㅠ
이용자 vs 구경자
저는 왜 ai가 안뜨죠?ㅜㅜ
@jangpm
7 ай бұрын
2024년 1월에 다시 기능이 돌아온다고 프레이머 공식 커뮤니티에서 밝혔는데요.아직 안돌아오고 있네요ㅠㅠ relume 이라는 대안 서비스를 한번 써보세요
이거이제안되는건가요?
@jangpm
5 ай бұрын
됩니다. 메뉴가 좀 숨어있어요. ctrl+K 단축키를 눌러보시면 ai로 생성 기능이 보이실 겁니다
디자인이 전반적인 프롬프트와 맙지는 않는거 같네요. 이미지를 교체를 하면 되겠지만요.
@jangpm
Жыл бұрын
프롬프트에 대해서도 연구가 더 필요한거 같고요. 툴도 더 좋아질거 같습니다. 디자인적인 요소 마저도 프롬프트로 반영할 수 있도록 프레이머가 발전하거나 그런게 가능한 다른 툴이 나오면 정말 좋겠네요
근데 디자인이 너무 레이아웃이 한정적인데요,,,
@jangpm
2 ай бұрын
네네 이제 시작이니까요 더 좋아지리라 믿습니다