와이어프레임

와이어프레임과 시안은 무엇이 다른가요?

와이어프레임은 ‘무엇을 어디에 둘지’를 정하는 단계이고, 시안은 ‘어떻게 보이게 할지’를 정하는 단계예요. 와이어프레임에는 회색 상자와 글자 자리만 있고, 시안에는 색 · 사진 · 글꼴이 들어가요.

두 단계를 나누는 이유는 고치는 비용이 다르기 때문이에요. 상자 순서를 바꾸는 건 몇 분이면 되지만, 시안이 나온 뒤 순서를 바꾸면 사진 크기와 여백까지 다시 맞춰야 해요.

사장님 입장에서는 와이어프레임을 볼 때 색이 없어 허전하다는 느낌이 드는 게 정상이에요. 이 단계에서는 상자의 순서와 크기만 보고, 분위기 이야기는 시안 단계로 미뤄 두면 의견이 훨씬 깔끔하게 정리돼요.

와이어프레임 단계를 따로 두지 않는 업체도 있어요. 이때는 첫 시안이 와이어프레임 역할까지 하게 되니, 첫 시안을 받으면 색보다 순서부터 확인하는 게 좋아요.

와이어프레임에는 무엇이 들어가나요?

와이어프레임에는 페이지 목록, 각 페이지의 영역 순서, 버튼 자리, 페이지끼리 이어지는 길이 들어가요. 그림 실력은 필요 없어요. 네모 상자에 ‘대표 사진’, ‘가격표’처럼 이름만 적어도 충분해요.

여러 화면이 이어지는 예약이나 주문 흐름은 화면 사이에 화살표를 그려 두면 좋아요. 이렇게 화면과 흐름을 함께 그린 그림을 ‘와이어플로’라고 부르기도 해요.

글자 자리에는 실제로 들어갈 문장 길이를 대략 맞춰 두면 좋아요. 한 줄짜리 자리에 다섯 줄짜리 소개가 들어가면 시안에서 배치가 다시 흔들리기 때문이에요.

와이어프레임은 스크롤 한 장짜리 랜딩 홈페이지에서도 쓸모가 있어요. 한 페이지라도 위에서 아래로 내려가는 순서가 곧 손님이 움직이는 길이기 때문이에요.

• 페이지 목록: 홈 · 소개 · 메뉴 · 오시는 길처럼 어떤 페이지가 몇 장인지
• 영역 순서: 한 페이지 안에서 위에서 아래로 무엇이 나오는지
• 행동 버튼: 전화 · 예약 · 문의 버튼이 어디에 몇 번 나오는지
• 이동 경로: 버튼을 누르면 어느 화면으로 가는지
• 폰 배치: 컴퓨터에서 옆으로 놓인 칸이 폰에서는 어떤 순서로 쌓이는지

와이어프레임은 어떻게 직접 그려 보나요?

종이 한 장과 펜이면 30분 안에 초안을 만들 수 있어요. 순서가 정해져 있으면 제작자와 첫 상담이 훨씬 짧아져요.

그림이 깔끔할 필요는 없어요. 제작자는 그림 솜씨보다 ‘무엇이 먼저 나오는지’와 ‘무엇이 꼭 있어야 하는지’를 읽어 내요. 컴퓨터가 편하면 발표 자료 프로그램에 네모 상자를 놓아도 되고, 종이에 그린 걸 사진으로 찍어도 충분해요.

1. 01손님이 전화나 메시지로 가장 자주 묻는 질문을 5개 적어요.
2. 02그 답을 담을 페이지 목록을 만들어요. 작은 가게는 한 페이지로도 충분할 때가 많아요.
3. 03폰 화면 크기의 세로로 긴 네모를 그리고, 질문의 답을 중요한 순서대로 위에서부터 상자로 채워요.
4. 04손님이 마지막에 할 행동(예약 · 전화 · 길찾기)을 정해 버튼 상자를 그려요.
5. 05마음에 드는 다른 가게 홈페이지를 캡처해 ‘이 부분 순서가 좋아요’라고 적어 붙여요.
6. 06그린 그림을 사진으로 찍어 제작자에게 보내고, 빠진 정보가 없는지 함께 확인해요.

업종별로 첫 화면 순서는 어떻게 달라지나요?

첫 화면 순서는 업종보다 ‘손님이 들어와서 가장 먼저 알고 싶은 것’에 따라 정해져요. 같은 미용실이라도 예약 손님이 많은 곳과 지나가다 들르는 손님이 많은 곳은 순서가 달라요.

아래 예시는 출발점일 뿐이에요. 실제로는 가게에서 가장 많이 받는 질문을 기준으로 바꿔 쓰면 돼요.

순서를 정하기 어렵다면 가게로 걸려 오는 전화를 일주일만 메모해 보세요. ‘몇 시까지 해요?’가 가장 많다면 영업시간을, ‘주차돼요?’가 많다면 주차 안내를 첫 화면 가까이 올리면 돼요.

• 미용실: 대표 스타일 사진 → 디자이너 소개 → 시술별 가격 → 예약 버튼 → 위치 · 주차
• 공방: 대표 작품 사진 → 클래스 종류와 일정 → 수강료 → 신청 버튼 → 수강 후기
• 음식점: 대표 메뉴 사진 → 영업시간 · 휴무일 → 메뉴판 → 단체 예약 문의 → 지도
• 필라테스 · 요가: 수업 분위기 사진 → 수업 종류 → 시간표 → 체험 신청 → 강사 소개

폰 화면 와이어프레임은 따로 봐야 하나요?

네, 폰 화면 순서는 따로 확인하는 게 좋아요. 컴퓨터에서 좌우로 나란히 놓인 칸은 폰에서 위아래로 쌓이는데, 어느 칸이 먼저 나오는지에 따라 손님이 보는 순서가 완전히 달라져요.

구글은 검색 색인을 만들 때 주로 모바일 버전 페이지를 기준으로 삼는다고 안내하고 있어요. 그래서 폰 화면에서 중요한 내용이 빠지거나 숨지 않게 처음부터 함께 설계하는 게 안전해요.

폰 와이어프레임에서는 엄지로 누르기 편한 곳에 예약 · 전화 버튼이 있는지, 스크롤을 너무 오래 내려야 가격이 나오지 않는지를 보면 돼요.

폰 와이어프레임에서는 스크롤하지 않아도 보이는 첫 화면의 범위도 확인해 보세요. 그 안에 가게 이름과 무엇을 하는 곳인지가 함께 들어 있어야 손님이 바로 떠나지 않아요.

와이어프레임 단계에서 자주 하는 실수는 무엇인가요?

가장 흔한 실수는 와이어프레임을 대충 넘기고 시안에서 순서를 다시 바꾸는 거예요. 이러면 수정 횟수와 일정이 함께 늘어나요.

또 하나는 넣고 싶은 내용을 모두 첫 화면에 올리는 거예요. 첫 화면은 손님이 ‘여기가 맞는 곳인지’ 판단하는 자리라서, 정보를 3~4개로 줄일수록 오히려 잘 읽혀요.

반대로 페이지를 너무 잘게 나누는 것도 흔한 실수예요. 작은 가게는 정보가 여러 페이지에 흩어지면 손님이 메뉴를 오가다 떠나기 쉬워서, 한 페이지에 모으고 위쪽에 바로가기 버튼을 두는 편이 나을 때가 많아요.

와이어프레임 단계에서 제작사에 무엇을 물어보면 되나요?

계약 전이나 첫 미팅에서 아래 네 가지를 물어보면 수정 횟수와 일정이 분명해져요.

• 와이어프레임 단계가 따로 있는지, 아니면 바로 시안으로 가는지
• 와이어프레임 단계의 수정이 전체 수정 횟수에 포함되는지
• 폰 화면 배치도 함께 보여 주는지
• 와이어프레임을 확정한 뒤 순서를 바꾸면 어떻게 처리되는지