행동에서의 앱 인터페이스 디자인 원칙: Tim Corey의 토너먼트 추적기 UI

UI 디자인 시작하기

Tim은 사용자 인터페이스 디자인 단계가 애플리케이션 개발의 재미있는 부분이라고 말하며 애플리케이션이 어떻게 보일지를 대략적으로 볼 수 있기 때문이라고 설명합니다. 그는 비록 화가가 아니라고 인정하지만 화이트보드나 법적 메모지에 폼을 그려본다고 말합니다. Tim은 스케치가 완벽하거나 비례할 필요가 없으며 폼의 기본 아이디어와 어떻게 작동해야 하는지를 보여주기만 하면 된다고 단호히 말합니다.

여기서 Tim의 주 요점은 UI 디자인 단계가 계획과 관련이 있다는 것입니다, 아름다움이 아니라. 그는 목표가 어떤 폼/페이지가 필요하고 각각이 무엇을 포함해야 하는지를 식별하는 것이라고 강조합니다. 이 접근방식은 명확성을 위해 필수적이며, 설계 프로세스 동안 개발자와 디자이너가 일치하는 데 도움이 됩니다.

디자인 어디서 시작해야 할까?

Tim은 일반적인 질문, "어디서 시작해야 합니까?"에 대해 설명합니다. 그는 어디서 시작하든 상관없다고 설명합니다. 앱의 특정 부분에 자신이 없다면, 자신 있는 부분부터 시작하세요. 명확한 부분을 완료한 후, 종종 불확실한 부분에 대한 더 나은 아이디어를 얻을 수 있습니다.

그는 또한 몇 가지 폼을 설계한 후 자신감을 얻고 계속할 준비가 되어 있다고 느낄 것이라고 합니다. 이러한 사고방식으로 Tim은 토너먼트 뷰어 폼부터 시작하기로 선택했습니다.

이 방법은 디자이너와 개발자가 사용자가 한 화면에서 다른 화면으로 어떻게 이동할지를 중점적으로 생각하도록 유도하기 때문에 좋은 사용자 흐름을 지원합니다.

왜 Visual Studio에서 처음부터 설계하지 않나요?

Tim은 Visual Studio의 Windows Form Builder에서 설계를 시작해서는 안 된다고 설명합니다. 그는 그렇게 하면 두 가지 주요 문제가 발생한다고 경고합니다:

1. 디자인을 계획하는 대신 레이아웃과 컨트롤을 조정하면서 시간을 낭비하게 됩니다.

2. 디자인 프로세스를 생략하게 되며, 더 나은 옵션을 놓치거나 작업을 다시 하기를 꺼려서 숨겨진 문제를 남길 수 있습니다.

Tim은 종이에 설계하면 지우고, 새로운 아이디어를 시도하고, 훌륭한 솔루션이 될 수 있는 "엉뚱한" 개념을 시험해볼 수 있다고 말합니다. 이것은 UI 디자인의 중요한 원칙입니다, 첫 번째 초안에서 어떻게 보일지를 초점에서 벗어나게 하기 때문에요.

토너먼트 뷰어 폼

Tim은 그의 첫 번째 대략적인 UI를 공개합니다: 토너먼트 뷰어 폼. 그는 이 폼이 특정 토너먼트에 대한 모든 정보를 표시할 것이라고 설명합니다.

토너먼트 생성 폼

그런 다음 Tim은 토너먼트 뷰어 후에 필요할 가능성이 높은 토너먼트 생성 폼으로 이동합니다.

팀 생성 폼

그런 다음 Tim은 팀 생성 폼을 디자인합니다, 이것은 포함합니다:

• 팀 이름

• 팀 구성원 선택

• 새 구성원 추가

Tim은 폼 간의 일관성의 중요성을 강조합니다. 그는 팀 이름 레이아웃이 토너먼트 이름 레이아웃과 일치하여 일관된 디자인을 만들어야 한다고 말합니다.

그는 또한 이 폼이 기존 팀 구성원을 목록에서 추가하거나 폼 내에서 직접 새 구성원을 만들 수 있도록 한다고 설명합니다. Tim은 깊은 탐색 레이어(즉, 여러 폼을 여는 것)를 피하기 위해 멤버 생성을 동일한 폼 내에 유지하는 것을 선호한다고 말합니다.

그는 여러 레이어를 추가하면 혼란스럽고 느려질 것이라고 설명합니다. 따라서 그는 디자인을 간결하고 사용자 친화적으로 유지하기로 선택합니다. 이는 사용자가 작업을 완료하는 데 필요한 시간을 줄이는 단순하고 직관적인 앱 인터페이스를 지원합니다.

상 생성 폼

Tim의 상 생성 폼은 간단합니다. 다음이 포함됩니다:

• 순위 번호

• 순위 이름

• 상 금액

• 상 퍼센트

Tim은 마지막 두 필드 중 하나만 한 번에 사용해야 한다고 지적합니다 (금액 또는 퍼센트 중 하나). 그는 폼이 나중에 유효성 검사 로직이 필요할 것이라고 말하지만, 디자인 목적으로 레이아웃은 간단하다고 합니다. 이는 디자인 원칙이 어떻게 세련되고 기능적인 인터페이스를 만드는 데 도움이 되는지에 대한 좋은 예입니다.

토너먼트 대시보드 폼

마침내 Tim은 토너먼트 대시보드 폼에 대해 이야기하며, 그는 완전히 만족하지 않는다고 인정합니다. 그는 도전을 설명합니다: Windows Forms 애플리케이션은 일반적으로 열려 있는 한 메인 폼이 하나 존재합니다. 메인 폼이 닫히면 애플리케이션이 종료됩니다.

이는 토너먼트 추적기에 문제가 됩니다, 사용자가 여러 토너먼트를 한 번에 열고 싶어할 수 있기 때문입니다. Tim은 초기에는 토너먼트가 없을 경우 자동으로 토너먼트 생성 폼을 여는 것을 고려했습니다. 그러나 그는 토너먼트 생성 폼을 닫으면 애플리케이션이 종료될 것임을 깨달았습니다.

따라서 Tim은 항상 열려 있는 중앙 대시보드 폼을 설계합니다. 이 대시보드는 사용자가:

• 기존 토너먼트를 볼 수 있게 합니다

• 토너먼트를 로드하게 합니다

• 새 토너먼트를 만들게 합니다

Tim은 다른 폼이 닫혀 있어도 대시보드가 열려 있을 것이라고 설명합니다. 중앙 탐색 포인트로 애플리케이션의 역할을 합니다. 그는 비록 '너무 간단하게' 보일 수 있지만, 작동한다고 말하며 나중에 디자인 요소나 애니메이션을 추가하여 더 시각적으로 매력적으로 만들 수 있다고 합니다.

결론

Tim은 비디오를 마무리하며 목표가 필요한 폼을 식별하고 각 폼이 무엇을 표시해야 하는지를 결정하는 것이라고 강조합니다. 그는 UI가 디자인되면 다음 단계는 논리 계획이라고 말한다. 이를 통해 UI 요소가 데이터 모델과 백엔드에 어떻게 연결되는지를 계획할 것이다.

팀의 UI 디자인 프로세스는 앱 인터페이스 디자인이 초기에 완벽한 시각적인 효과를 만드는 것이 아니라 계획, 일관성, 명확성을 중시한다는 것을 보여준다. 이 접근 방식은 개발자와 디자이너가 일치하도록 도와주며, 최종 애플리케이션이 사용자가 쉽게 탐색하고 사용할 수 있도록 보장한다.