프론트엔드

손님 눈에 보이는 모든 것이에요. 화면의 색, 글씨, 버튼, 사진처럼 손님이 만지는 부분을 말해요. 줄여서 프론트라고도 불러요.

쉽게 말하면

가게의 홀이에요. 인테리어, 메뉴판, 테이블 배치, 간판 글씨처럼 손님이 보고 만지는 전부요. 손님은 주방이 어떻게 생겼는지 모르지만 홀은 1초 만에 판단해요. 그래서 첫인상은 거의 전부 여기서 결정됩니다.

반대로 예약을 실제로 기록하고 결제를 처리하는 안쪽 일은 백엔드가 해요. 손님이 예약 버튼을 누르는 것까지가 프론트엔드, 그 다음부터가 백엔드입니다.

이 표가 실무에서 왜 중요하냐면, 어느 쪽 일인지에 따라 견적이 열 배씩 차이나기 때문이에요. 업체에 "버튼 색만 바꿔주세요"라고 했는데 큰 금액이 나온다면 무엇 때문인지 물어볼 근거가 됩니다.

화면만 바꾸는 건 싸고 빠릅니다

이건 사장님에게 실질적인 힘이 돼요. 계절마다 분위기를 바꾸거나, 행사 배너를 올리거나, 사진을 새로 찍어 바꾸는 일은 자주 해도 부담이 없는 종류의 변경이에요. 겁내지 말고 자주 바꾸세요.

동네 가게를 찾는 손님의 대부분은 휴대폰으로 들어와요. 컴퓨터 화면에서 예쁜 것보다 휴대폰에서 안 깨지는 것이 훨씬 중요합니다.

바이브캠퍼스에서 만들면 휴대폰 화면은 기본으로 맞춰져요. 그래도 직접 휴대폰으로 한 번 들어가 보는 것은 꼭 하세요. 눈으로 보면 보이는 게 다릅니다.

장면 1 · 견적이 이해가 안 된다

“글씨 색 바꾸는 데 30만원이라는데, 이게 맞는 금액인가요?”

색만 바꾸는 일이라면 과합니다. 다만 "색을 바꾸면서 전체 디자인을 다시 잡는" 일이라면 다를 수 있어요. 어디까지가 포함인지를 물어보세요. 프론트엔드와 백엔드를 구분해서 물으면 상대가 대충 답하기 어려워집니다.

장면 2 · 컴퓨터에선 멀쩡한데 휴대폰이 깨진다

“제 컴퓨터에선 잘 보이는데 손님이 휴대폰으로 보니까 글씨가 잘린대요.”

가장 흔한 일이에요. 만들 때는 컴퓨터로 보고 손님은 휴대폰으로 보니까요. 만들면서 수시로 휴대폰으로 확인하는 습관이 이 문제의 90퍼센트를 없앱니다.

Q. 디자인이랑 프론트엔드는 같은 건가요?: 겹치지만 달라요. 디자인은 어떻게 보일지 정하는 일이고, 프론트엔드는 그것이 실제로 화면에서 동작하게 만드는 일이에요. 바이브캠퍼스에서는 두 가지가 한 번에 됩니다.
Q. 손님마다 다르게 보이나요?: 화면 크기에 따라 배치가 달라져요. 휴대폰에서는 세로로 쌓이고 컴퓨터에서는 옆으로 놓이는 식이에요. 내용은 같습니다.
Q. 손님이 화면을 보고 있는 걸 제가 알 수 있나요?: 몇 명이 들어왔는지, 어느 화면을 오래 봤는지 정도는 알 수 있어요. 누가 누구인지는 알 수 없고, 알려고 해서도 안 됩니다.
Q. 화면에 넣은 내용은 손님이 다 볼 수 있나요?: 네, 원리적으로 그렇습니다. 그래서 프론트엔드에는 비밀을 넣으면 안 돼요. 비밀은 환경변수 금고에 넣습니다.

확인해 보세요

다음 중 가장 싸고 빠르게 바꿀 수 있는 것은?

직접 해보기

만든 화면을 휴대폰으로 열어 보세요

게시하면 생기는 주소를 내 휴대폰에 보내서 열어 보세요. 컴퓨터에서 안 보이던 것이 보입니다.

더 깊이 (안 읽어도 괜찮아요)

화면을 만드는 세 가지 · 구조를 잡는 것, 꾸미는 것, 움직이게 하는 것이 각각 다른 언어로 돼 있어요. 뼈대와 옷과 동작이라고 보면 됩니다. 바이브캠퍼스에서는 AI가 세 가지를 한꺼번에 만들어 주지만, 개발자와 대화할 때 이 구분이 나오면 이 얘기예요.

왜 어떤 화면은 느린가 · 사진이 무거우면 느려요. 카메라로 찍은 사진은 한 장에 몇 메가씩 되는데, 화면에 필요한 크기는 그보다 훨씬 작아요. 줄이지 않고 그대로 올리면 손님이 그 무게를 다 내려받습니다. 사진을 줄이는 것만으로 체감 속도가 크게 달라져요.

이것만 기억하세요