비전문가를 위한 '프론트엔드'와 '백엔드' 설명

프론트엔드란?

프론트엔드는 웹사이트를 사용할 때 사람들이 직접 보고, 클릭하고, 스크롤하는 눈에 보이는 부분입니다. 쉽게 말해, 웹사이트나 앱의 "겉모습"이라고 할 수 있습니다.

예를 들어, 웹사이트의 메뉴, 버튼, 이미지, 글자처럼 사용자가 상호작용하는 모든 것이 프론트엔드에 해당합니다. 인터넷 사용자가 "오! 이 사이트 멋지군. 그리고 이해가 쉽네."라는 말이 나오도록 디자인 하는 게 프론트엔드 개발자의 역할인 것이죠.

만약 웹사이트에 접속한 사용자가 어디를 클릭해야 할지 모르거나, 사이트의 핵심 주제가 아닌 지점을 더 많이 클릭하고 있다면, 극히 예외적인 경우를 제외하고는 실패한 디자인입니다.

이 업무를 위한 주요 도구로는 아래 세 가지 언어를 사용합니다.

• HTML: 웹사이트의 기본 구조를 만듭니다. 예: "글씨를 어디에 넣을지, 사진은 어디에 배치할지"를 정리하는 작업입니다.
• CSS: 웹사이트의 모양과 색깔을 꾸밉니다. 예: 글자의 색을 빨간색으로 바꾸거나, 버튼의 모서리를 둥글게 만드는 것입니다.
• JavaScript: 웹사이트에 움직임과 반응을 추가합니다. 예: "버튼을 클릭하면 팝업 창이 열리거나, 이미지를 슬라이드처럼 움직이게 하는 기능"을 만듭니다.

백엔드란?

백엔드는 사용자가 보지 못하는 "속 부분"입니다. 쉽게 말해, 프론트엔드가 사용자에게 보여주는 결과를 처리하고 만들어 내는 역할을 하는 엔진과 같은 개념입니다.

예를 들어, 사용자가 로그인 버튼을 클릭했을 때, 서버에서 해당 사용자의 정보를 확인해 "로그인 성공" 또는 "오류"라는 결과를 보내주는 것과 같은 프로그래밍 부분입니다. 또한 사용자가 입력한 웹사이트의 데이터(예: 상품 목록, 사용자 프로필 등)를 저장하고 관리하는 역할도 맡습니다.

이 업무를 위한 주요 도구로는 어래 세 가지가 핵심입니다.

• 서버: 인터넷 사용자가 접속한 서버 컴퓨터를 말하는 것으로, 각종 명령을 처리하고 필요한 데이터를 주고 받습니다.
• 데이터베이스: 데이터를 저장하는 장소입니다. 예: 사용자가 입력한 정보(이름, 이메일 등)를 저장하거나, 상품 리스트를 보여줄 때 사용됩니다.
• 프로그래밍 언어: 백엔드 로직을 설계하는 도구입니다. 대표적인 언어로는 PHP, Python, Java, Node.js 등이 있습니다.

이렇게, 프론트엔드는 사용자와 웹사이트를 연결하는 "겉모습"이고, 백엔드는 그 모든 작동을 책임지는 "보이지 않는 뇌"라고 이해하면 됩니다. 🏠