뚱이의 이모저모 세상 알기 & 개발 일기 😼 뚱이의 이모저모 세상 알기 & 개발 일기 😼

로보틱스에 대한 도메인 지식이 없는 상태에서 로보틱스 회사에 입사한 후, 프론트엔드 업무를 진행하면서 여러 어려움을 겪고 있다.그 중에서 결국 시뮬레이터 로봇을 건들여야하는 상황에서의 경험을 공유하고자 한다. 3D 뷰에서 로봇을 jog(수동 조작)할 때 "느리다 / 안 따라온다 / 가끔 튄다"는 리포트가 들어왔다."랙"이라는 단일 증상 뒤에는 서로 다른 레이어의 원인 네 개가 있었다 — stale ROS2 노드 프로세스, URDF joint limit API 공백, 상태 publish 주기 부재, 입력 중복 발사. 이 글은 증상 이름에 속지 않고 구간별 계측으로 원인을 격리 → 소스에서 수정 → end-to-end 검증하는 루프를 어떻게 돌렸는지에 대한 기록이다. 증상 이름으로 수정 위치를 정하지 ..

GPU 비용의 실체Three.js를 처음 사용할 때는 대부분 이런 흐름으로 시작한다.const scene = new THREE.Scene();const camera = new THREE.PerspectiveCamera();const renderer = new THREE.WebGLRenderer();renderer.render(scene, camera); 처음에는 잘 동작한다.하지만 프로젝트 규모가 커지면 갑자기 문제가 발생한다.FPS 하락GPU 사용량 증가모바일 발열메모리 누수브라우저 탭 크래시특정 기기에서만 느려지는 현상문제는 단순하다. 많은 개발자들이 Three.js API는 배우지만,렌더링 구조 자체는 이해하지 못한 상태로 개발하기 때문이다.Three.js 최적화는 단순 팁 모음이 아니다.GPU가 ..

뭘 만들었나?6m × 6m × 2.7m 크기의 3D 방에 가구를 배치할 수 있는 웹 애플리케이션.카탈로그에서 가구를 선택해 바닥에 배치드래그로 이동R 키로 90도 회전다른 가구와의 충돌 시각화 (빨강 하이라이트)탑뷰 / 원근 카메라 전환배치 내용 자동 저장 & 복원왜 이걸 만들었나?이 프로젝트는 의도적으로 짧은 스코프에 4가지 기술 시연을 담았다:WebGL 시각화 — Three.js로 실시간 렌더링3D 선형대수 — 광선-평면 교점, AABB 충돌 판정성능 최적화 — 50개 가구도 부드럽게 (도메인 설계 — 인테리어 도구의 아키텍처작은 프로젝트지만 "진짜 애플리케이션"으로 동작시키는 것이 목표였다.2. 기술 스택 선택 이유Vite + TypeScript 빠른 개발 루프, 타입 안전↓React + R..

성능 최적화는 코드 몇 줄을 수정하는 작업이 아니다. 네트워크 물리 계층부터 렌더링 메커니즘까지 아우르는, 아키텍처 수준의 설계 영역이다. AI가 보일러플레이트 코드를 대신 작성해주는 시대가 됐다. 그렇다면 개발자의 역할은 무엇일까?"어떻게 구현하느냐"가 아니라 "어떻게 설계하느냐"로 무게 중심이 이동하고 있다. 그 설계의 핵심에는 성능이 있다. 성능은 더 이상 옵션이 아닌, 제품의 핵심 비즈니스 가치다.1. 렌더링의 패러다임 시프트: Partial Prerendering (PPR)오랫동안 프론트엔드 개발자들은 두 가지 선택지 사이에서 하나를 골라야 했다.정적 생성(SSG): CDN에서 즉시 서빙되어 빠르지만, 데이터가 오래된다서버 사이드 렌더링(SSR): 항상 신선한 데이터를 보여주지만, TTFB가 ..

링크, 메모, 이미지를 자유롭게 배치하는 Mini Canvas Board 브라우저 탭 30개를 열어두고 "나중에 봐야지" 라며 북마크에 던져놓거나, 혹은 탭으로 계속 열어두는 경우가 있다.Notion은 이렇게 사용하기에 너무 무겁고, 북마크는 리스트형이라 맥락이 사라지고, 탭을 열어두면 인터넷이 많이 잡아먹는다. "캔버스 위에 자유롭게 올려두기만 하면 되는 가벼운 도구"를 만들자라는 아이디어에서 시작되었다. 코어 기술 스택기술선택 이유Next.js 16 (App Router)RSC + Route Handler로 API까지 한 프로젝트에서 해결React Flow노드 기반 무한 캔버스의 사실상 표준Framer Motion선언적 애니메이션으로 UX 디테일 보강LocalStorage인증 없이 즉시 사용 가능한..

사업을 구상하다보면 "내 아이디어는 이미 레드오션이 아닐까?", "이런 아이디어를 세상에 내놨을 때 괜찮으려나?" 하는 생각이 들 것이다.이런 불안을 단 몇 초만에 보여주는 웹 서비스를 만들었다 Reality Check 1. 왜 만들었나?스타트업 생태계에서 가장 흔한 실수라고 한다면 생태계 조사 하나 없이 이미 포화된 시장에 그냥 뛰어드는 것이다.경쟁자 분석, 시장 조사에만 보통 몇 일 ~ 몇 주가 걸리기도 한다.하지만 빠르게 진행하고 싶은 초기 창업자의 경우 이런 과정을 건너뛰기도 한다.그리고 아직 아이디어 검증을 필요로 하는 예비 창업자의 경우 자신의 아이디어를 검증 받고 싶어 할 것이다. Reality Check는 아이디어를 입력하면 AI가 실시간으로 시장을 검색하고, 유사 제품을 찾고, 포화도/..

Github 35만 stars 프로젝트를 모던 웹앱으로 만들기에 도전했다.사실 이렇게 한 이유는 Github에 있는 것을 보려니 잘 보이지도 않고, 보기도 어려워서 UI/UX로 풀어보고 싶어서였다. Github에서 가장 많은 스타를 받은 레포지토리 중 하나인 free-programming-books 라는 것이 있다.35만개 이상의 stars를 보여한 이 프로젝트는 전 세계 개발자들이 기며하는 무료 프로그래밍 도서 목록이다.한 가지 아쉬운 점이 있다면 이 방대한 자료를 탐색하기가 어렵다는 것이다.Github의 긴 Markdown 파일을 스크롤 해야하고, 보기도 어렵다. 즉, UI/UX가 좋지 않다는 것이었다. 그래서 Free Coders Books를 만들었다.Github의 원본 데이터를 실시가능로 가져..

손그림 스케치를 AI로 고품질 이미지로 변환하는 풀스택 SaaS 서비스인 SketchTo를 소개합니다.Sketch-to SketchTo는 사용자가 러프하게 손그림 스케치를 업로드하면 AI가 선택한 아트 스타일에 맞춰서 고품질 이미지로 변환해주는 서비스이다.Flat icon, Pixel Art, Anima 등 26가지 스타일을 지원하며, 프리미엄 모델 기반의 구독 결제 시스템을 갖추고 있다. Sketch-to Next.js 16 App Router를 사용한 풀스택 개발SketchTo는 Next.js 16 App Router와 Supabase를 기반으로 만들었다.프론트엔드와 백엔드를 하나의 프로젝트에서 관리할 수 있다라는 점이 1인 개발에서 가장 큰 장점으로 차지하고 있다. API Routes 구조app/..