먼저 큰 그림부터 봅시다
Next.js를 배우기 전에 꼭 알아야 할 것이 있습니다. 바로 웹사이트가 어떻게 화면에 나타나는가입니다. 처음부터 코드를 외우려고 하면 어렵습니다. 대신 웹사이트를 "주문하고, 만들고, 받아 보는 과정"으로 생각하면 훨씬 쉽습니다.
우리가 보는 웹사이트는 갑자기 공중에서 나타나는 것이 아닙니다. 브라우저가 어딘가에 있는 서버에 요청을 보내고, 서버가 필요한 파일이나 데이터를 보내 주고, 브라우저가 그것을 읽어서 화면으로 보여 줍니다.
여기서 브라우저는 크롬, 사파리, 엣지 같은 프로그램입니다. 서버는 웹사이트의 재료를 보관하고 보내 주는 컴퓨터 또는 서비스입니다. 파일은 글, 이미지, 디자인 정보, 동작 방식이 담긴 재료입니다. 주소는 그 재료를 어디서 가져와야 하는지 알려 주는 위치표입니다.
이 네 가지를 이해하면 Next.js도 훨씬 덜 낯설어집니다.
AI 생성 이미지
주소창에 URL을 입력하면 무슨 일이 생길까
브라우저 주소창에 https://example.com/about 같은 주소를 입력한다고 생각해 봅시다.
이 과정을 음식점 주문에 비유하면 이렇습니다.
브라우저: 손님
URL 주소: 음식점 주소와 메뉴 이름
서버: 음식점 주방
요청: "이 메뉴 주세요"라고 주문하는 일
응답: 완성된 음식 또는 요리 재료를 받는 일
화면: 손님 앞에 차려진 접시
조금 더 순서대로 보면 다음과 같습니다.
사용자가 브라우저 주소창에 URL을 입력합니다.
브라우저는 그 주소가 가리키는 서버를 찾습니다.
브라우저가 서버에 "이 페이지를 보여 주세요"라고 요청합니다.
서버는 필요한 파일이나 데이터를 브라우저에 보냅니다.
브라우저는 받은 내용을 해석해서 화면을 그립니다.
여기서 중요한 점은 브라우저가 웹사이트 그 자체는 아니라는 것입니다. 브라우저는 웹사이트를 보여 주는 창입니다. 마치 TV가 방송국은 아니지만 방송을 보여 주는 기계인 것과 같습니다.
URL도 어렵게 생각하지 않아도 됩니다. example.com은 가게 주소에 가깝고, /about은 그 가게 안의 특정 메뉴나 방 이름에 가깝습니다. 그래서 /about은 소개 페이지, /contact는 문의 페이지처럼 쓰이는 경우가 많습니다.
Next.js를 배울 때 폴더 이름과 주소가 연결되는 장면을 자주 보게 됩니다. 그때 "주소는 사용자가 들어오는 문이고, 파일은 그 문 뒤에 놓인 내용"이라고 생각하면 됩니다.
HTML, CSS, JavaScript는 각각 무엇을 할까
웹페이지를 만드는 가장 기본 재료는 HTML, CSS, JavaScript입니다. 이름은 낯설지만 역할은 분명합니다.
HTML은 내용입니다. 페이지에 어떤 글이 있고, 어떤 버튼이 있고, 어떤 이미지가 있는지 정합니다. 음식점 메뉴판으로 비유하면 메뉴 이름과 설명입니다.
CSS는 디자인입니다. 글자 크기, 색상, 여백, 배치, 배경색처럼 보기 좋게 꾸미는 일을 맡습니다. 같은 메뉴판이라도 검은 글씨로 작게 적을 수도 있고, 큰 제목과 예쁜 사진으로 꾸밀 수도 있습니다. 이 차이를 만드는 것이 CSS입니다.
JavaScript는 움직임입니다. 버튼을 눌렀을 때 메뉴가 열리고, 입력한 내용에 따라 안내 문구가 바뀌고, 장바구니 수량이 증가하는 식의 반응을 담당합니다. 가만히 붙어 있는 포스터가 아니라, 손님이 만졌을 때 반응하는 안내 기계에 가깝습니다.
간단한 예를 들어 보겠습니다.
"문의하기"라는 버튼 글자: HTML
버튼을 파란색으로 만들고 둥글게 다듬기: CSS
버튼을 누르면 문의 양식이 열리게 하기: JavaScript
Next.js는 이 세 가지를 따로따로 흩어 놓지 않고, 웹사이트를 만들기 좋은 방식으로 묶어 주는 도구입니다. 그래서 Next.js를 배우면 HTML, CSS, JavaScript를 완전히 몰라도 시작은 할 수 있습니다. 다만 이 셋의 역할을 구분할 수 있어야 화면을 바꿀 때 덜 헤맵니다.
프론트엔드와 백엔드는 무엇이 다를까
웹을 배우다 보면 프론트엔드와 백엔드라는 말을 자주 듣습니다. 이 둘은 음식점의 매장과 주방으로 이해하면 쉽습니다.
프론트엔드는 손님이 직접 보는 매장입니다. 웹사이트에서는 사용자가 보는 화면, 버튼, 메뉴, 글자, 이미지, 입력창이 여기에 해당합니다. 브라우저 안에서 보이는 대부분의 것이 프론트엔드입니다.
백엔드는 손님이 직접 보지는 않지만 주문을 처리하는 주방입니다. 회원가입 정보를 저장하고, 게시글 목록을 가져오고, 결제를 처리하고, 이메일을 보내는 일이 여기에 가깝습니다.
예를 들어 블로그 페이지를 생각해 봅시다. 사용자가 보는 게시글 카드의 모양은 프론트엔드입니다. 어떤 게시글을 데이터베이스에서 꺼내 올지 결정하는 부분은 백엔드입니다. 데이터베이스는 정보를 정리해 보관하는 창고라고 생각하면 됩니다.
비개발자가 작은 사이트를 만들 때는 프론트엔드 쪽 작업을 먼저 많이 하게 됩니다. 문구를 바꾸고, 이미지를 넣고, 버튼 위치를 조정하고, 소개 페이지를 만드는 일입니다. 반대로 로그인, 결제, 복잡한 관리자 기능, 보안이 중요한 기능은 전문가에게 맡기는 편이 안전합니다.
Next.js는 주로 화면을 만드는 도구로 시작하지만, 간단한 서버 기능도 함께 다룰 수 있습니다. 그래서 작은 프로젝트에서는 프론트엔드와 백엔드 사이를 어느 정도 이어 주는 역할을 합니다. 하지만 모든 문제를 자동으로 해결해 주는 만능 도구는 아닙니다. 특히 돈, 개인정보, 보안이 연결되는 기능은 신중하게 접근해야 합니다.
웹사이트는 결국 파일과 주소의 약속입니다
웹사이트를 아주 단순하게 말하면 "주소를 입력하면 특정 파일이나 데이터가 화면으로 보이는 것"입니다.
내 컴퓨터에 문서 파일이 있으면 더블클릭해서 엽니다. 웹에서는 사용자가 직접 파일을 더블클릭하지 않습니다. 대신 주소를 입력합니다. 그러면 브라우저가 서버에 있는 파일을 찾아와 화면에 보여 줍니다.
Next.js 프로젝트도 결국 여러 파일과 폴더로 이루어져 있습니다. 어떤 파일은 첫 화면을 담당하고, 어떤 파일은 소개 페이지를 담당하고, 어떤 파일은 반복해서 쓰는 버튼이나 메뉴를 담당합니다.
처음에는 폴더 구조가 복잡해 보일 수 있습니다. 하지만 핵심은 단순합니다.
페이지에 보이는 글을 바꾸고 싶다면 내용이 들어 있는 파일을 찾습니다.
디자인을 바꾸고 싶다면 스타일을 담당하는 부분을 찾습니다.
주소를 추가하고 싶다면 새 페이지가 될 파일이나 폴더를 만듭니다.
앞으로 이 책에서는 코드를 많이 외우게 하기보다 "어떤 파일을 바꾸면 화면의 어느 부분이 달라지는지"를 먼저 보여 줄 것입니다. 비개발자에게 필요한 첫 능력은 완벽한 문법 암기가 아니라, 웹사이트의 구조를 읽는 눈입니다.
Next.js는 왜 단순한 화면 제작 도구가 아닐까
Next.js는 React라는 화면 제작 도구를 바탕으로 한 웹사이트 제작 도구입니다. 여기서 프레임워크라는 말도 자주 나오는데, 프레임워크는 미리 준비된 작업대라고 생각하면 됩니다. 빈 땅에 주방을 처음부터 짓는 대신, 조리대와 도구와 동선이 어느 정도 준비된 주방에서 요리를 시작하는 것입니다.
Next.js가 도와주는 일은 화면 만들기만이 아닙니다.
첫째, 페이지를 구성하기 쉽게 도와줍니다. 폴더와 파일을 일정한 규칙에 맞게 만들면 주소와 페이지가 연결됩니다.
둘째, 속도와 사용자 경험을 챙기는 데 도움을 줍니다. 사용자는 느린 사이트를 오래 기다리지 않습니다. 검색엔진도 페이지가 얼마나 빠르고 안정적으로 보이는지 중요하게 봅니다. Next.js 공식 학습 자료에서도 검색 노출과 웹 성능, 그리고 화면이 사용자에게 어떻게 보이는지를 함께 다룹니다.1
셋째, 검색엔진이 내용을 이해하기 좋은 방식으로 페이지를 준비할 수 있습니다. 검색엔진은 웹을 돌아다니며 페이지 내용을 읽는 로봇을 사용합니다. 그런데 어떤 사이트는 브라우저에서 JavaScript가 실행된 뒤에야 내용이 보입니다. 이 경우 검색엔진이 내용을 바로 파악하기 어려울 수 있습니다. Next.js는 서버에서 미리 내용을 준비하거나, 브라우저에서 필요한 내용을 불러오는 방식 등을 선택할 수 있게 해 줍니다.2
넷째, 배포까지 이어지는 흐름이 비교적 단순합니다. 배포는 내 컴퓨터에서만 보이던 사이트를 인터넷에 공개하는 일입니다. 음식점으로 치면 주방에서 연습으로 만든 음식을 실제 손님에게 판매할 수 있도록 가게 문을 여는 일입니다. 특히 Vercel 같은 서비스와 함께 쓰면 Next.js 프로젝트를 공개하는 과정이 쉬운 편입니다. 이 내용은 뒤에서 GitHub와 함께 차근차근 다룹니다.
지금 기억할 것
이 장에서 모든 용어를 외울 필요는 없습니다. 대신 다음 네 가지만 기억하면 충분합니다.
브라우저는 사용자를 대신해 서버에 페이지를 요청합니다. 서버는 필요한 파일이나 데이터를 보내 줍니다. 브라우저는 받은 재료를 해석해 화면으로 보여 줍니다.
HTML은 내용, CSS는 디자인, JavaScript는 움직임을 맡습니다. 화면에서 무엇을 바꾸고 싶은지 생각할 때 이 세 역할을 구분하면 문제를 찾기 쉬워집니다.
프론트엔드는 손님이 보는 매장이고, 백엔드는 뒤에서 주문을 처리하는 주방입니다. 작은 문구 수정과 화면 구성은 직접 해 볼 수 있지만, 결제나 보안처럼 위험이 큰 기능은 전문가와 협업하는 편이 좋습니다.
Next.js는 웹사이트를 더 체계적으로 만들게 도와주는 도구입니다. 페이지 만들기, 속도, 검색 노출, 배포 흐름까지 함께 다룰 수 있습니다. 하지만 중요한 것은 도구 이름이 아니라 웹의 기본 흐름입니다.
다음 장에서는 Next.js가 정말 필요한 경우와, 굳이 Next.js를 쓰지 않아도 되는 경우를 구분해 보겠습니다. 좋은 도구를 고르는 첫걸음은 그 도구가 필요하지 않은 상황도 아는 것입니다.
참고
이 노트는 보도·비평·교육·연구 목적으로 작성되었습니다. 저작권 문의가 있으시면 에서 알려주세요.