20분 만에 끝내는 프론트엔드·백엔드·DB! 개발 입문자, IT 시스템 전체 구조 완전 정복 가이드

웹사이트랑 앱은 어떻게 만들어질까? (프론트엔드 & 백엔드 쉽게 설명)

안녕하세요! 오늘은 우리가 매일 쓰는 웹사이트랑 앱이 어떻게 만들어지는지, 좀 더 자세하게 알아볼 거예요. 어렵게 느껴질 수도 있지만, 끝까지 보면 다 이해될 거예요!

1. 기본 구조: 프론트엔드 & 백엔드

모든 시스템은 크게 두 부분으로 나눌 수 있어요.

• 프론트엔드 (Frontend): 우리가 눈으로 보고 직접 만지는 부분이에요. 웹사이트의 화면이나 앱의 화면 같은 거죠.
• 백엔드 (Backend): 눈에 보이지 않지만, 뒤에서 모든 걸 처리해주는 부분이에요. 여기에는 서버와 데이터베이스가 있어요.

이 둘은 서로 데이터를 주고받으면서 작동해요.

2. 프론트엔드: 우리가 보는 화면

프론트엔드는 주로 세 가지 일을 해요.

• 화면 만들기: 웹사이트든 앱이든 우리가 보는 화면을 만드는 거예요.
• 이벤트 처리: 버튼을 누르거나 뭔가를 클릭하는 것처럼, 사용자가 하는 행동을 알아채고 처리하는 거예요.
• 데이터 주고받기: 서버랑 통신해서 필요한 데이터를 가져오거나 보내는 거예요.

웹사이트 (Web)

• 주소 입력: 웹사이트에 접속하려면 브라우저에 www.google.com 같은 주소(도메인)를 입력하죠.
• 도메인 & IP 주소: 이 도메인은 사람이 기억하기 쉽게 만든 이름이고, 실제 컴퓨터끼리 통신하려면 192.168.0.1 같은 IP 주소가 필요해요. DNS라는 게 도메인을 IP 주소로 바꿔주는 역할을 해요.
• HTTP/HTTPS: 웹에서 데이터를 주고받을 때 약속된 규칙을 HTTP라고 해요. 여기에 'S'가 붙으면 보안이 강화된 HTTPS예요.
• 화면 구성: 웹사이트 화면은 주로 HTML (뼈대), CSS (꾸미기), JavaScript (움직임) 그리고 이미지로 만들어져요.

앱 (App)

• 설치형 프로그램: 앱은 스마트폰에 직접 설치되는 프로그램이에요.
• 개발 언어: 안드로이드는 Java, Kotlin 등으로 만들고, 아이폰은 Swift, Objective-C 등으로 만들어요. React Native, Flutter 같은 걸 쓰면 안드로이드와 아이폰 앱을 한 번에 만들 수도 있어요.
• API 통신: 앱은 API라는 걸 통해 서버와 통신해요. API는 서버한테 "이거 해줘!"라고 요청하고, 서버는 "알았어, 이거야!"라고 응답해주는 약속 같은 거예요.
• 데이터 형식: 서버에서 받은 데이터는 보통 JSON이나 XML이라는 형식으로 되어 있어요.

3. 백엔드: 뒤에서 일하는 똑똑한 친구들

백엔드는 서버와 데이터베이스로 구성돼요.

서버 (Server)

서버는 크게 두 가지 역할을 해요.

• 요청 응답: 사용자의 요청을 받아서 처리하고 결과를 돌려주는 거예요. 마치 식당의 웨이터처럼요.
• 데이터베이스 연동: 데이터베이스에 저장된 데이터를 가져오거나, 새로운 데이터를 저장하는 일을 해요.

서버는 항상 사용자의 요청을 기다리고 있어요. 이걸 대기(Listen) 상태라고 해요.

• 웹 서버 (Web Server): 아파치(Apache), Nginx 같은 웹 서버는 HTML, CSS, JavaScript, 이미지 같은 정적인 파일들을 저장해두고 요청이 오면 그대로 보내주는 역할을 해요.
• 웹 애플리케이션 서버 (WAS): WAS는 웹 서버에 프로그램 기능이 더해진 거예요. 데이터베이스를 조회하거나, 데이터를 저장/수정/삭제하는 등 동적인 처리를 할 수 있어요. 우리가 만드는 백엔드 프로그램이 바로 이 WAS 위에 올라가는 거죠.

데이터베이스 (Database)

데이터베이스는 우리가 사용하는 모든 데이터를 체계적으로 저장하는 곳이에요.

• 테이블: 데이터는 테이블이라는 형태로 저장돼요. 엑셀 표처럼 생각하면 쉬워요.
• 레코드 (행): 테이블에서 가로 한 줄을 레코드라고 해요. 예를 들어, 사용자 테이블에서 한 사람의 정보 전체가 하나의 레코드예요.
• 컬럼 (열): 세로 항목을 컬럼이라고 해요. 사용자 테이블에서 '이름', '아이디', '이메일' 같은 것들이 컬럼이 되는 거죠.
• SQL: 데이터베이스에 저장된 데이터를 조작하기 위한 언어를 SQL이라고 해요. 데이터를 만들고(Create), 읽고(Read), 수정하고(Update), 삭제(Delete)하는 모든 작업이 SQL로 이루어져요. 이걸 줄여서 CRUD라고도 불러요.

4. 데이터 흐름 정리

간단하게 정리하면 이런 흐름이에요.

1. 앱/웹에서 버튼 클릭: 사용자가 앱이나 웹에서 어떤 행동을 해요.
2. API 호출: 앱은 API를 통해 서버에 요청을 보내요.
3. WAS에서 처리: WAS는 요청을 받아서 필요한 데이터를 데이터베이스에서 가져오거나 저장해요. (SQL 사용)
4. 데이터베이스 응답: 데이터베이스는 요청받은 데이터를 WAS에 돌려줘요.
5. WAS에서 데이터 가공: WAS는 받은 데이터를 JSON 같은 형식으로 만들어서 응답해요.
6. 앱/웹에서 화면 표시: 앱이나 웹은 받은 데이터를 가지고 화면에 보여줘요.

물론 조금씩 다른 부분도 있지만, 대부분의 시스템은 이런 식으로 작동한다고 생각하면 돼요!

도움이 되셨다면 좋아요를 눌러주세요! 다음에도 더 좋은 내용으로 돌아올게요!