[PROJECT] Socket.io 를 이용한 채팅 애플리케이션 (4) - 채팅 창 웹 디자인

Socket.io 채팅 애플리케이션 (4) - 채팅창 웹 디자인

지난 시간에

지난 시간에는 사용자 관련 소켓을 구현해 보았다. 본격적으로 채팅 관련 소켓을 작성하기에 앞서 채팅장 웹 디자인을 해보겠다.

 

mark up ( ui 꾸미기 )

# /chat.html
<div id="contentWrap">
    <nav>
		<span id="nav-header">
            chat App
        </span>
        <span id="logoutBtn">로그아웃</span>
    </nav>
    <div id="contentCover">
        <div id="roomWrap">
            <div id="roomList">
                <div id="roomHeader">채팅 방 목록</div>
                <div id="roomSelect">
                    <div class="roomEl active" data-id="1">Everyone</div>
                    <div class="roomEl" data-id="2">VueJS</div>
                    <div class="roomEl" data-id="3">ReactJS</div>
                    <div class="roomEl" data-id="4">AngularJS</div>
                </div>
            </div>
        </div>
        <div id="chatWrap">
            <div id="chatHeader">Everyone</div>
            <div id="chatLog">
                <div class="anotherMsg">
                    <span class="anotherName">Jo</span>
                    <span class="msg">Hello, Nice to meet you.</span>
                </div>
                <div class="myMsg">
                    <span class="msg">Nice to meet you, too.</span>
                </div>
            </div>
            <form id="chatForm">
                <input type="text" autocomplete="off" size="30" id="message" placeholder="메시지를 입력하세요">
                <input type="submit" value="보내기">
            </form>
        </div>
        <div id="memberWrap">
            <div id="memberList">
                <div id="memberHeader">사람</div>
                <div id="memberSelect"></div>
            </div>
        </div>
    </div>
</div>

contentWrap 에 위 코드를 추가 시킨다. 크게 4가지로 영역이 나뉘었는데 기본적으로 nav, roomWrap, chatWrap, memberWrap 이다.

nav 는 말그대로 네비게이션 헤더이다. 로그아웃 버튼이 위치할 것 이고,

roomWrap 은 채팅방 목록을 표현한다. 채팅방 목록은 고정이고 사용자는 해당 방을 클릭하여 방에 입장할 수 있다.

chatWrap 은 채팅창을 말한다. 사용자 채팅을 치는 입력 칸과 채팅 기록이 표현된다. .anotherMsg 는 내가 아닌 다른 상대방이 보낸 메세지로 채팅방의 왼쪽에 나타난다. .myMsg는 자신이 입력한 채팅으로 채팅방 오른쪽에 나타난다.

memberWrap 은 현재 채팅방에 있는 사람의 목록이다.

지금까지 잘 따라왔다면 저장하고 재시작 했을때 로그인 하는 화면이 나오고 로그인을 하면

 

이러한 화면이 나올것이다.

우선 roomWrap 에 스타일을 입혀보자.

# /public/css/style.css
----------
#roomWrap {
    width: 200px;
}

#roomList {
    border: 1px solid #0084FF;
    border-radius: 5px;
}

#roomHeader {
    background-color: #0084FF;
    color: #fff;
    height: 40px;
    font-size: 18px;
    line-height: 40px;
    text-align: center;
    border-radius: 5px;
}

.roomEl {
    text-align: center;
    border-bottom: 1px solid #f0f0f0;
    padding: 10px 0px;
    cursor: pointer;
}

.roomEl:hover{
    background: #f0f0f0;
}

.roomEl.active{
    background: #f0f0f0;
}

 

그 다음으로는 chatWrap 에 스타일을 입혀보겠다.

# /public/css/style.css
----------
#chatWrap {
    width: 600px;
    border: 1px solid #ddd;
}

#chatHeader {
    height: 60px;
    text-align: center;
    line-height: 60px;
    font-size: 25px;
    font-weight: 900;
    border-bottom: 1px solid #ddd;
}

#chatLog {
    height: 700px;
    overflow-y: auto;
    padding: 10px;
}

.myMsg {
    text-align: right;
}

.anotherMsg {
    text-align: left;
    margin-bottom: 5px;
}

.msg {
    display: inline-block;
    border-radius: 15px;
    padding: 7px 15px;
    margin-bottom: 10px;
    margin-top: 5px;

}

.anotherMsg > .msg {
    background-color: #f1f0f0;

}

.myMsg > .msg {
    background-color: #0084FF;
    color: #fff;
}

.anotherName {
    font-size: 12px;
    display: block;
}

#chatForm {
    display: block;
    width: 100%;
    height: 50px;
    border-top: 2px solid #f0f0f0;
}

#message {
    width: 85%;
    height: calc(100% - 1px);
    border: none;
    padding-bottom: 0;
}

#message:focus {
    outline: none;
}

#chatForm > input[type=submit] {
    outline: none;
    border: none;
    background: none;
    color: #0084FF;
    font-size: 17px;
}

그 다음은 memberWrap , roomWrap 과 거의 비슷하다.

# /public/css/style.css
----------
#memberWrap{
    width: 200px;
}

#memberList {
    border: 1px solid #aaaaaa;
    border-radius: 5px;
}

#memberHeader {
    height: 40px;
    font-size: 18px;
    line-height: 40px;
    padding-left: 15px;
    border-bottom: 1px solid #f0f0f0;
    font-weight: 600;
}

.memberEl {
    border-bottom: 1px solid #f0f0f0;
    padding: 10px 20px;
    font-size: 14px;
}

수정할 부분이 있다. chat.html 에 memberSelect 안에 테스트를 할 수 있도록

<div class="memberEl">test</div> 해당 코드를 넣어보자. 개수는 상관없다.

그 후 결과를 보면

 

엘리먼트들이 보기 싫게 정렬되어 있다. 3개의 엘리먼트를 감싸는 .contentCover 에 flex 속성을 주어 정렬해 보자.

# /public/css/style.css
----------
#contentCover{
    width: 1280px;
    margin: 0 auto;
    padding-top: 20px;
    display: flex;
    justify-content: space-around;
}

flex 에 관한 자세한 내용은 다루지 않을 것이다. 자세한 내용은 w3school 에 flex 에서 찾아 보길 바란다.

여기서는 쉽게 justify-content: space-around; 을 이용해 서로 간격을 맞췄다고 설명하겠다.

이제 마지막으로 결과를 보면

 

나름 채팅방스러운 (?) 화면이 완성되었다. 그리고 테스트할 때 서버를 재시작 할 때 마다 회원가입하는 절차가 지겨우니 기본 계정을 만들고 나중에 지우도록 하자.

# /app.js
io = require('socket.io').listen(server),
----------
users = {'test' :{id:'test', pw: 'test'}},

회원가입 없이 아이디와 비밀번호 test 를 치고 접속할 수 있다.

 

다음 시간에

기본적인 채팅 관련 ui 를 만들었으니 세부적인 기능을 여러차시에 걸쳐 구현해보겠다.