풀스택 앱이란? 쉽게 풀어 쓴 설명

풀스택 앱은 작동하는 데 필요한 모든 계층을 포함한 앱입니다. 사람들이 보고 클릭하는 프런트엔드, 서버에서 실행되며 규칙을 적용하는 백엔드, 모든 것을 기억하는 데이터베이스가 있습니다. 할 일을 저장하고, 어떤 기기에서든 로그인할 수 있으며, 다른 사람에게는 내 목록을 보여 주지 않는 할 일 목록 앱은 풀스택입니다. 영업시간 한 장만 보여 주는 페이지는 풀스택이 아닙니다.

‘스택(stack)’은 기술 계층이 차곡차곡 쌓여 있다는 뜻이고, ‘풀(full)’은 그 계층이 모두 있다는 뜻입니다.

AI로 만들 때 왜 중요할까요

AI 빌더에게 앱을 설명할 때 쓰는 단어에 따라 어떤 계층이 만들어질지가 정해집니다. “우리 메뉴를 보여 주는 페이지를 만들어 줘”라고 하면 프런트엔드가 나옵니다. “고객이 메뉴에서 주문할 수 있게 하고, 주방에서 새 주문을 볼 수 있게 해 줘”라고 하면 세 계층이 모두 필요합니다. 주문이 저장되어야 하고, 두 종류의 사용자가 공유해야 하며, 비공개로 유지되어야 하기 때문입니다.

이 차이를 알면 다음 세 가지에 도움이 됩니다.

• 원하는 것을 정확히 요청할 수 있습니다. 데이터를 저장하고 싶다면 그렇게 말하세요. 프런트엔드만 만드는 빌더는 완성된 것처럼 보여도 새로 고침하면 모든 것을 잊어버립니다.
• 가짜 완성도를 알아볼 수 있습니다. 샘플 데이터가 들어 있는 데모는 실제로 작동하는 앱과 똑같이 보일 수 있습니다. 계층을 알면 데이터가 실제로 어딘가에 저장되는지 확인할 수 있습니다.
• 운영 비용을 이해할 수 있습니다. 프런트엔드만 있다면 정적 파일로 제공할 수 있습니다. 백엔드와 데이터베이스는 서버에서 실행되는 프로그램이므로, 호스팅 비용의 대부분이 여기서 발생합니다.

일상 속 비유: 레스토랑

레스토랑을 생각해 보세요.

• 홀은 프런트엔드입니다. 메뉴판, 테이블, 종업원의 주문 메모장입니다. 손님이 보는 곳이므로 보기 좋고 쓰기 쉬워야 합니다.
• 주방은 백엔드입니다. 손님은 들어가지 않습니다. 주문을 받고, 메뉴가 있는지 확인하고, 요리하고, 이상한 요청을 거절합니다. 규칙이 여기에 있습니다.
• 식재료 창고와 주문 장부는 데이터베이스입니다. 무엇이 있고 무엇이 주문되었는지 보관해서, 교대가 바뀌어도 아무것도 잊히지 않게 합니다.

홀만 있는 레스토랑은 멋진 메뉴판을 보여 줄 수는 있지만 음식은 줄 수 없습니다. 프런트엔드만 있는데 풀스택인 척하는 앱이 바로 그렇습니다.

세 계층 자세히 보기

계층들은 정해진 순서대로 통신합니다. 프런트엔드는 백엔드가 받아들이는 요청 목록인 API를 통해 무언가를 요청합니다. 백엔드는 요청을 확인하고, 데이터베이스를 읽거나 쓴 다음 응답을 보냅니다. 프런트엔드가 데이터베이스와 직접 통신하는 일은 없습니다.

이 순서가 풀스택 전체에서 가장 중요한 보안 원칙입니다. 프런트엔드의 모든 것은 방문자의 기기에서 실행되므로, 방문자가 읽고 바꿀 수 있습니다. 따라서 “이 청구서는 소유자만 볼 수 있다”, “쿠폰은 한 번만 쓸 수 있다” 같은 규칙은 반드시 백엔드에서 강제해야 합니다. 두 계층의 차이에 대해서는 프런트엔드와 백엔드의 차이를 참고하세요.

실제 예시: 요가 수업 예약 앱

요가 스튜디오를 운영하면서 온라인으로 수업을 예약받고 싶다고 해 봅시다.

방문자가 하는 일: 사이트를 열고, 이번 주 수업을 보고, 하나를 탭하고, 로그인한 뒤 자리를 예약합니다.

그 뒤에서 일어나는 일:

1. 프런트엔드가 시간표를 보여 줍니다. 이를 채우기 위해 백엔드에 “이번 주 수업이 무엇이고, 자리가 몇 개 남았는지” 묻습니다.
2. 백엔드가 데이터베이스에 수업을 요청하고, 각 수업의 예약 수를 세어 응답합니다.
3. 방문자가 예약을 탭합니다. 프런트엔드는 “로그인한 이 사람을 위해 수업 42를 예약해 달라”고 보냅니다.
4. 백엔드가 확인합니다. 이 사람이 정말 로그인한 상태인가요? 수업이 꽉 찼나요? 이미 예약했나요? 모두 문제가 없을 때만 데이터베이스에 새 예약 행을 씁니다.
5. 백엔드가 “예약 완료”라고 응답하고, 프런트엔드는 확인 메시지를 보여 줍니다.
6. 나중에 스튜디오 사장님이 로그인해 수업 목록을 봅니다. 백엔드는 그녀가 관리자인지 확인한 뒤에야 모든 사람의 이름을 보여 줍니다.

이것을 프런트엔드만으로 만들었다고 상상해 보세요. 시간표는 보일 수 있고, 예약 버튼은 멋진 체크 표시를 보여 줄지도 모릅니다. 하지만 새로 고침하면 예약이 사라지고, 다른 사람에게는 ‘남은 자리’ 수가 틀리게 보이며, 사장님은 예약을 전혀 볼 수 없습니다. 4단계, 즉 확인 과정이 통째로 빠져 있기 때문입니다. 이것이 실제로 차이를 만드는 부분입니다.

핵심 용어

• 프런트엔드(클라이언트 쪽): 브라우저에서 실행되는 부분입니다.
• 백엔드(서버 쪽): 서버에서 실행되는 부분입니다. API 서버라고도 부릅니다.
• 데이터베이스: 데이터를 체계적으로 저장하는 곳입니다. 데이터베이스란 무엇인가를 참고하세요.
• API: 백엔드가 프런트엔드나 다른 프로그램으로부터 받아들이는 요청 목록입니다.
• 인증(Authentication): 누구인지 확인하는 것, 즉 로그인입니다. 인가(Authorisation): 무엇을 할 수 있는지 확인하는 것입니다.
• 배포: 대중이 사용할 수 있도록 모든 계층을 서버에 올리는 것입니다.
• 모놀리스 vs 서비스: 모든 일을 하는 하나의 프로그램과, 여러 개의 작은 프로그램(예: 웹사이트와 별도의 API)을 비교하는 개념입니다. 둘 다 풀스택입니다.

흔한 실수와 오해

• “겉보기에 완성되었으니 완성된 것이다.” 샘플 데이터와 작동하는 것처럼 보이는 버튼은 저장된 데이터와 같지 않습니다. 페이지를 새로 고치고, 비공개 창에서 열어 보고, 데이터가 그대로 남아 있는지 확인하세요.
• 규칙을 프런트엔드에 두는 것. 버튼을 숨긴다고 보안이 되지는 않습니다. 백엔드가 확인하지 않으면, 요청 방법을 아는 누구든 그 요청을 보낼 수 있습니다.
• 비밀 키를 프런트엔드에 두는 것. 결제나 AI 제공업체의 키가 브라우저 코드에 있으면 모든 방문자가 읽을 수 있습니다. 키는 백엔드에서 환경 변수로 관리해야 합니다. 환경 변수와 시크릿을 참고하세요.
• 풀스택이 복잡하다고 생각하는 것. 작은 풀스택 앱은 몇 개의 화면, 몇 개의 백엔드 경로, 세 개 정도의 데이터베이스 테이블로도 충분합니다. 풀스택은 규모가 아니라 계층을 설명하는 말입니다.
• 모든 기술을 직접 골라야 한다고 생각하는 것. 첫 버전에는 널리 쓰이는 어떤 합리적인 스택도 괜찮습니다. 더 중요한 것은 데이터와 규칙에 대한 명확한 설명입니다.

AI 빌더에 요청할 내용

계층의 이름을 몰라도, 앱을 세 계층의 관점에서 설명해 보세요.

• 데이터: “수업(이름, 시간, 정원)과 예약(수업, 사람, 예약 시각)을 데이터베이스에 저장해 주세요.”
• 규칙: “정원을 넘는 예약은 불가능합니다. 한 사람은 한 수업을 한 번만 예약할 수 있습니다. 누가 예약했는지는 관리자만 볼 수 있습니다.”
• 화면: “주간 시간표, 예약 확인 화면, 수업별 예약자를 보여 주는 관리자 페이지를 만들어 주세요.”
• 확인: “이 규칙들은 페이지뿐 아니라 서버에서도 강제해 주세요. API 키는 서버에 두세요.”

그다음에는 의심 많은 사람처럼 테스트해 보세요. 새로 고침하고, 서로 다른 두 사람으로 로그인하고, 보면 안 되는 데이터를 보려고 시도해 보세요. AI로 앱 만드는 방법에서 이 과정을 처음부터 끝까지 안내합니다.

Mythex의 풀스택 앱

Mythex는 채팅으로 설명한 내용에서 풀스택 웹 앱을 만듭니다. 새 앱은 기본적으로 React와 TypeScript 프런트엔드를 갖고, 데이터를 저장해야 할 때는 프로젝트에 전용 Postgres 데이터베이스가 추가됩니다. 웹사이트와 함께 별도의 API 서버(예: Python, Node, C#, Java)를 요청할 수도 있습니다. 모든 것은 실시간 미리보기에서 함께 실행되고, 공개 URL로 게시됩니다. 다중 서비스 앱 문서 페이지에서 웹사이트와 API를 함께 미리보기하고 게시하는 방법을 확인할 수 있습니다. 시작점이 필요하다면 풀스택 앱 빌더 페이지를 참고하세요.

자주 묻는 질문