CELLAXON

React 프로젝트를 내부망에 가져가서 사용하려면?

cellaxon — Mon, 3 Nov 2025 11:19:44 +0900

내부망 환경에서 일을 해야 하는 상황에 놓였습니다.

이런 일이 아니었다면 이런 포스팅을 할 일이 없었겠지요.

상황에 처해봐야 문제를 해결할 방법을 찾게 되니 말입니다.

가장 간단한 방법을 정리해서 올려둡니다.

pnpm을 사용하고 있다는 조건입니다.

1. 프로젝트 루트 경로에 '.npmrc' 파일을 생성합니다.

2. 아래의 내용을 붙여넣습니다.

# .npmrc 파일
virtual-store-dir=.pnpm
store-dir=./.pnpm-store
modules-dir=./node_modules

3. 외부망 환경에서 아래의 명령을 실행합니다.

pnpm install

4. 프로젝트 폴더를 통째로 압축합니다. ('.pnpm', '.pnpm-store', 'node_modules' 등 모든 파일과 폴더를 포함해서 압축)

5. 내부망으로 가져가서 압축을 풀고 아래의 명령을 실행합니다.

pnpm install -offline

여기까지입니다.

나중에 또 다시 찾게 될 일이 있을 것 같아 기록으로 남겨둡니다.

사실 빌드한 결과물만 반입해도 되지만

사소한 수정을 할 때마다 반입 신청을 하기에는 번거로워서

간단한 수정은 내부망 환경 안에서 처리할 수 있도록 방법을 찾아보았습니다.

Solid 프로젝트 시작하기

cellaxon — Fri, 12 Sep 2025 11:15:37 +0900

개인적으로는 러스트로 프론트엔드까지 해야한다는 입장이지만

시장 상황은 오로지 리액트만 찾는 것이 현실입니다.

저도 현실 순응을 위해 리액트 프로젝트를 오랜만에 시작하려 했더니

새로운 것들이 많이 생겼더라고요.

일단 요새 리액트 프로젝트 시작은 Vite 아니면 Next로 하고 있는 것 같습니다.

Svelte를 계속 써왔기 때문에 Vite로 리액트 프로젝트를 만들 수 있는 건 알고 있었는데

이쪽이 대세가 될 줄은 몰랐네요.

새로운 프로젝트를 시작해보려고 아래의 명령을 실행했습니다.

npm create vite@latest

프레임워크 선택 화면부터 뭐가 많네요.

아는 것 반 모르는 것 반이라 물어봤습니다.

각 웹 프레임워크에 대한 설명과 점유율, 성능, 추세를 요약하면 다음과 같습니다.

Vanilla: 순수 자바스크립트로 프레임워크 없이 직접 개발하는 방식입니다. 가장 가볍고 성능이 뛰어나지만 규모가 커질수록 관리가 어려워집니다. 최근에는 코드 단순함과 빠른 초기 로딩 때문에 작고 빠른 앱에 다시 주목받는 추세입니다.

Vue: 가볍고 배우기 쉽고 성능이 좋은 프레임워크로, 컴포넌트 기반 UI 개발에 강점이 있습니다. 커뮤니티와 생태계가 크며, 점유율은 꾸준히 높고 증가 추세입니다. 디렉티브와 반응성 시스템이 뛰어나며 빠른 렌더링을 지원합니다.

React: 가장 인기 있는 프레임워크로, Virtual DOM으로 효율적인 UI 업데이트와 강력한 생태계를 자랑합니다. 점유율은 매우 높지만 규모가 커질수록 퍼포먼스 최적화가 필요합니다. Hooks 도입 이후 개발 경험이 크게 향상되었고, 전체적으로는 안정적인 성장세입니다. Preact: React와 API 호환되면서 크기를 크게 줄인 경량화 버전입니다. 모바일 등 리소스가 한정된 환경에서 성능이 좋고, 점유율은 React 대비 작지만 빠르게 성장하고 있습니다.

Lit: Web Components 표준 기반으로 빠르고 가벼우며, 빌드 없이 바로 작동합니다. React 대비 16-30% 빠른 렌더링 성능이 특징이며 점차 관심이 늘고 있고 성장 중입니다.

Svelte: 컴파일 타임에 대부분 작업을 처리해 가상 DOM 없이 빠른 렌더링을 제공합니다. 번들 크기가 작고 성능이 매우 뛰어나며, 학습 곡선이 완만하고 모바일 최적화에 강점이 있습니다. React 대비 빠르게 성장하는 추세입니다.

Solid: React 스타일의 선언적 UI를 유지하면서도 세밀한 반응성으로 최고의 성능을 자랑합니다. React 대비 훨씬 빠른 실행 속도를 내며 점유율은 낮지만 주목받고 있습니다.

Qwik: 최초 로딩 시 JS를 거의 보내지 않고 필요한 시점에만 JS를 실행하는 혁신적 접근법으로 극초기 로딩 속도가 매우 빠릅니다. 아직 초기 단계지만 퍼포먼스 중심으로 주목받고 있습니다.

Angular: 구글이 지원하는 대형 프레임워크로 양방향 바인딩과 강력한 기능을 제공합니다. 대규모 앱에 적합하지만 무거움과 복잡성 문제로 인해 점유율이 다른 프레임워크 대비 주춤한 상태입니다.

Marko: 서버 사이드 렌더링과 빠른 클라이언트 렌더링에 강점을 가진 프레임워크로, 주로 대형 웹사이트에 사용됩니다. 점유율은 낮지만 신뢰성 높은 성능을 제공합니다[추가 정보는 제한적].

요약하면 React와 Vue는 점유율이 가장 크고 안정적 성장세이며, Svelte와 Solid, Qwik은 최신 퍼포먼스 최적화 추세로 급성장하는 중입니다. Angular는 레거시 대형 프로젝트에 주로 쓰이고 있으며, Preact와 Lit는 경량화와 표준 호환을 무기로 점차 사용자가 늘어나고 있습니다.

이 중에서는 Svelte, Sveltekit의 열렬한 지지자이기는 한데 최근에 운영중인 서비스를 React에서 Solid로 전환한다는 이야기를 본적이 있어서 Solid에 관심이 가더라고요. 비슷하기도 하고, 이쪽으로 전환하는 수요도 생기지 않을까 싶은 생각이들어 한 번 시작이라도 해보기로 했습니다.

다음 단계에서 언어를 선택하나 싶었는데 또 뭔가 새로운게 보입니다.

"TanStack Router"는 React와 같은 자바스크립트 프레임워크에서 사용하는 최신 라우팅 라이브러리입니다. 타입스크립트 기반으로 강력한 타입 안전성을 제공하며, 파일 기반 라우팅(File-based Routing)을 지원해 파일을 생성하면 자동으로 URL 경로가 매핑되는 구조로 개발 효율성을 높이는 게 장점입니다. 또한 코드 분할, 중첩 레이아웃, 효율적 데이터 로딩 같은 고급 기능도 갖추고 있어 대규모 애플리케이션에도 적합합니다.

명령어 "npm create -- tsrouter-app@latest TARGET_DIR --framework Solid --interactive"는 pnpm이나 npm을 이용해 TanStack Router 기반의 최신 샘플 프로젝트를 Solid 프레임워크를 사용하여 생성하는 방법입니다.

- "npm create"는 최신 패키지 기반 템플릿 프로젝트를 생성하는 명령어입니다.
- "tsrouter-app@latest"는 TanStack Router 관련 템플릿(보통 TypeScript 기반)을 지정합니다.
- "TARGET_DIR"는 생성할 프로젝트 폴더 이름(경로)입니다.
- "--framework Solid"는 React 대신 Solid라는 UI 프레임워크를 사용하겠다는 옵션입니다.
- "--interactive"는 선택사항을 대화형으로 받아 설정할 수 있게 합니다.

즉, 이 명령어는 Solid 프레임워크용 TanStack Router 기본 앱을 자동으로 설정하는 스크립트라 볼 수 있습니다. Solid 개발 환경에서 TanStack Router를 쉽게 시작할 때 사용합니다.

뭐든 라우팅을 사용할 예정이니 선택해봅니다.

다음 선택은 파일 라우터와 코드 라우터입니다.

Sveltekit을 사용하면서 파일 라우팅에 길들여진 몸이라 File Router를 선택했습니다.

테일윈드는 쓰지 않는 것으로 결정했습니다.

한참 열심히 쓰던 때가 있었는데 요즘은 AI가 CSS를 잘 만들어주기도 하고

프로젝트가 점점 커지다보면 테일윈드로 작성한 스타일이 관리가 안되는 시점이 오는데

그 때 가서 고치기에는 너무 늦습니다.

디자인 시스템이 있는 환경에서는 오히려 방해가 되는 것 같더라고요.

요즘엔 되도록 순정으로 가려고 하고 있습니다.

그런 의미에선 Lit을 쓰는 것이 제 방향성과 맞기는 한데요.

요거는 나중에 한 번 시도해보겠습니다.

또 새로운 것이 나왔습니다.

위의 툴체인 선택 화면은 개발 환경에서 코드 품질과 스타일 검사를 위해 선택할 수 있는 도구 목록입니다. 각 항목에 대해 설명드리면 다음과 같습니다.

- None: 별도의 코드 스타일이나 검사 도구를 사용하지 않음을 의미합니다.
- Biome: 코드 포맷팅과 정적 분석 기능을 제공하는 도구로, JavaScript 및 TypeScript 코드의 스타일과 품질을 관리합니다. ESLint와 비슷한 역할을 수행하지만 좀 더 통합된 환경을 제공합니다.
- ESLint: 가장 널리 사용되는 JavaScript/TypeScript 정적 코드 분석 도구입니다. 코드의 문법 오류, 스타일 문제, 버그 가능성 등을 검사하여 개발자가 더 안정적이고 일관성 있는 코드를 작성하도록 돕습니다.

즉, 이 툴체인 선택은 Solid 같은 프레임워크 프로젝트를 만들 때 사용할 코드 스타일 검사 및 정적 분석 도구를 결정하는 단계입니다.

써본 적은 없지만 Biome을 선택했습니다.

뭐가 이렇게 고를 것이 많나요.

Clerk, Chadcn, MCP, Sentry를 빼고는 뭔지 잘 모르겠습니다.

각 애드온(add-on)의 설명과 필요한지 여부는 다음과 같습니다:

Clerk: 사용자 인증(로그인, 회원가입, 세션 관리 등)을 쉽게 추가할 수 있는 도구입니다. 인증 기능이 필요하면 꼭 선택하세요.
Convex: 현재 정보에서는 구체적 정의가 없지만, 일반적으로 Convex는 볼록 최적화 관련 용어이며, 애드온 맥락에선 특정 서비스일 수 있어 추가 확인 필요합니다.
DB: 데이터베이스 관련 기능(저장, 조회)을 추가합니다. 애플리케이션에서 데이터 저장이 필요하면 선택합니다.
Form: 폼 관리 기능을 제공합니다. 사용자 입력 폼이 필요한 경우 유용합니다.
MCP: 대규모 언어 모델(AI)과 외부 데이터/시스템 연결을 위한 표준 프로토콜입니다. AI 모델과 연결할 때 필요합니다.
Neon: 서버리스(Postgres) 데이터베이스 서비스로, 서버리스 환경의 안정적인 DB가 필요할 때 선택합니다.
Netlify: 배포 및 서버리스 백엔드 서비스입니다. 정적 사이트나 웹앱을 쉽게 배포하려면 선택합니다.
oRPC: 타입 안전한 API 개발 도구로, 타입스크립트 기반에서 안전하게 API를 구축하려면 선택합니다.
Sentry: 오류 추적 및 성능 모니터링 도구로, 앱 안정성 확보가 필요하면 필수입니다.
Shadcn: UI 컴포넌트 라이브러리일 가능성이 큽니다. UI 개발을 빠르게 하려면 도움이 됩니다.
Start: 프로젝트 초기 설정 및 구동에 관련된 애드온일 가능성이 높습니다.
Store: 상태 관리 라이브러리입니다. 애플리케이션 상태를 관리할 때 필요합니다.
T3Env: 환경변수 관리 도구로, 여러 환경에서 앱 실행 시 환경변수를 쉽게 관리합니다.
tRPC: 타입 안전한 원격 프로시저 호출(RPC) 라이브러리로, 프론트엔드와 백엔드 간 타입 안전 API 통신에 유용합니다.
Table: 데이터 테이블 컴포넌트 또는 기능을 추가합니다. 테이블 UI가 필요할 때 선택합니다.
Query: 데이터 쿼리 및 캐싱 기능을 제공하는 라이브러리로, 서버 상태 관리에 쓰입니다.

필요한 애드온은 프로젝트 목적에 따라 다릅니다. 예를 들어, 인증이 필요하면 Clerk, 데이터 저장이 필요하면 DB/Neon, 에러 모니터링은 Sentry, 타입 안전 API는 oRPC 또는 tRPC, UI 컴포넌트는 Shadcn, 상태 관리는 Store에 선택하면 됩니다. 배포는 Netlify가 편리합니다. 폼 입력이 많다면 Form을 고려하세요.

저만 모르는 것은 아니네요. 퍼플렉시티도 모르다니.

여기에선 아무것도 선택하지 않고 넘어가겠습니다.

Solid를 어떻게 사용하는지 참고하려고 선택했습니다.

물론 완전히 새로운 프로젝트를 만들 예정이라면 선택하지 않아야겠죠.

프로젝트 생성의 전체 과정입니다.

프로젝트 폴더로 이동해서 README.md 파일을 보니 .env 파일에 ANTHROPIC_API_KEY를 넣으라고 합니다.

요 부분은 무시하고 일단 빌드와 실행을 해보겠습니다.

혹시 pnpm을 설치하지 않으셨다면 먼저 설치해주시기 바랍니다.

npm install -g pnpm

실행에 필요한 의존성을 설치합니다.

pnpm install

프로젝트를 실행해봅니다.

pnpm run dev

웹브라우저 주소창에 아래의 주소를 입력해서 들어가봅니다.

http://localhost:3000/

프로젝트를 열어보니 역시 생김새는 React와 비슷한 느낌이네요.

example에서 TanStack Chat을 선택하면서 그 전의 선택들이 무색하게 되어버렸네요.

실행 화면을 보니 뭔가 백엔드가 포함된 느낌이라 찾아보니 TanStack Start가 풀스택 프레임워크를 만들어준다고 합니다.

Next 대신 사용하면 될 것 같기도 한데 개인적으로 Next든 Sveltekit이든 SSR 용도까지는 괜찮다고 생각해도

이걸로 DB에 접근하거나 본격적으로 백엔드로 사용하는 건 좀 불안한 면이 있다고 생각합니다.

(ASP.NET을 했던 입장으로 할 말이 아닌거 같기는 하지만;)

라이브러리의 불안전한 부분에서 발생하건 사용자의 실수로 발생하건 API 키를 노출하게 되거나 다른 문제들을 유발할 수 있다고 생각해서 개인적으로는 프론트와 백엔드는 분리되어야 한다고 생각하고 있습니다.

예제 프로젝트에서 쓰인 TanStack이 무엇인지 궁금해서 자료를 더 찾아봤습니다.

https://tanstack.com/

TanStack | High Quality Open-Source Software for Web Developers

Headless, type-safe, powerful utilities for complex workflows like Data Management, Data Visualization, Charts, Tables, and UI Components.

tanstack.com

TanStack 라이브러리 생태계
TanStack은 웹 개발을 위한 강력한 오픈소스 라이브러리 모음집으로, 헤드리스하고 타입 안전한 유틸리티들을 제공합니다. 각 라이브러리는 특정 도메인에 특화되어 있으며, 높은 성능과 개발자 경험을 중시하여 개발되었습니다.

TanStack Query (구 React Query)

용도
서버 상태 관리를 위한 라이브러리로, 웹 애플리케이션에서 서버 데이터 가져오기, 캐싱, 동기화, 업데이트를 간편하게 처리합니다.

주요 기능
- 데이터 캐싱 및 재사용: 동일한 queryKey로 요청된 데이터를 캐시에서 재사용
- 자동 백그라운드 갱신: 데이터가 stale 상태가 되면 자동으로 서버에서 새 데이터를 가져옴
- 간편한 상태 관리: isLoading, isPending, isError 등의 상태를 자동으로 관리
- 무한 스크롤: useInfiniteQuery 훅으로 무한 스크롤 구현 지원
- 쿼리 재시도: 요청 실패 시 기본적으로 3번 재시도

장점
- 반복적인 데이터 fetching 코드 감소
- 서버와 클라이언트 간 데이터 동기화 최적화
- 캐싱을 통한 불필요한 API 호출 방지
- 무한 스크롤, 쿼리 취소, 오프라인 mutation 지원

단점
- SWR(4.2kB)에 비해 번들 크기가 큰 편(11.4kB)
- 기능이 많아 초기 학습 곡선이 있을 수 있음

TanStack Router

용도
타입 안전한 파일 시스템 기반 라우팅을 제공하는 React 라우터 라이브러리.

주요 기능
- 파일 기반 라우팅: Next.js처럼 직관적인 디렉토리 구조 기반 라우팅
- 타입 안전성: TypeScript와 완벽 통합되어 런타임 오류 방지
- 자동 코드 분할: Critical과 Non-Critical 라우트 구분으로 성능 최적화
- 자동 완성: Link 컴포넌트의 to 속성에서 경로 자동 완성 지원

장점
- 컴파일 시점에 라우팅 오류 감지
- 초기 로딩 시 필요한 리소스만 로드하여 성능 개선
- React Router보다 간편하고 빠른 개발
- 중첩 라우팅과 레이아웃 관리 용이

단점
- 상대적으로 새로운 라이브러리로 커뮤니티 생태계가 작음
- 기존 React Router 코드 마이그레이션 비용

TanStack Table

용도
강력한 테이블과 데이터그리드 생성을 위한 헤드리스 라이브러리.

주요 기능
- 컬럼 관리: 정렬, 필터링, 그룹화, 순서 변경, 크기 조절
- 행 관리: 선택, 확장/축소, 페이지네이션, 고정
- 전역 기능: 전체 테이블 검색, 필터링
- 가상화 지원: TanStack Virtual과 연동하여 대용량 데이터 처리

장점
거의 모든 형태의 테이블 구현 가능
- 헤드리스 설계로 자유로운 스타일링
- 높은 성능과 개발자 경험 중시
- React, Vue, Solid 등 다양한 프레임워크 지원

단점
- 문서화가 완벽하지 않아 학습에 시간 소요
- 데이터나 컬럼 참조 변경 시 무한 렌더링 주의 필요

TanStack Virtual

용도
대용량 리스트의 가상 스크롤링을 통한 성능 최적화 라이브러리.

주요 기능
가상화: 화면에 보이는 요소만 렌더링하여 DOM 수 최소화
동적 높이: 각기 다른 높이를 가진 리스트 아이템 지원
스크롤 제어: scrollToOffset, scrollToIndex 함수 제공

장점
- 수만 개 아이템도 원활한 성능 보장
- 동적 높이 지원으로 유연한 레이아웃 구현
- 메모리 사용량 최소화

단점
- 구현 복잡도가 높아 초기 설정 시간 소요
- 기존 라이브러리 대비 생태계가 작음

TanStack Form

용도
타입 안전한 폼 상태 관리 라이브러리.

주요 기능
- 제어된 입력: 모든 폼 필드를 제어 상태로 관리
- 유효성 검사: 고급 유효성 검사 기능과 비동기 검증 지원
- 타입 안전성: TypeScript와 완벽 통합

장점
- React Hook Form 대비 더 깔끔한 상태 관리
- 예측 가능한 제어된 입력 방식
- 복잡한 폼 요구사항 충족 가능

단점
- React Hook Form에 비해 상대적으로 새로운 라이브러리
- 제어된 입력만 지원하여 비제어 폼 방식 사용 불가

TanStack Start

용도
TanStack Router 기반의 풀스택 React 프레임워크 (현재 베타).

주요 기능
- 서버 사이드 렌더링: 완전한 문서 SSR과 스트리밍
- 서버 함수: 서버 측 로직 실행 지원
- 번들링: Vite, Nitro 등 통합

장점
- 타입 안전한 풀스택 개발 환경
- Next.js의 대안으로 부상
- TanStack 생태계와의 완벽한 통합

단점
- 아직 베타 버전으로 프로덕션 사용에 제한
- Next.js 대비 생태계와 커뮤니티가 작음

TanStack Store

용도
외부 스토어 상태 관리를 위한 경량 라이브러리.

주요 기능
- 간단한 상태 관리: 전통적인 액션이나 리듀서 없이 useState처럼 사용
- 함수형 업데이트: 함수 업데이트만으로 상태 변경

장점
- 매우 간단한 API로 쉬운 학습
- 작은 번들 크기
- Redux나 Zustand의 대안

단점
- 상대적으로 새로운 라이브러리로 검증 부족
- 복잡한 상태 관리에는 제한적일 수 있음

TanStack 생태계는 각 도메인별로 특화된 강력한 도구들을 제공하며, 모든 라이브러리가 타입 안전성과 성능을 중시하여 개발되었습니다. 특히 헤드리스 설계를 통해 높은 자유도를 제공하며, 현대적인 웹 개발 트렌드에 부합하는 솔루션들을 제공합니다.

요 몇 년간 웹 프론트엔드를 하면서 느끼는건데

정말 어제와 오늘이 다르네요.

폭발적인 생태계가 계속 폭발을 거듭하는 느낌입니다.

다만 별똥별처럼 반짝 빛나고 사라지는 것들도 많네요.

요즈음에 느끼는건데

웹으로 먹고 살려면 일단 자바 스프링, 리액트는 해놓고 다른 것도 해보자는 생각이 듭니다.

엔지니어의 특성상 기술적으로 우위에 있다고 느끼는 것을 선택하고 싶지만

한국 시장 안에서는 대중적이지 않으면 선택받기가 쉽지 않네요.

(어디까지나 프리랜서와 외주 업무를 수행하는 관점에서 입니다.)

일단 자바 스프링과 리액트로 프로젝트를 하나 진행해보고

리액트 프론트엔드를 솔리드로 다시 만들어 보려고 생각하고 있습니다.

이번 게시물은 여기까지입니다.

감사합니다.

Vision Model Tester(YOLOv9, RF-DETR ONNX Model Test)

cellaxon — Tue, 12 Aug 2025 13:41:43 +0900

이것저것 시도하다보니 너무 멀리 와버렸네요.

지난 게시물(Rust에서 RF-DETR ONNX 모델을 사용한 이미지 객체 식별)에서 모델만 YOLOv9로 변경해서 테스트 해보려는 목적으로 시작했는데 주섬주섬 이 기능 저 기능들을 넣다보니 RF-DETR 모델을 넣는데까지 왔습니다.

바이브 코딩으로 여기까지 올 수 있다는게 놀랍기도 하지만 그 중간 과정에서 실패도 많았습니다. 특히 단계별로 만들어갈 때 어느 순간 잘 동작하는 코드를 날려버린다던지 자꾸 의도하지 않은 방향으로 틀어버리거나 몇 차례 시도 후 안되면 싹 갈아 엎어버리는 행동을 보여서 다시 시도해보기를 반복했네요. 그 덕에 토큰이 녹아내려서 Auto로 바꿔서 작업을 했더니 점점 쓸모 없는 코드만 찍어내더라구요.

여기까지의 테스트는 지금 준비하고 있는 서비스를 본격적으로 시작하기 전에 해본 가벼운 테스트입니다. 비전 모델에 대한 테스트는 여기까지로 마무리짓고 본 경기를 시작할 예정이예요.

여기까지의 작업물이 Rust로 유사한 작업을 해보려는 분들께 도움이 되었으면 합니다.

프로젝트를 받으시려면 아래의 사이트에 방문하시면 됩니다.

https://github.com/cellaxon/vision_model_tester

GitHub - cellaxon/vision_model_tester

Contribute to cellaxon/vision_model_tester development by creating an account on GitHub.

github.com

git clone https://github.com/cellaxon/vision_model_tester

모델 파일은 아래의 명령을 사용해서 받으세요.

# 1) 디렉토리 생성
mkdir -p assets/models/yolov9 assets/models/rf-detr

# 2) YOLOv9 모델 다운로드
curl -L -o assets/models/yolov9/gelan-c.onnx https://huggingface.co/Xenova/yolov9-onnx/resolve/main/gelan-c.onnx
curl -L -o assets/models/yolov9/yolov9-c.onnx https://huggingface.co/Xenova/yolov9-onnx/resolve/main/yolov9-c.onnx
# 선택적으로 추가 다운로드
curl -L -o assets/models/yolov9/gelan-e.onnx https://huggingface.co/Xenova/yolov9-onnx/resolve/main/gelan-e.onnx
curl -L -o assets/models/yolov9/yolov9-e.onnx https://huggingface.co/Xenova/yolov9-onnx/resolve/main/yolov9-e.onnx

# 3) RF-DETR 모델 다운로드
curl -L -o assets/models/rf-detr/rf-detr.onnx https://huggingface.co/onnx-community/rfdetr_base-ONNX/resolve/main/onnx/model.onnx

ONNX Runtime이 없다면 아래의 명령을 사용해서 설치하시면 됩니다.

pip install onnxruntime

제가 테스트한 환경은 아래와 같습니다.

Python 3.9.22
Rust 1.88.0
macOS Sequoia 15.6, Windows 10, Windows 11

YOLOv9-E

RF-DETR

잘 되시기를 바랍니다.

Rust에서 RF-DETR ONNX 모델을 사용한 이미지 객체 식별

cellaxon — Thu, 31 Jul 2025 14:07:13 +0900

이전 프로젝트에서 YOLOX를 사용해볼 수 있는 기회가 있었습니다. 당시에 Rust로 프로젝트를 제작하고 있었기 때문에 PyTorch로 학습된 모델을 Rust에서 돌려보기위해 여러 방법들을 시도해보았습니다. 이 때 ONNX을 알게 되어 onnx로 모델을 변환하고 실행하는 시도도 해보았습니다. 최종적으로는 속도 차이로 tch-rs(파이토치 러스트 바인딩)을 사용하여 실행하는 것으로 결론을 내렸습니다. 당시에 아쉬웠던 부분은 YOLOX의 동작 속도였는데요. 우연찮게 LinkedIn에서 Roboflow의 RF-DETR 에 대한 게시물을 발견하게 되었고 나중에 기회가 되면 써봐야지 했습니다.

그리고 드디어 여유 시간이 생겨 실제로 만들어 볼 수 있게 되었습니다.

프로젝트에서 ONNX 모델을 사용할 예정이기 때문에 ONNX Runtime 설치가 필요합니다.

아래의 사이트에 방문하셔서 여러 환경에 따른 설치 방법을 안내 받으실 수 있습니다.

https://onnxruntime.ai/

여기에서는 macOS에서 사용하는 것을 가정하고 있으므로 아래의 명령어를 사용하여 설치하시기 바랍니다.

pip install onnxruntime

코드가 제법 길기 때문에 아래의 저장소에 있는 프로젝트를 가져오겠습니다.

https://github.com/cellaxon/rf_detr_onnx_test

git clone https://github.com/cellaxon/rf_detr_onnx_test
cd rf_detr_onnx_test

다음으로는 허깅페이스에서 모델 파일을 다운로드 받으셔야 합니다.

아래의 사이트에 방문하셔서 model.onnx 파일을 다운로드 받으시기 바랍니다.

https://huggingface.co/onnx-community/rfdetr_base-ONNX/tree/main/onnx

rf_detr_onnx_test 폴더 하위에 assets/models 폴더를 생성하시고
다운로드 받으신 모델 파일을 복사해주세요

# assets/models 폴더 생성 (없는 경우)
mkdir -p assets/models

# 모델 파일을 assets/models/model.onnx로 이동
mv ~/Downloads/model.onnx assets/models/

이제 실행해보겠습니다.

cargo run --release

프로그램 실행 화면

추론을 시작하려면 좌측 상단의 Select Image 버튼을 누른 다음 대상 이미지를 선택하시면 됩니다.

잘 되시나요?

처음에는 터미널에서 실행하고 파일로 이미지를 출력하는 형태로 만들었는데 아무래도 결과를 바로 볼 수 있는 편이 좋을 것 같아 GUI를 붙이고 이것저것 테스트하면서 뜯어고치다보니 여기까지 왔습니다.

GUI는 Dioxus를 써보려했으나 Cursor가 몇 번 시도 후에 egui로 방향을 틀어버리더라고요. 익숙해서 좋긴했지만 Dioxus는 언제 써볼 수 있을런지 모르겠습니다. AI가 스스로 포기하는 걸 보면 아직 쓰면 안될 것 같기도 하고요.

처음에는 출력하는 ID가 COCO class 인 줄 알았는데 아니었습니다.

고양이가 개로 나오고 개는 말로 표시되는 문제가..
아래의 파일을 참고하시면 됩니다.

https://huggingface.co/onnx-community/rfdetr_base-ONNX/blob/main/config.json

모델이 입력받는 이미지의 크기가 560x560으로 고정되어 있어 입력으로 넣는 이미지를 비율 그대로 축소해서 넣은 다음 추론을 실행하고 결과를 다시 원본 이미지의 위치로 변환한 뒤에 표시해주도록 만들었습니다.

아무래도 Rust에서 이런 작업을 하시는 분들이 없어서인지 여기까지 오는데 생각보다 애로 사항이 많았습니다만 다행히 여기까지 만들 수 있었습니다.

이 다음으로 뭔가 만들게 된다면 영상 파일이나 카메라 영상을 OpenCV로 읽어서 실시간 추론을 해보면 좋을 것 같네요.

Rust + Slint UI + Kameo Actor Model

cellaxon — Wed, 30 Jul 2025 13:44:51 +0900

새로운 일을 시작하면서 Slint를 처음으로 사용해보았습니다.

Rust에서 본격적으로 개발을 하다 보면 Tokio와 Task를 피해갈 수가 없습니다. 상당히 많은 라이브러리들이 비동기를 기본으로 지원하다 보니 거기에 맞추어 개발을 할 수 밖에 없는데요. 개별적으로 동작하는 Task 사이에 데이터를 공유하자면 Arc<Mutex<T>>를 사용하여 변수를 공유하거나 채널을 사용하여 데이터를 전달하게 됩니다.

Arc<Mutex<T>>를 사용하기 시작하면 deadlock 발생 확률이 생깁니다. Rust가 좋은 언어이지만 deadlock 발생 가능성까지는 컴파일러에서 알아채지 못합니다. 조금만 주의를 잃어도 lock이 걸린 상태에서 다시 lock을 시도하는 등의 잘못된 코드를 작성하게 되고, 컴파일러는 오류 메세지 없이 빌드해내지만 실행해보면 어디선가 루프가 멈추는 상황이 발생하는데 추적이 쉽지 않습니다.

Channel을 사용하게 되면 간단히 tx 데이터를 써넣고, 데이터를 읽는 측에서는 비동기 상태로 대기하다가 rx를 통해 데이터를 읽을 수 있을 때에만 반응하면 됩니다. Channel을 사용할 때의 문제점이라면 이렇게 각 컴포넌트 간에 명시적인 연결 지점이 생기게 되고, 그로인한 의존성이 생긴다는 것과 채널들이 많아지면 각 채널들의 이름을 정하는 것부터 어디서 데이터가 오고 가는 것인지에 대해 판단하기가 간단하지 않게 됩니다.

이 정도쯤 되면 세상에 더 좋은 방법이 있을 거라고 생각하게 됩니다. 그래서 더 좋은 해결책을 찾다보니 Actor 모델을 찾게 되었습니다.

Actor 모델에 대해서 더 필요성을 느꼈던 것 중에 하나는 Bevy Engine에서 Plugin 단위로 컴포넌트를 만들어 사용하면서 각각의 컴포넌트들이 자신에 대한 통제권을 가지고 외부와 격리된 채로 최소한의 필요한 데이터만 주고 받게 만드는 것의 장점을 알게 되었기 때문입니다.

동시에 여러 사람이 하나의 프로젝트에서 작업을 하더라도 다른 요소에 대한 개발을 한다면 코드가 충돌하는 상황이 줄어듭니다.
서로 간의 의존성이 낮기 때문에 코드를 이해하기도 쉬워집니다.
이벤트의 추상화가 잘 되어 있다면 컴포넌트를 다른 것으로 교체하는 일도 쉬워집니다.

이런 장점들이 기존 프로젝트를 Actor 모델로 재구성하면서 발생하는 복잡도를 감당할 만큼은 된다는 생각이 들었습니다. 특히 slint를 사용해보니 Actor 모델을 적용하는 것이 UI를 제어하거나 UI에서 발생한 이벤트를 처리하기에 더 좋겠다는 생각이 들더라구요.

처음 Slint를 써 보시는 분들 보다는 Slint를 사용해서 본격적인 프로젝트를 제작하시는 분들이 Actor 모델을 적용할 수 있도록 참고할만한 예제를 만들었습니다.

https://github.com/cellaxon/slint_and_kameo_test

이게 생각보다 파일과 폴더의 개수가 많아져서 프로젝트를 생성하고 각 파일을 만드는 과정을 모두 기록하기에는 어렵네요. 기본적인 아이디어와 데이터의 흐름에 대한 설명만 남겨두겠습니다.

기본적인 구성은 다음과 같습니다.

Slint UI : 화면에 표시되는 GUI 요소
UI Actor : Slint UI에서 보내오는 메세지에 대한 처리와 UI Actor에서 받은 UI 제어 메세지를 Slint UI에 전달하는 Acotr
Core Actor : 비지니스 로직이 동작하는 Actor

프로젝트에서 발생하는 이벤트의 흐름은 다음과 같습니다.

Slint 에서 발생하는 UI 이벤트는 callback 함수를 통해 처리합니다. 이 때 callback 함수에 UI Actor에 대한 레퍼런스를 남겨두어 이벤트가 발생할 때 UI Actor에 메세지를 전달하도록 했습니다.
UI Actor는 Slint UI로부터 받은 메세지를 Core Actor에 전달합니다.
Core Actor는 받은 메세지를 처리하고 UI Actor에 처리한 결과를 전달합니다.
UI Actor는 Core Actor로부터 받은 데이터를 Slint UI로 전달합니다.

이 구조를 기초로 해서 기능들을 확장해간다면 프로젝트가 더 커지더라도 이해와 관리가 더 나아질 것으로 생각하고 있습니다.

덧붙임.

Actor 모델이 silver bullet 같은 것은 아닙니다. 여러 단계의 데이터 중계 과정이 추가되기 때문에 그에 따라 추가해야 할 정의들이 늘어나고, 송신과 수신 처리에 대한 코드를 추가하면서 복잡해지는 부분이 있습니다. 다만 공유 변수 사용으로 인해 실수가 발생할 수 있는 여지를 줄이고, 개별 요소들을 잘 격리하게 됨으로 해서 생기는 장점들이 단점을 상쇄할 수 있다면 충분히 도입할 가치가 있어 보입니다.

Rust + Bevy Engine + egui 시작하기

cellaxon — Wed, 30 Jul 2025 10:25:42 +0900

길고도 짧았던 프로젝트 하나가 일단락되어 게시물을 작성할 여유가 생겼습니다.

Rust를 본격적으로 업무에 사용하기 시작한 것이 2019년도였습니다. 지금도 그렇지만 당시에도 Rust 진영에서 GUI 프로그램 개발을 하기에는 선택지가 많지 않은 상황이었습니다. 그나마 그때에는 간단한 펌웨어 업데이트 프로그램을 만들던 때라 Sciter( https://sciter.com/ )를 사용했었습니다. 지금이라면 Tauri를 선택했겠지만 Tauri가 1.0이 된 게 2022년도 여름에나 되어서였네요.

시간이 지나 다시 GUI 프로그램을 만들어야 하는 상황이 왔고, 그때에는 Tauri를 사용했습니다. 그때가 딱 Tauri가 1.0이 된 직후였네요. 차트가 필요해서 Chart.js를 사용해서 실시간으로 업데이트되는 데이터를 표시했습니다. 그리고 그때부터 성능에 한계를 느끼기 시작했어요.

또 이런저런 일들을 하다가 드디어 영상을 3차원 공간에 올려야 하는 일을 하게 되었습니다. 그것도 macOS에서요. 때가 되었구나 싶었습니다. 계속해서 GUI와 관련된 새로운 정보들을 탐색해 왔었고, 다음 개발에는 Bevy Engine을 써야겠다고 염두해 두고 있었거든요. 한편으로 egui도 생각하고 있었습니다. 복잡한 UI 요소들을 넣어야 하는데 Bevy Engine만으로는 불가능했거든요.

C#을 사용한 게 20년 정도 되었고, WPF를 사용한 것도 15년 정도가 되어가는 것 같습니다. 복잡한 UI 요소들을 직접 만들어서 사용해야 할 일들이 많았었는데 쉽고 빠르게 만들 수 있었어요. 지금 기억나는 건 NMEA에 있는 위성 위치와 신호 세기를 표시하는 컨트롤을 만들었던 것과 드론 센서 데이터를 표시하는 실시간 차트를 만들었던 겁니다. 한 화면에서 18개의 실시간 차트를 동시에 그렸더니 WPF의 선 그리기로는 성능이 도저히 안 나와서 결국 백그라운드에서 비트맵에 그린 후에 화면에 붙여 넣는 방법으로 구현을 했었습니다.( https://youtu.be/ozzC118UJTk ) 여전히 UI 요소들의 편집도 쉽고, 새로운 컨트롤을 만드는 것도 좋지만 윈도우를 벗어나서 사용하기에는 어려움이 있습니다.

Bevy Engine과 egui를 사용하기 시작한 게 이제 딱 1년이 되었습니다. 작업을 진행하면서 좋은 점도 있고, 아쉬운 부분들도 있었지만, 충분히 사용할 만하다고 생각하고 있습니다. 개인적으로는 꼭 C#과 WPF를 사용해야 하는 상황이 아니라면 GUI 프로그램을 만드는데 Bevy Engine과 egui를 사용하려 합니다. 물론 현재 가장 크리티컬 한 문제는 한국어 입력이 안 된다는 부분입니다. 이른 시일 내에 해결이 되면 좋겠네요. 개인적으로도 bevy_egui_ime ( https://github.com/8bitTD/bevy_egui_ime ) 라이브러리를 한국어 입력이 되도록 수정해 보고 있습니다. 충분히 가능성이 있어 보입니다.

C#을 처음 배울 때 좋았던 것이 GUI 프로그램을 너무 쉽게 만들 수 있다는 것이었습니다. "Hello World"를 윈도우 위에 출력하다니. 조금 건너뛰는 느낌이 있기는 하지만 Rust를 처음 접하시더라도 재미있게 무언가를 만들어 보실 수 있다면 좀 더 흥미를 느끼실 수 있지 않을까 생각하고 있습니다. 그런 의미에서 이 게시물을 시작했습니다.

이제 시작하겠습니다.

Rust 설치

Rust 홈페이지의 Getting started 문서를 참고하시기 바랍니다.

https://www.rust-lang.org/learn/get-started

macOS, Linux, WSL은 아래의 명령어를 사용하여 설치하실 수 있습니다.

curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

새로운 프로젝트 시작

개인적으로는 사용자 폴더 하위에 project 폴더를 만들고 그 아래에 프로젝트를 생성해서 사용하고 있습니다. 개인의 취향에 따르는 문제이니 원하는대로 사용하시면 됩니다.

새로운 Rust 프로젝트를 시작하는 명령은 아래와 같습니다.

Cargo new [프로젝트 이름]

cargo new bevy_egui_hello_world

폴더로 이동해서 생성된 파일을 확인하면 아래와 같은 파일들이 보입니다.

새로 생성한 프로젝트 폴더

Cargo.toml 파일은 프로젝트의 정보와 의존성 패키지 목록을 관리합니다. 내용을 살펴보면 아래와 같습니다.

Cargo.toml

의존성 추가

현재 프로젝트에 Bevy Engine과 egui 라이브러리를 추가해보겠습니다.

아래의 명령을 사용하여 Bevy Engine을 추가합니다.

cargo add bevy

다음으로 아래의 명령을 사용하여 bevy_egui를 추가합니다.

이 라이브러리는 Bevy Engine에서 egui를 사용하기 위해 필요한 라이브러리입니다.

cargo add bevy_egui

마지막으로 egui를 추가합니다.

cargo add egui

위의 명령을 묶어서 한 번에 설치하실 수도 있습니다.

cargo add bevy bevy_egui egui

VS Code 설치

소스 코드를 편집하는데 VS Code를 사용하겠습니다.

없으시다면 아래의 사이트를 방문하여 다운로드 받고 설치하시기 바랍니다.

https://code.visualstudio.com/

macOS에서는 압축 파일을 다운받게 되는데 압축 파일을 더블 클릭하셔서 압축을 해제하신 후에 생성된 'Visual Studio Code'를 클릭-드래그해서 Finder 좌측에 보이는 '응용 프로그램'에 끌어다 놓고 사용하시면 됩니다.

VS Code를 실행하시면 화면 좌측에 버튼들이 표시됩니다. 이 중에 네 개의 사각형이 그려진 버튼을 눌러 확장을 설치할 수 있는 화면으로 이동하시기 바랍니다.

확장

확장 화면 상단의 검색창을 사용해서 필요한 확장을 설치하실 수 있습니다.

Rust 언어를 사용하기 위해 기본적으로 필요한 확장은 다음과 같습니다.

CodeLLDB
Crates
Dependi
Error Lens
Even Better TOML
rust-analyzer

아래는 사용을 권해드리는 확장입니다. 필요에 따라 설치하시기 바랍니다.

Alphabetical Sorter
Code Spell Checker
Git Graph
Git History
Git History Diff
Indenticator
Bevy Color

터미널에서 VS Code를 실행하려면 아래에 설명한 단계를 따라하시기 바랍니다.

Command + Shift + P 키를 누릅니다.
명령 팔레트에 shell을 입력합니다.
Shell Command: Install 'code' command in PATH 항목을 선택합니다.
관리자 권한 요청이 뜨면 OK를 누르고 로그인 암호를 입력합니다.

명령 팔레트 화면

설치가 완료된 후에 터미널을 새로 열고 아래의 명령을 입력하면 현재 위치에서 VS Code를 바로 실행하실 수 있습니다.

code .

Cargo.toml 확인

각 라이브러리의 버전에 따라 아래의 main.rs에서 사용할 코드가 작동하지 않을 수도 있습니다. 버전을 확인해보시고 다르다면 아래와 같은 버전으로 변경해주시기 바랍니다.(아직도 Bevy Engine과 bevy_egui, egui의 핵심이 되는 API가 업데이트에 따라 바뀌는 부분들이 있고, 이 부분이 마이그레이션에 어려움을 주기도 합니다)

[package]
name = "bevy_egui_hello_world"
version = "0.1.0"
edition = "2024"

[dependencies]
bevy = "0.16.1"
bevy_egui = "0.35.0"
egui = "0.31.1"

main.rs 편집

src 폴더 아래에 main.rs 파일이 있습니다. 이 파일을 아래와 같이 수정합니다.

use bevy::prelude::*;
use bevy_egui::{egui, EguiContexts, EguiPlugin, EguiPrimaryContextPass};

fn main() {
    App::new()
        .add_plugins(DefaultPlugins)
        .add_plugins(EguiPlugin::default())
        .add_systems(Startup, setup_camera_system)
        .add_systems(EguiPrimaryContextPass, ui_example_system)
        .run();
}

fn setup_camera_system(mut commands: Commands) {
    commands.spawn(Camera2d);
}

fn ui_example_system(mut contexts: EguiContexts) -> Result {
    egui::Window::new("Hello world").show(contexts.ctx_mut()?, |ui| {
        ui.label("Hello world");
    });
    Ok(())
}

실행

아래의 명령을 사용하여 지금까지 작업한 내용을 실행해보겠습니다.

cargo run

실행 화면

실행이 되셨나요? 축하드립니다. 하지만 여기에서 끝내기에는 여러모로 아쉬움이 남기 때문에 조금 더 작업을 진행해보겠습니다.

플러그인 구조로 변경

Bevy Engine은 크게 세 가지의 구성 요소가 있습니다.

Resource
Event
System

Resource는 읽거나 수정이 가능한 전역에서 접근 가능한 데이터로 생각하시면 됩니다. Event는 이벤트를 발생시키고, 발생한 이벤트를 읽어서 처리하는데 사용합니다. 하나의 이벤트를 여러 곳에서 쓸 수 있고, 또 여러 곳에서 읽어서 사용할 수 있습니다. System은 첫 번째 인자의 값에 따라 처음 프로그램이 시작될 때 한 번만 실행하거나, 매 프레임마다 호출되는 함수입니다. 여기에서 Resource의 값을 읽거나 변경하고, 이벤트를 발생 시키고, 읽어서 처리할 수 있습니다.

이러한 구성 요소들을 용도에 따라 또는 화면 단위로 묶어서 플러그인으로 만들 수 있습니다. 플러그인으로 만들면 코드 복잡도가 낮아져서 이해하고 관리하기가 쉬워집니다. 아래에서 제안하는 폴더 구조는 제 개인적인 의견이므로 사용에 익숙해지시면 원하는대로 변경해서 사용하시면 됩니다.

플러그인 구조로 변경하는 방법은 아래의 순서대로 따라하시기 바랍니다.

src 폴더 하위에 plugins 폴더를 추가합니다.
plugins 폴더에 mod.rs 파일을 추가하고 아래의 코드를 작성합니다.

pub mod hello_world;

plugins 폴더에 hello_world 폴더를 추가합니다.
hello_world 폴더에 mod.rs 파일을 추가하고 아래의 코드를 작성합니다.

pub mod plugin;

hello_world 폴더에 plugin.rs 파일을 추가하고 아래의 코드를 작성합니다.

use bevy::prelude::*;
use bevy_egui::{EguiContexts, EguiPrimaryContextPass};

pub struct HelloWorldPlugin;

impl Plugin for HelloWorldPlugin {
    fn build(&self, app: &mut App) {
        app.add_systems(EguiPrimaryContextPass, ui_example_system);
    }
}

fn ui_example_system(mut contexts: EguiContexts) -> Result {
    egui::Window::new("Hello").show(contexts.ctx_mut()?, |ui| {
        ui.label("world");
    });
    Ok(())
}

main.rs 파일을 아래와 같이 수정합니다.

mod plugins;

use bevy::prelude::*;
use bevy_egui::EguiPlugin;

fn main() {
    App::new()
        .add_plugins(DefaultPlugins)
        .add_plugins(EguiPlugin::default())
        .add_systems(Startup, setup_camera_system)
        .add_plugins(plugins::hello_world::plugin::HelloWorldPlugin)
        .run();
}

fn setup_camera_system(mut commands: Commands) {
    commands.spawn(Camera2d);
}

변경이 완료된 폴더의 구조는 아래와 같습니다.

hello_world 플러그인

실행 결과는 변경 전과 동일합니다. 하지만 이걸로 끝내면 안되겠죠. 아래에서 조금 더 내용을 진행해보도록 하겠습니다.

현재 시간을 표시하는 프로그램 만들기

버튼을 누르면 버튼을 누른 시간이 텍스트 박스에 차례대로 추가되는 예제를 만들어보겠습니다. 이 기능을 사용하려면 시간 값이 들어있는 문자열을 어디엔가 저장해야하는데요. 이 때 Resource를 사용합니다. 아래의 설명을 차례대로 따라하시기 바랍니다.

시간을 원하는 형태로 출력하려면 chrono 크레이트(라이브러리)가 필요합니다. 터미널에서 아래의 명령을 사용하여 라이브러리를 추가합니다.

cargo add chrono

hello_world 폴더에 resources.rs 파일을 추가하고 아래의 코드를 넣습니다.

use bevy::prelude::*;

#[derive(Resource, Default)]
pub struct PluginState {
    pub time_string: String,
}

resouces.rs 파일이 hello_world 폴더에 있다는 것을 알리기 위해 hello_world 폴더의 mod.rs 파일을 수정합니다.

pub mod plugin;
pub mod resources;

hello_world 폴더의 plugin.rs 파일을 아래와 같이 수정합니다.

use super::resources::PluginState;
use bevy::prelude::*;
use bevy_egui::{EguiContexts, EguiPrimaryContextPass};
use chrono::Local;

pub struct HelloWorldPlugin;

impl Plugin for HelloWorldPlugin {
    fn build(&self, app: &mut App) {
        app.insert_resource(PluginState::default());
        app.add_systems(EguiPrimaryContextPass, ui_example_system);
    }
}

fn ui_example_system(mut contexts: EguiContexts, mut state: ResMut<PluginState>) -> Result {
    egui::Window::new("Hello").show(contexts.ctx_mut()?, |ui| {
        ui.text_edit_multiline(&mut state.time_string);
        if ui.button("Update Time").clicked() {
            state.time_string += &format!("{}\n", Local::now().format("%Y-%m-%d %H:%M:%S"));
        }
        if ui.button("Reset").clicked() {
            state.time_string = String::new();
        }
    });
    Ok(())
}

작업이 완료된 후 아래의 명령을 사용해서 프로그램을 실행해보겠습니다.

cargo run

'Update Time' 버튼을 눌러보았습니다.

프로그램 실행 화면

뜯어보면 어려운 내용들이 있기는한데 여기서부터 천천히 알아보면 되지 않을까요?

전체 코드는 아래의 저장소에 올려두었습니다.

https://github.com/cellaxon/bevy_egui_hello_world

저장소의 코드를 내려받으려면 아래의 명령을 입력하시면 됩니다.

git clone https://github.com/cellaxon/bevy_egui_hello_world

아마도 git은 설치되어 있을거예요. 그렇죠?

이전에는 Rust를 선뜻 추천하기 어려웠는데 AI 도입으로 격변의 시기를 거치면서 이런 도구들의 도움을 받으면 문법에 조금 약해도 충분히 도전할 만한 상황이 되었습니다. 모르면 원하는 코드를 작성해달라고 하면 잘해줍니다. 코드 설명도 잘해주고요. 틀린 코드 수정은 지금 환경에서는 한 번에 안 될 때가 많지만 이 정도만 해줘도 어디인가 싶네요. 사용자의 의도와 맞지 않을 때도 있지만 상당히 많은 부분을 자동 완성해 주기도 하고요.

Github Copilot을 연간 구독으로 사용하는 중에 소문을 듣고 Windsurf( http://windsurf.com/ )와 Cursor( https://cursor.com/ )를 차례로 월 결제해서 써봤는데 돈이 아깝지 않았습니다. 오히려 너무 빨리 토큰을 다 써버려서 추가 결제를 해야 하나 망설이게 될 정도였어요. 물론 너무 큰 기대를 하고 계시면 실망하실 수도 있겠지만 맨땅에 헤딩했던 경험이 있으신 분들이라면 충분히 만족하고 쓰실 수 있을 겁니다. 결제가 부담되시거든 무료 버전이라도 써보세요. 꼭.

길고 긴 Bevy Engine과 egui 입문 게시물이 끝났습니다. 여기까지 작성하는 데 4시간이 걸렸네요. 아마도 이다음 게시물은 Event에 대한 설명이 될 것 같습니다. 적절한 예제를 찾기 위해 노력하겠습니다.

감사합니다.

How to Run SteVe OCPP Server with Podman.

cellaxon — Wed, 30 Jul 2025 10:05:56 +0900

macOS 환경에서 SteVe OCPP 서버를 Podman을 사용하여 편리하게 실행하는 방법을 정리하였습니다.

Podman 설치

Docker Desktop의 대안인 Podman Desktop을 설치하는 것부터 시작하겠습니다.

Podman의 홈페이지에 가셔서 프로그램을 다운 받습니다.

https://podman.io/

Podman 홈페이지

Download 버튼을 누른 다음 아래에 나타나는 박스에서 Podman Desktop for macOS를 클릭하여 프로그램을 다운로드 받고, 설치합니다.

podman pkg

나머지 설치 과정에 대해서는 크게 어려운 것이 없으므로 넘어가겠습니다.

Podman Compose 설치

Podman-compose는 Podman 컨테이너 엔진을 이용해 여러 컨테이너, 네트워크, 볼륨 등을 한 번에 정의하고 관리할 수 있도록 해주는 오케스트레이션 도구입니다. 이는 Docker Compose와 유사하게 YAML 형식의 Compose 파일(주로 docker-compose.yml)을 사용하여 애플리케이션 스택을 정의하고, 여러 컨테이너를 한 번에 실행·중지·삭제할 수 있게 해줍니다

여기에서는 docker-compose.yaml 파일을 사용하여 SteVe와 MySQL 서버를 같이 실행하는데 사용합니다. Python이 먼저 설치되어 있어야 합니다.

아래의 명령을 사용해서 설치하세요.

pip3 install podman-compose

Podman Compose 설치

SteVe 소스 코드 다운로드

아래의 명령을 실행하여 저장소에서 소스코드를 가져옵니다.

git clone https://github.com/steve-community/steve.git

Password 변경

docker-compose.yml 파일의 MYSQL_PASSWORD 우측의 changeme를 다른 것으로 변경해서 사용하시기 바랍니다.

docker-compose.yml

src/main/resources/config/docker/main.properties 파일의 db.password를 위에서 설정한 것과 동일한 비밀번호로 변경하시기 바랍니다. 그 아래의 auth.password는 다른 것으로 변경해서 사용해주세요.(아래 파일의 13번째, 18번째 라인입니다)

src/main/resources/config/docker/main.properties

Podman Compose를 사용하여 SteVe 서버 실행

SteVe를 받은 폴더에서 아래의 명령을 실행합니다.

podman-compose up -d

podman compose를 사용하여 실행

서버 실행에는 약간의 시간이 필요합니다.

브라우저를 실행하여 아래의 주소를 입력하고 들어가보겠습니다.

http://localhost:8180/steve/manager/

SteVe Server

위에서 수정한 main.properties 파일의 auth.user 와 auth.password 에 입력한 계정으로 접속하시면 됩니다.

SteVe manager

잘 되셨나요?

서버 종료

SteVe를 받은 폴더에서 아래의 명령을 실행합니다.

podman-compose down

서버 종료

직접 데이터베이스를 설치하는 것보다는 훨씬 쉬운 방법으로 실행할 수 있었습니다.

도움이 되셨기를 바랍니다.

[macos] autoenv 사용 및 python venv 환경 구성하기(PyTorch)

cellaxon — Wed, 16 Apr 2025 15:24:27 +0900

https://github.com/hyperupcall/autoenv

GitHub - hyperupcall/autoenv: Directory-based environments.

Directory-based environments. Contribute to hyperupcall/autoenv development by creating an account on GitHub.

github.com

rust 프로젝트에서 PyTorch와 tch-rs(PyTorch에 대한 rust 바인딩)를 사용하고 있는데

개발 환경 세팅에 관련된 메뉴얼을 한 번 작성하고 나면

다음 새로운 환경에서 세팅을 할 때에는 메뉴얼대로 안되는 것이 태반입니다.

어쩔 수 없이 다시 정리를 해봅니다.

이번에 개발환경을 세팅하다보니 이미 시스템에 python 3.13이 설치되어 있고

여기에 종속된 다른 프로그램들이 설치된 것들이 있는 상태였습니다.

그래서 프로젝트 루트에 venv를 세팅하고 autoenv를 사용하려고 합니다.

사용 환경을 먼저 설명드리자면 맥미니 m4 / macos 15.4에 zsh을 사용하고 있습니다.

1. autoenv설치

brew install autoenv

2. 터미널을 열 때 autoenv가 로딩 되도록 하는 명령(macos / zsh)

printf '%s\n' "source $(brew --prefix autoenv)/activate.sh" >> "${ZDOTDIR:-$HOME}/.zprofile"

3. venv 환경 구성, PyTorch 설치

python3 -m venv .venv
source .venv/bin/activate
pip install torch torchvision torchaudio

4. PyTorch가 설치된 경로 확인

아래의 python 스크립트를 실행하시면 됩니다.

import torch

# torch 설치 경로 출력
print(torch.__file__)

5. 프로젝트 루트 폴더에 '.env' 파일 생성
위의 스크립트를 실행하여 알아낸 경로를 아래에 적용해줍니다.

if [[ -n "$_AUTOENV_ACTIVATED" ]]; then
    return
fi
export _AUTOENV_ACTIVATED=1

# Directory
DIR="$(cd "$(dirname "$0")" && pwd)"

source .venv/bin/activate
export   LD_LIBRARY_PATH=${LD_LIBRARY_PATH}:/usr/local/lib
export DYLD_LIBRARY_PATH=${DIR}/.venv/lib/python3.13/site-packages/torch/lib:$DYLD_LIBRARY_PATH
export          LIBTORCH=${DIR}/.venv/lib/python3.13/site-packages/torch

6. 터미널을 재실행하면 됩니다.

[Error] after updating MacOS 15.4 and caused 'Library not loaded: @executable_path/../Frameworks/libopenblasp-r0.3.29.dylib'.

cellaxon — Mon, 14 Apr 2025 09:50:42 +0900

opencv를 사용하는 프로젝트가 macos를 15.4로 업데이트 한 이후에 위와 같은 오류를 발생하기 시작했습니다.

번들링 후 dylibbundler를 실행했는데도 .app/Contents/Frameworks 폴더에 libopenblasp-r0.3.29.dylib 파일이

포함되지 않는 것을 확인하였습니다.

조치 사항으로

1. 'libopenblasp-r0.3.29.dylib'와 libopenblas.0.dylib' 를 찾아서 /Framework에 복사하였습니다.
${APP_FOLDER}는 실제 .app 폴더의 경로입니다.

cp -v /opt/homebrew/opt/openblas/lib/libopenblasp-r0.3.29.dylib ${APP_FOLDER}/Contents/Frameworks/
cp -v /opt/homebrew/opt/openblas/lib/libopenblas.0.dylib ${APP_FOLDER}/Contents/Frameworks/

2. install_name_tool을 사용하여 'libopenblasp-r0.3.29.dylib'가 참조하는 경로를 수정하였습니다.

install_name_tool -change \
  /opt/homebrew/opt/openblas/lib/libopenblas.0.dylib \
  @executable_path/../Frameworks/libopenblas.0.dylib \
  ${APP_FOLDER}/Contents/Frameworks/libopenblasp-r0.3.29.dylib

install_name_tool -change \
  /opt/homebrew/opt/gcc/lib/gcc/current/libgfortran.5.dylib \
  @executable_path/../Frameworks/libgfortran.5.dylib \
  ${APP_FOLDER}/Contents/Frameworks/libopenblasp-r0.3.29.dylib

install_name_tool -change \
  /opt/homebrew/opt/gcc/lib/gcc/current/libgomp.1.dylib \
  @executable_path/../Frameworks/libgomp.1.dylib \
  ${APP_FOLDER}/Contents/Frameworks/libopenblasp-r0.3.29.dylib

install_name_tool -change \
  /opt/homebrew/opt/gcc/lib/gcc/current/libquadmath.0.dylib \
  @executable_path/../Frameworks/libquadmath.0.dylib \
  ${APP_FOLDER}/Contents/Frameworks/libopenblasp-r0.3.29.dylib

2.1. 변경 전 참조 경로는 다음과 같습니다.

otool -L ./libopenblasp-r0.3.29.dylib 
./libopenblasp-r0.3.29.dylib:
	/opt/homebrew/opt/openblas/lib/libopenblas.0.dylib (compatibility version 0.0.0, current version 0.0.0)
	/opt/homebrew/opt/gcc/lib/gcc/current/libgfortran.5.dylib (compatibility version 6.0.0, current version 6.0.0)
	/opt/homebrew/opt/gcc/lib/gcc/current/libgomp.1.dylib (compatibility version 2.0.0, current version 2.0.0)
	/opt/homebrew/opt/gcc/lib/gcc/current/libquadmath.0.dylib (compatibility version 1.0.0, current version 1.0.0)
	/usr/lib/libSystem.B.dylib (compatibility version 1.0.0, current version 1351.0.0)

2.2. 변경 후 참조 경로는 다음과 같습니다.

otool -L ./libopenblasp-r0.3.29.dylib
./libopenblasp-r0.3.29.dylib:
	@executable_path/../Frameworks/libopenblasp-r0.3.29.dylib (compatibility version 0.0.0, current version 0.0.0)
	@executable_path/../Frameworks/libgfortran.5.dylib (compatibility version 6.0.0, current version 6.0.0)
	@executable_path/../Frameworks/libgomp.1.dylib (compatibility version 2.0.0, current version 2.0.0)
	@executable_path/../Frameworks/libquadmath.0.dylib (compatibility version 1.0.0, current version 1.0.0)
	/usr/lib/libSystem.B.dylib (compatibility version 1.0.0, current version 1351.0.0)

3. install_name_tool 이후 전체 dylib와 실행파일, .app에 대한 코드 사인을 실행했습니다.

[macOS] PyO3를 사용하여 rust에서 python 코드를 실행하기

cellaxon — Tue, 25 Feb 2025 10:30:03 +0900

1. 새로운 프로젝트 생성

cargo new test_pyo3

2. Cargo.toml 파일에 아래의 내용 추가

[dependencies.pyo3]
version = "0.23.4"
features = ["auto-initialize"]

3. main.rs 수정

use pyo3::ffi::c_str;
use pyo3::prelude::*;
use pyo3::types::IntoPyDict;

fn main() -> PyResult<()> {
    Python::with_gil(|py| {
        let sys = py.import("sys")?;
        let version: String = sys.getattr("version")?.extract()?;

        let locals = [("os", py.import("os")?)].into_py_dict(py)?;
        let code = c_str!("os.getenv('USER') or os.getenv('USERNAME') or 'Unknown'");
        let user: String = py.eval(code, None, Some(&locals))?.extract()?;

        println!("Hello {}, I'm Python {}", user, version);
        Ok(())
    })
}

4. export를 사용하여 파이썬 경로와 관련된 환경 변수 설정

python 라이브러리 경로 확인 스크립트를 실행하여 설치 경로 확인

import sysconfig
print(sysconfig.get_config_var("LIBDIR"))

실행 결과

python ./scripts/check_python_path.py 
/Users/a1/.local/share/mise/installs/python/3.12.8/lib

위의 실행 결과를 아래에 반영하여 터미널에서 실행(영구적으로 사용할 경우 ~/.zshrc 에 추가)

export PYTHONHOME=/Users/a1/.local/share/mise/installs/python/3.12.8
export PYTHONPATH=/Users/a1/.local/share/mise/installs/python/3.12.8/lib/python3.12
export DYLD_LIBRARY_PATH=/Users/a1/.local/share/mise/installs/python/3.12.8/lib:$DYLD_LIBRARY_PATH

5. 프로젝트 실행

cargo run

실행 결과

cargo run --release
   Compiling test_pyo3 v0.1.0 (/Users/a1/project/fitogether_video_new/test_pyo3)
    Finished `release` profile [optimized] target(s) in 0.33s
     Running `target/release/test_pyo3`
Hello a1, I'm Python 3.12.8 (main, Jan 14 2025, 23:36:58) [Clang 19.1.6 ]

https://pyo3.rs/v0.23.4/python-from-rust.html#calling-python-in-rust-code

Calling Python from Rust - PyO3 user guide

This chapter of the guide documents some ways to interact with Python code from Rust. Below is an introduction to the 'py lifetime and some general remarks about how PyO3's API reasons about Python code. The subchapters also cover the following topics: Pyt

pyo3.rs