자바스크립트(움직이는 부분)

손님이 버튼을 눌렀을 때 뭔가 일어나게 만드는 층이에요. 화면은 멀쩡한데 눌러도 아무 반응이 없다면, 대개 이 층이 비어 있거나 중간에서 멈춘 거예요.

쉽게 말하면

가게 자동문을 떠올려 보세요. 문짝이 있고, 문에 유리와 색을 입혀 놨고, 사람이 다가오면 문을 여는 센서와 모터가 달려 있어요. 화면도 똑같이 세 겹이에요. 문짝이 뼈대, 유리와 색이 꾸미기, 그리고 센서와 모터가 자바스크립트예요. 문짝만 세워 두면 보기에는 멀쩡하지만 안 열려요. 눌러도 아무 일이 없는 버튼이 딱 그 상태예요.

그래서 "화면은 잘 나왔는데 버튼이 죽어 있다"는 말은 뼈대나 꾸미기 문제가 아닌 경우가 많아요. 눌렀을 때 할 일이 이 층에 안 적혀 있거나, 적혀 있는데 실행 중에 걸려 넘어진 거예요.

죽은 버튼

예약하기 버튼 = 생김새만 있음

손님은 두 번 세 번 더 눌러 보다가 나가요. 사장님 눈에는 멀쩡한 화면이라 신고가 들어와도 뭐가 문제인지 안 보여요.

살아 있는 버튼

예약하기 버튼 + 누르면: 날짜 확인 → 저장 → "접수됐어요" 표시

누른 뒤에 무슨 일이 일어나는지 손님이 바로 알아요. 이 "누르면" 뒷부분이 자바스크립트의 몫이에요.

화면은 세 겹으로 되어 있어요

겹	가게로 치면	이 겹이 없으면
뼈대 (HTML)	진열대와 문짝. 무엇이 어디에 놓이는지	글과 사진이 아예 없어요. 빈 화면이에요
꾸미기 (CSS)	간판 색, 조명, 글씨 크기, 여백	내용은 다 있는데 흰 종이에 검은 글씨처럼 밋밋해요
움직임 (자바스크립트)	자동문 센서, 계산대, 직원의 동작	보이기는 하는데 눌러도 아무 일이 없어요

순서가 있어요. 브라우저(손님이 화면을 보는 프로그램)는 뼈대를 먼저 그리고, 꾸미기를 입히고, 마지막에 움직임을 붙여요. 화면은 잘 뜨는데 버튼만 안 되는 일이 생기는 이유가 이거예요. 앞의 두 겹은 이미 자기 일을 끝냈으니까요.

"안 돼요"의 절반은 이 층이에요

손님이 "버튼이 안 눌려요", "장바구니 숫자가 안 바뀌어요", "메뉴가 안 열려요"라고 말하면 거의 이 층 이야기예요. 화면이 아예 안 뜨는 것과는 원인이 완전히 달라요. 어디를 봐야 하는지 절반으로 좁혀 주는 정보라, 이것만 알아도 개발자와 대화가 빨라져요.

이 층이 하는 일은 결국 세 가지

복잡해 보이지만 자바스크립트가 하는 일을 다 모아 보면 몇 가지로 정리돼요. 알아채고, 판단하고, 바꾸는 거예요.

1알아채기. 손님이 버튼을 눌렀는지, 글자를 입력했는지, 화면을 아래로 내렸는지 지켜봐요. 문에 달린 종 같은 역할이에요.
2판단하기. 연락처 칸이 비었는지, 재고가 남았는지, 이미 로그인한 손님인지 따져 봐요.
3바꾸기. 화면의 숫자를 고치고, 접어 둔 칸을 펼치고, "접수됐어요" 문구를 띄워요. 페이지를 새로 불러오지 않고 그 자리에서 바뀌는 게 이 층의 특기예요.
4보내기와 받기. 필요하면 백엔드에 "이 예약 저장해 주세요"라고 요청하고, 창고(데이터베이스)에 들어간 결과를 받아 화면에 반영해요.

사장님이 말로 부탁하는 것들이 실제로는 이렇게 나뉘어요. 왼쪽이 사장님 말이고 오른쪽이 이 층이 맡는 부분이에요.

사장님이 원하는 것	이 층이 맡는 부분
메뉴 아이콘을 누르면 메뉴가 펼쳐진다	누른 것을 알아채고 접어 둔 칸을 펼치기
날짜를 안 고르면 예약이 안 넘어가게	비었는지 확인하고 "날짜를 골라 주세요" 띄우기
수량을 올리면 합계가 바로 바뀐다	숫자를 다시 계산해서 그 자리에서 고쳐 쓰기
사진이 저절로 넘어가는 배너	몇 초마다 다음 사진으로 바꾸기
문의를 보내면 새로고침 없이 확인 문구	입력값을 서버로 보내고 답을 받아 문구 바꾸기

사장님이 실제로 겪는 장면

장면 1 · 외주 개발자가 말했다

“화면만 만드는 게 아니라 자바스크립트로 동작까지 붙여야 해서 공수가 더 들어요.”

핑계가 아니라 사실인 경우가 많아요. 뼈대와 꾸미기는 "이렇게 생기게" 한 번 정하면 끝나요. 움직임은 손님이 할 수 있는 행동마다 할 일을 정해 줘야 해요. 아무것도 안 고르고 눌렀을 때, 두 번 연속 눌렀을 때, 인터넷이 끊겼을 때까지요. 견적서에 "눌렀을 때 무엇이 일어나는지"가 적혀 있는지 보세요. 그 문장이 없으면 나중에 서로 다른 걸 생각하고 있었다는 게 드러나요.

장면 2 · 손님이 예약 버튼이 안 먹는다고 했다

“화면은 잘 보이는데 예약하기를 눌러도 아무 반응이 없어요. 세 번 눌렀어요.”

이 층이 실행 중에 걸려 넘어진 전형적인 모습이에요. 브라우저에는 오류를 적어 두는 기록장이 숨어 있어요(개발자 도구의 콘솔). 개발자에게 "콘솔에 빨간 줄이 있는지 봐 주세요"라고만 말해도 대화가 확 빨라져요. 그 빨간 줄을 읽는 법은 에러 메시지 읽기에 있어요.

장면 3 · 내 노트북에서는 되는데 손님 휴대폰에서는 안 된다

“제 컴퓨터에서는 잘 되는데 손님은 휴대폰에서 버튼이 안 된다고 해요.”

이 층은 손님 기기에서 실행돼요. 그래서 기기와 브라우저 버전에 따라 결과가 달라질 수 있어요. 광고 차단 프로그램이 스크립트를 막아 버리는 경우도 있고요. 확인은 내 컴퓨터가 아니라 손님이 쓰는 환경에서 눌러 봐야 해요. 버튼이 화면 밖으로 밀려 나가 안 눌리는 거라면 반응형 쪽 이야기일 수도 있어요.

하나가 걸리면 옆의 것도 같이 멈춰요

이 층의 성질 하나만 알아 두면 사고를 훨씬 빨리 설명할 수 있어요. 적어 둔 순서대로 실행되고, 중간에서 걸리면 그 뒤가 실행되지 않아요.

메뉴 버튼을 담당하는 줄에서 오류가 나면, 그 아래에 적혀 있던 배너 넘기기와 합계 계산도 같이 멈출 수 있어요. 사장님 눈에는 "갑자기 여러 개가 동시에 고장 났다"로 보이지만, 원인은 보통 한 군데예요.

여러 개가 동시에 안 된다면

각각을 따로 고치려 들지 마세요. 제일 처음 안 되기 시작한 것을 찾아 그 하나만 치우면 나머지가 같이 살아나는 일이 흔해요. 개발자에게도 "이것들이 다 안 돼요"보다 "메뉴부터 안 되고 그다음이 줄줄이 안 돼요"가 훨씬 쓸모 있는 말이에요.

그리고 이 층의 내용은 손님 기기로 내려가서 실행돼요. 그러니까 안에 적힌 것은 손님이 마음먹으면 전부 볼 수 있어요. 결제 비밀키나 관리자 비밀번호를 여기 적으면 안 되는 이유예요. 그런 값은 환경변수라는 금고에 넣고 서버 쪽에서만 꺼내 써요.

자주 묻는 것

Q. 자바스크립트랑 자바는 같은 건가요?: 다른 언어예요. 이름만 닮았어요. 웹 화면을 움직이게 하는 건 자바스크립트고, 자바는 주로 규모가 큰 기업용 프로그램에 쓰는 별개의 언어예요. 외주 이야기를 할 때 이 둘을 섞어 말하면 견적과 사람 구성이 아예 달라져요. 한 번 확인하고 넘어가는 게 좋아요.
Q. 바이브캠퍼스에서는 제가 자바스크립트를 직접 써야 하나요?: 직접 타이핑할 일은 없어요. "누르면 이렇게 되게 해 주세요"라고 말로 부탁하면 그 동작이 만들어져요. 다만 무엇을 부탁할지는 사장님이 정해야 해요. 이 층이 무슨 일을 하는지 알면 부탁이 훨씬 정확해지고, 만들어진 결과도 한 번에 맞아요. 부탁하는 법은 프롬프트에 정리해 뒀어요.
Q. 손님 쪽에서 자바스크립트가 막혀 있으면요?: 드물지만 있어요. 광고 차단 프로그램이나 회사 보안 설정이 막는 경우예요. 그래서 가게 이름, 전화번호, 주소, 영업시간처럼 꼭 보여야 하는 정보는 움직임에 의존하지 말고 뼈대에 그대로 넣어 두는 게 안전해요. 눌러야 나오는 곳에만 전화번호가 있으면 그 손님은 전화를 못 걸어요.
Q. 자바스크립트를 많이 쓰면 화면이 느려지나요?: 네, 많이 붙일수록 손님 기기가 할 일이 늘어나요. 특히 몇 년 된 휴대폰에서 티가 나요. 없어도 되는 움직임(과한 애니메이션 같은 것)을 덜어내는 게 속도 개선의 흔한 첫걸음이에요. 속도에서 더 볼 수 있어요.
Q. 검색에 잘 안 잡힌다는 말을 들었어요. 이 층 때문인가요?: 그럴 수 있어요. 글이 움직임으로만 나중에 채워지면 검색 로봇이 그 글을 못 보고 지나갈 수 있어요. 요즘은 많이 나아졌지만, 팔아야 하는 상품 설명이나 가게 소개 같은 중요한 글은 처음부터 뼈대에 들어 있는 편이 확실해요. 검색 노출과 같이 보세요.
Q. 버튼이 두 번 눌려서 예약이 두 개 들어갔어요. 어느 층 문제예요?: 이 층이에요. 한 번 누른 뒤 버튼을 잠가 두는 처리가 빠진 거예요. 사소해 보이지만 결제에서 벌어지면 환불 업무가 생겨요. 결제나 예약 버튼은 만들 때 "두 번 눌러도 한 번만 되게"를 같이 부탁하세요. 나중에 붙이는 것보다 처음에 넣는 게 훨씬 싸요.

확인해 보세요

화면은 잘 보이는데 "예약하기"를 눌러도 아무 일이 없어요. 어디를 먼저 볼까요?

하나 더

결제 비밀키를 움직임 층(자바스크립트)에 적어 두면 어떻게 될까요?

직접 해보기

움직임을 하나 붙여 보세요

스튜디오에서 "문의 버튼을 누르면 이름과 연락처 칸이 펼쳐지게 해 주세요"처럼 누르면 무엇이 일어나는지까지 적어 부탁해 보세요. 만들어진 화면에서 직접 눌러 보면 이 층이 무슨 일을 하는지 한 번에 감이 와요.

스튜디오 열기

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

자바와 이름만 닮은 이유 · 1995년에 브라우저 회사가 이 언어를 만들면서, 당시 인기 있던 자바의 이름을 빌려 붙인 게 시작이에요. 기술이 아니라 마케팅에서 온 이름이라 지금도 헷갈리는 사람이 많아요. 이름이 비슷한 것 말고는 문법도 쓰는 곳도 달라요.

브라우저가 다 같은 말을 알아듣는 이유 · 언어 규격을 표준으로 정해 두고 브라우저 회사들이 그 표준에 맞춰 만들어요. 그래서 크롬에서 되는 것이 사파리에서도 대체로 돼요. 다만 새로 추가된 기능은 오래된 기기가 아직 모를 수 있어서, "구형 휴대폰에서만 안 된다"는 신고가 여기서 나와요.

서버에서도 돌아요 · 원래는 브라우저 안에서만 쓰던 언어인데, 지금은 서버에서도 같은 언어로 프로그램을 짤 수 있어요. 그래서 화면 쪽과 서버 쪽을 한 사람이 같은 언어로 맡는 일이 흔해졌어요. 작은 가게 입장에서는 사람을 한 명만 구해도 되니 비용이 줄어드는 변화였어요.

이것만 기억하세요

·화면은 뼈대, 꾸미기, 움직임 세 겹이고 자바스크립트가 움직임이에요
·보이는데 눌러도 반응이 없으면 대개 이 층이 비었거나 걸려 넘어진 거예요
·이 층은 알아채고, 판단하고, 바꾸고, 서버와 주고받아요
·한 군데가 걸리면 그 뒤가 같이 멈춰요. 처음 안 된 것부터 찾아요
·손님 기기에서 실행되니 비밀키는 절대 여기 적지 않아요