Web Guide와이어프레임화면 설계시안 검토
와이어프레임 보는 법: 선으로 된 화면이 왜 중요한가
색도 사진도 없는 화면을 보고 '이게 뭐냐'고 하는 순간 기회를 놓칩니다.
와이어프레임 단계는 구조를 바꾸기에 가장 싼 시점입니다. 디자인이 입혀진 뒤에는 같은 변경에 몇 배가 듭니다.
01일부러 꾸미지 않는 것이다
와이어프레임에 색과 사진이 없는 것은 미완성이어서가 아닙니다. 색과 이미지가 있으면 사람들이 그것만 보고 구조를 보지 않기 때문에 일부러 뺀 것입니다.
이 단계에서 봐야 할 것은 '무엇이 어디에, 어떤 순서로 있는가'입니다.
와이어프레임에서 볼 것
요소의 순서 · 정보의 우선순위 · 버튼의 위치와 개수 · 페이지 간 연결 · 빠진 내용이 없는지
이 단계에서 보지 말 것
색 · 글꼴 · 사진 · 여백의 미세한 차이 · 아이콘 모양 — 전부 다음 단계에서 정해집니다
02검토할 때 던질 질문
와이어프레임을 받으면 무엇을 물어야 할지 막막합니다. 아래 질문을 순서대로 던지면 대부분의 문제가 드러납니다.
특히 '처음 온 사람'의 입장에서 봐야 합니다. 우리 회사를 이미 아는 사람의 눈으로 보면 빠진 것이 안 보입니다.
3초 안에 무엇을 하는 회사인지 알 수 있는가첫 화면 최상단의 문장을 봅니다.
가장 중요한 버튼이 눈에 띄는 위치에 있는가스크롤 없이 보이는 영역 안에 있어야 합니다.
이 순서가 방문자의 궁금증 순서인가회사 설명보다 '내 문제를 푸는가'가 먼저입니다.
빠진 내용은 없는가우리가 꼭 말해야 하는데 자리가 없는 것.
안 봐도 되는 것이 앞에 있지 않은가인사말, 연혁이 상단에 있다면 재검토합니다.
모바일에서는 어떻게 되는가세로로 쌓였을 때의 순서를 확인합니다.
03이 단계에서 바꾸면 가장 싸다
구조를 바꾸는 비용은 단계가 갈수록 커집니다. 와이어프레임에서는 선 몇 개를 옮기면 되지만, 디자인 시안에서는 화면을 다시 그려야 하고, 개발 후에는 코드를 고쳐야 합니다.
그래서 이 단계에서 시간을 들여 꼼꼼히 보는 것이 전체 일정을 줄이는 길입니다.
와이어프레임 단계 — 선을 옮기면 끝
변경 비용이 가장 낮습니다
디자인 시안 단계 — 화면을 다시 그림
여러 페이지에 영향을 줍니다
퍼블리싱 단계 — 마크업 수정
반응형까지 다시 확인해야 합니다
개발 완료 후 — 구조 변경
가장 비쌉니다. 추가 비용과 일정 지연
04피드백은 구조로 말한다
'뭔가 밋밋하다'는 이 단계에서 할 수 있는 말이 아닙니다. 색과 사진이 없으니 당연히 밋밋합니다. 구조에 대한 의견을 주어야 합니다.
'A를 B보다 위에 올려 주세요', '이 버튼을 상단에도 하나 더 넣어 주세요'처럼 위치와 순서로 말하세요.
점검 항목
이 단계에서 할 수 없는 피드백
밋밋하다 / 세련되게 / 색이 별로다 / 사진이 마음에 안 든다
이 단계에서 유효한 피드백
순서를 바꿔 달라 / 이 내용이 빠졌다 / 버튼을 여기에도 넣어 달라 / 이 영역은 필요 없다
확인하고 넘어갈 것
확정된 구조는 이후 변경 시 추가 비용이 발생함을 서로 확인합니다.
CHECK POINT
□ 와이어프레임을 구조 검토용으로 이해하고 있는가
□ 첫 화면에서 3초 안에 무엇을 하는 회사인지 알 수 있는가
□ 가장 중요한 버튼이 스크롤 없이 보이는가
□ 요소의 순서가 방문자의 궁금증 순서인가
□ 모바일에서 쌓이는 순서를 확인했는가
□ 피드백을 위치와 순서로 구체적으로 전달했는가
#와이어프레임#화면 설계#시안 검토#정보구조#피드백#수정 회차#프로젝트 관리#홈페이지 기획#웹비스타#홈페이지 제작