by
Aug 10. 2023
UI·UX 앱 디자인에 인공지능 써먹기
Newtudy 4기 <디자이너와 Ai>
생성 Ai를 활용해서 앱 디자인을 할 수 있다면
UI·UX 디자이너, 프로덕트 디자이너가 사라지는 시대가 올까요?
그 실험에 대한 답을 간접적으로 공유하려고 합니다.
결과는 아직 완벽히 대체하지 못합니다.
사용자 서비스의 핵심 중 하나는 일관성입니다.
생성 Ai는 아직 일관성이 부족합니다. 이미지를 생성할 때마다 매번 랜덤 하게 이미지를 뽑아냅니다.
여러 기능을 동원해서 기존 이미지를 유지하면서 만들 수 있겠지만
UI를 전문으로 학습시킨 인공지능 모델이 아닌 이상 일반 생성 Ai는 일관성 있는 이미지를 사람보다 못 만듭니다.
이런 한계점이 있기에 과거에 기획만 해놨던 서비스를 Ai를 통해 빠르게 완성시키자는 목표를 세웠습니다.
내용은 완성되어 있지만, 이미지 소스를 완성하지 못한 작업을 빠르게 만들 수 있겠다는 생각이 들었던 것이죠.
결과물은 다음과 같습니다.
정원을 가꾸는 앱 서비스를 디자인했습니다.
황현동, 이예림모든 화면을 Ai가 디자인해준 것은 아니고 앱 안에 들어가는 모든 그래픽 요소를 Ai를 통해 만들었습니다.
1. 미드저니를 통해 아이소매트릭 정원을 먼저 만들었습니다.
Tiny cute isometric flower garden , soft smooth lighting, soft colors, 100mm lens, 3d render, green background, physically based rendering, centered --v 5.1 --s 750 --v 5.1
아이소매트릭의 하단 부분을 만들고 싶은데 일부 이미지만 컨트롤하는 것이 어려울 때가 있습니다. 이때 인페이팅 기술이 필요합니다.
2. 포토샵을 이용하여 생성을 원하는 부위를 스케치 이후 미드저니 프롬프트 재입력하여 재생성합니다.
Tiny cute isometric flower garden , soft smooth lighting, soft colors, 100mm lens, 3d render, green background, physically based rendering, centered --v 5.1 --s 750 --v 5.
3. 16:9 비율로 설정한 후에 하단 스케치 영역을 미드저니로 재생성했습니다.
Tiny cute isometric flower garden , soft smooth lighting, soft colors, 100mm lens, 3d render, green background, physically based rendering, centered --ar 9:16 --v 5.1 --s 750 --v 5.1
3D 텍스처 모델 만들기
3D 툴에 활용할 수 있는 실험이 하나 있습니다.
잔디를 3D로 구현하려면 초보자들은 꽤 번거로운 과정을 거쳐야 하는데, 미드저니만 있다면 간단히 구현할 수 있습니다.
1. 미드저니로 텍스쳐로 사용할 타일링 이미지를 뽑습니다.
grass in pixar, top down view, soft colors, 4k, --tile --s 750 --v 5.1
--tile은 미드저니에서 사용하는 파라미터입니다. 외워두는 것을 추천합니다.
2. Blender 내 Smart UV에 삽입 후 Hair Tool을 통해 잔디 느낌을 첨가합니다.
3. 미드저니 텍스쳐를 이용한 3D Object 제작을 간단하게 완성시켰습니다.
크리에이티브 디자인 워크숍 <Ai 미식회> 신청하기
