시리즈: 3D 에셋 배치 파이프라인 구축기 (번외 1)대상 독자: Node.js로 자식 프로세스와 데이터를 주고받는 개발자, 배치 처리 파이프라인을 만드는 엔지니어문제: 프레임을 빨리 쓰면 FFmpeg이 못 따라온다3D 배치 파이프라인에서 Puppeteer가 캡처한 프레임을 FFmpeg stdin으로 넘기는 구조를 썼다.프레임 하나는 WebP 이미지 버퍼, 모션 하나당 약 180프레임.처음엔 단순하게 for 루프를 돌면서 stdin.write(buffer)를 호출했다.소규모 테스트에서는 문제없었다.그런데 6만 건을 돌리니 4시간쯤 지나서 메모리가 터졌다.원인은 백프레셔(backpressure) 미처리.백프레셔란?Node.js의 Writable.write(chunk)는 내부 버퍼에 여유가 있으면 true,..
10년 차 개발자의 시선프론트엔드 개발자의 생산성을 갉아먹는 가장 큰 주범은 '맥락 전환(Context Switching)'입니다. 컴포넌트 하나를 만들 때도 스토리북(Storybook)을 뒤지고, 컨벤션 확인을 위해 노션(Notion)을 검색하며, API 타입을 보러 스웨거(Swagger)를 켭니다. 하지만 MCP(Model Context Protocol)를 사용하면 이 모든 지식을 개발 에디터(IDE) 안으로 통합할 수 있습니다. 오늘은 Cursor 에디터에 MCP 서버를 연결하여, 프로젝트 전용 문서를 기반으로 AI가 코드를 제안하게 만드는 차세대 워크플로우를 소개합니다.1. MCP(Model Context Protocol)란 무엇인가?MCP는 AI 모델이 로컬 파일 시스템, 데이터베이스, 혹은 특..
CGV 에반게리온 30주년 무비 페스티벌 재개봉 일정에반게리온 30주년에 맞춰 CGV가 극장판들을 릴레이로 재개봉합니다.CGV가 30주년 기념으로 총 6편을 순차 상영합니다. 일정은 아래처럼 확정됐어요. 신세기 에반게리온 극장판 사도신생2025.10.31 ~ 2025.11.20엔드 오브 에반게리온 (EOE) ✅2025.11.21 ~ 2025.12.11에반게리온 신극장판: 서(序)2025.12.12 ~ 2026.01.01에반게리온 신극장판: 파(破)2026.01.02 ~ 2026.01.22에반게리온 신극장판: Q2026.01.23 ~ 2026.02.12신 에반게리온 극장판2026.02.13 ~ 2026.03.05 EOE는 딱 3주 상영. 놓치면 또 언제 극장에서 볼 수 있을지 모릅니다. 2. 개봉관(..
재미나이(Gemini) 프로 3가 공개됐습니다.엔비디아 GPU를 사용하는 GPT와 비교해서 구글은 TPU를 사용해서 더 효율적인 전력 사용이 가능한데결과물도 좋다고 평가가 좋습니다.엔비디아 주가 더 떨어지기 전에 매도 하기위해서 직접 이미지 생성해서 비교해보기로 했습니다.Gpt와 재미나이(Gemini) 이미지 생성 지시사항Gpt와 재미나이(Gemini) 모두에게 동일한 한글 프롬프트로 일본 애니메이션 에반게리온의 실사화 영화 촬영 현장 이미지를 생성해달라고 했습니다. 재미나이(Gemini) 실사라는 개념을 재미나이는 제대로 이해합니다. 실존인물을 이미지로 생성하는것도 문제 없습니다. 무엇보다 놀라운건 일관성있는 이미지 생성이 가능합니다.인물 배경이 그대로 유지되면서 의상과 포즈만 변경됐습니다. 의상..
Turborepo + pnpm + Next.js 환경 구성기 (실전 예시: turborepo-pnpm-next-docker-letsgo) monorepo로 여러 앱과 공용 패키지를 빠르게 운영하는 법왜 이 조합인가 하나의 팀에서 여러 앱(웹, 어드민)을 개발하는데 생산성을 높이기 위해서 앱과 공용 패키지(UI, ESLint, Tailwind, TS 설정)을 한 저장소에서 관리하기 하기 위해서 Turborepo + pnpm 조합으로 모노레포을 구성합니다. Turborepo: 캐시/파이프라인으로 빌드 중복 제거pnpm: 빠른 설치 + 효율적인 의존성 관리Next.js(+Turbopack): 개발속도와 DX 강화실제 코드를 아래 링크에서 확인 가능합니다.[https://github.com/dosanHoon/t..
WebP vs SVG, 그리고 Next.js에서의 실전 활용법웹 성능 최적화를 고민한다면 "WebP와 SVG, 무엇을 언제 써야 할까?"라는 질문에 한 번쯤은 부딪히게 됩니다.이 포스팅에서는 WebP와 SVG의 차이점과 각각의 장단점, 그리고 Next.js에서의 활용 노하우를 간단하게 정리해봅니다.1. WebP와 SVG의 차이점WebPSVG포맷비트맵(이미지)벡터(수학적 도형, 코드 기반)확대/축소품질 저하 발생무한 확대/축소 가능(손실 無)용도사진, 썸네일, UI 배경 등아이콘, 로고, 일러스트, UI 도형 등용량매우 작음, 압축 효율 좋음단순 도형일 때 매우 작음애니메이션지원(제한적)CSS/JS로 자유로운 애니메이션스타일링불가CSS로 색상·크기·스타일 동적 제어브라우저 지원최신 브라우저 대부분대부분 지..
Figma에서 만든 UI를 자동으로 코드로 생성해주는 대 딸깍의 시대!Cursor IDE와 MCP를 활용해 Figma → React + Tailwind 코드 자동 생성 워크플로우를 구축해보자. ✅ 준비 사항Cursor IDEcursor.sh에서 설치Figma API KeyFigma → Settings → Personal Access Token 발급Node.jsMCP 서버 실행용1️⃣ Figma API Key 발급 https://www.figma.com/settings 접속 Personal Access Tokens에서 Generate new token 토큰 복사 후 안전하게 저장 3 Cursor IDE에 MCP 서버 연동MacOS / Linux{ "mcpServers": { "Framelin..
📘 TIL – 2025.04.14"Ubuntu 서버에 Docker 기반 Nexus 설치 및 내부 레지스트리 구축하기"오늘은 온에어 에셋 프로젝트에서 사용할 사내 Docker Registry로 Nexus Repository OSS를 설치하고,이를 Docker 컨테이너로 구동하면서 겪은 시행착오들을 정리했다.✅ 시도한 작업들1. Ubuntu 서버에 Docker로 Nexus 설치sudo docker run -d \ --name nexus \ -p 8081:8081 \ -v /opt/nexus-data:/nexus-data \ sonatype/nexus3컨테이너 실행 직후 바로 종료되는 문제가 발생로그 확인 결과, 디렉토리 권한 부족으로 로그 디렉토리를 만들지 못하는 에러가 있었다:AccessDenie..
