[HTTP 오류 코드] 사랑도 코딩이 가능하다면, 당연히 오류로 가득하겠지

안녕하세요. 프로덕트 디자이너 메리입니다!
오늘은 우리의 혈압을 오르게 만드는 구간.. 바로 "ERROR" 케이스와 HTTP 오류 코드에 관한 부분입니다. (짤은 일부러 감성짤로 넣었어요 하.하)

대부분 디자이너들이 디자인 시스템을 설계할 때 에러 케이스를 명목상 넣는 경우가 많은데요.
예를 들면 유효성 검사에 대한 대략적인 예시 UI와, 에러 팝업을 먼저 만들고 -> 나중에 갑자기 별에별 에러 핵터짐 -> 오 싓 이 화면에 왜 이상한 숫자가 나와!! 이런 순간이 많다는 거죠 🥲

디자이너가 CRUD나 API 호출 흐름을 이해하지 못하면, 예를 들어 사용자에게 삭제(Delete) 권한이 없는데 버튼은 만들고 팝업도 안 띄워놓는 상황이 발생합니다. 자, 그러면 어떻게 해결하면 좋을까요?

1)먼저 에러케이스를 나눠보자

그래서 우리가 에러 팝업을 만들기 전에! 어떤 시나리오에서 어떤 에러가 발생할 수 있는지, 유효성 검사 실패인지? (ex. 비밀번호 미입력) 서버 자체 오류인지? (ex. DB 터짐) 이걸 구분해서 기획부터 반영해야 하는 거예요.

에러케이스는 이렇게 나눠봅시다. 👩🏻‍🏫

1) 클라이언트 유효성 검사 실패 (Validation)
→ 사용자 입력값 누락, 형식 오류 등 (ex. 이메일 형식이 잘못되었어요)

2) 권한 부족 / 잘못된 요청 (403 / 404 등)
→ 없는 페이지 요청, 권한 없는 기능 시도 등

3) 서버 내부 오류 (500번대 에러)
→ 서버 터짐, API 잘못 연결, DB 터짐 등등

[대표적인 서버 에러코드 사례]

• 400 Bad Request: 요청 자체가 잘못됨 (ex. 파라미터 누락)

• 401 Unauthorized: 로그인 안 된 상태에서 인증 필요한 요청함

• 403 Forbidden: 권한 없는 기능에 접근했을 때

• 404 Not Found: 요청한 페이지나 리소스를 찾을 수 없을 때

• 500 Internal Server Error: 서버 내부에서 알 수 없는 에러 발생

• 503 Service Unavailable: 서버가 과부하로 인해 잠시 사용할 수 없음

예를 들어, 인터파크에 무슨 공연 티켓이 뜨면 갑자기 접속이 안 되는 이유, 그게 바로 503 서버 과부하 에러랍니다!이럴 땐 “일시적으로 서비스 이용이 어렵습니다 (Error 503)” 같은 문구가 뜨게 되죠. (이렇게 검정치마 티켓팅을 실패했어요..TMI)

2)에러케이스를 고려하지 않으면?

그리고 만약 이 에러코드를 디자이너가 고려하지 않으면? 개발할 때 기본 시스템 메시지로 처리해버려서 '알 수 없는 에러가 발생했습니다. 코드: 5001234' 같은 이상한 문구가 그대로 웹사이트에 뜰 수 있어요! 이거 진짜 자주 봤죠? 미리 정리하면 아주 좋답니다.

3)에러케이스, 디자인 시스템으로 CTRL+C/V 하기!

팝업 디자인은 "에러의 종류 + 문구 + 행동 버튼" 조합으로 시스템화해두면, 일일이 새로 만들 필요가 없어요. 예를 들자면,

• 에러 타입: validation / forbidden / not found / server error
• 문구: 상태에 따라 바인딩
• 버튼: 확인 / 다시 시도 / 취소

요렇게 템플릿화하면 디자인시스템에서도 효율적으로 관리 가능!

💡 참고로 토스(Toss)는 에러 상태를 아주 잘 설계한 케이스예요!에러 상황에 따라 문구도 친절하고, 사용자 행동을 고려한 대체 경로(예: '홈으로 돌아가기', '문의하기')도 잘 안내해줘요. 디자이너 입장에서 참고하면 좋습니다.

🧙🏻 결론 : 에러케이스를 먼저 설계하자!

결론은, 에러 디자인은 단순히 예쁘게 팝업 만드는 게 아니라, 기능 흐름 속에서 발생할 수 있는 시나리오를 먼저 생각하고 설계해야 한다는 점! 그리고 그 기반엔 API, CRUD, HTTP 개념들이 꼭 같이 따라붙는다는 사실!

이런 걸 생각하면서 작업하면 '에러 처리까지 완벽한 프로덕트'를 만들 수 있습니다.그럼 다음 편에서 또 봐요 아녕~~