6장. 이 책에서 만들 풀스택 서비스 미리 보기

앞 장들에서 우리는 웹 서비스가 어떻게 움직이는지, 프론트엔드와 백엔드는 무엇이 다른지, 데이터베이스는 왜 필요한지, 그리고 AI가 개발을 어떻게 도와주는지 차례대로 살펴봤습니다. 이제 슬슬 이런 생각이 들 수 있습니다.

"그래서 결국 뭘 만들게 되는 거지?"

아주 좋은 질문입니다. 초보자일수록 완성본을 먼저 보는 것이 중요합니다. 목적지를 모르면 지금 배우는 개념이 어디에 쓰이는지 흐릿하게 느껴지기 때문입니다. 반대로 완성될 모습을 먼저 보면, 앞으로 나올 Git, GitHub, 화면 만들기, 로그인, 데이터 저장, 배포 같은 내용이 하나의 흐름으로 연결되기 시작합니다.

이 장에서는 이 책 전체를 통해 완성할 작은 풀스택 웹 서비스를 미리 구경해보겠습니다. 아직 코드를 이해할 필요는 없습니다. "아, 내가 이 정도 서비스를 직접 만들게 되는구나"라는 감각만 잡으면 충분합니다.

우리가 만들 서비스는 어떤 모습인가

이 책에서 만들 결과물은 회원가입과 로그인이 가능한 작은 글쓰기 서비스입니다. 아주 거창한 플랫폼은 아니지만, 실제 웹 서비스의 핵심 요소는 빠짐없이 담겨 있습니다. 사용자는 계정을 만들고, 로그인하고, 글을 작성하고, 수정하고, 삭제할 수 있습니다. 글 목록을 보고, 상세 화면으로 들어가 내용을 읽을 수 있으며, 검색으로 원하는 글을 찾을 수도 있습니다. 그리고 마지막에는 이 서비스를 인터넷에 배포해 다른 사람도 접속할 수 있게 만듭니다.

겉으로 보면 단순한 게시판처럼 보일 수 있습니다. 하지만 초보자가 웹 개발의 전체 구조를 익히기에는 이보다 좋은 형태가 드뭅니다. 화면도 만들 수 있고, 서버도 연결할 수 있고, 데이터도 저장할 수 있고, 사용자별 권한도 다룰 수 있기 때문입니다.

쉽게 말해, 이 서비스는 "웹 개발의 핵심 부품이 한 세트로 들어 있는 연습용이자 실전용 결과물"입니다.

왜 하필 이런 서비스를 만드는가

처음부터 너무 복잡한 서비스를 만들면 금방 길을 잃습니다. 예를 들어 실시간 채팅, 결제, 관리자 통계, 알림, 이미지 편집, 추천 알고리즘까지 한꺼번에 붙이려 하면 초보자는 어디서 막혔는지도 모른 채 지치기 쉽습니다.

반대로 글 기반 서비스는 구조가 명확합니다. 사용자가 입력한 내용을 저장하고, 다시 보여주고, 필요한 것만 고치고, 내 글과 남의 글을 구분하는 흐름이 선명합니다. 그래서 웹 서비스의 가장 기본적인 뼈대를 배우기에 좋습니다.

이 책의 목표는 단순히 예쁜 화면 하나를 만드는 것이 아닙니다. 실제로 동작하는 서비스를 끝까지 완성하는 것입니다. 그런 점에서 글 기반 서비스는 아주 좋은 출발점입니다.

사용자는 이 서비스를 어떻게 쓰게 될까

완성된 서비스를 떠올리기 쉽게, 한 명의 사용자가 처음 들어와서 나갈 때까지의 흐름을 따라가 보겠습니다.

처음 방문한 사용자는 메인 화면에서 서비스 소개와 글 목록을 보게 됩니다. 아직 로그인하지 않았다면 글을 읽는 것은 가능하더라도, 글을 작성하려고 할 때 로그인 안내를 받게 됩니다. 사용자는 회원가입 화면으로 이동해 계정을 만들고, 로그인한 뒤 다시 서비스로 돌아옵니다.

이제 사용자는 새 글 작성 버튼을 눌러 제목과 내용을 입력합니다. 저장을 누르면 글이 데이터베이스에 기록되고, 목록 화면에 방금 쓴 글이 나타납니다. 목록에서 자신의 글을 눌러 상세 화면으로 들어가면 전체 내용을 읽을 수 있습니다. 오타가 보이면 수정 버튼을 눌러 내용을 고치고, 더 이상 필요 없는 글은 삭제할 수도 있습니다.

글이 많아지면 검색창이 힘을 발휘합니다. 사용자는 제목이나 본문 일부를 검색해 원하는 글을 빠르게 찾을 수 있습니다. 모든 작업이 끝나면 로그아웃할 수 있고, 다시 로그인하면 이전에 썼던 자신의 글을 이어서 관리할 수 있습니다.

이 흐름만 봐도 이미 하나의 서비스처럼 느껴지지 않나요? 이 책은 바로 이 경험을 여러분 손으로 직접 만들게 하는 데 초점을 맞춥니다.

화면으로 보면 대략 이렇게 구성된다

완성본에는 보통 다음과 같은 화면이 들어갑니다.

• 메인 또는 홈 화면

• 회원가입 화면

• 로그인 화면

• 글 목록 화면

• 글 상세 화면

• 글 작성 화면

• 글 수정 화면

여기에 검색창, 정렬, 버튼, 입력 폼, 빈 상태 안내, 에러 메시지 같은 요소가 더해지면 서비스의 느낌이 훨씬 또렷해집니다.

중요한 점은 화면 수가 많아 보이더라도, 사실은 몇 가지 패턴이 반복된다는 것입니다. 목록을 보여주는 패턴, 입력받는 패턴, 저장하는 패턴, 조건에 따라 다른 내용을 보여주는 패턴이 계속 재사용됩니다. 초보자에게는 이것이 큰 희망입니다. 처음엔 복잡해 보여도 하나씩 만들다 보면 "새로운 걸 매번 처음부터 만드는 것"이 아니라는 사실을 알게 됩니다.

보이지 않는 곳에서는 어떤 일이 벌어질까

웹 서비스는 화면만으로 움직이지 않습니다. 사용자가 버튼을 누를 때마다 보이지 않는 곳에서 여러 일이 동시에 일어납니다.

예를 들어 로그인 버튼을 눌렀다고 해보겠습니다. 화면은 사용자가 입력한 이메일과 비밀번호를 받아 서버 또는 인증 서비스로 보냅니다. 서버는 그 정보가 맞는지 확인하고, 맞다면 이 사용자가 로그인한 상태라는 표시를 남깁니다. 이후 사용자가 글을 작성하면, 이번에는 작성한 제목과 본문이 데이터베이스에 저장됩니다. 목록 화면은 다시 데이터를 불러와 새 글을 화면에 보여줍니다.

겉으로는 버튼 한 번 클릭한 것처럼 보여도, 실제로는 프론트엔드, 백엔드, 데이터베이스가 릴레이하듯 역할을 나눠 처리합니다. 이 책의 큰 장점은 바로 이 연결 고리를 한 번에 경험할 수 있다는 데 있습니다.

이 서비스 안에 풀스택의 핵심이 다 들어 있다

"풀스택"이라는 말은 처음 들으면 꽤 거창하게 느껴집니다. 하지만 이 책에서 만들 서비스로 풀어보면 생각보다 단순합니다.

프론트엔드는 사용자가 보는 화면을 만듭니다. 입력칸, 버튼, 목록, 상세 페이지, 안내 문구가 여기에 해당합니다. 백엔드는 저장, 조회, 수정, 삭제 같은 작업을 처리합니다. 데이터베이스는 글과 사용자 정보를 기억합니다. 배포는 내 컴퓨터 안에만 있던 서비스를 인터넷 밖으로 꺼내는 일입니다.

우리가 만들 서비스에는 이 네 가지가 모두 들어갑니다. 그래서 결과물 하나를 완성하는 과정 자체가 곧 풀스택 입문 수업이 됩니다.

이번 책에서 구현할 핵심 기능

이번 결과물의 핵심 기능은 아래와 같습니다.

• 회원가입과 로그인

• 글 작성, 수정, 삭제

• 글 목록과 상세 보기

• 검색 기능

• 배포 후 공개 접속

이 기능들은 서로 따로 노는 것이 아니라 한 줄로 연결됩니다. 로그인은 권한 처리와 이어지고, 권한 처리는 글 수정·삭제와 이어집니다. 글 작성은 데이터 저장과 이어지고, 저장된 데이터는 목록과 상세 화면으로 이어집니다. 검색은 사용자 경험을 개선하고, 배포는 이 모든 기능을 실제 서비스로 바꿉니다.

즉, 기능 하나하나가 점처럼 흩어져 있는 것이 아니라, 서비스라는 선으로 이어져 있습니다.

독자가 직접 만들게 될 기술 흐름

이 책은 문법 암기보다는 작업 흐름을 익히는 데 집중합니다. 앞으로 여러분은 대략 이런 순서로 서비스를 완성하게 됩니다.

먼저 서비스 아이디어를 한 줄로 정리하고, 누가 사용할지 정합니다. 그다음 어떤 화면이 필요하고 어떤 데이터가 저장되어야 하는지 간단히 설계합니다. 이후 개발 환경을 준비하고 Git과 GitHub로 프로젝트를 관리하는 법을 익힙니다. 그 다음부터는 Claude Code와 Codex의 도움을 받아 화면을 만들고, 서버와 데이터베이스를 연결하고, 로그인과 CRUD를 붙입니다. 마지막에는 테스트와 수정 과정을 거쳐 실제 인터넷에 배포합니다.

이 흐름을 잘 보면, 책의 각 장이 따로 떨어진 주제가 아니라는 것을 알 수 있습니다. 앞에서 배우는 작은 개념들이 뒤에서 전부 실전 재료로 사용됩니다.

Claude Code와 Codex는 이 과정에서 어떤 역할을 할까

이 책의 차별점은 AI 도구를 단순한 보조 설명용이 아니라, 실제 작업 파트너로 활용한다는 데 있습니다.

Claude Code와 Codex는 여러분 대신 모든 것을 완벽하게 해주는 마법봉이 아닙니다. 하지만 초보자가 막히기 쉬운 지점을 훨씬 부드럽게 넘어가게 도와주는 든든한 조수는 될 수 있습니다.

예를 들어 화면 초안을 빠르게 만들게 하거나, 반복되는 코드 구조를 잡게 하거나, 에러 메시지를 해석하게 하거나, 리팩터링 방향을 제안하게 할 수 있습니다. 중요한 것은 AI가 내놓은 결과를 그대로 맹신하는 것이 아니라, "이 코드가 무엇을 하려는지"를 함께 이해하며 검토하는 습관입니다.

이 책에서는 바로 그 협업 감각을 익히게 됩니다. 즉, 사람인 여러분이 방향을 잡고, AI가 작업 속도를 높이며, 최종 판단은 다시 여러분이 하는 흐름입니다.

완성본은 작지만, 절대 사소하지 않다

처음 보면 "게시글 몇 개 쓰는 서비스"처럼 보일 수 있습니다. 하지만 이 안에는 웹 개발의 가장 중요한 경험이 압축되어 있습니다.

사용자를 구분하는 로그인, 데이터를 저장하는 데이터베이스, 화면과 서버의 연결, 권한 체크, 검색, 예외 처리, 배포까지 한 번이라도 직접 끝까지 해본 사람은 이후 다른 서비스를 만들 때 훨씬 강해집니다. 일정 관리 서비스든, 고객 문의 서비스든, 커뮤니티든, 쇼핑몰이든 기본 구조를 응용할 수 있기 때문입니다.

작은 서비스 하나를 완성해본 경험은 생각보다 큽니다. "개발은 나와 상관없는 세계"라고 느끼던 사람이 "조금씩 쪼개면 나도 만들 수 있겠다"로 바뀌는 순간이 오기 때문입니다.

이 책을 끝낼 때쯤 여러분이 얻게 될 감각

이 책을 끝까지 따라오면 단순히 코드 몇 줄을 복사해 붙여넣는 사람이 아니라, 서비스가 굴러가는 흐름을 아는 사람이 됩니다.

화면에서 입력한 값이 어디로 가는지, 왜 데이터베이스가 필요한지, 로그인한 사용자를 어떻게 구분하는지, 왜 Git으로 저장 이력을 남겨야 하는지, 배포할 때는 무엇을 조심해야 하는지 같은 질문에 스스로 답할 수 있게 됩니다.

그리고 가장 중요한 변화가 하나 있습니다. 막연한 두려움이 줄어듭니다.

예전에는 "웹 서비스 개발"이 거대한 벽처럼 보였다면, 책을 다 읽고 나면 그것이 여러 개의 작은 작업으로 나뉜다는 사실을 알게 됩니다. 화면 만들기, 데이터 저장하기, 로그인 붙이기, 검색 넣기, 배포하기처럼 말입니다. 벽은 여전히 크지만, 이제는 어디에 첫 삽을 떠야 하는지 알게 됩니다.

지금 이 장에서 꼭 기억할 것

이 책에서 만들 서비스는 단순한 예제가 아닙니다. 초보자가 웹 서비스의 전체 구조를 몸으로 익히기 위해 정교하게 고른 결과물입니다. 회원가입, 로그인, 글 CRUD, 검색, 배포까지 경험하면 웹 개발의 핵심 흐름을 한 바퀴 돌게 됩니다.

지금 모든 내용을 완벽히 이해하지 못해도 괜찮습니다. 중요한 것은 목적지가 선명해졌다는 사실입니다. 앞으로 여러분은 하나씩 배울 때마다 "이게 최종 서비스의 어느 부분으로 이어지는지"를 계속 확인하게 될 것입니다.

그리고 책의 마지막에 도착했을 때, 여러분은 아마 이렇게 말하게 될 가능성이 큽니다.

"나도 진짜 서비스를 하나 만들 수 있겠는데?"

바로 그 감각을 얻기 위해, 이제 다음 장부터는 아이디어를 서비스 기획으로 바꾸는 첫걸음을 시작합니다.