1. 들어가며WebSocket으로 실시간 데이터를 받는 컴포넌트를 구현할 때, 흔히 마주치는 UX 문제가 있습니다. WS 연결이 완료되기까지 (STOMP 핸드셰이크, 구독, 첫 메시지 수신) 수 초가 걸리는 동안 사용자는 스켈레톤 화면만 보게 됩니다. 이를 개선하기 위해 REST로 스냅샷을 먼저 받아 화면을 채우고, 이후 WS 실시간 데이터로 자연스럽게 전환하는 패턴을 도입했습니다. 그런데 이 방식을 단순하게 구현하면 REST와 WS 응답 사이에 경쟁 조건이 발생합니다. 이 글에서는 그 문제와 useRef를 활용한 해결 방법을 정리합니다.2. 문제 상황: REST와 WS가 동시에 달린다호가창 컴포넌트는 아래 두 가지 데이터 소스를 동시에 운용합니다.REST: 컴포넌트 마운트 시 /api/stocks/{s..

1. 들어가며프론트엔드 개발 환경에서 MSW(Mock Service Worker)는 API 목 처리에 있어 거의 표준에 가까운 도구가 되었습니다. REST 요청을 인터셉트하고 가짜 응답을 내려주는 역할을 깔끔하게 수행해 줍니다.그런데 MSW v2부터 WebSocket 인터셉트 기능이 추가되면서 예상치 못한 문제와 마주쳤습니다. 실제 백엔드 WebSocket 서버에 연결해야 하는 상황인데, MSW가 포트와 URL을 가리지 않고 브라우저의 모든 WebSocket 연결을 가로채 버린 것입니다.이 글은 그 문제를 해결하기 위해 시도했던 방법들과 최종적으로 SockJS의 특성을 이용해 우회한 과정을 공유합니다.2. 문제 상황: MSW v2의 WebSocket 전면 인터셉트프로젝트는 호가창(주문서) 데이터를 STO..

1. 들어가며셰이더를 처음 공부할 때 가장 큰 장벽은 환경 세팅입니다. OpenGL 컨텍스트를 만들고, 컴파일 파이프라인을 구성하고, 렌더링 루프를 짜야 비로소 "Hello, Triangle"을 볼 수 있습니다.Shadertoy는 그 과정을 브라우저 하나로 압축합니다. 계정을 만들고 접속하면, 코드를 작성하는 즉시 결과가 화면에 렌더링됩니다. 별도의 IDE도, 그래픽스 드라이버 설정도 필요 없습니다. 이 글에서는 Shadertoy의 기본 구조와 핵심 유니폼 변수를 정리하고, 실제로 이 플랫폼을 활용해 제가 구현한 NPR 셰이더들이 어떤 원리로 동작하는지 간략하게 소개합니다.2. Shadertoy가 뭔가요?Shadertoy는 Inigo Quilez(iq)와 Pol Jeremias가 만든 웹 기반 GLSL ..

Projects · 셰이더 개발 셰이더 개발 NPR Shaders진행 중 실시간 GLSL을 활용하여 구현한비사실적 렌더링(NPR) 기법 연구 및 셰이더 컬렉션 GLSL HLSL Unity URP Shadertoy C# Overview Period 2026.03 – 진행 중 Type 개인 프로젝트 Role Technical Artist / 셰이더 개발 Platform Shadertoy (GLSL) · Unity URP / Built-in Background 현대 그래픽스 엔진에서 실사 렌더링은 이미 보편화되었으나, 개발자가 빛..

Projects · 웹 프론트엔드 웹 프론트엔드 AssetMind진행 중 Figma 디자인부터 디자인 시스템 구축, 실서비스 API 연동까지UI 개발을 전담한 금융자산관리 웹 서비스 React TypeScript Tailwind CSS Storybook Zustand React Query WebSocket (STOMP) MSW Vite Figma Vercel Overview Period 2026.01 – 2026.06 (진행 중) Team 4인 팀 프로젝트 (UI · UX · 백엔드 · 데이터) Platform Web — PC / Tablet..

1. 들어가며VR 개발에서 프레임레이트는 단순한 성능 지표가 아닙니다. Meta Quest 2의 권장 프레임레이트는 72fps인데, 이를 밑돌면 화면 끊김이 신체적인 불쾌감, 즉 멀미로 직결됩니다.이 글은 나폴리탄 괴담 장르를 기반으로 제작한 Meta Quest 2용 1인칭 VR 공포 어드벤처 게임 Line 0를 개발하던 중 마주친 프레임 저하 문제를 해결한 과정을 공유합니다. 단순히 성능을 끌어올리는 것에서 그치지 않고, 최적화 과정에서 생긴 한계를 공포 게임의 연출로 커버한 경험이기도 합니다.2. 문제 상황: 30fps, 멀미가 나는 게임초기 빌드를 플레이테스트했을 때 프레임레이트가 30fps 언저리에 머물렀습니다. 일반 게임이라면 "조금 버벅이는 수준"으로 넘길 수 있지만, VR에서는 달랐습니다. ..

1. 들어가며프론트엔드 개발을 진행하다 보면 디자인 형태는 완전히 동일하지만, 주입되는 데이터의 구조가 달라 매번 새로운 컴포넌트를 생성해야 하는 상황을 마주하게 됩니다.특히 금융 도메인이나 대시보드 형태의 서비스를 개발할 때 이러한 문제가 자주 발생합니다. 주식, 현금, 부동산 등 각 자산군마다 백엔드에서 내려주는 API 응답 형태가 다르기 때문입니다. 이 글에서는 이러한 상황에서 TypeScript의 제네릭을 활용하여 컴포넌트를 유연하게 추상화하고 중복 코드를 제거한 과정을 공유합니다.2. 문제 상황: 늘어나는 보일러플레이트와 중복 코드초기에는 직관적인 구현을 위해 데이터 타입별로 컴포넌트를 분리했습니다. 백엔드에서 전달받는 주식과 현금 데이터의 타입은 다음과 같이 서로 다른 필드명을 가지고 있었습니..

Projects · 딥러닝 딥러닝 악성 URL 분류딥러닝 모델 URL 문자 시퀀스와 보안 도메인 지식 기반 수작업 특성을 결합한하이브리드 멀티 인풋 딥러닝 탐지 모델 Python TensorFlow / Keras LSTM Pandas scikit-learn Google Colab Overview Period 2025.05 – 2025.06 Type 개인 프로젝트 Role AI 모델 설계 · 데이터 전처리 및 분석 Dataset Kaggle Malicious URLs Dataset (651,195개) Background 새로운..

Projects · AI / XAI AI / XAI XAI 기반네트워크 침입 탐지 시스템 설명 가능한 인공지능(XAI)을 활용한 네트워크 침입 탐지 시스템 개발 — 졸업논문 Python XGBoost SHAP LIME scikit-learn Pandas Google Colab Overview Period 2025.03 – 2025.11 Type 개인 프로젝트 (졸업논문) Role AI 모델 설계 · XAI 파이프라인 구축 전담 Dataset UNSW-NB15 (82,332 / 175,341 샘플) Background 기..

Projects · 2D 게임 개발 2D 게임 개발 Beyond theDoor of Memory 무의식 속 꿈의 공간을 배경으로 기억 조각을 수집하며 진실을 찾는2D 감정 서사형 어드벤처 게임 Unity 2D C# Coroutine State Machine PC (Windows) Overview Period 2025.03 – 2025.06 Team 2인 팀 프로젝트 Role 클라이언트 개발 (조작 시스템 및 기능 구현) Platform PC (Windows) Background 플레이어의 선택에 따라 결말이 달라지는 몰입형 감정 ..