오늘부터 같이 만들 앱 소개 — '작은 기록 상점' 프로젝트 설계

지금까지 우리는 Next.js 프로젝트를 만들고, 실행해 보고, 폴더 구조도 천천히 구경했습니다. 이제 슬슬 이런 생각이 들 수 있습니다.

"그래서… 뭘 만들죠?"

아주 좋은 질문입니다. 문법은 혼자 배우면 자꾸 흩어집니다. page.tsx는 알겠는데 어디에 써야 할지 모르겠고, layout.tsx는 배웠는데 왜 필요한지 감이 안 오기도 합니다. 그래서 이 책에서는 작은 기능들을 따로따로 외우지 않고, 하나의 앱 위에 차곡차곡 쌓아 갈 것입니다.

그 주인공이 바로 '작은 기록 상점' 입니다.

이름부터 조금 귀엽죠? 이 앱은 누군가의 짧은 기록들을 상품처럼 진열해 보여 주는 웹 앱입니다. 일기처럼 무겁지 않고, 메모처럼 가볍게 남길 수 있는 기록들을 한곳에 모아 둡니다. 사용자는 목록을 둘러보고, 하나를 눌러 자세히 읽고, 직접 새 기록도 등록할 수 있습니다. 겉으로 보면 단정한 기록 앱이지만, 안쪽에서는 Next.js의 핵심 기능을 두루 연습할 수 있는 아주 좋은 연습장입니다.

왜 하필 '작은 기록 상점'일까요?

초보자가 처음 만드는 앱은 너무 거창하면 금방 지칩니다. 로그인도 넣고 싶고, 결제도 넣고 싶고, 채팅도 넣고 싶고, 지도도 붙이고 싶고… 그러다 보면 앱보다 한숨이 먼저 완성됩니다.

그래서 이번 프로젝트는 크기를 적당히 잡습니다. 작지만 심심하지 않고, 단순하지만 배울 것은 많은 앱이 좋습니다. '작은 기록 상점'은 바로 그 균형을 노린 프로젝트입니다.

이 앱이 좋은 이유는 분명합니다.

• 목록 페이지가 있어서 데이터 목록을 보여 주는 연습을 할 수 있습니다.

• 상세 페이지가 있어서 동적 라우팅을 자연스럽게 배울 수 있습니다.

• 등록 폼이 있어서 사용자 입력 처리와 서버 액션을 익힐 수 있습니다.

• 공통 레이아웃이 있어서 App Router의 장점을 체감할 수 있습니다.

• API와 데이터 흐름을 붙이기 좋아서 풀스택 감각을 키우기 좋습니다.

쉽게 말해, 이 앱 하나만 잘 만들어도 Next.js의 중요한 조각들이 머릿속에서 따로 놀지 않습니다. 한 줄짜리 개념이 아니라, 실제로 움직이는 화면 속에서 이해하게 됩니다.

앱의 콘셉트: 기록을 진열하는 작은 가게

'작은 기록 상점'은 진짜 물건을 파는 쇼핑몰은 아닙니다. 하지만 쇼핑몰처럼 보이게 만들면 배우기 좋은 구조가 생깁니다. 카드 형태의 목록이 있고, 각 항목을 눌러 상세 페이지로 이동하고, 새 항목을 등록하는 흐름이 자연스럽기 때문입니다.

여기서 "상품"은 물건이 아니라 기록입니다. 예를 들면 이런 것들입니다.

• 오늘의 한 줄 메모

• 읽은 책의 짧은 감상

• 산책하다 떠오른 생각

• 공부하다 정리한 작은 깨달음

• 다시 보고 싶은 문장

조금 감성적으로 말하면, 이 앱은 "팔지는 않지만 진열은 정성껏 하는 가게"입니다. 사용자는 화면을 넘기며 기록을 구경하고, 마음에 드는 기록을 눌러 자세히 읽고, 자기 기록도 조심조심 선반 위에 올려둘 수 있습니다.

우리가 만들 핵심 기능

이번 책 전체에서 완성할 기능은 너무 많지도, 너무 적지도 않게 잡겠습니다. 핵심은 다음과 같습니다.

• 기록 목록 보기

• 기록 상세 보기

• 새 기록 작성하기

• 카테고리나 태그로 기록 구분하기

• 공통 헤더와 레이아웃 적용하기

• API로 기록 데이터 주고받기

• 로딩 상태와 에러 화면 다루기

• 검색엔진과 성능까지 기본 챙기기

• 마지막으로 배포하기

여기서 중요한 점은, 처음부터 모든 기능을 한 번에 만들지 않는다는 것입니다. 먼저 모양을 만들고, 그다음 이동하게 만들고, 그다음 데이터를 연결하고, 그다음 입력을 처리합니다. 집을 지을 때도 벽지부터 붙이지 않듯이, 웹 앱도 순서가 있습니다.

먼저 그려 보는 화면 구성

앱을 만들기 전에 화면을 상상하면 앞으로의 흐름이 훨씬 쉬워집니다. 우리는 대략 다음과 같은 화면을 만들 예정입니다.

1. 홈 화면

처음 들어왔을 때 보이는 첫 화면입니다. 상점의 간판 같은 페이지라고 생각하면 됩니다. 이곳에는 앱 소개 문구와 최근 기록 몇 개, 혹은 추천 기록 몇 개가 보일 수 있습니다.

사용자는 이 화면에서 "아, 여기는 기록을 모아두는 곳이구나" 하고 바로 이해해야 합니다. 그래서 너무 복잡하게 만들지 않고, 제목과 설명, 그리고 기록 목록으로 시작하는 편이 좋습니다.

2. 기록 목록 화면

여기가 이 앱의 중심입니다. 여러 기록이 카드 형태로 나열됩니다. 카드에는 제목, 짧은 요약, 카테고리, 작성일 같은 정보가 들어갑니다.

처음에는 더미 데이터로 시작해도 충분합니다. 나중에 이 목록은 fetch로 불러오게 되고, 캐싱이나 로딩 UI도 붙이게 됩니다. 지금은 "여러 개의 데이터를 예쁘게 보여 주는 화면"이라고 생각하면 됩니다.

3. 기록 상세 화면

목록에서 카드 하나를 누르면 상세 페이지로 이동합니다. 여기서는 기록의 전체 내용이 보입니다. 제목, 본문, 태그, 작성일 같은 정보가 더 풍부하게 표시되겠죠.

이 화면은 앞으로 동적 라우트를 배울 때 아주 중요한 역할을 합니다. 예를 들어 /records/1, /records/2처럼 주소가 달라지면서 서로 다른 내용을 보여 주게 됩니다.

4. 새 기록 작성 화면

사용자가 직접 기록을 등록하는 페이지입니다. 제목을 입력하고, 카테고리를 고르고, 본문을 적고, 저장 버튼을 누르는 흐름을 만들 예정입니다.

이 화면은 나중에 폼 처리, 서버 액션, 유효성 검사 같은 내용을 배우는 무대가 됩니다. 초보자에게는 조금 떨리는 부분이지만, 한 번 흐름을 익히면 정말 많은 것이 연결됩니다.

화면을 글로 그려 보면 이런 느낌입니다

복잡한 디자인 도구 없이도, 글로만 구조를 잡아 볼 수 있습니다.

[공통 헤더]
로고 | 기록 보러 가기 | 새 기록 쓰기

[홈]
- 서비스 소개 문구
- 최근 기록 카드 몇 개
- 기록 목록으로 이동 버튼

[기록 목록]
- 페이지 제목
- 카테고리 또는 태그 영역
- 기록 카드 목록

[기록 상세]
- 기록 제목
- 작성일 / 카테고리
- 기록 본문
- 목록으로 돌아가기

[새 기록 작성]
- 제목 입력
- 카테고리 선택
- 짧은 소개 입력
- 본문 입력
- 저장 버튼

이 정도만 머릿속에 있어도 앞으로 파일을 만들 때 훨씬 덜 헤맵니다. 중요한 것은 완벽한 디자인이 아니라, 어떤 페이지가 있고 서로 어떻게 연결되는지를 먼저 아는 것입니다.

기록 하나의 모양도 미리 정해 봅시다

앱을 만들 때는 "무엇을 보여 줄지"를 정하는 것도 중요합니다. 기록 데이터 한 개를 예로 들면 이런 식이 될 수 있습니다.

{
  id: "record-1",
  title: "비 오는 날에 적은 한 줄",
  summary: "오늘은 천천히 걷는 게 잘 어울리는 날이었다.",
  content: "우산 소리를 들으며 걷다가, 바쁜 날에도 천천히 가는 시간이 필요하다는 생각이 들었다.",
  category: "일상",
  tags: ["비", "산책", "메모"],
  createdAt: "2026-03-23"
}

처음 보면 데이터가 조금 딱딱해 보일 수 있습니다. 하지만 사실 별거 아닙니다.

id는 각 기록을 구분하는 번호표이고, title은 제목, summary는 짧은 소개, content는 본문입니다. category와 tags는 기록을 분류하는 데 도움을 주고, createdAt은 작성일입니다.

이렇게 구조를 미리 정해 두면, 목록 페이지에서는 제목과 요약을 보여 주고, 상세 페이지에서는 본문까지 펼쳐 보여 주면 됩니다. 즉, 같은 데이터를 여러 화면에서 다른 방식으로 활용하게 됩니다.

이 프로젝트에서 배우게 될 Next.js 핵심

이제부터가 진짜 중요합니다. 이 프로젝트는 단순히 예쁜 기록 앱을 만들기 위한 것이 아니라, Next.js를 제대로 익히기 위한 장치입니다. 앞으로 나올 챕터와 이 앱이 어떻게 연결되는지 미리 보면 학습이 훨씬 선명해집니다.

페이지와 레이아웃은 어디에 쓰일까요?

곧 배우게 될 App Router에서는 폴더와 파일이 곧 화면과 길이 됩니다. '작은 기록 상점'은 이 구조를 연습하기 아주 좋습니다.

루트 레이아웃에는 앱 전체에서 공통으로 보이는 헤더나 기본 틀을 넣을 수 있습니다. 기록 목록과 상세 화면은 같은 묶음으로 관리할 수 있고, 특정 구간에만 따로 레이아웃을 줄 수도 있습니다.

즉, 레이아웃은 단순히 "예쁘게 감싸는 껍데기"가 아니라, 앱의 공통 구조를 정리하는 도구입니다. 이 프로젝트를 통해 왜 layout.tsx가 편한지 몸으로 느끼게 될 것입니다.

라우팅은 어떻게 자연스럽게 연결될까요?

기록 앱은 이동이 많습니다. 홈에서 목록으로 가고, 목록에서 상세로 가고, 상세에서 다시 목록으로 돌아오고, 새 기록 작성 화면으로도 이동해야 합니다.

이 흐름 덕분에 Link, useRouter, 중첩 라우팅을 억지로 외우지 않아도 됩니다. 사용자의 실제 이동 경로를 만들다 보면 라우팅이 왜 필요한지 이해하게 됩니다.

특히 상세 페이지는 동적인 주소를 사용하기에, 파일 이름만으로 URL을 설계하는 Next.js의 장점이 또렷하게 보입니다.

스타일링은 왜 이 앱과 잘 어울릴까요?

기록 앱은 카드 UI, 태그, 버튼, 입력창처럼 반복되는 UI 요소가 많습니다. 그래서 Tailwind CSS를 연습하기 좋습니다.

버튼 하나를 꾸미고, 카드 여백을 정하고, 태그 색을 바꾸고, 폼 입력창 모양을 맞추다 보면 "유틸리티 클래스가 왜 빠른지"를 자연스럽게 느끼게 됩니다. 어렵게 거대한 CSS 파일부터 만들 필요 없이, 화면을 조금씩 다듬으면서 실력이 붙습니다.

서버와 클라이언트 차이는 어디서 느끼게 될까요?

최신 Next.js에서는 모든 컴포넌트를 무조건 브라우저에서만 돌리는 방식이 아닙니다. 기본은 서버 컴포넌트이고, 상호작용이 필요한 부분에만 클라이언트 컴포넌트를 씁니다.

이 프로젝트에서는 그 차이가 아주 잘 드러납니다. 예를 들어 기록 목록을 보여 주는 화면은 서버에서 렌더링하기 좋고, 입력 폼이나 버튼 클릭 같은 상호작용은 클라이언트 기능이 필요합니다.

즉, "어디에 use client를 붙여야 하지?"라는 질문이 추상적인 문법 문제가 아니라 실제 설계 문제가 됩니다. 이것이 실전 프로젝트의 힘입니다.

데이터는 어떻게 조금씩 살아날까요?

처음에는 더미 데이터로 시작하겠지만, 나중에는 fetch로 데이터를 가져오고, 서버 액션으로 새 기록을 저장하고, 라우트 핸들러로 간단한 API도 만들어 볼 것입니다.

이 과정을 거치면 앱이 점점 살아납니다. 처음엔 진열장만 있던 가게에, 진짜 기록이 들어오고 나가는 느낌이 생깁니다.

여기서 특히 재미있는 점은, 앞에서 만든 화면이 뒤에서 데이터와 연결되면서 갑자기 진짜 서비스처럼 보이기 시작한다는 것입니다. 웹 개발의 즐거움은 보통 이 순간부터 커집니다.

최적화와 배포는 마지막 장식이 아닙니다

앱을 만드는 데 성공했다고 해서 끝은 아닙니다. 로딩이 느리면 아쉽고, 에러에 약하면 불안하고, 검색엔진이 페이지를 잘 이해하지 못하면 발견되기 어렵습니다.

그래서 후반부에서는 로딩 UI, 에러 처리, 캐싱, 메타데이터, 이미지와 폰트 최적화, 배포까지 이어서 다룰 것입니다. '작은 기록 상점'은 여기서도 좋은 연습장이 됩니다. 콘텐츠 중심 서비스이기 때문에 SEO와 성능의 효과가 눈에 잘 보이기 때문입니다.

책 전체와 연결해 보는 학습 지도

앞으로의 흐름을 한눈에 보면 이 프로젝트가 왜 좋은지 더 잘 보입니다.

이 표를 보면 알 수 있습니다. 우리는 그냥 기록 앱을 만드는 것이 아니라, Next.js의 주요 기능을 하나의 이야기 안에서 배우는 중입니다.

이번 프로젝트의 약속: 어렵게 가지 말고, 천천히 진짜처럼

이 책의 프로젝트는 실무 흉내를 내되, 초보자를 버리지 않는 방향으로 갑니다. 그래서 몇 가지 원칙을 세우고 시작하면 좋습니다.

• 처음에는 단순한 화면부터 만든다.

• 데이터는 처음부터 복잡하게 다루지 않는다.

• 한 챕터에서 한 걸음씩만 확실히 나아간다.

• 작동하는 흐름을 우선 만들고, 그다음 다듬는다.

• 모르는 개념이 나오면 바로 실전 화면에 연결해서 이해한다.

웹 개발을 처음 배우면 자꾸 "정답 구조"를 찾고 싶어집니다. 하지만 실제로는 작게 만들고, 확인하고, 고치고, 다시 다듬는 과정이 더 중요합니다. 이번 프로젝트도 그런 방식으로 진행할 것입니다.

이제 우리는 지도를 손에 넣었습니다

지금까지는 준비 운동이었다면, 이제부터는 진짜로 길을 걸을 차례입니다. '작은 기록 상점'은 앞으로 우리가 만드는 모든 챕터의 공통 무대가 됩니다.

페이지를 만들 때도, 라우팅을 연결할 때도, 데이터를 가져올 때도, 폼을 처리할 때도 우리는 계속 이 앱으로 돌아오게 됩니다. 덕분에 새로운 개념이 나와도 "이걸 왜 배우지?"가 아니라 "아, 이 화면에 붙이려고 배우는구나"라고 이해할 수 있습니다.

이제 다음 장에서는 이 설계를 바탕으로 실제 페이지와 레이아웃을 만들며, App Router의 첫걸음을 떼어 보겠습니다. 작은 상점의 간판을 달 시간이 왔습니다.