기술 인사이트
퀵스타트 개발 과정에서 축적된 기술 노하우를 공유합니다.
디자인 토큰 & 테마 색상 시스템 — SCSS 변수로 브랜드 아이덴티티 구축하기
색상 팔레트를 단순한 HEX 코드 모음이 아닌, 의미 있는 설계 시스템으로 만드는 방법. 시맨틱 토큰 구조와 SCSS 변수 설계 패턴...
AI에게 UI 디자인을 요청하는 프롬프팅 전략 — Claude·GPT로 시안 만들기
AI에게 "예쁜 버튼 만들어줘"라고 요청하면 실망스러운 결과가 나옵니다. 제약 조건·레퍼런스·역할 정의를 담은 구조적 프롬프트...
피그마에서 SCSS로 — 디자이너·개발자 핸드오프 실전 가이드
피그마 디자인을 코드로 옮기는 과정에서 발생하는 오해와 손실을 최소화하는 방법. 토큰 추출, 컴포넌트 명명 규칙, 스페이싱...
반응형 타이포그래피 시스템 설계 — 웹 가독성의 과학
폰트 크기를 픽셀로 하드코딩하는 시대는 끝났습니다. Type Scale, clamp()로 유동적 폰트 크기, 한글 웹폰트 최적화, 줄간격 황...
Laravel 10 → 12 업그레이드 완전 가이드
PHP 최소 버전, AppServiceProvider 재구성, Pest 도입, Vite 전환까지 — 실제 프로젝트에서 겪은 이슈와 체크리스트를 단계별로...
PHP + Laravel + Vite + Node.js 개발환경 완전 설정 가이드
Windows 10/11 환경에서 PHP 8.2, Composer, Laravel, Node.js, Vite를 설치하고 첫 프로젝트를 실행하기까지 — 막히는 포인트...
CLAUDE.md 작성법 — AI 코딩 어시스턴트에게 프로젝트를 가르치는 기술
Claude Code, Cursor, Copilot 같은 AI 코딩 도구는 프로젝트 컨텍스트를 정확히 알수록 더 나은 결과를 냅니다. 효과적인 CLAUD...
WebSocket 기술 발전사 — Long Polling에서 Laravel Echo까지
실시간 웹 통신은 어떻게 진화해왔을까요? Polling → Long Polling → SSE → WebSocket → Socket.io → Laravel Echo까지 각 기술...
SCSS 기초 완전 정복 — 변수부터 모듈 구조까지
CSS의 한계를 극복한 SCSS(Sass)의 핵심 문법을 정리합니다. 변수, 중첩, Mixin, @use, 모듈 구조까지 — 실무에서 바로 쓸 수 있...
Vue 3 + Laravel Blade 인라인 통합 패턴 — SPA 없이 반응형 UI 만들기
별도 빌드 없이 Blade 템플릿 안에서 Vue 3 앱을 인라인으로 마운트하는 패턴을 소개합니다. 쇼케이스 필터, 데이터 테이블, 동...