목록에서 항목 선택하기 - Spectre 콘솔 시리즈

수업 소개

0:00에 Tim은 Spectre Console을 사용하면 개발자가 C# 콘솔 앱을 시각적으로 매력적이고 유익한 애플리케이션으로 바꿀 수 있다고 설명합니다. 그의 비디오 시리즈는 10분 분량으로 라이브러리를 다루며, 설명란에 소스 코드 링크가 있습니다.

이번 강의(0:18)에서 Tim은 사용자가 목록에서 옵션을 선택하도록 요청한 다음 키보드를 사용하여 목록을 탐색하는 방법에 중점을 둡니다. 이러한 "묻고 답하기" 패턴은 현대적이고 상호작용적인 콘솔 앱을 구축하는 데 있어 핵심적인 요소입니다. 또한 그는 시청자들에게(0:27) 자신의 채널을 구독하고 iamtimcorey.com을 방문하여 더 많은 교육 자료를 확인해 보라고 권합니다.

선택 프롬프트 생성

0:34에 Tim은 자신이 애플리케이션에서 흔히 사용하는 자리 표시자 이름 목록을 보여줍니다. 만약 "가장 좋아하는 과일"의 예시를 원한다면, 사과, 바나나, 오렌지처럼 과일 목록을 만들어도 무방할 것입니다. 그는 사용자가 선택할 답변을 저장할 문자열 타입의 변수를 설정합니다.

string favoriteName;

string favoriteName;

그리고 0:57에 Tim은 이전 수업에서 다룬 기본 프롬프트에서 완전한 SelectionPrompt 기능으로 넘어갑니다.

favoriteName = AnsiConsole.Prompt(
    new SelectionPrompt<string>()
        .Title("Which is your favorite placeholder name")
        .AddChoices(names)
);

favoriteName = AnsiConsole.Prompt(
    new SelectionPrompt<string>()
        .Title("Which is your favorite placeholder name")
        .AddChoices(names)
);

그는 (1:13) SelectionPrompt에는 제목이 필요하며 그의 경우에는 "가장 좋아하는 자리 표시자 이름은 무엇입니까?"입니다. 만약 가장 좋아하는 과일을 묻는 것이라면 제목을 "가장 좋아하는 과일은 무엇입니까?"로 그에 맞게 변경해야 합니다.

Spectre Console의 스타일(예: 파란색, 녹색 또는 회색)을 사용하여 텍스트를 꾸밀 수 있지만(1:24), 이 강의에서는 선택 프롬프트 자체에 초점을 맞추고 있습니다.

1시 39분에 Tim은 .AddChoices()를 호출하여 선택 항목, 즉 이름 목록을 추가합니다. 이러한 선택지는 과일, 숫자, 사물 또는 심지어 "검색" 기능의 결과 등 무엇이든 될 수 있습니다.

마지막으로, 1분 55초에 Tim은 Spectre Console의 마크업 라인을 사용하여 사용자가 선택한 항목을 다시 표시합니다.

AnsiConsole.MarkupLine($"Your favorite name is [red]{favoriteName}[/].");

AnsiConsole.MarkupLine($"Your favorite name is [red]{favoriteName}[/].");

이 코드는 인라인 마크업을 사용하여 선택된 답변을 빨간색으로 표시하지만, 콘솔 테마에서 요구하는 경우 파란색이나 녹색을 사용해도 됩니다.

선택 프롬프트 실행

Tim은 2시 34분에 코드를 저장하고 실행합니다. 콘솔에는 다음과 같은 내용이 표시됩니다.

• 이름이나 과일 목록.

• 화살표 키를 사용하면 위아래로 이동할 수 있습니다(2:41).

• Enter 키를 눌러 항목을 선택하세요.

Tim은 "Sue Storm"을 선택하는 방법을 보여줍니다(2:50). Enter 키를 누르면 목록이 사라지고 콘솔에 다음 내용이 출력됩니다.

Your favorite name is Sue Storm.

Your favorite name is Sue Storm.

만약 이것이 과일 목록이었다면, "당신이 가장 좋아하는 과일은 바나나입니다" 또는 "당신이 가장 좋아하는 과일은 사과입니다"와 같은 문구를 볼 수 있었을 것입니다.

긴 목록 처리

이어서 팀은 흔히 발생하는 문제인 긴 목록에 대해 언급합니다. 3분 13초에 그는 표시되는 항목 수를 제한하기 위해 PageSize 속성을 소개합니다.

.PageSize(4)

.PageSize(4)

그는 (3:19) 4라는 숫자가 그 특징을 보여주기 위해 의도적으로 작다고 설명합니다. 한 번에 표시되는 항목 수는 제한되어 있습니다. 사과, 바나나, 오렌지, 망고, 파인애플처럼 과일 목록이 길다면 PageSize 옵션을 사용하면 콘솔이 끝없이 스크롤되는 것을 방지할 수 있습니다.

사용자를 안내하기 위해 Tim은 3분 34초에 회색으로 MoreChoicesText 메시지를 추가합니다.

.MoreChoicesText("[grey](Move down to reveal more choices)[/]")

.MoreChoicesText("[grey](Move down to reveal more choices)[/]")

이 텍스트는 사용자가 아래로 스크롤하여 더 많은 선택지를 확인할 수 있음을 알려줍니다. 이는 특히 목록의 크기가 크고 오류나 혼란을 방지하기 위해 명확한 힌트를 얻고 싶을 때 유용합니다.

긴 목록 동작 시연

팀은 4시 8분에 프로그램을 다시 실행합니다.

• 처음에는 네 가지 옵션만 표시됩니다.

• 회색 메시지에는 "더 많은 선택지를 보려면 아래로 이동하세요"라고 적혀 있습니다(4:13).

• 아래로 스크롤하면 추가 항목이 표시됩니다.

• 위로 스크롤하면 처음 영상들이 다시 나옵니다(4:20).

Tim은 (4:25) 이것이 대규모 목록에 이상적이라고 말합니다. 콘솔을 끝없이 스크롤할 필요가 없습니다. 한 번에 10개 또는 15개씩 표시하고 사용자가 페이지를 넘겨 나머지를 볼 수 있도록 할 수 있습니다. 이렇게 하면 콘솔에 너무 많은 정보가 한꺼번에 출력되어 과부하가 걸리는 문제를 해결할 수 있습니다.

선택 프롬프트가 직접 입력하는 것보다 나은 이유

4분 38초에 Tim은 선택 프롬프트가 직접 입력하는 것보다 나은 이유를 강조합니다.

• 선택을 마치면 목록이 사라집니다(4:41).

• 선택하신 답변을 즉시 확인하실 수 있습니다(4:45).

그는 이를 (5:05) 사용자가 "예" 또는 "아니오"를 입력해야 했던 기존 프롬프트와 비교합니다. SelectionPrompt를 사용하면 이러한 선택지를 직접 제공하고 사용자가 화살표 키로 선택할 수 있도록 하여 오류를 줄이고 사용자 경험을 더욱 원활하게 만들 수 있습니다.

Tim은 (5:35) 프롬프트가 입력을 단순화하고 콘솔 앱을 더욱 상호작용적으로 만들고 입력 문제에 대한 명확한 해결책을 제공하기 때문에 "정말 멋진 추가 기능"이라고 말합니다.

기타 활용 분야 및 향후 연구 주제

Tim은 (5:43) 이 수업에서 목록에서 한 항목을 선택하는 방법을 다룬다고 언급합니다. 향후 영상에서는 사용자가 여러 항목을 켜고 끌 수 있는 다중 선택 프롬프트(5:39)를 보여주고 Enter 키를 눌러 확인하는 방법을 보여줄 것입니다.

그는 또한 (5:47) 목록이 문자열, 정수, 과일, 심지어 함수에서 반환된 기본 옵션과 같은 모든 객체 유형일 수 있다고 언급합니다. 예를 들어, 이름 대신 사용자가 가장 좋아하는 과일("사과", "바나나", "오렌지")을 입력하도록 요청할 수 있습니다(5:55).

Spectre Console의 선택 프롬프트를 사용하면 기본값을 설정하고, 필수 답변을 처리하고, 선택 후 수행될 작업을 사용자 지정할 수도 있습니다.

결론

Tim은 (6:01) 자신의 비디오를 마무리하면서 이것이 Spectre 콘솔에서 항목 선택을 구현하는 방법, 즉 콘솔 애플리케이션에서 목록을 처리하는 깔끔하고 사용자 친화적인 방법임을 다시 한번 강조합니다. 선호하는 과일, 숫자 또는 사물을 묻는 경우든, 선택 프롬프트를 사용하면 추가 입력이나 오류 없이 앱에 세련된 사용자 경험을 제공할 수 있습니다.