와이어프레임의 기호, 기기별 크기, 동작 메모

기본 기호와 화면 요소

화면의 영역, 문구, 이미지와 버튼을 간단한 기호로 표시합니다. 공통 기호만으로 설명이 부족한 항목은 이름과 메모를 추가합니다.

기기별 화면 크기

휴대폰과 데스크톱은 화면 폭과 입력 방식이 다릅니다. 실제 지원할 화면 크기를 기준으로 정보의 배치와 조작을 검토합니다.

종이를 사용한다면 목표 기기의 화면 비율을 표시합니다. 디지털 도구에서는 대표 화면 크기를 설정하고 작은 화면에서도 필요한 내용이 읽히는지 확인합니다.

한 화면에 모든 내용이 보이지 않으면 스크롤 위치와 주요 행동의 접근성을 검토합니다. 중요한 안내나 버튼이 발견하기 어려운 곳에 있는지 확인합니다.

핵심 업무에 따른 배치

초기 검토와 상세 디자인의 구분

버튼에는 실제 수행하는 행동을 적습니다. 예약 신청, 결제와 최종 확정을 구분하고 버튼 문구와 처리 결과가 일치하는지 확인합니다.

예약 신청결제최종 확정

화면별 동작과 조건 메모

그림으로 설명하기 어려운 동작과 조건은 화면 옆에 메모합니다. 메모에는 화면 번호와 대상 요소를 표시합니다.

미정 항목은 표시하고 결정 담당자와 확인 기한을 기록합니다. 의도적인 빈 영역과 아직 설계하지 않은 내용을 구분합니다.

검토 목적에 맞는 표현 수준

종이, 디지털 화면과 클릭 가능한 모형은 검토 목적에 따라 선택합니다. 화면 수만으로 도구를 정하지 않습니다.

1. 간단한 구조

   종이 화면

   필요한 정보와 조작, 주요 배치를 빠르게 정리합니다.

   종이와 펜

2. 공유와 수정

   디지털 화면

   여러 사람이 검토하고 수정 이력을 관리할 때 사용합니다.

   UI 시안 툴

3. 동작과 흐름

   클릭 가능한 모형

   사용자가 화면 이동과 조작을 이해하는지 확인합니다.

   시험 범위와 질문의 설정

화면 이동과 사용자 행동을 확인할 필요가 있으면 클릭 가능한 프로토타입을 제작합니다. 확인할 질문과 시험 범위를 정해 제작 시간을 배분합니다.

화면 자료의 완료 기준검토자가 필요한 정보와 조작, 처리 결과를 설명할 수 있는지 확인합니다. 이해가 다른 항목은 문구와 메모를 보완합니다.

화면 검토의 진행

검토를 시작할 때 확인할 내용과 아직 확정하지 않은 항목을 설명합니다. 다음과 같이 검토 범위를 안내할 수 있습니다.

“화면별 정보, 버튼의 동작과 다음 화면을 검토합니다. 세부 디자인은 후속 단계에서 구체화합니다.”

검토자가 제안한 배치는 필요한 업무와 사용 조건에 맞는지 확인합니다. 변경 이유와 반영 여부를 기록하고 후속 디자인에 전달합니다.

기관과 기업의 공동 검토

여러 부서가 참여하면 공통 업무와 역할별 요구를 구분해 검토합니다. 표현의 정밀도보다 필요한 정보와 동작을 이해할 수 있는지가 중요합니다.

승인 자료에 별도 형식이 필요하면 검토 결과를 반영해 정리합니다. 내부 검토본과 승인본의 버전을 연결해 변경 사항을 추적합니다.

• UI 시안 툴의 협업, 수정 이력, 전달 형식