디자인 업무에 AI를 어떻게 활용하면 좋을까?
9월 시작을 목표로 파밍 클럽 개편을 준비하고 있어요! 디자인 업무에 따라 AI 도구를 어떻게 활용하면 좋을까? 에 초점을 맞추고 있는데요. 관련해서 사전 신청이 포함된 설문에 참여해 주세요! 사전 신청해 주신 분들 중 다섯 분을 추첨해 커피 쿠폰을 선물로 드려요!
👀 오늘 소개할 서비스와 내용
- AI 비서와 함께 만드는 서비스 브리프와 와이어프레임, Scene
- 와이어프레임 전용 피그마 라이브러리, Blocks
- 사이트맵, 유저 플로우, 와이어프레임을 한 번에 만들 수 있는, Flowmapp
- 서비스 소개를 입력하면 와이어프레임을 만들어주는, Wireframe Designer
AI 비서와 함께 만드는 서비스 브리프와 와이어프레임, Scene
와이어프레임과 AI, 이제는 꽤 익숙한 조합이라고 생각하는데요. 아직 갈증이 있는 건, 우리가 논의한 일정한 기준(스펙 문서나 정책 등)을 바탕으로 와이어프레임을 만들기까지는 꽤 많은 단계를 거쳐야 한다는 점이에요. 반대로, 와이어프레임 제작을 위한 다양한 배경 정보 등을 함께 생성하는 것도 한 곳에서 진행하기 어려운 경우가 많죠.
오늘 소개할 서비스 ‘Scene’는 이런 문제를 해결해 주는 곳으로, ‘아이디어가 웹사이트가 되는 곳, 아이디어부터 출시까지 전체 과정을 진행할 수 있는 곳입니다’라는 슬로건을 갖고 있어요. 템플릿 등을 바탕으로 빠르게 와이어프레임을 제작하는 것에 초점을 맞춘 것이 아니라, AI 비서 역할을 하는 ‘뮤즈’를 통해 브리프를 먼저 생성하고 확인하고 수정한 뒤 맞춤형으로 와이어프레임을 제작할 수 있어요.
AI 비서 뮤즈를 통한 브리프 생성
가입 후, 프로젝트를 생성하면 바로 편집 모드를 확인할 수 있는데요. 오른쪽 아래에는 ‘뮤즈 AI’가 자리 잡고 있는데, 브리프와 와이어프레임 생성을 기본으로 예제를 활용하거나 원하는 내용을 입력해 요청할 수 있어요. 위 이미지는 제가 빵집 소개를 위한 랜딩페이지 예제를 활용한 것으로 왼쪽에 와이어프레임 생성에 필요한 기본 정보가 생성된 것을 알 수 있어요. 프롬프트를 활용해 바로 특정 기능이나 화면에 대한 와이어프레임을 생성하는 것이 아니라 브리프를 먼저 확인할 수 있다는 점이 서비스의 가장 큰 특징이라고 할 수 있죠. 브리프에 포함되는 내용은 아래와 같아요.
- 서비스 소개
- 타겟
- 타겟 특징
- 서비스 역할
- 웹사이트의 톤앤매너
- 디자인 방향
- 웹사이트 구조
와이어프레임을 바로 제작했다면, 어떤 배경과 목적으로 만드는지 헷갈릴 수 있고 여러 번 수정해야 하는 불편이 생길 수 있는데요. 이곳에서는 원하는 내용에 따른 브리프를 먼저 확인하고 수정한 뒤 제작할 수 있어 더 생산적인 작업이 가능해요. 특히, 브리프에 ‘웹사이트 구조’도 제안해 주기에 아이디어만 가지고 어떻게 구체화해야 하는지에 대한 힌트도 얻을 수 있죠.
완성된 브리프를 바탕으로 와이어프레임 제작
와이어프레임 생성 버튼을 누르면, 플랫폼(해상도)에 따라 세 가지 버전으로 생성된 와이어프레임을 확인할 수 있어요. 플랫폼에 따라 여러 버전을 작업하거나 고려할 필요 없이 생성 단계부터 세 가지 버전을 확인할 수 있고, 편집 시 동일하게 적용된다는 점 또한 편집 시 유용해요. 와이어프레임 제작에 활용된 노트(브리프)와 함께 비교할 수 있도록 구성되어 있어 수정을 하거나 보완할 내용이 무엇인지 따져보기도 좋아요.
와이어프레임 생성 후에도 AI 비서 뮤즈와 대화를 이어갈 수 있는데요. 예를 들어, ‘빵이 만들어지는 과정을 숏폼 영상으로 제작해 넣고 싶다’는 이야기를 했는데 섹션에 따라 어떤 식으로 영상을 활용하고 적용하면 좋을지에 대한 의견을 정성스레 남겨줬어요.
와이어프레임 전용 피그마 라이브러리, Blocks
두 번째로 소개할 툴은, 필요한 컴포넌트를 간편하게 가져다 쓸 수 있는 피그마 플러그인 blocks 입니다.
서비스를 디자인하다 보면 간단한 와이어프레임을 제작하는 경우가 많죠. 저의 경우엔, 팀원들과 플로우나 시각화 방식에 대한 싱크를 맞추기 위한 용도로 가장 많이 사용해요. 그동안 필요할 때마다 피그마 화면에 박스나 텍스트를 그려서 함께 보곤 했는데요. 커뮤니케이션이 목적인 만큼 최소한의 리소스를 들여 간단하게 제작하고 싶어 찾아보던 중 발견한 플러그인이에요.
원하는 컴포넌트를 드래그 앤 드롭
기본적으로 라인과 흑백으로 구성된 로우 퀄리티의 컴포넌트를 제공합니다. Blocks에서는 약 50개의 컴포넌트를 제공하고 있어요. 사용해 보니 마치 와이어프레임용 디자인 라이브러리 같았는데요, 실제 사용법도 비슷합니다. 플러그인 툴바에서 원하는 컴포넌트를 화면에 드래그 앤 드롭하면 끝이죠.
저도 아래와 같은 화면을 뚝딱 만들어 보았습니다. 5분밖에 안 걸렸어요!
커스터마이징
생각보다 다양하게 커스터마이징이 가능했어요. 컴포넌트 내의 아이콘을 변경하고, 사이즈나 상태도 변경할 수도 있어요.
사이트맵, 유저 플로우, 와이어프레임을 한 번에 만들 수 있는, Flowmapp
세 번째로 소개할 서비스는 사이트맵, 사용자 플로우, 와이어프레임을 세 가지 핵심 기능을 제공하는 곳이에요. 사이트맵을 바탕으로 와이어프레임 제작과 설명 등을 만들 수 있어요.
손쉬운 사이트맵 제작
사이트맵의 경우 마인드맵을 만드는 것처럼 첫 화면을 기준으로 구조에 따라 화면 단위의 블록을 생성할 수 있어요. 각 화면에 대한 설명이나 라벨(업무 진행 상황 기준), 협업을 위한 코멘트 작성 기능 등을 활용할 수 있죠.
이미 만들어진 화면이나 와이어프레임이 있다면 커버이미지로 등록하는 것도 가능하고, 아래에서 자세히 살펴볼 ‘와이어프레임’을 사이트맵에 포함된 화면 단위로 생성하고 설명을 기록하는 기능도 지원하고 있어요.
사이트맵을 바탕으로한 와이어프레임 제작
제가 사이드 프로젝트를 진행할 때, 이 서비스를 자주 사용하는 이유는 초기 모습을 만들기 좋은 환경을 제공하기 때문인데요. 전체 구조를 잡기 위한 방법으로 사이트맵을 만들고, 사이트맵에 포함된 각 화면에 대한 기본적인 구성을 와이어프레임 기능으로 만들 수 있어요.
특정 화면을 선택하면, 기본 제공되는 템플릿을 통해 와이어프레임을 빠르게 만들 수 있으며, 간단한 버튼 모양이나 텍스트, 링크 적용, 정렬 등의 편집 기능도 활용할 수 있어요. 미리보기 기능도 지원하기에 특정 화면에 대한 와이어프레임을 공유하기도 좋고요.
또 콘텐츠 기능을 지원하는데 와이어프레임에 포함된 각 블록에 대한 설명을 입력할 수 있어요. 와이어프레임만 있으면, 제작한 사람이 맥락이나 배경 등을 하나씩 설명해야 하는데 이렇게 블록 단위로 설명을 입력하게 되면 상세 내용을 함께 전달할 수 있어 간단한 화면의 경우에는 정책서를 대신하는 것도 가능해요. 코멘트를 남기는 기능도 있어서 의견을 주고받기도 좋은 환경이에요.
서비스 소개를 입력하면 와이어프레임을 만들어주는, Wireframe Designer
마지막으로 소개할 툴은 간단한 서비스 소개를 입력하면 와이어프레임을 만들어주는 피그마 플러그인 Wireframe Designer입니다.
이 플러그인은 간단한 글 작성만으로 와이어프레임을 제작할 수 있는 text-to-design 툴이에요. GPT-3.5가 적용되어 있어 편리하게 와이어프레임을 생성할 수 있습니다.
배경과 타깃 유저 설정하기
왼쪽 상단의 아이콘을 클릭해 제품의 배경과 타깃 유저에 대한 내용을 작성해 주세요. 예를 들어, "Rello는 주로 40~60세 여성이 사용하는 패션 커머스 플랫폼입니다."라고 입력합니다.
메인 페이지 디자인
다시 돌아와 만들고 싶은 서비스 화면을 설명해 주세요. 예를 들어, "인기 제품, 인기 카테고리, 고객 리뷰를 보여주는 홈 페이지"라고 입력합니다.
이렇게 프롬프트를 입력하고 Design 버튼을 누르면, 플러그인이 와이어프레임을 순식간에 만들어줘요. 마음에 들지 않는 부분이 있다면 프레임을 선택한 뒤 수정하고 싶은 내용을 입력하면 돼요.
저는 '날씨에 따라 입을 옷을 추천해 주는 서비스의 홈 화면'을 만들어 달라고 요청했어요. 결과를 확인해 보니 생각하지 못했던 여러 내용을 포함해 주었더라고요. 저는 날씨와 추천 복장 몇 가지가 보이길 기대했는데, 패션 트렌드와 상품 카드까지 포함해 커머스 서비스에 가까운 와이어프레임을 그려줬어요.
📒 와이어프레임 제작 서비스를 더 알고 싶으신가요?
팁스터 뉴스레터 구독자를 위한 오픈채팅방에 참여해주세요. 뉴스레터 발행 후, 주제와 관련된 보다 다채로운 소식을 확인하실 수 있어요!
📒 뉴스레터에서 소개된 서비스를 한눈에 살펴보세요!
#지식토스트