AI와 함께 Next.js를 배우고 고치기

AI는 대신 운전하는 사람이 아니라 옆자리 안내자다

Next.js를 배우다 보면 막히는 순간이 자주 온다. 에러 메시지는 길고, 파일은 많고, 검색 결과는 개발자용 설명으로 가득하다. 이때 ChatGPT 같은 AI 도구는 좋은 학습 파트너가 될 수 있다.

다만 AI를 '내 사이트를 통째로 고쳐 주는 사람'으로 생각하면 위험하다. AI는 프로젝트 안의 모든 맥락을 정확히 알지 못한다. 지금 사용하는 Next.js 버전, 폴더 구조, 이전에 만든 컴포넌트, 배포 설정을 놓칠 수 있다. 가끔은 그럴듯하지만 틀린 코드를 제안하기도 한다.

더 안전한 태도는 이렇다.

• AI에게 전체를 맡기지 않는다.

• 작은 문제 하나씩 질문한다.

• 붙여넣기 전에 무엇이 바뀌는지 확인한다.

• 실제 화면과 에러 메시지로 검증한다.

AI는 내비게이션과 비슷하다. 길을 제안해 주지만, 운전대는 내가 잡고 있어야 한다.

AI 생성 이미지

큰 요청보다 작은 요청이 잘 통한다

비개발자가 AI에게 자주 하는 질문은 너무 크다.

• 내 사이트를 전문가처럼 고쳐 줘.

• 이 코드를 전부 정리해 줘.

• 에러가 나는데 알아서 해결해 줘.

이런 요청은 결과가 불안정하다. AI가 너무 많은 파일을 바꾸자고 하거나, 지금 프로젝트와 맞지 않는 구조를 제안할 수 있다. 특히 Next.js에는 app 폴더를 쓰는 방식과 예전 pages 폴더 방식이 함께 검색된다. AI가 예전 방식으로 답하면 초보자는 바로 알아차리기 어렵다.

요청은 작게 나누자.

• app/page.tsx의 첫 문장을 더 친절하게 바꾸고 싶다.

• components/Header.tsx의 메뉴 간격을 조금 넓히고 싶다.

• /contact 페이지의 버튼 색을 파란색에서 검은색으로 바꾸고 싶다.

• 이 에러 메시지가 무슨 뜻인지 쉬운 말로 설명해 달라.

• 이 코드를 붙여넣으면 어느 파일의 어느 부분이 바뀌는지 먼저 설명해 달라.

작은 요청은 결과를 확인하기 쉽다. 화면에서 바뀐 부분도 바로 보인다. 문제가 생겨도 되돌릴 범위가 좁다.

좋은 질문에는 세 가지가 들어간다

AI에게 질문할 때는 최소한 세 가지를 알려 주면 좋다.

첫째, 어떤 파일에서 문제가 생겼는지다. 예를 들어 app/page.tsx, components/Header.tsx, app/layout.tsx처럼 파일 경로를 적는다. 파일 경로는 건물 안의 방 번호와 같다. AI가 어느 방을 봐야 하는지 알아야 한다.

둘째, 지금 보이는 에러 메시지다. 에러 메시지는 문제의 단서다. 길더라도 핵심 문장을 그대로 붙여넣는 것이 좋다. 단, 비밀번호, API 키, 개인정보는 절대 붙여넣지 않는다.

셋째, 원하는 결과다. '고쳐 줘'보다 '상단 메뉴가 모든 페이지에서 보이게 하고 싶다'가 훨씬 좋다.

아래 템플릿을 복사해 사용해도 된다.

• 상황: Next.js App Router를 사용하고 있고, app 폴더가 있다.

• 목표: 어떤 화면을 어떻게 바꾸고 싶은지 적는다.

• 파일 경로: 문제가 있는 파일 이름을 적는다.

• 현재 코드: 관련된 부분만 짧게 붙여넣는다.

• 에러 메시지: 브라우저나 터미널에 나온 핵심 문장을 붙여넣는다.

• 이미 확인한 것: 저장 여부, 개발 서버 실행 여부, 파일명 확인 여부를 적는다.

• 원하는 답변 방식: 먼저 쉬운 설명을 해 주고, 그다음 수정할 코드만 알려 달라고 요청한다.

예를 들어 이렇게 질문할 수 있다.

상황: Next.js App Router를 사용합니다. app 폴더가 있고 TypeScript와 Tailwind CSS를 씁니다.
목표: 모든 페이지 상단에 Header 컴포넌트를 보이게 하고 싶습니다.
파일 경로: app/layout.tsx, components/Header.tsx
에러 메시지: Module not found: Can't resolve '@/components/Header'
원하는 답변: 에러 뜻을 쉬운 말로 설명한 뒤, 확인 순서를 알려 주세요. 코드는 한 번에 많이 바꾸지 말고 필요한 부분만 제안해 주세요.

이렇게 질문하면 AI는 단순히 코드를 던지는 대신, 파일 위치와 import 경로를 확인하라는 식으로 더 현실적인 답을 줄 가능성이 높다.

붙여넣기 전에 반드시 백업한다

AI가 제안한 코드를 바로 붙여넣고 저장하면 빠르다. 하지만 빠른 만큼 위험하다. 특히 여러 파일을 한 번에 바꾸면 어디서 문제가 생겼는지 찾기 어렵다.

안전한 순서는 다음과 같다.

1. 현재 화면이 정상인지 확인한다.

2. GitHub Desktop이나 VS Code에서 현재 변경 내용을 commit한다.

3. commit이 어렵다면 파일 전체를 복사해 메모장에 임시 보관한다.

4. AI에게 '어떤 파일의 어떤 부분이 바뀌는지 먼저 설명해 달라'고 요청한다.

5. 한 번에 한 파일, 가능하면 한 영역만 바꾼다.

6. 저장 후 http://localhost:3000에서 화면을 확인한다.

7. 터미널에 새 에러가 생겼는지 확인한다.

8. 괜찮으면 다음 변경으로 넘어간다.

여기서 commit은 저장 지점이다. 게임에서 중간 저장을 해 두는 것과 비슷하다. 잘못 바꿨을 때 이전 상태로 돌아가기 쉽다.

AI가 아래와 같은 말을 한다면 멈추고 다시 질문하자.

• 프로젝트 구조를 전부 바꾸세요.

• 이 폴더를 삭제하세요.

• 여러 패키지를 한 번에 설치하세요.

• next.config나 tsconfig를 크게 수정하세요.

• .env.local 내용을 보여 주세요.

이런 작업은 영향 범위가 넓다. 초보자가 혼자 처리하기보다 개발자에게 확인받는 것이 안전하다.

AI에게 보여 줘도 되는 것과 안 되는 것

AI에게 질문할 때는 정보를 충분히 주어야 하지만, 아무 정보나 주면 안 된다.

보여 줘도 되는 정보는 다음과 같다.

• 파일 경로

• 공개되어도 되는 화면 코드 일부

• 에러 메시지

• 원하는 화면 설명

• Tailwind CSS 클래스 일부

• 배포 실패 로그 중 개인정보가 없는 부분

보여 주면 안 되는 정보는 다음과 같다.

• .env.local 파일 내용

• API 키

• 비밀번호

• 결제 서비스 비밀 키

• 데이터베이스 접속 주소와 비밀번호

• 고객 이름, 이메일, 전화번호 같은 개인정보 목록

• GitHub 토큰, Vercel 토큰

비밀 값은 집 열쇠와 같다. 에러 해결을 위해 열쇠 모양을 설명할 수는 있지만, 실제 열쇠를 건네면 안 된다.

비개발자가 AI를 잘 활용할 수 있는 영역

AI는 모든 코딩을 대신하기보다, 비개발자의 강점과 만날 때 더 유용하다. 특히 콘텐츠, 디자인 방향, 설명 정리에 강하다.

먼저 문구 개선에 좋다. 랜딩페이지의 제목, 소개 문장, 버튼 문구, FAQ 답변을 여러 버전으로 받아 볼 수 있다.

예를 들어 이렇게 물어볼 수 있다.

개인 브랜딩 사이트의 첫 화면 문구를 만들고 싶습니다. 방문자는 소상공인이고, 제가 제공하는 서비스는 홈페이지 제작입니다. 너무 과장하지 말고 신뢰감 있게 제목 5개와 설명 문장 5개를 제안해 주세요.

SEO 설명문에도 활용할 수 있다. SEO는 검색엔진이 페이지 내용을 이해하도록 돕는 작업이다. 가게 간판과 메뉴판을 검색엔진이 읽기 쉽게 정리하는 것이라고 생각하면 된다.

/services 페이지의 검색 결과 설명문을 150자 안팎으로 작성해 주세요. 대상은 작은 회사 대표이고, 핵심 키워드는 홈페이지 제작, 랜딩페이지, 유지보수입니다.

디자인 개선에도 쓸 수 있다. 단, '예쁘게'라고만 하지 말고 화면의 목적을 말해야 한다.

현재 소개 페이지가 너무 밋밋합니다. 신뢰감 있는 B2B 서비스 느낌으로 Tailwind CSS className을 조정하고 싶습니다. 배경, 제목, 카드, 버튼의 방향을 설명한 뒤 예시를 제안해 주세요.

에러를 번역하는 데도 좋다. 에러 메시지는 영어로 나오는 경우가 많다. AI에게 '초등학생도 이해할 수 있게' 또는 '비개발자에게 설명하듯이'라고 요청하면 의미를 파악하기 쉽다.

코드 리뷰에도 활용할 수 있다. 여기서 코드 리뷰는 코드를 읽고 문제나 개선점을 찾는 일이다. 다만 처음부터 전체 파일을 맡기지 말고, 짧은 코드에 대해 물어보자.

• 이 컴포넌트 이름이 적절한가?

• 이 데이터 배열에서 오타가 있는가?

• 이 JSX 태그가 제대로 닫혀 있는가?

• 이 Tailwind 클래스 중 중복되거나 의미 없는 것이 있는가?

AI 답변을 검증하는 다섯 가지 질문

AI 답변은 틀릴 수 있다. 그래서 답변을 받은 뒤 바로 적용하지 말고, 아래 질문을 스스로 던져 보자.

첫째, 이 답변이 내 프로젝트 구조와 맞는가?
내 프로젝트가 app 폴더를 쓰는데 AI가 pages/index.tsx를 만들라고 한다면 조심해야 한다. 지금 책에서 사용한 흐름은 App Router 기준이다.

둘째, 바꾸는 파일이 너무 많지 않은가?
작은 문구 수정인데 5개 파일을 바꾸라고 하면 과할 수 있다. 먼저 더 작은 해결책이 있는지 물어보자.

셋째, 화면에서 무엇이 달라지는지 설명할 수 있는가?
설명할 수 없다면 아직 붙여넣지 않는 편이 좋다. AI에게 '이 코드를 적용하면 화면에서 무엇이 바뀌나요?'라고 다시 묻자.

넷째, 에러가 사라졌는지 실제로 확인했는가?
AI가 맞다고 말해도 브라우저와 터미널이 맞다고 말해야 한다. npm run dev 상태에서 화면을 열고, 필요한 경우 배포 전 npm run build도 확인한다.

다섯째, 공식 문서나 믿을 만한 자료와 충돌하지 않는가?
Next.js 설정, 이미지 처리, 메타데이터, 배포, 서버 기능처럼 중요한 부분은 공식 문서를 함께 확인하는 습관이 좋다. 검색할 때는 Next.js App Router metadata, Next.js Image component, Vercel Next.js build error처럼 영어 키워드를 쓰면 자료를 찾기 쉽다.

직접 해도 되는 일과 전문가에게 맡길 일

AI와 함께라면 비개발자도 할 수 있는 일이 꽤 많다.

직접 해도 좋은 일은 다음과 같다.

• 페이지 문구 다듬기

• 버튼 문구 바꾸기

• 이미지 설명문 작성하기

• SEO 제목과 설명 초안 만들기

• Tailwind CSS로 여백, 색상, 글자 크기 조정하기

• 반복되는 카드 내용을 데이터 파일에 추가하기

• 에러 메시지 뜻을 이해하고 확인 순서 만들기

• 배포 실패 로그를 정리해 질문하기

전문가에게 맡기면 좋은 일도 분명하다.

• 로그인과 권한 관리

• 결제 기능

• 개인정보 저장과 삭제

• 데이터베이스 설계

• 관리자 페이지

• 서버 API 구현

• 보안 설정

• 대규모 성능 최적화

• 큰 버전 업그레이드

• 회사 운영 사이트의 장애 대응

기준은 간단하다. 잘못되어도 문구나 디자인만 깨지는 일은 직접 시도해 볼 수 있다. 돈, 개인정보, 계정, 보안, 고객 데이터가 관련되면 전문가와 함께 진행하는 것이 안전하다.

AI와 함께 배우는 가장 좋은 방식

AI를 잘 쓰는 사람은 질문을 잘게 나눈다. 그리고 답을 그대로 믿지 않는다. 설명을 듣고, 작은 부분을 바꾸고, 화면에서 확인한다. 문제가 생기면 에러 메시지를 다시 읽고, 변경한 부분을 되돌릴 수 있게 준비한다.

Next.js 학습에서 중요한 것은 모든 문법을 외우는 것이 아니다. 파일이 어떤 역할을 하는지 알고, 원하는 화면을 작은 단위로 설명하고, 문제가 생겼을 때 도움을 요청할 수 있으면 된다.

다음 장에서는 지금까지 배운 내용을 모아 작은 Next.js 사이트를 완성한다. AI는 그 과정에서 문구를 다듬고, 에러를 설명하고, 개선 아이디어를 주는 조력자가 될 수 있다. 하지만 최종 판단은 항상 실제 화면, 내 목표, 안전한 작업 절차를 기준으로 해야 한다.