위 이미지는 Gemini Nano Banana를 통해 제작했습니다.들어가며사이드바가 잠깐 사라졌다가 다시 나타나는 현상은 작은 디테일처럼 보이지만,앱 셸의 완성도를 크게 떨어뜨린다.이 글은 "사이드바 접힘 상태를 어디에 저장하는 것이 맞는가"를 정리한 기록이다.문제 상황ChatGPT나 Claude처럼 사이드바가 앱의 기본 크롬(chrome) 역할을 하는 서비스에서는, 첫 페인트부터 접힘/펼침 상태가 안정적으로 유지되어야 한다.사이드바를 구현하면서 핵심적으로 다룬 문제는 두 가지였다.강제 새로고침 시 사이드바 상태가 유지되어야 한다.첫 페인트에서 사이드바가 안 보였다가 나타나는 hydration flicker가 없어야 한다.기존 구현에서 생긴 문제처음 구현은 클라이언트 상태 저장 관점에서는 자연스러웠다. ..

위 이미지는 Gemini Nano Banana를 통해 제작했습니다.들어가며면접에서 "OSI 7계층 설명해주세요"라고 물으면, 많은 사람이 1계층부터 순서대로 외운 내용을 말합니다.그런데 "그래서 개발할 때 왜 알아야 하나요?"라고 묻는 순간 답이 흐려지는 경우가 많습니다.중요한 건 계층 이름을 암기하는 것이 아니라, 내가 겪는 문제가 어느 층위의 문제인지 구분할 수 있는 감각입니다.OSI 7계층이란?OSI(Open Systems Interconnection) 7계층은 국제표준화기구(ISO)에서 제시한 네트워크 통신 참조 모델입니다.네트워크 통신 과정을 7개의 역할로 나누어 바라보는 틀이라고 보면 됩니다.이 모델의 핵심은 “현실의 인터넷이 정확히 이렇게 구현되어 있다”가 아니라,통신 과정에서 어떤 책임과 ..

※ 본 썸네일은 나노바나나 AI를 통해 생성된 합성 데이터입니다."손상된 옷 이미지가 100장밖에 없는데, 어떻게 학습시키지?"들어가며의류 품질 검사 AI 프로젝트를 진행하면서 만난 현실적인 문제다.데이터 현황:- 정상 의류: 10,000장- 손상 의류: 100장- 오염 의류: 50장문제: 극심한 클래스 불균형팀 회의에서 나온 해결책들:A: "회전시키고 노이즈 주면 되지 않나요?"B: "나노바나나로 생성하면 되잖아요."C: "그냥 복사해서 늘리면 안 돼요?"다들 맞는 말인데, 정확한 용어를 몰라서 소통이 어려웠다.오늘은 AI 데이터 처리에서 가장 헷갈리는 3가지 개념을 정리한다.핵심 용어 3가지1. Data Augmentation (데이터 증강)정의:기존 데이터를 "변형"해서 다양성을 늘리는 기법핵심:❌..

시리즈 마지막 편입니다. 이번에는 코드 이야기가 아니라 프로젝트를 만들면서 느낀 점, 그리고 실제 프로덕션 트레이딩 플랫폼을 만든다면 어떤 점들을 더 고려해야 하는지 정리해봤습니다.전체 소스코드는 GitHub에 공개되어 있습니다.git clone https://github.com/kimkuns91/upbit-realtime-dashboard.gitcd upbit-realtime-dashboardnpm install && npm run dev1. 왜 이 프로젝트를 만들었는가평소에 궁금했던 게 있었습니다. 주식이든 코인이든, 트레이딩 화면을 보면 숫자가 쉴 새 없이 바뀝니다. 호가창, 체결 내역, 캔들 차트가 동시에 움직입니다. 이걸 프론트엔드에서 어떻게 처리하는 걸까?React로 일반적인 CRUD 앱을 만..

업비트 실시간 대시보드 시리즈 마지막 편입니다. 호가창(Order Book)을 3가지 방식으로 구현하고 실제 성능을 비교해봤습니다.전체 소스코드는 GitHub에 공개되어 있습니다. /benchmark 페이지에서 3가지 방식의 성능 차이를 직접 확인할 수 있습니다.git clone https://github.com/kimkuns91/upbit-realtime-dashboard.gitcd upbit-realtime-dashboardnpm install && npm run dev# http://localhost:3000/benchmark 접속1. 왜 호가창이 어려운가?호가창은 프론트엔드에서 구현 난이도가 가장 높은 컴포넌트 중 하나입니다. 이유는 단순합니다.업비트 WebSocket으로 초당 10~20회 호가 ..

업비트 실시간 대시보드 시리즈 2편입니다. 이전 글에서 WebSocket 파이프라인을 구축했고, 이번에는 그 위에 캔들 차트를 올립니다. REST API로 과거 200개 캔들을 불러오고, WebSocket 체결 데이터로 마지막 캔들을 실시간 업데이트하는 구조입니다.전체 소스코드는 GitHub에 공개되어 있습니다.git clone https://github.com/kimkuns91/upbit-realtime-dashboard.gitcd upbit-realtime-dashboardnpm install && npm run dev1. 왜 TradingView Lightweight Charts인가?금융 차트 라이브러리를 고를 때 D3.js, Recharts, ECharts 등을 검토했습니다. 결론은 Lightwe..

업비트 Public WebSocket API를 사용해서 실시간 암호화폐 트레이딩 대시보드를 만들어본 기록입니다. 이번 1편에서는 WebSocket 연결부터 React 훅으로 래핑하는 과정까지 다룹니다.전체 소스코드는 GitHub에 공개되어 있습니다. 직접 클론해서 돌려보실 수 있습니다.git clone https://github.com/kimkuns91/upbit-realtime-dashboard.gitcd upbit-realtime-dashboardnpm install && npm run dev1. 왜 WebSocket인가?실시간 암호화폐 데이터를 프론트엔드에서 보여주려면 선택지가 몇 가지 있습니다. Polling, SSE(Server-Sent Events), WebSocket.호가창은 초당 10~20..

Claude Code의 실험 기능인 Agent Teams를 Next.js 프로젝트에서 직접 돌려본 후기입니다. 팀 리드가 태스크를 분배하고, 3명의 팀메이트가 병렬로 코드를 작성하는 과정을 확인했습니다.1. 왜 해봤나?Claude Code는 원래 "하나의 AI가 하나의 세션에서 일하는" 구조입니다. 하지만 실제 개발은 그렇지 않습니다. 프론트 따로, 백엔드 따로, 테스트 따로 — 사람이 팀으로 일하듯이 AI도 팀으로 일하면 어떨까요?Anthropic이 Opus 4.6 출시와 함께 Agent Teams라는 실험 기능을 내놓았습니다. 여러 Claude Code 세션이 팀처럼 협업하는 기능입니다. 한 세션이 리드가 되고, 나머지가 팀메이트로 각자 독립된 컨텍스트에서 작업하면서 서로 메시지를 주고받습니다.기존 ..

Nginx vs AWS API Gateway vs GCP API Gateway — 우리 팀이 Nginx를 선택한 이유최근 물류 센터 자동화 프로젝트를 진행하면서, AI 추론(Inference) 서버와 일반 백엔드(Data Ops/Orchestrator) 서버를 물리적으로 분리하는 작업을 진행했습니다. GPU가 필요한 무거운 작업과 일반적인 CPU 작업을 나누어 자원 효율을 극대화하기 위함입니다.하지만 이렇게 서버를 분리하고 나니 진입점(Entry Point) 문제가 발생했습니다.1. 직면한 문제: 클라이언트가 너무 많은 주소를 알아야 한다서버를 기능별로 분리하니 네트워크 구성이 아래와 같이 되었습니다.서버역할주소GPU 서버Inference192.168.1.101:8001CPU 서버Data Ops192.1..

"이거... 폴더 이름 실수로 두 번 쓴 거 아닌가?"들어가며사내 물류 자동화 시스템을 Turborepo 모노레포로 구축하던 중이었다.packages/└── common/ ├── pyproject.toml └── common/ ← 이게 뭐야? ├── __init__.py └── utils.py처음 보는 사람은 십중팔구 "폴더명 중복 아니냐"고 묻는다. 나도 그랬다."Hatchling 설정을 잘못 건드린 건가?""common 하나만 있으면 되는 거 아닌가?"결론부터 말하면, 이건 실수가 아니다. Python 패키징의 정석 중 하나인 Flat Layout이다.하지만 팩트 체크를 하다가 충격적인 사실을 알았다. requests, 그 유명한 requests도 ..