악성 사용자 신고 페이지 만들기

게시일: 24. 10. 12. 수정일: 24. 12. 23.

소요 시간: 5분 조회수: 32

사실 앱스토어에 앱을 등록하기 위해서는 신고 기능이 필수 항목이다. 특히 악성 사용자나 부적절한 콘텐츠를 신고할 수 있는 기능을 제공해야만 승인이 날 수 있다. 그래서 이 페이지는 단순한 기능 이상의 의미가 있다. 사용자들이 플랫폼을 안전하게 사용할 수 있게 할 뿐만 아니라, 앱이 스토어에 등록되는 데 꼭 필요한 중요한 요소이기 때문이다. 이번 작업에서는 이 신고 페이지를 어떻게 구현하는지 단계별로 설명해 보려고 한다.

HTML 기본 구조 만들기

먼저, 웹 페이지의 기본 틀을 설정하기 위해 HTML 구조를 잡았다. DOCTYPE을 선언하고, 문서의 언어를 한국어로 설정해주었다. 페이지 제목은 <title> 태그로 설정했고, 외부 CSS 파일을 <link> 태그로 연결했다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>악성 사용자 신고</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- 여기에 신고 페이지가 들어갈 예정 -->
</body>
</html>

페이지 제목과 설명 추가하기

이어서, 페이지의 제목과 간단한 설명을 작성했다. 제목은 <h1> 태그로 "악성 사용자 신고"라고 나타냈고, <p> 태그로 방문자에게 이 페이지가 무엇을 위한 것인지 설명했다.

<div class="container">
    <h1>악성 사용자 신고</h1>
    <p>저희 플랫폼은 안전한 환경을 제공하기 위해 노력하고 있습니다. 악성 사용자를 신고해 주시면, 저희가 조사 후 처리하겠습니다.</p>
</div>

신고 폼 만들기

그 다음, 사용자들이 신고 내용을 입력할 수 있도록 폼을 구성했다. 먼저 이름, 이메일 주소, 악성 사용자 ID를 입력할 수 있는 필드를 만들었고, 각 필드에 라벨을 붙여 입력 항목이 무엇인지 명확히 했다.

<form id="reportForm">
    <label for="reporter-name">이름 (선택 사항):</label>
    <input type="text" id="reporter-name" name="reporter-name">

    <label for="reporter-email">이메일 주소:</label>
    <input type="email" id="reporter-email" name="reporter-email" required>

    <label for="malicious-user-id">악성 사용자 ID:</label>
    <input type="text" id="malicious-user-id" name="malicious-user-id" required>

    <label for="profile-link">악성 사용자의 프로필 링크:</label>
    <input type="url" id="profile-link" name="profile-link">
</form>

신고 유형과 상세 설명 추가하기

신고 유형을 선택할 수 있는 드롭다운 메뉴를 추가했고, 사용자가 신고 내용을 상세히 작성할 수 있는 <textarea> 필드를 만들었다.

<label for="report-type">신고 유형:</label>
<select id="report-type" name="report-type" required>
    <option value="">선택하세요</option>
    <option value="spam">스팸</option>
    <option value="violence">폭력적 행동</option>
    <option value="harassment">성희롱</option>
    <option value="false-info">허위 정보</option>
    <option value="other">기타</option>
</select>

<label for="report-details">상세 설명:</label>
<textarea id="report-details" name="report-details" rows="4" required></textarea>

파일 업로드 기능과 제출 버튼 추가하기

사용자가 신고할 때 증거 자료를 함께 업로드할 수 있도록 파일 업로드 필드를 추가했다. 마지막으로 신고를 제출할 수 있는 버튼을 추가해 폼을 완성했다.

<label for="evidence-upload">증거 자료 업로드:</label>
<input type="file" id="evidence-upload" name="evidence-upload" accept=".jpg,.png,.pdf">

<button type="submit">신고하기</button>

JavaScript로 폼 동작 제어하기

폼 제출 시 페이지 새로고침을 방지하고, 신고 접수 메시지를 띄우도록 JavaScript를 작성했다. 폼 제출 후에는 입력값이 초기화되도록 처리했다.

<script>
    document.getElementById('reportForm').addEventListener('submit', function(event) {
        event.preventDefault(); // 기본 제출 동작 방지
        alert("신고가 접수되었습니다. 감사합니다!"); // 알림 표시
        this.reset(); // 폼 초기화
    });
</script>

CSS 스타일링

마지막으로 CSS로 신고 페이지의 스타일을 지정해 깔끔하게 꾸몄다. 페이지 배경색을 은은한 회색으로 설정했고, 폼을 감싸는 컨테이너에는 여백과 그림자를 추가해 사용자에게 집중되는 구조로 만들었다.

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

.container {
    max-width: 600px;
    margin: 30px auto;
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

그 다음 시각적 요소를 다듬었다. 먼저, 페이지의 제목을 <h1> 태그로 지정했는데, 이것을 가운데 정렬(text-align: center)했고, 텍스트 색상은 어두운 회색(#333)으로 설정했다. 이렇게 하면 제목이 중앙에 위치하면서도 눈에 편안하게 보이도록 할 수 있다.

h1 {
    text-align: center;
    color: #333;
}

그 다음으로, 폼 내의 <label> 태그를 스타일링했다. 각 입력 필드의 설명이 되는 라벨들은 블록 요소(display: block)로 설정해 입력 필드 위에 깔끔하게 배치했다. 그리고 라벨과 입력 필드 사이에 적당한 여백을 주기 위해 margin을 설정하고, 텍스트를 더 두껍게(font-weight: bold) 만들어 가독성을 높였다.

label {
    display: block;
    margin: 10px 0 5px;
    font-weight: bold;
}

입력 필드들도 스타일링을 추가했다. 텍스트, 이메일, URL, 파일 업로드 필드와 드롭다운 메뉴, 텍스트 영역 등 모든 입력 요소에 동일한 스타일을 적용해 일관성을 유지했다. 이들은 모두 100% 너비(width: 100%)로 설정해 화면의 크기에 맞춰 크기가 조정되도록 했고, 안쪽에 패딩(padding: 10px)을 넣어 입력할 때 편안함을 느끼도록 했다. 또한, 입력 필드 간의 간격을 위해 margin-bottom을 주었고, 테두리 색상은 연한 회색(#ccc)으로 설정해 깔끔한 느낌을 줬다. 테두리에는 약간의 둥글기(border-radius: 4px)를 추가해 부드러운 인상을 줬다.

input[type="text"],
input[type="email"],
input[type="url"],
input[type="file"],
select,
textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

마지막으로, 제출 버튼에도 스타일링을 적용했다. 버튼은 화면에서 한눈에 띄도록 너비를 100%로 설정하고, 배경색을 녹색(#5cb85c)으로 설정해 긍정적인 느낌을 줬다. 버튼의 텍스트는 흰색으로 설정하고, 테두리는 없앴으며, 클릭 가능한 느낌을 주기 위해 마우스를 올렸을 때 배경색이 조금 더 진한 녹색(#4cae4c)으로 변하도록 호버 효과를 추가했다. 또한, 둥근 테두리와 큼직한 텍스트로 버튼을 눈에 잘 띄고 사용하기 쉽게 디자인했다.

button {
    display: block;
    width: 100%;
    background: #5cb85c;
    color: white;
    padding: 10px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
}

button:hover {
    background: #4cae4c;
}

이렇게 CSS로 입력 필드와 버튼, 텍스트 요소들을 꾸미며 신고 페이지의 디자인을 깔끔하고 직관적으로 만들었다.

이렇게 한 단계씩 작업하면서 악성 사용자 신고 페이지를 완성했다.

악성 사용자 신고 페이지 만들기

인기글