한국 시간으로 6월 22일 오전 1시, 피그마 컨퍼런스 2023(Config 2023)이 드디어 막을 올렸습니다. 사실상 전 세계 UX/UI 디자이너들의 축제이자, 디자인 쪽에서 가장 성대하고 큰 파티라고 할 수 있는데요. 전체적인 방향은 피그마 안에서 모든 UI와 UX 작업을 할 수 있도록, 개발 지향적인 기능들을 통해 협업 시너지를 더 극대화할 것으로 보입니다. 이전까지의 피그마와는 완전히 다른 개념의 새로운 디자인-개발 협업 툴의 패러다임을 제시하는 느낌이었습니다. 그동안 디자이너들이 그토록 원했던 핵심 기능 중 어떤 것이 업데이트될 예정인지, 개발 지향적인 기능들은 어떤지, 직접 라이브를 보며 간단하게 메모해 봤습니다.

챗GPT 등장 이후 AI가 텍스트뿐만 아니라 이미지, 음성, 영상 등 다양한 형태의 결과물을 생성하는 능력을 갖추게 되면서, 다양한 분야에서 사용 가능성에 대한 고민이 이루어지고 있다. 이번 글에서는 텍스트 기반의 명령어나 간단한 작업만으로도 AI가 이미지를 얼마나 똑똑하게 생성할 수 있는지, 이미지 생성 기술의 발전 정도에 대해 알아보고자 한다. 해당 기술은 아직 시장 초기 단계에 있지만, 이미 마케팅, 디자인, 교육, 게임 등 여러 산업에서 활용하려는 시도가 많은 만큼, 유의미한 분석이 될 것이다.

그라데이션은 하나의 색이 아닌 두 개 이상의 컬러가 점진적으로 변화되는 모습을 의미합니다. 그라데이션의 경우 역동적이고 자유로운 모습을 표현하고, 속도감 있는 움직임을 보여줄 수 있다는 점에서 여러 서비스는 물론 그래픽 작업에도 자주 사용되고 있습니다. 오늘 소개할 ‘CSS HD Gradients’는 2개 이상의 컬러를 조합, 원하는 스타일과 각도 등을 활용해 그라데이션을 웹상에서 쉽게 생성할 수 있는 서비스입니다. 특히 그라데이션을 빠르게 적용하고 싶지만, 별도의 툴을 학습해야 한다는 어려움이 있을 때 좋은 선택지가 될 것입니다.

2022년 10월, 마이크로소프트는 ‘디자이너’라는 서비스를 공개했습니다. 서비스명부터 디자이너가 포함된 이 서비스는 프레젠테이션, 엽서, 포스터, 초대장 등 다양한 그래픽을 위한 디자인 생성해 주며, 국내에도 많은 사용자를 보유하고 있는 캔바(Canva)와 유사한 웹 앱입니다. 주목할 만한 점이 있다면 서비스가 모두 인공지능(AI)으로 구동된다는 점으로, 사용자가 만든 콘텐츠와 OpenAI의 텍스트/이미지 생성 AI인 ‘DALL-E 2’를 활용하여 디자인 작업이 가능합니다.

다섯 가지 구성요소를 활용해, 유저 인터페이스(UI) 구성과 그에 따른 코드를 생성할 수 있는 ‘Shaper’를 소개합니다. ‘Shaper’에서 제공하는 핵심 기능은 1) 타입, 컬러, 여백, 테두리 등에 포함되는 세부 값을 입력 또는 원하는 조건을 선택해 일정 기준의 인터페이스 구성 가능 2) 기본 제공되는 인터페이스를 테마에 따라 변경한 뒤 상세 조건을 추가하거나 설정해, 원하는 모습의 인터페이스 제작 가능 3) 컬러, 여백, 테두리 등 다섯 가지 구성요소 중 하나를  선택해 인터페이스 랜덤 생성 가능 4) 생성한 인터페이스를 웹상에서 빠르게 확인할 수 있는 코드 제공 등이 있는데요. 지금부터 자세히 살펴보겠습니다.

디자이너는 개발자와의 소통에 신경 써야 합니다. 디자이너에게 그들만의 언어가 있듯, 개발자도 개발자만의 언어가 있습니다. 개발자와 잘 소통하기 위해 디자인 언어를 개발자 언어로 변환해야 하는 것이죠. 그렇다고 코딩을 배우라는 뜻은 아닙니다. 열심히 만든 작업물을 실제로 잘 구현하기 위해 어떤 ‘정보’를 전달해야 하는지 알면 됩니다. 이번 글에선 어떻게 모션 디자인 관련 가이드를 개발자에게 잘 전달할 수 있을지, 제작 팁에 대해 소개하겠습니다.

최근 뉴욕타임스나 워싱턴 포스트와 같은 미국 언론사에서는 노코드 데이터 시각화 툴인 ‘데이터래퍼(Datawrapper)’를 많이 사용하고 있습니다. 데이터래퍼는 간단한 차트, 지도 및 표를 쉽게 만들 수 있도록 도와줍니다. 제가 워싱턴 포스트에서 그래픽 기자로 근무할 당시에도 이 툴을 자주 사용했었습니다. 데이터래퍼는 다른 노코드 데이터 시각화 툴에 비해 차트 형식, 디자인, 주석 등의 설정이 용이합니다. 이 스토리에서는 누적 영역 그래프(Stacked area chart)를 함께 만들어보려고 합니다. 무료로 제공되는 버전을 이용하여 인터랙티브 차트를 제작할 예정입니다.

서비스의 개선점을 찾거나 공유할 때, 보통 화면을 캡처하거나 최신 버전에 해당하는 기능 정의 또는 스토리보드, 와이어 프레임을 업데이트하는 경우가 많습니다. 익숙한 방법이지만 한 번의 과정이 더 추가되고, 실제 화면 기준으로 논의하기 어렵다는 한계점이 있습니다. 오늘 소개하는 ‘ruttl(루틀)’은 이러한 불편함을 해소할 수 있는 서비스입니다. 사용자가 실제 보는 화면을 기준으로 목적(다음 버전을 위한 개선사항 등)에 따라 코멘트를 남기거나, 어떻게 개선하면 좋을지 구체적인 적용 방안을 쉽게 관리할 수 있습니다.

챗GPT의 등장으로 서비스는 물론 업무 과정에도 많은 영향을 끼치고 있는데요. 특히 AI에게 정확한 명령을 내려 높은 품질의 결과를 얻기 위한 ‘프롬프트’가 핵심으로 떠오르고 있습니다. 오늘 소개할 ‘AI Colors’도 프롬프트와 깊은 연관이 있습니다. 컬러 구성과 관련된 프롬프트를 입력하면 다섯 가지 컬러를 생성해 주고, 생성된 컬러를 랜딩 페이지, 모바일 앱, 대시보드, 포트폴리오 등 네 가지 화면에서 확인할 수 있는 서비스입니다.

어릴 적 미술시간에 했던 과학 상상 그리기 기억하시나요? 아이들은 주로 미래 도시를 그렸고, 그림 속에는 날아다니는 자동차나 자율로 이동하는 운송수단을 볼 수 있었습니다. 아직 날아다니는 자동차는 볼 수 없지만 자율 주행 자동차는 접할 수 있는데요. 과거 산업혁명 시절부터 지금까지 사람들은 왜 운송수단의 변화를 꿈꾸는 걸까요? 이유는 다양하겠지만 편리하고 새로운 운송수단에 대한 수요는 여전한 것 같습니다. 이번 글에선 디자이너의 관점에서 바라본 모빌리티 시장의 UX, UI에 대해 살펴보겠습니다.