안녕하세요, 팀 매니패스트입니다.

이번 업데이트에서 대망의 와이어프레임 기능을 선보였는데요, 기능 개발 과정에서 매니패스트 기획팀은 수많은 실험을 거쳤어요. 어떻게 하면 매니패스트로 더 쓸만하고, 더 만족스러운 와이어프레임을 만들 수 있을까?
수많은 시행착오🥲와 크레딧🪙으로 만들어진 비법을 공유합니다!

💡 Tip 1. 당연하게도, 기능명세서부터 탄탄하게!

당연한 이야기지만, 기능명세서를 토대로 만들어지기 때문에 기능의 디테일이 그대로 와이어프레임에 영향을 줍니다.

와이어프레임에는 다양한 더미 텍스트가 들어가는데, 기능명세서에 구체적인 예시나 정책이 적혀 있으면 AI가 이를 맥락으로 활용해 훨씬 정확한 결과물을 만들어내요.

한 가지 예시를 보여드릴게요.

“예약하기”라는 요구사항만 만든 경우와, “예약하기”에 따른 정책이나 조건들을 상세히 적은 경우 와이어프레임은 이렇게 달라져요.

• ❌ "예약하기" 아이템만 하나 작성 : "예약하기" 한 줄 안내 문구 없이 뼈대만 나옴

• ✅ 꼼꼼히 최소인원, 노쇼 정책 등 정책까지 기재 : 정책을 반영한 안내 문구까지 자동 생성

모든 내용이 완벽하게 들어가 있지 않아도 와이어프레임은 잘 생성되지만, “딱 이렇게 되어야 해!”하는 지점들은 기능명세서에 반드시 정의해주세요.

기능명세서를 꼼꼼히 쓰는 게 재작업을 줄이는 가장 확실한 방법이에요.

💡 Tip 2. 흐름을 바꾸고 싶다면, 유저 플로우를 고쳐보세요.

AI가 만들어준 유저 플로우, 혹시 "음 그럴듯하네" 하고 바로 넘기고 계시진 않나요?
와이어프레임으로 변환해보면, 유저 플로우에서 놓친 문제가 드러나는 경우가 많아요.

이번엔 회원가입 플로우를 예시로 들어볼게요.

가입 정보를 모두 입력하고 다음 페이지로 가니 ‘이용 약관 동의’ 페이지가 나옵니다.
앗, 이게 아닌데요. 제 의도는 정보 입력 마지막에 ‘약관동의’ 섹션이 있고, 상세보기를 하면 약관 전문을 보여주는 것이었습니다.

이럴 때, 유저 플로우를 점검해보세요!

• 문제 상황 : ‘회원가입’페이지 → ‘이용 약관 동의’페이지 → ‘가입 완료’페이지

  • 약관 동의 페이지를 거쳐야만 가입 완료로 넘어갈 수 있는 상황이에요.

• 수정안 : ‘회원가입’페이지 → 1. ‘이용 약관 상세’ 페이지 / 2. ‘가입 완료’페이지

  • ‘정보 입력’ 페이지와 ‘가입 완료’ 페이지의 연결을 지정했어요.

  • ‘이용 약관 상세’는 “상세”페이지임을 명시하고, 별도의 경로로 분리해요.

이렇게 유저 플로우 수정 후, 와이어프레임을 재생성 해보면 원했던 대로 가입 완료 페이지로 바로 이동하고 약관 상세 페이지는 별개 경로로 분리되었어요.

이렇게 와이어프레임을 통해 흐름의 어색함을 발견하고, 유저 플로우를 수정해나가는 것이 핵심이에요.

⚠️ 참고 사항

AI 기반 작업 특성상, 모든 페이지가 일관된 UI로 나오지 않는다는 한계가 있었어요. 상태값이 다른 페이지(ex - 로그인 홈화면 / 비로그인 홈화면), 같은 데이터지만 표시 형태가 다른 페이지(ex - 캘린더 뷰, 리스트 뷰)를 만들어도, 서로 다른 페이지처럼 보여서 헷갈리더라구요. 이러한 페이지가 많아지면서 전체적인 흐름에 방해가 된다면, 하나의 페이지로 합쳐서 만드는 것도 방법이에요.

💡 Tip 3. 추가 입력, 이렇게 쓰면 달라진다.

전체 생성 시 : UX 라이팅 톤 지정

추가 입력에는 UX 라이팅 관련 요청이 가장 잘 반영돼요.

• 전체적인 문구 톤 : 친근하게, 격식 있게, 초보자도 알아듣기 쉽게, 전문가를 대상으로

• 들어갔으면 하는 예시 : 이 앱에선 생활 청소, 입주 청소, 사무실 청소 등의 서비스를 예약합니다.

페이지 수정 시 : 레이아웃 수정 요청 Do & Don't

레이아웃이 마음에 들지 않을 때, 러프한 대화형으로 수정을 요청하기보다 지침 형태로 입력하는 것이 훨씬 효과적이에요.

• Don't ❌

  • "중간에 소개 섹션이랑 마지막 섹션은 제외"

  • "메뉴를 조금 더 시원시원하게 구성"

• Do ✅

  • "메인 배너, 브랜드 소개, 주요 상품 목록 중심으로 구성. 해당 페이지에 '프로필 정보'는 절대로 포함하지 않는다"

  • "메뉴 목록 카드에는 이미지를 포함하고, 카드는 1열로 크게 배치한다"

차이가 보이시나요? 맥락속에서 지시하기 보다는 Do 쪽처럼 원하는 결과물의 구체적인 모습을 서술해주면 더 정확하게 결과물이 나옵니다!

정리하자면

결국 와이어프레임 퀄리티의 핵심은 와이어프레임 단계가 아니라, 그 앞단에 있어요.

1. 기능명세서를 구체적으로 작성하고

2. 유저 플로우를 꼼꼼히 검토하고

3. 생성 시 입력하는 프롬프트는 구체적인 지침으로 작성하기

이 세 가지만 챙겨도, 와이어프레임의 완성도가 훨씬 좋아져요.

저희의 수많은 크레딧이 녹아있는 팁이니, 참고해서 꼭 매니패스트의 와이어프레임 기능을 체험해보시기 바랍니다!