KNUD

배경 KNUD 2026 졸업전시 웹사이트의 메인 화면에는 마우스 클릭과 이동에 반응하는 스프레이 인터랙션을 적용하고 있다. 목표는 단순히 점을 늘어놓는 효과가 아니라, 스프레이 캔을 분사했을 때처럼 밀도·번짐·색의 누적이 느껴지는 질감을 만드는 것이다. 이 효과는

스프레이 인터랙션을 만들기 전에 브라우저 내비게이션부터 정리해 보려 했다. 그런데 URL을 입력한 뒤 무슨 일이 일어나는지 따라가다 보니, 그보다 먼저 답해야 할 질문이 있었다. 브라우저는 누가 실행하고, 누가 화면을 그릴까? 마우스를 움직일 때마다 이미지가 나타나

이 글에서 먼저 이해할 것 이번 글은 스프레이 인터랙션을 구현하기 전, 브라우저가 페이지 이동을 시작하고 문서를 렌더러에 넘기는 과정을 학습한 기록이다. 브라우저에서 URL을 입력하거나 링크를 누르는 일은 단순히 “새 페이지를 연다”는 한 문장으로 끝나지 않는다.

이전 글에서 브라우저가 웹 콘텐츠를 처리하는 렌더러 프로세스와 화면을 구성하는 큰 흐름을 정리했다. 이번 글에서는 그 흐름을 KNUD 2026 졸업전시 웹사이트의 Canvas 스프레이 인터랙션에 연결해 본다. 메인 Hero에서 클릭·드래그하면 색이 바뀌는 스프레이가

2편에서 이어서 2편에서는 문서가 렌더러에 도착한 뒤, 화면이 스타일 계·레이아웃·페인트·래스터화·합성을 거쳐 만들어지는 흐름을 Canvas 스프레이에 연결했다. 그다음 질문은 “무엇을 그릴 것인가”가 아니라 “사용자의 입력은 어떤 경로로 들어오고, 어느 빈도로 그리

Figma 시안을 코드로 옮길 때, 에이전트에게 이미지를 한 장 보여 주는 방법과 Figma MCP를 연결하는 방법은 겉보기보다 다른 입력을 제공한다. 첫 번째 방법에서 에이전트는 완성된 픽셀을 본다. 두 번째 방법에서는 픽셀과 함께 레이어·치수·변수·컴포넌트·원본