카카오톡 클론 코딩

Nomad Coder의 강의를 들으며 배웠던 내용을 바탕으로

현재 서비스 되고 있는 카카오톡 페이지를 클론코딩 해보려고 한다.

 

코딩하면서 막히거나 어려운 부분에 대해서 작성할 예정.

 

1. 상단 헤더 부분 만들기 (난이도 쉬움)

이처럼 카카오톡은 상단 부분에 항상 위로 노출 돼 있는 헤더 부분이 존재한다.

이 부분을 웹에서 구현하기 위해서 z-index와 position:fixed; 속성을 사용했다.

그리고 밑의 contents 부분을 position:absolute로 만든 뒤, 헤더 부분만큼 top 값을 주었다.

2. 프로필 카드 만들기 (난이도 조금 있음)

위 사진처럼 프로필 오른쪽 부분에는 프로필 뮤직이 존재하면, 오른쪽에 프로필 뮤직만 뜨고

상태 메세지와 프로필 뮤직이 같이 있다면, 위의 모양대로 출력되게 만들었다.

그런데 한가지 문제는, 작은 화면에서는 저 두가지 항목들이 겹치게 되는 점이었다.

이를 방지하고자 왼쪽의 프로필 부분의 크기는 60%, 오른쪽 프로필 뮤직 부분의 크기는 40%정도로 설정한 뒤,

overflow가 된다면, 다음의 세가지 속성으로 잘리는 text를 ellipsis 처리해주었다.

.profile-music {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

단점

1. 프로필 뮤직이 없을 때도 상태 메세지가 전체의 60%밖에 차지하지 못해 짤린다.

 

3. 슬라이딩 메뉴 헤더 만들기

카카오톡의 뷰 페이지에서는 상단에 메뉴 바가 존재한다.

메뉴 바는 좌, 우로 슬라이드하여 움직이며 크기는 일정하지 않고 현재 메뉴에 하이라이트 처리가 된다.

 

이를 구현하기 위해서는 일반적으로 swiperjs를 사용해서 구현하는 것이 일반적이나, 지금은 오로지 HTML과 CSS만으로 구현하는 중이므로 아래와 같은 속성을 추가했다.

.view-nav-bar {
  display: flex;
  width: 100%;
  overflow-x: scroll;
  scrollbar-width: none;
  white-space: nowrap;
  position: fixed;
  top: 5rem;
  color: black;
  box-sizing: border-box;
}
.view-nav-bar::-webkit-scrollbar {
  display: none;
}

overflow 속성을 scroll로 지정하면, 스크롤 바가 보이게 된다.

이 스크롤 바를 없애기 위해서는 다음의 방식을 따르면 된다.

chromium기반 브라우저 : 가상선택자 ::webkit-scrollbar 의 display 속성을 none으로 바꿔주면 된다.

firefox 브라우저: 속성을 scrollbar-width: none; 으로 설정한다.

 

하지만 이러한 방법을 쓰면 치명적인 단점이 존재한다.

바로 데스크탑 브라우저 환경에서는 슬라이드가 없어 좌우 슬라이드를 할 수 없다는 점.

모바일 환경에서는 스와이프 동작으로 작동이 가능하다.

4. 반응형 페이지 제작하기

반응형 페이지는 media query로 만들었다.

예를 들어 페이지가 여러개라면, 카드 뉴스가 가로로 나오게 한다던지 하는 것들이었다.

일정 크기 이하로 화면 크기가 줄어들면 카드 뉴스의 전체 크기를 조정하고,

부모 요소에 flex-wrap: wrap;을 추가하여 밑으로 내려갈 수 있도록 조절했다.

 

Probe001/kakao-clone (github.com)

GitHub - Probe001/kakao-clone