와이어프레임(화면 배치 스케치)

화면에 무엇이 어디에 놓이는지만 네모로 그린 스케치예요. 색도 사진도 없이 위치와 순서만 정해 두면, 설명 열 줄보다 정확하게 전해져요.

쉽게 말하면

전단지를 인쇄소에 맡기기 전에 A4 한 장에 연필로 칸을 나눠 보는 것이에요. 여기는 큰 글씨로 가게 이름, 그 아래는 음식 사진, 맨 밑은 전화번호. 색도 안 정했고 사진도 안 골랐는데, 이 종이 한 장이면 인쇄소와 말이 통해요. 화면도 똑같아요. 무엇이 위에 있고 무엇이 아래에 있는지만 정해 둔 그림이 와이어프레임이에요.

그림 실력은 하나도 필요 없어요. 네모와 선과 글씨만 쓰면 돼요. 사진 자리에는 네모를 그리고 안에 가위표를 치고, 버튼 자리에는 네모를 그리고 안에 버튼 이름을 적어요. 이게 전부예요.

말로만 설명했을 때

"첫 화면에 예약 버튼이 잘 보이게 해주세요"

잘 보인다는 말이 사람마다 달라요. 받은 쪽은 화면 맨 아래에 큰 버튼을 넣고, 사장님은 맨 위를 생각했어요. 다 만든 뒤에야 서로 다른 그림을 갖고 있었다는 걸 알게 돼요.

스케치를 한 장 줬을 때

[가게 이름] [사진 자리] [예약하기 버튼] [영업시간·전화]

위에서 아래로 네 칸이라는 게 그림 하나로 확정돼요. 만들기 전에 "사진 자리는 필요 없겠는데요" 같은 이야기가 나와요. 고치는 값이 연필 지우개 값이에요.

무엇을 그리고 무엇을 안 그리나

초보 사장님이 여기서 가장 많이 헤매요. 스케치를 그리다가 색을 고르고 글꼴을 고르기 시작하면 하루가 사라지고, 정작 정해야 할 순서는 그대로 남아요. 그릴 것과 안 그릴 것이 딱 갈려 있어요.

항목	스케치에 넣나요	왜
위에서 아래 순서	꼭 넣어요. 이게 스케치의 본체예요	손님이 먼저 보는 것이 무엇인지를 정하는 일이에요. 나중에 바꾸면 화면을 다시 짜야 해요
버튼의 자리와 이름	꼭 넣어요. 네모 안에 글자까지 적어요	"신청"인지 "예약하기"인지가 손님의 행동을 갈라요. 이름을 정하는 게 배치를 정하는 일이에요
글자의 크기 차이	큰 글씨·작은 글씨 정도만 표시해요	제목과 설명을 구분하려는 거예요. 몇 픽셀인지는 안 정해요
실제 사진	안 넣어요. 네모에 가위표만 그려요	사진 고르기는 배치가 끝난 뒤의 일이에요. 여기서 시작하면 배치가 사진에 끌려가요
색과 글꼴	안 정해요	색을 정하는 순간 그림 이야기가 되고, 자리 이야기가 멈춰요
정확한 문구	대충만 적어요	"환영 문구 한 줄" 정도면 충분해요. 문구 다듬기는 손님에게 하는 말 쓰기에서 따로 해요

화면 하나가 아니라 화면 몇 장이에요

스케치는 보통 한 장으로 안 끝나요. 손님이 버튼을 누른 다음 보게 되는 화면까지 그려야 뜻이 통해요. 예약 버튼을 그렸으면 예약 입력 화면과 예약 완료 화면까지 세 장이에요. 이 세 장을 화살표로 이어 두면 만드는 사람이 물어볼 게 거의 없어져요.

10분이면 끝나는 순서

1종이를 세로로 놓고 네모 하나를 크게 그려요. 손님은 폰으로 봐요. 가로로 넓게 그리면 실제와 다른 그림이 나와요.
2손님이 이 화면에서 해야 할 행동 하나를 정해요. 예약이든 전화든 구경이든 하나예요. 두 개를 넣으면 둘 다 흐려져요.
3그 행동 버튼을 먼저 그려요. 나머지를 다 그리고 버튼 자리를 찾으면 늘 아래로 밀려요. 버튼부터 자리를 잡아요.
4버튼 위에, 그 버튼을 누르게 만들 것을 채워요. 가게 이름, 한 줄 소개, 사진 자리 정도예요.
5버튼 아래에, 안 눌러도 되는 것을 넣어요. 영업시간·오시는 길·안내 문구가 여기예요.
6버튼을 누르면 나오는 화면을 옆에 한 장 더 그려요. 화살표로 이어요. 여기까지가 한 벌이에요.

예쁘게 그리지 마세요

스케치가 예뻐질수록 이상한 일이 생겨요. 받은 사람이 다 정해진 그림으로 받아들여서 의견을 안 내요. 삐뚤빼뚤한 연필 그림이 오히려 "여기 이렇게 하면 어때요"를 끌어내요. 자를 대지 말고 5분 안에 그리세요.

그리다 막히면 대개 원인이 하나예요. 화면 하나에 하고 싶은 일이 세 개인 거예요. 그럴 때는 그림을 잘 그리려 애쓰지 말고 화면을 두 장으로 나누세요. 종이가 싸요.

그림을 말로 옮기는 법

종이에 그렸으면 절반은 끝났어요. 남은 건 그 그림을 글로 옮겨서 상대에게 주는 것이에요. 사람에게 맡기든 AI에게 만들게 하든 옮기는 방식은 같아요. 위에서 아래로 순서대로 읽어 주면 돼요.

내 스케치에 그린 것	그대로 옮겨 적을 문장
맨 위 큰 글씨	"화면 맨 위에 가게 이름을 큰 글씨로 한 줄 넣어 주세요."
그 아래 네모 가위표	"그 아래에 가로로 꽉 차는 사진 자리를 하나 두세요. 사진은 나중에 넣을게요."
가운데 버튼	"사진 바로 아래에 예약하기 버튼을 가로로 넓게 넣어 주세요. 폰에서 스크롤 안 해도 보이게요."
버튼에서 나간 화살표	"이 버튼을 누르면 이름·연락처·날짜를 적는 화면으로 넘어가게 해주세요."
맨 아래 작은 글씨	"맨 아래에 영업시간과 전화번호를 작은 글씨로 넣어 주세요."
화면이 세 장인 것	"화면은 세 개예요. 첫 화면, 예약 입력 화면, 예약 완료 화면 순서로 만들어 주세요."

직접 해보기

스케치 한 장을 문장으로 옮겨 보세요

위 표의 왼쪽처럼 종이에 다섯 칸을 그리고, 오른쪽처럼 다섯 문장으로 적어 보세요. 스튜디오에서 만들 것을 설명할 때 순서대로 적은 다섯 문장이 "예쁘게 만들어 주세요"보다 훨씬 정확하게 전해져요. 오늘 만들 게 없어도 문장만 적어 두면 값이 있어요.

스튜디오에서 적어 보기

디자인 시안과 뭐가 달라요

둘을 같은 것으로 알고 계신 분이 많아요. 순서가 있어요. 스케치가 먼저고 시안이 나중이에요. 이 순서를 뒤집으면 값이 두 배로 들어요.

	와이어프레임(스케치)	디자인 시안
정하는 것	무엇이 어디에, 어떤 순서로	무슨 색, 어떤 글꼴, 어떤 사진
걸리는 시간	화면 한 장에 5분에서 10분	화면 한 장에 몇 시간에서 며칠
고치는 값	지우개로 지우면 끝이에요	다시 그려야 해요. 외주면 추가 비용이 붙어요
누가 만드나	사장님이 직접 그리는 게 가장 좋아요	디자이너나 AI가 만들어요
빠뜨렸을 때	만드는 내내 서로 다른 그림을 갖고 가요	화면이 밋밋해요. 다만 작동은 해요

이 순서가 돈을 아껴요

예쁜 시안을 먼저 받고 나면 "버튼을 위로 올려 주세요" 한마디가 큰 수정이 돼요. 색과 사진이 그 배치에 맞춰 이미 다 얹혀 있으니까요. 자리는 연필로 정하고, 색은 그 다음에 얹어요. 넘겨받을 때 무엇을 받아야 하는지는 디자인 파일 넘겨받기에 있어요.

실제로 벌어지는 일

장면 1 · 다 만든 뒤에 외주 개발자가 말했다

“요청하신 내용은 전부 넣었어요. 메뉴도 있고 예약 버튼도 있어요.”

빠진 게 없는데 화면이 마음에 안 드는 상황이에요. 넣을 것은 합의했고 순서는 합의하지 않았기 때문이에요. 이때 순서를 바꿔 달라고 하면 새 요청이 되고, 값을 다시 치르게 돼요. 스케치 한 장이 있었으면 이 대화가 만들기 전에 끝났어요. 지금이라도 할 일은 하나예요. 화면을 캡처해서 그 위에 원하는 순서를 번호로 적어 보내는 거예요.

장면 2 · 손님이 전화로 물었다

“예약을 어디서 하는지 못 찾겠어요. 사진만 계속 나와요.”

예약 버튼이 화면 아래쪽에 있어서 폰에서 한참 내려야 나오는 경우예요. 컴퓨터 큰 화면으로 만들면 잘 안 보이는 사고예요. 스케치를 세로 네모에 그리라고 한 이유가 여기예요. 종이 한 장 안에 안 들어가면, 폰에서도 한 번에 안 보여요. 고치는 방법은 폰 화면에 맞추기 쪽과 같이 봐요.

스케치는 버리지 말고 보관해요

만들고 나면 종이를 버리기 쉬운데, 이게 나중에 증거가 돼요. 몇 달 뒤 "원래 이 자리였나"를 두고 이야기가 갈릴 때, 사진 한 장 찍어 둔 스케치가 답을 줘요. 폰으로 찍어서 요구사항 정리해서 주기에서 만든 문서에 같이 붙여 두세요.

자주 묻는 것

Q. 그림을 정말 못 그리는데요: 네모와 선과 글씨만 쓰면 돼요. 사람도 물건도 그릴 일이 없어요. 오히려 잘 그리면 손해예요. 받는 사람이 다 정해진 그림으로 알고 의견을 안 내거든요.
Q. 꼭 종이여야 하나요? 도구를 배워야 하나요?: 종이와 연필이 가장 빨라요. 도구를 배우는 시간에 스케치 열 장을 그릴 수 있어요. 나중에 여러 사람과 같이 고칠 일이 생기면 그때 도구를 찾아도 늦지 않아요.
Q. 화면을 몇 장까지 그려야 하나요?: 손님이 돈을 내거나 신청을 마칠 때까지의 화면만 그리면 돼요. 보통 세 장에서 다섯 장이에요. 관리자 화면이나 설정 화면까지 다 그리려 하면 시작을 못 해요. 가장 작게 시작하기와 같은 기준이에요.
Q. AI가 알아서 잘 만들어 주는데 왜 그려요?: AI는 안 알려준 자리를 무난한 자리에 놓아요. 무난한 자리가 내 장사에 맞는 자리는 아니에요. 예약이 중요한 가게인지 메뉴 구경이 중요한 가게인지는 사장님만 알아요. 스케치는 그 판단을 미리 내려 두는 일이에요.
Q. 만들다가 배치를 바꾸고 싶으면요?: 바꿔도 돼요. 다만 종이 스케치를 먼저 고치고 그다음에 화면을 고치세요. 순서를 지키면 무엇이 최신인지 헷갈리지 않아요. 화면에서 바로 위치를 옮기는 방법은 화면 위에서 직접 고치기에 있어요.
Q. 외주 견적을 받을 때도 스케치가 도움이 되나요?: 도움 정도가 아니라 견적의 정확도를 바꿔요. 화면이 몇 장인지가 견적의 큰 축이라서, 스케치 다섯 장을 주면 업체마다 같은 기준으로 값을 매겨요. 스케치 없이 받은 견적은 서로 다른 것을 계산한 값이라 비교가 안 돼요.

확인해 보세요

동네 미용실 첫 화면을 스케치하려고 해요. 가장 먼저 종이에 그릴 것은?

하나 더

외주 업체가 예쁜 디자인 시안을 먼저 보내 왔어요. 배치가 마음에 안 들어요.

더 깊이 (안 읽어도 괜찮아요)

왜 색을 미루라고 하나 · 색을 정하기 시작하면 이야기의 주제가 바뀌어요. "예약 버튼이 첫 화면 안에 보이는가"를 정하던 자리에서 "이 초록이 나은가 저 초록이 나은가"를 두고 30분을 쓰게 돼요. 두 이야기 모두 필요하지만 값이 달라요. 자리를 잘못 정하면 손님이 예약을 못 하고, 색을 잘못 고르면 조금 촌스러워요. 큰 것부터 정하는 순서라고 보면 돼요.

종이를 세로로 놓으라는 이유 · 손님의 절반 넘게가 폰으로 들어와요. 폰 화면은 세로로 길고, 한 번에 보이는 높이가 종이 한 장보다 짧아요. 스케치를 가로로 넓게 그리면 컴퓨터 화면 기준의 배치가 나오고, 그걸 폰으로 옮기면 요소들이 아래로 길게 늘어서요. 그래서 세로 네모 한 장 안에 안 들어가는 스케치는 이미 신호예요. 화면을 나누라는 신호요.

화살표가 사실은 가장 중요한 부분이에요 · 스케치를 처음 그리는 분들은 화면 한 장을 예쁘게 그리는 데 집중해요. 그런데 만드는 사람이 가장 많이 묻는 건 화면 안이 아니라 화면 사이예요. 버튼을 누르면 어디로 가는지, 잘못 눌렀을 때 어떻게 돌아오는지, 다 마치면 무엇이 뜨는지요. 화면 세 장을 대충 그리고 화살표로 이어 둔 종이가, 화면 한 장을 정성껏 그린 종이보다 값이 나가요.

빈 화면도 그려 두면 좋아요 · 오픈 첫날에는 예약이 0건이고 후기도 0개예요. 그때 목록 자리가 백지로 남으면 손님은 고장 난 사이트로 알아요. 스케치 구석에 "예약이 아직 없을 때는 이 문장이 뜬다"고 한 줄 적어 두면, 만드는 사람이 그 화면까지 챙겨요. 자세한 이야기는 아무것도 없을 때 화면에 있어요.

이것만 기억하세요

·네모와 선만 쓰는 그림이에요. 그림 실력은 필요 없고 5분이면 그려요
·정하는 건 위에서 아래 순서와 버튼 자리예요. 색과 사진은 안 정해요
·손님이 할 행동 하나를 정하고 그 버튼부터 자리를 잡아요
·화면 한 장이 아니라 눌렀을 때 나오는 화면까지 화살표로 이어요
·스케치가 먼저고 디자인 시안이 나중이에요. 뒤집으면 고치는 값이 커져요