안녕하세요! ‘앱 만들기, 레고 블록 조립과 똑같아요!’ 시리즈의 세 번째 시간입니다.
지난 1편에서는 앱의 ‘겉모습(UI)’과 ‘사용 경험(UX)’에 대해, 2편에서는 앱의 보이지 않는 심장과 뇌 역할을 하는 ‘서버’, ‘DB’, ‘API’에 대해 알아보았습니다. 이제 앱을 구성하는 다양한 레고 블록들이 어떤 것인지 조금은 감이 오시죠?
오늘은 이런 블록들을 가지고 앱을 만들어 나가는 과정, 즉 개발의 큰 두 가지 역할인 프론트엔드와 백엔드에 대해 이야기해볼 거예요. 마치 레고로 멋진 성을 만들 때, 성의 외관을 꾸미는 역할과 성 내부의 복잡한 장치들을 만드는 역할이 다르듯이 말이죠!
자, 그럼 레고 조립의 두 가지 핵심 역할을 함께 탐험해볼까요?
프론트엔드 (Front-end) | 레고 작품의 ‘겉모습을 조립하는 일’
프론트엔드는 우리가 만든 레고 작품의 겉모습을 조립하는 모든 일이라고 생각하면 딱 맞아요.
상상해 보세요. 여러분이 레고로 멋진 성을 만들고 있어요. 이 성을 보는 사람들이 “우와! 정말 웅장하다!”, “예쁘게 잘 만들었다!”라고 감탄하게 만들려면 어떤 블록들을 어떻게 배치해야 할까요?
- 성벽은 어떤 색깔 블록으로 쌓을까?
- 성문은 크고 튼튼하게 만들까, 아니면 아치형으로 우아하게 만들까?
- 깃발은 어디에 꽂아야 가장 멋있을까?
- 방문객들이 볼 수 있는 정원은 어떻게 꾸밀까?
이처럼 사용자의 눈에 직접 보이고, 사용자가 직접 만지고 누르는 모든 부분을 만드는 것이 바로 프론트엔드 개발입니다.
앱으로 예를 들자면 이런 것들이죠.
- 예쁜 디자인의 버튼 만들기
- 사진을 보기 좋게 배치하기
- 글씨가 깔끔하게 보이도록 꾸미기
- 사용자가 손가락으로 화면을 넘길 때 부드럽게 움직이도록 만들기
한마디로 사용자가 앱을 켰을 때 만나는 모든 화면을 만들고 꾸미는 역할이 바로 프론트엔드입니다. 우리 블로그의 1편에서 배운 UI (겉모습)와 아주 깊은 관련이 있겠죠?
백엔드 (Back-end) | 레고 작품의 ‘내부 엔진과 뼈대를 만드는 일’
백엔드는 레고 작품의 내부 엔진과 뼈대처럼, 겉으로는 보이지 않지만 작동에 꼭 필요한 부분을 만드는 일입니다.
다시 레고 성으로 돌아가 볼까요? 겉모습이 아무리 멋져도, 성 안에 중요한 기능이 없다면 단순한 장식품에 불과할 거예요.
- 성문이 자동으로 열리고 닫히려면 어떤 장치를 달아야 할까?
- 성 안에 있는 보물창고의 문은 어떻게 해야 안전하게 잠기고 열릴까?
- 병사들이 보고를 올리면 성주에게 어떻게 전달될까?
- 성안의 식량을 저장하고 관리하는 시스템은 어떻게 만들까?
이처럼 사용자의 눈에는 직접 보이지 않지만, 앱이 실제로 동작하고 데이터를 처리하며 기능을 수행하도록 만드는 모든 과정이 바로 백엔드 개발입니다.
앱으로 예를 들자면 이런 것들이죠.
- 회원이 로그인하면 정보가 맞는지 확인하고, 로그인을 허용하는 기능
- 게시판에 글을 올리면 그 글이 데이터베이스에 안전하게 저장되도록 하는 기능
- 쇼핑몰에서 결제를 하면, 실제 돈이 오가고 재고가 줄어드는 것을 처리하는 기능
- 다른 앱이나 서비스에서 정보를 가져오거나 보내는 기능 (API와 연결)
백엔드는 우리 블로그의 2편에서 배운 ‘서버’, ‘DB’, ‘API‘와 아주 밀접하게 연결되어 있어요. 앱의 ‘뇌’와 ‘심장’ 역할을 하는 거죠.
프론트엔드와 백엔드, 왜 둘 다 중요할까요?
프론트엔드는 사용자에게 보여지는 부분, 백엔드는 앱의 내부에서 일어나는 부분을 담당하기 때문에 이 둘은 서로 다른 역할을 하지만, 앱을 만들 때는 둘 다 필수적으로 중요합니다.
- 프론트엔드만 훌륭하면? 예쁘기만 하고 아무 기능도 안 되는 앱이 되겠죠? (예: 레고 성 겉모습은 멋진데, 문도 안 열리고 아무것도 없는 빈 성)
- 백엔드만 훌륭하면? 기능은 완벽하지만, 너무 복잡하고 사용하기 불편해서 아무도 쓰지 않는 앱이 될 거예요. (예: 완벽한 엔진과 내부 시스템을 갖췄지만, 겉모습이 투박해서 아무도 타고 싶어 하지 않는 레고 자동차)
결국, 사용자가 보고 만지는 겉모습(프론트엔드)과 내부에서 모든 기능을 움직이는 뼈대와 엔진(백엔드)이 서로 잘 맞물려 돌아갈 때 비로소 멋지고 쓸모 있는 앱이라는 레고 작품이 완성되는 것이랍니다!
어떠셨나요? 이제 앱 개발의 큰 두 가지 그림, 프론트엔드와 백엔드에 대해 조금 더 명확하게 이해되셨기를 바랍니다.
다음 시간에는 ‘프로그래밍 언어’와 ‘프레임워크’ 같은, 앱을 만드는 데 필요한 실제 ‘레고 조립 도구’들에 대해 알아보겠습니다.
<앱 만들기, 레고 블록 조립과 똑같아요!> 시리즈에 계속해서 많은 관심 부탁드려요!