오늘날의 앱 디자인 트렌드는 사용자의 눈을 사로잡는 시각적 요소를 통해 경험을 강화하는 것입니다. 그 중에서도 3D 그래픽은 사용자의 관심을 끌고 몰입감을 제공하는 데 탁월한 역할을 합니다. 이 글에서는 3분 만에 앱 디자인에 사용할 수 있는 트랜디한 3D 아이콘 제작 방법을 소개합니다.
준비물
- Stylar.ai: 이 도구를 사용하여 기본 3D 그래픽을 생성합니다.
- Figma: Stylar에서 생성된 그래픽을 가져와 업그레이드하고 최종 디자인을 완성합니다.
3D느낌 아이콘 제작
1. 디자인 주제 설정
디자인의 주제를 설정합니다. 오늘은 예시로 가상 앱의 생일 축하 화면에 포함될 생일 케이크를 제작해 보도록 하겠습니다. 이해를 돕기 위해 핀터레스트에서 제가 상상한 것과 비슷한 느낌의 레퍼런스를 가져와 보겠습니다. 토스의 깔끔하고 현대적인 느낌의 그래픽 요소입니다.
2. Stylar 접속
Stylar.ai 웹사이트에 접속합니다. 이 플랫폼은 인공지능을 활용해 사용자가 원하는 스타일과 주제에 맞는 3D 그래픽을 빠르게 제작할 수 있게 해줍니다.
Stylar의 인터페이스는 매우 단순합니다. 새 파일을 만들거나 Style Library에서 스타일을 선택할 수 있습니다. 앱의 전반적인 테마와 조화를 이룰 수 있도록 스타일을 선택합니다.
간결하고 현대적인 느낌의 Miniatures 스타일을 찾았습니다. 이 스타일을 적용해 보겠습니다.
3. 아이콘 생성
스타일을 선택했다면 프롬프트를 입력 후 ‘생성’ 버튼을 클릭합니다. ‘cake’라고 입력하니 몇 초 내로, 3D 생일 케이크 그래픽이 생성됩니다. 이미 지정된 스타일이 적용되므로 복잡한 프롬프트를 입력하지 않아도 간결하고 현대적인 그래픽이 생성됩니다. 한 번에 4개씩 생성됩니다.
만약 원하는 오브젝트의 형태가 명확하다면 프롬프트를 추가하여 원하는 것에 접근할 수 있습니다. 제가 좋아하는 딸기로 데코된 생크림 케익을 제작해 보겠습니다. 현재 블로그 업로드를 위해 이미지 품질을 압축하였는데, 실제 원본 품질은 꽤 만족스럽습니다.
프롬프트 창 아래 Style intensity 바를 조절하여 스타일 강도를 조절할 수 있습니다. 이전에 생성한 이미지보다 스타일 강도를 낮추니 이미지가 조금 더 복잡해졌음을 알 수 있습니다.
stylar.ai는 이미지를 생성하는 것 외에 놀라운 몇 가지 기능을 제공합니다. 생성된 이미지 중 원하는 이미지를 클릭하면 ‘Place on canvas’버튼이 활성화 됩니다. 해당 버튼을 클릭하면 우측에 보이는 캔버스에 선택한 이미지가 노출됩니다.
캔버스에서 ‘Generative Remove’를 클릭하면 깔끔하게 배경이 제거됩니다.
상단의 텍스트 버튼을 눌러 간단하게 원하는 텍스트를 삽입할 수 있습니다. 우측의 레이어창에서 레이어를 on / off 할 수 있습니다.
캔버스 인터페이스는 피그마와 매우 흡사하며, 쉽게 설계되어 있어 처음 접근한 사람도 쉽게 사용이 가능합니다. 상단의 ‘export’를 클릭하여 이미지로 저장합니다.
생성한 그래픽 업그레이드
Stylar.ai에서 생성된 그래픽을 Figma에 가져옵니다.
이제 Figma의 다양한 도구와 기능을 활용해 그래픽에 디테일을 추가합니다. 배경에 살짝 그라데이션을 넣어 공간의 깊이를 더하고, 촛불이 밝혀진 느낌을 추가합니다.
몇 분 만에 앱 디자인에 활용할 수 있는 매력적이고 트랜디한 3D 생일 케이크 그래픽이 준비되었습니다. 시간을 체크해보니 대략 10분정도 걸렸습니다. 정말 놀랍지 않나요? Stylar를 활용하여 빠르게 고품질의 그래픽을 제작할 수 있음을 알 수 있습니다.
같은 프로젝트에 사용할 다른 그래픽 요소가 필요하다면, 단순 프롬프트 입력을 통해 빠르게 고품질 그래픽 에셋을 생성할 수 있습니다. 사용자의 경험을 향상시키고 앱의 시각적 매력을 높이는 데 이러한 그래픽이 큰 역할을 할 것입니다.
무료 사용 가능
Stylar는 기본적으로 무료로 제공됩니다. 우측 상단에서 잔여 크레딧을 확인할 수 있는데, 현재 매주 200크레딧을 제공하며 이미지나 기능을 사용할 경우 크레딧이 차감됩니다. 200크레딧으로도 수백개의 이미지를 생성할 수 있습니다.
유료 결제할 경우 월 10달러로 2000 크레딧을 사용할 수 있습니다. 저는 사용해보니 속도도 빠르고 크레딧도 충분하게 제공하여 무료 버전을 사용하고 있습니다.
더 자세한 내용은 FAQ에서 확인하실 수 있습니다.
결론
Stylar.ai와 Figma의 조합은 다양한 테마와 스타일의 그래픽을 빠르고 효율적으로 제작하는 데 활용될 수 있습니다. 웹 또는 앱 디자인 프로젝트에 이러한 도구들을 적극 활용해 보세요. 여러분이 진행하는 프로젝트의 품질 향상에 큰 도움이 될 것입니다.
Hi there! Someone in my Facebook group shared this website
with us so I came to check it out. I’m definitely loving
the information. I’m bookmarking and will be tweeting this to my followers!
Wonderful blog and terrific style and design.
I have noticed that in digital cameras, extraordinary sensors help to concentrate automatically. The actual sensors of some video cameras change in contrast, while others utilize a beam associated with infra-red (IR) light, particularly in low lumination. Higher specs cameras occasionally use a combination of both devices and could have Face Priority AF where the digital camera can ‘See’ a new face while focusing only on that. Thanks for sharing your ideas on this web site.