와이어프레임 주석 작성법: 예약 폼으로 보는 실전 예제

와이어프레임 주석은 정적인 화면만으로 알 수 없는 동작을 설명합니다. 관련 컨트롤 옆에 번호를 붙이고 초기 상태, 변화를 일으키는 조건, 그다음 결과를 짧게 적습니다. 좋은 주석은 시간을 미리 선택해 두는지, 언제 오류가 나타나는지, 다음 단계로 넘어가면 예약까지 완료되는지처럼 누군가 따로 물어봐야 할 질문에 답합니다.

주석은 설명하는 화면 바로 옆에 둡니다. 한 화면의 의미보다 화면 사이의 이동을 확인해야 한다면 Pixso의 프로토타이핑 기능으로 경로를 보여 줍니다. 주석은 규칙을 설명하고, 인터랙션은 검토자가 그 결과를 직접 경험하게 합니다.

그림만으로 결정할 수 없는 내용을 설명하기

‘이메일’이라는 레이블만으로도 해당 필드에 무엇을 입력하는지 알 수 있습니다. 여기에 ‘이메일 입력란’이라는 주석을 더해도 새로운 정보는 없습니다. 반면 ‘다음 단계로 이동할 때 필수이며, 비어 있어도 다른 입력값은 유지한다’는 주석은 사각형과 레이블로 표현할 수 없는 동작을 설명합니다.

실제 화면에서 생기는 질문부터 살펴봅니다. 어떤 값이 기본값인지, 어떤 컨트롤이 다른 컨트롤에 영향을 주는지, 무엇을 선택할 수 있는지, 어떤 상황에서 오류가 발생하고 이후 어디로 이동하는지 확인합니다. 모든 픽셀을 명세로 바꾸기보다 이 작업에 필요한 결정을 설명해야 합니다.

사용자에게 보이는 문구와 팀에 전달하는 지시는 구분합니다. 화면에는 ‘시간을 선택하세요’라고 쓰고 주석에는 ‘초기에는 선택된 시간이 없다’고 적을 수 있습니다. 첫 번째 문구는 인터페이스 안에, 두 번째는 바깥에 배치합니다. 그렇지 않으면 검토자가 설계 지시를 고객에게 보여 줄 문구로 오해할 수 있습니다.

예약 와이어프레임 예제: 하나의 작업, 여섯 가지 주석

30분 디자인 상담을 예약하는 화면을 예로 들어 보겠습니다. 서비스 요약, 5월 14일이 표시된 날짜 선택기, 세 개의 시간 선택지, 이메일 필드, ‘예약 내용 확인’ 버튼이 있습니다. 사용자는 일정을 선택하고 예약을 확정하기 전에 내용을 확인합니다.

시간 선택지는 10:00, 11:00, 14:00이며 마지막 시간은 예약할 수 없습니다. 초기에는 선택된 시간이 없고 이메일 필드는 비어 있습니다. 다음 주석은 이 시작 상태와 주요 의존 관계를 명확하게 설명합니다.

상담 시간을 여러 가지로 제공한다면 해당 선택지를 추가하고 예약 가능 시간에 미치는 영향도 설명합니다. 날짜를 바꿨을 때 선택한 시간을 유지할지는 구현 전에 결정해야 합니다. 익숙한 달력 모양만으로는 이 질문에 답할 수 없습니다.

변경 조건과 눈에 보이는 결과를 적기

05번에 ‘폼을 업데이트한다’고만 쓰면 너무 모호합니다. 이전 시간을 유지하거나, 예약 가능한 첫 시간을 자동으로 선택하거나, 모든 입력란을 지우라는 뜻일 수도 있습니다. ‘날짜를 바꾸면 선택한 시간은 해제하고 이메일은 유지한다’고 적으면 결과를 구체적으로 확인할 수 있습니다.

이 상황이 발생하면, 이것을 바꾸고, 저것은 유지한다는 문장 구조가 도움이 됩니다. 모든 주석에 세 요소를 넣을 필요는 없습니다. 입력 내용을 수정하다가 연락처까지 사라지는 것처럼 중요한 오해를 막아야 할 때 유지할 값을 명시합니다.

오류 주석도 구체적이어야 합니다. 발생 조건, 메시지, 복구 방법을 적습니다. 시간이 선택되지 않았다면 ‘예약 시간을 선택하세요’, 이메일이 비었다면 ‘이메일 주소를 입력하세요’를 사용합니다. 오류 아이콘만으로는 문제를 설명할 수 없습니다. W3C의 입력 오류 식별 지침은 감지된 오류에 대해 해당 항목을 식별하고 오류 내용을 텍스트로 설명하도록 요구합니다.

메시지 위치가 중요하다면 초기 와이어프레임 옆에 오류 상태 하나를 함께 보여 줍니다. 이 폼에서는 진행에 실패했을 때 첫 번째 오류 필드로 키보드 포커스를 이동하도록 정합니다. 이는 실제 구현에 반영하고 확인해야 하는 설계 결정입니다. 정적인 화면에 색을 칠한 상자만으로는 그 동작을 보여 줄 수 없습니다.

시선을 따라 읽을 수 있게 주석 배치하기

번호 표시는 레이블, 입력값, 터치 영역을 가리지 않도록 컨트롤 바로 바깥에 둡니다. 프레임 옆에 주석 열을 만들고 화면을 읽는 순서대로 배치합니다. 대상이 모호할 때는 짧은 연결선이 도움이 되지만, 선 여섯 개가 폼을 가로지르면 주석이 화면보다 읽기 어려워집니다.

두 번째 상태에서도 같은 컨트롤을 설명한다면 번호를 그대로 사용합니다. 오류 와이어프레임에서도 04번은 이메일을 가리켜야 합니다. 번호가 일정하면 검토자가 캔버스의 위치를 설명하는 대신 ‘04번의 복구 방식이 불분명하다’고 말할 수 있습니다.

프로토타입에 표시할 내용이 아니라면 주석은 화면 프레임 밖에 둡니다. 이미지를 내보내 공유하기 전에는 주석 열이 포함되는지, 실제 읽는 크기에서 글자가 보이는지 확인합니다. 전체 시트를 크게 확대해야만 읽을 수 있다면 주석을 줄이지 말고 전체 개요와 특정 인터랙션의 확대 화면으로 나눕니다.

주석, 프로토타입, 댓글을 구분해서 사용하기

팀이 계속 참고해야 하는 규칙에는 주석을 사용합니다. 누군가 직접 따라 해 봐야 하는 순서에는 프로토타입을 사용합니다. 아직 결정이 필요한 질문이나 논의에는 댓글을 사용합니다.

예약 예제에서 ‘날짜를 변경하면 시간 선택을 해제한다’는 내용은 계속 남겨 둘 주석입니다. 사용자가 선택 해제를 알아차리는지는 인터랙티브 리뷰로 확인할 만한 질문입니다. ‘두 날짜 모두 같은 시간에 예약할 수 있다면 선택을 유지할까?’는 논의할 사항이지 확정된 규칙이 아닙니다.

논의가 끝나면 주석과 관련 화면을 함께 수정합니다. 승인된 동작은 댓글 안에 묻혀 있고 와이어프레임에는 이전 결정이 남아 있어서는 안 됩니다. 산출물을 고를 때도 와이어프레임은 구조, 목업은 시각적 표현, 프로토타입은 선택한 동작을 검토한다는 차이를 기준으로 판단하면 됩니다.

Pixso에서 주석이 있는 예약 화면 만들기

Pixso 디자인 파일에 읽기 쉬운 레이블, 시간 선택지, 이메일 필드, 예약 내용 확인 버튼을 배치해 예약 화면을 만듭니다. 프레임 옆에 텍스트 주석 열을 만들고 작은 번호 표시를 그려 여섯 가지 규칙을 해당 컨트롤에 연결합니다. 주석은 일반 디자인 객체로 작성하면 문구와 위치를 쉽게 수정할 수 있습니다.

화면을 복제해 이메일이 비어 있는 오류 상태와 날짜를 바꾼 상태를 만듭니다. 날짜 변경 버전에서는 이메일은 그대로 두고 시간 선택만 해제합니다. 그러면 검토자가 결과를 상상하지 않고도 05번 주석의 의미를 확인할 수 있습니다.

검토 목적에 맞는 프로토타입을 만들려면 필수 항목을 채운 폼의 ‘예약 내용 확인’을 요약 프레임에 연결합니다. 요약에는 상담 내용, 날짜, 시간, 이메일을 보여 주고 별도의 예약 확정 버튼을 둡니다. Pixso는 화면 연결과 맥락에 맞는 댓글 기능을 지원합니다. 이 예약 흐름이 구체적으로 어떻게 동작할지는 직접 만든 화면과 작성한 규칙으로 정해야 합니다.

Pixso에서 주석이 있는 와이어프레임 만들기 →

가장 오해하기 쉬운 변경을 검토하기

구두 설명 없이 동료가 와이어프레임을 읽어 보게 합니다. ‘10:00을 선택하고 이메일을 입력한 다음 날짜를 바꾸면 무엇이 남고 무엇을 다시 선택해야 하나요?’ 화면과 05번 주석만으로 답이 분명하지 않다면 문서를 더 늘리기 전에 두 요소를 먼저 개선합니다.

번호가 붙은 시트를 만드는 이유는 작성자가 자리에 없어도 그 답을 찾을 수 있게 하기 위해서입니다. 어떤 폼에도 적용할 수 있는 일반적인 조언 한 페이지보다 정확한 컨트롤에 붙인 여섯 가지 구체적인 설명이 더 유용합니다.