imprun engineering

작성일: 2025년 12월 22일카테고리: Frontend, Next.js, Tailwind CSS키워드: Next.js, Tailwind CSS v4, shadcn/ui, next-themes, Dark Mode, CSS Variables요약shadcn/ui의 zinc 테마를 next-themes로 확장할 때 테마 전환이 동작하지 않는 문제가 발생한다. 근본 원인은 text-zinc-400 같은 하드코딩된 Tailwind 색상 클래스가 CSS 변수를 참조하지 않기 때문이다. 이 글에서는 올바른 테마 시스템 설정 방법과 자주 하는 실수, 그리고 색상 사용 가이드를 정리한다.문제 상황: 왜 테마가 깨지는가?전형적인 시나리오shadcn/ui로 Next.js 프로젝트 초기화 (zinc 테마 선택)next-th..

작성일: 2025-11-08카테고리: Frontend, React, Tailwind CSS, Layout, UI/UX난이도: 초급/중급TL;DR문제: 컴포넌트 배치에서 margin 남용, 불필요한 중첩, 반응형 미흡으로 유지보수 어려움해결: Flexbox flex + gap 패턴과 Grid를 활용한 체계적 레이아웃 시스템핵심: "margin을 버리고 gap을 택하라" - 간격은 부모가 관리결과: 코드 약 40% 감소, 다크모드 자동 지원, 반응형 대응 용이들어가며imprun.dev는 "API 개발부터 AI 통합까지, 모든 것을 하나로 제공"하는 Kubernetes 기반 API 플랫폼입니다.프론트엔드 개발에서 컴포넌트 배치는 단순해 보이지만 가장 어려운 과제 중 하나입니다. 초보 개발자는 물론 경험 많은 ..

작성일: 2025-11-08카테고리: CSS, UX, Cross-browser, Web Performance난이도: 초급~중급TL;DR문제: 스크롤바가 나타날 때 콘텐츠가 약 15-17px 밀리며 사용자 경험 저하해결: scrollbar-gutter: stable + Firefox fallback으로 크로스 브라우저 대응핵심: "스크롤바를 항상 표시하지 않고도 공간을 예약할 수 있다"결과: Chrome/Edge/Safari에서 레이아웃 shift 없이 깔끔한 UX 달성들어가며imprun.dev는 "API 개발부터 AI 통합까지, 모든 것을 하나로 제공"하는 Kubernetes 기반 API 플랫폼입니다.Frontend를 개발하면서 스크롤바가 나타날 때마다 페이지가 밀리는 불편한 UX 문제를 발견했습니다. ..