📝 이번 주제는 '목업'이에요.
이번 주제는 디자인 과정에서 빠질 수 없는 목업(Mockup)입니다. 목업은 실제 디자인이 완성되기 전에 웹, 앱, 포스터, 제품 등 다양한 디자인 결과물이 실제로 어떻게 보일지 예측할 수 있게 하는 역할을 하죠. 디자인의 컨셉과 디테일을 생생하게 보여줄 수 있기 때문에 포트폴리오나 프레젠테이션 상황에서 효과적인 도구입니다.
하지만 목업을 제작하기 위해서는 시간과 리소스가 많이 소요되고, 디바이스별 해상도나 애니메이션을 추가할 때는 작업이 더 복잡해지기도 해요. 특히 고급 툴이나 3D 목업을 다룰 때는 학습이 필요하죠. 그래서 이번 뉴스레터에서는, 간단히 목업을 제작할 수 있는 AI 툴을 소개하려 합니다.
👀 오늘 소개할 서비스와 내용
- 이미지만 업로드하면, 원하는 컨셉의 제품 사진을 생성할 수 있는 Flair
- 고퀄 디바이스 목업을 초스피드로! Rotato
이미지만 업로드하면, 원하는 컨셉의 제품 사진을 생성할 수 있는 Flair
제품 사진 촬영을 돕는 아르바이트를 잠깐 한 적 있어요. 뷰티 제품이었는데, 정해진 컨셉에 따라 사진을 촬영하고 편집하는 과정이 신기하기도 했지만, 정말 많은 시간을 필요로 한다는 것을 알게 되었는데요. 만약 제가 같은 업무를 한다면, 제품과 잘 맞는 배경이나 분위기를 연출하는 게 가장 까다롭고 어렵게 다가올 것 같아요.
다행히(?) 최근에는 이미지만 업로드해 원하는 분위기에 따른 배경 등을 손쉽게 생성할 수 있는 서비스를 쉽게 접할 수 있는데요. 오늘 소개할 ‘Flair’ 역시 AI(인공지능)와 템플릿을 활용해 전문적인 촬영, 편집 기술이 없어도 그럴듯한 제품 사진을 얻을 수 있도록 도와줘요.
주요 기능과 특징
- 프롬프트 빌더 기능을 제공해 직접 쓰는 텍스트의 양을 줄일 수 있어요.
- 이미지, 소품, 3D 에셋을 드래그 앤 드롭으로 손쉽게 추가하고 수정할 수 있어요.
- 조명과 카메라 각도를 조정하여 원하는 장면을 구성할 수 있어요.
- 팀원을 추가해, 실시간으로 협업을 진행할 수 있어요.
- AI가 생성한 모델에 패션 의류와 잡화를 입히고 확인할 수 있어요.
- 배경 제거, 특정 영역 지우기, 제품 교체 등 다양한 AI 편집 기능을 활용할 수 있어요.
(1) 제품 업로드 → 장식 적용 → 배경 적용 → 생성하기
‘Flair’의 사용방법은 크게 네 가지 단계로 나눌 수 있어요. 첫 번째 단계는 ‘제품 선택 및 업로드’인데요.
제품을 정했으면, 이제 장식을 적용할 차례예요. 장식에 해당하는 이미지를 직접 등록하거나 등록된 것을 검색 또는 선택해 추가할 수 있어요.
이대로 생성하는 것도 가능한데, 템플릿을 선택해 제품 사진을 생성하는데 필요한 레퍼런스로 활용할 수 있어요. 재밌는 건, 제품 이미지를 생성하는 단계에 따라 프롬프트가 계속 변경된다는 점인데요. 예를 들어 템플릿을 적용하기 전과 후의 프롬프트를 보면 아래와 같이 달라진 걸 알 수 있어요.
- 템플릿 적용 전 프롬프트 : "a bottle on circular platform with white flower"
- 템플릿 선택 후 프롬프트 : "a bottle on circular platform with white flower, in front of a plain wall"
제품, 장식, 템플릿(레퍼런스)까지 선택한 뒤 생성 버튼을 눌러 최종 확인한 모습이에요. 이 정도 퀄리티의 제품 이미지를 만드는 게 걸리는 시간은 대략 2분 남짓이었어요.
이번에는 제가 직접 의자 사진을 올리고, 배경을 지운 뒤 화분을 추가해 생성한 이미지의 모습이에요. 의자 다리가 애매(?)하게 걸쳐있긴 하지만 이 모든 과정을 알아서 진행해 주니 정말 편리하고 효율적인 작업이 가능하다는 생각이 들었어요.
(2) 프롬프트 빌더의 활용
앞서, 이미지를 만드는 단계에 따라 프롬프트를 자동으로 생성한다는 이야기를 했는데요. 역으로, 최종 프롬프트를 빌더를 활용해 수정하는 기능도 제공하고 있어요. 프롬프트를 직접 수정하게 되면 일정한 규칙을 어기게 되고, 그럼 결과에도 영향을 줄 수 있기에 위치, 배경, 소품 등 제품 사진을 구성하는 요소에 따라 쉽게 수정할 수 있도록 도와주고 있어요. 게다가, 실시간 생성 기능을 제공해 변경된 프롬프트에 따른 결과는 어떤 모습인지를 빠르게 확인할 수 있다는 점 또한 매력적이에요.
좋은 점
- 프롬프트를 하나부터 열까지 직접 입력하지 않아도 이미지를 쉽게 생성할 수 있어요.
- 배경이 있는 이미지는 알아서 배경을 제거하고, 잘 맞는 프롬프트를 추천해줘요.
- 애니메이션 추가, 영상 제작 등 제품과 관련된 다양한 작업 환경을 제공해요.
- 무료로도 꽤 많은 이미지를 생성하고 관리할 수 있어요.
아쉬운 점
- 제품 이미지 교체 기능이 없어서 삭제 후 등록 등의 과정을 거쳐야 해요.
학습 난이도 ⭐️⭐️
- 저와 같이 아주 기본적인 방법으로 이미지를 생성하는 건 매우 쉬워요.
- 하지만, 보다 세부적인 조건들을 설정하고 편집하기 위해서는 학습의 시간이 필요해요.
같은 프롬프트로, 미드저니를 활용한다면?
앞서 활용한 프롬프트를 미드저니에서 그대로 활용해 봤어요. 두 개의 이미지를 생성했는데요.
‘Flair’를 통해 확인한 프롬프트를 미드저니에서 활용하면서 '프롬프트'를 어떻게 작성하고 활용해야 하는지에 대한 이해도가 높아졌다는 걸 알게 되었는데요. 저처럼 아직 미드저니를 잘 활용하지 못하는 초보자라면, ‘Flair’의 프롬프트 빌더를 통해 생성한 내용을 적극적으로 쓰기 좋겠다는 생각도요. 아무래도 처음부터 원하는 내용을 쓰기엔 어떻게 작성해야 하는지에 대한 어려움이 있기 때문이에요.
고퀄 디바이스 목업을 초스피드로! Rotato
두 번째로 소개할 툴은 Rotato입니다. Rotato를 사용하면 간단한 작업으로도 사실적인 3D 디바이스 목업을 빠르게 만들어낼 수 있어요. 랜딩 페이지나 포트폴리오를 만들 때 원하는 디바이스와 각도에 맞는 목업을 찾고 만드는데 많은 시간과 리소스를 들이는데요, Rotato를 사용하면 이 과정이 너무 쉬워집니다.
주요 기능과 특징
위 이미지는 제가 Rotato를 활용해 간단히 만든 이미지예요. 그럼 툴의 주요 기능과 특징을 알아볼까요?
Rotato는 목업에 꼭 필요한 핵심 기능만을 갖추고 있어요. 최신 디바이스 모델, 그림자와 카메라 속성, 배경 설정, 렌더링 옵션 등 같은 기본 기능을 간단히 사용할 수 있는데요. 쉽게 말해, 3D 모델링 툴의 목업 버전이라고 생각하시면 이해가 쉬울 거예요.
그럼 제작 과정을 볼까요? 먼저 Figma AI에게 'A homepage for winter travel'를 만들어달라고 요청했습니다. 그리고 Ratato의 우측 패널 중앙의 Device 섹션에서 기본 설정된 iPhone을 MacBook으로 변경했어요. 이후 생성한 이미지를 불러와 각도와 배경 색상을 세팅한 후, 최종 이미지로 추출했어요.
꿀팁) 무료 버전에서는 이미지를 추출하면 우측 하단에 Rotato 로고가 포함되는데, 이미지를 내보낼 때 옵션에서 Sequence image를 선택하면 로고 없이 익스포트할 수 있어요.
- MOV, GIF, Sequence image, PNG 등 다양한 포맷으로 추출
- 아이폰, 아이패드, 맥북, 멀티 디바이스 모델과 Clay 타입 지원
- 다양한 배경 (linear, solid, sky, transparents 등) 및 반사도 커스텀
- Camera의 Focus Blur, Motion Blur 설정, DSLR 옵션에서 HDR을 포함한 상세 설정
- 배경에 디바이스와 같은 투시각으로 텍스트 추가
저에게는 특히 Rotato의 애니메이션 생성 기능이 돋보였어요.
애니메이션을 만드는 방법은 간단한데, 원하는 각도를 설정한 후 툴 하단의 +Add animation 버튼을 클릭해 포지션 키를 지정하면 돼요. (위 이미지처럼 우측 패널을 보면 설명 영상을 볼 수 있는 곳이 있어요!) 실제로 사용해보니, 간단한 조작만으로도 고퀄리티 영상을 빠르게 만들 수 있어 놀라웠어요. 여기에 모션뿐 아니라 디바이스 화면 내에서 이미지를 스크롤할 수 있는 기능도 있어 큰 히어로 이미지가 목업을 꽉 채우는 경우, 하단의 콘텐츠까지 자연스럽게 보여줄 수 있었어요.
제가 만든 영상은 👉 여기를 클릭해 확인해 보세요!
좋은 점
- 쉽게 디바이스 목업을 만들 수 있어요.
- 피그마 플러그인을 제공해 연동이 쉽고 접근성이 좋아요.
아쉬운 점
- 웹으로 구동되지 않아 프로그램을 다운받아야 해요.
- Mac에서만 사용할 수 있어요. (macOS 11 이상)
학습 난이도 ⭐️
After Effect 등 영상 툴과 기본적인 UX가 동일해요.
AI로 제품 기획부터 디자인, 검증까지 : PH 클럽 시즌2, 6기 모집
프로그램은 4주로 구성되어 있고, 한 주에 하나씩 네 가지 주요 미션에 참여하게 돼요.미션에 따라 에디터들이 사용하면 좋은 도구를 계속 추천하고 정리해드려요!
4월부터 시작되는 PH 클럽 시즌2 (6기)에 참여하면 위와 가튼 미션에 참여, 다른 참여자의 과정을 함께 보며 이야기를 나눌 수 있어요. 그렇게 4주 동안 우리는 문제 정의부터 검증까지 일련의 과정에서 AI를 적극적으로 활용하며 새로운 업무 방법에 대한 감각을 익힐 수 있죠!
- 문제 정의부터 검증까지 일련의 과정에서 AI를 적극적으로 활용할 수 있어요.
- 기수별 참여자가 작성한 프롬프트는 물론, 단계별 결과물을 확인할 수 있어요.
- 기수와 상관없이 참여한 분들과 실무, AI에 대해 이야기를 나눌 수 있어요.
- 프롬프트 활용 팁, 단계별 사용하기 좋은 툴 등 다양한 정보를 살펴볼 수 있어요.
스터디 효율을 위해 제한된 인원으로 진행하며, 신청은 아래 버튼을 클릭해주세요!
#지식토스트