이번에는 카카오톡과 유사한 기능 및 디자인 요소를 추가하여 메시지 앱을 개선해 보겠습니다. 디자인적인 부분에서는 색상, 크기, 버튼 스타일을 더 세련되게 다듬고, 기능적인 부분에서는 이모티콘, 스크롤 기능, 메시지 전송 후 효과 등을 추가할 수 있습니다.

1. 디자인적 개선:

  • 색상 개선: 배경과 버튼 색상에 그라디언트 효과를 주거나, 카카오톡의 대표적인 노란색 계열을 활용할 수 있습니다.
  • 버튼 크기 및 스타일: 전송 버튼의 크기를 조정하고, 테두리를 둥글게 만들어 버튼에 대한 피드백을 강화합니다.
  • 메시지 버블 스타일링: 메시지의 크기나 스타일을 다르게 해서 발신자와 수신자가 명확히 구분될 수 있도록 합니다.
  • 아이콘 및 이모티콘: 입력창에 이모티콘을 삽입할 수 있는 버튼을 추가합니다.

2. 기능적 개선:

  • 스크롤 기능: 메시지가 추가될 때 자동으로 스크롤되도록 할 수 있습니다.
  • 메시지 전송 후 효과: 메시지 전송 시 텍스트 영역을 비우고, 메시지를 나타내는 애니메이션 효과를 추가할 수 있습니다.
  • 이모티콘 버튼: 이모티콘을 클릭하면 입력창에 이모티콘이 삽입되는 기능을 구현할 수 있습니다.

업그레이드된 코드 예시:

HTML

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>나만의 채팅방</title>
    <link href="chat.css" rel="stylesheet">
</head>
<body>
    <!-- 상태바 -->
    <div class="container">
        <main class="chat-screen">
            <section class="chat-screen__bar">
                <div class="user">
                    <div class="user__column">
                        <div class="user__pic"></div>
                    </div>
                    <div class="user__column">
                        <p class="user__nick">친구</p>
                        <p class="user__count">2</p>
                    </div>
                </div>
            </section>
            <!-- 채팅창 -->
            <section class="chat-messages" id="chat-messages"></section>
        </main>
        
        <!-- 채팅 입력창 -->
        <form class="chat-form" id="chat-form">
            <section class="chat-form__field">
                <textarea class="chat-form__msg" placeholder="메시지를 입력하세요..." id="chat-input"></textarea>
                <button class="emoji-button" type="button">😊</button>
                <button class="chat-form__bt" type="submit">전송</button>
            </section>
        </form>
    </div>

    <script>
        // 전송 버튼 클릭 시 메시지 추가
        document.getElementById('chat-form').addEventListener('submit', function(event) {
            event.preventDefault();  // 페이지 새로 고침 방지
            const input = document.getElementById('chat-input');
            const message = input.value;
            if (message.trim() !== "") {
                const chatMessages = document.getElementById('chat-messages');
                const newMessage = document.createElement('div');
                newMessage.classList.add('message', 'sent');
                newMessage.textContent = message;
                chatMessages.appendChild(newMessage);
                input.value = '';  // 입력창 초기화
                chatMessages.scrollTop = chatMessages.scrollHeight;  // 스크롤을 가장 아래로
            }
        });

        // 이모티콘 버튼 클릭 시 이모티콘 입력
        document.querySelector('.emoji-button').addEventListener('click', function() {
            const input = document.getElementById('chat-input');
            input.value += "😊";  // 이모티콘 추가
            input.focus();
        });
    </script>
</body>
</html>

CSS

/* 전체적인 세팅 */
* {
    box-sizing: border-box;
}
html {
    height: 100%;
}
body {
    height: 100%;
    margin: 0;
    font-family: Arial, sans-serif;
}

.container {
    height: 100%;
    background-color: #F1F1F1;
}

/* 스크린 크기 */
.chat-screen {
    height: calc(100% - 120px);
}

/* 유저 정보 표시 */
.user {
    background-color: #ffffff;
    padding: 16px;
    height: 80px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ddd;
}

.user__pic {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #FCC41F;
    margin-right: 10px;
}

.user__nick {
    font-size: 18px;
    font-weight: bold;
}

.user__count {
    font-size: 12px;
    color: gray;
}

/* 채팅 메시지 */
.chat-messages {
    height: calc(100% - 120px);
    overflow-y: auto;
    padding: 20px;
}

/* 메시지 스타일 */
.message {
    background-color: #F1F1F1;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 15px;
    max-width: 80%;
}

.message.sent {
    background-color: #FCC41F;
    margin-left: auto;
}

/* 채팅 입력창 */
.chat-form {
    background-color: white;
    padding: 10px;
    position: fixed;
    bottom: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.chat-form__field {
    display: flex;
    width: 100%;
    position: relative;
}

.chat-form__msg {
    width: calc(100% - 100px);
    height: 50px;
    padding: 10px;
    font-size: 16px;
    border-radius: 10px;
    border: 1px solid #ccc;
    resize: none;
}

.chat-form__bt {
    width: 80px;
    background-color: #FCC41F;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    color: white;
    cursor: pointer;
}

.chat-form__bt:hover {
    background-color: #CB9D12;
}

/* 이모티콘 버튼 */
.emoji-button {
    background-color: transparent;
    border: none;
    font-size: 24px;
    cursor: pointer;
    margin-right: 10px;
}

변경 사항 설명:

  1. 유저 정보와 상태바: 유저 사진을 둥글게 만들고, 친구 이름과 메시지 카운트가 잘 보이도록 했습니다.
  2. 채팅 메시지: 각 메시지는 고유의 배경색을 갖고, 발신자 메시지는 오른쪽에 정렬되도록 했습니다.
  3. 전송 버튼: 전송 버튼은 노란색을 사용해 강조하며, 마우스 hover 시 색상이 바뀌는 효과를 추가했습니다.
  4. 이모티콘 버튼: 이모티콘 버튼을 클릭하면 입력창에 이모티콘이 삽입되도록 했습니다. 여기서 다양한 이모티콘을 넣을 수 있습니다.
  5. 스크롤: 채팅 메시지가 추가되면 자동으로 스크롤되도록 설정했습니다.
  6. 입력창: 텍스트 입력창과 전송 버튼을 Flexbox로 정렬하고, 높이와 padding을 개선하여 사용자가 더 편리하게 입력할 수 있게 했습니다.

이제 카카오톡 스타일의 채팅방이 더욱 기능적으로 확장되었습니다. 필요한 부분은 추가적으로 커스터마이즈하거나 다른 기능을 더할 수 있습니다.

 
 
 

'프로젝트' 카테고리의 다른 글

Mini Project : Mini Project. 사용자 정보 입력받기 (Javascript :1일차 과제)+@  (0) 2025.03.31
Mini Project : Mini Project. 사용자 정보 입력받기 (Javascript :1일차 과제)  (0) 2025.03.31
Mini Project : 나만의 채팅방만들기 (CSS:2일차 과제)Original  (0) 2025.03.31
Mini Project : 나만의 채팅방만들기 (CSS:2일차 과제)+@  (0) 2025.03.31
Mini Project : 나만의 채팅방만들기 (CSS:2일차 과제)  (0) 2025.03.31

티스토리툴바