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년 12월 18일카테고리: Frontend, Claude Code, Design키워드: Claude Code, Plugin, Frontend Design, UI/UX, Anthropic요약Antigravity처럼 "AI가 만든 티가 나지 않는" UI를 Claude Code로도 만들 수 있다. Anthropic에서 제공하는 frontend-design 플러그인을 설치하거나, Frontend Aesthetics Cookbook의 프롬프트 기법을 적용하면 된다. 이 글에서는 두 가지 방법과 실제 적용 결과를 다룬다.문제: AI UI는 왜 다 비슷한가AI로 UI를 생성하면 대부분 비슷한 결과가 나온다.패턴예시폰트Inter, Roboto, Arial색상보라색/파란색 그라데이션레이아웃대칭, 균등 배..

Ory Kratos를 활용한 사용자 인증 시스템 구축: ImpRun 프로젝트 적용 사례작성일: 2025년 12월 6일카테고리: Authentication, Identity, Backend, Frontend키워드: Ory Kratos, Authentication, Identity Management, OAuth, OIDC, Session요약Ory Kratos는 클라우드 네이티브 환경을 위한 오픈소스 ID 관리 시스템이다. 자체적인 로그인/회원가입 UI를 제공하지 않고, API 기반으로 동작하여 프론트엔드에서 완전한 UI 커스터마이징이 가능하다. 이 글에서는 ImpRun 프로젝트에서 Kratos를 Next.js 프론트엔드와 Go 백엔드에 통합한 실제 구현 사례를 다룬다.Ory Kratos 개요Kratos란K..

작성일: 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-03카테고리: Architecture, API Design, Frontend난이도: 중급TL;DR문제: dev/staging/prod 환경 prefix가 Frontend에 노출되어 코드 복잡도 증가 및 네트워크 낭비 (3배)해결: Environment-Agnostic Pattern - Frontend는 환경을 몰라야 한다핵심: 환경 정보는 인프라 레이어(Domain/Subdomain)에서 처리, API 응답은 baseName만 반환결과: 네트워크 비용 66% 감소, Frontend 코드 간결화, 배포 유연성 향상들어가며imprun.dev는 "API 개발부터 AI 통합까지, 모든 것을 하나로 제공"하는 Kubernetes 기반 API Gateway 플랫폼입니다. CloudFuncti..