2023 AI 기반 UI·UX 디자인 트렌드

 

 

 

이 게시글은 공부하면서 정리한 내용입니다.

잘못된 정보는 제보해주시면 매우 감사드리겠습니다.

 

---

 

 

 

2023년을 맞아 새롭게 UI·UX 디자인 트렌드에 대해 알아보았다.

 

작년을 회고해보면 블록체인과 메타버스에 대한 사람들의 기대가 있었지만,

루나가 대폭락하고 FTX가 파산, 메타가 부진하는 등

시장의 불확실성이 커지고, 실리콘밸리에서 대량 해고가 시작되는 해였다.

 

 

디자인 분야에서는

미래지향적인 3D 요소와 애니메이션, Y2K 스타일이 다양한 플랫폼에서 활용되었고,

3D 요소에는 Claymorphism, 3D Chrome Effects, 3D Glass Texture 등이 눈에 띄었다.

 

시장의 흐름에 따라 디자인 트렌드도 변화한다.

2023년 디자인 트렌드 중 인공지능 기술을 이용한 디자인에 초점을 맞춰보았다.

 

 

 

 

 

2023 AI 기반 UI·UX 디자인 트렌드 

 

인공지능 기술은 이미 다양한 서비스에서 고객의 문제를 해결하고 있다.

2022년에 IBM에서 발표한 AI 도입 보고서에 따르면 전세계 기업의 AI 채택률은 35%에 달한다고 한다.

기업의 2/3가 AI 기술을 계획하거나 이미 실행하고 있고,

이제는 작업 프로그램에도 인공지능이 도입되어 일상을 넘어 일에도 적용되고 있다.

 

 

전세계 AI 도입률, 2022년 IBM AI 도입 보고서 (클릭 시 이동)

 

 

AI 이미지 생성 서비스로 디자인 의사 결정

 

사용자가 입력한 정보를 바탕으로 이미지를 생성하는 ai 서비스가 늘어나고 있고,

Dall-E, Midjourney, Stable Diffusion은 이미 유명한 이미지 생성 서비스다.

그 중 Midjorney로 생성한 그림이 아트 페어에서 상을 받았을 정도로 전반적인 기술 수준이 높다. (관련 기사)

 

그동안 디자이너는 웹사이트에서 원하는 이미지가 나오기까지 몇 시간이고 검색하는 수고를 들여야 했다.

시안이나 무드 보드 제작 시 비핸스, 드리블, 핀터레스트 등에 접속하여 이미지 서칭을 해야 했지만,

이제는 AI 이미지 생성 서비스에 요구사항을 입력하여 빠르게 이미지를 얻을 수 있다.

 

직접 Midjorney에 명령어를 입력하여 3D 유리 질감 엘리먼트를 만들어보았다. 

 

 

Midjorney 프롬프트에 입력하여 얻은 이미지

 

 

사용자가 프롬프트에 원하는 이미지에 대한 명령어를 입력하면,

1~2분 후 AI가 이렇게 4가지의 시안을 보여준다.

시안 아래의 V 버튼을 눌러 이미지를 더 발전시켜 보았다.

 

 

Midjorney 최종 산출물

 

사람이 만든 듯한 정밀하고 감각적인 3D 그래픽 이미지가 완성되었다.

 

이렇게 생성된 이미지를 참고하여 디자이너가 작업하거나

이해관계자들과 미팅하는 데 활용하여 빠른 의사결정을 이뤄낼 수 있다.

특히, 아직 결정되지 않은 컨셉에 사용될 이미지를 찾는 데 걸리는 시간을 단축할 수 있다.

 

 

Adobe AI로 사진, 영상 편집

 

Adobe에서는 기존의 Adobe 프로그램에 Generative AI 기술을 통합하고 있다.

현재 제공되는 Photoshop의 Content-Aware Fill(내용 인식 채우기)은 선택한 영역의 오브젝트를 제거하였지만,

이제는 프롬프트에 원하는 개체명을 입력하면 원본 이미지에 추가로 개체를 생성하는 기술이 개발되고 있다.

 

 

새 개체 추가, 기존 개체 변형 예시 (클릭 시 이동)

 

 

또한, 연례 행사인 2022년 MAX Sneaks에서 개발 중인 AI 기술을 선보였는데,

Vector Edge는 그 중 가장 활용도가 높을 것 같은 기능이다.

2D 디자인 에셋을 3D 에셋 개체 표면에 드래그하면 자동으로 AI가 표면에 맞게 투영한다.

 

 

Vector Edge 사용 예시 (클릭 시 이동)

 

 

그동안 목업 이미지를 만들기 위해 여러 웹사이트에서 원하는 목업 PSD 파일을 찾아 다니거나

Photoshop에서 Smart Object를 변형하여 고정된 템플릿을 만들어야 했다.

클릭/드래그 만으로 쉽고 자유롭게 편집이 가능하다면 목업 작업에 드는 시간을 상당 부분 줄일 수 있다.

 

이외에도 Motion Mix, Magnetic Type 등 9개의 새로운 인공지능 기반 기능이 있으며,

2022년 MAX Sneaks 녹화본 을 참고하면 해당 기능을 자세히 알 수 있다.

 

 

Figma AI 플러그인으로 디자인 작업

 

이미 Figma는 전세계 UI·UX 디자이너의 필수 프로그램이 되었다.

 

2022년 Design Tools Survey에 따르면,

UI 디자인, 기본 프로토타이핑, 디자인 시스템 영역에서 Figma가 압도적 1위를 차지했다.

사실 상 인터페이스 디자인은 모두 Figma로 할 수 있다는 얘기다.

 

 

2022년 Design Tools Survey 통계

 

 

심지어 리포트나 발표 자료 등 각종 문서 작업도 Figma로 하고,

인쇄물 시안까지 피그마로 작업하기도 한다.

(물론 인쇄소 양식에 맞춰 재작업 필요)

 

Adobe가 Figma를 인수했으므로 남은 XD 사용자들도 Figma로 마이그레이션 되고,

Figma에 인공지능 기능이 기본으로 탑재되어 자동으로 UI 디자인이 가능할 날이 멀지 않았다.

 

그리고 이미 Figma에서 AI 플러그인을 사용할 수 있다.

Magician(현재 유료)을 사용하면 입력한 텍스트를 아이콘, 카피, 이미지로 자동 변환할 수 있다.

각 기능은 Magic Icon, Magic Copy, Magic Image로 총 3가지로 나뉘어 있다.

 

 

Magic Copy 사용 예시

 

 

그 중 Magic Copy는 사용자가 프롬프트에 가제를 입력하면 적절한 카피를 생성하여,

디자이너가 카피라이팅에 할애하는 시간을 줄여준다.

마찬가지로 Magic Icon은 아이콘 만드는 시간, Magic Image는 사진 찾는 시간을 줄여준다.

 

또한 UI 컴포넌트를 자동으로 생성해주는 플러그인도 있다.

Lui for Figma를 사용하면 입력한 텍스트를 바탕으로 UI가 만들어진다.

“아바타와 설명이 있는 카드 UI를 만들어줘”라고 입력하면 아바타와 설명이 있는 UI가 만들어진다.

 

 

Lui for Figma 사용 예시

 

 

아직 데모 버전이라 버그도 많고 완벽하진 않지만,

이런 기능이 더욱 고도화되면

디자이너가 입력한 조건에 따라 컴포넌트를 생성하고, 디자인 시스템을 개발할 수도 있을 것이다.

 

 

ChatGPT를 이용한 디자인 작업

 

Dall-E를 만든 OpenAI가 개발한 대화형 AI 서비스, ChatGPT가 월간 사용자 1억명을 달성하였다.

다른 챗봇과 달리 산출 결과물이 뛰어나 출시 5일 만에 사용자 수 100만명을 기록하였고,

사용자가 ChatGPT로 과제 레포트를 작성하여 제출하는 일도 일어나고 있다.

 

이미 개발자들은 ChatGPT를 변수명이나 간단한 코드를 짜는 데 활용하고 있고,

디자이너도 제품 설명, 카피라이팅, 네이밍 등을 작성하는 데 ChatGPT를 활용할 수 있다.

 

직접 ChatGPT에 구매하기 버튼 문구를 작성해달라고 입력했다.

 

 

ChatGPT에 직접 질문하여 얻은 대답

 

 

그럴 듯한 문구 설정과 왜 그렇게 작성했는지에 대한 설명까지 붙여준다.

물론 UX Writing은 통일성이 있어야 해서 이런 방식이 정답은 아니지만,

만약 일회성 문구나 에셋 이름을 작명할 때 조금 막힌다면 도움이 많이 될 것 같다.

 

나중에는 인터랙션 UI를 코드로 출력할 수도 있을 것이다.

 

구글에서도 이와 비슷한 AI 서비스 Bard가 개발되고 있고 (참고 링크)

앞으로 AI 서비스가 작업 시간을 단축시키는 데 매우 유용할 것으로 기대된다.

특히 작업에 많은 시간과 인력을 쓰기 어려운 초기 스타트업이나 중소기업에서 매우 필요하지 않을까 싶다.

 

 

 

 

지금까지 2023년 AI를 바탕으로 UI·UX 디자인 트렌드에 대해 알아보았다.

 

매년 빠르게 변화하는 IT 시장에서 2023년이 어떻게 마무리되고,

내년에는 또 어떤 흐름이 이어질지 매우 기대된다.