유리같은 질감, AI로 글래스모피즘 아이콘 제작
미드저니와 adobe firefly를 활용한 AI 이미지/아이콘 제작
레스토랑 검색 및 예약 관련 서비스의 UX/UI 리디자인 프로젝트를 진행했습니다. 이 과정에서 배너나 서비스 소개 페이지에 들어갈 이미지 제작 시 AI를 활용했습니다. 이 과정을 공유하고자 합니다.
먼저, 만든 아이콘을 최종 UI에 얹었을 때의 결과물은 다음과 같습니다. (예시를 위한 레이아웃과 문구이며, 실제 화면과 다릅니다. 실제 서비스에는 아래와 다른 레이아웃 및 내용으로 들어갈 예정입니다.)
헤당 서비스는 수준 높은 맛집을 찾고자 하는 유저를 대상으로 한다는 점에서 F&B업종에 속한 서비스였습니다. 이에 깔끔하고 투명한 식기류나 와인잔 같은 느낌을 줄 수 있는 글래스모피즘 컨셉을 활용하고자 했습니다. 글래스모피즘(Glassmorphism)이란 UI/UX 디자인에서 유리처럼 보이는 시각 효과를 말하며, 투명도, 블러(흐림), 반투명 레이어, 밝은 테두리, 그리고 때로는 빛 반사나 굴절 효과까지 포함합니다.
주로 불투명하게 뒷 이미지가 보이는 효과(서리 낀 유리같은)를 일컫지만, 저는 실제 유리처럼 빛 반사 효과 또한 포함된 이미지를 만들고자 했습니다. "유리처럼 반사되는" 이미지는 일반적으로 "Glass Reflection" 또는 "Glass Highlight" 등으로 표현하며, 특별히 독립된 디자인 트렌드 명칭이 있지는 않습니다. 이에 본 글에서는 '글래스 모피즘'으로 통칭했습니다.
출처: 피그마 커뮤니티해당 브랜드의 키 컬러인 블루톤을 맞출 수 있도록 푸른 계열을 사용했습니다. 아래는 미드저니와 Firefly를 활용해 제작하는 법입니다.
1. '3d glassmorphism icon'을 검색해 레퍼런스로 사용할 이미지를 찾습니다.
2. 레퍼런스를 넣고 프롬프트를 입력합니다.
3d glassmorphism icon, fork, on a white background, high quality, transparent, C4D, blender rendering
이때, 포크는 잘 나온 편이지만, 쉐프의 모자를 뽑으려고 했을 때는 아래와 같이 형태가 잘 나오지 않는 것을 볼 수 있습니다. 기존의 형태를 어느 정도 따라가기 때문입니다. 이때는 두 가지 방법이 있습니다. 스타일 가중치를 조정해 레퍼런스 이미지를 덜 참고하도록 수치를 조정하거나, adobe firefly를 사용하는 것입니다.
4. Firefly접속
adobe의 firefly는 원하는 형태와 스타일이 명확할 경우에 훨씬 쉽게 결과물을 얻을 수 있습니다. Adobe creative cloud를 구독하고 있다면 이미지 생성을 위한 크레딧이 주어집니다. 아닐 경우 별도 결제가 필요할 수 있습니다.
5. Firefly에 입력할 때는 두 가지 레퍼런스 이미지가 필요합니다. 만들 이미지의 형태와 스타일입니다.
왼쪽 패널의 컴포지션에서 '참조'는 형태를, '스타일'은 이미지의 느낌을 말합니다. 이미지 업로드를 클릭해 미리 준비한 이미지를 넣고 프롬프트 또한 입력해 넣어줍니다.
참조와 스타일 영역의 슬라이더는 해당 이미지를 얼마나 참고할지를 조절할 수 있는 기능입니다. 적절히 조절해가며 여러 번 시도해 원하는 이미지를 뽑을 수 있습니다.
기존의 stock이미지와 미드저니, firefly를 적절히 활용하면 원하는 이미지를 얻을 수 있습니다. 상상하는 만큼 크리에이티브 해질 수 있도록 도와주는 것이 AI라는 생각이 듭니다. 다양한 AI툴을 활용해 즐겁게 디자인 하시기를 바랍니다!
