코코아톡 클론 코딩 + 챌린지 후기

코코아톡 클론 코딩 – 노마드 코더 Nomad Coders

🍀 코코아톡 클론 코딩 수강 기간

23.12.15 ~ 24.01.07

 

🍀 코코아톡 클론 코딩 챌린지 기간

24.01.01 ~ 24.01.15

 

강의를 꽤 들었을 때쯤 시작된 챌린지 병행!

무사히 졸업을 했다.

코코아톡 클론 코딩 회고록을 작성해 보려고 한다.

 

🐉 졸업 작품 - Troll's Talk

 

Troll's Talk

나는 졸업 작품으로 트롤을 주제로 한 카카오톡 클론을 제출했다.

 

 

업데이트한 프로필, 펑

이 강의는 클론 코딩이기 때문에

현시점의 카카오톡 기능을

최대한 유사하게 구현하는 것에 초점을 두었다.

 

광고 배너와 프로필 뮤직

광고 배너에 마우스를 올리면 색이 변하고,

실제로 클릭하면 이동하도록 링크를 연결해 두었다.

 

쇼핑

overflow-x scroll 기능을 통해

옆으로 넘겨 볼 수 있다.

다양한 기능들을 구현하는 데에

absolute와 relative가 많이 쓰였다.

 

왼 : 접속 splash 페이지, 오 : 로딩 splash 페이지

Troll's Talk 접속 시 접속 페이지를 보여주고,

로그인을 하면 Loading 페이지를 보여주다

메인 페이지로 이동한다.

 

Animation 속성과 @keyframes를 활용해

접속 시 2초간 해당 화면을 보여주다 사라지도록 설정했다.

keyframe 안에 opacity와 visibility를 넣어

transition 효과를 줌과 동시에 뒤에 있는 요소 클릭도 방지한다.

로딩 페이지에는 rotate도 넣어주었다.

 

버튼 눌림 효과

채팅창에서는 키보드 대신

버튼 4개를 만들어 보았다.

버튼을 누르면 실제로 눌리는 것처럼 표현하기 위해

:active를 사용했다.

 

 

🐉  어려웠던 점

 

더러운.. class명

1. class명 정하기

이게 생각만큼 쉽지가 않다..

단순하게 하려고 하면 겹치고,

한눈에 알아볼 수 있게 쓰자니 이름이 길어진다.

그래도 최선을 다해 정성스럽게 정해야

나중에 큰 화를 면할 수 있다.

 

 

z-index: -1

2. z-index

absolute를 여러 개에 하니 스크롤을 내릴 때,

업데이트된 프로필 같은 일부 main의 요소가

header 위로 올라오는 경우가 발생했다.

z-index를 여기저기 만져보다

결국 요소의 z-index에 -1을 부과하는 것으로 해결.

편하게 해결했지만 프로젝트가 더 복잡해지면

z-index를 세세하게 만져야 할 거 같다.

 

왼: 바로 실행, 오: 잠시 멈췄다 실행

3. keyframe 30%, 70% 추가

이건 졸업작품 말고

챌린지를 하다가 겪은 어려움이다.

애니메이션을 연속해서 재생하는데 끝나고 나서

0.2초 정도 머무르다가 다시 시작하도록 하고 싶을 때!

방법을 찾느라 고생했는데 너무나도 간단한 방법이 있었다.

바로 from-to를 0%-30%-70%-100%로 변경하는 것.

 

왼쪽을 오른쪽으로 변경

이런 꼼수 같은(?) 정석을 항상 마음에 두고 있어야 한다.

 

 

🐉 Tip

 

1. 니꼴라스 쌤의 추천 Tool을 활용하자.

ColorZilla, PageRuler를 추천해 주셨는데

이번 프로젝트에서는 ColorZilla가 정말 유용하게 쓰였다.

 

2. 졸업작품은 미리 시작하자.

챌린지는 매일 과제를 제출하다가

마지막에 이틀짜리 과제를 내주고,

그 과제가 끝나면 졸업작품을 내야 한다.

챌린지 마지막 날(졸업작품 제출)에

술약속이 있었던 나는

이틀짜리 과제를 하루만에 끝내고

바로 졸작 만들기에 돌입했다.

하루 그리고 반나절 동안 졸작을 만들어 본 결과

아주 탁월한 선택이었다!!

조금이라도 예쁜 졸작을 만들기 위해서는

하루 이상의 정성이 필요하더라.

다들 미리미리 시작하세요!

 

varibales

3. variable, components

'어..? 이거 다음에 또 쓸 거 같은데?'라는 생각이 들자마자

variable, components로 저장합시다.

그래야 여러번 안 돌아가고 편하게 쓸 수 있어용 

 

 

🐉 후기

 

html, css 강의 후기를 찾는 분에게 이 강의를 추천한다고 말하고 싶다.

강의 퀄리티가 아주 좋다.

필요한 실무 내용도 다 들어가 있고, 니꼴라스 쌤의 드립도 재밌고,

강의가 오래되면 새롭게 업데이트도 해주신다.

git도 살짝 배울 수 있다.

또 강의마다 달린 댓글이 많아서 오류를 쉽게 해결할 수 있다.

게다가 챌린지 수료를 하면 30% 할인 쿠폰도 주고

따로 있는 git 강의도 무료로 수강할 수 있음!

html, css는 아주 쉬우니 겁먹지 말고 도전해 보시길!

정말 정말 재밌는 강의였습니다❤️