잘 나오던 타일이 갑자기 400을 뱉기 시작했다. 관리자 페이지 접근 권한도 없고, 담당자도 부재중 상태에서 TMS 서비스 URL만으로 원인을 찾아 해결한 기록.문제 상황어제까지 정상적으로 서빙되던 항공영상 타일이 오늘부터 갑자기 400 Bad Request를 반환하기 시작했다. (실제 url과는 다른 예시 url 사용) # A년도 서버 — 정상http://tile-A.example.com/geoserver/gwc/service/tms/1.0.0/my:layer_rgb@EPSG:900913@png/16/56168/39689.png# B년도 서버 — 400 Bad Requesthttp://tile-B.example.com/geoserver/gwc/service/tms/1.0.0/my:laye..

프론트엔드 프로젝트를 시작하면서 모노레포 구조를 선택했다. 초기 설계가 완벽할 거라 생각했지만, 실제 개발이 진행되면서 구조는 계속 바뀌었다. 이 글은 약 8개월간 프로젝트 구조가 어떻게 바뀌었는지, 그리고 각 변화의 이유가 무엇이었는지를 기록한다.배경이 프로젝트는 크게 두 개의 시스템으로 구성돼 있었다.AI 추론 관리 시스템 — AI 모델의 추론 결과를 관리하는 시스템. 코드 관리, 로그 조회, 추론 이력 등 폼/테이블 중심의 CRUD 기능이 주를 이룬다.AI 학습 관리 시스템 — 모델 학습 작업을 관리하는 시스템. 추론 시스템과 독립적으로 배포되고, 대상 사용자도 달랐다.여기까지는 명확했다. 문제는 세 번째 시스템이었다.추론 관리 시스템 안에 GIS 지도 시각화 기능이 포함돼 있었다. OpenLaye..

시작: PPT를 직접 만들면 왜 항상 틀어질까Claude한테 PPT 만들어달라고 하면 결과물이 들쭉날쭉하다. 텍스트가 넘치거나, 요소가 겹치거나, 여백이 이상하거나.처음엔 프롬프트 문제인 줄 알고 더 자세하게 써봤는데 달라지지 않았다. 근본적인 이유는 따로 있었다.PPT는 시각적 피드백이 없다. Claude는 좌표 숫자를 쓸 뿐이고, 실제로 어떻게 보이는지는 PowerPoint를 직접 열어봐야만 안다. 열어보기 전까지는 모른다.그래서 HTML을 중간 단계로 넣는 워크플로우를 만들었다.Claude → HTML 생성 → 브라우저 미리보기 → 레이아웃 확정 → PPT 변환HTML은 브라우저에서 바로 확인할 수 있고, 수정도 즉각 반영된다. 디자인을 HTML에서 완전히 잡고 나서 PPT로 변환하니까 열어보기 전..

상황로컬에서는 멀쩡하게 잘 되던 기능이 배포하고 나서 갑자기 500 에러가 터졌다.Next.js Server Actions를 쓰는 페이지였고, 로컬에선 전혀 재현이 안 됐다. nginx 로그를 보니 요청 자체는 들어오고 있었고, Next.js 쪽에서 500을 반환하고 있었다.원인: Next.js의 CSRF 방어 로직Next.js Server Actions는 CSRF 공격을 방어하기 위해 요청 시 Origin 헤더와 Host 헤더를 비교한다.Origin: https://yourdomain.com ← 브라우저가 보낸 것Host: yourdomain.com ← nginx가 전달한 것두 값이 일치하지 않으면 Next.js는 다른 출처의 요청으로 판단하고 500 에러를 반환한다.문제는 n..

문제 상황항공 이미지나 위성 이미지 데이터는 주로 GeoTIFF(.tif) 포맷으로 저장됩니다. 그런데 브라우저는 TIF 포맷을 네이티브로 지원하지 않아서 태그로 직접 표시할 수 없습니다.[백엔드 서버] → TIF 바이너리 → ??? → [브라우저]해결 방안Next.js API Route에서 TIF → PNG로 변환 후 브라우저에 전달하는 방식을 선택했습니다.[백엔드 서버] → TIF 바이너리 → [Next.js API Route] → PNG 변환 → [브라우저]왜 Next.js API Route인가?대안 문제점백엔드에서 변환백엔드 수정 필요, 추가 작업 요청 필요클라이언트에서 변환geotiff는 가능하나 sharp는 Node.js 전용으로 브라우저에서 불가CDN 변환 서비스추가 인프라 비용, 인증 처..

1. 문제 상황페이지 렌더링 시 브라우저 콘솔에 다음과 같은 붉은 에러 메시지가 출력되었습니다.Uncaught Error: Hydration failed because the server rendered text didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used: 에러 로그를 자세히 살펴보니 서버와 클라이언트의 렌더링 결과가 단 1초 차이로 달랐습니다.* Server: 2026-02-19 15:11:23* Client: 2026-02-19 15:11:24 2. 원인 분석문제는 컴포넌트 본문에 선언된 new Date() 코..

0. 시작하며프론트엔드 개발자에게 API 문서를 보고 Interface를 정의하고, Axios 함수를 짜고, UI 컴포넌트를 만드는 과정은 매우 반복적입니다.최근에는 AI를 활용해 이 과정을 자동화하지만, 수천 줄의 API 명세 파일을 통째로 넣다 보면 비싼 토큰 비용이라는 문제에 직면하게 됩니다. 그래서 실험해봤습니다. "비싼 모델에게 일을 시키기 전, 가성비 모델로 설계를 먼저 시키면 얼마나 이득일까?" 1. 실험 환경 및 도구이번 실험의 핵심은 실시간 비용 추적입니다.LLM: Claude 4.5 Opus (구현), Gemini CLI (전처리)측정 도구: ccusage (터미널에서 AI 사용량과 비용을 즉시 계산해 주는 오픈소스 도구)대상 데이터: 실제 호출 가능한 DummyJSON 기반의 Swag..

클로드 코드(Claude Code)를 쓰다 보면, 어느 순간 얘가 왜 이러나 싶은 순간이 옵니다.잘 짜인 코드를 엉망으로 만들거나, 방금 한 약속을 어겨버리기도 합니다.이 이유가 너무 궁금해 직접 공부하고 정리해 보았습니다. 부족할 수 있지만, 제가 공부한 클로드 코드가 '산'으로 가는 5가지 기술적 이유를 공유합니다. 1. 시점 편향 (Recency Bias)출처 Primacy Bias - EqualturePrimacy bias involves recalling initial information better than later details, serving as a mental shortcut, though not always accurate.www.equalture.com 클로드 코드와 대화하다 ..