Тёмный

프레이머 AI로 30초만에 랜딩페이지를 만드는 방법 (게다가 무료임) 

일잘러 장피엠
Подписаться 88 тыс.
Просмотров 36 тыс.
50% 1

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.

Кино

Опубликовано:

 

11 июл 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 90   
@jangpm
@jangpm 4 месяца назад
Framer AI 버튼 위치가 바뀌어서 안내드립니다. 상단의 Action 버튼을 누르시거나, 단축키 Cmd (Ctrl) + K를 누르시면 메뉴 중에 AI - Generate Page 기능이 있습니다.
@kkams2554
@kkams2554 7 месяцев назад
좋은 영상 만들어주셔서 감사합니다. 저두 오늘부터 정주행!!
@user-ct4un8jz9m
@user-ct4un8jz9m Год назад
저도 좋아요 먼저 누르고 영상 봅니다~앞서가는 장피엠님, 놀라운 정보 감사드립니다ㆍ
@siwonplayground4264
@siwonplayground4264 Год назад
또 하나 배워갑니다. 수고하셨습니다!
@danapark5693
@danapark5693 4 месяца назад
장피엠님 늘 새로운 툴 소개해주셔서 감사해요 :) 도전해봐야겠습니다!
@user-wh2bl5go8p
@user-wh2bl5go8p Год назад
일단 좋아요 누르고 시청합니다 믿고보는 장피엠님이니까요~ㅎ
@user-iz2ku2le2f
@user-iz2ku2le2f Год назад
마지막 말씀 진동처럼 와닿습니다^^
@user-iz6iy8id6g
@user-iz6iy8id6g Год назад
웹사이트 디자인의 초안과 컨셉을 잡으려고 할 때 엄청 도움이 되겠네요....항상 앞서가는 장피엠님의 영상을 보면서 많이 배워요...
@user-rc6nm7qx8z
@user-rc6nm7qx8z 5 месяцев назад
안녕하세요! 기분 좋은 정보 감사합니다.🎉
@mintchocolalala
@mintchocolalala Год назад
와~ 대박이네요~~ 꼭 한번 해볼께요 👍👍👍👍👍👍
@taek2879
@taek2879 9 месяцев назад
대박이네요.. 항상 좋은 것들 공유해주셔서 너무 감사드려요!!
@jangpm
@jangpm 9 месяцев назад
봐주셔서 감사합니다!
@quantist6422
@quantist6422 11 месяцев назад
감사합니다. 피엠님~!
@clearbrain_do
@clearbrain_do 11 месяцев назад
너무 감사합니다^^
@iangel7322
@iangel7322 Год назад
자고나면 새로운 세상이 펼쳐지는 요즘 덕분에 또다른 툴을 접하게 되어서 정말 고맙습니다👍
@jangpm
@jangpm Год назад
제가 더 감사합니다😊
@user-cb8ih2cc1c
@user-cb8ih2cc1c 8 месяцев назад
와 정말 미쳤다..
@user-iz6iy8id6g
@user-iz6iy8id6g Год назад
여기에 처음 들어가서 어떻게 해야 하나 처음에는 많이 당황스러웠는데, 알려준 덕분에 어떻게 해야 할지 점차 감이 잡혀지네요...처음에는 무료로 사용해보면서 연습을 해봐야 하겠어요....
@scvgtg
@scvgtg 11 месяцев назад
코딩의 코자도 모르는데, 딴 분께서 추천해 주셔서 들어왔어요. 지금 역주행중인데(2년전 자료부터 정주행하기는 좀 부담스러워서 ^^;) 프레이머AI는 정말 놀라자빠질 정도의 아웃풋을 보여주는군요. 좋은 영상 감사드립니다.
@jangpm
@jangpm 10 месяцев назад
흥미롭게 봐주셔서 감사합니다! 새로운 시선을 제시하는 콘텐츠 크리에이터가 되도록 분발해보겠습니다앗..
@lvupkim4460
@lvupkim4460 Год назад
늘 좋은 컨텐츠 감사합니다. 그런데 html , css로 export는 안되는건가요? 무조건 여기서만 deploy 해야하는건지 궁금하네요.
@jangpm
@jangpm Год назад
아쉽게도 코드 익스포트는 framer가 지원하지 않는다고 하네요ㅠ
@평범한사업가
@평범한사업가 Год назад
와 너무 좋네요.그리고 마지막에 말씀 너무 공감합니다.일하는 방식 사업하는 방식이 바뀔겁니다.만능이라고 생각하기보다 사람의 생산성을 돕는 도구로 ai를 활용한다면 인간의 생산성 증대에 분명 도움이 될것 같습니다.자리마련해주세요 ㅎ
@jangpm
@jangpm Год назад
네네 평범한사업가님 감사합니다!
@shopierr
@shopierr 10 месяцев назад
와 정말 너문 좋은 내용이네요 ㅜㅜ 지금까지 너무 힘들게 디자인 작업한거같아요 .. 듣고 배워야하네요 ㅠㅠ 상품 상세페이지도 프레이머로 디자인이 명령할수 있나요 ?? 가능하다면 혹시 프롬프트 양식 추천좀 부탁드려요 ~
@jangpm
@jangpm 10 месяцев назад
한국 스타일 상품 상세페이지는 저도 가장 관심 있는 분야이긴 한데 아직 만족할만큼 잘 안나오더라고요. 프롬프트로 디자인 스타일, 레이아웃, 개별 디자인 요소들이 생성되는 수준까지는 아직 잘 안되는거 같아요. 그렇지만 이런 부분도 점차 개선될거라 믿습니다. 아무튼 저도 관심 있는 주제지만 현재는 솔루션이 없어요...ㅋㅋ 솔루션이 생기고 공유해질만하면 다른 컨텐츠로 제작해볼게요. 구독자님도 영감이 떠오르면 저한테 귀뜸 좀 해주세요~
@shopierr
@shopierr 10 месяцев назад
@@jangpm 마케팅 자동화 관련 강의는 언제 오픈하며 가격은 얼마예요 ?
@Video.Master
@Video.Master Год назад
와 좋은 정보 감사합니다. 혹시 배너 광고 소재 리사이즈 자동으로 해주는 AI는 없을까요?
@jangpm
@jangpm Год назад
vcat ai가 그런 솔루션 같아요 한번 살펴보세요
@nondeterministic9153
@nondeterministic9153 18 дней назад
워드프레스도 가능한가요? 아니면 프레이머 창작물은 그냥 html+js 구조인가요
@user-yg9hf9zq8n
@user-yg9hf9zq8n 10 месяцев назад
영상 너무 잘 보았습니다 혹시 메타 DR 이나 구글 GDN 광고 스크립트는 심을수 있나요 ?
@jangpm
@jangpm 10 месяцев назад
제가 메타 DR이나 구글 GDN은 정확히 모르는데요. framer는 각 프로젝트 별로 유료 비용을 지불하면 와 영역에 커스텀 코드를 넣을 수 있습니다. 아마 원하시는 기능은 커스텀 코드로 추가하실 수 있지 않을까 싶어요.
@davidjeong5881
@davidjeong5881 11 месяцев назад
좋은 영상 너무너무 감사드랴요!! 혹시 고객의 결제를 받을수잇도록 결제서비스를 연동할수도잇나요??
@jangpm
@jangpm 11 месяцев назад
네네 가능해요 근데 프레이머 자체 기능은 아니고요. 페이플, 검로드, 토스페이먼츠 결제위젯과 같은 외부 결제 모듈을 가져다가 쓸 수 있습니다.
@davidjeong5881
@davidjeong5881 11 месяцев назад
@@jangpm 아하 그렇군요 친절한 답변 감사합니다 장펨님
@user-eq2ri5gz9h
@user-eq2ri5gz9h 10 месяцев назад
나아가야할 방향에 대해 많은 고민이 드네요… 제가 디자이너라서 그런지 조금은 무섭지만 사용성이 무궁무진해보여요 디자이너 없이도 상향평준화된 퀄리티의 결과물을 얻을 수 있다는 점에서 제 자리를 잃을까봐 불안하지만… 결과적으로는 안목과 미감이 있어야 이 중에서도 더더 높은 퀄리티를 만들어낼 수 있는 거니까 상향평준화 된 웹사이트 사이에서도 더 돋보이려면 디자이너가 필요는 하겠죠?🥹 아직까진 이런 AI가 문제해결 관점에서의 UX디자인을 하지도 못할 거라고 생각해서결국 디자이너는 살아남을거라고 자기위안을 해볼게요… 요즘은 PPT도 한장 한장 만들지 않고 웹사이트처럼 스크롤링 형식으로 제작해서 길게 연결된 한 페이지처럼 표현한 그래픽을 보여주는 경우도 많은데 그런 PPT 제작 초안 용도로 사용하기 좋아보여요! 간단하게 느낌만 내게 여러 선택지를 제작해서 클라이언트의 취향 파악을 하기도 좋아보이고 해커톤처럼 짧은 시간 내에 디자인을 해야할 때 갈아끼울 레이아웃 용으로 여러개의 시안을 만들어가기도 좋아보이네요 속상하지만… 변화하는만큼 저도 변해야겠죠! 오늘부터 프레이머 공부를 시작해봐야겠어요 💪🏻
@jangpm
@jangpm 10 месяцев назад
아직은 인간 디자이너의 파이널 터치가 꼭 필요한거 같습니다. 당장의 위협은 되시지 않을거예요. 그렇지만 말씀하신대로 나를 변화시키는 계기로 삼아보시는 것은 좋아보입니다. AI의 부각으로 디자이너의 일이라는게 과거와 똑같지 않을 가능성이 높기 때문입니다. 변화하는 기술 세계에서 내 일에 대해서 새롭게 바라보고, 다시 정의 내리고, 그 역량을 개발하는게 구독자님을 더 경쟁력있는 프로페셔널로 만들어주실겁니다. 제가 비디자이너로서 노코드 관련된 컨텐츠를 하면서 내가 디자이너 였으면 참 좋겠다는 생각을 많이 합니다. 오히려요. 조금만 미적으로 체계적인 관점으로 결과물을 만들 수 있으면 제 컨텐츠나 제 결과물의 퀄리티가 확 올라갈거 같다고 생각하거든요. 구독자님도 지금 가지고 계신 스킬셋의 경쟁력을 너무 과소평가하지는 마세요. 다만 거기에 무언가를 섞어보세요. 그러면 기존 디자이너보다 훨씬 뛰어나고 기존 창업가들보다 훨씬 뛰어난 무언가가 되어 계실거라 생각합니다.
@sunnypark1195
@sunnypark1195 6 месяцев назад
오늘 랜딩 페이지 ai로 유투브 찾아보다가 이 영상을 보게되었어요.. 보자마자 framer 에 들어가서 한번해보려고하니 영상에서 보여주셨던 페이지가 안보여요.. 런칭 with AI로 아보이고..ㅠㅠ 제가 잘못 찿은건지 그새 바뀐건지..궁금해요.. 꼭 해보고싶은데 혹시 어실까요?
@jangpm
@jangpm 6 месяцев назад
현재 framer 기능 업데이트 때문에 잠시 비활성화되어 있대요 곧 다시 활성화시킨다는 framer 커뮤니티의 공식 답변이 있었으니 새해에 한번 확인해보세요~ 연말에는 아마 기능 업데이트가 안될듯 합니다
@rick13299
@rick13299 Месяц назад
혹시 배포까지 도와주는건가요? 그럼 버튼을 눌렀을 때 해당 페이지로 이동하거나 게시물 작성 및 게시물 목록도 볼 수 있게 할 수 있나요…?
@jangpm
@jangpm Месяц назад
배포도 바로 됩니다. 다만 멀티페이지 구성은 안될거예요. 일단은 각각 싱글페이지만 생성해주고 있고 그걸 연결하는건 수동으로 하셔야 합니다
@rick13299
@rick13299 Месяц назад
@@jangpm 감사합니다…항상 피그마로 디자인하고 코딩해서 배포했었는데 그냥 홍보용 페이지는 이렇게 만들어야겠어요
@flynoa4012
@flynoa4012 8 месяцев назад
프레이머는 정말 Ai의 무서움을 느끼게 해주네요.
@sleepcycle_
@sleepcycle_ Год назад
요금제 뭘써야할지 모르겠더라구요,, ㅋㅋ
@user-io9ym1fo6w
@user-io9ym1fo6w 11 месяцев назад
여기서 만들어진 화면을 소프터나 웹플로우에 바로 적용하는 방법이있을까요?
@jangpm
@jangpm 11 месяцев назад
framer는 code export 기능을 제공하지 않습니다. 여기서 만든 결과물을 다른 노코드 툴에서 적용하기란 쉽지 않을거 같습니다.
@user-yn8wx6sn9s
@user-yn8wx6sn9s 7 месяцев назад
ai 로 프롬프트 입력하는것이 사라졌는데. 어떻게 된건가요?? 유료버전에서만 제공하는걸로 바뀐걸가요? ?
@jangpm
@jangpm 7 месяцев назад
그러네요! 현재 신규 기능 테스트 때문에 잠시 뺐는데 다음주에 다시 돌아온다고 합니다. (참고 : www.framer.community/c/bugs/missing-framer-ai) 제보해주셔서 감사합니다 :)
@sleepcycle_
@sleepcycle_ Год назад
와, 이렇게만든 홈페이지, SEO 같은 것도 다룰 수 있을까요?
@jangpm
@jangpm Год назад
SEO도 유료 플랜에서 셋팅 가능해요
@sleepcycle_
@sleepcycle_ Год назад
@@jangpm 와, 감사합니다 ~~~ 😍🙌🏻
@TheSUKJIN
@TheSUKJIN 6 месяцев назад
안녕하세요 영상 잘 봤습니다 접속하신 URL 복사해서 똑같은 사이트로 들어왔는데 보여주시는 첫 페이지가 왜? 다른지 모르겠어요 사파리,구글크롬 다르네요.. Start with AI가 없네요 전..ㅜㅜ
@jangpm
@jangpm 6 месяцев назад
framer 커뮤니티에서 제가 확인했는데요. 현재는 잠시 비활성화되어 있다고 합니다. 기능 업데이트 후에 재활성화된다고 하니 조금만 기다려주세요~
@TheSUKJIN
@TheSUKJIN 6 месяцев назад
@@jangpm 감사합니다
@sunnyr6583
@sunnyr6583 7 месяцев назад
질문있어요! 근데 게시판이나 결제 시스템은 어떻게 만드나요? 진짜 궁금해요!
@jangpm
@jangpm 7 месяцев назад
외부 플러그인을 커스텀 코드를 이용해서 임베드해야합니다. 질문하신 내용이 고급 사용자로 넘어갈때 엄청 큰 화두인데요. 간단히 답하기 어려운 내용이라 일단은 이렇게만 답을 드립니다.
@sunnyr6583
@sunnyr6583 7 месяцев назад
오 그렇군요! 답변 달아주셔서 정말 감사합니다!@@jangpm
@nicehwang107
@nicehwang107 Год назад
랜딩페이지 만든 후 따로 html 코드 따로 다운 받을 수 있을까요?
@jangpm
@jangpm Год назад
framer는 코드 익스포트는 지원하지 않는거 같아요ㅠㅠ 아쉽게도
@busun9592
@busun9592 Год назад
디자이너인데 신기하면서도 무섭군요 덜덜….
@keyimnandj
@keyimnandj 11 месяцев назад
포트폴리오 문서 ui를 잡아주는 툴은 없을까요?
@jangpm
@jangpm 11 месяцев назад
문서 ui를 잡아주는 툴은 제가 아는건 없네요ㅠㅠ 프레이머 AI도 레이아웃은 다소 랜덤인거 같습니다. 아직 결과물의 디자인적 요소까지 AI가 알잘딱깔센 딱 해주는건 잘 없는거 같습니다.
@jinskim7615
@jinskim7615 10 месяцев назад
혹시 백엔드는 에어테이블로 프론트엔드는 프레이머로 할수 있나요???
@jangpm
@jangpm 10 месяцев назад
프레이머는 db 기능이 거의 없다 싶이한 쉬운 웹빌더라 에어테이블을 db나 백엔드로 사용하긴 어렵습니다.
@jinskim7615
@jinskim7615 10 месяцев назад
​@@jangpm 음 , 제가 잘 이해못하나 싶은데요 ... 프레이머의 디비 기능이 거의 없다시피 하니까, 에이테이블이 그 기능을 보충해주지 않을까 싶어서요. 제가 개념을 잘못잡고 있나요???
@jangpm
@jangpm 10 месяцев назад
@@jinskim7615 프레이머에서는 데이터베이스와 상호작용을 하는 그러니까 백엔드가 있는 웹서비스를 만들수가 없어요 아예... 간단한 CMS가 있긴 하지만 블로그 처럼 미리 글을 발행하는 것만 가능하지 DB처럼 값을 업데이트하는게 불가능합니다. 프론트엔드에서 아예 받아서 처리할 수 없는 정말 간단한 웹빌더 (상세 페이지, 정적인 홈페이지 정도 만드는)기 때문에 에어테이블로 보완한다는게 불가능하다는 의견이었습니다. 제가 알기론 그래요...ㅋㅋ
@user-sw9ur7uh1p
@user-sw9ur7uh1p 5 месяцев назад
ai기능은 유료버전만되는건가요?
@jangpm
@jangpm 4 месяца назад
메뉴가 업데이트 되서 좀 숨어들어갔어요. ctrl+K를 눌러보시면 거기서 ai 기능을 확인하실 수 있습니다
@miraclesinger
@miraclesinger 5 месяцев назад
지금도 동일하게 무료로 이용 가능한가요? 뭔가 창이 달라진 것 같아서요
@jangpm
@jangpm 4 месяца назад
좀 숨겨놨습니다. ctrl+K 단축키를 눌러보시면 거기에서 보이실겁니다
@YES-wl9bv
@YES-wl9bv Год назад
이용자 vs 구경자
@dietoyou
@dietoyou 4 месяца назад
명령어는 영어만 가능해요?
@jangpm
@jangpm 4 месяца назад
한국어도 가능합니다 근데 아마 영어로 했을때 품질이 더 좋을거예요
@williamim9508
@williamim9508 7 месяцев назад
ai 입력창이 현재는 사라진걸까요? 보이질 않네요 ㅠ
@jangpm
@jangpm 7 месяцев назад
현재 신규 기능 테스트 때문에 잠시 뺐는데 다음주에 다시 돌아온다고 합니다. (참고 : www.framer.community/c/bugs/missing-framer-ai) 제보해주셔서 감사합니다 :)
@williamim9508
@williamim9508 7 месяцев назад
@@jangpm 알려주셔서 정말 감사합니다
@blackskywalker1103
@blackskywalker1103 5 месяцев назад
ai 기능 유료화 된건가요? 안나와용
@jangpm
@jangpm 5 месяцев назад
이게 2024년에는 다시 오픈한다더니 아직 미오픈이네요 내부 이슈때문에 잠시 기능을 꺼둔거 같은데 조만간 오픈할거 같습니다
@user-sw9ur7uh1p
@user-sw9ur7uh1p 5 месяцев назад
START WITH AI를 못찾겟어요ㅠㅠ
@jangpm
@jangpm 5 месяцев назад
이 기능이 현재 12월 중순부터 deactivate되어 있어요. 유료화는 아니고 무료로 계속 쓸 수 있게 한다고는 하는데 framer 측에서 현재는 비활성화해놓고 있습니다. 2024년에 오픈한다고 했는데 기약이 없네요. 일단은 조금 더 기다려보셔야 할거 같아요. 영상으로 소개했는데 못써보시는 상황이라 저도 아쉽고 죄송하네요ㅠㅠ
@hmmmhmmm8327
@hmmmhmmm8327 7 месяцев назад
사이트 아무리 뒤져도 start with AI 가 없네요
@jangpm
@jangpm 7 месяцев назад
그러네요! 현재 신규 기능 테스트 때문에 잠시 뺐는데 다음주에 다시 돌아온다고 합니다. (참고 : www.framer.community/c/bugs/missing-framer-ai) 제보해주셔서 감사합니다 :)
@user-xx4ds4fx8q
@user-xx4ds4fx8q 5 месяцев назад
이거이제안되는건가요?
@jangpm
@jangpm 4 месяца назад
됩니다. 메뉴가 좀 숨어있어요. ctrl+K 단축키를 눌러보시면 ai로 생성 기능이 보이실 겁니다
@user-gi6oc1yt2o
@user-gi6oc1yt2o 6 месяцев назад
저는 왜 ai가 안뜨죠?ㅜㅜ
@jangpm
@jangpm 5 месяцев назад
2024년 1월에 다시 기능이 돌아온다고 프레이머 공식 커뮤니티에서 밝혔는데요.아직 안돌아오고 있네요ㅠㅠ relume 이라는 대안 서비스를 한번 써보세요
@dongwonkwak.official
@dongwonkwak.official Год назад
디자인이 전반적인 프롬프트와 맙지는 않는거 같네요. 이미지를 교체를 하면 되겠지만요.
@jangpm
@jangpm Год назад
프롬프트에 대해서도 연구가 더 필요한거 같고요. 툴도 더 좋아질거 같습니다. 디자인적인 요소 마저도 프롬프트로 반영할 수 있도록 프레이머가 발전하거나 그런게 가능한 다른 툴이 나오면 정말 좋겠네요
@namjukim5382
@namjukim5382 Месяц назад
근데 디자인이 너무 레이아웃이 한정적인데요,,,
@jangpm
@jangpm Месяц назад
네네 이제 시작이니까요 더 좋아지리라 믿습니다
Далее
2024 최신 챗GPT를 내 업무에 적용하는 방법
41:53
ШОКОЛАДКА МИСТЕРА БИСТА
00:44
Хотите поиграть в такую?😄
00:16
Просмотров 189 тыс.
game paling lucu🤣
0:43
Просмотров 35 млн