와이어프레임만 보내면 생기는 일, 스토리보드로 화면에 설명 붙이기

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

이번에 저희 매니패스트 업데이트에서 와이어프레임에 ’스토리보드’가 추가됐어요.

잠깐 와이어프레임이 뭐냐고요?

와이어프레임은 버튼, 텍스트, 입력창 같은 주요 요소를 단순한 모양으로 배치해서
완전 초안의 화면 구성을 미리 보는 그림이라고 생각하시면 됩니다.

매니패스트에서는 유저플로우(사용자 동선)에서 정한 페이지를 기준으로 생성되고,
프로토타입으로 버튼을 눌러 가며 화면 사이 이동까지 직접 체험할 수 있습니다.

스토리보드는 이 와이어프레임 화면 위에 영역 번호를 붙이고, 옆에 번호마다
그 영역이 무엇이고 어떻게 움직이는지 적힌 설명 표를 만들어 줘요.

프로토타입까지 구현 되어있는데
왜 이런 기능이 필요했을까요?

와이어프레임을 팀에 공유해 보신 분이라면
이런류의 질문을 한 번쯤은 받아보셨을 거예요.

"예약 확정 누르면 바로 확정되는 거예요, 아니면 확인을 한 번 더 받아요?"
"취소하면 환불도 같이 되는 거예요?"

프로토타입을 눌러 보면 버튼이 어디로 이어지는지는 바로 보입니다.
그런데 그 버튼을 눌렀을 때 뒤에서 무슨 일이 생기는지,
어떤 조건에서는 안 되는지는 화면에 없거든요.

보통 화면에는 버튼의 모양만 있고, 버튼이 하는 일은 없거든요.
그래서 기획자들은 오래전부터 화면 캡처에 번호를 붙이고
옆에 설명 표를 채운 화면설계서를 따로 만들어 왔습니다.

문장으로만 읽어도 얼마나 공수가 많은 작업인지 느껴지시죠?

스토리보드는 그 설명 표를 와이어프레임 옆에 바로 붙이는 기능이에요.
화면을 전달받은 개발자나 디자이너는 버튼을 하나씩 눌러 보며 동작을 추측하는 대신,
화면과 설명을 나란히 읽을 수 있어요.

어떤 영역에 대한 설명인지, 버튼을 누르면 어느 화면으로
이어지는지 먼저 파악하고 필요한 부분만 직접 확인하면 됩니다.
화면을 만든 사람에게 같은 내용을 다시 묻는 일도 줄이는 데 도움이 되고요.

다만 저희가 만들면서 가장 신경 쓴 건 AI가 설명을 얼마나 많이 써 주느냐가 아니었습니다.

설명이 화면의 어느 부분을 가리키는지 바로 눈에 보이고,
그 내용이 맞는지 사람이 확인해서 승인할 수 있느냐였어요.

이번 글은 이미 만들어 둔 와이어프레임 한 장에 스토리보드를 붙이고,
화면과 대조해 고쳐서 넘기는 순서를 팁으로 정리했습니다.

💡 Tip 1. 모든 화면 말고, 질문이 돌아오는 화면부터

⚠️ 스토리보드 생성과 편집은 Pro 이상 플랜에서 사용할 수 있어요.
AI 설명 생성에 필요한 크레딧은 시작 전에 안내됩니다.

스토리보드는 와이어프레임 상단의 캔버스 버튼 오른쪽에 있는 ’스토리보드’에서 시작합니다.

여기서 첫 번째 팁이에요.
처음부터 모든 페이지를 검토하려고 하기보다, 설명이 꼭 필요한 화면 한 장부터 살펴보세요.
버튼마다 이동하는 곳이 다르거나, 조건에 따라 결과가 달라지는 화면이 좋습니다.

저희는 예시로 고객이 자신의 예약을 확인하는 ‘예약 조회 결과’ 화면을 골라 봤습니다.
예약 상태를 확인하고, 공유 링크를 복사하거나 예약을 취소하는 화면이에요.
각 버튼을 눌렀을 때 무엇이 일어나는지 설명과 함께 살펴보겠습니다.

❌ 모든 페이지를 처음부터 끝까지 훑기: 정작 중요한 동작을 놓치기 쉬움
✅ 질문이 많이 돌아오는 화면부터 검토하기: 설명이 필요한 부분에 검토 시간을 집중

생성이 끝나면 왼쪽 화면에 영역 번호가, 오른쪽에 번호별 구성과 동작이 적힌 설명 표가 나란히 보입니다.
여기까지는 AI가 쓴 초안이에요. 다음 팁이 이 글에서 제일 중요합니다.

💡 Tip 2. 설명은 읽지 말고, 가리키면서 보세요

AI가 쓴 설명은 문장이 매끄러워서 쭉 읽다보면 어찌저찌 다 맞는 말처럼 보여요.
그래서 저희는 표를 읽는 대신 가리키면서 봅니다.

표의 항목을 가리키거나 선택하면 화면에서 그 영역이 같이 강조돼요.
“이게 어느 버튼 얘기지?” 하고 화면을 더듬을 필요 없이,
설명과 영역을 한 쌍으로 놓고 맞는지 볼 수 있습니다.

이때 대조할 기준은 두 가지예요.
하나는 화면입니다. 강조된 영역의 모양과 설명이 맞는지 봅니다.
다른 하나는 기능명세서예요. 설명에 적힌 동작이 기능명세서에서 정한 조건과 같은지 봅니다.

다만 취소 가능 시간이나 환불조건 처럼 화면에 드러나지 않는
규칙까지 스토리보드만 보고 판단하면 안 돼요.

이런 조건은 기능명세서를 기준으로 확인하고,
스토리보드에서는 그 조건이 화면의 문구와 버튼 동작에 어떻게 표현됐는지 살펴보세요.
두 자료를 함께 전달하면, 받는 사람도 화면 설명과 상세 조건을 구분해서 참고할 수 있습니다.

실제로 예약 취소 확인 화면을 살펴보니,
“취소된 예약은 복구할 수 없습니다”라는 문구에
“취소 불가 안내문”이라는 설명이 붙어 있었어요.

설명만 읽으면 예약을 취소할 수 없다는 뜻으로 받아들일 수도 있겠죠.
그래서 “예약을 취소하면 복구할 수 없다고 안내합니다”로 고쳤습니다.

이렇게 화면의 문구와 설명을 함께 보면,
다음 사람이 다르게 해석할 만한 부분을 전달 전에 바로잡을 수 있습니다.

❌ 표를 위에서 아래로 쭉 읽고 “괜찮네” 하고 넘김 : 그럴듯한 문장에 묻힌 틀린 한 줄이 그대로 팀에 전달됨
✅ 항목마다 영역을 확인하고 기능명세서와 맞춤 : 틀린 줄만 골라 고치고, 나머지는 그대로 승인

AI가 하는 일은 초안까지예요.
어느 영역의 설명인지 짚고, 맞는지 확인하고, 맞다고 정하는 일은 사람이 합니다.
이 순서가 있어야 다음 팁의 승인이 의미를 갖습니다.

💡 Tip 3. 승인은 페이지 단위로, 공유는 승인한 것만

설명을 고쳤다면 페이지 단위로 승인하거나 거절합니다.
한 줄을 고쳤다고 그 줄만 따로 승인되지는 않아요.
이 화면의 설명 전체를 읽고 “이 페이지는 이대로 간다”고 정하는 방식이에요.

승인이 중요한 이유는 공유 때문입니다.
뷰어와 공유 링크에서는 승인한 설명만 보여요.
아직 고치는 중인 초안은 받는 사람 화면에 나타나지 않습니다.

그러니까 편집 화면은 기획자가 AI 초안을 검토하고 고치는 자리이고,
뷰어는 팀이 확정된 화면과 설명을 함께 보는 자리예요.

처음에 받았던 "바로 확정되는 거예요, 확인을 한 번 더 받아요?"는
이제 받는 사람이 표에서 직접 찾을 수 있습니다.

설명에 걸린 화면 링크를 누르면 그 버튼이 이어지는 화면으로 바로 넘어가고,
뒤로 버튼으로 돌아올 수도 있고요.

💡 Tip 4. 화면을 고쳤다면 ’화면 수정됨’부터 보세요

승인하고 끝이면 좋겠지만..
작업을 하다보면 와이어프레임은 어쩔 수 없이 계속 바뀌죠.
버튼 위치를 옮기거나 영역을 하나 더 넣는 일은 승인 다음 날에도 생깁니다.

이때 제일 곤란한 건 설명이 조용히 틀린 채로 남는 거예요.
스토리보드에서는 와이어프레임을 고치면 그 영역의 설명에 ’화면 수정됨’이 표시됩니다.
화면이 바뀌었으니 이 설명을 다시 보라는 신호입니다.

다만 기능명세서의 조건이 바뀐 것까지 알려주는 표시는 아니므로,
정책을 수정했다면 관련 화면과 설명도 따로 확인해 주세요.

바뀐 화면과 설명을 다시 대조한 뒤,
설명이 여전히 맞으면 기존 설명을 유지하는 쪽을 고르면 됩니다.
버튼 위치만 옮긴 거라면 동작은 그대로일 테니 유지하면 되고,
동작이 바뀌었다면 Tip 2처럼 그 줄만 고치고 다시 승인하면 돼요.

❌ 화면을 고치고 설명은 그대로 둠 : 받는 사람은 옛 설명을 보고 만듦
✅ ‘화면 수정됨’ 표시된 줄만 다시 대조 : 전체를 다시 읽지 않아도 어디를 볼지 보임

💡 Tip 5. 설명의 근거가 궁금하면 기록을, 디자인으로 넘길 땐 스토리보드 포함을

Tip 2에서 설명을 고칠 때 기능명세서를 열어 봤는데,
그 조건을 왜 그렇게 정했는지까지는 기능명세서에 없을 때가 있어요.

그럴 땐 관련 기록의 결정 항목에서 원문 인용과 검토 메모를 확인해 보세요.
예를 들어 취소 전에 확인창을 띄우기로 정한 기록을 함께 보면,
화면과 설명에도 그 과정이 빠짐없이 담겼는지 살펴볼 수 있습니다.

디자인 작업으로 이어진다면 Figma 내보내기에서 ’스토리보드 포함’을 켜 주세요.
화면과 설명이 같이 넘어가서, 디자이너가 화면설계서를 따로 받을 필요가 없습니다.

정리하며

와이어프레임은 화면의 모양을 보여 주고,
스토리보드는 화면의 동작을 전달합니다.

설명을 쓰는 건 AI가 하지만, 어느 영역의 설명인지 짚고 맞는지 확인해서
정하는 건 사람의 일로 남겨 두었어요.

그래서 받는 사람이 읽는 건 “기획자가 확인한 설명”입니다.

오늘 해볼 수 있는 것

1. 지금 팀에 보낸 와이어프레임 중 질문이 제일 많이 돌아온 화면 한 장을 고르세요.

2. 그 화면에 스토리보드를 생성하고, 표를 가리키면서 영역과 설명을 하나씩 맞춰 보세요.

3. 기능명세서와 대조해 수정할 부분을 고친 뒤 페이지를 승인하세요.

4. 공유 링크를 열어서 승인한 설명만 보이는지 확인하고 팀에 보내 보세요.

설명을 붙인 화면 한 장이 팀에 어떻게 읽히는지 확인해 보시고, 불편한 점이 있다면 언제든 알려 주세요.