<HTML, CSS> 코코아톡 클론 코딩 졸업작품 제작(with figma, github)

1. 졸업작품 준비

 2주 동안 노마드코더의 코코아톡 클론 코딩 강의를 들으면서 html, css를 다루게 되었다.

그 결실을 졸업작품으로 드러내야하는데 아예 처음부터 만들까 고민을 하다 강의를 끝까지 다 듣고 남은 코드를 재활용하기로 했다.

 

2. 계획

 메신저 형태이기 때문에 주인공을 정하면 그것에 맞게 컨셉을 정하면 되었다. 그래서 주인공을 우리 팀원의 강아지로 정했고, 메신저 이름은 '개톡'으로 정했다. 세부적인 것들을 수정해야하는데 보통 그런거를 작성할 때 문서로 했는데 새로운 방법을 이번 기회에 알게 되었다. 바로 'FIgma'라는 서비스이다.

옆에 낙서 많은데 치웠다...

 위 사진 처럼 시각적으로 준비 과정을 정리할 수 있었다. Figma 덕분에 내 일처리가 2배는 쉬워질 수 있었던 이유는 우선 component, screen, 색상 정리 등등 보기 쉽게 색깔별로 정리를 해놓으니 보기 쉽고, 다 할 때마다 'done' 이모티콘을 붙여서 어떤 부분을 못했는지도 알 수 있어서 mbti에서 J를 갖고있는 나로썬 너무 완벽한 계획 정리였다.

 졸업 작품의 계획을 간략히 설명하자면 주인공(me)가 강아지로 친구창에는 동물 친구들과, 인간 친구들로 구분하고 채팅도 그 친구들에 맞게 대화를 구성했다. find와 more에서도 강아지에 맞는 오픈채팅, suggestions들을 추가했다.

 

3. Coding

이제 실전이다. 계획한 부분을 차근차근처리를 하는데 많은 시간이 걸렸지만, 조금씩 우리가 원하는 방향으로 만들어 나가면서 뿌듯함을 느끼고, 끝을 향해 달려갈 때는 완성에 대한 기대를 느끼면서 더욱 열심히 만들었던 것 같다. 이를 깃허브에 올렸는데 80번 commit한 걸 보고 정말 많은 시간을 여기에 쏟은 것을 알 수 있었다.

많은 파일들...

많은 라인들...

4. Big mistake(gh-pages)

니코 쌤이 강의 초반에 그런 말을 했다. "파일을 만들 때에는 대문자를 쓰지 마세요!!".

하지만 내 css 폴더 이름은 대문자로 큼지막하게 'CSS'로 되어있었다. 그래서 github-pages에 올렸더니 html만 남게 되었고, 처음엔 뭐가 문제인지 헤맸다... 다행히 잘 기억이 떠올라 잘 바꾸었고 해결할 수 있었다.

 

5. 자랑

https://yh4752.github.io/gaegaotalk/

Index-Gaetalk

login page

friends screen

profile

chat screen

나머지는 직접 보세요...ㅎㅎ 애니메이션도 넣었슴돵

6. 마무리

눈으로 강의를 보는 것보다 직접 코드를 치면서 알아가는 것이 역시 훨씬 더 좋은 공부라는 것을 느꼈고,

아직 미숙한 html, css지만 이제 js도 배울 것인데 한주 한주를 지나가면서 성장하는 내가 되었으면 좋겠다.

이번에 코코아톡 클론 코딩을 졸업하게 되면 깃, 깃허브 강의를 공짜로 주는데 꼭 들을 것이다...

깃허브에 미숙하니까 헤매는 시간이 많았고, 깃을 통해 내가 직접 파일들을 핸들링 하고 싶어서 꼭 배울 예정이다.