[사이드프로젝트] Twitter 클론 코딩 - 서비스 기획부터 개발까지의 모든 것

2년 전, 트위터 클론 코딩 프로젝트를 진행한 적이 있는데 그때 써뒀던 글이 공중분해되어 사람들에게 읽히지 않는 것 같아 마음이 아프더라구요. 그래서 이렇게 제 블로그에 다시 공유해봅니다! 클론 코딩에 관심 있으신 분들에게 도움이 되길 바라요😁

---

첫 프로젝트였기에 더 조심스러웠던 프로젝트 주제 선정...!

 

우리가 직접 기획하는 서비스를 바로 구축하기에는 무리가 있다고 판단했기 때문에 기존 서비스의 클론 코딩을 통한 토이 프로젝트를 진행하기로 했다. 기획 분야는 어떤 서비스든 상상한 것들을 그려내기만 하면 되지만, 개발은 만들고 싶다고 해서 기능을 당장 만들어 낼 수 있는 것이 아니기 때문에 구현할 수 있는 최소의 기능을 중심으로 제작하기로 했다. 

 

 

클론코딩을 할 만한 여러 서비스를 찾아본 결과, 노마드 코더의 강의 중 Twitter 트위터 클론 코딩 강의를 발견하게 되었다. 이에 따라 진행된 프로젝트의 프로세스는 아래와 같다. 

 

• 기획&디자인 - 실제 Twitter 홈페이지를 참고한 UI/UX 클론
  
  
• 개발 - 노마드 코더(LINK)의 트위터 클론코딩 강의 참고

 

개발은 트위터 클론 코딩 강의를 활용하여 기능을 구축하는 데에 도움을 받고, 기획/디자인 부문은 Twitter 웹페이지를 참고하여 UI/UX를 구성한 후 제플린을 통해 개발자에게 넘겨주었다. 그 후 개발자는 구축된 코드 위에 기획자가 만든 UI/UX를 입히는 작업으로 마무리했다. 개발자가 웹페이지에 UI/UX를 입히는 동안 기획자는 만들어진 서비스를 토대로 역기획서를 만들었다. 

 

0. Intro 📄

프로젝트 명  |  Twitter 트위터 클론 코딩
기획 및 디자인  |  neokcham
개발  |  JunBro
분류  |  토이 프로젝트 (팀) 
제작 기간  |  2021.06. ~ 2021.09. 
주요 기능  |  트윗하기 
사용 툴  |  Notion, Figma, Zeplin, GitHub

 

지금 세계 곳곳에서 무슨 일이 일어나고 있는지 확인하세요

연예인처럼 유명한 사람들이 아니라 평범한 사람들이 지금 무엇을 하고 있는지 궁금하지 않아? 

이제부터는 너의 생각을 전 세계 사람들과 공유해봐😆  

 

[요약]

• 트위터 공동 창업자 "잭 도시"
  - 도시(city)가 동작하는 방식, 재화와 정보가 흘러가는 방식, 그리고 모든 것이 서로 연결되는 방식에 관심을 가짐
  - 화물을 운송하는 트럭 운반 차량처럼 경로를 추적할 수 있는 것들에 관심
  - 도시에서 일어나는 모든 것들을 추적하고 지금 현재 일어나고 있는 것이 무엇인지 볼 수 있는 소프트웨어를 상상
  - 평범한 사람들이 지금 무엇을 하고 있는지 알 수 있는 방법이 없다는 사실을 깨달음
  - 인스턴트 메시지 활용한 메시지 시스템을 만들면 어떨까?
  
  
• 트위터 탄생...!
  (참고 : https://sergeswin.com/453/)

 

#1 전 세계 모든 사람들의 생각과 지식, 정보 공유

-  트위터는 페이스북과 같이 사람 혹은 관계 자체에 집중하기보다는 다른 사람이 생성한 정보를 볼 수 있는 무언가를 볼 수 있다는 것에 가치의 중점을 둔다. 

 

#2 글자 수 제한을 통한 간단한 트윗 유도

- 140자 이내의 간결한 내용을 통해 지금 이 순간 일어나는 일을 가장 잘 표현해낼 수 있다. 이는 중요한 정보나 생각을 직접적으로 보여주는 데 효과적이다. 

 

(참고 : https://blog.twitter.com/ko_kr/topics/product/2017/Giving-you-more-characters-to-express-yourself)

---

1. Twitter Service

Twitter 트위터를 한마디로 요약하자면, '전 세계 모든 사람들의 생각과 지식, 정보가 저장된 하나의 큰 데이터베이스가 되는 서비스'라고 할 수 있겠다. 파랑새는 쉽게 찾아보기 힘들어 행복과 행운을 의미한다고 하는데, 트위터의 로고가 전 세계 사람들 사이에서 빠르게 행복한 소식을 전해주는 파랑새를 뜻하는 것은 아닐까 생각해본다. 

 

 

---

2. Target

트위터는 평범한 사람들의 생각과 일상을 짧게 공유하는 것에서 시작했다. 유명인뿐만 아니라 평범한 사람들도 자기 생각을 공유하고 자유롭게 소통할 수 있는 공간이 필요한 것이었다. 트위터 서비스의 타겟을 현대에 맞추어 설정해보자면, 짧은 한마디에 감성을 담아내는 것에 재미를 느끼는 젊은 세대들을 타겟으로 맞출 수 있겠다. 

 

# 순간적으로 떠오르는 자기 생각과 감정을 부담 없이 공유하고 싶은 A씨

# 특정 관심사에 파고들거나 다양한 이슈, 유머, 생활 정보 등의 콘텐츠를 확인하고 싶은 B씨

 

---

3. Flow Chart

트위터는 트윗하기 기능을 중심으로 매우 간단한 서비스 플로우를 가지고 있다. 다른 사용자들의 관심사를 탐색하거나 쪽지 기능, 북마크, 알림 기능 등이 있지만, 우리는 토이 프로젝트를 진행하고 있기 때문에 자잘한 기능들은 제외하고 트위터의 메인 기능을 구현하는 것에 집중했다. 메인 페이지에서 로그인/회원가입/간편 로그인 기능을 구현하고, 자신의 프로필 변경, 마지막으로 메인 기능인 트윗하기 기능을 통해 텍스트와 이미지/움짤을 업로드할 수 있다. 

 

 

 

---

4. UX Concept

트위터의 UX를 분석해본 결과, 아래와 같은 결론을 얻을 수 있었다. 

 

1. 자신의 일상을 간단히 기록할 수 있는 시스템 : simple to use
- 짧은 트윗을 남기는 기능 중심의 심플한 UI

2. 트윗을 통해 자신의 일상을 사람들과 공유할 수 있는 시스템 : connected to others
- 답글 달기, 공유하기 등의 기능을 활용한 UX

3. 평범함을 특별함으로 만들어줄 수 있는 서비스 : increase the value
- 팔로우, 댓글, 좋아요와 같은 직관적 수치를 통해 자신의 일상에 특별함을 더하는 UX

 

 

 

---

 

5. Hi-fi 와이어프레임 - Figma

기존에 만들어져 있는 서비스를 그대로 옮기는 작업이다 보니 어떤 화면들이 있는지 확인하는 것이 필요했다. 그래서 트위터에서 구동되는 모든 페이지를 캡처하고, 피그마의 Arrow Auto 플러그인을 활용해 플로우를 간단히 나타냈다. 이후 작업은 캡처한 화면을 하나하나 피그마로 구현하면서 컴포넌트들을 정리해 나갔다. 

 

 

---

 

※ 주의 (?)※  

아래는 실제 트위터 화면을 캡처한 것이 아니라, 피그마로 한 땀 한 땀 만든 화면을 캡처한 것이다.

 

Starting Page

 

 

Login Page

 

 

ID Password Error Page

 

 

Sign in Page

 

 

Main Page

 

 

 

Logout Page

 

 

---

 

6. Color Styles

 

---

 

7. Design Components

각 컴포넌트를 만들어나갈 때는 컴포넌트 명만 보고도 이 컴포넌트가 어떤 역할을 하는 것인지 알기 쉽게 만들어야 한다. 그래서 나름 나만의 규칙을 만들어서 아이콘은 ic_blabla, 버튼은 btn_blabla 등 컴포넌트 명을 설정했다.

 

 

하지만 제플린으로 해당 부분을 넘기고 난 이후에 UI 작업을 하던 개발자에게 컴플레인이 들어왔다. 컴포넌트로 구성된 것들만 이름을 설정해주고, 텍스트나 일반 도형들은 이름을 설정해주지 않아 클래스 명이 빈값으로 떠서 개발할 때 클래스 명을 하나하나 설정해주어야 한다는 것이었다. 그래서 다음 프로젝트부터는 코딩 컨벤션을 고려하여 진행하기로 했다.

 

사실상 이런 문제들 때문에 피그마로 디자인을 하는 것보다 컴포넌트 구성과 스타일 가이드를 만드는 일이 더 오래 걸린다고 한다. (이 글을 쓰는 와중에도 컴포넌트를 제대로 만들어 놓지 않았다고 개발자에게 한 소리를 들었다🥲) 토이 프로젝트의 목적이 프로젝트 협업 과정에서 서툰 부분들을 찾고 개선하는 것이기 때문에 좋은 연습이었다고 생각한다. 

 

---

 

8. Zeplin으로 개발자에 공유

피그마에서 완성된 결과물을 제플린에 업로드하여 개발자에게 공유했다. 제플린은 피그마에서 설정한 값들이 개발자가 보기 좋게 정리되어 있고, 버전 관리도 지원하고 있어 서로 협업하기에 아주 좋은 툴이었다. 

 

 

---

 

9. 개발

1) 사용기술

• HTML5 / CSS3
• JavaScript(ES6+)
• React JS
• Firebase (Authentication, Cloud Firestore, Storage)

2) 개발 과정

HTML,CSS 와 React 기본개념을 배우고, 노마드 코더 트위터 클론코딩 강의를 통해 트위터의 기본 기능을 구현하였다.

트위터 클론코딩 – 노마드 코더 Nomad Coders

 

강의에서는 HTML 기본 뼈대에 회원가입, 로그인, 트윗 등 기능을 먼저 구현하고 마지막으로 CSS를 통해 좀 더 보기 좋게 디자인을 입혔다.

클론코딩 강의로 구현한 기능은 트위터의 핵심을 잘 담고 있었기에 수정할 부분이 많지 않았다. 하지만 디자인에 경우에 트위터 홈페이지와 똑같이 클론해야 했기 때문에 수정할 부분이 매우 많았다.

 

 

여기서부터 기획서와 Zeplin에서 UI Componet, 스토를 보드를 참고하여 UI와 UX를 변경하였다.

 

#1 Starting Page

 

Zeplin에 올라와 있는 Assets을 이용하여 이미지, 아이콘을 배치하고 CSS를 통해 각 요소의 색, 폰트를 기획자가 정해놓은 속성으로 지정해주었다. Zeplin에서 제공해주는 CSS 코드를 그대로 넣게 되면 배치가 생각한 대로 되지 않기 때문에 Color, Margin 참고용으로 활용하였다.

 

 

#2 Sign in Page

 

클론코딩 강의로 구현한 결과물에서는 회원가입과 로그인을 버튼을 변경하면서 똑같은 입력창을 활용했다. 수정 버전에서는 트위터와 동일하게 회원가입의 경우 Material-UI 라이브러리 Modal 창을 이용하여 필요한 정보를 기재하도록 하였다.

 

 

#3 Login Page

 

로그인의 경우 페이지를 따로 만들고 로그인 버튼을 눌렀을 때 'react-router-dom'을 이용하여 경로를 변경 시켜 주었다. 파이어베이스를 연동하여 메서드(signInWithEmailAndPassword) 한 줄로 로그인 기능이 구현 가능했기 때문에 매우 편리하였다.

 

 

#4 Main Page

 

메인페이지는 HTML 태그 구조를 짜는 것이 제일 어려웠다. CSS에서 대부분 Flex Box를 이용하여 박스들을 배치하였는데 웹 개발이 처음이라 깔끔하지 못했던 거 같다. 그래도 트위터 홈페이지에서 크롬의 개발자 도구를 이용하여 일일이 확인하여 참고하면서 개발하였다.

왼쪽의 사이드바를 header 태그로, 오른쪽 트윗 화면을 main 태그로 나누고 그 안에서 div 태그를 이용하여 세분화시켰다.

 

 

 

기존의 클론 코딩 강의의 결과물에서는 트윗의 작성자를 확인할 수 없었다. 이것을 트윗을 작성할 때 파이어스토어 Document에 작성자 닉네임 필드를 추가하여 화면에 표시되도록 하였다. 

 

 

또 트윗이 시간순으로 나오지 않았지만, 파이어스토어 orderby 메서드를 이용하여 query를 만들어 트윗이 생성된 순서대로 정렬되도록 하였다. 

 

#5 Logout Page

 

프로필 페이지는 클론코딩 강의로 구현한 결과물을 활용하였고 사이드바는 고정된 상태에서 페이지를 이동시켰다. 로그아웃 시 회원가입과 동일하게 Material-UI 라이브러리 Modal 창을 이용하여 사용자에게 한 번 더 확인할 수 있도록 하였다.

 

 

클론 코딩 강의에서 기능을 구현하고 기획자에게 받은 기획서와 Zeplin을 토대로 UI를 최대한 비슷하게 구현하는 데 초점을 맞추었다.

수정하는 과정에서 변경된 태그 구조, 라우트 구조를 제대로 동작하도록 맞추는 것은 어렵지 않았지만, CSS를 이용하여 디자인 속성을 기획서에 있는 대로 적용하는 게 제일 어려웠다.

 

마무리로 GitHub Pages를 통해 수정된 버전을 배포하였다!

3) 아쉬운 점

• 기획서를 토대로 결과물을 빨리 만들기 위해 변수명, 구조를 깊게 생각하지 않고 진행하였다.
• HTML, CSS의 개념이 아직 부족한 거 같아 다시 공부해야겠다.
• React는 정말 매력적인 프레임워크였지만 제대로 활용하지 못하였다.
• 기획서에 명시된 UI, UX를 완벽하게 구현하지 못하였다.
• 작업하는 데스크톱 환경에서만 테스트하여 모바일에는 최적화시키지 못하였다. (다음 프로젝트에서는 반응형 UI를 꼭 적용...)
  

---

 

10. 마무리

트위터라는 서비스는 이미 틀이 잡혀있어서 기획서를 만드는 데 오랜 시간이 걸리지는 않았다. (하지만 진짜 우리 아이디어를 가지고 처음부터 끝까지 만들어나가려면 훨씬 오래 걸릴 것을 알기 때문에😂 다음 기획서 만들기가 무섭네...) 아래는 완성된 기획서이다. 

 

 

결과물: https://kimjunhyeong1.github.io/nwitter/#/

React App

 

GitHub: https://github.com/KimJunhyeong1/nwitter

GitHub - KimJunhyeong1/nwitter: Cloning Twitter with React and Firebase

 

---

 

후기

neokcham : 처음에는 분명 한달 안에 끝내자고 시작한 프로젝트였는데, 서로 일정이 생기면서 미루고 미루다가 3개월에 걸쳐 트위터 클론코딩 프로젝트를 마무리하게 되었다. 좀 더 빨리 끝낼 수 있었음에도 불구하고 일을 미루게 된 것이 아쉽긴 하지만, 배운 것이 정말 많은 프로젝트였다. 일정 관리의 필요성과 제플린 등의 새로운 툴을 경험하게 된 것, 그리고 피그마로 컴포넌트를 만들 때는 개발하기 쉽도록 상세한 구성이 필요하다는 것을 배우게 되었다. 다음 프로젝트 때 더 발전할 수 있도록 물꼬를 터놨으니 이제 진짜 시작이다!! 🤩 

 

JunBro : 시작은 배우고자 하는 의지가 강해 프로젝트를 빨리 끝낼 것 같았는데 생각보다 훨씬 오래 걸렸다. 특히 CSS 작업하는 부분이 너무 오래 걸려서 아직 부족한 부분이 많다고 느꼈다. 다시 한번 프로젝트 일정을 구체적으로 잡는 것에 대한 중요함을 느꼈다. 다음 프로젝트는 정말 꼼꼼하게 계획을 잡아야겠다. 그래도 이렇게 클론으로 하나의 서비스를 직접 만들어보니 개발 시 내가 부족한 부분들에 대해 정확하게 알게 되었다. 이제 다음 프로젝트 전 HTML, CSS, JavaScript 기초를 다시 한번 다지고, 좀 더 퀄리티 있고 계획대로 일정을 진행할 수 있도록 준비해야겠다!