화면·기능·데이터·서버를 처음부터 이해하기

웹서비스를 만들어보고 싶다고 생각하면 가장 먼저 코딩부터 배워야 할 것처럼 느껴집니다. HTML, Python, 데이터베이스, 서버 같은 단어가 한꺼번에 등장하면 시작하기도 전에 어렵게 느껴집니다. 하지만 처음에는 기술 이름을 외우는 것보다 “웹서비스 하나가 어떤 조각으로 이루어지는지”를 이해하는 것이 훨씬 중요합니다.

MathGenix를 만들 때도 처음부터 전체 구조를 알고 시작한 것은 아니었습니다. 필요한 기능을 하나씩 만들다 보니 화면이 필요했고, 버튼을 눌렀을 때 움직이는 프로그램이 필요했고, 만들어진 문제를 저장할 공간이 필요했고, 마지막에는 다른 사람이 접속할 서버가 필요해졌습니다. 지금 돌아보면 대부분의 웹서비스는 이 네 가지 틀로 먼저 이해할 수 있습니다.

오늘의 목표

  • 웹서비스를 구성하는 네 가지 기본 요소를 이해합니다.
  • 프론트엔드, 백엔드, 데이터베이스, 서버라는 말을 처음 들어도 역할을 구분할 수 있습니다.
  • 앞으로 어떤 순서로 배워야 하는지 전체 지도를 머릿속에 그립니다.

01. 첫 번째: 사용자가 보는 화면

우리가 사이트에 접속하면 가장 먼저 보는 것은 화면입니다. 제목, 메뉴, 버튼, 입력창, 사진, 글 목록 같은 것들입니다. 사용자가 실제로 보고 클릭하는 이 부분을 보통 프론트엔드 또는 UI라고 부릅니다.

쉽게 말하면 가게의 진열대와 같습니다. 손님은 창고나 회계 시스템을 먼저 보는 것이 아니라 진열된 상품과 안내판을 먼저 봅니다. 웹서비스에서도 사용자가 직접 만나는 부분이 화면입니다.

MathGenix라면 문제를 생성하는 버튼, 학년을 선택하는 메뉴, 결과를 보여주는 화면 등이 여기에 해당합니다.

02. 두 번째: 버튼을 눌렀을 때 실제로 하는 일

예쁜 버튼만 있다고 서비스가 되는 것은 아닙니다. “문제 생성” 버튼을 눌렀다면 실제로 문제를 만들고, 로그인 버튼을 눌렀다면 사용자가 맞는지 확인해야 합니다. 이렇게 화면 뒤에서 실제 일을 처리하는 부분을 백엔드라고 부릅니다.

초보자는 백엔드를 “화면 뒤에서 일하는 직원”이라고 생각하면 쉽습니다. 사용자가 주문 버튼을 누르면 주방에서 실제 음식이 만들어지는 것과 비슷합니다.

Python 같은 프로그래밍 언어는 이런 기능을 구현할 때 사용할 수 있습니다. 하지만 지금은 Python 문법을 외울 필요가 없습니다. “화면에서 받은 요청을 뒤에서 처리하는 부분이 있구나” 정도만 이해하면 됩니다.

03. 세 번째: 서비스가 기억해야 하는 정보

회원 정보, 작성한 글, 생성한 문제, 주문 내역처럼 서비스가 나중에도 기억해야 할 정보가 있습니다. 이런 정보를 저장하는 곳이 데이터베이스입니다.

메모장에 잠깐 적어두는 것과 달리 데이터베이스는 정보를 일정한 구조로 저장하고 다시 찾아올 수 있게 해줍니다. MathGenix에서는 문제와 개념 사이의 관계를 다루기 위해 Neo4j 같은 그래프 데이터베이스도 사용했습니다.

여기서도 지금 Neo4j 사용법을 알 필요는 없습니다. 먼저 “서비스가 정보를 기억하려면 저장소가 필요하다”는 개념만 잡으면 됩니다.

04. 네 번째: 다른 사람이 접속하게 해주는 서버

내 컴퓨터에서만 프로그램이 실행된다면 나만 사용할 수 있습니다. 다른 사람이 인터넷 주소를 입력해 언제든 접속하려면 프로그램을 계속 실행해주는 컴퓨터가 필요합니다. 이것이 서버입니다.

서버는 특별한 마법 상자가 아니라, 인터넷에 연결되어 계속 켜져 있으면서 내 프로그램을 실행하는 컴퓨터라고 생각하면 됩니다. AWS 같은 서비스에서는 이런 서버를 인터넷에서 빌려 사용할 수 있습니다.

05. 네 가지를 한 문장으로 정리하면

  • UI / 화면: 사용자가 보고 클릭하는 부분
  • 기능 / 백엔드: 버튼을 눌렀을 때 실제 일을 처리하는 부분
  • 데이터베이스: 서비스가 기억해야 할 정보를 저장하는 부분
  • 서버: 만들어진 서비스를 인터넷에서 계속 실행해주는 컴퓨터

웹서비스를 만든다는 것은 결국 이 네 가지를 하나씩 만들고 서로 연결하는 일입니다.

06. AI는 어디에서 도와줄까?

예전에는 이 네 영역을 각각 공부한 뒤 개발을 시작하는 경우가 많았습니다. 지금은 ChatGPT나 Codex 같은 AI에게 “회원가입 화면을 만들어줘”, “이 버튼을 누르면 데이터를 저장하게 해줘”, “이 오류가 왜 생겼는지 알려줘”처럼 구체적으로 요청하면서 필요한 부분을 하나씩 만들어볼 수 있습니다.

하지만 AI가 코드를 만들어준다고 해서 구조를 전혀 몰라도 되는 것은 아닙니다. 화면인지, 기능인지, 데이터인지, 서버 문제인지 정도를 구분할 수 있어야 AI에게도 더 정확하게 질문할 수 있습니다.

07. MathGenix도 이 순서로 커졌다

MathGenix도 처음부터 거대한 서비스를 설계한 것이 아니라 작은 문제 생성 프로그램에서 시작했습니다. 화면을 만들고, 생성 기능을 붙이고, 데이터를 저장하고, 마지막에는 다른 사용자가 접속할 수 있도록 서버와 도메인을 연결했습니다. 앞으로 BUILD에서는 바로 이 과정을 초보자 눈높이에서 하나씩 다시 따라가게 됩니다.

SUMMARY

  • 웹서비스는 크게 화면, 기능, 데이터, 서버 네 부분으로 이해할 수 있습니다.
  • 기술 이름을 외우기 전에 각 부분이 왜 필요한지 이해하는 것이 먼저입니다.
  • AI는 이 네 영역의 코드를 만들고 오류를 찾는 데 도움을 줄 수 있습니다.
  • 앞으로 BUILD의 네 개 메뉴도 이 구조를 기준으로 구성됩니다.

ONE LINE TAKEAWAY

웹서비스 개발은 어려운 기술 하나를 배우는 일이 아니라, 화면·기능·데이터·서버 네 조각을 하나씩 연결하는 과정입니다.

NEXT IN SERIES

STEP 003 — 처음에는 ChatGPT가 짜준 코드를 복사해서 개발했다