키움 OpenAPI로 종목 스캐너 만들기 2 — 3 열 레이아웃

안녕하세요! 지난 1편에서 빈 창 하나를 띄웠죠. 오늘은 그 빈 화면에 건물의 골조를 세웁니다. 스캐너 화면은 정보가 많아서, 처음부터 영역을 딱딱 나눠두지 않으면 나중에 컨트롤이 뒤엉켜 손쓰기 어려워져요. 그래서 먼저 3열 레이아웃 뼈대부터 잡고 갑니다!

왜 TableLayoutPanel인가

버튼이나 패널을 좌표(Location)로 일일이 찍어 배치하면, 창 크기가 바뀌는 순간 다 어긋납니다. TableLayoutPanel은 화면을 표(행·열)처럼 나눠주고, 각 칸의 비율을 정해두면 창이 커지거나 줄어도 알아서 늘었다 줄었다 해줘요. 우리 화면은 크게 좌·중·우 3열이니, 열 3개짜리 표 하나로 시작합니다.

코드 — 3열로 화면 가르기

좌측은 고정 280px, 우측은 고정 330px, 가운데는 남는 공간을 100% 차지하게 했습니다. 이러면 창을 키워도 가운데 종목 표만 시원하게 넓어집니다.

private void BuildUi()
{
    var root = new TableLayoutPanel
    {
        Dock = DockStyle.Fill,
        ColumnCount = 3,
        Padding = new Padding(10),
        BackColor = ScannerTheme.FormBack
    };
    root.ColumnStyles.Add(new ColumnStyle(SizeType.Absolute, 280)); // 좌
    root.ColumnStyles.Add(new ColumnStyle(SizeType.Percent, 100));  // 중
    root.ColumnStyles.Add(new ColumnStyle(SizeType.Absolute, 330)); // 우

    root.Controls.Add(BuildLeftColumn(),   0, 0);
    root.Controls.Add(BuildCenterColumn(), 1, 0);
    root.Controls.Add(BuildRightColumn(),  2, 0);

    Controls.Add(root);
}

참고로 색은 ScannerTheme라는 클래스에 모아뒀어요. 이렇게 한곳에 두면 나중에 톤을 바꿀 때 여기 한 군데만 고치면 됩니다.

제목 달린 카드로 묶기

각 영역은 "제목 + 테두리"가 있는 카드 형태로 만들 거예요. 똑같은 모양을 매번 새로 짜면 번거로우니, MakeCard 헬퍼 하나로 찍어냅니다. 패널을 두 겹으로 겹쳐서 바깥 1px을 테두리 색으로 칠하는 게 포인트예요.

private Control MakeCard(string title, Control content, bool fillContent)
{
    // 바깥 패널(테두리) + 안쪽 패널(흰 배경)
    var card  = new Panel { Dock = DockStyle.Fill, Margin = new Padding(5),
                            Padding = new Padding(1), BackColor = ScannerTheme.CardBorder };
    var inner = new Panel { Dock = DockStyle.Fill, BackColor = ScannerTheme.CardBack,
                            Padding = new Padding(10, 8, 10, 10) };

    var header = new Label
    {
        Text = title, Dock = DockStyle.Top, Height = 26,
        Font = ScannerTheme.TitleBold, ForeColor = ScannerTheme.TextDark,
        TextAlign = ContentAlignment.MiddleLeft
    };

    content.Dock = fillContent ? DockStyle.Fill : DockStyle.Top;
    inner.Controls.Add(content);   // 본문 먼저
    inner.Controls.Add(header);    // 제목 나중 → 위쪽 차지
    card.Controls.Add(inner);
    return card;
}

핵심 — Controls.Add 순서가 중요해요

WinForms의 Dock 배치는 나중에 추가된 컨트롤이 먼저 자리를 차지합니다. 그래서 위 코드에서 본문(content)을 먼저 넣고 제목(header)을 나중에 넣었어요. 그래야 제목이 위쪽 26px을 먼저 가져가고, 본문이 그 아래 남는 공간을 채웁니다. 순서를 바꾸면 제목이 본문에 가려지니 주의하세요!

마무리하며
이제 실행하면 좌·중·우로 깔끔하게 나뉜 빈 카드들이 보입니다. 아직 내용은 없지만, 앞으로 채울 자리가 전부 잡힌 셈이에요. 다음 편에서는 화면 맨 위 상태바(시작·중지 버튼, 코스피·코스닥 지수, 실시간 시계)를 올려 진짜 프로그램 같은 느낌을 내보겠습니다! 완성된 프로젝트는 아래에서 받아 바로 실행해 보세요.

 

StockRader_02.zip

0.01MB