[HTML&CSS] UX Improvement (1)

seunghyun·2023년 12월 20일

Yougle

목록 보기

8/15

✔ 요구사항

현재 웹페이지는 아래 사진처럼 사용자 경험이 매우 부실하다.

개선해보자!

유효한 유튜브 채널 ID를 입력한 후 Get Videos 버튼을 클릭했을 때 버튼을 다시 클릭하지 않도록 한다.

로딩 애니메이션 등으로 데이터 로드 중이라는 표시를 보여주자!

비디오 링크, 다운로드 링크가 Google 의 검색 결과 화면처럼 카드 스타일 디자인으로 깔끔하게 출력되도록 한다.

✔ 1. 버튼 활성화/비활성화

JavaScript 를 이용해 버튼 클릭 이벤트를 처리하기!

버튼이 클릭되었을 때, 버튼을 비활성화하고 폼 제출을 시작합니다.

서버 측에서 처리 후 버튼을 다시 활성화하기!

서버 측에서 처리가 완료되고 결과를 클라이언트로 다시 전송한 후, 버튼을 다시 활성화시키는 자바스크립트 코드를 실행합니다.

아래 코드는 사용자가 "Get Videos" 버튼을 클릭하면 handleSubmit 함수를 호출하여 버튼을 비활성화합니다. 그리고 페이지가 로드되거나 리로드될 때 enableButton 함수를 호출하여 버튼을 다시 활성화합니다. 서버가 처리를 완료하고 페이지를 다시 로드하면 자동으로 버튼이 활성화됩니다.

이 방법은 서버 측에서 처리 시간이 길지 않고, 페이지 전체가 새로고침되는 방식일 때 잘 작동합니다. 하지만, 서버 측 처리가 오래 걸리거나 페이지를 새로고침하지 않고 AJAX를 사용하는 경우에는 다른 접근 방법이 필요할 수 있습니다.

<!DOCTYPE html>
<html>
<head>
    <title>YouTube Channel Video Links</title>
    <script>
        function handleSubmit() {
            var button = document.getElementById('getVideosButton');
            button.disabled = true;  // 버튼 비활성화
        }

        function enableButton() {
            var button = document.getElementById('getVideosButton');
            if(button) {
                button.disabled = false;  // 버튼 활성화
            }
        }
    </script>
</head>
<body>
    <!-- 중략 -->
    <form method="POST" action="/" onsubmit="handleSubmit()">
        <input type="text" name="channel_id" placeholder="Channel ID">
        <input type="submit" id="getVideosButton" value="Get Videos">
    </form>
    <!-- 중략 -->

    <!-- 페이지 로드 시 버튼 활성화 -->
    <script>
        window.onload = enableButton;
    </script>
</body>
</html>

✔ 2. 로딩 애니메이션

아래 사진은 로딩 애니메이션을 적용한 결과 화면입니다!

버튼을 비활성화하는 동안 로딩 중임을 나타내는 시각적 표시를 추가하기 위해, 저는 CSS 애니메이션과 JavaScript를 사용했습니다.

CSS 애니메이션은 여러 개의 CSS 스타일을 부드럽게 전환시켜줍니다. 그 중에서도 @keyframes 키워드를 활용하면 시간 순서대로 정밀하게 짜여진 애니메이션을 만들 수 있다고 합니다!

HTML에 로딩 애니메이션 추가하기
- 웹 페이지에 로딩 애니메이션을 나타낼 HTML 요소를 추가합니다. 이 요소는 기본적으로 숨겨져 있어야 하며, 로딩 중일 때만 보여야 합니다.
- <head> 태그는 주로 문서의 메타데이터(예: 스타일시트 링크, 스크립트, 메타 태그, CSS 링크 등)를 포함하기 위한 곳입니다. 반면, 실제로 사용자에게 보여지는 콘텐츠는 <body> 태그 내에 위치해야 합니다. 따라서 로딩 애니메이션은 사용자에게 보여지는 시각적 요소이므로, <body> 태그 내에 위치시켰습니다.
CSS로 애니메이션 스타일 정의하기
- 로딩 애니메이션에 대한 CSS 스타일을 정의합니다. 원형 애니메이션은 @keyframes 규칙을 사용하여 만들 수 있습니다.
JavaScript로 애니메이션 제어하기
- 버튼 클릭 시 로딩 애니메이션을 표시하고, 로딩이 끝나면 애니메이션을 숨기도록 JavaScript를 사용합니다.

index.html

<!-- 로딩 애니메이션 -->
<div id="loadingAnimation" style="display: none;">
    <div class="loader"></div>
</div>

<!-- 폼 -->
<form method="POST" action="/" onsubmit="showLoadingAnimation()">
    <input type="text" name="channel_id" placeholder="Channel ID">
    <input type="submit" value="Get Videos">
</form>

style.css

/* 로딩 애니메이션을 위한 원형 스피너를 생성 */
.loader {
    border: 5px solid #f3f3f3; /* Light grey */
    border-top: 5px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

script.js

function handleSubmit() {
    var button = document.getElementById('getVideosButton');
    button.disabled = true;  // 버튼 비활성화
    showLoadingAnimation(); // 로딩 애니메이션 활성화
}

function showLoadingAnimation() {
    document.getElementById('loadingAnimation').style.display = 'block';
}

function enableButton() {
    var button = document.getElementById('getVideosButton');
    if(button) {
        button.disabled = false;  // 버튼 활성화
    }
}

// 페이지 로드 시 enableButton 함수를 호출
window.onload = enableButton;