프론트엔드 개발에서 반응형 웹 디자인은 매우 중요합니다. 다양한 기기에서 일관된 사용자 경험을 제공하기 위해 우리는 소셜 미디어 공유 버튼과 같은 UI 요소를 적절하게 설계해야 합니다. 이번 글에서는 간단한 반응형 웹 페이지에서 소셜 미디어 공유 버튼을 만드는 미니 프로젝트를 진행해 보겠습니다.

프로젝트 구조

우리는 HTML, CSS, JavaScript를 사용하여 기본적인 소셜 미디어 공유 버튼을 구현할 것입니다. 프로젝트 구조는 다음과 같습니다:

/social-share
│
├── index.html
├── style.css
└── script.js

1. HTML 구조

먼저, index.html 파일에 기본 HTML 구조를 만들어 보겠습니다. 소셜 미디어 공유 버튼을 포함할 요소를 추가합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>소셜 미디어 공유 버튼</title>
</head>
<body>
    <div class="container">
        <h1>소셜 미디어 공유 버튼 예제</h1>
        <div class="share-buttons">
            <button class="share-btn" id="facebook">페이스북</button>
            <button class="share-btn" id="twitter">트위터</button>
            <button class="share-btn" id="linkedin">링크드인</button>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>

2. CSS 스타일링

이제 style.css 파일에서 버튼의 스타일을 정의하겠습니다. 버튼이 반응형으로 보이도록 CSS Flexbox를 활용하겠습니다.

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 20px;
}

.container {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

.share-buttons {
    display: flex;
    justify-content: space-around;
    margin-top: 20px;
}

.share-btn {
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    padding: 10px 20px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.share-btn:hover {
    background-color: #0056b3;
}

@media (max-width: 600px) {
    .share-buttons {
        flex-direction: column;
    }
    
    .share-btn {
        margin-bottom: 10px;
        width: 100%;
    }
}

3. JavaScript 기능 추가

이제 script.js 파일을 추가하여 버튼 클릭 시 소셜 미디어에 공유할 수 있도록 기능을 구현합니다.

document.getElementById('facebook').onclick = function() {
    const url = encodeURIComponent(window.location.href);
    const text = encodeURIComponent(document.title);
    window.open(https://www.facebook.com/sharer/sharer.php?u=${url}&quote=${text}, '_blank');
};

document.getElementById('twitter').onclick = function() {
    const url = encodeURIComponent(window.location.href);
    const text = encodeURIComponent(document.title);
    window.open(https://twitter.com/intent/tweet?url=${url}&text=${text}, '_blank');
};

document.getElementById('linkedin').onclick = function() {
    const url = encodeURIComponent(window.location.href);
    const text = encodeURIComponent(document.title);
    window.open(https://www.linkedin.com/sharing/share-offsite/?url=${url}, '_blank');
};

4. 최종 결과 확인

이제 모든 파일을 저장하고 브라우저에서 index.html 파일을 열어보면, 다양한 기기에서 반응형으로 동작하는 소셜 미디어 공유 버튼을 확인할 수 있습니다. 작은 화면에서는 버튼들이 세로로 쌓여 보이고, 큰 화면에서는 가로로 나란히 보이게 됩니다.

마무리

이번 미니 프로젝트를 통해 반응형 웹에서 소셜 미디어 공유 버튼을 만드는 방법을 살펴보았습니다. HTML, CSS, JavaScript의 기초적인 사용법을 통해 간단하지만 효과적인 UI 요소를 구현할 수 있었습니다. 이러한 기본기를 바탕으로 더 복잡한 UI 구성 요소를 만들어 보세요. 반응형 웹 디자인은 사용자 경험을 극대화하는 중요한 요소이니, 항상 기기별로 최적화된 디자인을 고려하시길 바랍니다.