소프트웨어 화면 설계는 특정고객을 위하거나 혹은 범용적인 사용자들을 위해 개발되는 응용 소프트웨어 엔지니어링의 한 요소입니다.
이러한 소프트웨어 화면 설계에서는 컴퓨터 프로그램과 사람과의 상호작용과 정보교환을 위한 사용자 인터페이스(User Inteface)를 사용자가 사용하기 쉽도록 사용자 경험(User Experience) 에 기반하여 설계하는 것이 좋은 설계방법이라고 할 수 있겠습니다.
소프트웨어 화면 설계 원칙
직관성(Intuitiveness)
화면의 버튼, 항목, 입력란 등이 직관적으로 기능이나 의미가 파악되어야함.
일관성(Consistency)
여러 화면의 인터페이스에서 각 항목 배치는 일관성이 있어야 함.
효율성(Effectiveness)
인터페이스 사용이 쉬어야하며 쉽게 익숙해질 수 있어야 함.
이런 원칙들을 적용시키므로서 사용자의 요구를 벗어나는 요소를 감소시키고 전체적인 사용성과 더불어 개발의 효율성을 향상 시킬 수 있습니다.
UI 업무사항 분석
고객사 시스템에 대한 UI 업무사항 분석 및 수집은 소프트웨어 화면 설계에 앞서 선행 되어야 합니다.
이러한 UI 업무사항 분석은 기능목록의 요구사항의 한 부분으로써 전체 요구사항 도출 과정과 유사하게 진행하기도 하는데 먼저 전체 요구사항의 분석 및 확인이 진행 되고 난 후 수행하게 됩니다.
기존에 운영되고 있는 정보 시스템이 있다면 새로운 화면을 설계할때 많은 참고요소가 되지만 없는 경우가 더 많을 것 입니다.
이 경우에서 프로그램 UI 요구사항을 파악하기 위해서는 해당 조직의 업무지침서나 메뉴얼 또는 인터뷰 회의등을 통해 필요한 업무절차를 수집할 수 있으며 더불어 비슷한 유형의 다른 시스템을 참고하는 방법이 있습니다.
기존 사용하는 시스템이 존재할 경우에는 역공학(Revserse Engineering)분석으로 보다 자세한 구성요소를 파악 할 수 있으며 이렇게 종합 도출된 UI 관련 업무를 효율적인 방향으로 업무 개선 작업 수행(Process Innovation)하게 됩니다.
소프트웨어 화면 설계의 업무 개선 작업 수행은 기존 진행해왔던 화면 관련 업무절차를 그대로 정보시스템에 넣는 것에 그치는 것이 아니라 업무의 불편사항 등 개선점을 미리 도출하여 개선된 업무로 화면 요건을 정의하는 작업입니다.
UI 요구사항 수집
업무 지침이나 관련 문서, 매뉴얼 등을 참조 한 후 업무 담당자와 인터뷰, 회의 등으로 앞으로 시스템에서 구현될 요건들을 전체 도출한 다음 화면 관련 요구사항을 추출 하여 수집합니다.
대상자를 선정하는 기준은 경영진, 실업무자, 간적접으로 관련이 있는 대상자로 폭 넓게 선정하도록 한 후 인터뷰 전 질문 사항들을 모두 정리해 놓아서 실제 인터뷰 수행시 누락되는 항목이 없도록 합니다.
경영진을 인터뷰하는 이유는 회사의 정책과 비지니스 측면에 대한 요구사항을 수집할 수 있기 때문입니다.
요구사항 수집을 위해 다음과 같은 방법들을 수행할 수 있습니다.
UI 요구사항 정의
수집된 요구사항을 명확히 분석하고 검증하여 최종적으로 정의하는 작업을 진행하게 됩니다.
UI 화면 프로그램 측면에서는 사용자 중심의 설계로 개발이 진행되는 것을 기반으로 하되 상호 충돌적인 요소는 없는지, 사용자에게 편리성과 익숙함을 제공하는지를 고려하여야 합니다.
요구사항 분류를 위해서 다음과 같은 방법을 사용할 수 있습니다.
페르소나 활용
페르소나(Personal) 란 사용자를 보다 면밀하게 분석하기 위해 공통된 경험 특성을 가진 사용자(Persona)를 정의하여 이용 패턴, 동기, 니즈 등을 분석하는 방법입니다.
UI 화면 관점에서는 IT분야에 능숙한 그룹 혹은 컴맹 그룹 등 사용자 집단을 나누어서 각 집단의 이용 동기, 행동 시나리오 등을 바탕으로 요구사항을 분류 할 수 있습니다.
UI 요구사항 매트릭스 작성
다양한 경로를 통해 수집된 직접적인 요구사항을 검토하고, 페르소나의 목적을 기준으로 데이터 및 기능 니즈, 제품 품질, 제약 요인 때문에 UI 요구사항에 영향을 줄 수 있는 것을 매트릭스로 작성하는것입니다.
예를 들어 이메일을 사용하고자하는 페르소나 집단은 이메일 메세지를 읽고, 삭제 하거나 새 이메일을 송신하는 기능 니즈의 매트릭스를 작성할 수 있습니다.
UI 정황 시나리오 작성
제품이나 서비스가 어떤 모습을 가져야 하는지 페르소나 관점에서 시나리오를 작성 하는것을 정황 시나리오(Contextual Scenario)라고 합니다.
페르소나인 가상의 사용자가 최종 목표를 달성하기 위한 방법을 순차적으로 묘사한 것으로써 사용자가 수행할 일들의 하나하나의 구분 정황(Context) 정도를 묘사한 것 입니다.
UI 설계
UI 화면 요구사항이 모두 정의되면 다음 단계로 UI 화면을 설계하게 됩니다.
위와 같은 설계원칙을 기반으로 아래와 같은 설계 지침을 준수하도록 합니다.
사용자가 이해하기 편하고 쉽게 사용할 수 있는 환경 및 실사용자에 대한 이해가 바탕이 되어야 하며 UI 조작이 기억하기 쉽고 간단해서 빠르게 습득할 수 있도록 설계가 되어야 합니다.
또한, 주요기능들을 화면에 잘 보이는 곳에 노출시켜서 조작이 쉽도록 하고 오류가 발생하였을 경우 사용자가 상황을 정확이 인지 할 수 있어야 합니다.
같은 시스템내에 UI 디자인을 표준화하여 기능 구조의 선행 학습 이후 쉽게 사용하도록 합니다.
UI 프로토타입 제작
프로토타입(Prototype)이란 시제품전에 제품원형으로 개발 검증과 양산 검증의 과정을 거쳐 시제품이 완성되는 것처럼 대량 생산에 앞서 미리 제작해보는 기초 표준이라 할 수 있습니다.
소프트웨어 개발에서의 프로토타입은 정식 절차에 따라 완전한 소프트웨어를 만들기 전에 사용자의 요구를 받아 모형을 만들고 이 모형을 사용자와 의사소통에 활용 할 수 있는 시안입니다.
이 과정을 통해서 실제 개발에 들어가기 전 최대한의 오류를 줄일 수 있으며 프로토타입은 검증을 위한 것이므로 최소 핵심 기능만 포함하여 최대한 간단하게 만들어야 합니다.
프로토타입은 크게 두가지 형태로 제작 할 수 있는데, 종이나 화이트 보드등에 직접 손으로 작성하는 페이퍼 프로토타입과 파워포인트 같은 프로그램 툴을 이용하는 디지털 프로토타입으로 나눌 수 있습니다.
페이퍼 프로토타입은 제작 비용이 적어서 제작 기간이 짧고 업무 협의가 빠른 상황일때 적용하고, 디지털 프로토타입은 재사용이 필요하거나 산출물과 비슷한 효과를 필요로 할 경우 적용하게 됩니다.
와이어프레임 작성
와이어프레임(Wireframe)은 제품을 간단한 모양만을 사용하여 인터페이스를 시각적으로 묘사한 것으로 주로 선으로된 그림으로 설계된 모양을 뜻합니다.
화면의 구성방식이나 내용, 인터페이스의 작동방식을 설명하는데 사용되며 향후 만들어질 화면에 대한 예측이 내용이 묘사해서 이를 고객사나 개발 관계자들과 공유하여 의견을 교환 할 수 있습니다.
실제 화면을 구현하기에 앞서 간단하게 작성하여 이해 관계자와 팀원에 디자인 의사 결정을 명확히 전달하는 수단으로 사용되며 이는 UI 프로토타입의 연장선에 있는 도구 입니다.
실제 현장에서는 간단히 파워포인트로 하는 경우가 많지만 동적인 동작을 보여주기 위해서는 아래와 같은 전문 와이어 프레임을 사용하여야 합니다.
PowerMockup (http://www.powermockup.com)
- 파워 포인트에 애드온 설치하여 목업 기능을 사용할 수 있게 지원.
- 미리 제작해 놓은 레이아웃, 컴포넌트, 내비게이션 등 다양한 목업을 드래그해서 사용.
- 파워포인트 화면설계시간을 단축시키고 싶은 사용자에게 적합.
Balsamiq (http://balsamiq.com)
- 스케치한 느낌으로 빠르고 심플하게 서비스 컨셉을 전달할 수 있는 목업 도구.
- 아이디어를 단시간에 빠르게 스케치 하고 싶은 사용자에게 적합.
Oven (http://ovenapp.io)
- 다음 카카오에서 제작한 온라인 무료 프로토타이핑 툴.
- 디자인 시안 이미지를 업로드하여 모바일등의 디바이스에서 테스트 가능.
화면 별로 디테일한 사용자 UX에 관련한 정보는 여기서 볼 수 있습니다.
프로그램 UI 와 UX 디자인- 컨텐츠 구조와 네비게이션
프로그램 UI 와 UX 디자인- 화면 레이아웃 및 액션
프로그램 UI 와 UX 디자인- 데이터의 표현과 정보 받기