화면 설계는 사용자의 목적과 상황, 운영 조건과 시각적 표현을 함께 검토합니다. 보기 좋은 화면과 업무를 완료하기 쉬운 화면의 조건을 구체적으로 확인합니다.
시각적 표현의 검토
글자와 색, 이미지와 배치가 정보를 명확히 전달하는지 확인합니다. 브랜드 표현과 가독성, 다양한 화면과 접근 환경을 함께 검토합니다.
업무 수행의 검토
주요 행동과 처리 상태, 오류와 복구 방법을 확인합니다. 실제 사용자가 업무를 완료하는 과정으로 정보와 조작의 적합성을 검토합니다.
프로토타입의 사용 확인
- 진입
- 서비스 확인
- 가입, 시작
- 주요 업무
- 결과 확인
- 후속 이용
대표 사용자가 주요 업무를 처음부터 끝까지 수행하도록 하고 완료, 실수, 도움 요청을 확인합니다. 정상 상태와 예외 상태를 함께 검토합니다.
- 주요 업무와 완료 기준
- 중단, 오류의 조건과 확인 방법
- 조작, 입력량과 업무 처리 시간
- 안내와 접근성, 도움의 필요
사용자, 운영자, 개발자의 요구
같은 기능도 입력과 확인, 처리 순서에 따라 사용 경험이 달라집니다. 사용자, 운영자, 개발자의 요구를 함께 확인합니다.
구현과 관리
필요한 정보와 처리
업무 완료와 이해의 편의
서로 다른 요구의 이유와 영향을 비교합니다. 설계 협의에 실제 사용자가 참여하지 못한다면 사용자 조사와 사용 시험으로 요구를 보완합니다.
화면 배치와 입력 순서의 목적을 설명받습니다. 근거가 가정이라면 실제 사용으로 확인할 항목을 정합니다.
입력 정보의 필요성과 시점
발주자의 요청도 사용자의 행동과 운영 조건을 기준으로 검토해야 합니다.
가입 정보는 필요한 목적과 시점을 확인합니다. 필수와 선택 항목을 구분하고 입력 형식과 이유를 안내합니다.
가입이용 중
- 동의
- 전화번호
- 본인 확인
서비스의 요구와 적용 조건을 확인한 뒤 시점을 정합니다
편의를 위해 필요한 보호 절차를 생략하지 않습니다.
업체가 정보의 필요성과 수집 시점을 검토하도록 요청합니다. 제안의 이유와 사용자, 운영 영향을 확인해 결정합니다.
실제 자료와 다양한 화면 상태
시안에는 대표 자료 외에 다양한 실제 상태를 반영해야 합니다.
대표 자료만 넣은 시안
실제 자료를 넣은 화면
- 한 건
- 빈 목록
- 로딩
- 오류
- 작은 화면
- 글자 확대
입력과 조작 환경도 검토합니다.
제목이 길거나 사진이 없을 때, 검색 결과가 없을 때의 표시와 다음 행동을 요청합니다.
설계에 포함한 상태와 미정 항목을 구분합니다. 구현과 시험 전에 결정할 시점과 확인 기준을 정합니다.
정보와 시각적 표현의 역할
시각적 완성도는 정보 이해와 브랜드 표현, 신뢰 판단에 영향을 줄 수 있습니다. 사용 편의와 함께 검토합니다.
흐름소프트 사례
방수 전문업체 홈페이지
흐름소프트의 방수 전문업체 홈페이지에서는 수행 경험과 강점을 콘텐츠와 화면에 반영하고 문의에 필요한 정보를 정리했습니다.
시공, 상담, 전문 서비스의 화면은 실제 사례와 제공 범위, 확인 가능한 근거를 명확히 보여 주어야 합니다. 시각적 표현만으로 신뢰를 대신하지 않습니다.
자주 사용하는 업무빠른 처리와 오류 예방
첫 방문 중심의 화면정보 이해와 주요 행동의 안내
업무 성격에 따라 강조할 수 있으며 두 조건은 함께 필요할 수 있습니다.
이용 상황과 업무의 중요도
화면의 속도와 순서는 이용 상황과 업무의 중요도를 고려해 정합니다.
- 처음 사용
- 급한 상황
- 기기와 환경
상황별로 안내와 조작, 오류 처리의 필요성을 검토합니다.
급한 문의나 취소 같은 기능은 접근과 처리 상태를 쉽게 확인할 수 있어야 합니다. 중요한 변경에는 필요한 확인과 복구 절차도 마련합니다.
흐름소프트 사례크리스천 모임 앱에서는 글 작성과 공유, 기도 요청의 의미와 이용 순서를 고려했습니다. 필요한 설명과 확인을 제공하면서 불필요한 조작을 줄였습니다.
화면 수와 실제 사용성의 차이
화면 수는 견적과 설계의 참고 항목이지만 품질을 단독으로 판단하는 기준은 아닙니다.
한 화면에 모으기
여러 단계로 나누기
정보를 한 화면에 모으거나 여러 단계로 나누는 방법을 비교합니다. 입력량과 이해 부담, 반복 작업과 오류 수정의 편의를 확인합니다.
주요 업무를 실제로 수행하면서 완료 여부와 시간, 실수와 도움 요청을 확인합니다. 누르는 횟수도 참고할 수 있습니다.
화면 수와 조작 횟수가 적어도 이해하기 어렵거나 실수하기 쉬울 수 있습니다. 사용자의 실제 수행과 접근성을 함께 평가합니다.
이용 단계별 정보와 결과 안내
아래 이용 순서는 화면과 안내의 누락을 검토하는 예시입니다. 서비스에 맞게 필요한 단계를 선택합니다.
- 가입 전제공할 정보와 가입이 필요한 시점을 확인합니다. 비공개 서비스 등 접근 제한이 필요한 경우에는 이유와 이용 조건을 안내합니다.
- 신청 후처리 결과와 현재 상태, 확인 방법을 제공합니다.
- 실패한 경우원인과 수정, 재시도의 방법을 안내합니다.
각 단계에 필요한 정보와 행동이 있는지 확인합니다. 단계마다 별도 화면이 반드시 필요한 것은 아닙니다.
수정 요청의 문제와 기대 결과
수정 요청은 관찰한 문제와 원하는 결과를 구체적으로 전달합니다.
“세련되게”참고 이미지와 원하는 인상, 대상 사용자를 보완합니다. 정보, 배치의 문제와 시각적 선호를 구분합니다.
“가격을 확인한 뒤 문의하려는데 가격 정보가 찾기 어렵다”이처럼 상황을 설명합니다. 가능한 대안과 영향 범위를 함께 검토합니다.
수정한 화면을 앞뒤 업무와 연결해 확인합니다. 다른 화면의 표시와 용어, 접근성과 오류 처리에도 영향이 있는지 점검합니다.
기관, 기업의 업무 수행 확인
내부 업무 시스템은 방문 횟수만으로 사용 편의를 판단하기 어렵습니다. 실제 업무 완료와 처리 시간을 확인해야 합니다.
별도 문서에서 작업한 뒤 시스템에 다시 입력한다면 이유를 조사합니다. 중복 업무와 자료 불일치, 기능과 권한의 문제를 구분합니다.
실무자의 사용 관찰과 의견, 오류, 처리 시간 자료를 함께 확인합니다. 설계와 프로토타입 단계에서도 대표 업무를 시험할 수 있습니다.
현재 방식비교 항목새 화면
작업량
오류
교육
전환의 부담
즉시 편해 보이는지보다 실제 수행 결과를 확인합니다.
참고 자료: W3C 입력 항목과 안내 W3C 입력 결과와 오류 안내
자주 묻는 질문
01화면 설계는 무엇을 기준으로 검토합니까
사용자의 목적과 상황, 운영 조건과 시각적 표현을 함께 검토합니다. 주요 업무와 완료 기준, 중단과 오류의 조건, 조작과 입력량, 안내와 접근성을 확인합니다.
02시안에서는 어떤 화면 상태를 확인합니까
긴 제목과 사진 누락, 한 건 또는 빈 목록, 로딩과 오류 상태를 확인합니다. 작은 화면과 글자 확대, 입력과 조작 환경도 검토합니다.
03화면 수가 적으면 사용하기 쉽습니까
화면 수와 조작 횟수가 적어도 이해하기 어렵거나 실수하기 쉬울 수 있습니다. 주요 업무를 실제로 수행하면서 완료 여부와 시간, 실수와 도움 요청을 확인합니다.
04화면 수정은 어떻게 요청합니까
관찰한 문제와 원하는 결과를 구체적으로 전달합니다. 예를 들어 가격을 확인한 뒤 문의하려는데 가격 정보를 찾기 어렵다처럼 상황을 설명하고, 세련되게 같은 표현에는 참고 이미지와 원하는 인상, 대상 사용자를 보완합니다.
05가입 정보는 어떤 기준으로 받습니까
필요한 목적과 시점을 확인하고 필수와 선택 항목을 구분합니다. 동의와 전화번호, 본인 확인은 서비스의 요구와 적용 조건을 확인한 뒤 시점을 정하며 필요한 보호 절차는 생략하지 않습니다.