[궁금한.ai] 30초 만에 디자인・개발 지식 없이 웹사이트 만드는 방법, Framer AI 사용기 

다양한 생성형 AI가 쏟아져 나오는 요즘, 여러분의 관심을 끄는 AI는 무엇인가요?

프론트엔드 개발자인 제가 주목한 것은 웹디자인 및 사이트를 생성해 주는 ‘Framer AI’입니다.

혼자서 개발할 때 디자인이 필요하지만 어디서부터 시작해야 할지 몰라 어려움을 겪었는데요. 특히, 독창적인 디자인과 다양한 배치를 시도해 보고 싶어도 아이디어가 떠오르지 않아 답답했던 경험이 많았습니다. 이런 이유로 “디자인 공부를 해야 하나?”라는 고민까지 했었는데요. Framer AI는 이러한 고민을 해결해 줄 수 있을지 궁금하더라고요.

과연 Framer AI가 훌륭한 어시스턴트가 되어줄지, 함께 웹사이트를 만들면서 살펴볼까요?

Framer 소개

먼저 Framer에 대해서 간략하게 소개하면요. Framer는 피그마나 스케치와 유사한 디자인 및 프로토타이핑 툴로 국내에서 토스팀이 쓰는 디자인 툴로 주목을 받았었고, 최근 노코드 커뮤니티에서 스타트업들이 웹사이트, 랜딩페이지, 홈페이지 만들 때 많이 활용하는 핫한 툴입니다. 

Framer는 클릭이나 드래그 등 다양한 인터랙션을 설정할 수 있고, 인터랙션이 적용된 화면을 미리 볼 수 있는데요. 웹디자인에 자주 사용되는 레이아웃이나 디자인 요소들을 기본적으로 제공하기 때문에 디자인을 잘 몰라도 손쉽게 시작할 수 있습니다. 또, 이렇게 만든 디자인을 Publish 버튼만 클릭하면 누구나 볼 수 있는 사이트로 생성할 수 있는데요. CMS도 지원하기 때문에, 사이트에 들어갈 콘텐츠 관리도 가능하답니다. 

디자인뿐만 아니라 다양한 모션과 인터랙션, 웹사이트 생성까지 가능한 Framer에서 AI 기능을 만들었다니, 얼마나 강력한지 사용해 볼까요?

Framer AI로 웹사이트 만들기, 시작!

Framer AI의 사용 방법은 매우 간단합니다. 상단 탭에서 ‘Actions’ 메뉴를 클릭하고, 검색 창에서 ‘Generate Page…’ 메뉴를 클릭하면 프롬프트 창이 뜨는데요. 프롬프트 창에 만들고자 하는 웹사이트에 대한 설명을 적어주고, Start 버튼을 눌러주면 됩니다. 세 단계 만에 웹사이트 생성을 위한 모든 프로세스가 끝났는데요. 정말 쉽고 간편하죠?

Framer AI는 프롬프트 내용에 기반해 이미지와 콘텐츠까지도 생성해 내기 때문에, 설명을 구체적으로 작성할수록 좋습니다. 폰트, 색상, 브랜드 이름, 일러스트나 이미지의 느낌 등 만들고자 하는 웹사이트를 최대한 상세하게 작성해 보세요.

30초 만에 완성된 웹사이트! 그 결과는?

짠-! 단 30초 만에 완성된 웹사이트입니다! 퀄리티는 조금 아쉽지만, 정말 놀라운 생성 속도네요. 30초만에 페이지 하나를 꽉 채워 디자인 해주었어요. 그동안 제가 디자인 해보겠다고 쩔쩔매던 시간만 합쳐도 30시간은 될 것 같은데 말이죠 😂 게다가 프롬프트를 한국어로 작성해도 잘 동작해 너무 편리합니다.

Framer 기능 이용해서 디자인 다듬기

AI가 생성해준 디자인을 그대로 사용하기에는 다소 부족해 보이는데요. 요구사항이 완전히 반영되지 않은 점도 살짝 아쉽습니다. 

그렇지만 Framer AI를 사용했을 때의 가장 큰 장점은 Framer의 편리한 디자인 기능을 활용할 수 있다는 것인데요. 결과물이 마음에 들지 않더라도 손쉽게 수정을 할 수 있습니다. 이 기능들을 이용해 아쉬운 부분들을 수정해 볼까요?

상단 탭의 Insert 버튼을 누르면 좌측에 메뉴가 나타나는데, 여기서 원하는 디자인 요소를 선택하면 됩니다. 먼저, 최근 글 목록을 표시하기 위해 6칸짜리 그리드 섹션을 추가할게요.

또, 사용된 컬러를 팔레트 셔플을 통해 바꿔주고, 캐러셀 형태의 그리드 섹션도 추가해주었는데요. 몇 번의 클릭만으로도 꽤 그럴싸해졌어요.

이렇게 초안은 AI를 통해서 만들고, 이후에 Framer의 기능을 통해서 디테일을 보완하는 식으로 작업을 진행하면 빠르고 편리하게 퀄리티 있는 웹사이트를 생성할 수 있습니다.

생성형 AI로 웹사이트를 만들어본 후기

저는 Framer AI의 성능이 매우 만족스러웠는데요!

먼저 AI 기능이 무료로 제공된다는 점이 가장 마음에 들었습니다. 횟수 제한이 있거나, 처음부터 유료인 서비스도 많잖아요. Framer AI는 단시간에 많은 요청을 할 경우, 기다렸다가 다시 요청해야 하지만 횟수 제한도 없고 무료입니다. 그래서 디자인이 마음에 들지 않는다면 얼마든지 재생성할 수 있어서 너무 좋더라고요.

또, 프롬프트를 한국어로 작성해도 잘 인식되는 점도 좋았고요. 영어가 모국어가 아니니, 영어로 프롬프트를 작성하면 AI가 더 잘 인식하도록 프롬프트를 수정할 때 좀 더 노력을 기울여야 하잖아요. 그런데 Framer AI는 한국어 지원이 되니 매우 편했습니다.

이 밖에도, 생성 속도가 30초 정도로 매우 빠르고, Framer의 기능을 이용하여 손쉽게 컨텐츠와 디자인을 수정할 수 있고, 클릭 한 번으로 사이트를 생성할 수 있는 점이 인상적이었는데요. 결과물을 조금만 손 봐준다면 굉장히 만족스러운 디자인이 나오고, 바로 웹사이트 생성으로 이어지니 관련 지식이 없어도 부담 없이 접근하기에 좋았어요.

다만 아쉬운 부분도 있었는데요. 결과물의 퀄리티가 높지는 않았습니다. 아직은 그대로 사용하기에는 어려움이 있어요. 50번 정도 생성을 해보니, 주로 몇 가지 디자인만을 이용해서 레이아웃을 구성하는 게 보이더라고요. 그래서 디자인의 다양성이 떨어지는게 아쉬웠습니다. 

그리고 요구사항이 완전히 반영되지 않는 문제도 있었어요. 특히 색상에 대한 부분을 잘 인식하지 못하더라고요. 이 부분은 팔레트 셔플이라는 기능이 따로 있어 보완은 가능했지만, 개선이 되어 처음부터 의도에 맞게 잘 생성이 된다면 Framer AI에 대한 만족도가 크게 올라갈 것 같아요.

웹 개발에 사용할 수 있는 ‘Vercel AI(v0.dev)’와 비교하면

Vercel AI(v0.dev)는 Framer AI와 마찬가지로 웹 개발에 사용할 수 있는 AI입니다. Vercel은 서버리스 배포 플랫폼으로 유명한데요. React 프레임워크인 Next.js를 개발하여 프론트엔드 생태계에도 많은 기여를 하고 있습니다. 이런 Vercel에서 이제는 AI까지 확장했습니다.

Framer와는 다르게, Vercel AI는 디자인 관련 기능을 제공하지는 않습니다. 대신, 리액트 코드를 만들어주는데요! 즉, “디자인”에 집중한 Framer AI와는 다르게 “개발”에 좀 더 포커스가 맞춰져 있다고 볼 수 있죠.

그래서 Framer AI와 Vercel AI 중 어느 쪽을 사용할지는 주로 하는 작업이나 프로젝트 성격에 따라서 달라질 수 있겠는데요.

Vercel AI는:

• 리액트 코드를 생성해 주기 때문에 개발자가 손쉽고 빠르게 코딩할 수 있어요.
• 디자이너가 필요하지 않은 프로젝트에서, 빠른 프로토타입을 만들 때 이용하기 좋아요.

Framer AI는:

• 디자인이나 개발을 잘 모르는 사람도 손쉽고 빠르게 웹사이트를 생성할 수 있어요.
• 디자이너와 개발자가 함께 프로젝트를 진행하며, 활발한 커뮤니케이션이 필요할 때 이용하기 좋아요.

요약하면, 요구사항을 더 잘 파악하는 것은 Vercel AI였지만, 디자인 수정이나 사이트 생성까지 생각한다면 Framer AI가 더 편했습니다.

디자이너, 개발자 없이 웹사이트 만들 수 있을까?

여기까지 Framer AI를 이용해 함께 웹사이트를 만들어보았는데요. 어떠셨나요? 디자인이나 개발을 몰라도 웹사이트를 만들 수 있을까요? 제 답은 “그렇다”입니다. 

아직 AI만으로는 완벽하지 않지만, 약간의 손길이 더해지면 충분히 만족스러운 결과물을 얻을 수 있고, Framer의 디자인 리소스를 잘 활용하면 쉽고 빠르면서도 독창적인 웹사이트를 개발할 수 있었습니다.

물론 디자이너의 관점에서는 아쉬운 부분이 있을 수 있지만, 디자인이나 개발의 어려움 때문에 웹사이트 제작을 포기했던 분들께는 유용한 서비스인 것 같습니다. 특히 디자이너가 아니거나 가벼운 용도로 웹사이트를 만들고 싶은 분께 추천하고 싶네요!

생성형 AI를 잘 사용하려면..

글을 마치면서 크라우드웍스 블로그 글 중 “데이터를 ‘잘 알고’ ‘잘 하는’ 회사가 LLM을 잘 할 수밖에 없는 이유“에서 인상 깊었던 구절을 공유할게요.

“LLM을 구축하는 기업의 전문가로서, 최신 기술을 쫓기보다는 내부 데이터를 먼저 살펴보시길 권합니다. 우리가 어떤 데이터를 가지고 있고, 이를 어떻게 활용할 수 있을지 파악하는 것이 우선입니다. 어려우시다면 언제든지 저희 크라우드웍스가 도와드리겠습니다.”

Framer AI를 사용하면서,  Framer AI는 AI의 강점과 비즈니스에서 얻은 디자인 관련 노하우 및 데이터를 적절히 잘 활용하고 있다는 느낌을 받았는데요. 아직 AI로 하기 어려운 부분은 기존 기능을 활용해 사용자가 겪을 수 있는 불편을 최소화했죠. Framer는 본인들의 데이터가 있으면서 잘 활용한 덕분에 쓸만한 AI를 만들었다는 생각이 들었습니다. 그래서 앞으로가 어떤 시너지를 보여줄지 더욱 기대되는 AI입니다. 

이처럼 “어떻게 활용할 것인가”에 대한 고민을 많이 해보면 좋을 것 같습니다. AI 그 자체에 의존하지 않고, AI와 협력한다는 마음으로요. 그럼, 분명 어디에도 없는, 좋은 어시스턴트를 얻으실 수 있을거라 생각합니다.