컨텐츠 패널 및 콜아웃 - Spectre Console 시리즈

Spectre 기본 콘솔 패널 생성하기

Tim은 영상 시작 부분(0:00)에서 Spectre.Console을 사용하면 C# 콘솔 앱을 시각적으로 매력적이고 유용한 애플리케이션으로 바꿀 수 있다는 점을 다시 한번 강조합니다. 이번 강의(0:15)에서는 필요에 따라 간단한 안내 표시나 미니 테이블로 활용할 수 있는 패널을 만들어 보겠습니다.

0:34에 Tim은 Visual Studio에서 바로 예제를 작성합니다. 그는 패널의 새 인스턴스를 만드는 방법을 보여줍니다.

var panel = new("Tim Corey");
AnsiConsole.Write(panel);

var panel = new("Tim Corey");
AnsiConsole.Write(panel);

그는 (0:47) AnsiConsole.Write()가 렌더링 가능한 객체를 허용한다는 점을 지적하며, Panel이 IRenderable을 구현하므로 이에 딱 들어맞는다고 말합니다. 1분 2초에 코드를 실행하면 "Tim Corey"라는 텍스트 주위에 간단한 상자가 표시됩니다. 이 작은 공간조차도 메모를 강조하거나, 프롬프트를 부각하거나, 사용자 입력을 다른 콘솔 출력과 구분하는 데 유용할 수 있습니다.

패널 기능 살펴보기: 테두리 및 여백

이어서 팀은 패널의 기능들을 시연합니다. 1분 22초에 그는 테두리 스타일을 수정합니다.

panel.Border = BoxBorder.Rounded;

panel.Border = BoxBorder.Rounded;

이렇게 하면 패널에 둥근 테두리가 생깁니다. 이는 사용 가능한 여러 스타일 중 하나입니다. 그는 또한 사용자 지정 색상 테마 또는 파란색과 녹색 강조 색상에 맞춰 이중 테두리 또는 기타 옵션을 선택할 수 있다고 언급합니다.

1분 42초에 팀은 패널 안쪽의 패딩을 조절합니다.

panel.Padding = new(2, 0);

panel.Padding = new(2, 0);

그는 (2:16) 콘솔의 패딩은 웹의 픽셀과 같지 않고 문자 너비와 줄 바꿈을 기반으로 한다고 설명합니다. 5와 같은 큰 숫자는 사용 가능한 공간의 상당 부분을 채우는 큰 패널을 만들어냅니다. 그는 패딩이 어떻게 작용하는지 보여주기 위해 공간을 세어봅니다(2:35).

콘텐츠 주변 공간을 세밀하게 조정할 수 있는 이 기능을 통해 변수 테이블, 막대 차트 또는 기타 데이터를 표시하든 관계없이 레이아웃에 맞는 패널을 디자인할 수 있습니다.

헤더 추가 및 스타일 사용자 지정

3시 37분에 Tim은 패널에 헤더를 추가합니다.

panel.Header("My Name");

panel.Header("My Name");

그가 3시 51분에 코드를 실행하면 제목이 테두리에 나타납니다. 하지만 내용과 너무 동떨어져 있어요. 그는 패딩을 변경하여 이 문제를 해결합니다(4:04).

panel.Padding = new (1, 0);

panel.Padding = new (1, 0);

이렇게 하면 제목과 본문 사이에 약간의 공간이 생깁니다. Tim은 헤더와 간격을 사용하면 패널에 명확하게 레이블을 지정할 수 있다는 점을 지적합니다(4:16). 이는 작업 진행 상황, 실시간 디스플레이 또는 디스플레이 진행률 표시줄이 있는 장기 실행 작업을 표시할 때 유용합니다.

패널 안에 목록 표시하기

이어서 팀은 문자열 목록을 패널에 넣는 방법을 시연합니다. 4분 26초에 그는 이전 수업에서 나온 이름 목록을 가져와서 그것들을 하나의 문자열로 합치는 방법을 보여줍니다.

string panelInfo = string.Join('\n', names);
var panel = new Panel(panelInfo)
    .Header("Default Names");

string panelInfo = string.Join('\n', names);
var panel = new Panel(panelInfo)
    .Header("Default Names");

이렇게 하면 목록이 줄 바꿈이 포함된 하나의 문자열로 축소됩니다(5:02). 실행하면(5:28) 패널 안에 목록이 깔끔하게 표시되고 각 항목이 한 줄씩 나타납니다. 이 기법을 사용하면 데이터나 객체 속성을 강력한 형식으로 표시하면서도 텍스트로 렌더링할 수 있습니다.

Tim은 또한 (5:44) 서식 있는 텍스트 마크업을 사용하여 특정 항목에 사용자 지정 색상을 추가할 수 있음을 강조합니다. 예를 들어:

"[red]Bilbo Baggins[/]"

"[red]Bilbo Baggins[/]"

이는 Spectre 콘솔 패널이 일반 문자열뿐만 아니라 테마, 굵은 텍스트 또는 색상으로 구분된 항목을 포함하여 스타일이 적용된 콘텐츠도 처리할 수 있음을 보여줍니다.

마크업과 렌더링 가능한 객체를 사용하여 콘텐츠를 중앙에 배치하기

6시 19분에 Tim은 콘텐츠를 중앙에 배치하는 방법에 대한 질문에 답합니다. 일반 문자열로는 중앙에 정렬되지 않습니다. 대신 렌더링 가능한 객체를 사용해야 합니다. 그는 다음과 같이 설명합니다(6:34):

Panel panel = new(new Markup(panelInfo).Centered());

Panel panel = new(new Markup(panelInfo).Centered());

이 코드는 문자열을 마크업으로 변환하고, .Centered()를 호출한 다음, 패널에 할당합니다. 코드(7:01)를 실행하면 모든 이름이 가운데 정렬됩니다. 이 기능은 특히 새 표, 새 막대 차트 또는 기타 대화형 컨트롤을 만들고 사용 가능한 공간에 콘텐츠를 가로로 정렬하려는 경우에 유용합니다.

Tim은 또한 패널이 IR렌더링 가능하므로 테이블이나 다른 패널 안에 패널을 중첩할 수 있다고 언급합니다(7:07). 이를 통해 프롬프트, 변수 테이블 및 막대 차트를 나란히 포함하는 패널이나 다양한 작업에 대한 파일 진행 상황을 표시하는 패널과 같은 복합 디스플레이를 구성할 수 있습니다.

콘솔 애플리케이션에서 패널을 구성 요소로 활용하기

Tim은 마무리하면서(7:14) 패널은 IRenderable이라는 점을 다시 한번 강조합니다. 즉, Spectre.Console이 렌더링 가능한 객체를 예상하는 모든 위치, 즉 테이블 내부, 라이브 디스플레이 내부 또는 기타 레이아웃에 패널을 삽입할 수 있다는 뜻입니다. 이러한 유연성을 통해 패널을 대화형 프롬프트, 진행률 표시줄, 사용자 지정 색상 테마와 같은 다른 Spectre.Console 구성 요소와 결합하여 세련된 .NET 콘솔 애플리케이션을 만들 수 있습니다.

팀의 영상에서 얻을 수 있는 핵심 내용

• 스펙터 콘솔 패널은 콘솔 애플리케이션에서 콘텐츠를 강조 표시하거나, 사용자 입력을 요청하거나, 데이터를 프레임화하는 간단하면서도 강력한 방법입니다.

• 패널은 둥근 모서리, 이중 모서리, 사용자 지정 헤더 및 간격 조정을 위한 패딩 등 다양한 스타일을 지원합니다.

• 목록을 표시하고, 서식 있는 텍스트 마크업을 사용하여 사용자 지정 색상 테마를 만들고, Markup.Centered()를 사용하여 콘텐츠를 가운데 정렬할 수도 있습니다.

• 패널은 렌더링 가능한 객체이므로 테이블 안에 중첩하거나, 진행률 표시 또는 막대 차트와 결합하여 복잡한 대화형 레이아웃을 구축할 수 있습니다.

• 이 모든 기능은 NuGet 패키지를 설치하고 .NET 또는 Visual Studio 프로젝트 내에서 강력한 형식의 API를 사용하기만 하면 간단하게 이용할 수 있습니다.

Tim Corey의 비디오를 따라하면 콘솔 환경을 벗어나지 않고도 Spectre.Console 패널을 사용하여 헤더, 사용자 지정 테마 및 깔끔하게 서식이 지정된 출력을 통해 세련되고 데이터가 풍부한 콘솔 환경을 만들 수 있습니다.