🔥 AI를 활용해 만드는 와이어프레임은 어떤 모습일까?

디자인 업무에 AI를 어떻게 활용하면 좋을까?

9월 시작을 목표로 파밍 클럽 개편을 준비하고 있어요! 디자인 업무에 따라 AI 도구를 어떻게 활용하면 좋을까? 에 초점을 맞추고 있는데요. 관련해서 사전 신청이 포함된 설문에 참여해 주세요! 사전 신청해 주신 분들 중 다섯 분을 추첨해 커피 쿠폰을 선물로 드려요!

사전 신청하기

👀 오늘 소개할 서비스와 내용

AI 비서와 함께 만드는 서비스 브리프와 와이어프레임, Scene

와이어프레임과 AI, 이제는 꽤 익숙한 조합이라고 생각하는데요. 아직 갈증이 있는 건, 우리가 논의한 일정한 기준(스펙 문서나 정책 등)을 바탕으로 와이어프레임을 만들기까지는 꽤 많은 단계를 거쳐야 한다는 점이에요. 반대로, 와이어프레임 제작을 위한 다양한 배경 정보 등을 함께 생성하는 것도 한 곳에서 진행하기 어려운 경우가 많죠.

오늘 소개할 서비스 ‘Scene’는 이런 문제를 해결해 주는 곳으로, ‘아이디어가 웹사이트가 되는 곳, 아이디어부터 출시까지 전체 과정을 진행할 수 있는 곳입니다’라는 슬로건을 갖고 있어요. 템플릿 등을 바탕으로 빠르게 와이어프레임을 제작하는 것에 초점을 맞춘 것이 아니라, AI 비서 역할을 하는 ‘뮤즈’를 통해 브리프를 먼저 생성하고 확인하고 수정한 뒤 맞춤형으로 와이어프레임을 제작할 수 있어요.

주요 기능 소개

(1) AI 비서 뮤즈를 통한 브리프 생성

가입 후, 프로젝트를 생성하면 바로 편집 모드를 확인할 수 있는데요. 오른쪽 아래에는 ‘뮤즈 AI’가 자리 잡고 있는데, 브리프와 와이어프레임 생성을 기본으로 예제를 활용하거나 원하는 내용을 입력해 요청할 수 있어요. 위 이미지는 제가 빵집 소개를 위한 랜딩페이지 예제를 활용한 것으로 왼쪽에 와이어프레임 생성에 필요한 기본 정보가 생성된 것을 알 수 있어요. 프롬프트를 활용해 바로 특정 기능이나 화면에 대한 와이어프레임을 생성하는 것이 아니라 브리프를 먼저 확인할 수 있다는 점이 서비스의 가장 큰 특징이라고 할 수 있죠. 브리프에 포함되는 내용은 아래와 같아요.

와이어프레임을 바로 제작했다면, 어떤 배경과 목적으로 만드는지 헷갈릴 수 있고 여러 번 수정해야 하는 불편이 생길 수 있는데요. 이곳에서는 원하는 내용에 따른 브리프를 먼저 확인하고 수정한 뒤 제작할 수 있어 더 생산적인 작업이 가능해요. 특히, 브리프에 ‘웹사이트 구조’도 제안해 주기에 아이디어만 가지고 어떻게 구체화해야 하는지에 대한 힌트도 얻을 수 있죠.

(2) 완성된 브리프를 바탕으로 와이어프레임 제작

와이어프레임 생성 버튼을 누르면, 플랫폼(해상도)에 따라 세 가지 버전으로 생성된 와이어프레임을 확인할 수 있어요. 플랫폼에 따라 여러 버전을 작업하거나 고려할 필요 없이 생성 단계부터 세 가지 버전을 확인할 수 있고, 편집 시 동일하게 적용된다는 점 또한 편집 시 유용해요. 와이어프레임 제작에 활용된 노트(브리프)와 함께 비교할 수 있도록 구성되어 있어 수정을 하거나 보완할 내용이 무엇인지 따져보기도 좋아요.

와이어프레임 생성 후에도 AI 비서 뮤즈와 대화를 이어갈 수 있는데요. 예를 들어, ‘빵이 만들어지는 과정을 숏폼 영상으로 제작해 넣고 싶다’는 이야기를 했는데 섹션에 따라 어떤 식으로 영상을 활용하고 적용하면 좋을지에 대한 의견을 정성스레 남겨줬어요.

좋은 점

아쉬운 점

적용 가능한 업무 단계 및 활용 방법

학습 난이도 ⭐

가격 정책

무료 버전을 기준으로 아래와 같이 사용할 수 있어요.

Scene 바로가기

와이어프레임 전용 피그마 라이브러리, Blocks

두 번째로 소개할 툴은, 필요한 컴포넌트를 간편하게 가져다 쓸 수 있는 피그마 플러그인 blocks 입니다.

서비스를 디자인하다 보면 간단한 와이어프레임을 제작하는 경우가 많죠. 저의 경우엔, 팀원들과 플로우나 시각화 방식에 대한 싱크를 맞추기 위한 용도로 가장 많이 사용해요. 그동안 필요할 때마다 피그마 화면에 박스나 텍스트를 그려서 함께 보곤 했는데요. 커뮤니케이션이 목적인 만큼 최소한의 리소스를 들여 간단하게 제작하고 싶어 찾아보던 중 발견한 플러그인이에요.

주요 기능 소개

(1) 원하는 컴포넌트를 드래그 앤 드롭

기본적으로 라인과 흑백으로 구성된 로우 퀄리티의 컴포넌트를 제공합니다. Blocks에서는 약 50개의 컴포넌트를 제공하고 있어요. 사용해 보니 마치 와이어프레임용 디자인 라이브러리 같았는데요, 실제 사용법도 비슷합니다. 플러그인 툴바에서 원하는 컴포넌트를 화면에 드래그 앤 드롭하면 끝이죠.

저도 아래와 같은 화면을 뚝딱 만들어 보았습니다. 5분밖에 안 걸렸어요!

(2) 커스터마이징

생각보다 다양하게 커스터마이징이 가능했어요. 컴포넌트 내의 아이콘을 변경하고, 사이즈나 상태도 변경할 수도 있어요.

좋은 점

가장 좋은 점은, 무료 피그마 플러그인이라는 거! 접근성이 좋고 사용법도 쉬워요. 기능이 풍부하지는 않지만, 그 기능에서 오는 가치는 확실하다고 느꼈습니다. 간단한 거라도 그리고, 오토레이아웃 걸고, 텍스트 더미 얹고… 이런 귀찮은 일을 해왔던 시간을 줄일 수 있다는 게 큰 장점으로 느껴졌어요!

아쉬운 점

전반적으로 컴포넌트 사이즈들이 좀 작습니다. 사이즈 변경이 가능하긴 한데, 기본적으로 모바일 디바이스에 맞는 사이즈가 디폴트였다면 하는 아쉬움이 들었답니다. 두 번째로는 아무래도 50개의 컴포넌트로 커버할 수 없는 상황이 있다는 건데요, 더 다양한 컴포넌트를 많이 많이 추가해 줬으면 좋겠습니다! 분발해 주세요 blocks~!

적용 가능한 업무 단계 및 활용 방법

학습 난이도 ⭐️

가격 정책

Blocks 바로가기

사이트맵, 유저 플로우, 와이어프레임을 한 번에 만들 수 있는, Flowmapp

세 번째로 소개할 서비스는 사이트맵, 사용자 플로우, 와이어프레임을 세 가지 핵심 기능을 제공하는 곳이에요. 사이트맵을 바탕으로 와이어프레임 제작과 설명 등을 만들 수 있어요.

주요 기능 소개

(1) 손쉬운 사이트맵 제작

사이트맵의 경우 마인드맵을 만드는 것처럼 첫 화면을 기준으로 구조에 따라 화면 단위의 블록을 생성할 수 있어요. 각 화면에 대한 설명이나 라벨(업무 진행 상황 기준), 협업을 위한 코멘트 작성 기능 등을 활용할 수 있죠.

이미 만들어진 화면이나 와이어프레임이 있다면 커버이미지로 등록하는 것도 가능하고, 아래에서 자세히 살펴볼 ‘와이어프레임’을 사이트맵에 포함된 화면 단위로 생성하고 설명을 기록하는 기능도 지원하고 있어요.

(2) 사이트맵을 바탕으로한 와이어프레임 제작

제가 사이드 프로젝트를 진행할 때, 이 서비스를 자주 사용하는 이유는 초기 모습을 만들기 좋은 환경을 제공하기 때문인데요. 전체 구조를 잡기 위한 방법으로 사이트맵을 만들고, 사이트맵에 포함된 각 화면에 대한 기본적인 구성을 와이어프레임 기능으로 만들 수 있어요.

특정 화면을 선택하면, 기본 제공되는 템플릿을 통해 와이어프레임을 빠르게 만들 수 있으며, 간단한 버튼 모양이나 텍스트, 링크 적용, 정렬 등의 편집 기능도 활용할 수 있어요. 미리보기 기능도 지원하기에 특정 화면에 대한 와이어프레임을 공유하기도 좋고요.

또 콘텐츠 기능을 지원하는데 와이어프레임에 포함된 각 블록에 대한 설명을 입력할 수 있어요. 와이어프레임만 있으면, 제작한 사람이 맥락이나 배경 등을 하나씩 설명해야 하는데 이렇게 블록 단위로 설명을 입력하게 되면 상세 내용을 함께 전달할 수 있어 간단한 화면의 경우에는 정책서를 대신하는 것도 가능해요. 코멘트를 남기는 기능도 있어서 의견을 주고받기도 좋은 환경이에요.

좋은 점

아쉬운 점

적용 가능한 업무 단계 및 활용 방법

학습 난이도 ⭐

가격 정책

무료 버전을 기준으로 아래와 같이 사용할 수 있어요.

프로 버전으로 업그레이드하면, AI를 활용한 사이트맵 제작과 피그마 연동이 가능해요.

Flowmapp 바로가기

서비스 소개를 입력하면 와이어프레임을 만들어주는, Wireframe Designer

마지막으로 소개할 툴은 간단한 서비스 소개를 입력하면 와이어프레임을 만들어주는 피그마 플러그인 Wireframe Designer입니다.

이 플러그인은 간단한 글 작성만으로 와이어프레임을 제작할 수 있는 text-to-design 툴이에요. GPT-3.5가 적용되어 있어 편리하게 와이어프레임을 생성할 수 있습니다.

주요 기능 소개

사용법도 아주 간단해요. 두 단계만 거치면 끝입니다.

(1) 배경과 타깃 유저 설정하기

왼쪽 상단의 아이콘을 클릭해 제품의 배경과 타깃 유저에 대한 내용을 작성해 주세요. 예를 들어, "Rello는 주로 40~60세 여성이 사용하는 패션 커머스 플랫폼입니다."라고 입력합니다.

(2) 메인 페이지 디자인

다시 돌아와 만들고 싶은 서비스 화면을 설명해 주세요. 예를 들어, "인기 제품, 인기 카테고리, 고객 리뷰를 보여주는 홈 페이지"라고 입력합니다.

이렇게 프롬프트를 입력하고 Design 버튼을 누르면, 플러그인이 와이어프레임을 순식간에 만들어줘요. 마음에 들지 않는 부분이 있다면 프레임을 선택한 뒤 수정하고 싶은 내용을 입력하면 돼요.

저는 '날씨에 따라 입을 옷을 추천해 주는 서비스의 홈 화면'을 만들어 달라고 요청했어요. 결과를 확인해 보니 생각하지 못했던 여러 내용을 포함해 주었더라고요. 저는 날씨와 추천 복장 몇 가지가 보이길 기대했는데, 패션 트렌드와 상품 카드까지 포함해 커머스 서비스에 가까운 와이어프레임을 그려줬어요.

좋은 점

플러그인이라 접근성이 좋아서 빠르게 내 아이디어를 점검하고, 확장하는데 도움을 받을 수 있어요. 또, 만들어주는 컴포넌트들은 모두 반응형 대응이 되어 있고 오토 레이아웃도 적용되어 있기 때문에 유사한 형태의 컴포넌트를 디자인해야 할 때 활용하기 좋아 보였어요!

아쉬운 점

구성과 사용성 측면에서 완성된 결과물을 곧바로 활용하기에는 몇 가지 아쉬운 점이 있었어요.

예를 들어, 날씨 서비스에서 지역을 선택할 때 chip을 활용한 UX는 적합하지 않아 보였는데요, 완성도를 높이기 위해서 디자이너의 판단과 조정이 필수적이라고 느껴졌어요. 또한, 한 번 와이어프레임을 생성하고 나면 내가 입력한 프롬프트를 확인할 수 없다는 점도 아쉬웠어요.

적용 가능한 업무 단계 및 활용 방법

학습 난이도 ⭐️

가격 정책

Wireframe Designer 바로가기

📒 와이어프레임 제작 서비스를 더 알고 싶으신가요?

팁스터 뉴스레터 구독자를 위한 오픈채팅방에 참여해주세요. 뉴스레터 발행 후, 주제와 관련된 보다 다채로운 소식을 확인하실 수 있어요!

오픈채팅방 입장하기

📒 뉴스레터에서 소개된 서비스를 한눈에 살펴보세요!

지금까지 뉴스레터를 통해 소개된 서비스를 업무 방법, 학습 난이도 등에 따라 빠르게 살펴볼 수 있어요. 

디자인 툴 디렉토리 바로가기

💬 이번 뉴스레터는 어땠나요?

위 링크를 통해 뉴스레터에 대한 의견을 남겨주세요. 꼭 소개 되었으면 하는 툴도 좋고, 다음에 꼭 다뤘으면 하는 주제도 좋아요!

팁스터 뉴스레터의 공식 오픈채팅방에 참여해보세요!

팁스터 뉴스레터에서는 프로덕트와 관련된 다양한 주제의 콘텐츠를 발행하고 있어요!

멤버십 콘텐츠 중 '캠핑'편은 무료로 체험하실 수 있어요!