🪜 플로우맵 생성은 물론, 단계별 화면까지 한번에?

🪜 이번 주제는 '사이트맵과 플로우맵'이에요.

사이트맵과 플로우맵은 우리가 만드는 서비스의 뼈대와 사용자 여정을 명확하게 보여주는 설계도와 같아요. 이걸 미리 그려보면 전체 구조와 흐름을 한눈에 파악해서 혹시 모를 누락이나 비효율적인 부분을 초기에 발견하고 개선할 수 있죠. 또, 개발, 기획, 마케팅 등 다른 팀원들과의 소통을 원활하게 하고, 모두가 같은 그림을 그리며 효율적으로 작업할 수 있도록 돕는 아주 중요한 도구라고 할 수 있어요. 오늘은 Flowstep, Relume 두 서비스를 통해 플로우맵, 사이트맵을 어떻게 작업하고 활용할 수 있는지 자세히 살펴볼게요!

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

플로우 생성부터 와이어프레임 제작까지 가능한, Flowstep

‘Flowstep’은 제가 얼마 전 발견한 AI 도구 중 하나인데요! 유저 플로우로 시작해 와이어프레임 제작, 인터페이스 생성, 원하는 조건에 따른 반복 작업 등의 주요 특징이에요. 베타 서비스로 운영되고 있어 모든 기능을 무료로 활용할 수 있고요. 개인적으로 가장 좋았던 점은, 원하는 기능 또는 서비스의 플로우를 먼저 생성하고, 플로우에 포함된 내용을 선택한 뒤 바로 와이어프레임을 제작할 수 있는 흐름이었는데요. 어떤식으로 작업이 가능한지 지금부터 자세히 살펴볼게요.

주요 기능과 특징

작업의 시작, 플로우 생성하기

저는 먼저, 뉴스 콘텐츠를 제공하는 모바일 앱의 온보딩 플로우를 제작해달라고 요청했어요. 소요 시간은 20초 정도, 개인화부터 사용자의 선택에 따른 분기까지 잘 정리해줬어요. 네트워크가 잘 작동하고 있는지, 이미 계정이 있는지 등을 바탕으로 플로우를 구성해 활용도가 높아요. 생성한 플로우는 직접 수정할 수 있기에 최초 생성된 내용을 바탕으로 최종안을 만들기도 어렵지 않아요. 아쉬운 점이 있다면, 한글로 만들어달라는 요청을 종종 무시(?)할 때가 있다는 점입니다.

완성된 플로우에서 특정 단계를 선택하면, 대안을 만들거나 에러 케이스를 추가하거나 커스텀 프롬프트를 입력할 수 있는데요. 예를 들어, 커스텀 프롬프트를 선택해 해당 단계에 해당하는 모바일 화면 와이어프레임을 생성해달라고 입력할 수 있어요.

플로우를 바탕으로 각각 서비스의 주요 가치를 소개하는 화면, 사용자의 관심사를 선택하는 화면 그리고 회원가입과 로그인에 필요한 화면을 요청했는데 위와 같은 화면을 확인할 수 있었는데요. 생성에 걸린 시간은 평균 20초 정도였어요. 특정 화면을 선택하면, 다음 단계의 화면이나 에러 상태, 콘텐츠 수를 줄이거나 늘리는 등의 수정사항을 클릭 한 번으로 반영할 수 있으며 프롬프트를 직접 입력하는 방식도 활용할 수 있어요.

저는 로그인/회원가입 화면에서 다음 화면을 눌러, 이메일 로그인 화면을 먼저 생성하고 이어 비밀번호 찾기까지 확인해봤는데요. 기존에는 이런 흐름에 따라 화면을 만드는게 연속성과 일관성의 관점에서 쉽지 않다는 생각이 들었는데, 이곳을 통해 클릭 몇 번으로 플로우와 관련 화면들을 생성하는 경험을 하다보니 꽤 편리하게 느껴졌어요. 물론, 아직 베타 버전이라 반복 요청을 해야하는 경우도 가끔 있지만요.

좋은 점

아쉬운 점

학습 난이도 ⭐️

가격 정책

Relume로 구조화된 사이트맵부터 스타일 가이드까지!

Relume은 AI를 활용해 사이트맵, 와이어프레임, 스타일가이드를 생성할 수 있는 올인원 툴입니다. 1,000개 이상의 UI 컴포넌트를 제공하며, Figma, Webflow, React와 연동도 가능한데요. Relume를 활용하면 초기 설계부터 협업까지 복잡한 워크플로우를 최적화 할 수 있습니다. 함께 자세히 알아볼까요?

주요 기능과 특징

① 사이트맵 생성

사이트맵 기능은 간단한 프롬프트(회사 소개, 제공하는 서비스 등)로 빠르게 구조화된 사이트 맵을 생성할 수 있는 기능입니다.

직접 생성도 가능하고 AI의 도움을 받을 수도 있는데요. AI로 생성할 경우 원하는 페이지 수와 언어를 설정할 수 있습니다.

저는 다음과 같은 프롬프트를 입력해 보았어요.

AI가 곧바로 랜딩페이지의 사이트 맵을 제작해줍니다. ‘홈 / 기능 / 가격 / 블로그’ 네 가지 카테고리로 구성되어 있네요.

만들어준 결과에서 각 섹션과 페이지는 모두 편집 가능하고, 드래그앤드롭 방식으로 쉽게 구조도 바꿀 수 있습니다. 내용을 편집하고 조정하는 과정이 매우 쉽다고 느꼈습니다.

저는 유저가 문의나 서비스 상담을 받을 수 있도록 ‘Contact’ 페이지를 추가해보았습니다. ‘연락’이라는 한 단어를 입력했을 뿐인데 필요한 기본 정보를 구조화해 정리해주었습니다.

이제 해당 사이트맵을 가지고 와이어프레임 제작 단계로 넘어가볼게요!

② 와이어프레임 제작  

와이어프레임은 기본적으로 메인 페이지 1페이지만 제공됩니다. (나머지 페이지는 프로 요금제를 구독해야 열람 및 편집할 수 있습니다) 완성된 와이어프레임은 PC와 모바일 버전으로 모두 확인할 수 있고, AI를 활용해 텍스트 카피도 손쉽게 수정할 수 있습니다.

(제작해준 와이어프레임이 좀 익숙한 구조였는데, Relume 홈페이지 구조랑 유사하네요!)

③ 스타일 가이드

스타일 가이드 기능은 사이트의 기본적인 디자인 스타일을 자동으로 구성해주는 기능입니다.

다만 AI가 어떤 기준으로 톤앤매너를 구성하는지는 알 수 없었는데요. 아직 베타 버전이라 그런지 완성도 높은 제안이라기보다는 기본값에 가까운 프리필 정도의 수준이라고 느껴졌습니다. 그러나 결과는 원하는 스타일대로 쉽게 조정할 수 있고, 편집 과정도 직관적이라고 느껴졌어요.

우측 미리보기 섹션에서 생성된 시안을 스크롤하며 직접 확인할 수 있고, 와이어프레임과 마찬가지로 웹과 모바일 버전을 모두 확인할 수 있습니다. 한글 폰트를 지원하지 않는다는 점이 아쉬웠는데, Figma와 연동이 잘 되어 있어서 피그마로 옮겨가 수정하는 것은 어렵지 않았습니다.

우측 상단에 있는 스파클(✨) 버튼을 누르면 AI가 자동으로 스타일을 생성해주는데요. 스타일 가이드는 디자인 작업 중에서도 반복적이고 시간이 많이 드는 단계인데, 기본 스타일을 제안받고 필요한 부분만 조정하면 되기 때문에 초안을 빠르게 만들 수 있을 것 같네요.

생성된 결과물은 공유용 프레젠테이션 형식인 Pitch Mode로 구성할 수 있습니다. 또, 링크를 사이트맵, 와이어프레임, 스타일가이드까지 한 번에 정리된 형태로 클라이언트에게 공유할 수 있는 기능인데요. 저는 하나의 컨셉 시안만 제작했지만, 최대 세 가지 버전을 보여줄 수 있습니다. 소규모 기업이나 프리랜서에게는 결과물을 보기 좋게 다듬는 데 드는 시간이 적지 않은데요. Relume은 이 과정을 자동화해주기 때문에 공유에 드는 부담을 많이 줄일 수 있을 것 같네요.

좋은 점

다소 일반적인 구조, 그러나 빠른 초기 설계는 장점!

결과물의 퀄리티 관점에서 솔직한 후기를 적어보자면, 전반적으로 기본은 하지만 다소 제너럴한 결과물이 나온다는 느낌을 받았습니다. 일반적인 웹사이트 데이터를 학습한 AI가 제안하는 구조이기 때문에 아무래도 특정 서비스에 맞춘 정교한 설계까지 기대하기는 어려워 보였지만, 빠르게 기초적인 설계를 진행할 수 있고 결과도 쉽게 편집할 수 있다는 점은 분명한 장점으로 느껴졌습니다.

연동과 협업에 강하다.

Relume를 사용하면서 인상 깊었던 점은 협업과 연동 측면에 많은 신경을 썼다는 점입니다.

실시간 편집과 코멘트 같은 협업을 위한 기본 기능이 갖춰져 있고, 특히 위에 소개한 피치 모드는 단순한 링크 전달을 넘어서 클라이언트에게 기획 의도를 효과적으로 전달할 수 있도록 설계되어 있었습니다.

제품의 사용 흐름 전반에서 사용자가 어떤 단계에 시간을 많이 쓰고, 어떤 부분을 중요하게 여기는지를 고려했다는 인상을 받았습니다.

또한 Figma와 Webflow 연동도 매우 쉽고 간편했는데요. 연동한 UI는 모두 자동으로 컴포넌트화되어 관리할 수 있고, 필요에 따라 수정하거나 재활용하기도 수월했습니다.

아쉬운 점

전반적으로 2%씩 부족한 기능들

이런 툴을 사용하는 유저는 사이트 제작의 전 과정을 하나의 서비스 내에서 해결하길 기대할텐데요. Relume의 사이트맵 기능은 실제 실무에서도 충분히 활용 가능해 보이는 수준이었지만 스타일 가이드 등은 아직 퀄리티 높은 시안에 도달하기는 어려워 보였습니다.

결과적으로 다른 툴과의 연계를 전제로 사용할 수밖에 없기 때문에, 외부 툴과의 import/export 기능을 더욱 강화하되 강점인 협업과 연결 측면의 기능을 잘 살렸으면 하는 바람입니다.

학습 난이도 ⭐️

활용이 쉽고 직관적입니다.

가격 정책

스타터 버전은 월 $18 이며, 무료 버전 기준으로 프로젝트 1개, 와이어프레임 페이지 1개, 스타일 가이드를 무료로 생성할 수 있으며, 제한된 AI 기능을 활용할 수 있습니다. 자세히보기

❇️ 오늘 소개된 도구가 가장 필요했던 순간은 언제인가요?

5분을 선정해 커피 쿠폰을 전달드릴게요!

참여해주신 내용은 익명을 바탕으로 종합, 정리해 다음 뉴스레터와 오픈채팅방을 통해 공유드릴 예정입니다. 

프로덕트를 만들다 보면, 이런 상황 겪지 않나요?

“문제는 보이는데, 왜 그런지 모르겠고🤔”

"아이디어는 있는데, 방향이 맞는지 확신이 없고🙄”

그냥 ‘AI 써보자’가 아니라, ‘어떻게 질문해야 AI가 제대로 답해줄지’부터 함께 연습합니다.

🧠 프롬프트 훈련 → 사용자 문제 정의 → 해결안 도출 → 와이어 프레임 제작까지!

AIexperience는 실무자들이 AI를 ‘진짜 문제 해결’에 쓰는 방법을 배우는 클럽이에요.

👉 7월 시작하는 2기, 관심 있다면 신청해 주세요!

📮 함께 읽어보면 좋은 뉴스레터

와이어프레임 제작에 도움이 되는 4개 서비스를 확인하실 수 있어요!

오픈채팅방을 통해 뉴스레터로 다 소개하지 못한 정보를 확인해보세요!