웹 기본 용어

웹사이트가 어떻게 돌아가는지 이해하는 데 필요한 기본 용어. 다른 글에서 이 페이지의 항목으로 링크를 건다. 각 항목은 굵은 한 줄 요약 → 조금 더 자세한 설명 순서다.

1. 주소와 서버

도메인

인터넷 주소의 이름. stairno.com처럼 사람이 읽는 주소다. 숫자로 된 진짜 주소(IP 주소)를 사람이 외우기 쉬운 이름으로 바꿔 둔 것이다. 도메인은 1년 단위로 돈을 내고 빌린다.

account.stairno.com, api.stairno.com처럼 앞에 이름을 더 붙인 것은 서브도메인이다. stairno.com이라는 집 안의 방 이름이라고 보면 된다. 서브도메인은 따로 살 필요 없이 집주인이 마음대로 만든다. 반대로 stairno.com과 stairnolabs.com은 서로 다른 집이다. 이 차이가 쿠키에서 중요해진다.

서버

요청을 받아 답을 돌려주는 컴퓨터(또는 그 위에서 도는 프로그램). 브라우저가 "이 페이지 줘", "이 사람 로그인시켜 줘"라고 요청하면 서버가 처리해서 결과를 보낸다. 요청을 보내는 쪽(브라우저, 앱)은 클라이언트라고 부른다.

API

프로그램끼리 대화하는 창구. 사람은 화면의 버튼을 누르지만, 프로그램은 정해진 주소로 정해진 형식의 요청을 보낸다. 예를 들어 "이 상품 주문 만들어 줘"라는 요청을 받는 주소가 API다.

식당에 비유하면 손님(사이트)은 주방(DB)에 직접 들어가지 않고, 메뉴판(API 명세)을 보고 종업원(API)에게 주문한다. 주방을 누가 어떻게 바꾸든 메뉴판만 그대로면 손님은 신경 쓸 필요가 없다.

프레임워크와 라이브러리

남이 만들어 둔 코드 묶음. 로그인, 화면 그리기, DB 연결처럼 누구나 필요한 기능을 처음부터 짜지 않으려고 가져다 쓴다. 내 코드가 가져다 부르면 라이브러리, 뼈대가 정해져 있고 내 코드를 그 틀에 끼워 넣으면 프레임워크라고 부른다. 둘을 엄격하게 나누지 않고 섞어 부를 때가 많다.

2. 로그인 상태를 기억하는 방법

쿠키

브라우저가 사이트별로 보관하는 작은 메모. 로그인하면 서버가 "이 사람은 로그인했음"이라는 표시를 쿠키로 주고, 브라우저는 그 사이트에 요청할 때마다 쿠키를 같이 보낸다. 그래서 페이지를 옮겨도 로그인이 풀리지 않는다.

중요한 규칙: 쿠키는 그걸 준 사이트에만 보내진다. stairno.com이 준 쿠키는 stairnolabs.com에 보내지지 않는다. 같은 집의 방끼리(account.stairno.com과 api.stairno.com)는 설정하면 쿠키를 같이 쓸 수 있다.

서드파티 쿠키

지금 보고 있는 사이트가 아닌, 다른 사이트의 쿠키. 예를 들어 A 사이트에 B 사이트의 광고가 박혀 있으면 B의 쿠키가 생길 수 있다. 광고 추적에 많이 쓰여서 Safari 같은 브라우저는 기본으로 막는다. 그래서 "다른 사이트의 쿠키를 빌려서 로그인 상태를 공유"하는 방법은 쓸 수 없다.

세션

서버가 기억하는 "지금 로그인한 사람" 기록. 쿠키에는 세션을 찾는 번호표만 들어 있고, 누가 언제 어디서 로그인했는지는 서버가 DB에 적어 둔다. 서버는 번호표로 기록을 찾아 누군지 확인한다. 세션을 지우면 로그아웃이다. "다른 기기에서 로그아웃"은 그 기기의 세션 기록을 서버에서 지우는 것이다.

출처

주소의 앞부분(프로토콜 + 도메인 + 포트). https://account.stairno.com과 https://stairnolabs.com은 출처가 다르다. 서버는 요청이 어느 출처에서 왔는지 보고, 모르는 출처에서 온 위험한 요청은 거절한다. 다른 사이트가 사용자 몰래 "비밀번호 바꿔 줘" 같은 요청을 보내는 공격을 막기 위해서다. 이걸 출처 검사라고 한다.

비슷한 장치로 CORS가 있다. "이 출처들의 화면은 우리 API를 불러도 된다"는 허용 목록이다. 목록에 없는 사이트의 화면이 API를 부르면 브라우저가 결과를 막는다.

리다이렉트

"여기 말고 저기로 가세요"라는 답. 서버가 브라우저를 다른 주소로 자동으로 보내는 것이다. 다른 사이트로 로그인하러 갔다가 원래 사이트로 돌아오는 과정은 리다이렉트 여러 번으로 이루어진다.

3. 서버의 답

HTTP 상태 코드

서버가 답에 붙이는 세 자리 숫자. 결과를 숫자 하나로 먼저 알려 준다. 자주 나오는 것만 정리하면:

4. 화면을 만드는 방식

SSR

서버 렌더링(Server-Side Rendering). 페이지를 서버에서 완성해서 보내는 방식. 미리 만들어 둔 똑같은 페이지를 모두에게 나눠 주는 방식(정적 사이트)과 달리, 요청이 올 때마다 서버가 그 사람에게 맞는 페이지를 만든다. "내 주문 내역"처럼 사람마다 내용이 다른 페이지는 서버가 먼저 로그인 여부를 확인하고 그 사람의 페이지를 만들어야 하므로 SSR을 쓴다.

i18n

국제화(internationalization). 한 사이트를 여러 언어로 보여 주는 기능. 영어 단어가 길어서 첫 글자 i와 끝 글자 n 사이의 글자 수(18)로 줄여 쓴다. 언어와 지역 표시(ko, en)를 로케일이라고 부른다. Stairno 계정 센터는 주소 앞에 /ko, /en을 붙여 언어를 나눈다(/ko/sign-in, /en/sign-in).

접근성

장애가 있는 사람도 똑같이 쓸 수 있는가. 화면을 못 보는 사람은 화면 낭독기로 읽고, 마우스를 못 쓰는 사람은 키보드만으로 움직인다. 버튼에 이름이 붙어 있는지, Tab 키 순서가 자연스러운지, 글자와 배경 대비가 충분한지 같은 것을 본다.

Lighthouse

구글이 만든 웹페이지 점검 도구. 성능(얼마나 빨리 뜨는가), 접근성, 모범 사례 등을 100점 만점으로 매긴다. 크롬 개발자 도구에 들어 있다.