VS2022 ImGui 최소 데모 (환경 구축 가이드) - ImGui 튜토리얼

사전 준비사항

VS2022 설치 후 C++ 데스크톱 개발 관련 구성 요소 체크하기
ImGui 소스 코드 다운로드, ocornut/imgui: Dear ImGui: Bloat-free Graphical User interface for C++ with minimal dependencies 에서 릴리즈 버전 받기
GLFW 바이너리 패키지 준비. ImGui가 창 렌더링 시 이 라이브러리를 의존함

윈도우 64비트 환경에서 실행할 것이므로 64비트 windows binaries만 다운로드하면 됩니다.

프로젝트 생성하기

VS2022 실행 후 「빈 C++ 프로젝트」 만들기

프로젝트 이름 지정, 예시 ImGuiDemo

프로젝트 우클릭 → 속성 → 구성을 Release x64 로 변경

파일 가져오기

위에서 다운받은 두 압축 파일 압축 풀고 폴더명을 imgui, glfw로 바꾼 뒤 프로젝트 루트 폴더에 복사합니다.

두 폴더 안에 하위 폴더를 겹쳐 만들지 말고 바로 소스 파일이 보이도록 구성하세요.

├─ imgui/
│  ├─ backends/
│  ├─ imgui.h、imgui.cpp ...
├─ glfw/
│  ├─ include/GLFW/
│  ├─ lib-vc2022/Code language: PHP (php)

위와 같은 구조로 맞춰주시면 됩니다.

추가 설정

추가 포함 디렉터리

프로젝트 우클릭 후 속성 창 열기

왼쪽 메뉴에서 VC++ 디렉터리를 클릭

일반(General) 탭으로 이동

포함 디렉터리(Include Directories) 오른쪽 편집(edit) 버튼 클릭

아래 세 줄 경로를 추가합니다

$(SolutionDir)imgui
$(SolutionDir)imgui\backends
$(SolutionDir)glfw\includeCode language: JavaScript (javascript)

라이브러리 디렉터리 Library Directories

같은 설정 창에서 Library Directories 를 찾고 GLFW lib 폴더 경로를 입력

$(SolutionDir)glfw\lib-vc2022 라인 추가

링커 lib 의존 파일

링커(Linker) → 입력(Input) → 추가 의존 파일(Additional Dependencies)

glfw3.lib
opengl32.lib
user32.lib
gdi32.lib
shell32.libCode language: CSS (css)

소스 코드 프로젝트에 추가하기

소스 파일 폴더 우클릭 → 기존 항목 추가 후 아래 파일들을 선택

imgui/imgui.cpp
imgui/imgui_draw.cpp
imgui/imgui_widgets.cpp
imgui/imgui_tables.cpp
imgui/imgui_demo.cpp
imgui/backends/imgui_impl_glfw.cpp
imgui/backends/imgui_impl_opengl3.cpp

프로그램 진입점 생성

main.cpp 새로 만들기

#include <GLFW/glfw3.h>
#include "imgui.h"
#include "backends/imgui_impl_glfw.h"
#include "backends/imgui_impl_opengl3.h"
#include <cstdio>

int main()
{
    // Initialize GLFW
    if (!glfwInit())
    {
        printf("GLFW initialization failed\n");
        return -1;
    }

    // OpenGL 3.3
    const char* glsl_version = "#version 330";
    glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 3);
    glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 3);
    glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_CORE_PROFILE);

    // Create window
    GLFWwindow* window = glfwCreateWindow(1000, 600, "ImGui Minimal Demo (VS2022)", nullptr, nullptr);
    if (!window)
    {
        glfwTerminate();
        return -1;
    }
    glfwMakeContextCurrent(window);
    glfwSwapInterval(1); // VSync enable

    // Initialize ImGui
    IMGUI_CHECKVERSION();
    ImGui::CreateContext();
    ImGuiIO& io = ImGui::GetIO();
    ImGui::StyleColorsDark();

    // Bind GLFW + OpenGL3 backend
    ImGui_ImplGlfw_InitForOpenGL(window, true);
    ImGui_ImplOpenGL3_Init(glsl_version);

    // UI state variables
    float slider_value = 0.5f;
    int click_count = 0;
    bool show_full_demo = false;

    // Main render loop
    while (!glfwWindowShouldClose(window))
    {
        glfwPollEvents();

        // Start new ImGui frame
        ImGui_ImplOpenGL3_NewFrame();
        ImGui_ImplGlfw_NewFrame();
        ImGui::NewFrame();

        // Draw custom UI panel
        ImGui::Begin("Control Panel");
        ImGui::Text("Hello ImGui + VS2022");
        ImGui::SliderFloat("Slider Value", &slider_value, 0.f, 1.f);

        if (ImGui::Button("Click to Count"))
            click_count++;
        ImGui::SameLine();
        ImGui::Text("Click Count: %d", click_count);

        ImGui::Checkbox("Show Full ImGui Demo Window", &show_full_demo);
        ImGui::End();

        if (show_full_demo)
            ImGui::ShowDemoWindow(&show_full_demo);

        // Render ImGui draw data
        ImGui::Render();
        int width, height;
        glfwGetFramebufferSize(window, &width, &height);
        glViewport(0, 0, width, height);
        glClearColor(0.12f, 0.12f, 0.12f, 1.f);
        glClear(GL_COLOR_BUFFER_BIT);
        ImGui_ImplOpenGL3_RenderDrawData(ImGui::GetDrawData());

        glfwSwapBuffers(window);
    }

    // Cleanup resources
    ImGui_ImplOpenGL3_Shutdown();
    ImGui_ImplGlfw_Shutdown();
    ImGui::DestroyContext();
    glfwDestroyWindow(window);
    glfwTerminate();
    return 0;
}Code language: PHP (php)

위 이미지처럼 소스에 빨간 물결 밑줄이 잔뜩 생긴다면 추가 포함 디렉터리 경로 설정이 잘못된 것입니다.

예를 들어 본인 경로가 D:\Demos\ImGuiDemo\ImGuiDemo 일 경우 imgui, glfw 폴더가 안쪽 ImGuiDemo 하위에 위치하는데 초기 설정에서 이 계층을 반영하지 않아 오류가 발생합니다. VS 프로젝트 생성 시 이중 폴더가 생성되니 본인 환경에 맞춰 수정하세요.

포함 경로 수정하기

$(SolutionDir)ImGuiDemo\imgui
$(SolutionDir)ImGuiDemo\imgui\backends
$(SolutionDir)ImGuiDemo\glfw\includeCode language: JavaScript (javascript)

설정을 저장하면 소스 상 빨간 밑줄이 사라집니다.

상단 툴바 실행 버튼 클릭

cannot open file ‘glfw3.lib’ 오류가 뜰 경우

위와 동일한 원인으로 라이브러리 디렉터리 경로에 ImGuiDemo\ 계층이 누락되었으니 똑같이 설정을 수정해야 합니다.

라이브러리 경로도 함께 변경

$(SolutionDir)ImGuiDemo\glfw\lib-vc2022Code language: JavaScript (javascript)

다시 빌드 후 실행

이렇게 첫 예제가 정상 실행됩니다. 의존 라이브러리 다운로드부터 구동 확인까지 전 과정을 다루었으니 직접 따라 해보세요. 후속 글에서 ImGui 활용 팁을 더 다루겠습니다.

Next: ImGui 예제 분석