GTK 를 사용한 간단한 스톱워치 앱 제작 | 프로그래밍 튜토리얼

소개

이 프로젝트에서는 C 언어의 GTK 라이브러리를 사용하여 간단한 스톱워치 애플리케이션을 만들 것입니다. 이 스톱워치는 시작/일시 정지 버튼과 스톱워치 타이머를 제어하는 재설정 버튼을 갖게 됩니다. 프로젝트 파일을 설정하는 것부터 시작하여 스톱워치 애플리케이션을 실행하는 것으로 끝나는 여러 단계로 과정을 나눌 것입니다.

👀 미리보기

Stopwatch app demo

🎯 작업

이 프로젝트에서 다음을 배우게 됩니다.

GTK 라이브러리 설치 방법
프로젝트 파일 생성 방법
GTK 헤더 포함 및 변수 정의 방법
타이머 콜백 함수 생성 방법
버튼 클릭 콜백 구현 방법
main 함수 및 UI 요소 생성 방법
프로젝트 컴파일 및 실행 방법

🏆 성과

이 프로젝트를 완료하면 다음을 수행할 수 있습니다.

GTK 라이브러리를 사용하여 C 언어로 그래픽 사용자 인터페이스 (GUI) 를 생성할 수 있습니다.
GTK 에서 버튼 클릭 이벤트를 처리할 수 있습니다.
GTK 에서 타이머를 사용할 수 있습니다.
GTK 에서 레이블을 동적으로 업데이트할 수 있습니다.

프로젝트 파일 생성

먼저, 시스템에 GTK 라이브러리가 설치되어 있는지 확인하십시오. 설치되지 않은 경우 다음 명령을 사용하여 설치할 수 있습니다.

sudo apt update
sudo apt-get install libgtk-3-dev

다음으로, stopwatch.c라는 새 파일을 생성하고 선호하는 코드 편집기에서 엽니다.

cd ~/project
touch stopwatch.c

GTK 헤더 포함 및 변수 정의

이 단계에서는 필요한 GTK 헤더를 포함하고 스톱워치 애플리케이션에 대한 변수를 정의합니다.

#include <gtk/gtk.h>

static guint timer_id = 0;
static gboolean running = FALSE;
static int elapsed_seconds = 0;

static GtkWidget *label;

#include <gtk/gtk.h>: 이 헤더는 프로그램에서 GTK 함수 및 데이터 구조를 사용하기 위한 GTK 라이브러리 헤더 파일을 포함합니다.
static guint timer_id = 0;: GTK 타이머의 ID 를 저장하는 데 사용되는 변수입니다. 타이머 ID 는 다음 코드에서 타이머의 시작과 중지를 제어하는 데 사용됩니다.
static gboolean running = FALSE;: 스톱워치가 실행 중인지 추적하는 데 사용되는 부울 변수입니다. running은 스톱워치가 실행 중일 때는 TRUE이고, 스톱워치가 일시 정지되었을 때는 FALSE입니다.
static int elapsed_seconds = 0;: 경과된 초 수를 추적하는 데 사용되는 정수 변수입니다. 경과 시간을 계산하고 레이블에 스톱워치 시간을 표시하는 데 사용됩니다.
static GtkWidget *label;: GTK 태그 위젯을 저장하는 포인터입니다. 이 탭은 스톱워치의 시간을 표시합니다.

타이머 콜백 함수 생성

다음으로, 매 초마다 스톱워치 타이머를 업데이트하는 콜백 함수를 생성합니다.

static gboolean timer_callback(gpointer data) {
    if (running) {
        elapsed_seconds++;
        int minutes = elapsed_seconds / 60;
        int seconds = elapsed_seconds % 60;
        char time_str[10];
        snprintf(time_str, sizeof(time_str), "%02d:%02d", minutes, seconds);
        gtk_label_set_text(GTK_LABEL(label), time_str);
    }
    return G_SOURCE_CONTINUE;
}

elapsed_seconds++: 스톱워치가 실행 중이면 elapsed_seconds 변수의 값이 증가하여 경과된 초 수가 1 초 증가했음을 나타냅니다.
1 분은 60 초이므로, elapsed_seconds를 60 으로 나누어 minutes 수를 얻습니다. 1 분 미만의 seconds 수는 나머지 연산자 %를 사용하여 얻을 수 있습니다.
snprintf 함수를 사용하여 분과 초를 mm:ss 형식의 문자열로 서식을 지정합니다. 여기서 %02d는 분과 초에 대해 두 자릿수를 의미하며, 두 자릿수 미만은 선행 0 으로 채워집니다.
gtk_label_set_text는 방금 생성된 시간 문자열을 레이블 부분의 텍스트로 설정하여 스톱워치 표시를 업데이트합니다.
return G_SOURCE_CONTINUE는 콜백이 완료된 후 GTK 타이머가 타이머를 계속 실행하도록 지시하여 다음 타이머 이벤트를 다시 트리거합니다. 콜백이 G_SOURCE_REMOVE를 반환하면 타이머가 중지됩니다.

요약하면, timer_callback 함수는 스톱워치가 실행되는 동안 경과된 초 수를 증가시키고, 분과 초를 문자열로 서식을 지정한 다음, 이를 태그 위젯의 텍스트로 설정하여 스톱워치 시간을 동적으로 업데이트하는 역할을 합니다.

버튼 클릭 콜백 구현

시작/일시 정지 및 재설정 버튼에 대한 콜백 함수가 필요합니다.

static void start_stop_button_clicked(GtkButton *button, gpointer data) {
    running = !running;
    if (running) {
        gtk_button_set_label(button, "Pause");
    } else {
        gtk_button_set_label(button, "Start");
    }
}

static void reset_button_clicked(GtkButton *button, gpointer data) {
    elapsed_seconds = 0;
    gtk_label_set_text(GTK_LABEL(label), "00:00");
}

start_stop_button_clicked는 스톱워치 상태를 실행 중과 일시 정지 상태 사이에서 토글합니다.
reset_button_clicked는 스톱워치 타이머를 재설정합니다.

메인 함수 및 UI 요소 생성

이제 main 함수를 생성하고 사용자 인터페이스를 설정해 보겠습니다.

int main(int argc, char *argv[]) {
    GtkWidget *window;
    GtkWidget *grid;
    GtkWidget *start_stop_button;
    GtkWidget *reset_button;

    gtk_init(&argc, &argv); // GTK 초기화

    window = gtk_window_new(GTK_WINDOW_TOPLEVEL);
    gtk_window_set_title(GTK_WINDOW(window), "Stopwatch"); // 윈도우 제목 설정
    gtk_window_set_default_size(GTK_WINDOW(window), 200, 200); // 기본 윈도우 크기 설정
    g_signal_connect(G_OBJECT(window), "destroy", G_CALLBACK(gtk_main_quit), NULL); // 윈도우 닫기 이벤트 연결

    grid = gtk_grid_new(); // 그리드 레이아웃 생성
    gtk_container_add(GTK_CONTAINER(window), grid); // 윈도우에 그리드 추가

    label = gtk_label_new("00:00"); // 처음에 "00:00"을 표시하는 GTK 레이블 생성
    gtk_widget_set_hexpand(label, TRUE); // 레이블이 가로로 확장되도록 허용
    gtk_widget_set_vexpand(label, TRUE); // 레이블이 세로로 확장되도록 허용
    gtk_grid_attach(GTK_GRID(grid), label, 0, 0, 1, 1); // 그리드에 레이블 추가

    start_stop_button = gtk_button_new_with_label("Start"); // "Start" 레이블이 있는 버튼 생성
    gtk_widget_set_hexpand(start_stop_button, TRUE); // 버튼이 가로로 확장되도록 허용
    gtk_widget_set_vexpand(start_stop_button, TRUE); // 버튼이 세로로 확장되도록 허용
    g_signal_connect(G_OBJECT(start_stop_button), "clicked", G_CALLBACK(start_stop_button_clicked), NULL); // 버튼 클릭 이벤트 연결
    gtk_grid_attach(GTK_GRID(grid), start_stop_button, 0, 1, 1, 1); // 그리드에 버튼 추가

    reset_button = gtk_button_new_with_label("Reset"); // "Reset" 레이블이 있는 버튼 생성
    gtk_widget_set_hexpand(reset_button, TRUE); // 버튼이 가로로 확장되도록 허용
    gtk_widget_set_vexpand(reset_button, TRUE); // 버튼이 세로로 확장되도록 허용
    g_signal_connect(G_OBJECT(reset_button), "clicked", G_CALLBACK(reset_button_clicked), NULL); // 버튼 클릭 이벤트 연결
    gtk_grid_attach(GTK_GRID(grid), reset_button, 0, 2, 1, 1); // 그리드에 버튼 추가

    gtk_widget_show_all(window); // 윈도우와 모든 자식 위젯 표시

    timer_id = g_timeout_add(1000, timer_callback, NULL); // 1000ms (1 초) 마다 트리거되고 timer_callback 을 호출하는 타이머 생성

    gtk_main(); // GTK 메인 이벤트 루프 시작

    return 0;
}

main 함수는 GTK 윈도우, 레이블, 버튼 및 해당 클릭 이벤트 핸들러를 설정합니다.

프로젝트 컴파일 및 실행

이제 스톱워치 애플리케이션을 만들었으니, 컴파일하고 실행해 보겠습니다.

터미널을 열고 프로젝트 디렉토리로 이동합니다.

cd ~/project

다음 명령을 사용하여 코드를 컴파일합니다.

gcc -o stopwatch stopwatch.c $(pkg-config --cflags --libs gtk+-3.0)

애플리케이션을 실행합니다.

./stopwatch

스톱워치가 있는 창이 표시됩니다. 타이머를 시작하려면 Start 버튼을 클릭하고, 일시 정지하려면 Pause를 클릭하고, 타이머를 재설정하려면 Reset을 클릭하십시오.

Stopwatch app demonstration

요약

이 프로젝트에서는 C 언어의 GTK 라이브러리를 사용하여 간단한 스톱워치 애플리케이션을 만들었습니다. 프로젝트 파일을 설정하고, 변수를 정의하고, 타이머 콜백 함수를 구현했으며, 버튼 클릭 콜백을 생성했습니다. 이 애플리케이션을 통해 스톱워치 타이머를 시작, 일시 정지 및 재설정할 수 있으며, 코드를 컴파일하고 결과 프로그램을 실행하여 실행할 수 있습니다.

GTK 를 사용하여 간단한 스톱워치 앱 만들기

소개