💬 개발자 채팅방을 만들어 봤습니다.

웹사이트 링크 : 디디톡

프로젝트 소개에 앞서 제 소개를 간단히 하자면, 저는 이제 막 경력 1년을 넘긴 프론트 개발자 어린이(?)입니다.

❓ 이게 뭐에요??

한마디로 개발자들끼리 코드 혹은 기술에 대해 실시간으로 질문과 답변을 주고 받을 수 있는 채팅방 플랫폼입니다.

자바스크립트 관련해서 질문이나 이야기를 나누고 싶다면, javascript 방에, 타입스크립트 관련 질문이나 이야기가 하고 싶다면 typescript 방에 들어가서 질문도 하고 수다도 떠는, 그게 전부인 채팅방입니다.

UI는 대충 이렇습니다. 좌측에는 채팅방 목록이, 우측에는 채팅 목록이 있습니다.

또한 채팅뿐만 아니라 여러 기능들을 넣어두었는데요,

1. 코드 에디터

하단에 </> 버튼을 누르면 코드 에디터가 뜨고, 코드와 채팅을 입력하면 내가 입력한 친근한 vscode 기반 코드를 사용자들이 볼 수가 있습니다.

2. 다양한 프로그래밍 언어 지원

다양한 언어를 자유자재로 바꿀 수도 있고,

3. 코드 복사

코드를 복사할 수도 있으며,

4. 멘션

특정 유저의 코드를 수정해서 멘션을 날려줄 수도 있습니다.

5. 코드 변경사항

수정된 코드의 변경사항도 한 눈에 볼 수 있습니다.

그 외에 기본적인 이미지 업로드나 이모지😋 역시 사용 가능합니다.

😲 어떻게 구현한 거에요??

리액트⚛️와 파이어베이스🔥 딱 두 가지로만 만들었습니다.

UI 프레임워크는 Semantic UI를, 에디터는 마이크로소프트가 직접 관리하는 모나코 에디터를 사용했습니다.

파이어베이스는 구글 로그인, 파이어스토어, 스토리지, 클라우드 함수, 호스팅, 애널리틱스를 사용했습니다. (알차게도 썼네요.)

🤔 어쩌다 이런 걸 만드셨나요??

있으면 재밌을 것 같기도 하고, 있으면 저도 좀 쓰고 싶어서요. 해볼 만한 난이도이기도 했고.

제가 지금까지 업무 포함 웹 개발을 2년 남짓 하면서 개발 관련해서 많은 도움을 얻은 서비스들이 여러 개 있는데요, 당연히 벨로그도 그 중 하나구요. (덕분에 좋은 정보 많이 얻어 가고 있습니다. 👍)

그 중에서 채팅방이라 치면은 오픈카톡과 슬랙, 이 두 가지가 유명하지 않습니까?

그러나 이것들이 뭔가 마음에 안 든다...

이 두 가지 서비스도 이미 좋은 점은 많지만, 두 서비스와 비교해 제가 이 프로젝트에서 꼭 강조하고 싶은 강점이 바로 접근성과 사용 친화적인 코드 에디터입니다.

• 오픈카톡은 접근성은 매우 좋지만, 업무용 메신저가 아니다 보니 Code block을 올릴 수도 없어 그다지 개발자 친화적이진 채팅 플랫폼은 아닙니다. 또한 일부 회사에서는 보안 때문에, 어떤 분들은 사생활 이슈 때문에 PC카톡 자체를 회사에서 사용하지 않는 분들도 있습니다. 저도 업무할 때 PC카톡을 안 씁니다.
• 슬랙은 Code block이 있지만 썩 쓸만한 건 아니고, 오픈카톡보다 폐쇄적이라는 특징이 있습니다. 저같은 경우 슬랙 방은 참여하는 과정이 되게 꼬여 있어서 답답했던 경험이 있었습니다.

위 언급에 말을 더하자면 저는 개발자들이 개발 관련한 각종 주제에 대해서 최대한 제약을 받지 않고, 손쉽게 들어와서 자유롭게 수다를 떨 수 있는 장이 필요하다고 생각을 했습니다. 가만히 앉아서 코드만 짜고 있는 건 심심하니까?

까놓고 말해서,

어찌되었건 우리들은 구글이 없으면 솔직히 일을 할 수가 없잖아요?? 근데, 구글에서도 답을 못 찾으면??😨

사수도 없이 혼자 개발하고 있는 저는 구글링으로 답을 못 찾으면 그 날은 하루종일 머리를 싸매야 됩니다. 누군가에게 도움을 요청하고 싶어도 카톡도 못쓰고 슬랙도 사내 슬랙 방말고는 사용을 못하니 일도 따분함의 연속이었습니다. 벨로그에 좋은 글들이 많은 건 알겠는데, 나는 지금 내 코드가 뭐가 문제인건지 알고 싶다구요!

우리나라 개발자가 2만명 정도는 된다고 누가 그러던데... 그 중 한 명 정도는 내 코드의 문제점을 알지 않을까? 반대로 내가 도움을 줄 수도 있고.

사내 카톡도 안쓰는 저는 혼자 개발만 하고 있는 것도 재미가 없으니, 눈팅만 해도 재밌는 채팅방이 있으면 좀 덜 지루하지 않겠습니까.

마침 회사에서 파이어베이스를 사용 중인 데, 이 서비스가 상당히 매력적인 점이 많아 보이더 군요. 백엔드를 구축할 필요가 전혀 없고, 때문에 만드는 데 오래 걸리지 않을 것 같고, 채팅방 컨셉에 딱 어울리는 NoSQL 고성능 데이터베이스도 있고, 가격 정책도 나쁘지 않겠다, 재미로 프로젝트 하나 만들기에 딱 좋아 보여서 이건 내가 만들어야 겠다고 생각했습니다.

---

💪 좋은 서비스로 만들고 싶어요.

직접 뭔가를 만들어 사람들에게 소개해 보는 게 사실 처음입니다. 🥴

무엇보다 여러분들이 유익하게 쓰는 모습이 보고 싶네요. 뭔가 에러라도 난다면 댓글로라도 얼마든지 알려주세요. 제가 야근은 안하니까 최대한 빠르게 고쳐보도록 하겠습니다.

또한 앞으로 채팅방 목록을 어떻게 구성할 지는 여러분들의 많은 의견이 필요합니다. 얼마든지 더 추가할 수도, 삭제할 수도 있습니다.

긴 글이었지만 읽어주셔서 감사합니다.

👩🏻‍💻 그 외 TMI

• 이 프로젝트는 데이터를 저장하지 않습니다.
  • 클라우드 함수의 스케줄러 함수를 이용해서 5분마다 주기적으로 24시간이 지난 채팅은 삭제하고, 올라온지 7일이 지난 이미지들도 전부 삭제해버립니다.
  • 이유는 프로젝트의 컨셉상 채팅을 저장할 이유도 없고, 파이어스토어가 지출의 대부분을 차지할 것이기 때문에...
• 모바일은 지원하지 않을 예정입니다.
  • 모나코 에디터가 모바일을 지원하질 않아서요...
• DB가 따로 없기 때문에 여러분들의 구글 프로필을 그대로 사용합니다.
• 현재 총 29개의 채팅방을 만들어 두었습니다.
  • Angular AWS C C++ C# CSS Dart Docker Firebase Go GraphQL HTML Java Javascript Kotlin Node.js Objective-C PHP Python R React & React Native Ruby Rust SQL Svelte Swift Typescript Visual Basic Vue
• 혼자 기획하고 혼자 개발해서 만들었습니다.
• 7월 배포 기준 현재까지 돈은 하나도 안 썼습니다.
• 2주면 만들 줄 알았는데 에디터 때문에 4주 걸렸습니다.
• 처음에 devtalk이라고 짓고 싶었는데, 카카오 데브톡과 이름이 겹치길래 그냥 devdevtalk을 줄여서 ddtalk으로 대충 지었습니다.
• UI 디자인은 spectrum.chat을 많이 참고했습니다.