Beyond Frontend

밋밋한 404 에러 페이지, AI와 함께 생명을 불어넣다: YES24 404 페이지 제작기 본문

IT Insights

밋밋한 404 에러 페이지, AI와 함께 생명을 불어넣다: YES24 404 페이지 제작기

blogger74884 2025. 8. 22. 14:45

웹사이트를 탐색하다 보면 '404 Not Found'라는 차가운 메시지를 마주할 때가 있습니다. 사용자는 당황하고, 웹사이트 경험은 단절됩니다. 온라인 서점 YES24의 기존 404 페이지 역시 기능적으로는 충분했지만, 사용자에게 더 따뜻하고 친절한 경험을 제공할 여지가 있었습니다.

그래서 Gemini AI와 함께 YES24의 404 페이지를 새롭게 디자인하는 프로젝트를 시작했습니다. 단순한 요청에서 시작해 총 5단계의 피드백을 거치며 밋밋했던 에러 페이지가 어떻게 사용자를 배려하는 공간으로 변신했는지, 그 과정을 전부 공개합니다.

404_5.html
0.00MB
404_4.html
0.00MB
404_3.html
0.00MB
404_2.html
0.00MB
404_1.html
0.00MB

1단계: 기본 틀과 브랜딩 - "YES24 로고를 넣어주세요"

처음 Gemini에게 YES24의 404 페이지 제작을 요청하자, 깔끔한 기본 구조를 제안받았습니다. 하지만 무언가 허전했죠. 바로 YES24의 정체성이었습니다.

🗣️ User: "예스24의 로고도 들어갔으면 좋겠어."

가장 먼저 페이지 상단에 YES24 로고를 추가해달라고 요청했습니다. 작지만 이 변화만으로도 페이지는 더 이상 이름 없는 공간이 아닌, YES24의 공식적인 페이지라는 인상을 주게 되었습니다.

결과물 (404_2.html 기반)

  • 페이지 상단에 YES24 로고가 추가되어 브랜드 정체성을 확보했습니다.
  • <h1> 태그로 '404' 에러 코드를 크게 표시해 원인을 명확히 알렸습니다.

2단계: 직관성 더하기 - "404 숫자를 책 이미지로 표현해볼까?"

'404'라는 숫자는 개발자에게는 익숙하지만, 일반 사용자에게는 낯선 암호일 수 있습니다. 사용자가 혼란을 느끼지 않도록 더 직관적인 디자인이 필요했습니다.

🗣️ User: "일반 사용자들은 404라는 의미를 잘 모를 수 있으니, 404라는 곳에 책 같은 이미지를 넣는 건 어떨까?"

이 피드백을 바탕으로, Gemini는 '404' 텍스트를 책 모양의 SVG 아이콘 안에 감각적으로 배치하는 아이디어를 제시했습니다. 서점이라는 웹사이트의 특징을 살리면서 에러의 의미를 시각적으로 전달하는 훌륭한 방법이었습니다.

결과물 (404_3.html 기반)

  • 차가운 '404' 텍스트가 책 모양 아이콘과 결합하여 한층 부드럽고 친근한 느낌을 줍니다.
  • 사용자는 숫자 대신 이미지를 통해 '책(페이지)을 찾을 수 없다'는 상황을 쉽게 인지할 수 있습니다.

3단계: 불필요한 정보 제거 - "404 글자를 아예 빼고, 더 현실적인 책 이미지로!"

책 아이콘은 좋은 시도였지만, 여전히 '404'라는 숫자가 남아있었습니다. 과감히 숫자를 없애고, 더 편안한 사용자 경험을 만들기로 했습니다.

🗣️ User: "404라는 글자를 빼주고 책도 너무 밋밋한 것 같아. 조금 더 현실감 있는 책의 이미지로 바꿔줘."

이제 페이지에서 기술적인 용어는 완전히 사라졌습니다. 대신, 방금 펼친 듯한 모양의 책 SVG 아이콘이 그 자리를 차지했습니다. 이로써 사용자는 '페이지를 찾을 수 없다'는 메시지에만 집중할 수 있게 되었습니다.

결과물 (404_4.html 기반)

  • '404' 숫자를 완전히 제거하여 사용자 혼란의 여지를 없앴습니다.
  • 펼쳐진 책 모양의 아이콘을 통해 사용자가 길을 잃었다는 느낌 대신, 잠시 쉬어간다는 느낌을 줍니다.

4단계: 생동감 불어넣기 - "애니메이션 효과를 추가하면 더 재밌을 것 같아!"

디자인이 거의 완성되었지만, 마지막 2%가 부족했습니다. 정적인 페이지에 약간의 움직임을 더해 사용자의 시선을 사로잡고 싶었습니다.

🗣️ User: "마지막으로 페이지 내에 애니메이션 같은 효과가 있으면 더욱더 재밌을 것 같아. 예를 들면 안내 문구가 천천히 보인다던지?"

Gemini는 Fade-in 애니메이션 효과를 제안했습니다. 페이지가 로드되면 제목, 설명, 버튼이 순차적으로 부드럽게 나타나는 효과입니다. 이 작은 변화가 페이지 전체에 세련미와 생동감을 더해주었습니다.

결과물 (404_5.html 기반)

  • CSS @keyframes를 활용한 페이드 인(Fade-in) 효과가 적용되었습니다.
  • 각 요소에 시간 차(animation-delay)를 두어 사용자의 시선이 자연스럽게 위에서 아래로 흐르도록 유도합니다.

최종 완성 코드 (404_5.html)

다음은 AI와 함께 여러 차례의 수정을 거쳐 완성된 최종 404 페이지의 코드입니다.

HTML
 
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>페이지를 찾을 수 없습니다 - YES24</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap">
    <style>
        body {
            font-family: 'Inter', sans-serif;
            background-color: #f7f9fc;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }
        /* 애니메이션 효과를 정의합니다. */
        .fade-in {
            animation: fadeIn 1s ease-in-out forwards;
            opacity: 0;
            transform: translateY(10px);
        }
        .delay-1 {
            animation-delay: 0.3s;
        }
        .delay-2 {
            animation-delay: 0.6s;
        }
        @keyframes fadeIn {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
    </style>
</head>
<body class="bg-gray-50 text-gray-800">

    <div class="flex flex-col items-center justify-center p-8 text-center max-w-2xl mx-auto">
        <img src="https://image.yes24.com/sysimage/mv3/com/logo_error_s.svg" alt="YES24" class="mb-8 w-48">

        <svg xmlns="http://www.w3.org/2000/svg" class="w-48 h-48 text-[#006495] mb-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
            <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path>
            <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path>
        </svg>

        <h2 class="text-3xl font-bold text-gray-900 mb-2 fade-in">페이지를 찾을 수 없어요.</h2>
        <p class="text-lg text-gray-600 mb-8 max-w-md fade-in delay-1">
            찾으려는 페이지의 주소가 잘못 입력되었거나, 주소의 변경 혹은 삭제로 인해 페이지를 찾을 수 없습니다.
        </p>

        <div class="flex flex-col sm:flex-row gap-4 w-full justify-center fade-in delay-2">
            <a href="https://www.yes24.com/" class="flex-1 w-full sm:w-auto px-6 py-3 bg-[#006495] text-white font-semibold rounded-full shadow-lg hover:bg-[#005a82] transition-colors duration-300">
                메인 페이지로 이동
            </a>
            <a href="https://www.yes24.com/Product/Search?domain=ALL&query=" class="flex-1 w-full sm:w-auto px-6 py-3 bg-white border border-gray-300 text-gray-700 font-semibold rounded-full shadow-lg hover:bg-gray-100 transition-colors duration-300">
                검색 페이지로 이동
            </a>
        </div>

        <p class="text-sm text-gray-400 mt-8 fade-in delay-2">
            고객센터 문의: 1544-3800
        </p>

    </div>

</body>
</html>

결론: AI는 훌륭한 개발 파트너다

이번 프로젝트는 AI가 단순히 코드를 생성하는 도구를 넘어, 아이디어를 시각화하고 디자인을 함께 발전시켜 나가는 훌륭한 파트너가 될 수 있음을 보여주었습니다. 사용자의 작은 피드백이 쌓여 웹 페이지의 경험을 어떻게 크게 개선할 수 있는지 확인할 수 있는 의미 있는 과정이었습니다.

이제 404 페이지는 더 이상 막다른 길이 아닙니다. 사용자에게 길을 안내하고, 브랜드의 세심한 배려를 보여주는 또 다른 소통의 창구가 될 수 있습니다. 여러분도 AI와 함께 웹사이트의 작은 부분부터 개선해보는 것은 어떨까요?

'IT Insights' 카테고리의 다른 글

"웹 성능 최적화의 기본기": 브라우저 렌더링 과정을 이해하는 5단계  (1) 2025.08.31
AI 기반 노트 정리 앱 3종 비교  (0) 2025.08.31
애플의 퍼플렉시티 인수 검토  (0) 2025.07.14
소버린 AI, 기술 주권의 새로운 서막  (0) 2025.07.10
Gemini x Google 생태계  (0) 2025.07.08
'IT Insights' Related Articles more