Figma에서 완벽해 보이던 화면은 브라우저에 올라가는 순간 다른 조건을 만납니다. 화면 크기는 달라지고, 데이터는 길거나 비어 있으며, 이미지는 늦게 로딩되고, 사용자는 우리가 예상하지 못한 방식으로 움직입니다. 이 책은 그 간극을 줄이고 싶은 프로덕트 디자이너를 위한 Next.js 입문서입니다.
목표는 디자이너를 개발자로 바꾸는 것이 아닙니다. 대신 웹 제품이 어떤 구조로 만들어지는지 이해하고, 개발자와 더 정확하게 협업할 수 있는 언어를 갖는 것입니다. React 컴포넌트를 Figma 컴포넌트에, props를 Component Properties에, 라우팅을 프로토타입 흐름과 실제 URL에, 스타일링을 디자인 토큰에 빗대어 차근차근 설명합니다.
책 전체에서는 하나의 포트폴리오 사이트를 관통 프로젝트로 삼습니다. 첫 페이지를 만들고, 스타일을 입히고, 프로젝트 데이터를 분리하고, 마지막에는 Vercel에 배포해 실제 URL을 얻는 흐름까지 경험합니다. 코드를 많이 외우기보다 "파일 하나가 페이지가 되고, 컴포넌트가 화면 조각이 되고, 데이터가 콘텐츠를 채우고, 배포가 사용자에게 닿는 길을 만든다"는 감각을 얻는 데 초점을 둡니다.
각 장 끝에는 '디자이너가 개발자에게 이제 할 수 있는 질문'을 담았습니다. 이 질문들은 핸드오프를 더 구체적으로 만들고, QA를 덜 막연하게 하며, 시안이 실제 제품이 되는 과정을 함께 설계하도록 도와줄 것입니다.
