첫 페이지를 내 손으로 바꾸기

오늘의 목표: 화면에 보이는 글자를 직접 바꾸기

이 장에서는 처음으로 Next.js 화면을 내 손으로 바꿉니다. 거창한 기능을 만들지는 않습니다. 대신 가장 중요한 감각을 익힙니다.

"이 파일을 바꾸면 브라우저 화면이 바뀐다."

이 감각만 생겨도 Next.js는 훨씬 덜 무섭습니다. 웹사이트 수정의 대부분은 처음부터 어려운 기능을 만드는 일이 아닙니다. 제목을 바꾸고, 설명을 고치고, 링크를 연결하고, 이미지를 교체하는 작은 작업에서 시작합니다.

이번 장에서는 app/page.tsx 파일을 열어 기본 첫 화면을 회사 소개, 개인 포트폴리오, 이벤트 페이지처럼 바꿔 보겠습니다.

먼저 개발 서버가 켜져 있어야 합니다. 지난 장에서 했던 것처럼 터미널에서 프로젝트 폴더로 이동한 뒤 아래 명령어를 실행합니다.

npm run dev

브라우저에서 다음 주소를 엽니다.

http://localhost:3000

이제 VS Code와 브라우저를 나란히 두면 좋습니다. 왼쪽에는 app/page.tsx, 오른쪽에는 브라우저 화면을 둡니다.

AI 생성 이미지

첫 화면 파일 찾기

Next.js에서 첫 화면은 보통 이 파일이 담당합니다.

app/page.tsx

여기서 / 주소는 홈페이지 첫 화면을 뜻합니다. 예를 들어 http://localhost:3000에 들어갔을 때 보이는 화면입니다.

VS Code 왼쪽 파일 목록에서 app 폴더를 열고, 그 안의 page.tsx를 클릭합니다.

파일 안에는 영어 문장, 이미지, 링크, 여러 코드가 보일 수 있습니다. 프로젝트를 만든 시점이나 선택한 옵션에 따라 기본 내용은 조금씩 다릅니다. 당황하지 않아도 됩니다. 핵심은 하나입니다.

브라우저에 보이는 문장을 파일 안에서 찾고, 그 문장을 바꾸면 됩니다.

가장 쉬운 방법은 검색입니다.

• Windows: Ctrl + F

• Mac: Command + F

브라우저에 보이는 문장 일부를 복사하거나 눈으로 확인한 뒤 page.tsx에서 검색해 보세요. 예를 들어 화면에 Get started라는 문장이 보이면 파일에서 Get started를 찾습니다.

찾았다면 그 문장을 원하는 문장으로 바꿔 봅니다.

예를 들어:

Get started

를 다음처럼 바꿉니다.

우리 브랜드를 소개합니다

파일을 저장합니다.

• Windows: Ctrl + S

• Mac: Command + S

브라우저를 보세요. 대부분 자동으로 화면이 바뀝니다. 이것이 개발 서버의 편리한 점입니다.

개발 서버는 내 컴퓨터 안에서 임시로 웹사이트를 실행해 주는 도구입니다. 식당으로 비유하면, 실제 손님에게 음식을 내기 전에 주방에서 바로 맛을 보는 작은 시식대입니다. 파일을 저장하면 개발 서버가 바뀐 내용을 감지하고 브라우저에 다시 보여 줍니다.

화면을 통째로 단순하게 바꿔 보기

기본 화면은 처음 보는 사람에게 조금 복잡할 수 있습니다. 이미지도 있고, 링크도 있고, 긴 className도 있을 수 있습니다.

className은 디자인 이름표입니다. 옷에 붙은 라벨처럼 "이 부분은 이런 색, 이런 여백, 이런 크기로 보여 주세요"라고 알려 주는 표시입니다. 지금은 자세히 몰라도 됩니다. 디자인은 뒤 장에서 다룹니다.

이번에는 첫 화면을 아주 단순한 소개 페이지로 바꿔 보겠습니다.

app/page.tsx의 내용을 아래 코드로 한 번 교체해 보세요.

export default function Home() {
  return (
    <main>
      <h1>안녕하세요, 김하늘입니다.</h1>
      <p>
        저는 작은 브랜드와 1인 사업자를 위한 웹사이트를 만듭니다.
      </p>
      <a href="mailto:[email protected]">문의 메일 보내기</a>
    </main>
  );
}

저장한 뒤 브라우저를 확인합니다.

화면에는 크게 세 가지가 보일 것입니다.

• 큰 제목: 안녕하세요, 김하늘입니다.

• 설명 문장: 저는 작은 브랜드와 1인 사업자를 위한 웹사이트를 만듭니다.

• 메일 링크: 문의 메일 보내기

여기서 처음 보는 기호가 많아도 괜찮습니다. 지금은 전체 구조만 보면 됩니다.

<main>
  화면 내용
</main>

main은 이 페이지의 중심 내용을 담는 상자입니다. 종이 문서로 치면 본문 영역입니다.

<h1>큰 제목</h1>

h1은 가장 중요한 제목입니다. 신문 1면의 가장 큰 제목처럼, 이 페이지가 무엇인지 알려 줍니다.

<p>문단</p>

p는 문단입니다. 짧은 소개글이나 설명을 넣을 때 사용합니다.

<a href="주소">링크 문구</a>

a는 링크입니다. href 안에 이동할 주소를 넣고, 태그 사이에는 화면에 보일 문구를 넣습니다.

태그라는 말이 낯설 수 있습니다. 태그는 내용에 붙이는 이름표입니다. "이 문장은 제목입니다", "이 문장은 설명입니다", "이 문장은 링크입니다"라고 브라우저에게 알려 주는 표시입니다.

제목, 문단, 목록, 링크를 읽는 법

Next.js의 페이지 파일 안에는 HTML처럼 생긴 코드가 들어갑니다. 정확히는 JSX라는 문법입니다. JSX는 JavaScript 안에서 HTML처럼 화면 구조를 적을 수 있게 해 주는 방식입니다. 어렵게 외울 필요는 없습니다. 지금은 "화면 설계도"라고 생각하면 됩니다.

아래 예시를 보세요.

<main>
  <h1>봄맞이 원데이 클래스</h1>
  <p>초보자도 하루 만에 꽃다발을 만들어 볼 수 있는 수업입니다.</p>

  <ul>
    <li>일시: 4월 12일 토요일</li>
    <li>장소: 성수동 플라워 스튜디오</li>
    <li>정원: 8명</li>
  </ul>

  <a rel="nofollow ugc noopener" href="https://example.com">신청하러 가기</a>
</main>

화면에서는 이렇게 이해하면 됩니다.

• <h1>: 가장 큰 제목

• <p>: 설명 문장

• <ul>: 순서 없는 목록 전체

• <li>: 목록 안의 한 줄

• <a>: 클릭할 수 있는 링크

ul과 li는 장보기 목록을 떠올리면 쉽습니다. ul은 목록 종이 전체이고, li는 그 안에 적힌 항목 하나입니다.

중요한 규칙이 하나 있습니다.

열었으면 닫아야 합니다.

예를 들어 <p>로 시작했다면 </p>로 닫아야 합니다.

<p>이 문장은 문단입니다.</p>

닫는 태그에는 /가 들어갑니다. 문을 열고 닫는 것처럼 생각하면 됩니다.

버튼처럼 보이는 링크 만들기

웹사이트에서 "문의하기", "신청하기", "자료 받기" 같은 요소는 버튼처럼 보이지만 실제로는 링크인 경우가 많습니다.

처음에는 진짜 버튼 기능보다 링크를 먼저 익히는 편이 쉽습니다.

<a href="mailto:[email protected]">문의하기</a>

이 코드는 메일 앱을 열어 문의 메일을 보낼 수 있게 합니다.

전화 연결 링크도 만들 수 있습니다.

<a href="tel:010-1234-5678">전화 상담하기</a>

다른 웹사이트로 보내고 싶다면 주소를 넣습니다.

<a rel="nofollow ugc noopener" href="https://www.instagram.com/yourname">인스타그램 보기</a>

여기서 조심할 점은 따옴표입니다.

href="https://example.com"

주소는 따옴표 안에 있어야 합니다. 따옴표 하나를 지우면 에러가 날 수 있습니다.

이미지 바꾸기

이미지는 보통 public 폴더에 넣고 사용합니다. 예를 들어 public 폴더 안에 profile.jpg 파일을 넣었다고 해 보겠습니다.

그러면 페이지에서는 이렇게 불러올 수 있습니다.

<img src="/profile.jpg" alt="프로필 사진" width="300" />

여기서 중요한 부분은 세 가지입니다.

• src: 이미지 파일의 위치

• alt: 이미지 설명

• width: 이미지 너비

alt는 화면에 직접 보이지 않을 수 있지만 중요합니다. 이미지를 볼 수 없는 환경에서 "이 이미지가 무엇인지" 알려 주는 설명입니다. 시각 보조 도구를 쓰는 사람에게도 도움이 되고, 이미지가 깨졌을 때도 의미를 전달합니다.

주의할 점이 있습니다.

public/profile.jpg라고 쓰지 않습니다.

<img src="/profile.jpg" alt="프로필 사진" width="300" />

처럼 /profile.jpg라고 씁니다. public 폴더는 웹사이트의 입구에 바로 연결되는 보관함이라고 생각하면 됩니다.

이미지 파일 이름은 가능하면 영어 소문자와 하이픈을 사용하세요.

좋은 예:

profile-photo.jpg
main-banner.png

피하면 좋은 예:

내 사진 최종 진짜최종.jpg

한글 파일명도 동작할 수 있지만, 나중에 배포하거나 다른 도구와 연결할 때 문제가 생길 수 있습니다.

저장하면 화면이 자동으로 바뀌는 흐름

Next.js로 작업할 때 기본 흐름은 단순합니다.

1. app/page.tsx를 연다.

2. 문장, 링크, 이미지 경로를 바꾼다.

3. 저장한다.

4. 브라우저에서 확인한다.

5. 마음에 들지 않으면 다시 수정한다.

개발 서버가 켜져 있으면 저장할 때마다 브라우저 화면이 자동으로 갱신됩니다. 가끔 자동 반영이 늦을 때는 브라우저 새로고침을 해 보세요.

http://localhost:3000

이 주소는 내 컴퓨터에서만 보는 연습용 주소입니다. 아직 인터넷에 공개된 것이 아닙니다. 실제 공개는 뒤에서 GitHub와 Vercel을 사용할 때 다룹니다.

잘못 지웠을 때 되돌리는 법

처음 코드를 고칠 때 가장 무서운 순간은 "뭔가 잘못 지운 것 같다"는 느낌이 들 때입니다. 이럴 때 바로 처음부터 다시 만들 필요는 없습니다.

가장 먼저 할 일은 되돌리기입니다.

• Windows: Ctrl + Z

• Mac: Command + Z

한 번 누르면 바로 전 작업이 취소됩니다. 여러 번 누르면 더 이전 상태로 돌아갑니다.

아직 저장하지 않았다면 파일을 닫을 때 저장하지 않는 방법도 있습니다. 하지만 초보 단계에서는 헷갈릴 수 있으니, 우선 Ctrl + Z 또는 Command + Z를 사용하세요.

화면이 완전히 망가졌다면 아래처럼 가장 단순한 상태로 app/page.tsx를 다시 만들어도 됩니다.

export default function Home() {
  return (
    <main>
      <h1>첫 페이지입니다</h1>
      <p>이 문장이 보이면 다시 정상으로 돌아온 것입니다.</p>
    </main>
  );
}

이 코드는 비상용 기본 페이지처럼 생각해도 좋습니다.

에러 화면에서 수정 위치 찾기

코드를 잘못 쓰면 브라우저에 에러 화면이 나타날 수 있습니다. 빨간색 글씨가 많아서 놀랄 수 있지만, 대부분은 작은 문법 실수입니다.

자주 생기는 실수는 다음과 같습니다.

1. 닫는 태그를 지운 경우

잘못된 예:

<h1>안녕하세요

올바른 예:

<h1>안녕하세요</h1>

2. 따옴표를 빠뜨린 경우

잘못된 예:

<a href="https://example.com>신청하기</a>

올바른 예:

<a rel="nofollow ugc noopener" href="https://example.com">신청하기</a>

3. 괄호를 지운 경우

잘못된 예:

return (
  <main>
    <h1>안녕하세요</h1>
  </main>
;

올바른 예:

return (
  <main>
    <h1>안녕하세요</h1>
  </main>
);

에러가 났을 때는 세 곳을 봅니다.

1. 브라우저 에러 화면

2. VS Code의 빨간 밑줄

3. 터미널의 에러 메시지

에러 메시지에는 보통 파일 위치가 나옵니다.

app/page.tsx:8:12

이 말은 app/page.tsx 파일의 8번째 줄 근처를 보라는 뜻입니다. 뒤의 숫자까지 정확히 이해하지 않아도 됩니다. 우선 해당 파일과 줄 근처를 보면 됩니다.

검색할 때는 에러 문장 전체를 복사하기보다 핵심 단어와 상황을 함께 검색하면 좋습니다.

예를 들어:

Next.js missing closing tag page.tsx
Next.js unterminated string constant
Next.js expected corresponding JSX closing tag

검색어는 영어가 더 많은 결과를 보여 줍니다. 하지만 처음에는 에러 메시지의 일부만 복사해도 충분합니다.

실습: 내 첫 화면으로 개조하기

이제 기본 화면을 내 목적에 맞게 바꿔 봅니다. 아래 세 가지 중 하나를 골라 작성해 보세요.

선택 1. 회사 소개 페이지

export default function Home() {
  return (
    <main>
      <h1>민트스튜디오</h1>
      <p>
        민트스튜디오는 작은 브랜드를 위한 사진 촬영과 상세페이지 제작을 돕습니다.
      </p>

      <ul>
        <li>제품 사진 촬영</li>
        <li>브랜드 소개 이미지 제작</li>
        <li>온라인 판매 페이지 구성</li>
      </ul>

      <a href="mailto:[email protected]">프로젝트 문의하기</a>
    </main>
  );
}

선택 2. 개인 포트폴리오

export default function Home() {
  return (
    <main>
      <h1>디자이너 이서연</h1>
      <p>
        브랜드 로고, 웹 배너, SNS 콘텐츠를 디자인합니다. 보기 쉬운 디자인과 꾸준한 운영을 중요하게 생각합니다.
      </p>

      <ul>
        <li>브랜드 로고 디자인</li>
        <li>인스타그램 콘텐츠 템플릿</li>
        <li>랜딩페이지 시안 제작</li>
      </ul>

      <a rel="nofollow ugc noopener" href="https://example.com">작업물 보러 가기</a>
    </main>
  );
}

선택 3. 이벤트 페이지

export default function Home() {
  return (
    <main>
      <h1>여름 온라인 클래스 오픈</h1>
      <p>
        처음 시작하는 사람을 위한 2주 과정입니다. 복잡한 준비 없이 실습 중심으로 진행합니다.
      </p>

      <ul>
        <li>일정: 7월 6일 시작</li>
        <li>방식: 온라인 라이브</li>
        <li>대상: 처음 배우는 입문자</li>
      </ul>

      <a href="mailto:[email protected]">수강 문의하기</a>
    </main>
  );
}

그대로 복사해도 괜찮습니다. 다만 이름, 설명, 링크는 반드시 자신의 상황에 맞게 바꿔 보세요. 복사보다 중요한 것은 "어디를 바꾸면 화면의 어디가 바뀌는지" 직접 확인하는 것입니다.

이번 장에서 익힌 것

이번 장에서는 Next.js의 첫 화면을 직접 수정했습니다.

• app/page.tsx가 홈페이지 첫 화면이라는 것을 확인했습니다.

• <h1>, <p>, <ul>, <li>, <a>, <img>를 화면 요소처럼 읽어 보았습니다.

• 저장하면 브라우저 화면이 자동으로 바뀌는 흐름을 경험했습니다.

• 잘못 지웠을 때 되돌리는 방법을 익혔습니다.

• 에러가 나면 파일명과 줄 번호를 보고 수정 위치를 찾는 법을 배웠습니다.

아직 예쁘게 꾸미지 않아도 괜찮습니다. 지금 중요한 것은 디자인이 아니라 연결 감각입니다.

app/page.tsx를 바꾸면 첫 화면이 바뀝니다. 이것이 Next.js 편집의 첫 번째 감각입니다. 다음 장에서는 이 감각을 확장해, 폴더를 이용해 새로운 페이지를 만드는 방법을 배웁니다.