4시간만에 AI 디자이너로 넷플릭스 디자인을 클론했습니다.

노코드로 넷플릭스 클론 강의 만들기 (3) : 4시간만에 AI 디자이너로 넷플릭스 디자인을 클론했습니다.

본 시리즈는 “노코드로 넷플릭스 클론 강의 만들기 과정” 에 대한 시리즈입니다. 강의 준비 과정에서 겪은 경험과 노하우들을 하나씩 공유할 예정이며, 더 자세한 내용은 유튜브 영상으로도 확인하실 수 있습니다.

여기서 미리 강의 사전예약을 받고 있습니다. 사전 예약을 해주신 분들에게는 총 6만원 혜택 (1만원할인 쿠폰과 및 1:1 과외 (5만원) 쿠폰)을 드립니다.

[최종 완성 디자인 일부]

지난번에는 3일 동안 넷플릭스를 클론하겠다고 계획했지만, 추석 연휴 등의 일정으로 실제 작업 가능 시간이 4시간밖에 남지 않았습니다. 그래서 주어진 시간 동안 넷플릭스 클론의 범위를 기획하고 넷플릭스 클론의 핵심 디자인을 완성하는 것을 목표로 설정했습니다.

전문 디자이너가 아닌 입장에서 피그마로 처음부터 디자인을 하는 것은 에너지도 많이 소모되고, 까다로운 일입니다. 따라서 처음에는 피그마에 있는 넷플릭스 클론 템플릿을 그대로 사용하려고 하였으나, 24년 현재와 다른 부분이 꽤 있어서 템플릿 구성 요소의 일부분 (로고, 아이콘 등)만 사용하고 현재 넷플릭스 디자인을 다시 가져왔습니다.

이때 전문 디자이너가 아닌 저희는 실제로는 4시간 정도만에 넷플릭스 클론의 기획과 디자인을 AI 디자이너 서비스인 visilly.ai 의 도움을 통해서 완성할 수 있었는데요, 이 도구를 어떻게 이용할 수 있으며, 실제로 사용하면서 어떤 기능이 놀라웠고 아쉬웠는지 남겨보겠습니다.

AI 디자이너, Visily.ai 소개

Visily.ai는 AI 기반 디자인 툴로, 특히 UX/UI 와이어프레임 및 프로토타입 제작을 쉽게 만들어주는 것이 특징입니다. 저희가 피그마 AI에서 기대하던 기능들 (이미지 → 디자인, 텍스트 → 디자인)을 미리 맛볼 수 있는 느낌인 것 같았어요.

주요 기능은 다음과 같아요:

Screenshot to design: 웹사이트나 앱의 스크린샷을 업로드하면, Visily가 이를 편집 가능한 와이어프레임으로 자동 변환해 줍니다.
Sketch to design : 종이에 그린 스케치를 업로드하면 이를 커스터마이징 가능한 디자인으로 변환할 수 있습니다.
Text to design: 간단한 텍스트 입력으로 수정이 가능한 디자인을 만들어줍니다.

진짜 쓸만한가요?

저희는 실제 월 구독 14달러 (약 2만원) 결제를 하고 사용하고 있습니다. 특히 저희는 클론 디자인이기 때문에 Screenshot to Design 기능을 주로 사용을 했고. 중간 중간 다른 AI 기능들도 활용했습니다.

장점

큰 이미지 (데스크톱 등) 등은 디자인으로 잘 변환해주는 것 같아요
캡처한 스크린샷 안에 여러 이미지와 아이콘 등이 있을 때, 이를 잘 인식하고 활용할 수 있는 이미지와 아이콘으로 바꿔줍니다.
각 엘리먼트 간의 간격은 잘 유지가 되서 수정이 쉬웠어요.
피그마로 디자인 파일을 쉽게 옮길 수 있어요. (피그마 visilly 플러그인 사용)

단점

완벽하게 디자인으로 전환되지 않습니다. 한국말 같은 경우, 제대로 인식을 못하는 모습을 보여줬어요.
피그마의 auto-layout 기능이 vislly.ai 에는 없는 것 같아 아쉬웠습니다.
Text to design 기능은 아직 많이 아쉬웠어요.

항상 무엇이든지 첫 시작이 어렵다고 생각하는데요, 디자인도 마찬가지로 첫 백지에서 시작할 때가 제일 심리적 거부감이 있는 것 같아요. 아직 완벽한 툴이라고 평가하기는 어렵지만, 백지 상태에서 빠르게 탈출할 수 있도록 잘 도와준 것 같아요. 덕분에 전문 디자이너가 아닌데도, 빠르게 클론 디자인을 완성할 수 있었습니다.

실제 처음부터 하나하나 디자인 하는 것보다는 약 50% 정도 시간을 절감했다고 생각합니다.

피그마 AI가 몇 주내로 다시 출시된다고 하는데, 어떤 성능을 가지고 출시되느냐에 따라 visily.ai 의 미래도 많이 달라질 것 같습니다.

어떻게 활용하면 좋을까요?

현재 visily.ai를 활용하여 다음과 같은 프로세스로 서비스 개발에 활용하고 있습니다.

visily.ai 에서 빠르게 기초 디자인 AI로 디자인 초안 완성
피그마로 옮긴 후, 세부 디자인 수정 및 auto-layout 추가
Figma to Bubble 서비스 사용하여 바로 버블 디자인으로 변환 (다음 글에 방법 공유)
버블로 로직 및 데이터베이스 추가

그래서 어느정도로 기획 및 디자인 했나요?

노코드 클론 강의의 목표는 처음 노코드를 입문한 사람도 실제로 있는 서비스를 직접 만들어보는 경험을 하게 하는 거에요. 따라서 이번 넷플릭스 클론은 아래 5가지 핵심 기능을 구현할 수 있도록 디자인도 일부 수정하였습니다.

로그인 및 회원가입 기능
브라우즈 화면 (영화 및 시리즈)
영화 및 시리즈 상세 화면
영상 재생 화면
관리자 기능 : 영화 및 시리즈 추가

다음 글에는 실제 버블로 해당 넷플릭스 디자인 및 기능을 구현하는 과정을 담을 예정입니다.

미리 강의를 사전예약 하세요! 총 6만원 혜택을 드릴게요.)(1만원 할인 쿠폰과 1:1 과외 (5만원) 쿠폰)

강의 사전 예약하기👉: https://forms.gle/Rb41DfEU6YoRvyMS6

“노코드로 넷플릭스 클론하기” 강의는 10월 ~ 11월 중으로 출시하는 것을 목표하고 있어요. 총 10시간~15시간 분량이며, 강의를 듣게 된 후에는 이제 개발자에 의존할 필요 없이, 직접 내 서비스를 내 손으로 만들고 운영할 수 있어요.
- 저희는 공식 버블 개발자 자격증 (국내 오직 4명)을 보유하고 있고, 국내 유일 버블로 서비스를 만들어 앱스토어 11위, 1만명+ 유저 달성을 2번 해봤으며, 기존 버블 수강생이 200명이 넘습니다. (VOD 및 일대일 과외)
- 강의 가격은 약 10만원 정도로 생각하고 있으며, 사전 예약자 분들에게만 총 6만원 혜택을 제공합니다.
유료가 부담스러우시면, 저희 유튜브에서 무료 강의 (노코드로 명상 서비스 만들기)로 시작해도 좋습니다🙂