#프론트엔드
7개의 포스트
2026년 프론트엔드 실전 팁 9가지 — 직접 재현해 보는 함정과 해법
라이브러리 고르는 법을 다룬 지난 글에 이어, 이번에는 매일 코드를 쓰는 사람이 알아야 할 습관 아홉 가지를 정리했습니다. 보안 패치는 기능 업데이트가 아니라는 것(React2Shell, Next.js 8월·9월 보안 릴리스), npm 공급망 공격에 대비해 새 버전을 하루 늦게 받는 법, React Compiler 시대의 '렌더는 순수하게' 규칙과 useEffectEvent, React 19.3과 Next.js 16.3의 변화, INP를 지키는 작업 쪼개기, 라이브러리 전에 확인할 브라우저 기본 기능, 한글 입력 중 Enter 두 번 전송 버그, keep-all·대체 글꼴·Intl로 다듬는 한국어 화면, 그리고 AI가 짠 코드를 브라우저에서 확인하는 습관. 각 팁에는 여러분의 브라우저에서 직접 재현하고 측정하는 데모 6개를 붙였습니다.
2026년 9월 프론트엔드 라이브러리 지도 — 11개 라이브 데모로 직접 보고 고르기
Tailwind·shadcn/ui·Motion·GSAP·Lenis·Three.js는 같은 문제를 푸는 도구가 아닙니다. 스타일, 인터페이스 구조, 상태 변화, 복합 연출, 스크롤 감각, 3D를 각각 맡습니다. 2026년 9월 30일 npm 레지스트리와 GitHub에서 버전·날짜·라이선스를 다시 확인해 역할별로 정리했고, 올해 주목받은 Paper Shaders·Torph·Sileo·Pretext·json-render까지 다뤘습니다. 무엇보다 각 라이브러리를 이 페이지에서 실제로 불러 돌리는 인터랙티브 데모 11개를 붙였습니다. 컨테이너 쿼리로 배치가 바뀌는 카드, Motion의 상태 전환 네 가지, 스크롤로 조종하는 GSAP 타임라인, Lenis와 기본 스크롤 비교, 멈추면 렌더도 멈추는 3D, 셰이더 재질 8종, 한국어 말풍선을 DOM 없이 재는 Pretext, AI가 승인된 컴포넌트로만 화면을 조립하는 json-render를 직접 만져 보고 고르세요.
/docs 하나로 협업하기 — Swagger UI·ReDoc·OpenAPI 제대로 쓰는 법 (FastAPI 입문 3편)
FastAPI가 자동으로 만들어 주는 /docs(Swagger UI), /redoc, /openapi.json 세 주소를 실제 화면 캡처와 함께 설명한다. Try it out으로 요청을 보내고 응답을 읽는 법, tags·summary·description·examples·responses·deprecated로 문서 품질을 끌어올리는 법, openapi.json으로 프론트엔드 타입을 자동 생성하는 법, 운영 환경에서 문서를 닫는 법까지. 체험판 Swagger UI 위젯으로 할 일 API를 직접 호출해 볼 수 있다.
Claude Code 프론트엔드 스킬 가이드 2026 — taste, 디자인 스킬, 이미지 투 코드, Playwright까지
AI가 만든 UI가 전부 비슷하게 생긴 이유는 모델이 아니라 컨텍스트에 있습니다. 2026년 프론트엔드 개발자들이 실제로 쓰는 Claude Code 스킬 5종 — 82K 스타 taste-skill, Anthropic 공식 frontend-design, 시안을 디자인 토큰으로 재구성하는 image-to-code, '눈'을 달아주는 Playwright 스킬, Three.js 스킬 팩 — 을 설치 명령부터 조합 워크플로우까지 정리했습니다. 스킬이 무엇이고 언제 발동되는지, CLAUDE.md와 뭐가 다른지도 함께 다룹니다.
디자이너·프론트엔드를 위한 Codex — 화면을 보고 고치는 AI (Codex Use Cases 특집 3)
프론트엔드의 진짜 난제는 '코드는 맞는데 화면이 안 맞아'다. Codex가 비주얼 피드백 루프, Figma 구조 추출, 초고속 Codex-Spark, 목업·PoC·배포·브라우저 게임으로 디자이너·프론트엔드 작업을 어떻게 바꾸는지 실제 프롬프트와 사례로 풀어봅니다. Codex Use Cases 특집 3편.
AI가 웹을 디자인하는 시대: GPT-5.4 프론트엔드 디자인 완전 해부
OpenAI가 GPT-5.4의 프론트엔드 디자인 역량을 공개했다. '프롬프트 한 줄로 아름다운 웹사이트를 만든다'는 말이 현실이 된 2026년, 웹 디자인 35년 역사의 맥락에서 이 기술이 왜 혁명적인지, 어떻게 활용하는지를 낱낱이 해부한다.
GPT-5.4 프론트엔드 디자인 완전 가이드 — AI가 '예쁜 웹사이트' 만드는 법을 배웠다
OpenAI가 공개한 GPT-5.4 프론트엔드 디자인 가이드를 완전 해부한다. AI가 만든 웹사이트가 왜 다 똑같았는지, 그리고 GPT-5.4가 어떻게 '디자인 감각'을 갖게 됐는지 — 역사, 원리, 실전까지.