Chat Conversation

Participants: User, QueryPie02/19/2026
User02:19:44 PM
간단한 로그인 페이지 만들어주세요
QueryPie02:19:47 PM
간단한 로그인 페이지를 만들어드리겠습니다. 간단한 로그인 페이지를 만들어드렸습니다.
:::artifact{identifier="simple-login-page" type="text/html" title="간단한 로그인 페이지"}
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>로그인</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }

        .login-container {
            background: white;
            padding: 40px;
            border-radius: 10px;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
            width: 100%;
            max-width: 400px;
        }

        .login-container h1 {
            text-align: center;
            margin-bottom: 30px;
            color: #333;
            font-size: 28px;
        }

        .form-group {
            margin-bottom: 20px;
        }

        label {
            display: block;
            margin-bottom: 8px;
            color: #555;
            font-weight: 500;
        }

        input[type="email"],
        input[type="password"] {
            width: 100%;
            padding: 12px;
            border: 2px solid #ddd;
            border-radius: 5px;
            font-size: 14px;
            transition: border-color 0.3s;
        }

        input[type="email"]:focus,
        input[type="password"]:focus {
            outline: none;
            border-color: #667eea;
        }

        button {
            width: 100%;
            padding: 12px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: transform 0.2s;
            margin-top: 10px;
        }

        button:hover {
            transform: translateY(-2px);
        }

        button:active {
            transform: translateY(0);
        }

        .remember-me {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }

        .remember-me input[type="checkbox"] {
            margin-right: 8px;
            cursor: pointer;
        }

        .remember-me label {
            margin: 0;
            color: #777;
            font-weight: 400;
            cursor: pointer;
        }

        .links {
            display: flex;
            justify-content: space-between;
            margin-top: 15px;
            font-size: 14px;
        }

        .links a {
            color: #667eea;
            text-decoration: none;
            transition: color 0.3s;
        }

        .links a:hover {
            color: #764ba2;
            text-decoration: underline;
        }

        .error {
            color: #e74c3c;
            font-size: 14px;
            margin-top: 5px;
            display: none;
        }

        .success {
            color: #27ae60;
            font-size: 14px;
            margin-top: 15px;
            text-align: center;
            display: none;
        }
    </style>
</head>
<body>
    <div class="login-container">
        <h1>로그인</h1>
        <form id="loginForm">
            <div class="form-group">
                <label for="email">이메일</label>
                <input 
                    type="email" 
                    id="email" 
                    name="email" 
                    placeholder="example@email.com" 
                    required
                >
                <div class="error" id="emailError"></div>
            </div>

            <div class="form-group">
                <label for="password">비밀번호</label>
                <input 
                    type="password" 
                    id="password" 
                    name="password" 
                    placeholder="비밀번호 입력" 
                    required
                >
                <div class="error" id="passwordError"></div>
            </div>

            <div class="remember-me">
                <input type="checkbox" id="remember" name="remember">
                <label for="remember">로그인 상태 유지</label>
            </div>

            <button type="submit">로그인</button>

            <div class="success" id="successMessage">로그인에 성공했습니다! 🎉</div>

            <div class="links">
                <a href="#forgot">비밀번호 찾기</a>
                <a href="#signup">회원가입</a>
            </div>
        </form>
    </div>

    <script>
        const loginForm = document.getElementById('loginForm');
        const emailInput = document.getElementById('email');
        const passwordInput = document.getElementById('password');
        const emailError = document.getElementById('emailError');
        const passwordError = document.getElementById('passwordError');
        const successMessage = document.getElementById('successMessage');

        // 이메일 유효성 검사
        function validateEmail(email) {
            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            return emailRegex.test(email);
        }

        // 폼 제출 처리
        loginForm.addEventListener('submit', (e) => {
            e.preventDefault();

            // 에러 메시지 초기화
            emailError.textContent = '';
            passwordError.textContent = '';
            successMessage.style.display = 'none';
            emailError.style.display = 'none';
            passwordError.style.display = 'none';

            let isValid = true;

            // 이메일 검증
            if (!emailInput.value.trim()) {
                emailError.textContent = '이메일을 입력해주세요.';
                emailError.style.display = 'block';
                isValid = false;
            } else if (!validateEmail(emailInput.value)) {
                emailError.textContent = '유효한 이메일 형식이 아닙니다.';
                emailError.style.display = 'block';
                isValid = false;
            }

            // 비밀번호 검증
            if (!passwordInput.value.trim()) {
                passwordError.textContent = '비밀번호를 입력해주세요.';
                passwordError.style.display = 'block';
                isValid = false;
            } else if (passwordInput.value.length < 6) {
                passwordError.textContent = '비밀번호는 6자 이상이어야 합니다.';
                passwordError.style.display = 'block';
                isValid = false;
            }

            // 유효성 검사 통과
            if (isValid) {
                successMessage.style.display = 'block';
                loginForm.reset();
                console.log('로그인 성공:', {
                    email: emailInput.value,
                    remember: document.getElementById('remember').checked
                });
            }
        });

        // 입력 필드 포커스 시 에러 메시지 제거
        emailInput.addEventListener('focus', () => {
            emailError.style.display = 'none';
        });

        passwordInput.addEventListener('focus', () => {
            passwordError.style.display = 'none';
        });
    </script>
</body>
</html>
:::
주요 기능:
✅ 이메일과 비밀번호 입력 필드
✅ 실시간 유효성 검사 (이메일 형식, 비밀번호 최소 6자)
✅ 에러 메시지 표시
✅ 로그인 상태 유지 체크박스
✅ 반응형 디자인
✅ 그래디언트 배경과 깔끔한 UI
더 자세한 기능이나 백엔드 연결이 필요하신가요?