AI를 활용한 피그마 인터랙션
포토샵 생성형 AI를 활용한 이미지 늘리기, 그리고 움직이게 하기
AI를 활용했을 때 장점 중 하나는 다양한 방식의 레이아웃이나 인터랙션을 구현할 수 있도록 도와준다는 점입니다. 오늘은 디자인에 적용했던 설문조사 UI의 인터랙션을 소개하고자 합니다.
구상 과정
타겟은 저학년 초등학생이었습니다. 클라이언트로부터 학습 유형을 분석하는 설문조사 과정이 단조롭지 않았으면 좋겠다는 요청을 받았습니다. 모험을 떠나는 듯한 느낌을 주었으면 좋겠다는 것이죠.
저 또한 전체 UI중 키 비주얼이 되는 부분이 있으면 타겟 사용자를 끌어들이기 좋겠다는 생각이 들어 관련 레퍼런스를 서치했습니다. 하지만 핀터레스트에 나오는 것과 같이, 길을 따라가는 형식을 취할 경우, 배경이 되는 이미지인 길 옆으로 건물 등 다양한 요소가 놓이고 그 위에 설문조사를 위한 텍스트가 올라가기 때문에 UI가 복잡해졌습니다.
이에 아이들나라의 기차 UI에서 영감을 받았습니다. 아이들나라에서 기차는 스와이프할 수 있는 버튼이었지만, 여기서는 키비주얼 영역인 만큼 기차 요소를 활용하되 버튼이 아니라 인터랙션 요소로만 활용하기로 했습니다.
작업과정
추후 각 유형에 맞는 3D 캐릭터가 디자인될 예정이었기에 배경과 기차 또한 3D로 구상했습니다. 배경과 기차 이미지 모두 1차로 미드저니에서 뽑았습니다.
배경 이미지로는 메인으로 올 이미지를 하나 생성한 후 양쪽으로 계속 늘리는 방법을 선택했습니다. 포토샵의 생성형 AI 기능을 활용했습니다. 작업하면서 캡쳐한 이미지가 날아가서 다른 이미지로 대체해서 다시 시도해 보았습니다.
이미지를 넣은 뒤 자르기 도구로 이미지를 늘리기 원하는 만큼 영역을 잡고 '생성형 확장'을 클릭합니다.
프롬트를 넣지 않고 '생성'을 눌러도 되고, 특정 요소가 들어가기를 원한다면 프롬프트 입력 후 '생성'을 클릭합니다. 저는 중간중간 '집'이나 '기차역'등의 키워드를 넣었고 여러 번 시도하며 '큰 시계가 가운데에 있는 노란 기차역' 같은 식으로 프롬프트를 고쳐가며 원하는 느낌의 이미지를 얻었습니다.
미드저니로 만든 원본 이미지가 가운데에 포커스가 맞춰지고 양쪽이 흐릿한 이미지이다 보니 양쪽 끝의 이미지 생성 시 다소 흐릿하게 나옵니다. 하지만 투명도를 많이 낮춰 배경으로 사용할 것이기 때문에 해당 부분은 어느 정도 감안했습니다.
인사이트
기존에는 이렇게 긴 이미지를 만들기 쉽지 않았습니다. 게임 맵을 생각 해보면 디자이너가 직접 그리거나, 타일을 여러 개 그려서 이를 배치하는 식으로 맵을 늘려가야 했습니다. 하지만 이제는 생성형 만들기를 통해 가로, 세로 어디로든 이미지를 늘리고 원하는 요소를 배치할 수 있게 되었습니다. 이 부분을 활용하면 좌-우로 움직이거나 위-아래로 움직이는 인터랙션이 앞으로 더 많이 활용될 것이라 예상됩니다.
AI 시대이다 보니 이에 맞는 인터랙션이나 디자인이 늘어날 것입니다. 우리는 또 어떤 재미있는 변화를 만들어낼 수 있을까요? 기대가 됩니다.
