[주간 인프런 #23] 502를 찾아서! HTTP 상태 코드의 비밀 cover

[주간 인프런 #23] 502를 찾아서! HTTP 상태 코드의 비밀

Something went wrong...

#HTTP #502 #404 #web 

무언가 잘못됐다...! (원숭이는 슬퍼요)

지난해 12월 14일, 유튜브가 약 2시간 동안 먹통이 되는 일이 벌어졌습니다. 유튜브뿐 아니라 Gmail, Google 드라이브 등 구글 계정 관련 서비스들이 줄줄이 접속 장애를 일으켰죠. 내부 스토리지(storage) 할당량 문제로 인증 시스템이 멈추면서 발생한 사고였는데요. 유튜브 오류 안내 페이지에 뜬 망치를 든 원숭이 그림이 세계적인 밈(meme)으로 떠오를 정도였으니, 잠깐 동안 벌어진 일이었지만 구글의 막강한 영향력을 다시 한 번 확인한 순간이었죠. 😰

이런 일은 비단 구글만 겪는 어려움은 아니에요. 학교나 학원에서 수강신청을 하거나, 한정 판매나 티켓 예매에 뛰어들 때 서버가 터졌다며 아우성치는 모습을 주변에서 종종 볼 수 있죠. 때마침 접속하려고 했던 사이트가 우연히 먹통이어서 곤란을 겪기도 하고요. 모니터에 502, 503 같은 숫자가 덩그러니 떠 있는 걸 보고 있자면 초조하고 화도 납니다. 한편으로는 궁금하기도 하죠. 도대체 왜 접속은 안 되면서 이런 숫자를 띄우는 걸까요? 

2월 둘째 주 <주간 인프런> 에서는 우리가 인터넷을 쓰면서 종종 마주하는 HTTP 상태 코드에 대해 다룹니다. 사이트 접속이 안 될 때마다 묵묵히 떠 있는 정체불명의 세 자리 숫자 코드! 이 코드가 각각 무슨 뜻인지, 왜 띄우는지 간단하게 알아보려고 해요. 그럼 함께 살펴볼까요? 👀

서버의 상태를 알려줘요, HTTP 상태 코드!

403 Forbidden, 404 Not Found, 502 Bad Gateway, 503 Service Unavailable... 인터넷을 사용하면서 한 번쯤 마주친 적 있는 문구죠? 이것들을 HTTP 상태 코드(HTTP Status Code)라고 불러요. 

상태 코드란 웹상에서 클라이언트가 서버로 요청을 보낼 때, 즉 특정한 웹 페이지에 접속하거나, 특정한 동작을 수행할 수 있게끔 버튼을 누르거나 값을 입력하는 등 서버로 요청을 보낼 때 그 요청이 잘 처리가 되었는지를 알려주는 기능이에요. 다시 말해 서버로 보낸 요청 상태를 나타내는 코드가 바로 상태 코드입니다. 서버로 보낼 작업의 수행 상태를 알려줄 수 있도록 표준에 맞춘 일종의 약속이죠. 이런 상태 코드를 사용하면 발생한 에러의 종류에 대해 커뮤니케이션하기에도 편리하고, HTTP 요청이 잘 이루어졌는지를 확인하기 좋으니까요.

HTTP 상태 코드는 1부터 5로 시작하는 세 자리 숫자 형태로 이루어져 있어요. 

1xx, 2xx, 3xx, 4xx, 5xx...

이 세 자리 숫자 중에서 코드의 맨 앞자리 숫자(1~5)가 응답의 클래스를 결정하죠. 1부터 5까지, 맨 앞자리에 오는 다섯 개의 숫자는 각각 다음의 상태를 나타내요.

1xx (조건부 응답) 요청이 수신되어 프로세스를 계속한다
2xx (성공) 요청을 성공적으로 받아 처리했다 
3xx (리다이렉션) 요청을 마치기 위해 추가 행동이 필요하다
4xx (클라이언트 오류) 요청이 잘못되어 요청을 처리할 수 없다
5xx (서버 오류) 서버가 유효한 요청을 처리하는 데 실패했다

다시 말해 맨 앞자리 숫자가 같다면 해당 유형의 응답을 받는 상태 코드라는 뜻입니다. 만약 잘 모르는 코드를 반환받더라도, 1~5 중 어떤 숫자로 시작하는지를 알면 상위의 상태 코드로 해석하면 되고요. 

1xx에 해당하는 코드는 ‘요청을 처리하고 있다’는 뜻이기 때문에 최근 실무에서는 잘 쓰지 않는 코드입니다. 하지만 맨 앞자리가 2, 3, 4, 5로 시작하는 코드는 보다 자주 만나게 돼요. 예를 들어 요청을 성공적으로 받아 처리했을 경우에는 “200 OK”이 나타나고, 요청을 완료하기 위해 리다이렉션(Redirection* 클라이언트가 요청한 리소스에 더 이상 해당 주소로 접근할 수 없어 다른 주소를 통해 접근하도록 함) 이 이루어져야 할 때는 3xx 대역의 상태 코드를 볼 수 있겠죠.

평소 우리가 인터넷을 쓰다 마주하는 코드는 4나 5로 시작하는 것들이 많습니다. 서버가 뻗었다거나, 잘못된 주소를 입력했다거나, 이미 폐쇄되었거나 만료된 링크에 접속했을 때 말이죠. 즉 클라이언트 쪽에서 잘못된 요청을 보낸 경우(4xx), 요청은 제대로 보냈는데 서버가 요청을 처리하지 못해(5xx) 오류가 발생하는 경우가 여기에 해당하죠. 여러 서비스들이 상태 코드에 따라 오류가 발생하면 코드에 맞는 오류 화면(Error Page)를 출력해주게 됩니다. 수많은 코드가 있지만, 대표적인 것만 뽑아보자면 이 정도로 정리할 수 있겠네요. 

400 Bad Request (잘못된 요청)
잘못된 문법으로 인해 서버가 요청을 이해할 수 없는 경우.

403 Forbidden (거부됨)
클라이언트가 콘텐츠에 접근할 권리를 가지고 있지 않을 경우. 한 웹 서비스의 일반 유저가 어드민 페이지에 접속을 시도한다거나, 특정 IP나 국가가 차단되어 있는 사이트에 접속을 시도할 때 이를 거절하기 위한 응답.

404 Not Found (찾을 수 없음)
서버가 요청받은 리소스를 찾을 수 없는 경우. ‘서버를 찾을 수 없다’는 게 아니라, 서버와 통신은 되지만 요청한 바를 찾을 수 없다는 뜻.

500 Internal Server Error (내부 서버 에러)
서버가 처리 방법을 모르는 상황과 마주쳤지만, 서버가 처리 방법을 알 수 없을 경우. 서버에 오류가 발생해 작업을 수행할 수 없을 때 나타나는 코드.

502 Bad Gateway (불량 게이트웨이)
서버가 요청을 처리하는 데 필요한 응답을 얻기 위해 게이트웨이로 작업하는 동안 잘못된 응답을 받았다는 뜻.

503 Service Unavailable (일시적으로 이용할 수 없음)
서버가 요청을 처리할 준비가 되지 않았음. 보통은 유지보수를 위해 작동을 중단했거나 과부하 상태가 된 서버로 인해 발생하는 코드.

504 Gateway Timeout (게이트웨이 시간 초과)
게이트웨이가 연결된 서버로부터 응답을 적절한 시간 내에 받을 수 없었다는 뜻.

404호 우리 집에 누군가 "Not Found"라는 쪽지를 붙여놓는다...?!

페이지에서 파일을 찾지 못했을 때 나오는 404 Not Found(찾을 수 없음) 코드는 우리가 가장 흔히 보는 상태 코드 중 하나입니다. 404라는 숫자 자체를 ‘찾을 수 없다’는 뜻으로 쓴 픽션이나 농담도 많고요. (하지만 짤 같은 장난은 안돼요...!)

502는 대표적인 서버 오류 코드예요.

반면 나는 멀쩡하게 접속을 시도했는데 접근이 되지 않는 경우도 있죠! 연결된 서버로부터 게이트웨이가 제대로 된 응답을 받지 못할 때 발생하는 502 Bad Gateway가 대표적입니다. 보통 서버에 접속하는 사람이 많아 과부하될 때 일어나곤 해요.


그럼, 인프런 에러 페이지는 어떨까요?

잘 감이 오지 않는다구요? 인프런에서도 문제가 발생할 경우 여러 상태 코드에 맞게 에러 페이지를 띄워주고 있어요. 2021년 2월 현재 인프런의 에러 페이지는 이렇게 생겼죠. 

클릭할 때마다 유에프오가 붕붕 날아다녀요.

502 Bad Gateway 상태 코드에 대응하는 화면. 커서로 공간을 클릭할 때마다 UFO 이미지가 따라 움직이는 인터랙션 애니메이션이 들어가 있어요.

사실 에러 페이지 화면을 이렇게 해둔 건 꽤 최근의 일이랍니다. (2020년 12월에 새로 단장했어요!) 인프런을 오랫동안 이용해오신 분들이라면 다음 화면도 친숙하실지 모르겠네요. 바로 고양이가 키보드를 열심히(!) 두드리는 애니메이션이 들어간 화면인데요.

이 글은 고양이가 작성했어요. (농담.)

흰 양말을 신은 타자왕 냥냥이!

그렇다면 이런 화면들은 언제 쓰이는 걸까요? 상태 코드에 따라 구분해볼 수도 있을까요? 물론 가능하고 말고요! 다음 이미지를 눈여겨봐주세요.

같은 페이지 같지만, 코드에 따라 다르게 나타나는 화면이에요.

왼쪽부터 500, 501, 502, 503, 504

눈치채셨나요? 위의 UFO 에러 페이지가 전부 5xx 대역의 상태 코드, 즉 ‘서버 에러’가 발생할 때라는 사실을요. 반면, 고양이 페이지는 이런 경우에 나타납니다.

고양이가 나타났다면 내 입력이 무언가 잘못된 거예요.

왼쪽부터 1)일반 유저 계정으로 인프런 어드민(관리자) 페이지에 접속을 시도한 경우 2)강의 주소가 틀린 경우 3)주소가 잘못된 페이지를 입력한 경우

UFO 페이지의 경우에는 인프런 서버에 문제가 발생했을 때 나타나지만, 고양이 페이지는 서버에는 문제가 없는데 유저가 잘못된 요청을 시도했을 때 볼 수 있는 페이지예요. 즉 4xx 대역에 해당하는 ‘클라이언트 에러’가 발생할 때 고양이 페이지를 만날 수 있죠. 반면, 인프런 서버에 장애가 발생했거나 과부하가 걸린 경우에는 날아다니는 UFO를 볼 수 있게 되구요. 이제 클라이언트 에러와 서버 에러의 차이, ‘인프런 고양이’와 ‘인프런 UFO’의 차이를 아시겠죠?

서버는 정상인데 요청이 이상하면 고양이, 요청은 정상인데 서버가 이상하면 UFO!

인프런 개발자, 조슈아의 명쾌한 설명이 함께했어요. (감사해요 조슈아!)


보너스+ 재미있는 상태 코드의 세계!

• 각각의 상태 코드를 고양이 사진으로 표현한 HTTP Cats라는 웹 페이지도 있어요. 고양이를 좋아하는 개발자라면 한번쯤 들어가보세요! 상태 코드를 이해하기도 좋고, 귀엽고, 웃기기까지 하니까요. 😽

고양이로 알아보는 재미있는 상태 코드

고양이로 알아보는 재미있는 상태 코드

재치있는 에러 페이지 화면은 서비스 운영 및 브랜딩 측면에서도 도움이 됩니다. 세계적인 게임 회사 블리자드(Blizzard)의 경우, 공식 사이트의 404 에러 페이지에 자사 게임인 워크래프트 시리즈의 멀록 캐릭터를 끼워넣었어요. 하단에 적힌 “회원님을 안전한 곳으로 이동시키기 위해 구조 멀록을 파견했습니다”라는 메시지는 팬들로 하여금 웃음을 자아내고, 회사의 이미지를 잘 살려주죠. 🎮

멀록은 워크래프트 시리즈, 하스스톤, 히어로즈 오브 더 스톰에 나오는 캐릭터예요. (아옳옳옳옳!)

멀록은 워크래프트 시리즈, 하스스톤, 히어로즈 오브 더 스톰에 나오는 캐릭터예요. (아옳옳옳옳!)

HTTP 상태 코드에 대한 궁금증이 조금은 풀리셨나요? 이밖에 나만 알기 아까운 HTTP 상태 코드 관련 짤이나 정보가 있다면, 댓글로 함께 공유해주세요! 😎

 

이번 [주간 인프] 어떠셨나요?
솔직한 의견을 들려주세요!

유익해요 | 아쉬워요

raiders032

재밌게 읽었습니다 ㅎㅎ

토마부부

http cat 너무 귀엽네요. ㅋㅋㅋㅋ 한참 살펴봤어요.

Incursio

유익하네용

OMG

상태코드에 대해 더 알고 싶으신 분들은

김영한 지식공유자님 "모든 개발자를 위한 HTTP 웹 기본 지식" 강의를 추천드립니다 ㅎㅎ

블로그 글로는 캡틴 판교 지식공유자님의 글도 간결하니 보기 좋아요!
https://joshua1988.github.io/web-development/http-part1/

지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의를
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스