아래 내용은 2024년 10월 1일 발행된 팁스터 뉴스레터에 포함된 글입니다.
👉 AI로 목업 생성하기

📝 이번 주제는 '목업'이에요.

이번 주제는 디자인 과정에서 빠질 수 없는 목업(Mockup)입니다. 목업은 실제 디자인이 완성되기 전에 웹, 앱, 포스터, 제품 등 다양한 디자인 결과물이 실제로 어떻게 보일지 예측할 수 있게 하는 역할을 하죠. 디자인의 컨셉과 디테일을 생생하게 보여줄 수 있기 때문에 포트폴리오나 프레젠테이션 상황에서 효과적인 도구입니다.

하지만 목업을 제작하기 위해서는 시간과 리소스가 많이 소요되고, 디바이스별 해상도나 애니메이션을 추가할 때는 작업이 더 복잡해지기도 해요. 특히 고급 툴이나 3D 목업을 다룰 때는 학습이 필요하죠. 그래서 이번 뉴스레터에서는, 간단히 목업을 제작할 수 있는 AI 툴을 소개하려 합니다.

👀 오늘 소개할 서비스와 내용

• 이미지만 업로드하면, 원하는 컨셉의 제품 사진을 생성할 수 있는 Flair

• 고퀄 디바이스 목업을 초스피드로! Rotato

이미지만 업로드하면, 원하는 컨셉의 제품 사진을 생성할 수 있는 Flair

제품 사진 촬영을 돕는 아르바이트를 잠깐 한 적 있어요. 뷰티 제품이었는데, 정해진 컨셉에 따라 사진을 촬영하고 편집하는 과정이 신기하기도 했지만, 정말 많은 시간을 필요로 한다는 것을 알게 되었는데요. 만약 제가 같은 업무를 한다면, 제품과 잘 맞는 배경이나 분위기를 연출하는 게 가장 까다롭고 어렵게 다가올 것 같아요.

다행히(?) 최근에는 이미지만 업로드해 원하는 분위기에 따른 배경 등을 손쉽게 생성할 수 있는 서비스를 쉽게 접할 수 있는데요. 오늘 소개할 ‘Flair’ 역시 AI(인공지능)와 템플릿을 활용해 전문적인 촬영, 편집 기술이 없어도 그럴듯한 제품 사진을 얻을 수 있도록 도와줘요.

주요 기능과 특징

• 프롬프트 빌더 기능을 제공해 직접 쓰는 텍스트의 양을 줄일 수 있어요.

• 이미지, 소품, 3D 에셋을 드래그 앤 드롭으로 손쉽게 추가하고 수정할 수 있어요.

• 조명과 카메라 각도를 조정하여 원하는 장면을 구성할 수 있어요.

• 팀원을 추가해, 실시간으로 협업을 진행할 수 있어요.

• AI가 생성한 모델에 패션 의류와 잡화를 입히고 확인할 수 있어요.

• 배경 제거, 특정 영역 지우기, 제품 교체 등 다양한 AI 편집 기능을 활용할 수 있어요.

(1) 제품 업로드 → 장식 적용 → 배경 적용 → 생성하기 

‘Flair’의 사용방법은 크게 네 가지 단계로 나눌 수 있어요. 첫 번째 단계는 ‘제품 선택 및 업로드’인데요. 

학습을 위해 기본 제공되는 9개의 제품 중 하나를 선택하거나, 직접 제품 이미지를 업로드할 수 있어요. (업로드 후, 위치나 크기 등은 수정 가능)

제품을 정했으면, 이제 장식을 적용할 차례예요. 장식에 해당하는 이미지를 직접 등록하거나 등록된 것을 검색 또는 선택해 추가할 수 있어요.

이대로 생성하는 것도 가능한데, 템플릿을 선택해 제품 사진을 생성하는데 필요한 레퍼런스로 활용할 수 있어요. 재밌는 건, 제품 이미지를 생성하는 단계에 따라 프롬프트가 계속 변경된다는 점인데요. 예를 들어 템플릿을 적용하기 전과 후의 프롬프트를 보면 아래와 같이 달라진 걸 알 수 있어요.

• 템플릿 적용 전 프롬프트 : "a bottle on circular platform with white flower"

• 템플릿 선택 후 프롬프트 : "a bottle on circular platform with white flower, in front of a plain wall"

제품, 장식, 템플릿(레퍼런스)까지 선택한 뒤 생성 버튼을 눌러 최종 확인한 모습이에요. 이 정도 퀄리티의 제품 이미지를 만드는 게 걸리는 시간은 대략 2분 남짓이었어요.

이번에는 제가 직접 의자 사진을 올리고, 배경을 지운 뒤 화분을 추가해 생성한 이미지의 모습이에요. 의자 다리가 애매(?)하게 걸쳐있긴 하지만 이 모든 과정을 알아서 진행해 주니 정말 편리하고 효율적인 작업이 가능하다는 생각이 들었어요.

(2) 프롬프트 빌더의 활용

앞서, 이미지를 만드는 단계에 따라 프롬프트를 자동으로 생성한다는 이야기를 했는데요. 역으로, 최종 프롬프트를 빌더를 활용해 수정하는 기능도 제공하고 있어요. 프롬프트를 직접 수정하게 되면 일정한 규칙을 어기게 되고, 그럼 결과에도 영향을 줄 수 있기에 위치, 배경, 소품 등 제품 사진을 구성하는 요소에 따라 쉽게 수정할 수 있도록 도와주고 있어요. 게다가, 실시간 생성 기능을 제공해 변경된 프롬프트에 따른 결과는 어떤 모습인지를 빠르게 확인할 수 있다는 점 또한 매력적이에요. 

좋은 점

• 프롬프트를 하나부터 열까지 직접 입력하지 않아도 이미지를 쉽게 생성할 수 있어요.

• 배경이 있는 이미지는 알아서 배경을 제거하고, 잘 맞는 프롬프트를 추천해줘요.

• 애니메이션 추가, 영상 제작 등 제품과 관련된 다양한 작업 환경을 제공해요.

• 무료로도 꽤 많은 이미지를 생성하고 관리할 수 있어요.

아쉬운 점

• 제품 이미지 교체 기능이 없어서 삭제 후 등록 등의 과정을 거쳐야 해요.

학습 난이도 ⭐️⭐️

• 저와 같이 아주 기본적인 방법으로 이미지를 생성하는 건 매우 쉬워요.

• 하지만, 보다 세부적인 조건들을 설정하고 편집하기 위해서는 학습의 시간이 필요해요.

가격 정책

• 무료 계정으로도 월 100개의 디자인을 생성할 수 있어요

• 10개 프로제트를 관리할 수 있고, 월 기준 3분 길이의 실시간 생성 기능 활용이 가능해요.

같은 프롬프트로, 미드저니를 활용한다면?

a bottle on circular platform with white flower, in front of a plain wall

앞서 활용한 프롬프트를 미드저니에서 그대로 활용해 봤어요. 두 개의 이미지를 생성했는데요.

‘Flair’를 통해 확인한 프롬프트를 미드저니에서 활용하면서 '프롬프트'를 어떻게 작성하고 활용해야 하는지에 대한 이해도가 높아졌다는 걸 알게 되었는데요. 저처럼 아직 미드저니를 잘 활용하지 못하는 초보자라면, ‘Flair’의 프롬프트 빌더를 통해 생성한 내용을 적극적으로 쓰기 좋겠다는 생각도요. 아무래도 처음부터 원하는 내용을 쓰기엔 어떻게 작성해야 하는지에 대한 어려움이 있기 때문이에요. 

AI 툴, 실무 활용 방법 함께 스터디해요! (PH 클럽 2기)

PH 클럽은 ‘업무 효율을 높일 수 있는 AI 툴을 함께 스터디하는 모임’입니다. 업무에 도움을 받을 수 있는 AI 툴(생성형 AI, LLM 등)을 다양한 관점에서 비교 분석해요. AI를 활용해 업무 생산성을 높이는 방법을 함께 고민하고 탐구하는 데 중점을 두고 있어요.

‘PH’는 ‘프로덕티비티 해킹(Productivity Hacking)’의 약자예요. ’프로덕티비티 해킹’은 업무 효율을 극대화하는 전략을 말하는데요. 불필요한 작업을 줄이고, 중요한 일에 집중하기 위해 다양한 도구와 기술을 활용하는 것이 핵심이죠.

🍒 무엇을 얻을 수 있나요?

• 업무에 도움을 받을 수 있는 AI 툴(생성형 AI, LLM 등)을 다양한 관점에서 살펴봐요.

• 각 LLM의 특징을 이해하고, 적합한 툴을 찾는 감각을 기를 수 있어요.

• 매니저들이 단계별 업무 방식, 역량, 커리어, 툴 활용 방법 등에 대한 아티클을 공유해요.

• 스터디 결과물을 나만의 아티클, 포트폴리오로 만들어 발행해 보세요.

• 기수와 주제에 따른 실무 활용 방법을 확인할 수 있는 노션 권한을 제공해요.

😎 이런 분들이 오시면 좋아요

• AI를 실무에 적용하는 방법이 고민이신 프로덕트 매니저, 디자이너 그리고 마케터

• AI 툴에 관심은 있는데 혼자서 찾아보고 학습하기 어려운 분들

• 나와 유사한 업무를 하는 다른 참여자들의 툴 활용 사례가 궁금하신 분들

• 여러 AI 툴을 활용하고 결과를 비교 분석해 최적의 툴을 찾고 싶으신 분

PH 클럽 2기에 대해 더 궁금하시다면! 아래 링크를 통해 상세 내용을 확인 후, 신청해주세요. 신청은 11월 28일 목요일까지 진행됩니다. 

PH 클럽 2기 신청하기

고퀄 디바이스 목업을 초스피드로! Rotato

두 번째로 소개할 툴은 Rotato입니다. Rotato를 사용하면 간단한 작업으로도 사실적인 3D 디바이스 목업을 빠르게 만들어낼 수 있어요. 랜딩 페이지나 포트폴리오를 만들 때 원하는 디바이스와 각도에 맞는 목업을 찾고 만드는데 많은 시간과 리소스를 들이는데요, Rotato를 사용하면 이 과정이 너무 쉬워집니다.

주요 기능과 특징

위 이미지는 제가 Rotato를 활용해 간단히 만든 이미지예요. 그럼 툴의 주요 기능과 특징을 알아볼까요?

Rotato는 목업에 꼭 필요한 핵심 기능만을 갖추고 있어요. 최신 디바이스 모델, 그림자와 카메라 속성, 배경 설정, 렌더링 옵션 등 같은 기본 기능을 간단히 사용할 수 있는데요. 쉽게 말해, 3D 모델링 툴의 목업 버전이라고 생각하시면 이해가 쉬울 거예요.

그럼 제작 과정을 볼까요? 먼저 Figma AI에게 'A homepage for winter travel'를 만들어달라고 요청했습니다. 그리고 Ratato의 우측 패널 중앙의 Device 섹션에서 기본 설정된 iPhone을 MacBook으로 변경했어요. 이후 생성한 이미지를 불러와 각도와 배경 색상을 세팅한 후, 최종 이미지로 추출했어요.

• 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가 동일해요.

가격 정책

• Free (이미지 우하단 워드마크 포함)

• Basic (약 9만원, 1회성 결제 후 영원히 사용)

• Standard~ (약 10만원, 비디오 템플릿 제공)

팁스터 뉴스레터에서는 프로덕트와 관련된 다양한 주제의 콘텐츠를 발행하고 있어요!

• 다양한 메이커의 실무에 대한 노하우가 담긴 '메이커의 레시피'

• 디자인 업무 효율을 높이는 '인공지능 툴에 대한 이야기'

• 우리의 일상 속 소소한 재미와 그 이유를 찾아보는 '블랭크인'

• 그리고 서비스의 문제해결 방법을 산업을 중심으로 살펴보는 ‘멤버십 콘텐츠’

• 서비스의 업데이트 전/후와 실무자의 코멘트가 담긴 '업데이트 소식'