위젯과 레이아웃
버튼, 입력란, 패널을 만들어 보세요.
위젯과 레이아웃은(는) CoddyKit의 무료 Learn Rust Coding 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Learn Rust Coding 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Learn Rust Coding 강의에는 총 4개의 강의가 포함되어 있습니다.
위젯 모음
egui에는 레이블, 제목, 버튼, 체크박스, 라디오 버튼, 슬라이더, 드래그 값 입력, 텍스트 편집기, 콤보 상자 등 다양한 기본 위젯이 포함되어 있습니다.
각 위젯은 Ui의 메서드이며 Response를 반환합니다. 클래스를 인스턴스화하는 대신 메서드를 순서대로 호출하여 UI를 구성합니다.
ui.heading("Settings");
ui.checkbox(&mut self.dark, "Dark mode");
ui.add(egui::Slider::new(&mut self.volume, 0.0..=1.0).text("Volume"));
ui.text_edit_singleline(&mut self.name);ui.add와 Widget 트레이트
ui.button과 같은 편의 메서드는 더 다양한 기능을 가진 위젯 구조체를 감쌉니다. 설정 가능한 위젯은 구조체를 만든 다음 ui.add에 전달합니다.
Widget 트레이트를 구현하는 모든 항목은 ui.add와 함께 사용할 수 있으며, 직접 만든 사용자 지정 위젯도 포함됩니다. 이것이 egui API의 확장 가능한 핵심입니다.
let slider = egui::Slider::new(&mut self.zoom, 0.5..=4.0)
.logarithmic(true)
.suffix("x");
let resp = ui.add(slider);
if resp.changed() { self.rerender(); }세로 및 가로 레이아웃
기본적으로 Ui는 위젯을 위에서 아래로 배치합니다. ui.horizontal(|ui| ...)를 호출하면 한 행 안에서 위젯을 왼쪽에서 오른쪽으로 배치할 수 있습니다.
이러한 레이아웃 클로저는 자유롭게 중첩할 수 있으므로 일반적인 Rust 제어 흐름만으로 열로 이루어진 행과 행으로 이루어진 열을 만들 수 있습니다.
ui.horizontal(|ui| {
ui.label("Name:");
ui.text_edit_singleline(&mut self.name);
});
ui.vertical(|ui| {
ui.button("One");
ui.button("Two");
});열
간격이 균등한 여러 열 레이아웃에는 ui.columns(n, |cols| ...)를 사용합니다. 이 호출은 열마다 하나씩 Ui 값이 들어 있는 슬라이스를 제공합니다.
각 열의 너비는 같으며 cols[i]에 위젯을 추가합니다. 나란히 배치하는 패널이나 양식에 유용합니다.
ui.columns(2, |cols| {
cols[0].label("Left column");
cols[0].button("A");
cols[1].label("Right column");
cols[1].button("B");
});패널
최상위 구조는 패널로 구성합니다. TopBottomPanel은 메뉴 막대와 상태 표시줄에, SidePanel은 탐색에, CentralPanel은 주요 콘텐츠에 사용합니다.
사이드 패널과 상단 패널을 먼저 추가하고, 남은 공간은 CentralPanel이 채우도록 합니다. 각 패널이 자신의 가장자리를 차지하므로 순서가 중요합니다.
egui::TopBottomPanel::top("bar").show(ctx, |ui| {
ui.label("Menu");
});
egui::SidePanel::left("nav").show(ctx, |ui| {
ui.label("Sidebar");
});
egui::CentralPanel::default().show(ctx, |ui| {
ui.label("Main content");
});스크롤 영역
콘텐츠가 사용 가능한 공간을 초과하면 ScrollArea로 감쌉니다. 넘치는 부분을 잘라 내고 스크롤 막대를 자동으로 추가합니다.
콘텐츠에 맞춰 줄어들지 않고 영역을 채우게 하려면 .auto_shrink([false, false])를 사용하고, 로그 화면에는 .stick_to_bottom(true)을 사용합니다.
egui::ScrollArea::vertical()
.auto_shrink([false, false])
.show(ui, |ui| {
for line in &self.log {
ui.label(line);
}
});양식용 그리드
egui::Grid는 위젯을 행과 열로 이루어진 깔끔한 표에 맞춰 정렬하므로 레이블/값 형식의 양식에 적합합니다.
셀을 왼쪽에서 오른쪽으로 추가하고 ui.end_row()를 호출해 다음 행을 시작합니다. egui는 행 전체에서 열이 자동으로 정렬되도록 유지합니다.
egui::Grid::new("form").num_columns(2).show(ui, |ui| {
ui.label("Host");
ui.text_edit_singleline(&mut self.host);
ui.end_row();
ui.label("Port");
ui.add(egui::DragValue::new(&mut self.port));
ui.end_row();
});간격과 정렬
간격 도우미를 사용하면 세밀하게 제어할 수 있습니다. ui.add_space(pixels)는 빈 공간을 삽입하고, ui.separator()는 구분선을 그립니다.
콘텐츠를 정렬하려면 ui.with_layout(Layout::right_to_left(Align::Center), |ui| ...)를 사용합니다. 이는 행의 오른쪽 가장자리로 버튼을 밀어 배치할 때 사용하는 관용적인 방식입니다.
ui.horizontal(|ui| {
ui.label("Title");
ui.with_layout(egui::Layout::right_to_left(egui::Align::Center), |ui| {
ui.button("Close");
});
});부동 창
패널 외에도 egui::Window을 사용하면 애플리케이션 내부에 이동 및 크기 조절이 가능한 부동 창을 만들 수 있습니다. 도구 모음과 대화 상자에 적합합니다.
.open(&mut self.show)를 사용해 표시 여부를 bool에 연결하면 닫기 버튼이 상태를 전환합니다.
egui::Window::new("Inspector")
.open(&mut self.show_inspector)
.resizable(true)
.show(ctx, |ui| {
ui.label("Properties...");
});스타일과 시각 요소
모든 위젯의 모양은 ctx.style()과 그 안의 Visuals가 결정합니다. ctx.set_visuals(egui::Visuals::dark()) 또는 light()로 테마를 전환할 수 있습니다.
스타일을 전역적으로 변경하여 간격, 모서리 둥글기, 색상을 조정할 수 있으므로 애플리케이션 전체에 일관된 사용자 지정 모양을 적용할 수 있습니다.
ctx.set_visuals(if self.dark {
egui::Visuals::dark()
} else {
egui::Visuals::light()
});모두 조합하기
실제 애플리케이션에서는 이러한 기본 요소를 중첩합니다. 상단 패널에 메뉴를 두고, 왼쪽 사이드 패널에 탐색 기능을 두며, 중앙 패널에는 스크롤 영역 안에 그리드를 배치합니다.
레이아웃이 중첩된 클로저와 일반적인 제어 흐름으로만 구성되므로 화면을 재구성하는 일은 트리를 수술하는 작업이 아니라 코드를 수정하는 작업입니다.
빠른 확인
어떤 패널을 마지막에 추가해야 할까요?
복습
egui는 레이블, 슬라이더, 텍스트 편집기 등을 제공합니다. 이들은 모두 Ui의 메서드이며 Response를 반환하고, 설정 가능한 위젯에는 ui.add를 사용합니다.
레이아웃은 horizontal, vertical, columns, Grid, ScrollArea와 같은 중첩 클로저로 구성합니다. 패널과 Window가 최상위 구조를 정의하고, Visuals가 스타일을 제어합니다. 다음 주제는 애플리케이션 상태를 깔끔하게 관리하는 방법입니다.
자주 묻는 질문
“위젯과 레이아웃” 강의는 무료인가요?
네 — “위젯과 레이아웃” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Learn Rust Coding 강의 전체를 잠금 해제할 수 있습니다. Learn Rust Coding 강의에는 총 4개의 강의가 포함되어 있습니다.
“위젯과 레이아웃”에서 뭘 배우나요?
버튼, 입력란, 패널을 만들어 보세요. 브라우저에서 직접 실행하는 실습 코드로 Learn Rust Coding을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Learn Rust Coding을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Learn Rust Coding은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.
“위젯과 레이아웃” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Learn Rust Coding 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Learn Rust Coding 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.
이 강의의 모든 강의
- 즉시 모드 UI 기초
- 위젯과 레이아웃
- 앱 상태 관리하기
- 데스크톱 앱 패키징하기