[dot Net] 사용자를 배려하는 개발 <1> UI / UX와 기본 버튼과 종료

좋은 프로그램을 만들고 싶습니다.

대부분의 개발자는 자신이 노력해서 만든 프로그램들이 좋은 프로그램이기를 바랍니다.


어느 지점에서 에러가 발생하지 않을까?

이렇게 진행되는 알고리즘이 최선일까?

여러 고민을 하고 정성껏 다듬어야 좋은 프로그램이 나온다 생각합니다.

함께 사용자를 배려하는 개발이 있어야 좋은 프로그램이 나온다 생각합니다.



사용자 인터페이스(UI: User Interface)


사용자 인터페이스는 정말 중요합니다.

요구된 기능을 받아 구현한 프로그램을 만드는데 UI가 요구된 기능 보다 중요해?

라는 질문을 받으면 당연히 기능이 중요합니다.

버그가 없고 볼품 없는 UI와 버그가 있고 멋진 UI라면?

당연하게도 버그가 없는 것이 더 중요합니다.

UI가 알고리즘과 프로그램 시나리오만큼 중요할까요?

프로그램이 생성된 목적과 내부 효율을 대상으로 비교하면 중요하다고 할 수 없습니다.


이렇게 사용자 인터페이스는 개발하는 입장에서 보면 우선순위가 낮을 수밖에 없는 위치에 있습니다.


그럼에도 불구하고 UI는 중요합니다.

앞서 비교된 것은 프로그램에서 당연한 것이고 UI는 특별하게 다른 것이니까요.

다른 프로그램과 어떻게 다르고, 어떻게 보이고, 어떻게 사용하는가?

좋은 프로그램을 판단할 때 UI의 가치는 당연한 것에 대한 완성도 만큼이나 중요합니다.



사용자 경험(UX: User Experience)


마찬가지로 사용자 경험은 중요합니다.

프로그램은 사용자와 상호 교감하며 대화합니다.

프로그램은 프로그램을 사용하는 사용자 관점에서 만들어야 합니다.


아무리 훌륭한 구성과 기능을 가지고 있어도 사용자를 배려하지 않으면 좋은 프로그램이라 할 수 있을까요?


시나리오에 따라 현장이 요구하는 것과 사용자 및 고객이 요구하는 것을 모두 반영할 수는 없겠지만

제품을 사용하는 사람 입장에서 시나리오를 토대로, 보다 좋은 프로그램을 만들기 위해 노력하는 것은 중요합니다.



직관적인 익숙한 프로그램


남과 다른 혁신적인 프로그램을 만들겠다고

의도적으로 그리고 일반적으로 다이얼로그 창을 마름모로 만들지 않습니다.

디자인적인 측면에서 마름모로 프로그램의 개성을 잘 활용할 수도 있을 겁니다.

하지만 공간의 효율성 저하와 함께 사용자는 불편함을 느끼게 될 겁니다.


사용자는 프로그램을 학습합니다.

어떤 어려운 프로그램도 익숙하기까지 걸리는 시간이 오래 걸리는 것이지

익숙해지면 누구나 잘 사용할 수 있습니다.

처음 프로그램을 접하는 사람이 어렵지 않게 잘 사용할 수 있는 프로그램은

이전까지 사용했던 여러 프로그램들과 비슷하게 UI가 구성되어야 합니다.


직관적인 인터페이스는 어떻게 말하면 이전에 사용되어온

사람들에게 익숙한 버튼의 위치에 그 버튼을 둠으로써 완성됩니다.


그럼 동시에 앞에서 이야기 한 혁신은 없는 일반적인 프로그램이 되는 걸까요?


혁신은 남과 다르게 하기 위해서 기본적인 토대를 무너뜨리는 것이 아니라 기본을 지키면서 남과 다르게 하여 이루어야 합니다.

생각의 전환이 일어나려면 최소한 무슨 생각을 하는지 알아야 한다고 생각합니다.

(기본의 범위는 주관적일 수밖에 없는 부분이라 뭐든 반드시라고 할 수는 없겠지만요)



친절한 프로그램 - 기본 버튼과 종료


이제 그 기본 기능의 예를 들어보겠습니다.


메시지 창에 존재하는 버튼


뭐에 쓰는지는 모르겠는 추가라는 기능을 가진 버튼이 있습니다.

추가 버튼을 클릭하면 새 창이 떴습니다.

여기서 제일 아래에 있는 버튼(들)은 어떻게 될까요?

메시지 박스에 있는 .net의 MessageBoxButtons Enum으로 예를 들어보겠습니다.

버튼종류

MessageBoxButtons.OK
MessageBoxButtons.OKCancel
MessageBoxButtons.YesNo
MessageBoxButtons.YesNoCancel
MessageBoxButtons.RetryCancel
MessageBoxButtons.AbortRetryIgnore

총 6종류가 있습니다.


사실 추가 다이얼로그 창에서 구현되는 내용에 따라 버튼 결과가 달라지겠지만

추가를 하고자 하니 수정 가능한 내용이 나오고 2번 확인, 취소가 가장 알맞은 시나리오일 것입니다.

가장 많이 사용하는 버튼이기도 하고요.


각 버튼이 나오는 메시지 창의 예를 들자면 아래와 같습니다.

1) 이 내용은 올바르지 않습니다. 확인

2) 이렇게 저장합니다. 확인 / 취소

3) 이렇게 결과가 나왔습니다. 계속하시겠습니까? 예 / 아니요

4) 지금 상태를 저장하시겠습니까? 예 / 아니요 / 취소

5) 파일을 쓰는 과정에서 문제가 발생했습니다. 다시시도 / 취소

6) 파일 내보내기 중 하나의 파일에 문제가 발생했습니다. 계속하시겠습니까? 중단 / 다시시도 / 무시


메시지 박스에 이런 유형이 있다는 것은 일반적으로 이렇게 사용한다는 것입니다.

사용자는 일반적으로 추가 버튼을 눌렀을 때

추가도 가능하고 수정도 가능하며 삭제도 가능한 버튼을 원하지 않습니다.

추가하고자 하는 내용 확인 후에 진행을 위한 확인과 진행을 취소하기 위한 취소를 원합니다.


친절한 프로그램은 당연하게도

사용자 경험에 부합하는 요구하는 기능에 맞는 버튼을 가져야 합니다.


프로그램은 ESC 키로 종료되지 않지만, 다이얼로그는 ESC로 종료됩니다.


마우스는 편리한 도구이지만

마우스만 사용해야 할 경우에 받는 스트레스는 상당합니다.

대부분의 다이얼로그 박스나 메시지창들이 포커스가 잡혀있을 때

키보드 ESC 버튼을 클릭하면 종료됩니다.


MFC에서 다이얼로그를 생성하면 기본적으로 확인과 취소가 생성되었는데

각각의 ID가 IDOK와 IDCANCEL이었습니다.

이 ID를 그대로 사용할 경우 각각의 리소스 ID는

각각 키보드 Enter 키, ESC 키와 동기화되어 있습니다.

때문에 ID를 변경하지 않고 다이얼로그를 생성할 경우에 ESC 버튼을 클릭하면

OnCancel() 함수가 실행되고 다이얼로그는 취소됩니다.

마찬가지로 Enter키를 눌렀을 경우에 OnOK() 함수를 내부적으로 실행합니다.


.net에서는 고정된 리소스를 제공하지 않아서

//해당 함수는 Form 속성에서 KeyPreview가 활성화 되어 있어야 실행됩니다.
private void Form_KeyUp(object sender, KeyEventArgs e)
{
    if (e.KeyCode == Keys.Enter)
    {
        ButtonOK_Click(sender, e);
    }
    else if (e.KeyCode == Keys.Escape)
    {
        ButtonCancel_Click(sender, e);
    }
}

이렇게 구현해야 하지 않을까 생각하였으나

C#IDOKIDCANCEL

폼 속성에 이런 항목이 있습니다.

Enter는 AcceptButton Esc는 CancelButton에 버튼을 간단하게 등록하여도 작동합니다.

참고로 MFC와 마찬가지로 도움말인 HelpButton 도 존재합니다.

이렇게 폼에 Enter와 Esc를 친절하게 속성으로 제공하는 이유는

일반적으로 가장 많이 사용하는 시나리오이기 때문입니다.

실행되어 있는 아무 윈도우 프로그램을 실행해서

팝업 창의 형태를 띠는 창(e.g. 정보 창)을 실행하고

ESC 키를 클릭하면 종료되는 것을 볼 수 있습니다.

해당 방법을 자주 사용하는 사람은 이 기능이 없을 경우 무척 불편하게 느낍니다.

이런 기본적인 기능은 프로그램에 있어 최소한으로 지켜야할 규칙입니다.


기본에 충실하고 사용자를 배려하면서

프로그램을 만들어나갈 것인지에 대해

추가적으로 더 작성할 예정입니다.


감사합니다.