HTML과 CSS만으로 카카오톡 클론하기

DongHee Kim·2021년 6월 14일
1

Project

목록 보기
1/7
post-thumbnail

먼저, 완성작부터 선보이고 시작하는 포스팅

Project Overview

HTML과 CSS만으로 카카오톡을 클론해보는, 노마드코더 코코아톡 클론 강의를 완강했다. 🤓
비록 강의에 기반해 코딩했지만 HTML과 CSS의 이모저모를 직접 실습해보며 더 잘 이해할 수 있어서 만족! 완강 기념 기억하고 싶은 것들 정리해보기

구조

  • 메인 - Friends탭
  • 메인 - Chats탭
    - Chatting
  • 메인 - Find탭
  • 메인 - More탭
    - Settings탭

기억하고 싶은 것들

아이콘 삽입

카카오톡은 글자대신 아이콘이 대부분인 관계로, 다양한 아이콘이 필요했다.
모든 아이콘은 Font Awesome을 통해 찾고 사용했다.
아이콘 적용방법도 쉽고 (아이콘 서칭 - 소스 클릭 후 붙여넣기) 무료 아이콘도 많아서 유료결제없이도 충분했다.

BEM 방식

Block, Element, Modifier의 줄임말.
Block--Element__Modifier 형태로 class명을 설정하는 CSS 방법론이다.
처음엔 class명이 너무 긴..가? 싶다가도 class가 다양해질수록 원하는 걸 한 눈에 찾기 쉬워 만족스러웠다.

예를 들어 위의 박스 부분은 실제로 아래의 코드로 구성되어 있는데,
friends-screen__channel부터 user-component__title--not-bold까지 다소 길지만 직관적인 class명을 사용했다.

<div class="friends-screen__channel">

  <div class="friends-screen__channel__channel-header">
  <span>Channel</span>
  <i class="fas fa-chevron-up fa-xs"></i>
  </div>
                        
  <div class="user-component">
  
    <div class="user-component__column">
    <img src="https://i.pinimg.com/originals/ae/61/c4/ae61c4371df42b13541c045a814673ab.jpg" class="user-component__avatar--sm" />
      <div class="user-component__text">
      <h4 class="user-component__title--not-bold">Channel</h4> 
      </div>
    </div>

    <div class="user-component__column">
    <span>2</span>
    <i class="fas fa-chevron-right fa-xs"></i>
    </div> 
    
  </div>
</div>
         

Animation

Javascript없이 CSS만으로 요소에 애니메이션 효과를 주는 속성.
Transition과 달리 keyframe단위로 속성을 변경할 수 있어서 더 정교한 연출이 가능하다. 눈에 바로바로 보이는 효과가 너무 재밌고 또 신기했기에 분량 많음주의.. 강의 외에도 TCP School의 관련 게시글을 참고했다. 아주 깔끔하게 정리되어 있음!

화면 전환 효과

ease-in-out, animation-delay 속성을 통해 카카오톡 초기화면이 천천히 사라지며 화면 전환이 되도록 했다. 가장 첫 탭인 Friends탭을 열 때만 실행되도록해서, 카카오톡을 처음 실행시킬 때 로딩되는 듯한 효과를 주었다.

  @keyframes hidesplashscreen {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
      visibility: hidden;
    }
  }
  
  #splash-screen {
    background-color: rgb(255, 235, 15);
    position: absolute;
    height: 100vh;
    width: 100vw;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 80px;
    animation: hidesplashscreen 0.3s ease-in-out forwards;
    animation-delay: 1s;
}

하나씩 솟아오르는 버튼들

모든 버튼에 transform: translateY(90px) 설정을 해서 위에서 솟아오르도록 하고, 각각의 요소에 animation-delay속성을 다르게 줘서 하나씩 뿅뿅 나타나도록 연출했다.

@keyframes appearbtnanimation {
  from {
    transform: translateY(90px);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

.nav__btn {
  transform: translateY(90px);
  opacity: 0;
  animation: appearbtnanimation 0.5s ease-in-out forwards;
}

.nav__btn:nth-child(2) {
  animation-delay: 0.2s;
}

.nav__btn:nth-child(3) {
  animation-delay: 0.5s;
}
.nav__btn:last-child {
  animation-delay: 0.8s;
}

돌아가는 톱니바퀴

톱니바퀴 아이콘이 hover 상태일 때(커서가 놓였을 때)
데굴데굴 굴러가도록 rotateZ(360deg) 효과를 주었다.
멈추지않고 열심히 굴러가도록 infinite설정까지!

@keyframes rotateCog {
  from {
    transform: none;
  }
  to {
    transform: rotateZ(360deg);
  }
}

.screen-header__icons .fa-cog:hover {
  animation: rotateCog 1s linear infinite;
}

두근거리는 하트

hover 상태일 때, keyframe을 0%-50%-100%로 나눠서 50%일 때 하트가 붉게+커졌다가(transform:scale 사용) 다시 돌아오는 것처럼 연출했다. 하트가 먼저 멈추면 섭하니까 여기에도 infinite 속성 적용.

@keyframes heartbeat {
  0% {
    color: white;
    transform: none;
  }
  50% {
    color: tomato;
    transform: scale(1.3);
  }
  100% {
    color: white;
    transform: none;
  }
}

.open-post__heart-count:hover i {
  will-change: transform;
  animation: heartbeat 1s linear infinite;
}

반응형 웹을 위한 Media Query

휴대폰 화면 사이즈에 맞도록 클론했기에, Media Query를 통해 미리 설정한 크기보다 화면이 커지면 YourScreen is Super big 🤦♀️ 화면이 뜨도록 했다.

아래 조건인 @media screen and (max-width: 645px)가 충족되면 적정 크기의 화면이니 no-mobile 화면이 보이지않는다.
= width가 645px이상이면 화면이 너무 크다는 no-mobile 화면이 보인다.

#no-mobile {
  position: absolute;
  z-index: 99;
  height: 100vh;
  background-color: rgb(255, 235, 15);
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  top: 0;
}

@media screen and (max-width: 645px) {
  #no-mobile {
    display: none;
  }
}

강의에 기반해, 그것도 HTML과 CSS로만 진행한 클론이였지만 CSS의 매력에 풍덩 빠져버리는 계기가 되었다. 내 코드로 결과가 눈에 바로바로 보이는 경험이 아주 흥미롭고 또 짜릿..! 아직은 정적인 페이지를 만드는데 그쳤지만, Javascript가 곁들여지만 얼마나 더 매력적으로 변할 수 있을지 기대된다.

profile
일상의 성실이 자존감을 만드는 성취주의자

0개의 댓글