Creamel

WinAPI를 이용한 DJMAX 모작 - 0 [프롤로그]

Creamel — Thu, 7 May 2026 01:15:43 +0900

DJMAX를 모르는 사람들을 위해
DJMAX는 로키 스튜디오에서 개발한 건반형 4키 리듬게임이다
![https://www.youtube.com/watch?v=OAV_Uo4ZhFk](https://velog.velcdn.com/images/creamel/post/53d470cf-f76d-4440-8e39-166802f796f1/image.png)https://www.youtube.com/watch?v=OAV_Uo4ZhFk

Lerp나 비쥬얼 관련된 프로그래밍이 어려운 Windows API 특성 상 DJMAX의 기본적인 기능을 구현해볼 예정이다

가장 먼저 사용할 오디오 엔진을 골랐다
다양한 엔진을 찾아보던 중 Fmod라는 엔진을 이용하기로 결정했다
왜냐하면 DSP 관련 기능이 잘 되어있고 예전에 몇번 유니티에서 사용해본적이 있어 Fmod를 사용하기로 했다

위 내용을 기반으로 개발했던 내용을 정리해보려 한다

FAST API와 Uvicorn이 무엇일까?

Creamel — Wed, 6 May 2026 23:08:42 +0900

API가 무엇인가요?

API는 필요한 데이터나 기능을 다른 프로그램, 서버, 서비스에서 가져와 사용할 수 있게 해주는 연결 방식입니다.

예를 들어 날씨 앱이 날씨 정보를 가져오거나, 로그인 기능이 서버와 통신하는 것도 API를 통해 이루어집니다.

파이썬이 무엇인가요?

파이썬은 웹 애플리케이션, 소프트웨어 개발, 데이터 분석, 머신러닝 등 다양한 분야에서 사용되는 프로그래밍 언어입니다.

문법이 비교적 간단해서 입문자가 배우기 좋고, 사용할 수 있는 라이브러리가 많아 실제 개발에서도 많이 활용됩니다.

특히 인공지능 분야가 성장하면서 데이터 처리와 머신러닝 개발에 자주 사용되며, 지금도 높은 인기를 유지하고 있습니다.

FastAPI가 무엇인가요?

FastAPI는 파이썬으로 API 서버를 빠르고 간단하게 만들 수 있는 웹 프레임워크입니다.

프레임워크란 개발에 필요한 규칙과 기능을 미리 정리해둔 도구라고 볼 수 있습니다. FastAPI를 사용하면 API 요청을 받고, 데이터를 처리하고, 응답을 반환하는 구조를 비교적 쉽게 만들 수 있습니다.

FastAPI는 Django, Flask와 함께 많이 사용되는 파이썬 웹 프레임워크 중 하나이며, 속도가 빠르고 문서 자동 생성 기능이 편리하다는 장점이 있습니다.

FastAPI는 파이썬 3.6 이상부터 사용할 수 있습니다.

FastAPI 실습을 위한 설치

실습을 위해 먼저 파이썬과 Visual Studio Code를 설치합니다.

Python 설치 방법

위 링크의 파이썬 웹사이트에 접속합니다.

Download 버튼을 클릭합니다.

다운로드 페이지에서 Python 설치 파일을 내려받습니다.

설치 화면에서 Add Python.exe to PATH를 체크한 뒤 Install Now를 눌러 설치합니다.

Visual Studio Code 설치 방법

Visual Studio Code 웹사이트에 접속한 뒤 Download for Windows를 클릭하고, 설치 파일을 실행하여 설치합니다.

FastAPI 설치

CMD 또는 Visual Studio Code 터미널을 실행한 뒤 아래 명령어를 입력합니다.

pip install fastapi

pip는 파이썬 라이브러리를 설치하고 관리해주는 도구입니다.

Uvicorn이 무엇인가요?

Uvicorn은 FastAPI 애플리케이션을 실제 웹 서버처럼 실행해주는 ASGI 서버입니다.

FastAPI는 API 요청을 처리하는 코드를 작성할 수 있게 해주지만, 그 코드가 HTTP 요청을 직접 받아 실행되도록 하려면 서버 역할을 하는 프로그램이 필요합니다. 이때 사용하는 것이 Uvicorn입니다.

흐름을 간단히 정리하면 다음과 같습니다.

웹브라우저 또는 Postman → Uvicorn → FastAPI 코드 실행 → 응답 반환

Uvicorn을 사용하는 이유

1. ASGI 서버를 사용할 수 있음

ASGI는 Asynchronous Server Gateway Interface의 약자입니다.

쉽게 말해, 비동기 방식으로 웹 요청을 처리할 수 있게 해주는 서버 인터페이스입니다.

비동기란 하나의 작업이 끝날 때까지 무조건 기다리지 않고, 기다리는 동안 다른 작업도 처리할 수 있는 방식입니다.

예를 들어 API 요청을 기다리거나 데이터베이스 응답을 기다리는 시간 동안 서버가 멈춰 있는 것이 아니라, 다른 요청도 함께 처리할 수 있습니다.

즉, API 요청이 들어오기를 기다리는 동안에도 다른 코드를 실행할 수 있기 때문에 서버 자원을 더 효율적으로 사용할 수 있습니다.

2. FastAPI 애플리케이션을 쉽게 실행할 수 있음

FastAPI로 작성한 코드는 그 자체만으로 웹에서 바로 접근할 수 있는 상태가 아닙니다.

Uvicorn을 사용하면 FastAPI 애플리케이션을 로컬 서버에서 실행할 수 있고, 브라우저나 Postman을 통해 직접 API를 호출해볼 수 있습니다.

Uvicorn 설치

FastAPI를 설치했던 방식과 동일하게 아래 명령어를 입력합니다.

pip install uvicorn

실습을 시작하기 전에

API를 만들고 나면 제대로 동작하는지 테스트할 도구가 필요합니다. 여기서는 Postman을 사용해 API 요청을 보내보겠습니다.

Postman이 무엇인가요?

Postman은 API를 직접 호출하고 테스트할 수 있는 프로그램입니다.

웹브라우저에서도 간단한 GET 요청은 테스트할 수 있지만, Postman을 사용하면 GET, POST 같은 다양한 요청 방식과 Header, Body 같은 추가 정보도 함께 테스트할 수 있습니다.

Postman은 HTTP, HTTPS, WebSocket, Socket.IO 등 다양한 API 형식을 지원합니다.

진짜 실습

아래 코드를 파이썬 파일에 작성합니다.

from fastapi import FastAPI
from datetime import datetime
import random

api = FastAPI()


@api.get('/random_number')
def random_num():
    random_number = random.randint(1, 10)
    return random_number


@api.get('/Date')
def now_date():
    now = datetime.now()
    return now.date()


@api.get('/Time')
def now_time():
    now = datetime.now()
    return now.time()

위 코드의 동작은 다음과 같습니다.

/random_number 경로로 GET 요청을 보내면 1부터 10 사이의 랜덤 숫자를 반환합니다.
/Date 경로로 GET 요청을 보내면 현재 날짜를 반환합니다.
/Time 경로로 GET 요청을 보내면 현재 시간을 반환합니다.

Uvicorn으로 FastAPI 파이썬 파일 실행

Visual Studio Code 터미널에서 Uvicorn 실행 명령어를 입력하면 FastAPI 서버를 실행할 수 있습니다.

예를 들어 파이썬 파일 이름이 main.py라면 아래처럼 실행합니다.

uvicorn main:api --reload

여기서 main은 파이썬 파일 이름이고, api는 코드에서 만든 FastAPI 객체 이름입니다.

--reload 옵션을 붙이면 코드를 수정했을 때 서버가 자동으로 다시 실행됩니다.

웹브라우저에서 API 호출해보기

Uvicorn을 실행하면 터미널에 접속 주소가 표시됩니다.

기본 주소는 보통 아래와 같습니다.

http://127.0.0.1:8000

우리가 만든 API 경로를 함께 붙이면 브라우저에서 직접 API를 호출할 수 있습니다.

예를 들어 랜덤 숫자를 불러오려면 아래 주소로 접속합니다.

http://127.0.0.1:8000/random_number

Postman에서 API 호출해보기

Postman을 실행한 뒤 API 호출을 위한 새 요청을 만들어줍니다.

우리가 만든 API는 HTTP 서버로 동작하므로 HTTP를 선택합니다.

요청 방식이 GET으로 되어 있는지 확인한 뒤, 브라우저에서 입력했던 주소와 동일하게 API 주소를 작성합니다.

주소를 입력한 뒤 Send 버튼을 누르면 요청이 전송됩니다.

Postman에서는 단순히 API를 호출하는 것뿐만 아니라 Header, Body 같은 추가 정보도 함께 보낼 수 있습니다.

이 기능을 활용하면 로그인 요청, 데이터 전송 요청, 서버 응답 확인 등 다양한 API 테스트를 진행할 수 있습니다.

유니티 씬 머지 충돌 해결 도구 Unity merge conflicts

Creamel — Wed, 6 May 2026 23:05:55 +0900

게임잼 기간 중 Unity 씬 파일을 병합하는 과정에서 머지 충돌 문제가 발생했다.

Unity에서 씬을 열려고 하자 아래와 같은 오류가 출력되었다.

The file '씬 경로' seems to have merge conflicts. Please open it in a text editor and fix the merge.

처음 보는 오류였고, 씬 파일이 열리지 않아 꽤 당황스러웠다.

충돌이 발생한 씬 파일을 텍스트 에디터로 열어보면 다음과 같은 충돌 구간 표시가 나타난다.

<<<<<<< HEAD
현재 브랜치의 내용
=======
병합하려는 브랜치의 내용
>>>>>>> incoming

원하는 오브젝트나 데이터를 살리려면 해당 구간을 직접 확인한 뒤, 필요한 부분만 남기고 나머지는 지워야 한다.

하지만 Unity 씬 파일은 YAML 형식으로 구성되어 있어 내용이 길고 복잡하다.
특히 충돌 구간이 많을 경우, 수작업으로 하나씩 확인하고 수정하는 과정이 매우 번거로웠다.

작은 실수 하나만으로도 씬 파일이 깨지거나, Unity에서 정상적으로 열리지 않을 위험이 있었다.

문제 해결을 위해 만든 GUI 충돌 해결 도구

이 문제를 조금이라도 편하게 해결하기 위해 Python Tkinter를 이용한 간단한 GUI 충돌 해결 도구를 제작했다.

도구 다운로드 및 사용법 보기
https://drive.google.com/file/d/1bLDuoQ_FJ-jn3e6ftAqql4FZkgvDydV6/view?usp=sharing

이 도구는 충돌이 발생한 파일을 불러온 뒤, 각 충돌 블록을 별도로 보여준다.
사용자는 각 충돌 구간마다 다음 세 가지 방식 중 하나를 선택할 수 있다.

HEAD 버전 유지
INCOMING 버전 유지
두 버전 모두 병합

텍스트를 직접 수정하지 않아도 라디오 버튼을 클릭하는 방식으로 충돌 해결 방법을 선택할 수 있다.
이후 선택한 방식에 따라 충돌 표시가 제거된 결과물을 저장할 수 있다.

프로그램을 실행한 뒤 충돌이 발생한 씬 파일을 선택하면 위와 같은 창이 표시된다.

각 충돌 구간에서 HEAD 버전을 살릴지, INCOMING 버전을 살릴지 선택할 수 있다.
두 내용을 모두 남기고 싶다면 BOTH 옵션을 선택하면 된다.

모든 충돌 구간에 대해 선택을 완료한 뒤, 선택한 방식대로 저장하면 충돌 표시가 제거된 씬 파일이 저장된다.

UnityYAMLMerge와의 차이점

UnityYAMLMerge는 Unity에서 제공하는 공식 자동 병합 도구이다.
씬 파일의 YAML 구조를 분석하여 자동으로 병합할 수 있는 부분을 처리해준다.

다만 모든 충돌을 완벽하게 해결해주는 것은 아니기 때문에, 자동 병합이 어려운 구간은 사용자가 직접 확인해야 한다.

이 도구는 UnityYAMLMerge를 대체하기 위한 도구라기보다는, 자동 병합 이후 남은 충돌을 사용자가 더 쉽게 수동으로 해결할 수 있도록 만든 보조 도구이다.

필요하다면 UnityYAMLMerge로 먼저 자동 병합을 시도한 뒤, 해결되지 않은 충돌 구간만 이 도구를 이용해 정리하는 방식으로 사용할 수 있다.

스파르타 코딩클럽 나홀로 코딩 패키지 2주차

Creamel — Mon, 13 Sep 2021 01:00:28 +0900

2일치꺼 같은데 하루에 하니깐 3시간이면 끝나네요! 간단하게 배울수 있을꺼같습니다

새로 배운것 정리

og = 다른사람들에게 카톡으로 보낼시 뜨는 이미지와 텍스트

link rel = 컴퓨터 기준으로 타이틀 옆에 뜨는 아이콘

제일 힘들었던 부분은

@media screen and (max-width: 760px)

이것이였다

이유는 저걸 실수로 Style 안에 안넣어서 생긴 오류때문이였다.. 스택에 질문을 했다가 바로 찾아서 지웠다

2주차 후기

옛날에 스파르타 코딩클럽에서 공부했었다 그걸 다시 복습한다는 생각으로 하니까 좋았다

재밌었고 관리자 분들.. 보고계시면 또 이벤트 부탁드려요

<!DOCTYPE html>

<head>

<title>2021년 크리스마스~!</title>

content="https://www.christmastreeassociation.org/wp-content/uploads/2016/06/multiple-christmas-trees-in-one-household-800x400.jpg">

<style>

* {

font-family: 'Poor Story', cursive;

}

body {

background-color: #9b070f;

}

.envelope {

background-image: url(https://pngimg.com/uploads/envelope/envelope_PNG18366.png);

background-size: cover;

width: 200px;

height: 200px;

margin: 200px auto 0px auto;

cursor: pointer;

}

.envelope-msg {

color: white;

text-align: center;

}

.letter-close {

display: block;

}

.letter-open {

display: none;

}

.rtan {

background-color: white;

background-image: url('https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/xmas/Webp.net-gifmaker+(2).gif');

background-size: cover;

width: 200px;

height: 200px;

margin: 100px auto 0px auto;

border-radius: 200px;

border: 5px solid white;

box-shadow: 0px 0px 10px 0px white;

}

h1 {

color: white;

text-align: center;

margin-top: 30px;

margin-bottom: 30px;

}

.message-box {

background-color: ivory;

color: brown;

box-shadow: 0px 0px 20px 0px white;

width: 400px;

line-height: 30px;

font-size: 20px;

margin: auto;

padding: 30px;

}

.from {

text-align: right;

margin: 0px;

}

@media screen and (max-width: 760px) {

.messagebox {

width: 300px;

padding: 20px;

}

.rtan {

width: 150px;

height: 150px;

margin: 70px auto 0px auto;

}

h1 {

font-size: 28px;

}

.envelope {

margin: 150px auto 0px auto

}

</style>

function open_letter() {

document.getElementsByClassName("letter-close")[0].style.display = 'none'

document.getElementsByClassName("letter-open")[0].style.display = 'block'

}

function go_rtan() {

alert('앗 어떻게 찾았지!')

window.location.href = 'https://spartacodingclub.kr/?f_name=%EC%9D%B4%ED%98%84%EC%9A%B0&f_uid=601bbfc0ec0bc5ad3fb83450'

}

</script>

</head>

<body>

</div>

<h1>2021년 수고 많으셨습니다!</h1>

안녕하세요!. <br />

올해 코로나 때문에 모두 바빴는데 <br />

내년에는 없어지면 좋겠네요 <br />

내년에는 다같이 힘내서 이겨냅시다! <br />

모두들 방역 꼭 잘 지키세요! <br />

</div>

<h1>앞으로도 코로나를 잘 이겨냅시다!</h1>

</div>

</body>

</html>

스파르타 코딩클럽 나홀로 코딩 패키지 1주차

Creamel — Sun, 12 Sep 2021 23:42:03 +0900

처음에 시작할때 페이스북에서 구경하다가 시작을 했다

<h1> = 큰 글씨 검색엔진에서 주로 검색됨<h2> = 소제목<h3> = h3~h6 까지 있다 자주 사용하진 않지만 각자의 특징이 있다<span> = 글자를 꾸밀때 사용한다<a> = 하이퍼링크를 사용한다<img> = 이미지를 불러온다<input> = 글을 적어서 값을 받는곳이다<button> = 버튼을 만든다<textarea> = 진짜 뭔지 모르겠다..

1일차엔 로그인을 만들었다 옛날에 했었는데 까먹어서 기억이 안났던border-radius 배워서 정말 좋았다디자인도 깔끔했다

<!DOCTYPE html>

<head>

<title>로그인페이지</title>

<style>

font-family: 'Jua', sans-serif;

}

.mytitle {

width: 300px;

height: 200px;

color: white;

text-align: center;

background-image: url(https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg);

background-size: cover;

background-position: center;

border-radius: 10px;

padding-top: 20px;

}

.wrap {

width: 300px;

margin: auto;

}

.mybtn{

width:300px;

height: 50px;

background-color: brown;

border-radius: 10px;

}

</style>

</head>

<body>

<h5>아이디, 비밀번호를 입력해 주세요</h5>

</div>

<button class="mybtn">로그인하기</button>

</DIV>

</body>

</html>