AI와 함께하는 UX/UI 디자인, 얼마나 빨라질까요?
UX/UI 디자인 과정에서 가장 지루하고 시간이 많이 걸리는 작업 중 하나가 바로 디자인 시스템을 만드는 것입니다. 이제는 AI 덕분에 더 이상 수동으로 디자인 시스템을 만들 필요가 없어졌다는 사실, 알고 계신가요? AI의 새로운 기능들을 활용하면 디자인 시스템 구축의 지루함을 해소하고 효율성을 아주 높일 수 있죠 .
특히 AI를 사용하면 디자인 시스템을 자동으로 생성할 수 있어요. 게다가 내 디자인 시스템 구성 요소로 AI 모델을 직접 훈련시켜서 UI 화면까지 생성할 수 있게 되었습니다. 정말 놀라운 발전이죠 . AI는 UX/UI 디자인 워크플로우를 최적화해서 디자이너가 더 창의적인 작업에 집중하도록 도와줘요.
아이디어만 있어도 괜찮아요. ChatGPT가 있으니까
프로젝트를 시작할 때 아이디어만 있어도 괜찮습니다. ChatGPT가 도와줄 수 있기 때문이죠. ChatGPT를 사용하면 UI 요구사항을 도출할 수 있어요. 또한 프로젝트의 시작을 알리는 프로젝트 브리프를 빠르게 작성할 수 있답니다.
프로젝트 브리프를 작성하기 위해 준비된 프롬프트 템플릿에 프로젝트 정보를 입력하면 됩니다. 만약 어떤 기능이 필요한지 잘 모르겠다면, ChatGPT와 함께 아이디어를 발전시켜 나갈 수도 있죠. 예를 들어, 여행 관련 프로젝트 정보를 입력하고 “다른 여행 필수품”에 대해 물어보았어요.
ChatGPT는 체계적인 프로젝트 브리프를 만들어 주었고 더 많은 아이디어를 얻게 되었죠 . 원하는 아이디어만 선택해서 비전을 담은 브리프를 완성할 수 있어요. 프로젝트 요구사항을 모두 포함하는 사이트맵도 ChatGPT에게 요청해서 만들 수 있어요. 프롬프트에 아이디어를 바탕으로 사이트맵을 만들라고 요청하면, 제품의 상세한 구조를 얻게 될 거예요.
ChatGPT를 활용해 레이아웃 만들기
[이미지 출처] Youtube | NEW UX/UI Process With AI – Save MONTHS of Work!
프로젝트 아이디어를 시각적으로 확인하고 싶을 때 ChatGPT의 새로운 기능을 활용해 보세요. ChatGPT에게 홈페이지 레이아웃의 정적인 이미지를 만들어 달라고 요청하면, 요구사항을 모두 담은 레이아웃 이미지를 얻을 수 있을 거예요.
특히 최신 모델인 GPT-4o를 사용하면 아주 정확한 UI 콘셉트 이미지를 볼 수 있답니다. 디자인 초기 단계에서 UI를 시각화하는 데 아주 유용해요. 원하는 대로 변경을 요청할 수도 있죠 . 다만, ChatGPT가 생성한 이미지는 시각적으로는 멋있지만, 실제 디자인은 아니라는 점을 기억해야 해요. 실제 제품처럼 사용성이 좋지는 않답니다. 그렇기 때문에 실제 앱 디자인에서 영감을 얻으려면 다른 도구를 사용하는 것이 좋아요.
[이미지 출처] Youtube | NEW UX/UI Process With AI – Save MONTHS of Work!
진짜 앱 디자인은 어디서? Mobbin 활용하기
실제 앱 디자인 레퍼런스를 찾고 싶다면 mobbin을 추천해요. 다른 웹사이트에서 볼 수 있는 가짜 콘셉트 디자인이 아니라, 실제 사용되는 디자인에서 영감을 얻을 수 있죠. mobbin은 세계에서 가장 방대한 앱 디자인 라이브러리를 가지고 있어요 . iOS, Android, 웹 플랫폼을 위한 50만 개 이상의 화면을 보유하고 있답니다 .
특정 기능에 대한 전체적인 사용자 흐름(flow)을 확인할 수도 있어요. 앱의 디자인이 시간이 지남에 따라 어떻게 개선되는지 볼 수 있는 앱 기록 기능도 아주 유용하죠 . 프로덕트 디자이너, 프로덕트 매니저, UX 리서처 등 디자인 관련 직업을 가진 사람들에게 매우 유용한 자료들을 제공해요 . 매번 디자인을 새로 시작할 필요 없이, 업계 표준과 모범 사례를 찾아서 아이디어에 적용할 수 있죠 . 최신 트렌드도 파악할 수 있고요 . mobbin에서는 솔루션을 위한 무브보드를 만들고 팀과 공유할 수도 있어요. 프로젝트를 시작하기에 가장 좋은 방법이죠.
[이미지 출처] Youtube | NEW UX/UI Process With AI – Save MONTHS of Work!
디자인 시스템 UX Pilot 으로 구현하기
아이디어를 얻고 레이아웃을 시각화했다면, 이제 본격적으로 디자인 시스템을 만들 차례에요. UX pilot을 사용해서 디자인 시스템을 생성할 수 있답니다. UX pilot 웹사이트에서 새로운 디자인 파일을 만들고 이름을 지정하면, 그게 바로 디자인 시스템 프로젝트가 돼요.
디자인 시스템을 만드는 방법은 몇 가지가 있어요. 텍스트로 시각적 요구사항을 입력하거나, ChatGPT로 스타일을 생성해서 사용할 수 있죠. ChatGPT에게 원하는 스타일의 UI 구성 요소 이미지를 만들어 달라고 요청하고 그 스타일 설명을 받아서UX pilot에 붙여넣으면 된답니다. UX pilot에서 콘텍스트 상자에 이 스타일 프롬프트를 입력하고 “design system”으로 시작하면 디자인 시스템을 생성해 줄 거예요.
UX pilot이 디자인 시스템에 필요한 모든 페이지를 생성해 주면 구조를 확인하고 필요한 부분을 수정하거나 요소를 추가할 수 있어요. 예를 들어, 버튼 페이지에 버튼 크기를 추가해달라고 요청하면 정확하게 반영된답니다. 디자인 시스템이 완성되면 figma로 저장해서 사용할 수 있어요. 직접 디자인한 것처럼 구조화된 완벽한 디자인 시스템을 figma에서 바로 사용할 수 있게 되죠.
나만의 AI 모델을 만들어서 UI 화면을 생성해 봐요!
[이미지 출처] Youtube | NEW UX/UI Process With AI – Save MONTHS of Work!
UX pilot의 가장 큰 장점은 바로 나만의 디자인 시스템으로 AI 모델을 훈련시킬 수 있다는 거예요 . figma로 가져온 디자인 시스템의 구성 요소 이름을 올바르게 변경한 다음 UX pilot 플러그인에서 컴포넌트를 임포트하면 돼요. 새로운 컬렉션을 만들고 이름을 지정하면 그게 바로 여러분의 AI 모델 이름이 된답니다.
모델 훈련을 위해 컴포넌트를 임포트할 때는 변수가 포함된 세트가 아닌 단일 컴포넌트를 임포트해야 해요. 여러 컴포넌트를 한 번에 선택해서 임포트할 수도 있죠. 이렇게 디자인 시스템으로 훈련된 AI 모델을 만들 수 있어요. 최대 100개의 컴포넌트까지 훈련시킬 수 있답니다. 모델 훈련이 끝나면 UX pilot 웹사이트로 돌아가서 새로운 UI 디자인 파일을 만들고 훈련시킨 모델을 선택해요.
프로젝트 브리프와 아까 저장해둔 스타일 프롬프트를 입력하고 chatgpt로 생성했던 페이지 요구사항을 각 화면에 붙여넣으면 된답니다. UX pilot은 입력된 요구사항과 디자인 시스템을 기반으로 일관성 있는 UI 화면을 생성해 줄 거예요. 생성된 화면들을 확인하고 필요한 수정 사항이 있다면 UX pilot에서 바로 수정할 수 있어요.
디자인만 하면 끝? 기능하는 프로토타입 만들기
[이미지 출처] Youtube | NEW UX/UI Process With AI – Save MONTHS of Work!
UI 디자인이 완성되었다고 해서 끝이 아니에요. 이제 디자인을 실제처럼 움직이는 기능적인 프로토타입으로 만들어 볼 차례죠 Lovable과 같은 ai 코딩 도구를 사용하면 기능하는 프로토타입을 쉽게 만들 수 있어요.
프로젝트 브리프를 입력하고, UX pilot에서 생성한 홈페이지의 소스 코드를 가져와서 Lovable에 붙여넣으면 된답니다. Lovable에게 코드를 사용해서 홈페이지를 만들라고 요청하면 돼요. 나머지 페이지들도 같은 방법으로 코드를 가져와서 프로토타입에 추가할 수 있어요.
프로토타입을 계속 테스트하면서 네비게이션이 잘 작동하는지, 사용자 흐름이 모두 커버되는지 확인하고 필요한 조정을 하면 돼요. 이렇게 하면 요구사항과 디자인 시스템을 기반으로 하는 기능적인 프로토타입을 완성할 수 있답니다. 나중에 새로운 기능을 추가하거나 UI를 변경할 때도 UX pilot의 디자인 시스템 모델을 사용해서 새로운 화면이나 요소를 쉽게 생성할 수 있어요.
완성된 디자인 패키지, 어떻게 공유할까요?
[이미지 출처] Youtube | NEW UX/UI Process With AI – Save MONTHS of Work!
디자인 시스템, 프로토타입, 그리고 필요한 문서까지 모두 완성했다면, 이제 이 모든 것을 하나의 디자인 패키지로 만들 수 있어요. 개발자와 협업할 때 이 디자인 패키지를 넘겨주면 제품 개발에 바로 사용할 수 있죠. 디자인 패키지에는 기능적인 프로토타입과 디자인 시스템 외에도 문서와 사용자 여정 등을 포함할 수 있어요.
문서는 Chatgpt를 활용해서 생성할 수 있답니다. Chatgpt는 이제 프로젝트에 대한 모든 콘텍스트를 가지고 있기 때문에 필요한 문서를 쉽게 만들어 줄 거예요. 디자인 과정에서 사용했던 모든 프롬프트도 문서에 포함하면 좋아요. 그리고 아주 유용한 기능이 하나 더 있어요. Chatgpt에게 PDF 문서를 생성해달라고 요청하면, 모든 자료를 담은 PDF 문서를 다운로드할 수 있는 링크를 제공해 준답니다. 팀원들과 함께 작업하거나 프로젝트를 문서화할 때 정말 편리하죠
[이미지 출처] Youtube | NEW UX/UI Process With AI – Save MONTHS of Work!
AI와 함께하는 UX/UI 디자인, 어떻게 발전할까요?
AI 기술은 정말 빠르게 발전하고 있어요. 특히 UX/UI 디자인 분야에서 AI의 역할은 점점 더 중요해질 거예요. AI는 우리가 반복적이고 지루하게 느끼던 작업들을 대신해주면서, 디자이너들이 더 창의적이고 전략적인 부분에 집중할 수 있도록 도와준답니다.
디자인 시스템 구축부터 아이디어 구체화, 레이아웃 시각화, 실제 앱 디자인 참고, ai 모델 훈련, UI 화면 생성, 그리고 기능적인 프로토타입 제작까지. 이 모든 과정에 AI가 깊숙이 관여하면서 디자인 워크플로우는 훨씬 효율적으로 변하고 있어요. 앞으로 AI가 UX/UI 디자인 분야에 가져올 변화들은 더욱 기대가 됩니다. 함께 배우고 발전해 나가면 좋겠어요!
📢 AI 관련 UX/UI 실무 관련 강의가 궁금하다면?
